3:35 p.m.
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(a)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