Merge pull request #20 from srowhani/feature/dynamic-menu

Feature: Dynamic Menu Content
ciena-frost · Oct 7, 2016 · 79948d0 · 79948d0
2 parents 7c2bc6a + 4e427e2
commit 79948d0
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 48 deletions.
diff --git a/addon/styles/_frost-details-pod.scss b/addon/styles/_frost-details-pod.scss
@@ -1,9 +1,12 @@
 @import 'node_modules/ember-frost-core/addon/styles/frost-theme';
 .frost-pods {
   &.frost-details-pod {
+    box-shadow: 0 1px 4px rgba($frost-color-grey-2, .25);
     .pod {
       &.context {
         display: (flex);
+        padding-bottom: 0;
+        margin: 0;
 
         .header {
           border-bottom: 1px solid $frost-color-lgrey-1;
@@ -17,6 +20,7 @@
                 color: #7D85B2;
                 flex: 1;
                 .title {
+
                   font-size: $frost-font-s;
                   font-weight: bold;
                   color: $frost-color-grey-5;
@@ -76,13 +80,9 @@
           max-width: 100vw;
         }
         .bottom {
-          padding: 1px 15px 10px 15px;
+          padding: 10px 10px 10px 0;
           display: flex;
           flex-direction: row-reverse;
-          .row  {
-            padding: 10px 15px 0 15px;
-            display: flex;
-          }
         }
       }
     }

diff --git a/addon/templates/components/frost-details-pod.hbs b/addon/templates/components/frost-details-pod.hbs
@@ -27,16 +27,8 @@
         )}}
       </div>
       <div class="bottom">
-        {{#each menuActions as |item|}}
-          <div class="row">
-            {{#frost-button
-              class='text small'
-              priority=item.priority
-              onClick=(action item.action)
-            }}
-              {{item.text}}
-            {{/frost-button}}
-          </div>
+        {{#each controls as |item|}}
+          {{component item}}
         {{/each}}
       </div>
     </div>

diff --git a/package.json b/package.json
@@ -68,13 +68,14 @@
     "frost"
   ],
   "dependencies": {
+    "ember-array-helper": "^1.0.0",
     "ember-cli-babel": "^5.1.5",
-    "ember-computed-decorators": "^0.2.2",
     "ember-cli-htmlbars": "^1.0.1",
     "ember-cli-sass": "^5.2.0",
+    "ember-computed-decorators": "^0.2.2",
     "liquid-fire": "^0.26.1"
   },
   "ember-addon": {
     "configPath": "tests/dummy/config"
   }
-}
+}
diff --git a/tests/dummy/app/pods/demo/controller.js b/tests/dummy/app/pods/demo/controller.js
@@ -10,33 +10,6 @@ export default Controller.extend({
   dummyRecords: computed.alias('model'),
   orientation: 'vertical',
   podsVisibility: A(),
-  detailActions: A([
-    {
-      text: 'Details',
-      priority: 'primary',
-      action: function () {
-        this.get('targetObject.notifier').addNotification({
-          message: 'Details was clicked!',
-          type: 'success',
-          autoClear: true,
-          clearDuration: 1000
-        })
-      }
-    },
-    {
-      text: 'Rotate',
-      priority: 'secondary',
-      action: function () {
-        let orientation = this.get('orientation')
-        this.set(
-          'orientation',
-          orientation === 'vertical'
-            ? 'horizontal'
-            : 'vertical'
-        )
-      }
-    }
-  ]),
   isPodVisible (pod) {
     let podVisibility = this.get('podsVisibility').findBy('id', pod)
     if (podVisibility === undefined) {
@@ -63,7 +36,14 @@ export default Controller.extend({
 
   actions: {
     // TODO Revert to the initial pod on a canvas click
-
+    viewDetails () {
+      this.get('notifier').addNotification({
+        message: 'Details was clicked!',
+        type: 'success',
+        autoClear: true,
+        clearDuration: 1000
+      })
+    },
     togglePods (pod) {
       let podsVisibility = this.get('podsVisibility')
       if (podsVisibility.findBy('id', pod) === undefined) {

diff --git a/tests/dummy/app/pods/demo/template.hbs b/tests/dummy/app/pods/demo/template.hbs
@@ -12,9 +12,23 @@
       {{dummy-map-pods isPodVisible=isMapPodVisible}}
       {{dummy-node-pods isPodVisible=isNodePodVisible}}
       {{dummy-search-pods isPodVisible=isSearchPodVisible records=dummyRecords}}
-
       {{#frost-details-pod
-        menuActions=detailActions
+        controls=(array
+          (component 'frost-button'
+            class='text medium padded'
+            text='Details'
+            priority='primary'
+            onClick=(action 'viewDetails')
+          )
+          (component 'frost-button'
+            class='text medium padded'
+            text='Rotate'
+            priority='secondary'
+            onClick=(action (mut orientation)
+              (if (eq orientation 'vertical') 'horizontal' 'vertical')
+            )
+          )
+        )
         isPodVisible=isDetailPodVisible
         title="Details Pod"
         subTitle="Subtitle"

diff --git a/tests/dummy/app/styles/_demo.scss b/tests/dummy/app/styles/_demo.scss
@@ -2,7 +2,9 @@
 	width: 100%;
 	height: 100%;
 }
-
+.padded {
+	margin: 2px;
+}
 .frost-pods-demo .controls {
 	width: 220px;
 	padding: 20px;