mtl 1.0.1

data/lib/generators/mtl/templates/_variables.scss

@@ -0,0 +1,330 @@
+
+//  ==========================================================================
+//  Materialize variables
+//  ========================================================================== */
+//
+//  Table of Contents:
+//
+//  1.  Colors
+//  2.  Badges
+//  3.  Buttons
+//  4.  Cards
+//  5.  Collapsible
+//  6.  Chips
+//  7.  Date Picker
+//  8.  Dropdown
+//  10. Forms
+//
+//  11. Global
+//  12. Grid
+//  13. Navigation Bar
+//  14. Side Navigation
+//  15. Photo Slider
+//  16. Spinners | Loaders
+//  17. Tabs
+//  18. Tables
+//  19. Toasts
+//
+//  20. Typography
+//  21. Footer
+//  22. Flow Text
+//  23. Collections
+//  24. Progress Bar
+//
+//  99. Custom ATP/MTL Elements
+
+
+// 1. Colors ================================================================
+
+$primary-color: color('materialize-red', 'lighten-2') !default;
+$primary-color-light: lighten($primary-color, 15%) !default;
+$primary-color-dark: darken($primary-color, 15%) !default;
+
+$secondary-color: color('teal', 'lighten-1') !default;
+$success-color: color('green', 'base') !default;
+$error-color: color('red', 'base') !default;
+$link-color: color('light-blue', 'darken-1') !default;
+
+
+// 2. Badges ================================================================
+
+$badge-bg-color: $secondary-color !default;
+
+
+// 3. Buttons ===============================================================
+
+// Shared styles
+$button-border: none !default;
+$button-background-focus: lighten($secondary-color, 4%) !default;
+$button-font-size: 1.3rem !default;
+$button-height: 36px !default;
+$button-padding: 0 2rem !default;
+$button-radius: 2px !default;
+
+// Disabled styles
+$button-disabled-background: color('grey', 'lighten-1') !default;
+$button-disabled-color: color('grey', 'lighten-1') !default;
+
+// Raised buttons
+$button-raised-background: $secondary-color !default;
+$button-raised-background-hover: lighten($button-raised-background, 5%) !default;
+$button-raised-color: color('shades', 'white') !default;
+
+// Large buttons
+$button-large-icon-font-size: 1.6rem !default;
+$button-large-height: $button-height * 1.5 !default;
+
+// Flat buttons
+$button-flat-color: #343434 !default;
+$button-flat-disabled-color: lighten(color('grey', 'lighten-1'), 10%) !default;
+
+// Floating buttons
+$button-floating-background: $secondary-color !default;
+$button-floating-background-hover: $button-floating-background !default;
+$button-floating-color: #fff !default;
+$button-floating-size: 37px !default;
+$button-floating-large-size: $button-floating-size * 1.5 !default;
+$button-floating-radius: 50% !default;
+
+
+// 4. Cards =================================================================
+
+$card-padding: 20px !default;
+$card-bg-color: #fff !default;
+$card-link-color: color('orange', 'accent-2') !default;
+$card-link-color-light: lighten($card-link-color, 20%) !default;
+
+
+// 5. Collapsible ===========================================================
+
+$collapsible-height: 3rem !default;
+$collapsible-header-color: #fff !default;
+$collapsible-border-color: #ddd !default;
+
+
+// 6. Chips =================================================================
+
+$chip-bg-color: #e4e4e4 !default;
+$chip-border-color: #9e9e9e !default;
+$chip-selected-color: #26a69a !default;
+$chip-margin: 5px !default;
+
+
+// 7. Date Picker ===========================================================
+
+$datepicker-weekday-bg: darken($secondary-color, 7%) !default;
+$datepicker-date-bg: $secondary-color !default;
+$datepicker-year: rgba(255, 255, 255, .4) !default;
+$datepicker-focus: rgba(0, 0, 0, .05) !default;
+$datepicker-selected: $secondary-color !default;
+$datepicker-selected-outfocus: desaturate(lighten($secondary-color, 35%), 15%) !default;
+
+
+// 8. Dropdown ==============================================================
+
+$dropdown-bg-color: #fff !default;
+$dropdown-hover-bg-color: #eee !default;
+$dropdown-color: $secondary-color !default;
+$dropdown-item-height: 50px !default;
+
+
+// 9. Fonts =================================================================
+
+$roboto-font-path: '../fonts/roboto/' !default;
+
+
+// 10. Forms ================================================================
+
+// Text Inputs + Textarea
+$input-height: 3rem !default;
+$input-border-color: color('grey', 'base') !default;
+$input-border: 1px solid $input-border-color !default;
+$input-background: #fff !default;
+$input-error-color: $error-color !default;
+$input-success-color: $success-color !default;
+$input-focus-color: $secondary-color !default;
+$input-font-size: 1rem !default;
+$input-margin: 0 0 20px 0 !default;
+$input-padding: 0 !default;
+$input-transition: all .3s !default;
+$label-font-size: .8rem !default;
+$input-disabled-color: rgba(0, 0, 0, .26) !default;
+$input-disabled-solid-color: #bdbdbd !default;
+$input-disabled-border: 1px dotted $input-disabled-color !default;
+$input-invalid-border: 1px solid $input-error-color !default;
+$placeholder-text-color: lighten($input-border-color, 20%) !default;
+
+// Radio Buttons
+$radio-fill-color: $secondary-color !default;
+$radio-empty-color: #5a5a5a !default;
+$radio-border: 2px solid $radio-fill-color !default;
+
+// Range
+$range-height: 14px !default;
+$range-width: 14px !default;
+$track-height: 3px !default;
+
+// Select
+$select-border: 1px solid color('grey', 'lighten-3') !default;
+$select-background: rgba(255, 255, 255, .9) !default;
+$select-focus: 1px solid lighten($secondary-color, 47%) !default;
+$select-padding: 5px !default;
+$select-radius: 2px !default;
+$select-disabled-color: rgba(color('shades', 'black'), .3) !default;
+
+// Switches
+$switch-bg-color: $secondary-color !default;
+$switch-checked-lever-bg: desaturate(lighten($secondary-color, 25%), 25%) !default;
+$switch-unchecked-bg: #f1f1f1 !default;
+$switch-unchecked-lever-bg: #818181 !default;
+$switch-radius: 15px !default;
+
+
+// 11. Global ===============================================================
+
+// Media Query Ranges
+$small-screen-up: 601px !default;
+$medium-screen-up: 993px !default;
+$large-screen-up: 1201px !default;
+$small-screen: 600px !default;
+$medium-screen: 992px !default;
+$large-screen: 1200px !default;
+
+$medium-and-up: 'only screen and (min-width : #{$small-screen-up})' !default;
+$large-and-up: 'only screen and (min-width : #{$medium-screen-up})' !default;
+$small-and-down: 'only screen and (max-width : #{$small-screen})' !default;
+$medium-and-down: 'only screen and (max-width : #{$medium-screen})' !default;
+$medium-only: 'only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})' !default;
+
+
+// 12. Grid =================================================================
+
+$num-cols: 12 !default;
+$gutter-width: 1.5rem !default;
+$element-top-margin: $gutter-width / 3 !default;
+$element-bottom-margin: ($gutter-width * 2) / 3 !default;
+
+
+// 13. Navigation Bar =======================================================
+
+$navbar-height: 64px !default;
+$navbar-height-mobile: 56px !default;
+$navbar-font-color: #fff !default;
+$navbar-font-size: 1rem !default;
+$navbar-brand-font-size: 2.1rem !default;
+
+
+// 14. Side Navigation ======================================================
+
+$sidenav-font-size: 1rem !default;
+$sidenav-font-color: rgba(0,0,0,.87) !default;
+$sidenav-bg-color: #fff !default;
+$sidenav-padding: 16px !default;
+$sidenav-item-height: 40px !default;
+
+
+// 15. Photo Slider =========================================================
+
+$slider-bg-color: color('grey', 'base') !default;
+$slider-bg-color-light: color('grey', 'lighten-2') !default;
+$slider-indicator-color: color('green', 'base') !default;
+
+
+// 16. Spinners | Loaders ===================================================
+
+$spinner-default-color: $secondary-color !default;
+
+
+// 17. Tabs =================================================================
+
+$tabs-underline-color: $primary-color-light !default;
+$tabs-text-color: $primary-color !default;
+$tabs-bg-color: #fff !default;
+
+
+// 18. Tables ===============================================================
+
+$table-border-color: #d0d0d0 !default;
+$table-striped-color: #f2f2f2 !default;
+
+
+// 19. Toasts ===============================================================
+
+$toast-height: 48px !default;
+$toast-color: #323232 !default;
+$toast-text-color: #fff !default;
+
+
+// 20. Typography ===========================================================
+
+$off-black: rgba(color('shades', 'black'), .87) !default;
+
+// Header Styles
+$h1-fontsize: 1.43rem !default;
+$h2-fontsize: 1.71rem !default;
+$h3-fontsize: 1.14rem !default;
+$h4-fontsize: 1rem !default;
+$h5-fontsize: .8rem !default;
+$h6-fontsize: 1rem !default;
+
+
+// 21. Footer ===============================================================
+
+$footer-bg-color: $primary-color !default;
+
+
+// 22. Flow Text ============================================================
+
+$range: $large-screen - $small-screen !default;
+$intervals: 20 !default;
+$interval-size: $range / $intervals !default;
+
+
+// 23. Collections ==========================================================
+
+$collection-border-color: #e0e0e0 !default;
+$collection-bg-color: #fff !default;
+$collection-active-bg-color: $secondary-color !default;
+$collection-active-color: lighten($secondary-color, 55%) !default;
+$collection-hover-bg-color: #ddd !default;
+$collection-link-color: $secondary-color !default;
+
+
+// 24. Progress Bar =========================================================
+
+$progress-bar-color: $secondary-color !default;
+
+
+// 99. Custom ATP/MTL Elements =============================================
+
+// sidenav elements
+$mtl-sidenav-bg-active-color: color('blue', 'base') !default;
+$mtl-sidenav-font-active-color: #fff !default;
+
+// default layout
+$mtl-layout-default-sidenav-width: 240px !default;
+
+$mtl-layout-default-bg: color('grey', 'lighten-5') !default;
+$mtl-layout-default-text: color('grey', 'darken-4') !default;
+
+$mtl-layout-default-header-bg: color('grey', 'darken-2') !default;
+$mtl-layout-default-header-text: color('shades', 'white') !default;
+
+$mtl-layout-default-sidenav-bg: color('shades', 'white') !default;
+$mtl-layout-default-sidenav-text: color('grey', 'darken-4') !default;
+
+$mtl-layout-default-usernav-bg: color('grey', 'darken-4') !default;
+$mtl-layout-default-usernav-text: color('shades', 'white') !default;
+
+// single layout
+$mtl-layout-single-bg: color('grey', 'lighten-4') !default;
+$mtl-layout-single-header-bg: color('grey', 'lighten-2') !default;
+
+// table of contents
+$mtl-toc-text: color('grey', 'darken-4') !default;
+$mtl-toc-border: $primary-color !default;
+
+// avatar sizes
+$mtl-avatar-size-small: 25px !default;
+$mtl-avatar-size-medium: 32px !default;
+$mtl-avatar-size-large: 52px !default;

