voom-presenters 0.1.8 → 0.1.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ae9fe537c82c38d72bd3c5b1b8b4039fa1eda4acb8e239d99606fae2e863b54a
-  data.tar.gz: 5bf2378799b7c857993bb311d6c011620fcfc91d57279c11c8294485af6a6842
+  metadata.gz: 4fbf304ea2a5077bc2472395b6ae56094648cd48e3717c6f5288c878d85e7612
+  data.tar.gz: 78e06a167d4b8570f2ea3ef6a01f4ed439fcb053c4630c6f1aa274399c1c8c44
 SHA512:
-  metadata.gz: cca44edbb9a96d37245af4f362df6229d19646f0631616abcb0800958259e72c991c5c35a0702cc68bb04dd04518253c94f27ce29a08ef2328f3eac6d65b0f0f
-  data.tar.gz: 3b17dae8e2bf6111c0e015c93749e1ffa855f90579dcbd8a98f7ced7c07c9a455fdc5a5f01387753cb77983980db6d6e3d952baf4df25d380ff4c563e5f4f703
+  metadata.gz: 7466d802080d7eb70b9e6f56435a089460c719de4421485c76ff3161d8757355c813d47b708ab13f0be01042c59d0d0ca35577c4243cbac2f11df8bb4c4a06fe
+  data.tar.gz: 8a6186fe67c01cf091969fec6468a1d727cd467e4f0cf798c8a730c20c2aeebc73c971873f1ca1f1d5c3befb5427557dd9bd75dee3dc366d5c0c86ecf18027ba

data/Gemfile

@@ -1,5 +1,6 @@
 source 'https://rubygems.org'
 
+ruby `cat .ruby-version`
 # Specify your gem's dependencies in voom-console.gemspec
 gemspec
 

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    voom-presenters (0.1.7)
+    voom-presenters (0.1.8)
       dry-configurable (> 0.1, <= 7.0)
       dry-container (~> 0.6)
       dry-inflector (~> 0.1)
@@ -111,5 +111,8 @@ DEPENDENCIES
   watir-rspec
   webdrivers (~> 3.0)
 
+RUBY VERSION
+   ruby 2.5.0p0
+
 BUNDLED WITH
    1.16.1

data/app/demo/components/badges.pom

@@ -5,8 +5,9 @@ Voom::Presenters.define(:badges) do
 
   attach :top_nav
   attach :component_drawer
+  page_title 'Badges'
   indented_grid do
-    display 'Badges'
+
 
     headline 'Number'
     badge 1, icon: :account_box

data/app/demo/components/buttons.pom

@@ -4,9 +4,10 @@ Voom::Presenters.define(:buttons) do
   helpers Demo::Helpers::IndentedGrid
   attach :top_nav
   attach :component_drawer
+  page_title 'Buttons'
 
   indented_grid do
-    display 'Buttons'
+
     
     # Raised buttons
     headline 'Raised Button'
@@ -46,6 +47,17 @@ Voom::Presenters.define(:buttons) do
     subheading 'with text'
     button "I'm happy", icon: :mood
 
+    headline 'Image button'
+    button type: :image do
+      image 'http://geotix.com/application/files/3514/5564/7308/MyNorthTicketsLogo.png'
+    end
+
+    subheading 'with icon'
+    button type: :image do
+      image 'http://geotix.com/application/files/3514/5564/7308/MyNorthTicketsLogo.png'
+      icon :link
+    end
+
     attach :code, file: __FILE__
   end
 end

data/app/demo/components/cards.pom

@@ -4,11 +4,9 @@ Voom::Presenters.define(:cards) do
   helpers Demo::Helpers::IndentedGrid
   attach :top_nav
   attach :component_drawer
-
+  page_title 'Cards'
 
   indented_grid do
-    display 'Cards'
-
     headline 'Wide'
     card width: '512px' do
       media do

data/app/demo/components/chips.pom

@@ -4,10 +4,9 @@ Voom::Presenters.define(:chips) do
   helpers Demo::Helpers::IndentedGrid
   attach :top_nav
   attach :component_drawer
+  page_title 'Chips'
 
   indented_grid do
-    heading 'Chips'
-
     chip 'Chip 1'
     chip 'Chip 1', color: :primary
     chip 'Chip 2', color: :secondary

data/app/demo/components/date_fields.pom

@@ -4,9 +4,9 @@ Voom::Presenters.define(:date_fields) do
   helpers Demo::Helpers::IndentedGrid
   attach :top_nav
   attach :component_drawer
