express_ui 0.1.7 → 0.2.0

data/app/assets/stylesheets/express_ui/scripts/_calendar.sass

@@ -0,0 +1,35 @@
+.ae-calendar
+  .fc-widget-header, .fc-content-skeleton
+    table
+      margin: 0
+  &.fc table
+    @include font-size(18px, 14px)
+
+  h2
+    padding: 0
+
+  .fc-icon-left-single-arrow, .fc-icon-right-single-arrow
+    &:after
+      @include icon-font
+      font-weight: normal
+      font-size: 100%
+      top: 0
+
+  .fc-icon-left-single-arrow:after
+    content: "\f053"
+
+  .fc-icon-right-single-arrow:after
+    content: "\f054"
+
+  .fc-button.fc-state-default
+    @include button
+    @include btn-type($primary-color)
+    color: #fff
+    text-shadow: none
+    box-shadow: none
+    @include font-size(18px, 14px)
+
+  .fc-button.fc-state-default .fc-icon
+    top: 0
+    height: auto
+    line-height: normal

data/app/assets/stylesheets/express_ui/scripts/_carousel.sass

@@ -0,0 +1,43 @@
+.ae-carousel
+  .ae-carousel-item
+    background-repeat: no-repeat
+    background-size: cover
+    position: relative
+
+    .ae-carousel-caption
+      position: absolute
+      bottom: 0
+      left: 0
+      right: 0
+      background: rgba(#000, 0.5)
+      max-height: 5em
+      overflow: scroll
+
+      @include tablet-max
+        padding: 0 0.5em 0.5em 0.5em
+
+      @include tablet
+        padding: 0 6em 0.5em 0.5em
+
+      *
+        color: #fff
+
+      .carousel-heading
+        border-bottom: 1px solid #fff
+
+    @include tablet-max
+      min-height: 200px
+
+    @include tablet
+      min-height: 400px
+
+  .ae-carousel-controls
+    position: absolute
+    right: 0.5em
+    z-index: 99
+
+    @include tablet-max
+      top: 0.5em
+
+    @include tablet
+      bottom: 0.5em

data/app/assets/stylesheets/express_ui/scripts/_datepicker.sass

@@ -0,0 +1,10 @@
+// Overrides for the datepicker
+.picker
+  select, .picker__select--year, .picker__select--month
+    width: auto
+
+  .picker__day--today:before, .picker__button--today:before
+    border-top-color: $primary-color
+
+  .picker__select--month
+    margin-left: 1em

data/app/assets/stylesheets/express_ui/scripts/_popup.sass

@@ -0,0 +1,48 @@
+// TODO: Adds fake transparent blocker behind popup. Should be removed once JS is active
+.ae-popup
+  width: 60%
+  background: #fff
+  margin: 2em auto
+  padding: 1em
+  position: relative
+
+  .ae-popup-header
+    padding:
+      right: 1em
+      left: 1em
+      bottom: 1em
+    position: relative
+    border-bottom: 1px solid $border-light
+
+  .ae-popup-title
+    padding-right: 1em
+
+  .ae-popup-close
+    position: absolute
+    right: 1em
+    top: 1em
+    text-decoration: none
+
+  .ae-popup-content
+    padding: 1em
+    max-height: 300px
+    overflow: scroll
+
+  .ae-popup-footer
+    padding: 0 1em
+    overflow: hidden
+
+  @include tablet-max
+    width: 90% !important
+
+  @include tablet
+    height: 100%
+
+.ae-popup-sm
+  width: 40%
+
+.ae-popup-md
+  width: 60%
+
+.ae-popup-lg
+  width: 80%

data/app/assets/stylesheets/express_ui/scripts/_select.sass

@@ -0,0 +1,12 @@
+.select2
+  @include font-size(18px, 14px)
+  margin: 1em 0 !important
+
+.select2-selection--single
+  height: 36px !important
+
+  .select2-selection__rendered
+    line-height: 36px !important
+
+  .select2-selection__arrow
+    height: 36px !important

data/app/assets/stylesheets/express_ui/scripts/_slider.sass

@@ -0,0 +1,30 @@
+.irs .irs-line
+  height: 6px
+
+  .irs-line-mid, .irs-line-left, .irs-line-right, .irs-bar-edge, .irs-slider
+    background: $border-light
+    cursor: pointer
+
+.irs
+
+  .irs-bar
+    background: $primary-color
+    height: 6px
+    cursor: pointer
+
+    &:hover
+      @include box-shadow(0, 0px, 5px, 0, $border-dark)
+
+  .irs-from, .irs-to, .irs-single
+    cursor: pointer
+    top: 16px
+    z-index: 1
+    @include border-radius(3px)
+    @include font-size(20px, 20px)
+    background: darken($primary-color, 15%)
+
+    &:hover
+      @include box-shadow(0, 0px, 5px, 0, $border-dark)
+
+    &:after
+      display: none

data/app/assets/stylesheets/express_ui/style.sass

@@ -30,3 +30,22 @@
 @import "templates/half_width"
 @import "templates/content_sidebar"
 @import "templates/master_detail"
+@import "scripts/accordion"
+@import "scripts/carousel"
+@import "scripts/popup"
+@import "scripts/calendar"
+@import "scripts/select"
+@import "scripts/datepicker"
+@import "scripts/slider"
+@import "scripts/datepicker"
+@import "scripts/slider"
+
+@import "default.date"
+@import "default"
+@import "magnific-popup"
+@import "fullcalendar"
+@import "select2"
+@import "ion.rangeSlider"
+@import "ion.rangeSlider.skinFlat"
+@import "default.date"
+@import "default"

data/app/assets/stylesheets/express_ui/styleguide.sass

@@ -19,9 +19,6 @@ header
   &:hover
     @include scale
 
-pre
-  font-size: 0.75rem
-
 .pre-line
   white-space: pre-line
 
@@ -79,7 +76,6 @@ pre
   z-index: 2
   cursor: pointer
 
-
 // Hide the tooltip content by default
 [data-tooltip]:before,
 [data-tooltip]:after

data/app/assets/stylesheets/express_ui/templates/_content_sidebar.sass

@@ -3,7 +3,7 @@
     .ae-sidebar-left
       display: none
       left: 10px
-      top: 4.6em
+      margin-top: 2em
       right: 10px
       width: auto !important
       z-index: 99
@@ -47,4 +47,4 @@
     overflow: auto
 
     @include tablet-max
-      padding-top: $container-padding*6
+      padding-top: $container-padding*6 !important

data/app/components/code_demo.rb

@@ -22,10 +22,8 @@ class CodeDemo < ExpressTemplates::Components::Container
 
     div(id: 'output', class: 'ae-tab-content'){
       div(class: 'demo-container'){
-        # eval block.call.html_safe
+        eval block.call.html_safe
       }
     }
   }
