express_ui 0.1.0.rc1

data/app/views/express_ui/templates/master_detail_fixed.html.erb

@@ -0,0 +1,36 @@
+<%= render "express_ui/shared/header" %>
+<div class="ae-template-master-detail-fixed">
+
+  <div class="ae-sidebar ae-sidebar-left">
+    <nav><a href="#">{Sidebar Menu}</a></nav>
+  </div>
+
+  <div class="ae-sidebar ae-sidebar-right">
+    <p>{Detail}</p>
+  </div>
+
+  <div class="ae-content content">
+    <%= render "express_ui/shared/search_box" %>
+
+    <h1>This is a fixed master-detail layout</h1>
+
+    <%= highlight_code_block do %>
+    <%= "<header></header>" %>
+    <%= "<div class=\"ae-template-master-detail-fixed\">" %>
+      <%= "<div class=\"ae-sidebar ae-sidebar-left\">" %>
+        <%= "<nav>" %>
+          <%= "{Sidebar Menu}" %>
+        <%= "</nav>" %>
+      <%= "</div>" %>
+      <%= "<div class=\"ae-sidebar ae-sidebar-right\">" %>
+        <%= "{Detail View}" %>
+      <%= "</div>" %>
+      <%= "<div class=\"ae-content\">" %>
+        <%= "{Content}" %>
+      <%= "</div>" %>
+    <%= "</div>" %>
+    <%= "<footer></footer>" %>
+    <% end %>
+    </div>
+  </div>
+</div>

data/app/views/express_ui/uicomponents/_buttons.html.et

@@ -0,0 +1,10 @@
+
+h3 { 'command_button()'}
+section {
+  code_demo {
+    %Q{
+      command_button() {
+      }
+    }
+  }
+}

data/app/views/express_ui/uicomponents/_flash_message.html.et

@@ -0,0 +1,19 @@
+h3 { 'flash_message' }
+section {
+  code_demo {
+    %Q{
+      flash_message()
+    }
+  }
+}
+
+
+h3 { 'error_message()' }
+section {
+  code_demo {
+    %Q{
+      error_message()
+    }
+  }
+}
+

data/app/views/express_ui/uicomponents/_forms.html.et

@@ -0,0 +1,118 @@
+h3 { "input()" }
+section {
+  code_demo {
+    %Q{
+      input(
+        class: 'ae-text-field ae-input-sm',
+        type: "text",
+        name: "text",
+        value: "Enter a word",
+        placeholder: "Enter some text"
+      )
+    }
+  }
+}
+
+h3 { "smart_form()" }
+section {
+  code_demo {
+    %Q{
+      smart_form(){
+      }
+    }
+  }
+}
+
+h3 { 'express_form()'}
+section {
+  code_demo {
+    %Q{
+      express_form() {
+      }
+    }
+  }
+}
+
+
+h3 { "Search" }
+section {
+
+  para {
+    "A search form always contains a search field and reset search field button. Search button is optional. Search on \"enter\" key is always enabled."
+  }
+
+  table {
+    thead {
+      th { "Properties" }
+      th { "Notes" }
+    }
+    tbody {
+      tr {
+        td { code { "maxLength" } }
+        td { "auto or string" }
+      }
+
+      tr {
+        td { code { "grouping" } }
+        td { "inline, horizontal, or single_line" }
+      }
+
+      tr {
+        td { code { "button"} }
+        td { "true or false" }
+      }
+    }
+  }
+
+  code_demo {
+    %Q{
+      search_form(
+        name: "",
+        maxlength: "",
+        class: "",
+        placeholder: "Enter a keyword and hit enter",
+        value: "",
+        grouping: "single_line",
+        button: true,
+        button_text: "Search"){
+      }
+    }
+  }
+}
+
+h3 { "Express Billing" }
+section {
+  para { "Credit card form, coupon code" }
+}
+
+h3 { 'code_editor()'}
+section {
+  code_demo {
+    %Q{
+      express_form() {
+        code_editor()
+      }
+    }
+  }
+}
+
+
+h3 { 'country_select()'}
+section {
+  code_demo {
+    %Q{
+      express_form() {
+        country_select :country_code, label: "Country", class: form_field_class(:country)
+      }
+    }
+  }
+}
+
+h3 { "media_form()" }
+section {
+  code_demo {
+    %Q{
+      media_form()
+    }
+  }
+}

data/app/views/express_ui/uicomponents/_heading.html.et

@@ -0,0 +1,24 @@
+section {
+  para {
+    text_node "Heading blocks ("
+    code { "<h1>" }
+    text_node "to"
+    code { "<h6>" }
+    text_node ") can have optional icon and extra text."
+  }
+
+  para {
+    text_node "To use icons inside headers, see the"
+    code { "fa_icon" }
+    text_node "component guide."
+  }
+
+  code_demo {
+    %Q{
+      heading(){
+        text_node "Heading"
+        fa_icon "class"
+      }
+    }
+  }
+}

data/app/views/express_ui/uicomponents/_icons.html.et

@@ -0,0 +1,35 @@
+h3 { 'icon()' }
+
+section {
+  para {
+    text_node "Font Awesome (FA) has over 600 icons for commercial use. To use FA icons in ExpressUI, use the"
+    code { "icon" }
+    text_node "component. Simply look for the FA class and append it as a value. No need to prepend the"
+    code { ".fa-" }
+    text_node "icon class as instructed in the FA document because ExpressUI already automatically prepends it. To know which classes to use, see the"
+    a(href: 'http://fontawesome.io/icons/') { "Font Awesome documentation" }
+    text_node "."
+  }
+
+  code_demo {
+    %Q{
+      icon 'close'
+      icon 'check'
+    }
+  }
+}
+
+h3 { 'icon_link()' }
+section {
+  code_demo {
+    %Q{
+      icon_link(
+        'cancel',
+        text: 'View Site',
+        href: '/',
+        target: '_blank'
+      )
+    }
+  }
+
+}