+  page_title 'Date Fields'
 
   indented_grid do
-    display 'Date Fields'
     body <<~DOC
       A date separates user display format from the value format.  
       

data/app/demo/components/datetime_fields.pom

@@ -4,9 +4,9 @@ Voom::Presenters.define(:datetime_fields) do
   helpers Demo::Helpers::IndentedGrid
   attach :top_nav
   attach :component_drawer
+  page_title 'Date Time'
 
   indented_grid do
-    display 'Date Time'
     body <<~DOC
       A date time separates user display format from the value format.  
       

data/app/demo/components/dialogs.pom

@@ -4,10 +4,9 @@ Voom::Presenters.define(:dialogs) do
   helpers Demo::Helpers::IndentedGrid
   attach :top_nav
   attach :component_drawer
+  page_title 'Dialogs'
 
   indented_grid do
-    display 'Dialogs'
-
     button 'Show Dialog' do
       event :click do
         dialog :hold_on

data/app/demo/components/drawers.pom

@@ -3,6 +3,7 @@ require_relative '../helpers/indented_grid'
 Voom::Presenters.define(:drawers) do
   helpers Demo::Helpers::IndentedGrid
   attach :top_nav
+  page_title 'Drawers'
 
   drawer do
     menu do

data/app/demo/components/expansion_panels.pom

@@ -4,10 +4,9 @@ Voom::Presenters.define(:expansion_panels) do
   helpers Demo::Helpers::IndentedGrid
   attach :top_nav
   attach :component_drawer
-  
-  indented_grid do
-    display 'Expansion Panels'
+  page_title 'Expansion Panels'
 
+  indented_grid do
     expansion_panel do
       text 'Personal data'
       secondary_text 'Type your name and age'

data/app/demo/components/fabs-mini.pom

@@ -4,10 +4,9 @@ Voom::Presenters.define(:fabs_mini) do
   helpers Demo::Helpers::IndentedGrid
   attach :top_nav
   attach :component_drawer
+  page_title 'Float Action Button'
 
   indented_grid do
-    display 'Float Action Button'
-    
     # Mini Floating action buttons
     headline 'Mini FAB'
     body '*Mini size: Only used to create visual continuity with other screen elements*'

data/app/demo/components/fabs.pom

@@ -4,9 +4,9 @@ Voom::Presenters.define(:fabs) do
   helpers Demo::Helpers::IndentedGrid
   attach :top_nav
   attach :component_drawer
+  page_title 'Floating Action Button'
 
   indented_grid do
-    display 'Floating Action Button'
 
     headline 'FAB'
     button icon: :add, type: :fab, color: :primary

data/app/demo/components/forms.pom

@@ -4,6 +4,7 @@ Voom::Presenters.define(:forms) do
   helpers Demo::Helpers::IndentedGrid
   attach :top_nav
   attach :component_drawer
+  page_title 'Forms'
 
   grid do
     column 1

data/app/demo/components/headers.pom

@@ -8,11 +8,7 @@ Voom::Presenters.define(:headers) do
 
 
   header 'Presenters Demo' do
-    page_title 'Page about headers' do
-          icon :subtitles
-        end
-
-    menu do
+    nav do
       item 'About (Header)' do
               event :click do
                 loads :index
@@ -32,6 +28,9 @@ Voom::Presenters.define(:headers) do
             end
     end
   end
+  page_title 'Page about headers' do
+    icon :subtitles
+  end
 
 
   indented_grid do

data/app/demo/components/hidden_fields.pom

@@ -5,10 +5,8 @@ Voom::Presenters.define(:hidden_fields) do
   
   attach :top_nav
   attach :component_drawer
-
+  page_title 'Hidden'
   indented_grid do
-    headline 'Hidden'
-
     form do
       hidden_field name: :idoit_id do
         value 'do it!'

data/app/demo/components/icons.pom

@@ -1,6 +1,7 @@
 Voom::Presenters.define(:icons) do
   attach :top_nav
   attach :component_drawer
+  page_title 'Icons'
 
   helpers do
     def small_card(&block)
@@ -13,7 +14,6 @@ Voom::Presenters.define(:icons) do
   grid do
     column 1
     column 10 do
-      display 'Icons'
       body 'An icon is commonly used on a menu, button, chip, list or card. They can be used standalone as well.'
 
       headline 'Plain'

data/app/demo/components/layouts.pom

@@ -5,9 +5,9 @@ Voom::Presenters.define(:layouts) do
   
   attach :top_nav
   attach :component_drawer
