Layout changes

unicef-polymer · Oct 31, 2016 · acbc784 · acbc784
2 parents 331fd75 + c10d1cb
commit acbc784
Show file tree

Hide file tree

Showing 11 changed files with 304 additions and 139 deletions.
diff --git a/bower.json b/bower.json
@@ -32,7 +32,13 @@
     "etools-dexiejs": "^1.0.0",
     "paper-toast": "^1.3.0",
     "paper-tabs": "^1.6.2",
-    "paper-listbox": "^1.1.2"
+    "paper-listbox": "^1.1.2",
+    "paper-toolbar": "PolymerElements/paper-toolbar#^1.1.7",
+    "paper-fab": "PolymerElements/paper-fab#^1.2.1",
+    "etools-dialog": "^1.0.0",
+    "etools-loading": "^1.0.3",
+    "etools-page-refresh": "^1.0.0",
+    "etools-content-panel": "^1.0.1"
   },
   "devDependencies": {
     "web-component-tester": "^4.0.0"

diff --git a/src/app-elements/countries-dropdown/countries-dropdown.html b/src/app-elements/countries-dropdown/countries-dropdown.html
@@ -4,6 +4,8 @@
 <link rel="import" href="../../../bower_components/paper-item/paper-item.html">
 <link rel="import" href="../../../styles/countries-flags/country-flag-styles.html">
 
+<link rel="import" href="../countries-data/countries-data.html">
+
 <dom-module id="countries-dropdown">
   <template>
     <style include="country-flag-styles">
@@ -12,18 +14,24 @@
         display: block;
       }
 
+      :host(:hover) {
+        cursor: pointer;
+      }
+
       paper-dropdown-menu {
         width: 160px;
-
         --paper-menu-button-dropdown-background: var(--light-theme-content-color);
-
         --paper-input-container-color: var(--light-secondary-text-color);
-
         --paper-input-container-focus-color: var(--light-secondary-text-color);
-
         --paper-input-container-underline: {
           display: none;
         };
+        --paper-input-container-underline-focus: {
+          display: none;
+        };
+        --paper-input-container-underline-disabled: {
+          display: none;
+        };
 
         --paper-input-container-input: {
           color: var(--light-primary-text-color);
@@ -32,6 +40,15 @@
         --paper-dropdown-menu-icon: {
           color: var(--light-icon-color);
         };
+
+        --paper-input-container-label: {
+          top: 4px;
+        };
+        --paper-input-container-input: {
+          margin-bottom: 2px;
+          color: var(--light-primary-text-color);
+          cursor: pointer;
+        }
       }
 
       paper-listbox {
@@ -42,10 +59,11 @@
       paper-item {
         font-size: 15px;
         white-space: nowrap;
+        cursor: pointer;
       }
 
       iron-icon {
-        bottom: 3px;
+        bottom: 2px;
         min-width: 24px;
         min-height: 20px;
         margin-right: 8px;
@@ -56,20 +74,18 @@
       }
 
     </style>
+    <countries-data countries="{{countries}}"></countries-data>
 
     <iron-icon class$="[[country.imgClass]]" prefix></iron-icon>
 
     <paper-dropdown-menu id="menu" label="Country" noink no-label-float>
-
       <paper-listbox class="dropdown-content" on-iron-select="_countrySelected">
-
         <template id="repeat" is="dom-repeat" items="[[countries]]">
           <paper-item>
             <iron-icon class$="[[item.imgClass]]" item-icon></iron-icon>
             [[item.name]]
           </paper-item>
         </template>
-
       </paper-listbox>
 
     </paper-dropdown-menu>

diff --git a/src/app-elements/page-elements/page-with-sidebar.html b/src/app-elements/page-elements/page-with-sidebar.html
@@ -0,0 +1,38 @@
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../bower_components/iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="../../../bower_components/etools-content-panel/etools-content-panel.html">
+
+<dom-module id="page-with-sidebar">
+  <template>
+    <style include="page-layout-styles">
+      :host {
+        @apply(--layout-horizontal);
+        width: 100%;
+      }
+    </style>
+
+    <div id="pageContent">
+      <etools-content-panel title="Some data">
+        <p>Tab 1 page data section...</p>
+      </etools-content-panel>
+    </div>
+
+    <div id="sidebar">
+      <etools-content-panel title="Some sidebar content">
+        <p>Synced from VISION</p>
+      </etools-content-panel>
+    </div>
+
+  </template>
+
+  <script>
+    (function() {
+      'use strict';
+
+      Polymer({
+        is: 'page-with-sidebar'
+      });
+
+    })();
+  </script>
+</dom-module>
diff --git a/src/app-elements/page-elements/simple-page.html b/src/app-elements/page-elements/simple-page.html
@@ -0,0 +1,32 @@
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../bower_components/iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="../../../bower_components/etools-content-panel/etools-content-panel.html">
+
+<dom-module id="simple-page">
+  <template>
+    <style include="page-layout-styles">
+      :host {
+        @apply(--layout-horizontal);
+        width: 100%;
+      }
+    </style>
+
+    <div id="pageContent">
+      <etools-content-panel title="Some data">
+        <p>Tab 2 page data section...</p>
+      </etools-content-panel>
+    </div>
+
+  </template>
+
+  <script>
+    (function() {
+      'use strict';
+
+      Polymer({
+        is: 'simple-page'
+      });
+
+    })();
+  </script>
+</dom-module>
diff --git a/src/app-elements/page-header/page-header.html b/src/app-elements/page-header/page-header.html
@@ -0,0 +1,77 @@
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
+<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../../../bower_components/iron-flex-layout/iron-flex-layout.html">
+
+<link rel="import" href="../../../bower_components/etools-page-refresh/etools-page-refresh.html">
+
+<link rel="import" href="../countries-dropdown/countries-dropdown.html">
+
+<link rel="import" href="../../../styles/shared-styles.html">
+
+<dom-module id="page-header">
+
+  <template>
+    <style include="shared-styles">
+      div[main-title] {
+        position: relative;
+        bottom: 1px;
+        margin-left: 24px;
+        text-transform: capitalize;
+      }
+
+      div[main-title],
+      etools-page-refresh {
+        color: var(--light-primary-text-color);
+      }
+
+      #menuButton {
+        display: block;
+      }
+
+      .right-side {
+        @apply(--layout-horizontal);
+        @apply(--layout-center);
+      }
+
+      etools-page-refresh {
+        margin-left: 25px;
+      }
+
+      @media (min-width: 850px) {
+        #menuButton {
+          display: none;
+        }
+        div[main-title] {
+          margin-left: 32px;
+        }
+      }
+    </style>
+    <app-toolbar>
+      <paper-icon-button id="menuButton" class="light" icon="menu" on-tap="openDrawer"></paper-icon-button>
+      <div main-title>{{title}}</div>
+      <div class="right-side">
+        <countries-dropdown id="countries" countries="[[countries]]"></countries-dropdown>
+        <etools-page-refresh></etools-page-refresh>
+      </div>
+    </app-toolbar>
+  </template>
+
+  <script>
+    (function() {
+      Polymer({
+        is: 'page-header',
+
+        properties: {
+          title: String
+        },
+
+        openDrawer: function() {
+          this.fire('drawer');
+        }
+
+      });
+    })();
+  </script>
+
+</dom-module>
diff --git a/src/app-shell.html b/src/app-shell.html
@@ -32,6 +32,7 @@
 <link rel="import" href="app-elements/countries-data/countries-data.html">
 
 <link rel="import" href="../styles/shared-styles.html">