-end
-
-
+end

data/app/controllers/express_ui/scripts_controller.rb

@@ -0,0 +1,10 @@
+require_dependency "express_ui/application_controller"
+
+module ExpressUi
+  class ScriptsController < ApplicationController
+    layout "express_ui/styleguide"
+
+    def index
+    end
+  end
+end

data/app/views/express_ui/molecules/_forms.html.erb

@@ -190,7 +190,7 @@
 <%= render "express_ui/molecules/forms_checkbox" %>
 
 <h4>Select</h4>
-<p>Add <code>input-size</code> in <code>select</code> to change select form height and font size.</p>
+
 <%= render "express_ui/molecules/forms_select" %>
 
 <h4>Switch</h4>

data/app/views/express_ui/molecules/_forms_select.html.erb

@@ -1,7 +1,6 @@
 <form>
   <div class="ae-form-field">
-    <label for="select">Filter</label>
-    <select class="ae-input-md" name="select" id="select">
+    <select class="ae-select" name="select" id="select">
       <option value="volvo">Volvo</option>
       <option value="saab">Saab</option>
       <option value="mercedes">Mercedes</option>
@@ -9,3 +8,4 @@
     </select>
   </div>
 </form>
+

data/app/views/express_ui/molecules/_table.html.erb

@@ -86,8 +86,6 @@
       <%= render "express_ui/molecules/table_with_filtering" %>
     </div>
 
-    <h4>Empty Table</h4>
-
 <p>Recommended reading on designing tables: <a href="https://medium.com/mission-log/design-better-data-tables-430a30a00d8c#.28lwzzybi" title="Design better data tables">Design better data tables</a></p></section>
 
 

data/app/views/express_ui/molecules/_table_with_filtering.html.erb