+  page_title 'Layouts'
 
   indented_grid do
-    display 'Layouts'
 
     display 'Grid'
 

data/app/demo/components/lists.pom

@@ -4,7 +4,7 @@ Voom::Presenters.define(:lists) do
   helpers Demo::Helpers::IndentedGrid
   attach :top_nav
   attach :component_drawer
-
+  page_title 'Lists'
   helpers do
     def actors
       [OpenStruct.new(name: "<strong>Bryan Cranston</strong>", episodes: 62, body: 'Bryan Cranston played the role of Walter in Breaking Bad. He is also known for playing Hal in Malcom in the Middle.'),
@@ -15,7 +15,6 @@ Voom::Presenters.define(:lists) do
   end
 
   indented_grid do
-    display 'Lists'
 
     headline 'Simple'
     list do

data/app/demo/components/menus.pom

@@ -4,9 +4,9 @@ Voom::Presenters.define(:menus) do
   helpers Demo::Helpers::IndentedGrid
   attach :top_nav
   attach :component_drawer
+  page_title 'Menus'
 
   indented_grid do
-    display 'Menus'
 
     grid do
       column 1

data/app/demo/components/selects.pom

@@ -4,10 +4,9 @@ Voom::Presenters.define(:selects) do
   helpers Demo::Helpers::IndentedGrid
   attach :top_nav
   attach :component_drawer
+  page_title 'Select Fields'
 
   indented_grid do
-    display 'Select Fields'
-
     form do
       select do
         label 'Text...'

data/app/demo/components/snackbar.pom

@@ -4,6 +4,7 @@ Voom::Presenters.define(:snackbar) do
   helpers Demo::Helpers::IndentedGrid
   attach :top_nav
   attach :component_drawer
+  page_title 'Snackbar'
 
   indented_grid do
     title 'On Page'

data/app/demo/components/tables.pom

@@ -4,6 +4,7 @@ Voom::Presenters.define(:tables) do
   helpers Demo::Helpers::IndentedGrid
   attach :top_nav
   attach :component_drawer
+  page_title 'Tables'
 
   helpers do
     def items
@@ -16,8 +17,6 @@ Voom::Presenters.define(:tables) do
   end
 
   indented_grid do
-    display 'Tables'
-
     table selectable: true do
       header do
         column 'Material'

data/app/demo/components/text_areas.pom

@@ -4,10 +4,9 @@ Voom::Presenters.define(:text_areas) do
   helpers Demo::Helpers::IndentedGrid
   attach :top_nav
   attach :component_drawer
+  page_title 'Text Areas'
 
   indented_grid do
-    display 'Text Areas'
-
     headline 'Multiple line'
 
     text_area name: :notes, rows: 3 do

data/app/demo/components/text_fields.pom

@@ -4,10 +4,9 @@ Voom::Presenters.define(:text_fields) do
   helpers Demo::Helpers::IndentedGrid
   attach :top_nav
   attach :component_drawer
+  page_title 'Text Fields'
 
   indented_grid do
-    display 'Text Fields'
-
     headline 'Text'
 
     text_field name: :text do

data/app/demo/components/time_fields.pom

@@ -4,9 +4,9 @@ Voom::Presenters.define(:time_fields) do
   helpers Demo::Helpers::IndentedGrid
   attach :top_nav
   attach :component_drawer
+  page_title 'Time Field'
 
   indented_grid do
-    display 'Time Field'
     body <<~DOC
       A time field separates user display format from the value format.  
       

data/app/demo/components/toggles.pom

@@ -4,10 +4,9 @@ Voom::Presenters.define(:toggles) do
   helpers Demo::Helpers::IndentedGrid
   attach :top_nav
   attach :component_drawer
+  page_title 'Toggles'
 
   indented_grid do
-    display 'Toggles'
-
     headline 'CHECKBOX'
     checkbox
     checkbox checked: true

data/app/demo/components/tooltips.pom

@@ -4,10 +4,9 @@ Voom::Presenters.define(:tooltips) do
   helpers Demo::Helpers::IndentedGrid
   attach :top_nav
   attach :component_drawer
-
+  page_title 'Tooltips'
+  
   indented_grid do
-    display 'Tooltips'
-
     headline 'Avatars'
     subheading 'Cards'
     card do

data/app/demo/components.pom

@@ -4,9 +4,9 @@ Voom::Presenters.define('components') do
   helpers Demo::Helpers::IndentedGrid
   attach 'top_nav'
   attach 'component_drawer'
+  page_title 'Components'
 
   indented_grid do
-    display 'Components'
     grid do
       column 12 do
         icon 'fa-hand-point-left', position: :left

data/app/demo/nav/top_nav.pom

@@ -4,7 +4,7 @@ Voom::Presenters.define('top_nav') do
   end
 
   header 'Presenters Demo' do
-    menu do
+    nav do
       item 'About' do
         event :click do
           loads :index

data/app/demo/styles.pom

@@ -3,6 +3,9 @@ require_relative 'helpers/indented_grid'
 Voom::Presenters.define(:styles) do
   helpers Demo::Helpers::IndentedGrid
   attach :top_nav
+  page_title 'Page Title' do
+    icon :settings
+  end
 
   indented_grid do
     display 'Styles'

data/lib/voom/presenters/dsl/components/button.rb

@@ -33,6 +33,11 @@ module Voom
 
           end
 
+          def image(image=nil, **attribs, &block)
+            return @image if locked?
+            @image = Components::Image.new(parent: self, image: image, context: context, **attribs, &block)
+          end
+
           def menu(**attributes, &block)
             return @menu if locked?
             @menu = Components::Menu.new(parent: self, position: menu_position, context: context, **attributes, &block)

data/lib/voom/presenters/dsl/components/content.rb

@@ -6,6 +6,7 @@ require_relative 'mixins/text_fields'
 require_relative 'mixins/selects'
 require_relative 'mixins/snackbars'
 require_relative 'mixins/date_time_fields'
+require_relative 'mixins/images'
 
 module Voom
   module Presenters
@@ -18,6 +19,7 @@ module Voom
           include Mixins::DateTimeFields
           include Mixins::Selects
           include Mixins::Snackbars
+          include Mixins::Images
 
           attr_reader :hidden, :components, :shows_errors
          

data/lib/voom/presenters/dsl/components/dialog.rb

@@ -1,4 +1,5 @@
 require_relative 'mixins/common'
+require_relative 'mixins/attaches'
 
 module Voom
   module Presenters
@@ -6,6 +7,7 @@ module Voom
       module Components
         class Dialog < Base
           include Mixins::Common
+          include Mixins::Attaches
           attr_accessor :width, :height, :buttons, :components, :shows_errors
 
           def initialize(**attribs_, &block)

data/lib/voom/presenters/dsl/components/header.rb

@@ -14,41 +14,30 @@ module Voom
             expand!
           end
 
+          def button(icon=nil, **attributes, &block)
+            return @button if locked?
+            @button = Components::Button.new(icon: icon, position:[:top, :right], parent: self, context: context, **attributes, &block)
+          end
+
           def menu(**attribs, &block)
             return @menu if locked?
-            @menu = Menu.new(parent: self,
+            @menu = Components::Menu.new(parent: self,
                              context: context,
                              **attribs, &block)
           end
 
+          def nav(**attribs, &block)
+            return @nav if locked?
+            @nav = Components::Menu.new(parent: self,
+                                         context: context,
+                                         **attribs, &block)
+          end
+
           def title(*text, **attribs, &block)
             return @title if locked?
             @title = Components::Typography.new(parent: self, type: :text, text: text, context: context, **attribs, &block)
           end
 
-          def page_title(*text, **attribs, &block)
-            return @page_title if locked?
-            @page_title = PageTitle.new(parent: self, text: text, context: context, **attribs, &block)
-          end
-
-          class PageTitle < Base
-
-            attr_accessor :text
-
-            def initialize(**attribs_, &block)
-              super(type: :page_title, **attribs_, &block)
-              @text = attribs.delete(:text)
-              expand!
-            end
-
-            def icon(icon=nil, **attribs, &block)
-              return @icon if locked?
-              @icon = Icon.new(parent: self, icon: icon,
-                               context: context,
-                               **attribs, &block)
-            end
-          end
-
         end
       end
     end

data/lib/voom/presenters/dsl/components/menu.rb

@@ -1,18 +1,21 @@
 require_relative 'mixins/event'
 require_relative 'mixins/tooltips'
+require_relative 'mixins/attaches'
+require_relative 'mixins/buttons'
 
 module Voom
   module Presenters
     module DSL
       module Components
         class Menu < Base
-          attr_accessor :items, :title, :position, :color, :open
+          attr_accessor :items, :title, :position, :placement, :color, :open
 
           def initialize(title=nil, **attribs_, &block)
             super(type: :menu, **attribs_, &block)
             @title = title
             @items = []
             @position = attribs.delete(:position) || :left
+            @placement = attribs.delete(:placement) || :default
             @color = attribs.delete(:color)
             @open = attributes.delete(:open){false}
             expand!
@@ -31,6 +34,13 @@ module Voom
                                   **attribs, &block)
           end
 
+          def label(**attribs, &block)
+            return @label if locked?
+            @label = Label.new(parent: self,
+                               context: context,
+                               **attribs, &block)
+          end
+
           private
 
           class Item < EventBase
@@ -54,6 +64,12 @@ module Voom
             end
           end
 
+          class Label < Item
+            def initialize(**attribs, &block)
+              super(type: :label, **attribs, &block)
+            end
+          end
+
           class Divider < Base
             def initialize(**attribs, &block)
               super(type: :divider, **attribs, &block)

data/lib/voom/presenters/dsl/components/mixins/typography.rb

@@ -21,6 +21,10 @@ module Voom
               self << Components::Typography.new(parent: self, type: :title, text: text, context: context, **attributes, &block)
             end
 
+            def page_title(*text, **attributes, &block)
+              self << Components::Typography.new(parent: self, type: :page_title, text: text, context: context, level: 1, **attributes, &block)
+            end
+
             def subheading(*text, **attributes, &block)
               self << Components::Typography.new(parent: self, type: :subheading, text: text, context: context, **attributes, &block)
             end

data/lib/voom/presenters/dsl/components/typography.rb

@@ -18,6 +18,13 @@ module Voom
             @position = Array(attribs.delete(:position)).compact
             expand!
           end
+
+          def icon(icon=nil, **attribs, &block)
+            return @icon if locked?
+            @icon = Components::Icon.new(parent: self, icon: icon,
+                                         context: context,
+                                         **attribs, &block)
+          end
         end
       end
     end

data/lib/voom/presenters/helpers/rails.rb

@@ -16,7 +16,7 @@ if defined?(Rails)
           def presenters_path(presenter, **params)
             path = voom_presenters_web_client_app_path(params)
             if path.include?('?')
-              path = path.sub('?', "/#{presenter}?")
+              path = path.sub('?', "#{presenter}?")
             else
               path = "#{path}/" unless path.end_with?('/')
               # replace last / with the presenter

data/lib/voom/presenters/version.rb

@@ -1,5 +1,5 @@
 module Voom
   module Presenters
-    VERSION = '0.1.8'.freeze
+    VERSION = '0.1.9'.freeze
   end
 end

data/public/bundle.css

@@ -5942,13 +5942,16 @@ iframe.heightSet {
     color: #839098; }
   .mdl-layout__header .mdl-layout__drawer-button {
     background-color: #37424a; }
-  .mdl-layout__header h1 {
-    padding-left: 24px;
-    color: #71818c;
-    font-size: 30px; }
-    .mdl-layout__header h1 i {
-      font-size: 30px;
-      vertical-align: middle; }
+
+h1.v-page-title {
+  background-color: #EBF0F4;
+  color: #71818c;
+  margin: 0px;
+  padding: 24px;
+  font-size: 30px; }
+  h1.v-page-title i {
+    font-size: 30px;
+    vertical-align: middle; }
 
 .mdl-layout__drawer {
   background-color: #37424a;
@@ -6565,6 +6568,20 @@ iframe.heightSet {
   font-size: .8125rem;
   line-height: 32px; }
 
+.v-button-image {
+  width: 150px;
+  height: 45px;
+  background-color: #fff !important;
+  background-size: 75%;
+  background-repeat: no-repeat;
+  background-position-x: 18%;
+  background-position-y: center;
+  border-radius: 10px; }
+  .v-button-image > i {
+    position: absolute;
+    margin-right: 0 !important;
+    color: #263138; }
+
 .mdc-button.v-secondary-filled-button:not(:disabled) {
   background-color: #E58D36; }
 

data/public/bundle.js

@@ -3796,14 +3796,14 @@ function getNormalizedEventCoords(ev, pageOffset, clientRect) {
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return MDCMenu; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return MDCMenu; });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__material_base_component__ = __webpack_require__(91);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__util__ = __webpack_require__(92);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__foundation__ = __webpack_require__(93);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__constants__ = __webpack_require__(38);
 /* unused harmony reexport MDCMenuFoundation */
 /* unused harmony reexport AnchorMargin */
-/* unused harmony reexport Corner */
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return __WEBPACK_IMPORTED_MODULE_3__constants__["a"]; });
 /* unused harmony reexport CornerBit */
 /**
  * @license
@@ -15766,8 +15766,10 @@ const numbers = {
 
 function createMenuHandler(menu, element) {
     return function () {
-        var offset = parseInt(element.dataset.rightOffset);
+        let offset = parseInt(element.dataset.rightOffset);
+        let placement = element.dataset.placement === 'contextual' ? __WEBPACK_IMPORTED_MODULE_0__material_menu__["a" /* Corner */].TOP_LEFT : __WEBPACK_IMPORTED_MODULE_0__material_menu__["a" /* Corner */].BOTTOM_LEFT;
         menu.setAnchorMargin({ left: offset });
+        menu.setAnchorCorner(placement);
         menu.open = !menu.open;
     };
 }
