[PATCH 0/3] Update repository's checkbox style
Crístian Viana (3): repository: Place checkbox to the left of its label repository: Make checkbox clickable repository: Remove full stop symbol from checkbox's label po/en_US.po | 2 +- po/pt_BR.po | 4 ++-- po/zh_CN.po | 2 +- ui/pages/repository-add.html.tmpl | 4 ++-- 4 files changed, 6 insertions(+), 6 deletions(-) -- 1.9.0
When the user performs some operations (like updating guest CD-ROMs), a green success message is displayed on top of the screen. This behavior is not common in Kimchi; when an operation performs successfully, nothing is shown. In order to make Kimchi more consistent, remove the code that displays success messages. This patch enforces what was applied by 57f9f9f. Signed-off-by: Crístian Viana <vianac@linux.vnet.ibm.com> --- ui/css/theme-default/guest-edit.css | 24 ------------------------ ui/js/src/kimchi.guest_edit_main.js | 7 ------- ui/js/src/kimchi.guest_media_main.js | 3 --- ui/pages/guest-edit.html.tmpl | 1 - ui/pages/guest-media.html.tmpl | 3 --- 5 files changed, 38 deletions(-) diff --git a/ui/css/theme-default/guest-edit.css b/ui/css/theme-default/guest-edit.css index 43f71c0..0b7ba21 100644 --- a/ui/css/theme-default/guest-edit.css +++ b/ui/css/theme-default/guest-edit.css @@ -156,27 +156,3 @@ .guest-edit-cdrom-button.detach[disabled] { background-position: -54px -108px; } - -#message-container { - color: #555; - font-size: 14px; - height: 100%; - line-height: 56px; -} - -#message-container .message { - background: transparent; -} - -#message-container .success { - color: green; -} - -#message-container .error { - color: red; -} - -#message-container .content { - margin: 0; - position: static; -} diff --git a/ui/js/src/kimchi.guest_edit_main.js b/ui/js/src/kimchi.guest_edit_main.js index 5ec5459..9375c51 100644 --- a/ui/js/src/kimchi.guest_edit_main.js +++ b/ui/js/src/kimchi.guest_edit_main.js @@ -91,20 +91,13 @@ kimchi.guest_edit_main = function() { kimchi.window.open("guest-storage-add.html"); }); - var messageNode = $('#message-container'); var onAttached = function(params) { - $(messageNode).empty(); - kimchi.message.success(i18n['KCHVMCD6006M'], messageNode); refreshCDROMs(); }; var onReplaced = function(params) { - $(messageNode).empty(); - kimchi.message.success(i18n['KCHVMCD6007M'], messageNode); refreshCDROMs(); }; var onDetached = function(params) { - $(messageNode).empty(); - kimchi.message.success(i18n['KCHVMCD6008M'], messageNode); refreshCDROMs(); }; diff --git a/ui/js/src/kimchi.guest_media_main.js b/ui/js/src/kimchi.guest_media_main.js index 1669646..02009ec 100644 --- a/ui/js/src/kimchi.guest_media_main.js +++ b/ui/js/src/kimchi.guest_media_main.js @@ -45,10 +45,7 @@ kimchi.guest_media_main = function() { refreshCDROMs(); - var messageNode = $('#message-container'); var onReplaced = function(params) { - $(messageNode).empty(); - kimchi.message.success(i18n['KCHVMCD6007M'], messageNode); refreshCDROMs(); }; kimchi.topic('kimchi/vmCDROMReplaced').subscribe(onReplaced); diff --git a/ui/pages/guest-edit.html.tmpl b/ui/pages/guest-edit.html.tmpl index ba6ba2b..804fc39 100644 --- a/ui/pages/guest-edit.html.tmpl +++ b/ui/pages/guest-edit.html.tmpl @@ -111,7 +111,6 @@ <span class="text">$_("Save")</span> </button> </div> - <div id="message-container"></div> </footer> </div> <script id="cdrom-row-tmpl" type="text/html"> diff --git a/ui/pages/guest-media.html.tmpl b/ui/pages/guest-media.html.tmpl index eb12d72..83ad6ab 100644 --- a/ui/pages/guest-media.html.tmpl +++ b/ui/pages/guest-media.html.tmpl @@ -34,9 +34,6 @@ </fieldset> </form> </div> - <footer> - <div id="message-container"></div> - </footer> </div> <script id="cdrom-row-tmpl" type="text/html"> <div> -- 1.8.5.3
Please ignore this patch. On 24-04-2014 13:50, Crístian Viana wrote:
When the user performs some operations (like updating guest CD-ROMs), a green success message is displayed on top of the screen. This behavior is not common in Kimchi; when an operation performs successfully, nothing is shown.
In order to make Kimchi more consistent, remove the code that displays success messages.
This patch enforces what was applied by 57f9f9f.
Signed-off-by: Crístian Viana <vianac@linux.vnet.ibm.com>
In general, it is more common to have a checkbox placed to the left side of its corresponding label. Also, all the other checkboxes in Kimchi are placed to the left side of their labels. Change the location of the checkbox "Repository is a mirror" so that the control element is placed to the left side of its label. Signed-off-by: Crístian Viana <vianac@linux.vnet.ibm.com> --- ui/pages/repository-add.html.tmpl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/pages/repository-add.html.tmpl b/ui/pages/repository-add.html.tmpl index 5502057..839ba1d 100644 --- a/ui/pages/repository-add.html.tmpl +++ b/ui/pages/repository-add.html.tmpl @@ -66,8 +66,8 @@ </div> <div class="field yum"> <p class="yum"> - $_("Repository is a mirror.") <input type="checkbox" name="isMirror" value="true" /> + $_("Repository is a mirror.") </p> </div> </section> -- 1.9.0
Currently, Kimchi uses different ways of displaying error messages. Use the standard message (kimchi.message) to display HTML errors. This is one step towards the solution of issue #215. Signed-off-by: Crístian Viana <vianac@linux.vnet.ibm.com> --- ui/css/theme-default/guest-cdrom-edit.css | 5 ----- ui/css/theme-default/guest-storage-add.css | 5 ----- ui/css/theme-default/login-window.css | 9 --------- ui/css/theme-default/report-add.css | 4 ---- ui/js/src/kimchi.guest_cdrom_edit_main.js | 4 +--- ui/js/src/kimchi.guest_storage_add.main.js | 4 +--- ui/js/src/kimchi.login_window.js | 2 +- ui/js/src/kimchi.report_add_main.js | 6 ++---- ui/pages/guest-cdrom-edit.html.tmpl | 3 --- ui/pages/guest-storage-add.html.tmpl | 3 --- ui/pages/login-window.html.tmpl | 1 - ui/pages/report-add.html.tmpl | 1 - 12 files changed, 5 insertions(+), 42 deletions(-) diff --git a/ui/css/theme-default/guest-cdrom-edit.css b/ui/css/theme-default/guest-cdrom-edit.css index 7008d73..9c539c9 100644 --- a/ui/css/theme-default/guest-cdrom-edit.css +++ b/ui/css/theme-default/guest-cdrom-edit.css @@ -44,11 +44,6 @@ cursor: not-allowed; } -#cdrom-error-message { - color: red; - padding: 5px; -} - #vm-cdrom-button-edit[disabled] { background: #c0c0c0; color: #ddd; diff --git a/ui/css/theme-default/guest-storage-add.css b/ui/css/theme-default/guest-storage-add.css index c8c31a2..4da8389 100644 --- a/ui/css/theme-default/guest-storage-add.css +++ b/ui/css/theme-default/guest-storage-add.css @@ -52,11 +52,6 @@ cursor: not-allowed; } -#storage-error-message { - color: red; - padding: 5px; -} - #vm-storage-button-add[disabled] { background: #c0c0c0; color: #ddd; diff --git a/ui/css/theme-default/login-window.css b/ui/css/theme-default/login-window.css index fe83de0..27f8502 100644 --- a/ui/css/theme-default/login-window.css +++ b/ui/css/theme-default/login-window.css @@ -78,15 +78,6 @@ color: #DDD; } -#login-window .login-panel .error-message { - color: red; - font-size: 15px; - line-height: 22px; - width: 306px; - height: 22px; - margin-top: -10px; -} - .language { display:inline-block; float:right; diff --git a/ui/css/theme-default/report-add.css b/ui/css/theme-default/report-add.css index 753f100..236029a 100644 --- a/ui/css/theme-default/report-add.css +++ b/ui/css/theme-default/report-add.css @@ -14,10 +14,6 @@ width: 100%; } -#report-error-message { - color: red; -} - #button-report-add[disabled] { background: #c0c0c0 url(../../images/theme-default/loading.gif) 7px center no-repeat; diff --git a/ui/js/src/kimchi.guest_cdrom_edit_main.js b/ui/js/src/kimchi.guest_cdrom_edit_main.js index 45fc80c..abce9a5 100644 --- a/ui/js/src/kimchi.guest_cdrom_edit_main.js +++ b/ui/js/src/kimchi.guest_cdrom_edit_main.js @@ -21,7 +21,6 @@ kimchi.guest_cdrom_edit_main = function() { var nameTextbox = $('input[name="dev"]', cdromEditForm); var typeTextbox = $('input[name="type"]', cdromEditForm); var pathTextbox = $('input[name="path"]', cdromEditForm); - var errorMessage = $('#cdrom-error-message'); var originalPath = null; kimchi.retrieveVMStorage({ @@ -49,7 +48,6 @@ kimchi.guest_cdrom_edit_main = function() { $(c).prop('disabled', true); }); $(submitButton).addClass('loading').text(i18n['KCHVMCD6005M']); - $(errorMessage).text(''); var settings = { vm: kimchi.selectedGuest, @@ -65,7 +63,7 @@ kimchi.guest_cdrom_edit_main = function() { }, function(result) { var errText = result['reason'] || result['responseJSON']['reason']; - $(errorMessage).text(errText); + kimchi.message.error(errText); $.each([submitButton, nameTextbox, pathTextbox], function(i, c) { $(c).prop('disabled', false); diff --git a/ui/js/src/kimchi.guest_storage_add.main.js b/ui/js/src/kimchi.guest_storage_add.main.js index 7c96e3a..9e232d7 100644 --- a/ui/js/src/kimchi.guest_storage_add.main.js +++ b/ui/js/src/kimchi.guest_storage_add.main.js @@ -27,7 +27,6 @@ kimchi.guest_storage_add_main = function() { var nameTextbox = $('input[name="dev"]', storageAddForm); var typeTextbox = $('input[name="type"]', storageAddForm); var pathTextbox = $('input[name="path"]', storageAddForm); - var errorMessage = $('#storage-error-message'); var submitForm = function(event) { if(submitButton.prop('disabled')) { @@ -46,7 +45,6 @@ kimchi.guest_storage_add_main = function() { $(c).prop('disabled', true); }); $(submitButton).addClass('loading').text(i18n['KCHVMCD6003M']); - $(errorMessage).text(''); var settings = { vm: kimchi.selectedGuest, @@ -66,7 +64,7 @@ kimchi.guest_storage_add_main = function() { }, function(result) { var errText = result['reason'] || result['responseJSON']['reason']; - $(errorMessage).text(errText); + kimchi.message.error(errText); $.each([submitButton, nameTextbox, pathTextbox], function(i, c) { $(c).prop('disabled', false); diff --git a/ui/js/src/kimchi.login_window.js b/ui/js/src/kimchi.login_window.js index e9af18f..4933a79 100644 --- a/ui/js/src/kimchi.login_window.js +++ b/ui/js/src/kimchi.login_window.js @@ -94,7 +94,7 @@ kimchi.login_main = function() { kimchi.user.showUser(true); kimchi.window.close(); }, function() { - $('#message-container').text(i18n['KCHAUTH6001E']); + kimchi.message.error(i18n['KCHAUTH6001E']); $('#btn-login').prop('disabled', false).text(i18n['KCHAUTH6001M']); placeCursor('user-id'); }); diff --git a/ui/js/src/kimchi.report_add_main.js b/ui/js/src/kimchi.report_add_main.js index 757ee21..50807f0 100644 --- a/ui/js/src/kimchi.report_add_main.js +++ b/ui/js/src/kimchi.report_add_main.js @@ -2,7 +2,6 @@ kimchi.report_add_main = function() { var addReportForm = $('#form-report-add'); var submitButton = $('#button-report-add'); var nameTextbox = $('input[name="name"]', addReportForm); - var errorMessage = $('#report-error-message'); var submitForm = function(event) { if(submitButton.prop('disabled')) { return false; @@ -10,11 +9,10 @@ kimchi.report_add_main = function() { var reportName = nameTextbox.val(); var validator = RegExp("^[A-Za-z0-9-]*$"); if (!validator.test(reportName)) { - errorMessage.text(i18n['KCHDR6011M']); + kimchi.message.error(i18n['KCHDR6011M']); return false; } var formData = addReportForm.serializeObject(); - errorMessage.text(''); submitButton .text(i18n['KCHDR6007M']) .prop('disabled', true); @@ -31,7 +29,7 @@ kimchi.report_add_main = function() { else { var errText = result['responseJSON']['reason']; } - result && $('#report-error-message').text(errText); + result && kimchi.message.error(errText) submitButton .text(i18n['KCHDR6006M']) .prop('disabled', false); diff --git a/ui/pages/guest-cdrom-edit.html.tmpl b/ui/pages/guest-cdrom-edit.html.tmpl index 9f07d9f..b95119f 100644 --- a/ui/pages/guest-cdrom-edit.html.tmpl +++ b/ui/pages/guest-cdrom-edit.html.tmpl @@ -55,9 +55,6 @@ <input type="text" class="text" name="path" /> </div> </section> - <section class="form-section"> - <div id="cdrom-error-message"></div> - </section> </form> </div> <footer> diff --git a/ui/pages/guest-storage-add.html.tmpl b/ui/pages/guest-storage-add.html.tmpl index c190d0e..71e0610 100644 --- a/ui/pages/guest-storage-add.html.tmpl +++ b/ui/pages/guest-storage-add.html.tmpl @@ -62,9 +62,6 @@ <input type="text" class="text" name="path" /> </div> </section> - <section class="form-section"> - <div id="storage-error-message"></div> - </section> </form> </div> <footer> diff --git a/ui/pages/login-window.html.tmpl b/ui/pages/login-window.html.tmpl index dfcb6b0..b7850e5 100644 --- a/ui/pages/login-window.html.tmpl +++ b/ui/pages/login-window.html.tmpl @@ -33,7 +33,6 @@ </header> <div class="content login-panel"> <form id="form-login" action="/login" method="POST"> - <div id="message-container" class="row error-message"></div> <div class="row"> <input type="text" id="user-id" name="userid" required="required" placeholder="$_("User Name")" /> <div id="user-id-msg" class="msg-required"></div> diff --git a/ui/pages/report-add.html.tmpl b/ui/pages/report-add.html.tmpl index 18216ce..b7209fe 100644 --- a/ui/pages/report-add.html.tmpl +++ b/ui/pages/report-add.html.tmpl @@ -38,7 +38,6 @@ $_("The name used to identify the report. If omitted, a name will be chosen based on current time. Name can contain: letters, digits and hyphen (\"-\").") </span> <input type="text" class="text" id="report-name-textbox" name="name" /> - <span id="report-error-message"></span> </div> </section> </form> -- 1.8.5.3
Please ignore this patch. On 24-04-2014 13:50, Crístian Viana wrote:
Currently, Kimchi uses different ways of displaying error messages.
Use the standard message (kimchi.message) to display HTML errors.
This is one step towards the solution of issue #215.
Signed-off-by: Crístian Viana <vianac@linux.vnet.ibm.com>
A good usability feature of an HTML form is to click on an element's label to activate the element itself. For example, when clicking on a checkbox's label, the checkbox itself is checked, instead of requiring the user to click on the small corresponding element. Assign the checkbox "Repository is a mirror" to its corresponding label. Signed-off-by: Crístian Viana <vianac@linux.vnet.ibm.com> --- ui/pages/repository-add.html.tmpl | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/pages/repository-add.html.tmpl b/ui/pages/repository-add.html.tmpl index 839ba1d..28e12b7 100644 --- a/ui/pages/repository-add.html.tmpl +++ b/ui/pages/repository-add.html.tmpl @@ -66,8 +66,8 @@ </div> <div class="field yum"> <p class="yum"> - <input type="checkbox" name="isMirror" value="true" /> - $_("Repository is a mirror.") + <input type="checkbox" name="isMirror" value="true" id="isMirror" /> + <label for="isMirror">$_("Repository is a mirror.")</label> </p> </div> </section> -- 1.9.0
Error messages which are associated to error codes should display their error codes as well, in order to make problems identification easier. Use a different error function to display the error code in the error message. Signed-off-by: Crístian Viana <vianac@linux.vnet.ibm.com> --- ui/js/src/kimchi.login_window.js | 2 +- ui/js/src/kimchi.report_add_main.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/js/src/kimchi.login_window.js b/ui/js/src/kimchi.login_window.js index 4933a79..f18981e 100644 --- a/ui/js/src/kimchi.login_window.js +++ b/ui/js/src/kimchi.login_window.js @@ -94,7 +94,7 @@ kimchi.login_main = function() { kimchi.user.showUser(true); kimchi.window.close(); }, function() { - kimchi.message.error(i18n['KCHAUTH6001E']); + kimchi.message.error.code('KCHAUTH6001E'); $('#btn-login').prop('disabled', false).text(i18n['KCHAUTH6001M']); placeCursor('user-id'); }); diff --git a/ui/js/src/kimchi.report_add_main.js b/ui/js/src/kimchi.report_add_main.js index 50807f0..15cc76b 100644 --- a/ui/js/src/kimchi.report_add_main.js +++ b/ui/js/src/kimchi.report_add_main.js @@ -9,7 +9,7 @@ kimchi.report_add_main = function() { var reportName = nameTextbox.val(); var validator = RegExp("^[A-Za-z0-9-]*$"); if (!validator.test(reportName)) { - kimchi.message.error(i18n['KCHDR6011M']); + kimchi.message.error.code('KCHDR6011M'); return false; } var formData = addReportForm.serializeObject(); -- 1.8.5.3
Please ignore this patch. On 24-04-2014 13:50, Crístian Viana wrote:
Error messages which are associated to error codes should display their error codes as well, in order to make problems identification easier.
Use a different error function to display the error code in the error message.
Signed-off-by: Crístian Viana <vianac@linux.vnet.ibm.com>
Checkboxes' labels usually do not contain a full stop symbol at the end of sentences. Remove the full stop symbol from the checkbox "Repository is a mirror". Signed-off-by: Crístian Viana <vianac@linux.vnet.ibm.com> --- po/en_US.po | 2 +- po/pt_BR.po | 4 ++-- po/zh_CN.po | 2 +- ui/pages/repository-add.html.tmpl | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/po/en_US.po b/po/en_US.po index f7b6e38..dced9a8 100644 --- a/po/en_US.po +++ b/po/en_US.po @@ -488,7 +488,7 @@ msgstr "" msgid "URL to the repository. Supported protocols are http, ftp, and file." msgstr "" -msgid "Repository is a mirror." +msgid "Repository is a mirror" msgstr "" msgid "Distribution" diff --git a/po/pt_BR.po b/po/pt_BR.po index 098ca8e..bcc84bb 100644 --- a/po/pt_BR.po +++ b/po/pt_BR.po @@ -521,8 +521,8 @@ msgstr "Campo obrigatório" msgid "URL to the repository. Supported protocols are http, ftp, and file." msgstr "URL para o repositório. Protocolos suportados são http, ftp e arquivo." -msgid "Repository is a mirror." -msgstr "Repositório é um mirror." +msgid "Repository is a mirror" +msgstr "Repositório é um mirror" msgid "Distribution" msgstr "Distribuição" diff --git a/po/zh_CN.po b/po/zh_CN.po index a1a72b9..e8933e8 100644 --- a/po/zh_CN.po +++ b/po/zh_CN.po @@ -499,7 +499,7 @@ msgstr "必需的字段" msgid "URL to the repository. Supported protocols are http, ftp, and file." msgstr "软件仓库的URL，支持的协议有http、ftp、和file" -msgid "Repository is a mirror." +msgid "Repository is a mirror" msgstr "软件仓库是一个镜像" msgid "Distribution" diff --git a/ui/pages/repository-add.html.tmpl b/ui/pages/repository-add.html.tmpl index 28e12b7..05b4de9 100644 --- a/ui/pages/repository-add.html.tmpl +++ b/ui/pages/repository-add.html.tmpl @@ -67,7 +67,7 @@ <div class="field yum"> <p class="yum"> <input type="checkbox" name="isMirror" value="true" id="isMirror" /> - <label for="isMirror">$_("Repository is a mirror.")</label> + <label for="isMirror">$_("Repository is a mirror")</label> </p> </div> </section> -- 1.9.0
participants (2)
-
Aline Manera -
Crístian Viana