@@ -1,56 +1,85 @@
-    <div class="ae-table-filter">
-      <div class="ae-filter">
-        <%= render "express_ui/molecules/form_group_single_line" %>
-      </div>
-      <div class="ae-filter">
-        <%= render "express_ui/molecules/forms_radio" %>
-      </div>
-      <div class="ae-filter">
-        <%= render "express_ui/molecules/forms_select" %>
-      </div>
-      <div class="ae-filter">
-        <a href="#" title="Reset">×</a>
+<div class="ae-demo-container">
+  <div class="ae-mega-menu">
+    <div class="ae-actions">
+      <a href="#" class="ae-btn ae-btn-md ae-btn-border ae-btn-default ae-open-filter"><i class="fa fa-filter"></i> Filter</a>
+    </div>
+    <div class="ae-table-filter ae-hidden">
+      <div class="ae-nav-mega-menu-content">
+        <a href="#" class="ae-mega-menu-close ae-u-float-right">×</a>
+        <ul class="ae-list-block ae-nav-mega-menu-list">
+          <li class="ae-nav-mega-menu-item">
+            <h3 class="ae-filter-heading">Sort By</h3>
+            <form>
+              <select class="ae-select">
+              <option value="Value 1">Value 1</option>
+              <option value="Value 2">Value 2</option>
+              </select>
+            </form>
+          </li>
+          <li class="ae-nav-mega-menu-item ae-nav-mega-menu-item-inline">
+            <h3 class="ae-filter-heading">Button Group (Single Selection)</h3>
+            <div class="ae-btn-group-single">
+              <a href="#!" class="ae-btn ae-btn-border ae-btn-default ae-btn-md">Type 1</a>
+              <a href="#!" class="ae-btn ae-btn-border ae-btn-default ae-btn-md">Type 2</a>
+              <a href="#!" class="ae-btn ae-btn-border ae-btn-default ae-btn-md">Type 3</a>
+            </div>
+          </li>
+          <li class="ae-nav-mega-menu-item ae-nav-mega-menu-item-inline">
+            <h3 class="ae-filter-heading">Button Group (Multiple Selection)</h3>
+            <div class="ae-btn-group-multiple">
+              <a href="#!" class="ae-btn ae-btn-border ae-btn-default ae-btn-md">Type 1</a>
+              <a href="#!" class="ae-btn ae-btn-border ae-btn-default ae-btn-md">Type 2</a>
+              <a href="#!" class="ae-btn ae-btn-border ae-btn-default ae-btn-md">Type 3</a>
+            </div>
+          </li>
+          <li class="ae-nav-mega-menu-item">
+            <h3 class="ae-filter-heading">Single Slider</h3>
+            <input type="text" id="ae-single-slider" value="" name="range" />
+          </li>
+          <li class="ae-nav-mega-menu-item">
+            <h3 class="ae-filter-heading">Double Slider</h3>
+            <input type="text" id="ae-double-slider" value="" name="range" />
+          </li>
+          <li class="ae-nav-mega-menu-item">
+            <h3 class="ae-filter-heading">Input Increment</h3>
+            <div class="ae-form-increment">
+              <div class="ae-form-field">
+                <input type="number" name="numbers" value="1" class="ae-input-increment ae-text-field ae-input-md">
+              </div>
+              <div class="ae-actions">
+                <button class="ae-btn ae-btn-primary ae-btn-increment ae-btn-md" type="button">-</button>
+                <button class="ae-btn ae-btn-primary ae-btn-increment ae-btn-md" type="button">+</button>
+              </div>
+            </div>
+          </li>
+          <li class="ae-nav-mega-menu-item">
+            <div class="ae-grid-container ae-grid-one-half">
+              <div class="ae-grid">
+                <h3 class="ae-filter-heading">From</h3>
+                <form class="ae-form-single">
+                  <div class="ae-form-field ae-has-icon">
+                    <i class="fa fa-calendar"></i>
+                    <input class="ae-text-field ae-input-md" type="text" name="datepicker"  placeholder="Select a date" />
+                  </div>
+                </form>
+              </div>
+              <div class="ae-grid">
+                <h3 class="ae-filter-heading">To</h3>
+                <form class="ae-form-single">
+                  <div class="ae-form-field ae-has-icon">
+                    <i class="fa fa-calendar"></i>
+                    <input class="ae-text-field ae-input-md" type="text" name="datepicker"  placeholder="Select a date" />
+                  </div>
+                </form>
+              </div>
+            </div>
+          </li>
+        </ul>
+        <div class="ae-actions">
+          <a href="#" class="ae-btn ae-btn-block ae-btn-primary ae-btn-md">Apply</a>
+          <a href="#" class="ae-btn ae-btn-block ae-btn-default ae-btn-border ae-btn-md">Reset</a>
+        </div>
       </div>
     </div>