data/lib/generators/mtl/templates/mtl.scss

@@ -0,0 +1,8 @@
+@charset "UTF-8";
+
+// Variables;
+@import "./mtl/color";
+@import "./mtl/variables";
+
+// Styles
+@import "mtl/all";

data/lib/generators/mtl/templates/simple_form.rb

@@ -0,0 +1,211 @@
+require 'mtl/simple_form/suffix'
+
+# Copyright 2016 Patrick Lindsay
+# https://github.com/patricklindsay/simple_form-materialize
+#
+# Permission is hereby granted, free of charge, to any person obtaining
+# a copy of this software and associated documentation files (the
+# "Software"), to deal in the Software without restriction, including
+# without limitation the rights to use, copy, modify, merge, publish,
+# distribute, sublicense, and/or sell copies of the Software, and to
+# permit persons to whom the Software is furnished to do so, subject to
+# the following conditions:
+#
+# The above copyright notice and this permission notice shall be
+# included in all copies or substantial portions of the Software.
+#
+# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+# EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+# MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+# NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+# LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+# OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+# WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+#
+# Use this setup block to configure all options available in SimpleForm.
+SimpleForm.setup do |config|
+  # Wrappers are used by the form builder to generate a
+  # complete input. You can remove any component from the
+  # wrapper, change the order or even add your own to the
+  # stack. The options given below are used to wrap the
+  # whole input.
+  config.wrappers :material_checkbox,
+                  hint_class: :field_with_hint, error_class: 'has-error' do |b|
+    b.use :input
+    b.use :label
+
+    b.use :hint,  wrap_with: { tag: :span, class: 'help-block' }
+    b.use :error, wrap_with: { tag: :span, class: 'error-block' }
+
+    b.use :html5
+  end
+
+  config.wrappers :disabled_form do |b|
+    b.use :label
+    b.use :input, disabled: true, readonly: true
+  end
+
+  config.wrappers :default, class: 'input-field col s12',
+                            hint_class: :field_with_hint, error_class: 'has-error' do |b|
+    ## Extensions enabled by default
+    # Any of these extensions can be disabled for a
+    # given input by passing: `f.input EXTENSION_NAME => false`.
+    # You can make any of these extensions optional by
+    # renaming `b.use` to `b.optional`.
+
+    # Determines whether to use HTML5 (:email, :url, ...)
+    # and required attributes
+    b.use :html5
+
+    # Calculates placeholders automatically from I18n
+    # You can also pass a string as f.input placeholder: "Placeholder"
+    b.use :placeholder
+
+    ## Optional extensions
+    # They are disabled unless you pass `f.input EXTENSION_NAME => true`
+    # to the input. If so, they will retrieve the values from the model
+    # if any exists. If you want to enable any of those
+    # extensions by default, you can change `b.optional` to `b.use`.
+
+    # Calculates maxlength from length validations for string inputs
+    b.use :maxlength
+
+    # Calculates pattern from format validations for string inputs
+    b.optional :pattern
+
+    # Calculates min and max from length validations for numeric inputs
+    b.use :min_max
+
+    # Calculates readonly automatically from readonly attributes
+    b.optional :readonly
+
+    ## Inputs
+    b.use :input
+    b.use :label
+    b.optional :suffix
+
+    b.use :hint,  wrap_with: { tag: :span, class: 'help-block' }
+    b.use :error, wrap_with: { tag: :span, class: 'error-block' }
+
+    ## full_messages_for
+    # If you want to display the full error message for the attribute, you can
+    # use the component :full_error, like:
+    #
+    # b.use :full_error, wrap_with: { tag: :span, class: :error }
+  end
+
+  # The default wrapper to be used by the FormBuilder.
+  config.default_wrapper = :default
+
+  # Define the way to render check boxes / radio buttons with labels.
+  # Defaults to :nested for bootstrap config.
+  #   inline: input + label
+  #   nested: label > input
+  config.boolean_style = :inline
+
+  # Default class for buttons
+  config.button_class = "btn #{Mtl.effects}"
+
+  # Method used to tidy up errors. Specify any Rails Array method.
+  # :first lists the first message for each field.
+  # Use :to_sentence to list all errors for each field.
+  # config.error_method = :first
+
+  # Default tag used for error notification helper.
+  config.error_notification_tag = :div
+
+  # CSS class to add for error notification helper.
+  config.error_notification_class = 'alert alert-danger'
+
+  # ID to add for error notification helper.
+  # config.error_notification_id = nil
+
+  # Series of attempts to detect a default label method for collection.
+  # config.collection_label_methods = [ :to_label, :name, :title, :to_s ]
+
+  # Series of attempts to detect a default value method for collection.
+  # config.collection_value_methods = [ :id, :to_s ]
+
+  # You can wrap a collection of radio/check boxes in a pre-defined tag, defaulting to none.
+  # config.collection_wrapper_tag = nil
+
+  # You can define the class to use on all collection wrappers. Defaulting to none.
+  # config.collection_wrapper_class = nil
+
+  # You can wrap each item in a collection of radio/check boxes with a tag,
+  # defaulting to :span. Please note that when using :boolean_style = :nested,
+  # SimpleForm will force this option to be a label.
+  config.item_wrapper_tag = :p
+
+  # You can define a class to use in all item wrappers. Defaulting to none.
+  # config.item_wrapper_class = nil
+
+  # How the label text should be generated altogether with the required text.
+  # config.label_text = lambda { |label, required, explicit_label| "#{required} #{label}" }
+
+  # You can define the class to use on all labels. Default is nil.
+  # config.label_class = nil
+
+  # You can define the default class to be used on forms. Can be overriden
+  # with `html: { :class }`. Defaulting to none.
+  # config.default_form_class = nil
+
+  # You can define which elements should obtain additional classes
+  # config.generate_additional_classes_for = [:wrapper, :label, :input]
+
+  # Whether attributes are required by default (or not). Default is true.
+  # config.required_by_default = true
+
+  # Tell browsers whether to use the native HTML5 validations (novalidate form option).
+  # These validations are enabled in SimpleForm's internal config but disabled by default
+  # in this configuration, which is recommended due to some quirks from different browsers.
+  # To stop SimpleForm from generating the novalidate option, enabling the HTML5 validations,
+  # change this configuration to true.
+  config.browser_validations = false
+
+  # Collection of methods to detect if a file type was given.
+  # config.file_methods = [ :mounted_as, :file?, :public_filename ]
+
+  # Custom mappings for input types. This should be a hash containing a regexp
+  # to match as key, and the input type that will be used when the field name
+  # matches the regexp as value.
+  # config.input_mappings = { /count/ => :integer }
+
+  # Custom wrappers for input types. This should be a hash containing an input
+  # type as key and the wrapper that will be used for all inputs with specified type.
+  config.wrapper_mappings = {
+    switch: :material_checkbox
+  }
+
+  # Namespaces where SimpleForm should look for custom input classes that
+  # override default inputs.
+  # config.custom_inputs_namespaces << "CustomInputs"
+
+  # Default priority for time_zone inputs.
+  # config.time_zone_priority = nil
+
+  # Default priority for country inputs.
+  # config.country_priority = nil
+
+  # When false, do not use translations for labels.
+  # config.translate_labels = true
+
+  # Automatically discover new inputs in Rails' autoload path.
+  # config.inputs_discovery = true
+
+  # Cache SimpleForm inputs discovery
+  # config.cache_discovery = !Rails.env.development?
+
+  # Default class for inputs
+  # config.input_class = nil
+
+  # Define the default class of the input wrapper of the boolean input.
+  config.boolean_label_class = 'checkbox'
+
+  # Defines if the default input wrapper class should be included in radio
+  # collection wrappers.
+  # config.include_default_input_wrapper_class = true
+
+  # Defines which i18n scope will be used in Simple Form.
+  # config.i18n_scope = 'simple_form'
+end

