tenon 1.1.8 → 2.0.0

data/app/serializers/tenon/asset_serializer.rb

@@ -0,0 +1,5 @@
+module Tenon
+  class AssetSerializer < ApplicationSerializer #:nodoc:
+    attributes :display_name, :style_urls
+  end
+end

data/app/serializers/tenon/paginating_serializer.rb

@@ -0,0 +1,18 @@
+# Helpful serializer for including pagination meta
+# Source: http://stackoverflow.com/a/23002614/131208
+module Tenon
+  class PaginatingSerializer < ActiveModel::ArraySerializer
+    def initialize(object, options = {})
+      meta_key = options[:meta_key] || :meta
+      options[meta_key] ||= {}
+      options[meta_key][:pagination] = {
+        current_page: object.current_page,
+        per_page: object.per_page,
+        offset: object.offset,
+        total_pages: object.total_pages,
+        total_entries: object.total_entries
+      }
+      super(object, options)
+    end
+  end
+end

data/app/views/layouts/tenon/application.html.haml

@@ -1,32 +1,42 @@
 !!! Strict
-%html{ :lang => "en" }
+%html{ lang: 'en' }
   %head
     = csrf_meta_tag
-    %meta{ :content => "text/html; charset=utf-8", "http-equiv" => "Content-Type" }/
-    %meta{ :content => 'initial-scale=1,width=device-width,user-scalable=no', :name => 'viewport' }
+    %meta{ content: "text/html; charset=utf-8", "http-equiv" => "Content-Type" }
+    %meta{ content: 'initial-scale=1,width=device-width,user-scalable=no', name: 'viewport' }
     = platform_hints(Tenon.config.primary_color) if Tenon.config.primary_color.present?
 
     %title
+      = @page_title + " | " if @page_title
       = Tenon::MySettings.site_title.present? ? Tenon::MySettings.site_title : 'Tenon'
 
-    = stylesheet_link_tag 'tenon/tenon', '//fonts.googleapis.com/css?family=Open+Sans:400,700'
+    = stylesheet_link_tag '//fonts.googleapis.com/icon?family=Material+Icons'
     = javascript_include_tag '/ckeditor/ckeditor'
-    = javascript_include_tag 'tenon/tenon_manifest'
+    = javascript_include_tag 'tenon/application'
+    = javascript_include_tag '//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'
+    = javascript_include_tag '//cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/compressed/picker.js'
+    = javascript_include_tag '//cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/compressed/picker.date.js'
+    = javascript_include_tag '//cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/compressed/picker.time.js'
+    - if Rails.env.development?
+      = javascript_include_tag 'http://localhost:9999/bundle.js'
 
-    :javascript
-      window.I18n = #{current_translations.to_json.html_safe}
+  %body{data: { controller: params[:controller], action: params[:action] } }
+    = flash_messages
 
+    = render 'tenon/shared/burger'
+    = render 'tenon/shared/util_nav', modifier: 'util-nav--in-toolbar'
 
-  %body{data: { controller: params[:controller], action: params[:action] }, class: ('menu-open' if content_for?(:sidebar))}
-    = render 'tenon/shared/util_nav'
-    = render 'tenon/shared/main_nav'
-    - if content_for?(:sidebar)
-      .sidebar-container= yield :sidebar
-    .page-wrap
-      = yield
+    .main-nav-overlay{ data: { target: 'main-nav' } }
+    #main-nav.main-nav-drawer.drawer
+      = render 'tenon/shared/app_info'
 
-    .generic-loader
-      %i.fa-gear.fa.fa-4x.fa.fa-spin
+      .app-info.app-info--account
+        = link_to '#', class: 'app-info__link app-info__link--dropdown-button', data: { dropdown_activate: true } do
+          .app-info__avatar= i('person')
+          = current_user.email
+        = render 'tenon/shared/account_dropdown'
 
-    = flash_messages
-    = render 'tenon/shared/version_warning' if @item_version
+      = render 'tenon/shared/main_nav'
+
+
+    = yield

data/app/views/tenon/assets/_form.html.haml

@@ -1,16 +1,33 @@
-#asset-uploader
-  #progress
+.drawer-pusher
   = form_for Tenon::Asset.new, format: 'json', builder: Tenon::FormBuilder do |f|