@@ -15780,7 +15782,7 @@ function initMenus() {
         for (var i = 0; i < components.length; i++) {
             var component = components[i];
             if (!component.mdcComponent) {
-                component.mdcComponent = new __WEBPACK_IMPORTED_MODULE_0__material_menu__["a" /* MDCMenu */](component);
+                component.mdcComponent = new __WEBPACK_IMPORTED_MODULE_0__material_menu__["b" /* MDCMenu */](component);
                 var anchor = component.closest('.mdc-menu-anchor');
                 if (anchor) {
                     var menulink = anchor.querySelector('.v-menu-click');

data/views/mdc/assets/js/components/menus.js

@@ -4,8 +4,10 @@ import {Corner} from '@material/menu';
 
 function createMenuHandler(menu, element) {
     return function () {
-        var offset = parseInt(element.dataset.rightOffset);
+        let offset = parseInt(element.dataset.rightOffset);
+        let placement = element.dataset.placement === 'contextual' ? Corner.TOP_LEFT : Corner.BOTTOM_LEFT
         menu.setAnchorMargin({left: offset});
+        menu.setAnchorCorner(placement);
         menu.open = !menu.open;
     };
 }

data/views/mdc/assets/scss/components/button.scss

@@ -1,5 +1,21 @@
 @import "@material/button/mdc-button";
 
+.v-button-image {
+  width: 150px;
+  height: 45px;
+  background-color: $mdc-theme-background !important;
+  background-size: 75%;
+  background-repeat: no-repeat;
+  background-position-x: 18%;
+  background-position-y: center;
+  border-radius: 10px;
+  > i {
+    position: absolute;
+    margin-right: 0 !important;
+    color: $v-header-background;
+  }
+}
+
 .mdc-button.v-secondary-filled-button {
   @include mdc-button-filled-accessible($mdc-theme-secondary);
 }

data/views/mdc/assets/scss/theme.scss

@@ -21,14 +21,17 @@ $v-title-background: #EBF0F4;
   .mdl-layout__drawer-button {
     background-color: $v-drawer-background;
   }
-  h1 {
-    padding-left: 24px;
-    color: $v-drawer-color;
+}
+
+h1.v-page-title {
+  background-color: $v-title-background;
+  color: $v-drawer-color;
+  margin: 0px;
+  padding: 24px;
+  font-size: 30px;
+  i {
     font-size: 30px;
-    i {
-      font-size: 30px;
-      vertical-align: middle;
-    }
+    vertical-align: middle;
   }
 }
 

data/views/mdc/body/header.erb

@@ -8,24 +8,24 @@
       <%= expand_text(header.title&.text) %>
     </span>
     <div class="mdl-layout-spacer"></div>
-    <% if header.menu %>
+    <% if header.nav %>
       <nav class="mdl-navigation">
-        <% header.menu.items.each do |item| %>
-          <a class="mdl-navigation__link"
-             id="<%= item.id %>"
-             href="javascript:void(0)"
-             <%= erb :"components/event", :locals => {events: item.events, parent_id: item.event_parent_id} %>>
+       <% header.nav.items.each do |item| %>
+         <a class="mdl-navigation__link"
+            id="<%= item.id %>"
+            href="javascript:void(0)"
+            <%= erb :"components/event", :locals => {events: item.events, parent_id: item.event_parent_id} %>>
             <%= erb :"components/icon", :locals => {comp: item.icon, class_name: nil} %>
             <%= item.text %>
           </a>
         <% end %>
       </nav>
     <% end %>
+    <% if header.button %>
+      <%= erb :"components/button", :locals => {comp: header.button, parent_id: header.id} %>
+    <% end %>
+    <% if header.menu %>
+      <%= erb :"components/menu", :locals => {comp: header.menu, parent_id: header.id} %>
+    <% end %>
   </div>
-  <% if header.page_title&.text || header.page_title&.icon%>
-    <h1>
-      <%= erb :"components/icon", :locals => {comp: header.page_title.icon, class_name: nil} if header.page_title&.icon%>
-      <%= expand_text(header.page_title.text) if header.page_title&.text %>
-    </h1>
-  <% end %>
 </header>

data/views/mdc/components/button.erb

@@ -4,14 +4,23 @@
      position_classes = comp.position.map {|p| "v-button-position-#{p}"}.join(' ')
      class_name= "#{class_name} #{position_classes}"
 %>
+  <% if comp.menu %>
+    <div class="mdc-menu-anchor" %>
+  <% end %>
   <% case comp.button_type.to_sym
         when :fab %>
             <%= erb :"components/buttons/fab", :locals => {:comp => comp, class_name: class_name} %>
      <% when :icon %>
             <%= erb :"components/buttons/icon", :locals => {:comp => comp, class_name: class_name} %>
+    <% when :image %>
+            <%= erb :"components/buttons/image", :locals => {:comp => comp, class_name: class_name} %>
     <% else  %>
             <%= erb :"components/buttons/button", :locals => {:comp => comp, class_name: class_name} %>
   <% end %>
+  <% if comp.menu %>
+    </div>
+  <% end %>
 <% end %>
 
 
+

data/views/mdc/components/buttons/button.erb

@@ -2,6 +2,7 @@
    position_classes = comp.position.map {|p| "v-button-position-#{p}"}.join(' ')
    text_align = comp.position.select {|p| eq(p, :left)}.any? && eq(comp.button_type, :flat)%>
 
+
 <button
 id="<%= comp.id %>"
 class="mdc-button v-js-ripple-button <%=class_name%>
@@ -10,11 +11,12 @@ class="mdc-button v-js-ripple-button <%=class_name%>
           <%= 'v-secondary-text-button' if eq(comp.button_type, :flat) && eq(comp.color, :secondary) %>
           <%=  position_classes %>
            <%= "v-button-text-align-left" if text_align %>
-          <%= 'mdc-menu-anchor v-menu-click' if comp.menu%>"
+          <%= 'v-menu-click' if comp.menu%>"
 <%= 'disabled' if comp.disabled %>
 <%= erb :"components/event", :locals => {events: comp.events, parent_id: comp.event_parent_id} unless comp.disabled %>>
   <%= erb :"components/icon", :locals => {comp: comp.icon, class_name: 'mdc-button__icon'} %>
+  <%= erb :"components/image", :locals => {comp: comp.image} %>
   <%= comp.text %>
-  <%= erb :"components/menu", :locals => {comp: comp.menu, parent_id: comp.id} %>
 </button>
 <%= erb :"components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} %>
+<%= erb :"components/menu", :locals => {comp: comp.menu, parent_id: comp.id} %>

data/views/mdc/components/buttons/fab.erb

@@ -2,9 +2,6 @@
    position_classes = comp.position.map {|p| "v-button-fab-position-#{p}"}.join(' ')
 %>
 
-<% if comp.menu %>
-  <div class="mdc-menu-anchor" %>
-<% end %>
 <button id="<%= comp.id %>"
         class="mdc-fab material-icons v-fab--absolute v-js-ripple-button <%= class_name %> <%= position_classes %>
           <%= 'mdc-fab--mini' if eq(comp.size, :small) %>"
@@ -17,6 +14,3 @@
 </button>
 <%= erb :"components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} %>
 <%= erb :"components/menu", :locals => {comp: comp.menu, parent_id: comp.id} %>
-<% if comp.menu %>
-  </div>
-<% end %>

data/views/mdc/components/buttons/icon.erb

@@ -2,9 +2,6 @@
    position_classes = comp.position.map {|p| "v-button-icon-position-#{p}"}.join(' ')
 %>
 
-<% if comp.menu %>
-  <div class="mdc-menu-anchor" %>
-<% end %>
 <button id="<%= comp.id %>"
         class="mdl-button mdl-js-button mdl-button--icon  <%=class_name%> <%= position_classes %>
          <%= 'mdl-button--colored' if eq(comp.color, :primary) %>
@@ -18,7 +15,3 @@
 </button>
 <%= erb :"components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} %>
 <%= erb :"components/menu", :locals => {comp: comp.menu, parent_id: comp.id} %>
-
-<% if comp.menu %>
-  </div>
-<% end %>

data/views/mdc/components/buttons/image.erb

@@ -0,0 +1,19 @@
+<% class_name = '' unless local_variables.include? :class_name
+   position_classes = comp.position.map {|p| "v-button-position-#{p}"}.join(' ') %>
+
+
+<button
+  id="<%= comp.id %>"
+  class="mdc-button v-js-ripple-button v-button-image <%=class_name%>
+          <%= 'mdc-button--raised' if eq(comp.button_type, :raised) %>
+          <%= 'v-secondary-filled-button' if eq(comp.button_type, :raised) && eq(comp.color, :secondary) %>
+          <%= 'v-secondary-text-button' if eq(comp.button_type, :flat) && eq(comp.color, :secondary) %>
+          <%=  position_classes %>
+          <%= 'v-menu-click' if comp.menu%>"
+  style="background-image: url(<%= comp.image.url %>);"
+  <%= 'disabled' if comp.disabled %>
+  <%= erb :"components/event", :locals => {events: comp.events, parent_id: comp.event_parent_id} unless comp.disabled %>>
+  <%= erb :"components/icon", :locals => {comp: comp.icon, class_name: 'mdc-button__icon', position: [:right, :center]} %>
+</button>
+<%= erb :"components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} %>
+<%= erb :"components/menu", :locals => {comp: comp.menu, parent_id: comp.id} %>

data/views/mdc/components/list/menu.erb

@@ -1,4 +1,4 @@
-<div id="<%= comp.id %>" class="mdc-menu v-menu" style="position: absolute;" tabindex="-1">
+<div id="<%= comp.id %>" class="mdc-menu v-menu" data-placement="contextual" style="position: absolute;" tabindex="-1">
   <ul class="mdc-menu__items mdc-list" role="menu" aria-hidden="true">
     <% comp.items.each do |item| %>
       <% unless eq(item.type, :divider) %>

data/views/mdc/components/menu.erb

@@ -1,8 +1,16 @@
 <% if comp %>
+  <% if comp.label %>
+    <div class="mdc-menu-anchor">
+      <span class="v-menu-click">
+        <%= expand_text(comp.label.text) %>
+        <%= erb(:"components/icon", locals: {comp: comp.label.icon}) %>
+      </span>
+  <% end %>
   <div id="<%= comp.id %>"
        class="mdc-menu v-menu
               <%='mdc-menu--open' if comp.open %>"
        style="position: absolute;" tabindex="-1"
+       data-placement="<%= comp.placement %>"
        <%= "data-right-offset=9999" if eq(comp.position, :right) %>>
     <ul class="mdc-menu__items mdc-list" role="menu" aria-hidden="true">
       <% comp.items.each do |item| %>
@@ -15,9 +23,10 @@
                  href="javascript:void(0)"
                  <%= erb :"components/event", :locals => {events: item.events, parent_id: item.event_parent_id} %>>
             <% end %>
-            <%= item.text %>
+            <%= expand_text(item.text) %>
             <% unless item.disabled %>
               </a>
+              <%= erb(:"components/icon", locals: {comp: item.icon, position: [:right, :center]}) %>
             <% end %>
           </li>
         <% else %>
@@ -26,4 +35,7 @@
       <% end %>
     </ul>
   </div>
+  <% if comp.label %>
+    </div>
+  <% end %>
 <% end %>

data/views/mdc/components/page_title.erb

@@ -0,0 +1,4 @@
+<h1 class="v-page-title">
+  <%= erb :"components/icon", :locals => {comp: comp.icon} %>
+  <%= expand_text(comp.text) %>
+</h1>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: voom-presenters
 version: !ruby/object:Gem::Version
-  version: 0.1.8
+  version: 0.1.9
 platform: ruby
 authors:
 - Russell Edens
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2018-06-13 00:00:00.000000000 Z
+date: 2018-06-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: ice_nine
@@ -488,6 +488,7 @@ files:
 - views/mdc/components/buttons/button.erb
 - views/mdc/components/buttons/fab.erb
 - views/mdc/components/buttons/icon.erb
+- views/mdc/components/buttons/image.erb
 - views/mdc/components/card.erb
 - views/mdc/components/checkbox.erb
 - views/mdc/components/chip.erb
@@ -524,6 +525,7 @@ files:
 - views/mdc/components/list/separator.erb
 - views/mdc/components/menu.erb
 - views/mdc/components/modal.erb
+- views/mdc/components/page_title.erb
 - views/mdc/components/radio_button.erb
 - views/mdc/components/render.erb
 - views/mdc/components/select.erb