data/lib/mtl/rails/card_file_presenter.rb

@@ -0,0 +1,70 @@
+require 'uri'
+
+module Mtl
+  module Rails
+    # Private
+    # Specialised renderer for the file card element used in a file collection
+    class CardFilePresenter
+      attr_reader :view
+
+      def initialize(view)
+        @view = view
+      end
+
+      def render(filename, href, params = {})
+        params = params.reverse_merge type: File.extname(filename).delete('.')
+
+        view.link_to render_body(filename, params), href,
+                     title: params[:title] || filename,
+                     target: '_blank',
+                     class: ['card-panel', params[:preview] ? 'card-panel-image' : nil],
+                     data: data(filename, params),
+                     style: if params[:preview]
+                              "background-image: url(#{URI.encode(params[:preview])})"
+                            end
+      end
+
+      def render_body(filename, params)
+        view.safe_join [label(filename, params[:title]), infos(params), delete(params)]
+      end
+
+      private
+
+      def label(filename, title = nil)
+        return filename_tag(filename) unless title
+        view.safe_join [view.content_tag(:strong, title, class: 'truncate'), filename_tag(filename)]
+      end
+
+      def filename_tag(filename)
+        view.content_tag(:span, filename, class: 'truncate')
+      end
+
+      def infos(params)
+        view.content_tag :span, icon(params[:type]) + " #{params[:type].upcase}", class: 'secondary'
+      end
+
+      def icon(type)
+        icon, icon_class = Mtl.file_icons[type.to_s.downcase] ||
+                           Mtl.file_icons['other'] ||
+                           [:insert_drive_file, 'blue-text']
+        view.mtl_icon(icon, class: icon_class)
+      end
+
+      def delete(params)
+        return unless params[:delete]
+        data = { method: :delete, 'mtl-href': params[:delete], confirm: params[:confirm] }
+        view.mtl_icon :close, class: 'close', data: data.reject { |_, v| v.blank? }
+      end
+
+      def data(filename, params)
+        data = params[:data] || {}
+        data.merge(modal_data(filename, params))
+      end
+
+      def modal_data(filename, params)
+        return {} unless params[:modal]
+        { mtl_document_modal: 'open', mtl_document_name: filename }
+      end
+    end
+  end
+end