-    = error_messages_for :asset
-    .fields.full
-      .form-group.full
-        = f.text_field :title, placeholder: '--', explanation: "#{t('tenon.assets.enter_a_title_for_your_asset')} #{defined?(multiple) ? t('tenon.assets.multiple_assets') : '' }"
+    .toolbar
+      = render 'tenon/shared/breadcrumbs'
+      .toolbar__content
+        .toolbar__actions.toolbar__actions--right
+          - if policy(@asset).publish?
+            %button.btn.toolbar__btn.submit{ data: { disable_with: "Please wait..." } } Save
 
-      .form-group
-        .browse-button-holder
-          .fileupload.btn.btn-comp.browse
-            %span#choose-files= defined?(multiple) ? t('tenon.assets.choose_file') : t('tenon.assets.choose_files')
-            %input{ :type => 'file', :class => 'upload', multiple: defined?(multiple) && multiple, style: 'width: 100%;', name: 'asset[attachment]' }
+          .toolbar__action
+            %a.action-icon.dropdown-button{ href: '#!', data: { activates: 'form-dropdown'} }
+              = i('more_vert')
 
-    .spacer
+        %ul.dropdown#form-dropdown
+          - if @asset.persisted?
+            %li.dropdown__item
+              = link_to @asset, data: { method: :delete, confirm: 'Are you sure you want to delete this?' }, class: 'dropdown__action action-icon delete-link' do
+                = i('delete')
+                %span Delete
 
+    %main
+      = error_messages_for :asset
+
+      = f.text_field :title, class: 'form-title-field', explanation: "Enter a title for your asset.  You can leave this blank to just use the file name as the title. #{defined?(multiple) ? 'If you upload multiple assets a numerical series will be created.' : '' }"
+
+      .panel
+        .panel__content
+          .browse-button-holder
+            .fileupload.btn.btn-secondary.browse
+              %span#choose-files= defined?(multiple) ? 'Choose Files' : 'Choose File'
+              %input{ type: 'file', class: 'upload', multiple: defined?(multiple) && multiple, style: 'width: 100%;', name: 'asset[attachment]' }
+
+      .spacer

data/app/views/tenon/assets/crop.html.haml

@@ -1,16 +1,16 @@
-.asset-cropping
-  .modal-backdrop.fade.in
-  .preview
-    .modal-header
-      %button{ type: 'button', class: 'close', data: { dismiss: 'modal' }, :'aria-hidden' => 'true' } ×
-      %h4#myModalLabel{ class: 'modal-title'}= t('tenon.assets.crop')
-    .image-holder= image_tag(@asset.attachment.url, id: 'cropbox', data: { width: @asset.dimensions(:original)[0], height: @asset.dimensions(:original)[1] })
-    .spinner= fa_icon('spinner spin')
+.modal.modal--fixed-footer.modal--xlg
+  .modal__content
+    .asset-cropping
+      = image_tag(@asset.attachment.url, id: 'cropbox', data: { width: @asset.dimensions(:original)[0], height: @asset.dimensions(:original)[1] })
 
-    = form_for @asset, data: {remote: true} do |f|
+      .asset-cropping__explanation
+        Drag inside the image to crop
+
+  .modal__footer
+    = form_for @asset, data: { remote: true, crop_form: true } do |f|
       - [:crop_x, :crop_y, :crop_w, :crop_h].each do |field|
         = f.hidden_field field
-      .crop_buttons.right.full
-        = f.check_box :duplicate, checked: true, class: 'tn-checkbox-right'
-        = f.label :duplicate, t('tenon.assets.create_new_asset_from_crop'), class: 'left'
-        .right= f.submit t('tenon.common.save'), class: 'save btn btn-comp', data: { disable_with: t('tenon.common.please_wait') }
+      = f.hidden_field :duplicate, value: true
+
+      .modal__action
+        = f.submit 'Save', class: 'save btn btn-comp', data: { disable_with: 'Please wait...' }

data/app/views/tenon/assets/edit.html.haml

@@ -1,12 +1 @@
-= form_for @asset, builder: Tenon::FormBuilder, data: {modal: true, remote: true, type: 'json', record: 'asset'} do |f|
-  .modal-body
-    .fields.full
-
-      .form-group
-        = f.text_field :title
-
-
-      .spacer
-
-  .modal-footer
-    = f.submit t('tenon.common.save'), class: 'btn btn-comp', data: { disable_with: t('tenon.common.please_wait') }
+= render 'form'