+<link rel="import" href="../styles/page-layout-styles.html">
 <link rel="import" href="../styles/app-theme.html">
 
 <dom-module id="app-shell">
@@ -110,8 +111,6 @@
 
     <user-data permissions="{{permissions}}"></user-data>
 
-    <countries-data countries="{{countries}}"></countries-data>
-
     <app-location route="{{route}}"></app-location>
 
     <app-route
@@ -159,22 +158,17 @@
       </app-drawer>
 
       <!-- Main content -->
-      <div id="mainContent">
-
-        <iron-pages id="pages"
-                    selected="[[page]]"
-                    attr-for-selected="name"
-                    fallback-selection="not-found"
-                    role="main">
-          <page-section1 name="section1" route="{{subroute}}"></page-section1>
-          <page-section2 name="section2" route="{{subroute}}"></page-section2>
-          <page-section3 name="section3" route="{{subroute}}"></page-section3>
-          <page-not-found name="not-found"></page-not-found>
-        </iron-pages>
-
-        <countries-dropdown id="countries" countries="[[countries]]"></countries-dropdown>
-
-      </div>
+
+      <iron-pages id="pages"
+                  selected="[[page]]"
+                  attr-for-selected="name"
+                  fallback-selection="not-found"
+                  role="main">
+        <page-section1 name="section1" route="{{subroute}}"></page-section1>
+        <page-section2 name="section2" route="{{subroute}}"></page-section2>
+        <page-section3 name="section3" route="{{subroute}}"></page-section3>
+        <page-not-found name="not-found"></page-not-found>
+      </iron-pages>
 
     </app-drawer-layout>