replaced toolbar buttons with icon buttons

diff --git a/lib/enyo-x/lib/package.js b/lib/enyo-x/lib/package.js
index 5aeee48..ec703db 100644 (file)
--- a/lib/enyo-x/lib/package.js
+++ b/lib/enyo-x/lib/package.js
@@ -4,5 +4,6 @@ enyo.depends(
   "nvd3/lib/d3.v3.js",
   "nvd3/nv.d3.min.js",
   "font-onyx/lib/Icon.js",
-  "font-onyx/lib/IconButton.js"
+  "font-onyx/lib/IconButton.js",
+  "font-onyx/lib/TextIcon.js"
 );

diff --git a/lib/enyo-x/source/less/screen.less b/lib/enyo-x/source/less/screen.less
index e6fd981..ee9d505 100644 (file)
--- a/lib/enyo-x/source/less/screen.less
+++ b/lib/enyo-x/source/less/screen.less
@@ -51,6 +51,11 @@
 @baseFontSize: 100%;
 @panelsFontSize: 5em;
 
+// Sizing
+@defaultPanelWidth: 320px;
+@toolbarHeight: 55px;
+@searchLength: 185px;
+
 // Imports
 // ------
 
@@ -171,13 +176,13 @@ body {
   -webkit-overflow-scrolling: touch;
 }
 