data/app/views/tenon/assets/index.html.haml

@@ -1,19 +1,5 @@
-= render "sidebar_index"
-
-%header
-  %h1= t('tenon.assets.asset_library')
-
-  .tools
-    = render "tenon/shared/section_header/sidebar_toggle"
-
-    .header-button
-      = link_to '#', id: 'quick-search-toggle' do
-        .header-icon= fa_icon('fw search')
-
-.toolbox
-  = render "tenon/shared/section_header/quick_search", record_list: '#assets'
-
-.main-content
-  %ul#assets.record-grid{data: {role: 'records-list', records: {url: assets_path(format: 'json'), template: 'tenon/templates/assets/asset_row', name: 'asset'}}}
-
-  = link_to t('tenon.assets.load_more'), '#', :class => 'btn btn-comp infinite-loader', 'data-record-list' => '#assets'
+= react_component 'ResourceIndexRoot',
+    title: 'Assets',
+    breadcrumbs: breadcrumb_links,
+    recordsPath: assets_path(format: 'json'),
+    newPath: new_asset_path

data/app/views/tenon/assets/new.html.haml

@@ -0,0 +1 @@
+= render 'form'

data/app/views/tenon/fields/_asset.html.haml

@@ -1,32 +1,31 @@
-= raw(label_tag)
+= render layout: 'tenon/fields/base', locals: { f: f, method_name: method_name, opts: opts } do
+  %div{ class: opts[:wrapper_class] }
+    .asset-field
+      = f.hidden_field "#{method_name}_id", data: { asset_id_field: true }
 
-- if opts[:explanation].present?
-  .explanation= raw opts[:explanation]
+      .asset-field__thumbnail{ data: { asset_thumbnail: true } }
+        - if proxy_attachment.try(:asset)
+          = asset_icon(proxy_attachment.asset)
+        - else
+          = image_tag default_asset_thumbnail(proxy_attachment)
 
-.tn-tc-asset-field
-  = f.hidden_field "#{field}_id", class: 'asset-id-field'
+      .asset-field__details
+        .asset-field__title{ data: { asset_info: true } }
+          - if proxy_attachment
+            = proxy_attachment.display_name
+          - else
+            No asset selected.
 
-  .thumbnail
-    - if proxy_attachment.try(:asset)
-      = asset_icon(proxy_attachment.asset)
-    - else
-      = image_tag default_asset_thumbnail(proxy_attachment)
+        .asset-field__actions{ class: ('with-remove' if opts[:remove_association]) }
+          .asset-field__action
+            = link_to 'Browse', new_item_asset_path, class: 'action-text', data: { modal_remote: true, modal_title: "Select #{method_name.to_s.titleize}", modal_handler: 'AssetAttachment' }
+          - if opts[:remove_association]
+            .asset-field__action{ data: { asset_remove: true } }
+              = link_to_remove_association 'remove', f, class: 'action-text action-text--secondary'
+          - else
+            .asset-field__action{ data: { asset_remove: true }, style: ('display: none;' unless f.object.send("#{method_name}_id").present?) }
+              = link_to 'remove', '#', class: 'remove-asset action-text action-text--secondary', data: { confirm: 'Are you sure?' }
 
-  .details
-    .asset-info
-      - if proxy_attachment
-        = proxy_attachment.display_name
-      - else
-        No asset selected.
 
-    .browse-button-holder{ class: ('with-remove' if opts[:remove_association]) }
-      .browse-button
-        = link_to t('tenon.common.browse'), new_item_asset_path, class: 'btn btn-comp browse', data: { modal_remote: true, modal_title: "#{t('tenon.fields.select')} #{field.to_s.titleize}", modal_handler: 'Tenon.features.AssetAttachment' }
-        - if opts[:remove_association]
-          %small
-            or
-            = link_to_remove_association t('tenon.fields.remove'), f
-        - else
-          %small
-            or
-            = link_to t('tenon.fields.remove'), '#', class: 'remove-asset', data: { confirm: t('tenon.common.are_you_sure') }
+
+      .spacer

data/app/views/tenon/fields/_base.html.haml

@@ -0,0 +1,7 @@
+.input-block
+  = f.label method_name, opts[:label], opts[:required]
+
+  = yield
+
+  - if opts[:explanation].present?
+    .input-block__explanation= raw opts[:explanation]

data/app/views/tenon/fields/_base_inline.html.haml

