[Kimchi-devel] [PATCH] Use ellipsis on buttons when additional input is required

[Crístian Viana]

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 at 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