-/**
-  Sets a fixed height on all of the toolbars
-  so that they're not dependent on the icon height
-*/
-.onyx-menu-toolbar {
-  height: 57px;
-}
+// /**
+//   Sets a fixed height on all of the toolbars
+//   so that they're not dependent on the icon height
+// */
+// .onyx-menu-toolbar {
+//   height: 57px;
+// }
 
 .item {
   position: relative;
@@ -415,8 +420,48 @@ body {
   width: 220px;
 }
 
-.xv-toolbar-label {
-  width: 180px;
+.onyx-toolbar {
+  height: @toolbarHeight;
+  padding: 4px;
+  background: @header-gray;
+  border: none;
+
+  .onyx-icon-button, .onyx-popup-decorator {
+    margin: 0 10px 0 10px;
+    div {
+      text-shadow: none;
+      color: @white;
+    }
+    &.lock {
+      div {
+        color: @light-orange;
+      }
+    }
+  }
+
+  .onyx-popup-decorator {
+    // cancel the margin that
+    // is on the icon if there's a menu
+    .onyx-icon-button {
+      margin: 0;
+    }
+    height: 40px;
+    width: 40px;
+  }
+
+  .onyx-menu {
+    margin-top: 10px;
+  }
+
+  .spacer {
+    margin: 0;
+  }
+
+  .xv-toolbar-label, .xv-search {
+    width: @searchLength;
+    margin: 0;
+    margin-left: 6px;
+  }
 }
 
 .xv-totals-panel {

diff --git a/lib/enyo-x/source/stylesheets/screen.css b/lib/enyo-x/source/stylesheets/screen.css
index d261623..d77cb32 100755 (executable)
--- a/lib/enyo-x/source/stylesheets/screen.css
+++ b/lib/enyo-x/source/stylesheets/screen.css
@@ -2662,13 +2662,6 @@ body {
   overflow: auto;
   -webkit-overflow-scrolling: touch;
 }
-/**
-  Sets a fixed height on all of the toolbars
-  so that they're not dependent on the icon height
-*/
-.onyx-menu-toolbar {
-  height: 57px;
-}
 .item {
   position: relative;
   padding: 16px 12px;
@@ -2857,8 +2850,43 @@ body {
 .xv-toolbar-moved {
   width: 220px;
 }
-.xv-toolbar-label {
-  width: 180px;
+.onyx-toolbar {
+  height: 55px;
+  padding: 4px;
+  background: #4c4c4c;
+  border: none;
+}
+.onyx-toolbar .onyx-icon-button,
+.onyx-toolbar .onyx-popup-decorator {
+  margin: 0 10px 0 10px;
+}
+.onyx-toolbar .onyx-icon-button div,
+.onyx-toolbar .onyx-popup-decorator div {
+  text-shadow: none;
+  color: #ffffff;
+}
+.onyx-toolbar .onyx-icon-button.lock div,
+.onyx-toolbar .onyx-popup-decorator.lock div {
+  color: #ff9c00;
+}
+.onyx-toolbar .onyx-popup-decorator {
+  height: 40px;
+  width: 40px;
+}
+.onyx-toolbar .onyx-popup-decorator .onyx-icon-button {
+  margin: 0;
+}
+.onyx-toolbar .onyx-menu {
+  margin-top: 10px;
+}
+.onyx-toolbar .spacer {
+  margin: 0;
+}
+.onyx-toolbar .xv-toolbar-label,
+.onyx-toolbar .xv-search {
+  width: 185px;
+  margin: 0;
+  margin-left: 6px;
 }
 .xv-totals-panel {
   padding: 0;

diff --git a/lib/enyo-x/source/views/navigator.js b/lib/enyo-x/source/views/navigator.js
index 622c8fb..63430c6 100644 (file)
--- a/lib/enyo-x/source/views/navigator.js
+++ b/lib/enyo-x/source/views/navigator.js
@@ -71,21 +71,23 @@ trailing:true*/
     components: [
       {kind: "FittableRows", name: "navigationMenu", classes: "left", components: [
         {kind: "onyx.Toolbar", classes: "onyx-menu-toolbar", components: [
-          {kind: "onyx.Button", name: "backButton", content: "_logout".loc(),
-              ontap: "backTapped"},
+          {kind: "font.TextIcon", name: "backButton",
+            content: "_logout".loc(), ontap: "backTapped", icon: "chevron-left"},
           {kind: "Group", name: "iconButtonGroup", tag: null, components: [
-            {kind: "XV.IconButton", name: "historyIconButton",
-               src: "/assets/menu-icon-bookmark.png",
+            {kind: "font.TextIcon", name: "historyIconButton",
+               icon: "time",
                ontap: "showHistory", content: "_history".loc()},
-            {kind: "XV.IconButton", name: "searchIconButton",
-               src: "/assets/menu-icon-search.png",
-               ontap: "showParameters", content: "_advancedSearch".loc(), showing: false}
+            {kind: "font.TextIcon", name: "searchIconButton",
+               icon: "search",
+               ontap: "showParameters", content: "_search".loc(), showing: false},
+            {kind: "font.TextIcon", name: "helpIconButton",
+               icon: "question",
+               ontap: "showHelp", content: "_help".loc()}
           ]},
-          {kind: "onyx.MenuDecorator", style: "margin: 0;", onSelect: "actionSelected", components: [
-            {kind: "XV.IconButton", src: "/assets/menu-icon-gear.png",
-                                                       content: "_actions".loc(), name: "actionButton",
-              classes: "xv-action-icon"},
-            {kind: "onyx.Menu", name: "actionMenu"}
+          {kind: "onyx.MenuDecorator", onSelect: "actionSelected", components: [
+            {kind: "font.TextIcon", icon: "cog",
+              content: "_actions".loc(), name: "actionButton"},
+            {kind: "onyx.Menu", name: "actionMenu", floating: true}
           ]},
           {kind: "onyx.Popup", name: "aboutPopup", centered: true,
             modal: true, floating: true, scrim: true, components: [
@@ -115,34 +117,29 @@ trailing:true*/
           classes: "onyx-menu-toolbar", movedClass: "xv-toolbar-moved", components: [
           {name: "rightLabel", classes: "xv-toolbar-label"},
           // The MoreToolbar is a FittableColumnsLayout, so this spacer takes up all available space
-          {name: "spacer", content: "", fit: true},
+          {name: "spacer", classes: "spacer", fit: true},
+          {kind: "font.TextIcon", name: "refreshButton",
+            icon: "rotate-right", content: "_refresh".loc(),
+            ontap: "requery", showing: false},
           // Selectable "New" menu which is hidden by default
-          {kind: "onyx.MenuDecorator", style: "margin: 0;", onSelect: "newRecord", components: [
-            {kind: "XV.IconButton", src: "/assets/menu-icon-new.png",
-              content: "_new".loc(), name: "newMenuButton", showing: false},
-            {kind: "onyx.Menu", name: "newMenu"}
+          {kind: "onyx.MenuDecorator", onSelect: "newRecord", showing: false, name: "newMenuButton", components: [
+            {kind: "font.TextIcon", icon: "plus", content: "_new".loc()},
+            {kind: "onyx.Menu", name: "newMenu", floating: true}
           ]},
-          // Button to initiate new workspace
-          {kind: "XV.IconButton", src: "/assets/menu-icon-new.png",
+          {kind: "font.TextIcon", icon: "plus",
             content: "_new".loc(), name: "newButton", ontap: "newRecord", showing: false},
-          {kind: "onyx.MenuDecorator", style: "margin: 0;", onSelect: "exportSelected", components: [
-            {kind: "XV.IconButton", src: "/assets/menu-icon-export.png",
-              content: "_export".loc(), name: "exportButton"},
-            {kind: "onyx.Menu", name: "exportMenu", showing: false}
+          {kind: "font.TextIcon", name: "sortButton", content: "_sort".loc(),
+            icon: "sort", ontap: "showSortPopup", showing: false},
+          {kind: "onyx.MenuDecorator", onSelect: "exportSelected", name: "exportButton", components: [
+            {kind: "font.TextIcon", icon: "share", content: "_export".loc()},
+            {kind: "onyx.Menu", name: "exportMenu", floating: true}
           ]},
-          {kind: "XV.IconButton", name: "sortButton", content: "_sort".loc(),
-            src: "/assets/sort-icon.png", ontap: "showSortPopup", showing: false,
-            classes: "xv-sort-icon"},
-          {name: "refreshButton", kind: "XV.IconButton",
-            src: "/assets/menu-icon-refresh.png", content: "_refresh".loc(),
-            ontap: "requery", showing: false},
           {name: "search", kind: "onyx.InputDecorator",
             showing: false, components: [
-            {name: 'searchInput', kind: "onyx.Input", style: "width: 200px;",
+            {name: 'searchInput', kind: "onyx.Input", classes: "xv-search",
               placeholder: "_search".loc(), onchange: "inputChanged"},
             {kind: "Image", src: "/assets/search-input-search.png",
-              name: "searchJump", ontap: "jump"},
-            {kind: "XV.SortPopup", name: "sortPopup", showing: false}
+              name: "searchJump", ontap: "jump"}
           ]}
         ]},
         {name: "messageHeader", content: "", classes: ""},

diff --git a/lib/enyo-x/source/views/search.js b/lib/enyo-x/source/views/search.js
index 2a5d34d..d6950aa 100644 (file)
--- a/lib/enyo-x/source/views/search.js
+++ b/lib/enyo-x/source/views/search.js
@@ -45,8 +45,8 @@ trailing:true, white:true*/
       {name: "parameterPanel", kind: "FittableRows", classes: "left",
         components: [
         {kind: "onyx.Toolbar", classes: "onyx-menu-toolbar", components: [
-          {kind: "onyx.Button", name: "backButton", content: "_back".loc(),
-            ontap: "close"}
+          {kind: "font.TextIcon", name: "backButton",
+            content: "_back".loc(), ontap: "close", icon: "chevron-left"}
         ]},
         {name: "leftTitle", content: "", classes: "xv-parameter-title"},
         {kind: "Scroller", name: "parameterScroller", fit: true}
@@ -55,14 +55,16 @@ trailing:true, white:true*/
         // the onyx-menu-toolbar class keeps the popups from being hidden
         {kind: "onyx.MoreToolbar", name: "contentToolbar",
           classes: "onyx-menu-toolbar", movedClass: "xv-toolbar-moved", components: [
-          {name: "rightLabel", content: "_search".loc(), style: "xv-toolbar-label"},
+          {name: "rightLabel", content: "_search".loc(), classes: "xv-toolbar-label"},
           // The MoreToolbar is a FittableColumnsLayout, so this spacer takes up all available space
-          {name: "spacer", content: "", fit: true},
-          {name: "search", kind: "onyx.InputDecorator",
-            components: [
-            {name: 'searchInput', kind: "onyx.Input", style: "width: 200px;",
+          {name: "spacer", classes: "spacer", fit: true},
+          {kind: "font.TextIcon", name: "refreshButton",
+              icon: "rotate-right", content: "_refresh".loc(), ontap: "requery"},
+          {name: "search", kind: "onyx.InputDecorator", components: [
+            {name: 'searchInput', kind: "onyx.Input", classes: "xv-search",
               placeholder: "_search".loc(), onchange: "requery"},
-            {kind: "Image", src: "/assets/search-input-search.png"}
+            {kind: "Image", src: "/assets/search-input-search.png",
+              name: "searchJump", ontap: "jump"}
           ]}
         ]},
         {name: "contentPanels", kind: "Panels", margin: 0, fit: true,

diff --git a/lib/enyo-x/source/views/transaction_list_container.js b/lib/enyo-x/source/views/transaction_list_container.js
index 7a2482a..4623d4c 100644 (file)
--- a/lib/enyo-x/source/views/transaction_list_container.js
+++ b/lib/enyo-x/source/views/transaction_list_container.js
@@ -39,10 +39,10 @@ trailing:true, white:true, strict:false*/
       {name: "parameterPanel", kind: "FittableRows", classes: "left",
         components: [
         {kind: "onyx.Toolbar", classes: "onyx-menu-toolbar", components: [
-          {kind: "onyx.Button", name: "backButton", content: "_back".loc(), ontap: "close"},
-          {kind: "onyx.MenuDecorator", style: "margin: 0;",
-            onSelect: "actionSelected", components: [
-            {kind: "XV.IconButton", src: "/assets/menu-icon-gear.png",
+          {kind: "font.TextIcon", name: "backButton",
+            content: "_back".loc(), ontap: "close", icon: "chevron-left"},
+          {kind: "onyx.MenuDecorator", onSelect: "actionSelected", components: [
+            {kind: "font.TextIcon", icon: "cog",
               content: "_actions".loc(), name: "actionButton"},
             {kind: "onyx.Menu", name: "actionMenu"}
           ]}
@@ -54,14 +54,14 @@ trailing:true, white:true, strict:false*/
         {kind: "onyx.MoreToolbar", name: "contentToolbar",
           classes: "onyx-menu-toolbar", movedClass: "xv-toolbar-moved", components: [
           {name: "rightLabel", content: "_search".loc(), classes: "xv-toolbar-label"},
-          {name: "spacer", content: "", fit: true},
-          {kind: "onyx.Button", name: "printButton", showing: false,
-            content: "_print".loc(), onclick: "print"},
-          {kind: "onyx.Button", name: "refreshButton", disabled: false,
-            content: "_refresh".loc(), onclick: "requery"},
-          {kind: "onyx.Button", name: "postButton",
-            disabled: true, classes: "save", showing: false,
-            content: "_post".loc(), onclick: "post"},
+          {name: "spacer", classes: "spacer", fit: true},
+          {kind: "font.TextIcon", name: "printButton", showing: false,
+            content: "_print".loc(), ontap: "print", icon: "print"},
+          {kind: "font.TextIcon", name: "refreshButton",
+            content: "_refresh".loc(), onclick: "requery", icon: "rotate-right"},
+          {kind: "font.TextIcon", name: "postButton",
+            disabled: true, icon: "save", classes: "save",
+            content: "_post".loc(), ontap: "post"},
           {name: "listItemMenu", kind: "onyx.Menu", floating: true,
             onSelect: "listActionSelected", maxHeight: 500}
         ]},
@@ -82,7 +82,7 @@ trailing:true, white:true, strict:false*/
     },
     close: function () {
       var callback = this.getCallback();
-      
+
       this.doPrevious();
       if (callback) { callback(); }
     },

diff --git a/lib/enyo-x/source/views/workspace.js b/lib/enyo-x/source/views/workspace.js
index f983f8e..4d310b4 100644 (file)
--- a/lib/enyo-x/source/views/workspace.js
+++ b/lib/enyo-x/source/views/workspace.js
@@ -632,14 +632,12 @@ trailing:true, white:true, strict: false*/
     components: [
       {kind: "FittableRows", name: "navigationPanel", classes: "left", components: [
         {kind: "onyx.Toolbar", name: "menuToolbar", components: [
-          {kind: "onyx.Button", name: "backButton",
-            content: "_back".loc(), onclick: "close"},
-          {kind: "onyx.MenuDecorator", style: "margin: 0;", onSelect: "actionSelected",
-            components: [
-            {kind: "XV.IconButton", src: "/assets/menu-icon-gear.png",
-              content: "_actions".loc(), name: "actionButton",
-              classes: "xv-action-icon"},
-            {kind: "onyx.Menu", name: "actionMenu", maxHeight: 900}
+          {kind: "font.TextIcon", name: "backButton",
+            content: "_back".loc(), ontap: "close", icon: "chevron-left"},
+          {kind: "onyx.MenuDecorator", onSelect: "actionSelected", components: [
+            {kind: "font.TextIcon", icon: "cog",
+              content: "_actions".loc(), name: "actionButton"},
+            {kind: "onyx.Menu", name: "actionMenu", floating: true}
           ]}
         ]},
         {name: "loginInfo", content: "", classes: "xv-navigator-header"},
@@ -651,22 +649,23 @@ trailing:true, white:true, strict: false*/
       {kind: "FittableRows", name: "contentPanel", components: [
         {kind: "onyx.MoreToolbar", name: "contentToolbar", components: [
           {kind: "onyx.Grabber", classes: "spacer"},
-          {name: "title", style: "width: 200px"},
-                                       // The MoreToolbar is a FittableColumnsLayout, so this spacer takes up all available space
-          {name: "space", fit: true},
-          {kind: "Image", showing: false, name: "lockImage", ontap: "lockTapped",
-            src: "/assets/menu-icon-lock.png"},
-          {kind: "onyx.Button", name: "backPanelButton",
-            content: "_back".loc(), ontap: "backPanel"},
-          {kind: "onyx.Button", name: "refreshButton", disabled: false,
-            content: "_refresh".loc(), onclick: "requery"},
-          {kind: "onyx.Button", name: "applyButton", disabled: true,
-            content: "_apply".loc(), onclick: "apply"},
-          {kind: "onyx.Button", name: "saveAndNewButton",
-            content: "_new".loc(), onclick: "saveAndNew"},
-          {kind: "onyx.Button", name: "saveButton",
-            disabled: true, classes: "save",
-            content: "_save".loc(), onclick: "saveAndClose"}
+          {name: "title", classes: "xv-toolbar-label"},
+                                       // The MoreToolbar is a FittableColumnsLayout,
+          // so this spacer takes up all available space
+          {name: "space", classes: "spacer", fit: true},
+          {kind: "font.TextIcon", name: "lockImage", showing: false,
+            content: "Locked", ontap: "lockTapped", icon: "lock", classes: "lock"},
+          {kind: "font.TextIcon", name: "backPanelButton",
+            content: "_back".loc(), ontap: "backPanel", icon: "chevron-left"},
+          {kind: "font.TextIcon", name: "refreshButton",
+            content: "_refresh".loc(), onclick: "requery", icon: "rotate-right"},
+          {kind: "font.TextIcon", name: "saveAndNewButton", disabled: false,
+            content: "_new".loc(), ontap: "saveAndNew", icon: "plus"},
+          {kind: "font.TextIcon", name: "applyButton", disabled: true,
+            content: "_apply".loc(), ontap: "apply", icon: "ok"},
+          {kind: "font.TextIcon", name: "saveButton",
+            disabled: true, icon: "save", classes: "save",
+            content: "_save".loc(), ontap: "saveAndClose"}
         ]},
         {name: "header", content: "_loading".loc(), classes: "xv-workspace-header"},
         {kind: "onyx.Popup", name: "spinnerPopup", centered: true,
@@ -702,12 +701,7 @@ trailing:true, white:true, strict: false*/
     },
     allowNewChanged: function () {
       var allowNew = this.getAllowNew();
-
-      if (allowNew) {
-        this.$.saveAndNewButton.show();
-      } else {
-        this.$.saveAndNewButton.hide();
-      }
+      this.$.saveAndNewButton.setShowing(allowNew);
     },
     /**
      @todo Document the apply method.
@@ -1106,13 +1100,8 @@ trailing:true, white:true, strict: false*/
         this.$.backPanelButton.setShowing(enyo.Panels.isScreenNarrow());
 
         // Hide buttons if applicable
-        if (workspace.getHideApply()) {
-          this.$.applyButton.hide();
-        }
-
-        if (workspace.getHideRefresh()) {
-          this.$.refreshButton.hide();
-        }
+        this.$.applyButton.setShowing(!workspace.getHideApply());
+        this.$.refreshButton.setShowing(!workspace.getHideRefresh());
 
         // Handle any extra action buttons specified
         _.each(this.$.workspace.actionButtons, function (action) {
@@ -1185,18 +1174,9 @@ trailing:true, white:true, strict: false*/
         message;
 
       // Status dictates whether buttons are actionable
-      if (canCreate && this.getAllowNew()) {
-        this.$.saveAndNewButton.show();
-      } else {
-        this.$.saveAndNewButton.hide();
-      }
+      this.$.saveAndNewButton.setShowing(canCreate && this.getAllowNew());
+      this.$.saveAndNewButton.setContent("_new".loc());
 
-      if (model.isDirty()) {
-        this.$.saveAndNewButton.setContent("_saveAndNew".loc());
-      } else {
-        // if the model is clean, then this will just pull up a fresh workspace
-        this.$.saveAndNewButton.setContent("_new".loc());
-      }
       // XXX we really only have to do this if there's a *change* to the button content
       this.$.contentToolbar.render();