@@ -0,0 +1,4 @@
+.input-block__inline
+  = yield
+  
+  = f.label method_name, opts[:label], opts[:required], inline: true

data/app/views/tenon/fields/_check_box.html.haml

@@ -0,0 +1,9 @@
+.input-block
+  = render layout: 'tenon/fields/base_inline', locals: { f: f, method_name: method_name, opts: opts } do
+    = f.super_check_box method_name, opts.merge(class: 'input-block__check-box')
+
+    .input-block__check-box-icon.input-block__checked-icon
+      = i('check')
+      
+  - if opts[:explanation].present?
+    .input-block__explanation= raw opts[:explanation]

data/app/views/tenon/fields/_collection_select.html.haml

@@ -0,0 +1,4 @@
+= render layout: 'tenon/fields/base', locals: { f: f, method_name: method_name, opts: opts } do
+  .input-block__select-wrap
+    = f.super_collection_select method_name, collection, value_method, text_method, opts, html_opts.merge(class: 'input-block__select')
+

data/app/views/tenon/fields/_color_field.html.haml

@@ -0,0 +1,3 @@
+= render layout: 'tenon/fields/base', locals: { f: f, method_name: method_name, opts: opts } do
+  = f.super_color_field method_name, opts.merge(class: 'input-block__text-field')
+

data/app/views/tenon/fields/_date_picker.html.haml

@@ -0,0 +1,2 @@
+= render layout: 'tenon/fields/base', locals: { f: f, method_name: method_name, opts: opts }, class: 'row' do
+    = f.super_text_field "#{method_name}_date", value: f.object.send(method_name).try(:strftime, '%d %B, %Y'), data: { behavior: 'datepicker' }, class: 'input-block__text-field input-block__text-field--stacked', placeholder: 'Day Month, Year'

data/app/views/tenon/fields/_date_time_picker.html.haml

@@ -0,0 +1,6 @@
+= render layout: 'tenon/fields/base', locals: { f: f, method_name: method_name, opts: opts }, class: 'row' do
+  .inner8
+    = f.super_text_field "#{method_name}_date", value: f.object.send(method_name).try(:strftime, '%d %B, %Y'), data: { behavior: 'datepicker' }, class: 'input-block__text-field input-block__text-field--stacked', placeholder: 'Day Month, Year'
+  .inner4.omega
+    = f.super_text_field "#{method_name}_time", value: f.object.send(method_name).try(:strftime, '%-l:%M %p %Z'), class: 'input-block__text-field', data: { behavior: 'timepicker' }, placeholder: '00:00 AM'
+  .spacer

data/app/views/tenon/fields/_email_field.html.haml

@@ -0,0 +1,2 @@
+= render layout: 'tenon/fields/base', locals: { f: f, method_name: method_name, opts: opts } do
+  = f.super_email_field method_name, opts.merge(class: 'input-block__text-field')

data/app/views/tenon/fields/_inline_check_box.html.haml

@@ -0,0 +1,5 @@
+= render layout: 'tenon/fields/base_inline', locals: { f: f, method_name: method_name, opts: opts } do
+  = f.super_check_box method_name, opts.merge(class: 'input-block__check-box')
+
+  .input-block__check-box-icon.input-block__checked-icon
+    = i('check')

data/app/views/tenon/fields/_inline_radio_button.html.haml

@@ -0,0 +1,5 @@
+= render layout: 'tenon/fields/base_inline', locals: { f: f, method_name: method_name, value: value, opts: opts } do
+  = f.super_radio_button method_name, value, opts.merge(class: 'input-block__radio-button')
+
+  .input-block__radio-button-icon.input-block__checked-icon
+    = i('check')

data/app/views/tenon/fields/_number_field.html.haml

@@ -0,0 +1,2 @@
+= render layout: 'tenon/fields/base', locals: { f: f, method_name: method_name, opts: opts } do
+  = f.super_number_field method_name, opts.merge(class: 'input-block__text-field')

data/app/views/tenon/fields/_password_field.html.haml

@@ -0,0 +1,2 @@
+= render layout: 'tenon/fields/base', locals: { f: f, method_name: method_name, opts: opts } do
+  = f.super_password_field method_name, opts.merge(class: 'input-block__text-field')

data/app/views/tenon/fields/_phone_field.html.haml

