Add a list-view for the menu.

bwinton · Aug 22, 2012 · e3e0dfd · e3e0dfd
1 parent 3a255ce
commit e3e0dfd
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 0 deletions.
diff --git a/australis/customization/mac/www/js/app/main.js b/australis/customization/mac/www/js/app/main.js
@@ -76,6 +76,10 @@ define(function (require) {
       }
     console.log("Options = "+JSON.stringify(options));
 
+    if (options.list)
+      $("#menuPanel").addClass("listview");
+
+
     models.render();
     $(".navBar").on("click", ".menuButton", function() {
       if (!$("div.window").hasClass("customizeMode"))

diff --git a/australis/customization/mac/www/js/app/models.js b/australis/customization/mac/www/js/app/models.js
@@ -14,6 +14,7 @@ define(["jquery", "underscore", "backbone", "jquery-ui"], function($, _, Backbon
         "  <div style='background-image: url(\"images/button-<%= type %>.png\")'" +
         "       class='button'></div>" +
         "  <div class='label'><%= label %></div>" +
+        "  <div class='shortcut'><%= shortcut %></div>" +
         "</div>")
     }
   });

diff --git a/australis/customization/mac/www/styles/panel.css b/australis/customization/mac/www/styles/panel.css
@@ -82,6 +82,11 @@
   -moz-transition-timing-function: ease;
 }
 
+#menuPanel.listview .menuPanelButton {
+  width: 100%;
+  padding: 0;
+}
+
 .menuPanelButton {
   border: 1px solid transparent;
 }
@@ -116,6 +121,13 @@
   background-size: contain;
 }
 
+#menuPanel.listview .menuPanelButton > .button {
+  width: 16px;
+  height: 16px;
+  margin: 3px;
+  display: inline-block;
+}
+
 .menuPanelButton > .label {
   margin: 0;
   width: 72px;
@@ -129,12 +141,41 @@
   white-space: nowrap;
 }
 
+#menuPanel.listview .menuPanelButton > .label {
+  height: 20px;
+  display: inline-block;
+  text-align: start;
+}
+
+.menuPanelButton > .shortcut {
+  display: none;
+}
+
+#menuPanel.listview .menuPanelButton > .shortcut {
+  display: inline-block;
+  height: 20px;
+  font-size: 11px;
+  line-height: 16px;
+  opacity: 0.5;
+  float: right;
+  padding-right: 3px;
+  padding-top: 1px;
+  text-align: end;
+}
+
 .spacer {
   border: 1px dashed hsla(210,54%,20%,.2);
   border-color: hsla(210,54%,20%,.13) hsla(210,54%,20%,.16) hsla(210,54%,20%,.2);
   border-radius: 3px;
 }
 
+#menuPanel.listview .spacer {
+  width: 100%;
+  margin-left: -1px;
+  height: 20px;
+  padding: 0;
+}
+
 .panelToolbarIcons .spacer {
   display: none;
   height: 42px;