-    <div class="ae-table-responsive">
-      <table>
-
-      <thead>
-        <th><a href="#" title="created_at">Created At </a></th>
-        <th width="30%"><a href="#" title="address">Address</a></th>
-        <th><a href="#" title="contract_effective_date">Contract Effective Date </a></th>
-        <th><a href="#" title="closing_date">Closing Date</a></th>
-        <th><a href="#" title="owner">Owner</a></th>
-        <th><a href="#" title="creation_step">Creation Step</a></th>
-        <th><a href="#" title="paid">Paid</a></th>
-        <th width="15%"><a href="#" title="action">Actions</a></th>
-      </thead>
-      <tbody>
-        <tr>
-          <td>January 07, 2016  </td>
-          <td><a href="#">658 NW 9th Ct, Boca Raton, FL 33486, USA</a></td>
-          <td>January 07, 2016  </td>
-          <td>January 29, 2016  </td>
-          <td></td>
-          <td>step_2</td>
-          <td>false</td>
-          <td><button type="button" value="Delete" class="ae-btn ae-btn-danger">Delete</button></td>
-        </tr>
-        <tr>
-          <td>January 07, 2016  </td>
-          <td><a href="#">2714 Southern Parkway West</a></td>
-          <td>January 07, 2016  </td>
-          <td>January 29, 2016  </td>
-          <td></td>
-          <td>step_2</td>
-          <td>false</td>
-          <td><a href="#">View</a></td>
-        </tr>
-        <tr>
-          <td>Small Office</td>
-          <td>Top Producer</td>
-          <td>$1,299.00</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
+  </div>
+</div>

data/app/views/express_ui/scripts/_accordion.html.et

@@ -0,0 +1,27 @@
+para { 'Reference: http://www.jqueryscript.net/accordion/Accessible-Cross-browser-Accordion-Plugin-For-jQuery-QuickAccord.html' }
+
+code_demo {
+  %Q{
+    ul {
+      li {
+        a(href:"#ae-accordion1", class:"ae-accordion-trigger ae-btn ae-btn-primary") { 'Accordion 1' }
+        div(id: "ae-accordion1", class: "ae-accordion-content") {
+          para { 'Content 1'}
+        }
+      }
+      li {
+        a(href:"#ae-accordion2", class:"ae-accordion-trigger ae-btn ae-btn-primary collapsed") { 'Accordion 2' }
+        div(id: "ae-accordion2", class: "ae-accordion-content collapsed") {
+          para { 'Content 2'}
+        }
+      }
+      li {
+        a(href:"#ae-accordion3", class:"ae-accordion-trigger ae-btn ae-btn-primary collapsed") { 'Accordion 3' }
+        div(id: "ae-accordion3", class: "ae-accordion-content collapsed") {
+          para { 'Content 3'}
+        }
+      }
+    }
+  }
+}
+

data/app/views/express_ui/scripts/_calendar.html.et

@@ -0,0 +1,35 @@
+para {
+  text_node 'ExpressUI uses FullCalendar to display dates.'
+  a(href: 'https://fullcalendar.io/docs/', title: 'FullCalendar documentation') { 'See documentation' }
+  text_node 'and usage guidelines.'
+}
+
+table {
+  thead {
+    th { "Code" }
+    th { "Notes" }
+  }
+  tbody {
+    tr {
+      td {
+        code { "$('.ae-calendar').fullCalendar()" }
+      }
+      td { "Required Javascript. This script initializes the calendar." }
+    }
+    tr {
+      td {
+        code { '<div class="ae-calendar"></div>' }
+      }
+      td { "Required mark-up. The Javascript inserts the calendar through this class." }
+    }
+  }
+}
+
+
+code_demo {
+  %Q{
+    div(class: 'ae-calendar')
+  }
+}
+
+

data/app/views/express_ui/scripts/_carousel.html.et

@@ -0,0 +1,21 @@
+para { 'https://github.com/Naggi-Goishi/siema-rails' }
+
+
+code_demo {
+  %Q{
+    div(class: 'ae-carousel') {
+      div(class: 'ae-carousel-item', style: "background-image: url('http://lorempixel.com/1000/300/food')") {
+        div(class: 'ae-carousel-controls') {
+          div(class: 'ae-btn-group ae-btn-group-right') {
+            button(class: 'ae-btn ae-btn-primary', type: 'button') { 'Back' }
+            button(class: 'ae-btn ae-btn-primary', type: 'button') { 'Next' }
+          }
+        }
+        div(class: 'ae-carousel-caption') {
+          h3(class: 'carousel-heading') { 'Slide 1 Title' }
+          para { 'Slide 1 caption' }
+        }
+      }
+    }
+  }
+}

data/app/views/express_ui/scripts/_datepicker.html.et