@@ -0,0 +1,2 @@
+= render layout: 'tenon/fields/base', locals: { f: f, method_name: method_name, opts: opts } do
+  = f.super_phone_field method_name, opts.merge(class: 'input-block__text-field')

data/app/views/tenon/fields/_radio_button.html.haml

@@ -0,0 +1,9 @@
+.input-block
+  = render layout: 'tenon/fields/base_inline', locals: { f: f, method_name: method_name, value: value, opts: opts } do
+    = f.super_radio_button method_name, value, opts.merge(class: 'input-block__radio-button')
+
+    .input-block__radio-button-icon.input-block__checked-icon
+      = i('check')
+      
+  - if opts[:explanation].present?
+    .input-block__explanation= raw opts[:explanation]

data/app/views/tenon/fields/_rich_text.html.haml

@@ -1,8 +1,5 @@
-= raw(label_tag)
+= render layout: 'tenon/fields/base', locals: { f: f, method_name: method_name, opts: opts } do
 
-- if opts[:explanation].present?
-  .explanation= raw opts[:explanation]
+  .input-block__multiline-text-field{ contenteditable: 'true', data: { placeholder: opts[:placeholder] } }= raw f.object.try(method_name)
 
-.editable-text{ contenteditable: 'true', data: { placeholder: opts[:placeholder] } }= raw f.object.try(field)
-
-= f.hidden_field field
+  = f.hidden_field method_name

data/app/views/tenon/fields/_select.html.haml

@@ -0,0 +1,3 @@
+= render layout: 'tenon/fields/base', locals: { f: f, method_name: method_name, opts: opts } do
+  .input-block__select-wrap
+    = f.super_select method_name, choices, opts, html_opts.merge(class: 'input-block__select')

data/app/views/tenon/fields/_text_area.html.haml

@@ -0,0 +1,2 @@
+= render layout: 'tenon/fields/base', locals: { f: f, method_name: method_name, opts: opts } do
+  = f.super_text_area method_name, opts.merge(class: 'input-block__multiline-text-field')

data/app/views/tenon/fields/_text_field.html.haml

@@ -0,0 +1,2 @@
+= render layout: 'tenon/fields/base', locals: { f: f, method_name: method_name, opts: opts } do
+  = f.super_text_field method_name, opts.merge(class: 'input-block__text-field')

data/app/views/tenon/fields/_title_text_field.html.haml

@@ -0,0 +1,2 @@
+= render layout: 'tenon/fields/base', locals: { f: f, method_name: method_name, opts: opts } do
+  = f.super_text_field method_name, opts.merge(class: 'input-block__title-text-field')

data/app/views/tenon/fields/_url_field.html.haml

@@ -0,0 +1,2 @@
+= render layout: 'tenon/fields/base', locals: { f: f, method_name: method_name, opts: opts } do
+  = f.super_url_field method_name, opts.merge(class: 'input-block__text-field')

data/app/views/tenon/index/index.html.haml

@@ -1,29 +1,8 @@
-- content_for :sidebar do
-  .sidebar
-    .content
-      %h2= t('tenon.index.notifications')
-      - unless @warnings.empty?
-        %h3= t('tenon.index.some_items_need_your_attention')
-
-        - @warnings.each do |warning|
-          .notification= warning
-
-%header
-  %h1= t('tenon.index.welcome_to_tenon')
-
-  .tools
-    = render "tenon/shared/section_header/sidebar_toggle"
-
-.main-content
-  #dashboard-callouts.container
-    - # change the count to test various quantities of callouts - eimaj
-    - @tenon_callouts.each do |callout|
-      .callout
-        %h4.title
-          %i{class: "fa fa-fw fa-#{callout.icon}"}
-          = callout.title
-
-        .callout-content= raw callout.content
-        - if callout.uri.present?
-          %p
-            = link_to callout.button_text, callout.uri, class: "btn btn-primary btn-block", target: ("_" if callout.new_window)
+.drawer-pusher
+  .toolbar
+    %ul.breadcrumbs
+      %li.breadcrumbs__item
+        Dashboard?
+
+  %main
+    -# %h1 Index#Index

data/app/views/tenon/item_assets/new.html.haml

