add grid layout option to palette

Polymer · Apr 28, 2014 · de48d80 · de48d80
1 parent c402422
commit de48d80
Show file tree

Hide file tree

Showing 21 changed files with 227 additions and 20 deletions.
diff --git a/assets/cog.svg b/assets/cog.svg
diff --git a/assets/core-drawer-panel.png b/assets/core-drawer-panel.png
diff --git a/assets/core-field.png b/assets/core-field.png
diff --git a/assets/core-firebase.png b/assets/core-firebase.png
diff --git a/assets/core-header-panel.png b/assets/core-header-panel.png
diff --git a/assets/core-icon-button.png b/assets/core-icon-button.png
diff --git a/assets/core-input.png b/assets/core-input.png
diff --git a/assets/core-item.png b/assets/core-item.png
diff --git a/assets/core-menu.png b/assets/core-menu.png
diff --git a/assets/core-pages.png b/assets/core-pages.png
diff --git a/assets/core-panel.png b/assets/core-panel.png
diff --git a/assets/core-submenu.png b/assets/core-submenu.png
diff --git a/assets/core-toolbar.png b/assets/core-toolbar.png
diff --git a/assets/core-tooltip.png b/assets/core-tooltip.png
diff --git a/elements/designer-element/designer-element.html b/elements/designer-element/designer-element.html
@@ -23,7 +23,16 @@
 
     <core-icon-button icon="maximize" on-tap="{{fullscreenAction}}"></core-icon-button>
 
-    <core-selector id="viewSelector" selected="{{selected}}">
+    <span style="padding-right: 16px;"></span>
+
+    <core-selector selected="{{paletteMode}}">
+      <core-icon-button icon="list" name="menu"></core-icon-button>
+      <core-icon-button icon="modules" name="grid"></core-icon-button>
+    </core-selector>
+
+    <span style="padding-right: 16px;"></span>
+
+    <core-selector selected="{{selected}}">
       <core-icon-button src="assets/design.png" name="design"></core-icon-button>
       <core-icon-button src="assets/code.png" name="code"></core-icon-button>
     </core-selector>
@@ -78,6 +87,7 @@
 
   Polymer('designer-element', {
     selected: 'design',
+    paletteMode: 'grid',
     remoteHtml: '',
 
     ready: function() {
@@ -174,6 +184,10 @@
       this.designer.selectParentElement();
     },
 
+    selectParentElement: function(event) {
+      this.designer.selectParentElement();
+    },
+
     selectedChanged: function() {
       if (this.selected == 'code') {
         this.designToCode();
@@ -185,6 +199,10 @@
       }
     },
 
+    paletteModeChanged: function() {
+      this.designer.paletteMode = this.paletteMode;
+    },
+
     // 
 
     // TODO(sorvell): probably should factor this code setup to be elsewhere

diff --git a/elements/designer-element/test.html b/elements/designer-element/test.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html>
+<head>
+  <title>Polymer Designer</title>
+
+  <script src="../../components/platform/platform.js"></script>
+  <script>
+    window.parent.postMessage('designer-loading', location.href);
+  </script>
+
+  <link rel="import" href="../x-designer/x-designer.html">
+
+  <style>
+
+    body {
+      font-size: 12px;
+      font-family: 'Helvetica Neue', Helvetica, Roboto, Arial;
+      overflow: hidden;
+    }
+
+    x-designer {
+      -webkit-transform: translateZ(0);
+      transform: translateZ(0);
+    }
+
+  </style>
+
+</head>
+<body unresolved>
+
+  <x-designer metaUrls="['../components/core-elements/metadata.html']",></x-designer>
+
+</body>
+</html>
diff --git a/elements/x-designer/x-designer.css b/elements/x-designer/x-designer.css
@@ -5,6 +5,7 @@
   bottom: 0;
   left: 0;
   outline: 0;
+  -webkit-user-select: none;
 }
 
 #canvas {

diff --git a/elements/x-designer/x-designer.html b/elements/x-designer/x-designer.html
@@ -4,7 +4,7 @@
 <link rel="import" href="../x-palette/x-palette.html">
 <link rel="import" href="../x-tree/x-tree.html">
 
-<polymer-element name="x-designer" attributes="selected maximized">
+<polymer-element name="x-designer" attributes="selected maximized paletteMode metaUrls">
 <template>
 
   <link rel="stylesheet" href="x-designer.css">
@@ -15,7 +15,7 @@
 
   <section id="tools">
     <core-layout vertical></core-layout>
-    <x-palette core-flex id="palette" on-palette-drag="{{paletteDrag}}"></x-palette>
+    <x-palette core-flex id="palette" on-palette-drag="{{paletteDrag}}" mode="{{paletteMode}}"></x-palette>
     <polymer-ui-splitter direction="down"></polymer-ui-splitter>
     <x-tree id="tree" canvas="{{$.canvas}}" selected="{{selected}}"></x-tree>
   </section>
@@ -29,6 +29,7 @@
 
     maximized: false,
     selectedTab: 'design',
+    metaUrls: [],
 
     ready: function() {
       this.fire('designer-ready');
@@ -40,6 +41,12 @@
       this.$.canvas.dragDisabled = this.maximized;
     },
 
+    metaUrlsChanged: function() {
+      if (this.metaUrls) {
+        this.import(this.metaUrls);
+      }
+    },
+
     //
     // choreograph composed objects
     //

diff --git a/elements/x-palette/x-palette.css b/elements/x-palette/x-palette.css
@@ -19,6 +19,23 @@
   -ms-user-select: none;
 }
 