@@ -0,0 +1,37 @@
+para {
+  text_node 'ExpressUI uses Pickadate.js to select dates.'
+  a(href: 'http://amsul.ca/pickadate.js/date/', title: 'Pickadate.js documentation') { 'See documentation' }
+  text_node 'and usage guidelines.'
+}
+
+table {
+  thead {
+    th { "Code" }
+    th { "Notes" }
+  }
+  tbody {
+    tr {
+      td {
+        code { "$('.ae-datepicker').pickadate()" }
+      }
+      td { "Required Javascript. This script initializes the datepicker." }
+    }
+    tr {
+      td {
+        code { '<input class="ae-datepicker"></input>' }
+      }
+      td { "Required mark-up. The Javascript inserts the datepicker through this class." }
+    }
+  }
+}
+
+code_demo {
+  %Q{
+    form {
+      div(class: 'ae-form-field ae-has-icon') {
+      	i(class: 'fa fa-calendar')
+      	input(type: 'text', class: 'ae-datepicker ae-text-field ae-input-lg', name: 'ae-datepicker', placeholder: 'Select a date')
+      }
+    }
+  }
+}

data/app/views/express_ui/scripts/_popup.html.et

@@ -0,0 +1,58 @@
+para {
+  text_node 'ExpressUI uses Magnific Pop-up.'
+  a(href: 'http://dimsemenov.com/plugins/magnific-popup/documentation.html', title: 'Magnific Pop-up documentation') { 'See documentation' }
+  text_node 'and usage guidelines.'
+}
+
+para {
+  text_node 'To add a header and footer/pop-up actions to the pop-up, you may use the '
+  link_to '<code>popup()</code> component'.html_safe, uicomponents_path(anchor: "pop-up")
+}
+
+table {
+  thead {
+    th { "Class" }
+    th { "Notes" }
+  }
+  tbody {
+    tr {
+      td {
+        code { ".ae-popup-link" }
+        text_node '+ href'
+        code { "#sample-popup" }
+      }
+      td { "Required. This link triggers the pop-up" }
+    }
+    tr {
+      td {
+        code { ".ae-popup" }
+        text_node '+ ID'
+        code { "sample-popup" }
+      }
+      td { "Required. Pop-up contents" }
+    }
+    tr {
+      td {
+        code { ".ae-popup" }
+        text_node '+'
+        code { ".ae-popup-sm" }
+        code { ".ae-popup-md" }
+        code { ".ae-popup-lg" }
+      }
+      td { "Optional. Specify pop-up size" }
+    }
+  }
+}
+
+
+code_demo {
+  %Q{
+    a(href: "#sample-popup", class: "ae-popup-link ae-btn ae-btn-primary ae-btn-md") { 'Open Popup' }
+
+    div(id: "sample-popup", class: "mfp-hide ae-popup ae-popup-sm") {
+      para { 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet vestibulum enim, eu malesuada dolor mollis a. Quisque mollis pulvinar enim id malesuada. Sed sit amet libero libero. Nullam velit erat, fringilla sit amet porttitor et, facilisis vitae lectus. Fusce eget nisl sagittis metus faucibus placerat et eget ligula. Duis eget augue maximus, fermentum velit at, bibendum nulla. Cras a libero mi. Sed ac feugiat justo. Maecenas euismod ex enim, eget auctor velit sollicitudin scelerisque. Suspendisse placerat pellentesque mauris nec accumsan. Quisque volutpat, sapien eget interdum fringilla, ex lectus aliquam elit, eget faucibus libero lectus a sem.'
+      }
+    }
+  }
+}
+

data/app/views/express_ui/scripts/_select.html.et

@@ -0,0 +1,40 @@
+para {
+  text_node 'AppExpress uses select2 dropdown to style select inputs.'
+  a(href: 'https://select2.github.io/examples.html', title: 'select2 documentation') { 'See documentation' }
+  text_node 'and usage guidelines.'
+}
+
+table {
+  thead {
+    th { "Class" }
+    th { "Notes" }
+  }
+  tbody {
+    tr {
+      td {
+        code { ".ae-select" }
+      }
+      td { "Required. This div class inserts the select2 dropdown." }
+    }
+    tr {
+      td {
+        code { "<select><option></option>
+        </select>" }
+      }
+      td { "Required. Select2 transforms this select into a dropdown list." }
+    }
+  }
+}
+
+
+code_demo {
+  %Q{
+    form() {
+      select(class: 'ae-select', name: 'select', id: 'select-sample') {
+        option(value: "option1") { 'Option 1' }
+        option(value: "option2") { 'Option 2' }
+      }
+    }
+  }
+}
+