@@ -1,24 +1,22 @@
-.modal-tab-pane.tab-content
-  - unless params[:hide_upload]
-    #upload-asset
-      %h5= t('tenon.assets.from_your_computer')
-      #progress
-      = form_for Tenon::Asset.new, format: 'json', builder: Tenon::FormBuilder do |f|
-        = error_messages_for :asset
-        .fields.full
-          .form-group
-            .browse-button-holder.solo
-              .fileupload.btn.btn-comp.browse
-                %span#choose-files= t('tenon.common.browse')
-                %input{ :type => 'file', :class => 'upload', multiple: defined?(multiple) && multiple, style: 'width: 100%;', name: 'asset[attachment]' }
-        .spacer
+.modal.modal--fixed-footer
+  .modal__content
+    %h2 Choose Asset
+    - unless params[:hide_upload]
+      .upload-asset
+        %h3 From Your Device
+        .progress-container
+        = form_for Tenon::Asset.new, format: 'json', builder: Tenon::FormBuilder do |f|
+          .input-block
+            %label.btn{ for: 'file-upload' } Browse
+            %input#file-upload.upload{ type: 'file', multiple: defined?(multiple) && multiple, style: 'position: absolute; left: -9999px;', name: 'asset[attachment]' }
 
-  #pick-asset
-    %h5= t('tenon.assets.from_the_asset_library')
+    %h3 From The Asset Library
+    #pick-asset
+      = react_component 'Tenon.RI.StandaloneList',
+        title: 'Assets',
+        recordsPath: assets_path(format: 'json'),
+        newPath: new_asset_path,
+        childComponentNames: { List: 'AssetList', Record: 'AssetRecord' }
 
-    .filter= text_field_tag :q, '', id: 'quick-search', class: 'filter search', placeholder: t('tenon.assets.filter_assets'), data: { 'record-list' => '.asset-list' }
-
-    .asset-list-scroller
-      %ul#modal-asset-list.asset-list.record-grid.infinite-scroll{ data: { records: { url: assets_path(format: 'json'), template: 'tenon/templates/assets/asset_row', name: 'asset' } } }
-
-      = link_to t('tenon.assets.load_more'), '#', :class => 'infinite-loader', 'data-record-list' => '#modal-asset-list'
+  .modal__footer
+    %a.modal__action{ href: '#!', data: { modal_close: true } } Cancel

data/app/views/tenon/item_versions/_item_version.json.jbuilder

@@ -1,8 +1,8 @@
-json.title item_version.title.blank? ? t('tenon.item_versions.no_title') : item_version.title
+json.title item_version.title.blank? ? "(No Title)" : item_version.title
 json.created_at item_version.created_at.strftime('%m/%d/%Y at %l:%M%p')
 json.user_email item_version.user.try(:email)
 if item_version.item
-  json.load_link action_link(t('tenon.item_versions.view_draft'), polymorphic_path([:edit, item_version.item], version: item_version.id), 'reply')
+  json.load_link action_link('View Draft', polymorphic_path([:edit, item_version.item], version: item_version.id), 'reply')
 else
-  json.load_link action_link(t('tenon.item_versions.view_draft'), new_polymorphic_path(item_version.item_type.constantize, version: item_version.id), 'reply')
-end
+  json.load_link action_link('View Draft', new_polymorphic_path(item_version.item_type.constantize, version: item_version.id), 'reply')
+end

data/app/views/tenon/item_versions/index.html.haml

@@ -1,7 +1,15 @@
-.modal-body
-  = t('tenon.item_versions.choose_a_draft')
+.modal.modal--fixed-footer
+  .modal__content
+    .explanation
+      Choose a draft to load from the list below.  Loading a draft will open it
+      but it will not overwrite the active version of your item until you
+      press Save.
+    #item-version-index
+      = react_component 'Tenon.RI.StandaloneList',
+        title: 'Item Versions',
+        recordsPath: list_item_versions_path(format: 'json', item_type: params[:item_type], item_id: params[:item_id]),
+        newPath: new_item_version_path,
+        childComponentNames: { Record: 'ItemVersionRecord' }
 
-  .asset-list-scroller
-    %ul.record-list#item_versions{data: {records: {url: item_versions_path(format: 'json', item_type: params[:item_type], item_id: params[:item_id]), template: 'tenon/templates/item_versions/item_version_row', name: 'item_version'}}}
-
-    = link_to t('tenon.item_versions.load_other_drafts'), '#', :class => 'btn btn-comp infinite-loader', 'data-record-list' => '#item_versions'
+  .modal__footer
+    %button.modal__action{ data: { modal_close: true } } Cancel

