Common UI guidelines state that there should be ellipsis on buttons or menu items when additional information is required from the user to perform the operation, usually via a modal window or a popup. Some operations in Kimchi require additional input from the user (e.g. Template > Edit) while other operations do not (e.g. Template > Clone). Using a common guideline like this makes the UI easier to navigate, so the user can expect a new dialog when clicking on "Template > Edit" and no additional dialog when clicking on "Template > Clone", for example. There is a related discussion on this link: http://stackoverflow.com/q/637683/38333. Append an ellipsis to buttons and menu items that require additional user information. Signed-off-by: Crístian Viana <vianac@linux.vnet.ibm.com> --- ui/js/src/kimchi.host.js | 6 +++--- ui/pages/guest-add.html.tmpl | 2 +- ui/pages/guest.html.tmpl | 4 ++-- ui/pages/tabs/templates.html.tmpl | 2 +- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/ui/js/src/kimchi.host.js b/ui/js/src/kimchi.host.js index 4c94fc1..9bfc844 100644 --- a/ui/js/src/kimchi.host.js +++ b/ui/js/src/kimchi.host.js @@ -84,7 +84,7 @@ kimchi.host_main = function() { title: i18n['KCHREPO6003M'], toolbarButtons: [{ id: 'repositories-grid-add-button', - label: i18n['KCHREPO6012M'], + label: i18n['KCHREPO6012M'] + '…', onClick: function(event) { kimchi.window.open({url:'repository-add.html', class: repo_type}); } @@ -106,7 +106,7 @@ kimchi.host_main = function() { } }, { id: 'repositories-grid-edit-button', - label: i18n['KCHREPO6013M'], + label: i18n['KCHREPO6013M'] + "…", disabled: true, onClick: function(event) { var repository = repositoriesGrid.getSelected(); @@ -291,7 +291,7 @@ kimchi.host_main = function() { title: i18n['KCHDR6002M'], toolbarButtons: [{ id: reportGridID + '-generate-button', - label: i18n['KCHDR6006M'], + label: i18n['KCHDR6006M'] + '…', onClick: function(event) { kimchi.window.open('report-add.html', { close: function() { diff --git a/ui/pages/guest-add.html.tmpl b/ui/pages/guest-add.html.tmpl index 84a1994..ab80a2f 100644 --- a/ui/pages/guest-add.html.tmpl +++ b/ui/pages/guest-add.html.tmpl @@ -47,7 +47,7 @@ <div id="prompt-create-template" class="hidden"> <div>$_("Please create a template first.")</div> <a id="btn-create-template" class="btn-normal" href="templates.html"> - <span class="text">$_("Create a Template")</span> + <span class="text">$_("Create a Template")…</span> </a> </div> <div id="prompt-choose-template" class="hidden"> diff --git a/ui/pages/guest.html.tmpl b/ui/pages/guest.html.tmpl index c7335c8..f23889f 100644 --- a/ui/pages/guest.html.tmpl +++ b/ui/pages/guest.html.tmpl @@ -56,8 +56,8 @@ <span class="text">$_("Actions")</span><span class="arrow"></span> <div class="popover actionsheet right-side" style="width: 250px"> <button class="button-big shutoff-disabled" name="vm-console" ><span class="text">$_("Connect")</span></button> - <button class="button-big shutoff-disabled" name="vm-media"><span class="text">$_("Manage Media")</span></button> - <button class="button-big running-disabled" name="vm-edit"><span class="text">$_("Edit")</span></button> + <button class="button-big shutoff-disabled" name="vm-media"><span class="text">$_("Manage Media")…</span></button> + <button class="button-big running-disabled" name="vm-edit"><span class="text">$_("Edit")…</span></button> <button class="button-big shutoff-hidden" name="vm-reset"><span class="text">$_("Reset")</span></button> <button class="button-big shutoff-hidden" name="vm-shutdown"><span class="text">$_("Shut Down")</span></button> <button class="button-big running-hidden" name="vm-start"><span class="text">$_("Start")</span></button> diff --git a/ui/pages/tabs/templates.html.tmpl b/ui/pages/tabs/templates.html.tmpl index 6ae6640..59f490c 100644 --- a/ui/pages/tabs/templates.html.tmpl +++ b/ui/pages/tabs/templates.html.tmpl @@ -42,7 +42,7 @@ <div class="btn dropdown popable" style="width: 70px"> <span class="text">$_("Actions")</span><span class="arrow"></span> <div class="popover actionsheet right-side" style="width: 250px"> - <a class="button-big template-edit" data-template='{name}'>$_("Edit")</a> + <a class="button-big template-edit" data-template='{name}'>$_("Edit")…</a> <a class="button-big template-clone" data-template='{name}'>$_("Clone")</a> <a class="button-big red template-delete" data-template='{name}'>$_("Delete")</a> </div> -- 1.9.0