data/app/views/express_ui/uicomponents/_layout.html.et

@@ -0,0 +1,47 @@
+h3 { "header()" }
+section {
+  para { "The header consists of a logo and main nav on the left. A secondary nav on the right is optional." }
+
+code_demo {
+"header() {
+  'Header contents here'
+}"
+}
+}
+
+h3 { "sidebar_region()" }
+section {
+  div(class: 'demo-container') {
+    render 'express_ui/uicomponents/sidebar'
+  }
+}
+
+h3 { "main_region()" }
+section {
+code_demo {
+"main_region() {
+  p 'This block of text goes right into the contents.'
+}"
+}
+}
+
+h3 { "page_header()" }
+section {
+code_demo {
+"content_for(:page_header) {
+  h1 'Welcome to Express UI'
+  p 'This block of text goes right into the page header.'
+}"
+}
+}
+
+h3 { "footer()" }
+section {
+  para { "(Nav, logo, social media inks)" }
+
+  code_demo {
+    "footer() {
+      'Footer contents here'
+    }"
+  }
+}

data/app/views/express_ui/uicomponents/_lists.html.et

@@ -0,0 +1,9 @@
+h3 { 'definition_list()' }
+
+section {
+  code_demo {
+    %Q{
+       definition_list()
+    }
+  }
+}

data/app/views/express_ui/uicomponents/_login.html.erb

@@ -0,0 +1,15 @@
+
+<form class="ae-form-horizontal ae-u-text-left">
+<div class="ae-form-field">
+<label for="email">Email</label>
+<input class="ae-text-field ae-input-md" type="email" name="email" value="user@email.com" id="email" placeholder="user@email.com" />
+<p class="ae-hint">Your email adress</p>
+</div>
+<div class="ae-form-field">
+<label for="password">Password</label>
+<input class="ae-text-field ae-input-md" type="password" name="password" value="Enter password" id="password" placeholder="Enter password" />
+</div>
+<div class="ae-actions">
+<button class="ae-btn ae-btn-primary ae-btn-md" type="submit">Login</button>
+</div>
+</form>

data/app/views/express_ui/uicomponents/_nav.html.et

@@ -0,0 +1,18 @@
+h3 { 'navbaractions()' }
+section {
+
+  code_demo {
+    "navbaractions() {
+    }"
+  }
+}
+
+h3 { 'mega_menu()' }
+section {
+
+  code_demo {
+    "mega_menu() {
+    }"
+  }
+}
+

data/app/views/express_ui/uicomponents/_pages.html.et

@@ -0,0 +1,22 @@
+section {
+  table {
+    thead {
+      th { 'Page Name' }
+      th { 'Demo' }
+    }
+    tbody {
+      tr {
+        td { 'Register' }
+        td { a(href: "#", title: "View Sample") { 'View Sample' } }
+      }
+      tr {
+        td { 'Login' }
+        td { a(href: "#", title: "View Sample") { 'View Sample' } }
+      }
+      tr {
+        td { 'Static' }
+        td { a(href: "#", title: "View Sample") { 'View Sample' } }
+      }
+    }
+  }
+}

data/app/views/express_ui/uicomponents/_panel.html.et

@@ -0,0 +1,33 @@
+section {
+  para {
+    "A panel is a way of boxing up groups of related contents to separate it from the rest of the document. Panels usually have a header, content body, and footer. Normal content blocks don't need to be in panels if all they are are texts or images. Panels have styling options. "
+  }
+
+  para {
+    'This outlines the basic structure of a panel'
+  }
+
+  highlight_code_block {
+    %Q{
+      <div class=\"panel\">
+        <div class=\"panel-heading\">
+          <h2>Heading</h2>
+        </div>
+
+        <div class=\"panel-body\">
+          {Content}
+        </div>
+
+        <div class=\"panel-footer\"></div>
+      </div>
+    }
+  }
+
+
+  code_demo {
+    %Q{
+      pane(){
+      }
+    }
+  }
+}

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

@@ -0,0 +1,19 @@
+section {
+  para {
+    "Popups (or modal) is a dialog box window that is displayed on top of the current page."
+  }
+
+  code_demo {
+    %Q{
+      popup() {
+      }
+    }
+  }
+
+  code_demo {
+    %Q{
+      popup_actions() {
+      }
+    }
+  }
+}

data/app/views/express_ui/uicomponents/_register.html.erb

@@ -0,0 +1,14 @@
+<form class="ae-form-horizontal ae-u-text-left">
+<div class="ae-form-field">
+<label for="email">Email</label>
+<input class="ae-text-field ae-input-md" type="email" name="email" value="user@email.com" id="email" placeholder="user@email.com" />
+<p class="ae-hint">Your email adress</p>
+</div>
+<div class="ae-form-field">
+<label for="password">New Password</label>
+<input class="ae-text-field ae-input-md" type="password" name="password" value="Enter password" id="password" placeholder="Enter password" />
+</div>
+<div class="ae-actions">
+<button class="ae-btn ae-btn-primary ae-btn-md" type="submit">Create an Account</button>
+</div>
+</form>

data/app/views/express_ui/uicomponents/_sidebar.html.et

@@ -0,0 +1,8 @@
+section {
+  code_demo {
+    %Q{
+      sidebar_region {
+      }
+    }
+  }
+}