data/app/views/tenon/item_versions/new.html.haml

@@ -1,12 +1,10 @@
-= form_for @item_version, builder: Tenon::FormBuilder do |f|
-  .modal-body
-    .fields.full
-      .form-group
-        = f.text_field :title
-        = f.hidden_field :item_type
-        = f.hidden_field :item_id
+= form_for @item_version, builder: Tenon::FormBuilder, html: { class: 'modal modal--thin' } do |f|
+  .modal__content
+    = f.text_field :title
+    = f.hidden_field :item_type
+    = f.hidden_field :item_id
 
-      .spacer
 
-  .modal-footer
-    %button.btn.btn-comp.submit= t('tenon.item_versions.save_draft')
+  .modal__footer
+    %button.modal__action{ type: 'submit' } Save Draft
+    %button.modal__action{ type: 'button', data: { modal_close: true } } Cancel

data/app/views/tenon/settings/_contact.html.haml

@@ -1,19 +1,14 @@
-%h4.box-label= t('tenon.settings.contact_details')
-.box
-  .form-group.bordered
-    %label= t('tenon.settings.contact_email')
-    .explanation= t('tenon.settings.destination_email_address_for_alerts')
-    = text_field_tag "settings[contact_email]", Tenon::MySettings.contact_email, :placeholder => "--"
-
-  .form-group.bordered
-    %label= t('tenon.settings.sender_email')
-    .explanation= t('tenon.settings.from_email_address_for_alerts')
-    = text_field_tag "settings[from_email]", Tenon::MySettings.from_email, :placeholder => "--"
-
-%h4.box-label= t('tenon.settings.comment_notifications')
-.box
-  .form-group.inline.bordered
-    = check_box_tag "settings[comment_email]", 1, Tenon::MySettings.comment_email, class: 'tn-checkbox-right'
-    %label{ for: 'settings_comment_email' }= t('tenon.settings.comment_email')
-    .explanation= t('tenon.settings.do_you_want_to_receive')
-
+.panel-label Contact
+.panel
+  .panel__content
+    .row
+      .inner4
+        = input_block 'Contact Email', explanation: 'Destination email address for alerts.  Separate multiple email addresses with commas.' do
+          = text_field_tag 'settings[contact_email]', Tenon::MySettings.contact_email, class: 'input-block__text-field'
+      .inner4
+        = input_block 'Sender Email', explanation: '"From" email address for alerts.' do
+          = text_field_tag 'settings[from_email]', Tenon::MySettings.from_email, class: 'input-block__text-field'
+      .inner4.omega
+        = input_block 'Comment Email', explanation: 'Do you want to receive an email when someone posts a comment?' do
+          = check_box_tag 'settings[comment_email]', Tenon::MySettings.comment_email, class: 'input-block__text-field'
+          %label.input-block__label--inline Yes, send me emails

data/app/views/tenon/settings/_general.html.haml

@@ -1,12 +1,16 @@
-.form-group
-  %label= t('tenon.settings.site_name')
-  = text_field_tag 'settings[site_title]', Tenon::MySettings.site_title
+.panel-label General
+.panel
+  .panel__content
+    .row
+      .inner6
+        = input_block 'Site Name' do
+          = text_field_tag 'settings[site_title]', Tenon::MySettings.site_title, class: 'input-block__text-field'
+      .inner6.omega
+        = input_block 'Site Domain' do
+          = text_field_tag 'settings[site_url]', Tenon::MySettings.site_url, class: 'input-block__text-field'
 
-.form-group
-  %label= t('tenon.settings.site_domain')
-  = text_field_tag 'settings[site_url]', Tenon::MySettings.site_url
-
-.form-group
-  %label= t('tenon.settings.google_analytics_code')
-  .explanation= link_to t('tenon.settings.create_a_new_profile_here'), 'https://www.google.com/analytics/settings/add_profile?scid=16153080', target: '_'
-  = text_area_tag 'settings[google_analytics]', Tenon::MySettings.google_analytics, style: 'height: 180px;'
+    .input-block
+    = input_block 'Google Analytics Code' do
+      = text_area_tag 'settings[google_analytics]', Tenon::MySettings.google_analytics, class: 'input-block__multiline-text-field'
+      .input-block__explanation
+        = link_to('Create a New Profile Here', 'https://www.google.com/analytics/settings/add_profile?scid=16153080', target: '_')