Fix confusing buttons in tag edit/create form (#3255)

This commit is contained in:
Aleksander Machniak 2014-08-12 05:40:48 -04:00
parent 579f39db63
commit 98792c5755
4 changed files with 81 additions and 69 deletions

View file

@ -75,7 +75,7 @@ window.rcmail && rcmail.addEventListener('init', function() {
} }
}); });
var tagsfilter = [], tag_selector_element, tag_form_data, var tagsfilter = [], tag_selector_element, tag_form_data, tag_form_save_func,
reset_css = {color: '', backgroundColor: ''}; reset_css = {color: '', backgroundColor: ''};
// fills tag cloud with tags list // fills tag cloud with tags list
@ -159,7 +159,7 @@ function manage_tags()
rcmail.gettext('kolab_tags.tags'), rcmail.gettext('kolab_tags.tags'),
[{ [{
text: rcmail.gettext('save'), text: rcmail.gettext('save'),
click: function() { $(this).dialog('close'); tag_form_save(); } click: function() { if (tag_form_save()) $(this).dialog('close'); }
}, },
{ {
text: rcmail.gettext('cancel'), text: rcmail.gettext('cancel'),
@ -176,6 +176,7 @@ function manage_tags()
); );
tag_form_data = {add: {}, 'delete': [], update: {}}; tag_form_data = {add: {}, 'delete': [], update: {}};
tag_form_save_func = null;
var form = $('#tagsform'), var form = $('#tagsform'),
select = $('select', form), select = $('select', form),
@ -218,71 +219,69 @@ function tag_form_dialog(id)
{ {
var tag, form = $('#tagsform'), var tag, form = $('#tagsform'),
content = $('<div id="tageditform"></div>'), content = $('<div id="tageditform"></div>'),
input = $('<input type="text" size="25" />'), name_input = $('<input type="text" size="25" id="tag-form-name" />'),
color_input = $('<input type="text" size="6" class="colors" />'), color_input = $('<input type="text" size="6" class="colors" id="tag-form-color" />'),
close = function() { content.remove(); form.children().show(); }, name_label = $('<label for="tag-form-name">').text(rcmail.gettext('kolab_tags.tagname')),
buttons = [ color_label = $('<label for="tag-form-color">').text(rcmail.gettext('kolab_tags.tagcolor'));
$('<input type="button" />').val(rcmail.gettext('save'))
.click(function() {
var i, tag, name = $.trim(input.val()), color = $.trim(color_input.val());
if (!name) { tag_form_save_func = function() {
alert(rcmail.gettext('kolab_tags.nameempty')); var i, tag, name = $.trim(name_input.val()), color = $.trim(color_input.val());
return;
}
// check if specified name already exists if (!name) {
for (i in rcmail.env.tags) { alert(rcmail.gettext('kolab_tags.nameempty'));
tag = rcmail.env.tags[i]; return false;
if (tag.uid != id) { }
if (tag_form_data.update[tag.uid])
tag.name = tag_form_data.update[tag.uid].name;
if (tag.name == name && !tag_form_data['delete'][tag.uid]) { // check if specified name already exists
alert(rcmail.gettext('kolab_tags.nameexists')); for (i in rcmail.env.tags) {
return; tag = rcmail.env.tags[i];
} if (tag.uid != id) {
} if (tag_form_data.update[tag.uid]) {
} tag.name = tag_form_data.update[tag.uid].name;
for (i in tag_form_data.add) { }
if (i != id) {
if (tag_form_data.add[i].name == name) {
alert(rcmail.gettext('kolab_tags.nameexists'));
return;
}
}
}
// check color if (tag.name == name && !tag_form_data['delete'][tag.uid]) {
if (color) { alert(rcmail.gettext('kolab_tags.nameexists'));
color = color.toUpperCase(); return false;
if (!color.match(/^#/)) }
color = '#' + color; }
if (!color.match(/^#[a-f0-9]{3,6}$/i)) { }
alert(rcmail.gettext('kolab_tags.colorinvalid'));
return;
}
}
tag = {name: name, color: color}; for (i in tag_form_data.add) {
if (i != id) {
if (tag_form_data.add[i].name == name) {
alert(rcmail.gettext('kolab_tags.nameexists'));
return false;
}
}
}
if (!id) { // check color
tag.uid = 'temp' + (new Date()).getTime(); // temp ID if (color) {
tag_form_data.add[tag.uid] = tag; color = color.toUpperCase();
$('<option>').val(tag.uid).text(name)
.on('dblclick', function() { tag_form_dialog(tag.uid); })
.appendTo($('#tagsform select'));
}
else {
tag_form_data[tag_form_data.add[id] ? 'add' : 'update'][id] = tag;
$('#tagsform option[value=' + id + ']').text(name);
}
close(); if (!color.match(/^#/)) {
}), color = '#' + color;
$('<input type="button" />').val(rcmail.gettext('cancel')) }
.click(close)
]; if (!color.match(/^#[a-f0-9]{3,6}$/i)) {
alert(rcmail.gettext('kolab_tags.colorinvalid'));
return false;
}
}
tag = {name: name, color: color};
if (!id) {
tag.uid = 'temp' + (new Date()).getTime(); // temp ID
tag_form_data.add[tag.uid] = tag;
}
else {
tag_form_data[tag_form_data.add[id] ? 'add' : 'update'][id] = tag;
}
return true;
};
// reset inputs // reset inputs
if (id) { if (id) {
@ -293,7 +292,7 @@ function tag_form_dialog(id)
tag = tag_find(id); tag = tag_find(id);
if (tag) { if (tag) {
input.val(tag.name); name_input.val(tag.name);
color_input.val(tag.color.replace(/^#/, '')); color_input.val(tag.color.replace(/^#/, ''));
} }
} }
@ -302,13 +301,17 @@ function tag_form_dialog(id)
// display form // display form
form.children().hide(); form.children().hide();
form.append(content); form.append(content);
content.append([input, '&nbsp;', color_input]).append($('<div></div>').append(buttons)).show(); content.append([name_label, name_input, '<br>', color_label, color_input]).show();
input.focus(); name_input.focus();
} }
// save tags form (create/update/delete tags) // save tags form (create/update/delete tags)
function tag_form_save() function tag_form_save()
{ {
if (tag_form_save_func && !tag_form_save_func()) {
return false;
}
var count = 0; var count = 0;
// check if updates are needed // check if updates are needed
@ -325,11 +328,15 @@ function tag_form_save()
}); });
// check if anything added/deleted // check if anything added/deleted
if (!count) if (!count) {
count = tag_form_data['delete'].length || $.makeArray(tag_form_data.add).length; count = tag_form_data['delete'].length || $.makeArray(tag_form_data.add).length;
}
if (count) if (count) {
rcmail.http_post('plugin.kolab_tags', tag_form_data, rcmail.display_message(rcmail.get_label('kolab_tags.saving'), 'loading')); rcmail.http_post('plugin.kolab_tags', tag_form_data, rcmail.display_message(rcmail.get_label('kolab_tags.saving'), 'loading'));
}
return true;
} }
// ajax response handler // ajax response handler

View file

@ -54,7 +54,7 @@ class kolab_tags_engine
$this->plugin->include_script('kolab_tags.js'); $this->plugin->include_script('kolab_tags.js');
$this->rc->output->add_label('cancel', 'save'); $this->rc->output->add_label('cancel', 'save');
$this->plugin->add_label('tags', 'add', 'edit', 'delete', 'saving', $this->plugin->add_label('tags', 'add', 'edit', 'delete', 'saving',
'nameempty', 'nameexists', 'colorinvalid', 'untag'); 'nameempty', 'nameexists', 'colorinvalid', 'untag', 'tagname', 'tagcolor');
$this->rc->output->add_handlers(array( $this->rc->output->add_handlers(array(
'plugin.taglist' => array($this, 'taglist'), 'plugin.taglist' => array($this, 'taglist'),

View file

@ -11,6 +11,8 @@ $labels['tagremoveall'] = 'Remove all tags';
$labels['add'] = 'Add'; $labels['add'] = 'Add';
$labels['edit'] = 'Edit'; $labels['edit'] = 'Edit';
$labels['delete'] = 'Delete'; $labels['delete'] = 'Delete';
$labels['tagname'] = 'Name';
$labels['tagcolor'] = 'Color';
$labels['nameempty'] = 'Tag name cannot be empty!'; $labels['nameempty'] = 'Tag name cannot be empty!';
$labels['nameexists'] = 'Tag with specified name already exists!'; $labels['nameexists'] = 'Tag with specified name already exists!';
$labels['colorinvalid'] = 'Invalid color specification!'; $labels['colorinvalid'] = 'Invalid color specification!';

View file

@ -97,10 +97,13 @@ ul.toolbarmenu li span.icon.tagremoveall {
float: left; float: left;
} }
#tageditform input[type=button] { #tageditform input {
margin-bottom: 5px;
}
#tageditform label {
width: 60px;
display: inline-block; display: inline-block;
width: 80px;
margin-top: 10px;
} }
.tagbox { .tagbox {