+#grid {
+  background-color: #F2F2F2;
+  position: absolute;
+  top: 0;
+  right: 0px;
+  left: 0px;
+  bottom: 0px;
+  padding: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  font-size: 15px;
+  -webkit-overflow-scrolling: touch;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
 .group-item {
   font-weight: 500;
 }
@@ -37,6 +54,30 @@
   white-space: nowrap;
 }
 
+.grid-item {
+  display: inline-block;
+  border: 1px dotted silver;
+  border-left: none;
+  border-top: none;
+  width: 106px;
+  height: 116px;
+  font-size: 11px;
+  cursor: pointer;
+  color: #000;
+  overflow: hidden;
+  text-align: center;
+  padding: 12px;
+  background-color: white;
+}
+
+.grid-item > * {
+  pointer-events: none;
+}
+
+img {
+  vertical-align: middle;
+}
+
 [ishidden] {
   display: none;
 }
diff --git a/elements/x-palette/x-palette.html b/elements/x-palette/x-palette.html
@@ -3,42 +3,58 @@
 <link rel="import" href="../../components/core-menu/core-menu.html">
 <link rel="import" href="../../components/core-menu/core-submenu.html">
 <link rel="import" href="../../components/core-drag-drop/core-drag-drop.html">
+<link rel="import" href="../../components/core-layout/core-layout.html">
 <link rel="import" href="../../components/x-meta/x-meta.html">
 
-<polymer-element name="x-palette">
+<polymer-element name="x-palette" attributes="mode">
 
 <template>
 
   <link rel="stylesheet" href="x-palette.css">
 
   <x-meta id="meta" categories="{{categories}}"></x-meta>
 
-  <div id="list">
+  <core-drag-drop on-drag-start="{{dragStart}}"></core-drag-drop>
 
-    <core-drag-drop on-drag-start="{{dragStart}}"></core-drag-drop>
+  <template if="{{mode == 'menu'}}">
+    <div id="list">
 
-    <core-menu selectedClass="palette-selected">
+      <core-menu selectedClass="palette-selected">
+        <template repeat="{{categories}}">
+          <core-submenu class="group-item" label="{{name}}">
 
-      <template repeat="{{categories}}">
-
-        <core-submenu class="group-item" label="{{name}}">
+            <template repeat="{{list}}">
+              <div class="simple-item" tag="{{id}}" loaded?="{{importsLoaded}}" ishidden?="{{isHidden}}">{{label}}</div>
+            </template>
 
-          <template repeat="{{list}}">
-            <div class="simple-item" tag="{{id}}" loaded?="{{importsLoaded}}" ishidden?="{{isHidden}}">{{label}}</div>
-          </template>
+          </core-submenu>
+        </template>
+      </core-menu>
 
-        </core-submenu>
+    </div>
+  </template>
 
-      </template>
+  <template if="{{mode == 'grid'}}">
+    <div id="grid">
+      <template repeat="{{categories}}">
+        <template repeat="{{list}}">
 
-    </core-menu>
+          <div class="grid-item" tag="{{id}}">
+            <div style="height: 64px; line-height: 64px;"><img src="../../assets/{{id}}.png" onerror="this.src='../../assets/cog.svg';"></div>
+            <br>
+            <div>{{label}}</div>
+          </div>
 
-  </div>
+        </template>
+      </template>
+    </div>
+  </template>
 
 </template>
 <script>
 
   Polymer('x-palette', {
+    mode: 'grid',
 
     dragStart: function(event, dragInfo) {
       // decorate dragInfo

diff --git a/index.html b/index.html
@@ -29,9 +29,9 @@
   <script>
     var metadata = [
       '../components/core-elements/metadata.html',
-      '../components/paper-elements/metadata.html',
-      '../components/more-elements/metadata.html',
-      '../components/polytype/metadata.html'
+      //'../components/paper-elements/metadata.html',
+      //'../components/more-elements/metadata.html',
+      //'../components/polytype/metadata.html'
     ];
   </script>