drg_material_icons 0.1.0

data/app/helpers/drg_material_icons/rails/icon_helper.rb

@@ -0,0 +1,112 @@
+module DrgMaterialIcons
+  module Rails
+    module IconHelper
+      # Creates an icon tag given an icon name and possible icon
+      # modifiers.
+      #
+      # Examples
+      #
+      #   mi_icon "camera-retro"
+      #   # => <i class="mi mi-camera-retro"></i>
+      #
+      #   mi_icon "camera-retro", text: "Take a photo"
+      #   # => <i class="mi mi-camera-retro"></i> Take a photo
+      #   mi_icon "chevron-right", text: "Get started", right: true
+      #   # => Get started <i class="mi mi-chevron-right"></i>
+      #
+      #   mi_icon "camera-retro 2x"
+      #   # => <i class="mi mi-camera-retro mi-2x"></i>
+      #   mi_icon ["camera-retro", "4x"]
+      #   # => <i class="mi mi-camera-retro mi-4x"></i>
+      #   mi_icon "spinner spin lg"
+      #   # => <i class="mi mi-spinner mi-spin mi-lg">
+      #
+      #   mi_icon "quote-left 4x", class: "pull-left"
+      #   # => <i class="mi mi-quote-left mi-4x pull-left"></i>
+      #
+      #   mi_icon "user", data: { id: 123 }
+      #   # => <i class="mi mi-user" data-id="123"></i>
+      #
+      #   content_tag(:li, mi_icon("check li", text: "Bulleted list item"))
+      #   # => <li><i class="mi mi-check mi-li"></i> Bulleted list item</li>
+      #
+      #   If you want to use outline font style simply add -o to font name.
+      def mi_icon(names = 'flag', original_options = {})
+        options = original_options.deep_dup
+        classes = ['mi']
+        classes.concat Private.icon_names(names)
+        classes.concat Array(options.delete(:class))
+        text = options.delete(:text)
+        right_icon = options.delete(:right)
+        # outline icons end with -o suffix
+        if classes[1].match(/\-o/)
+          classes[0] = 'mi-o'
+          classes[1].sub!('-o', '')
+        end
+        # replace - with _ in icon name for compatibility with font awesome
+        classes[1].gsub!('-', '_').sub!('mi_', 'mi-')
+
+        icon = content_tag(:i, nil, options.merge(class: classes))
+        Private.icon_join(icon, text, right_icon)
+      end
+      alias fa_icon mi_icon
+
+      # Creates an stack set of icon tags given a base icon name, a main icon
+      # name, and possible icon modifiers.
+      #
+      # Examples
+      #
+      #   mi_stacked_icon "twitter", base: "square-o"
+      #   # => <span class="mi-stack">
+      #   # =>   <i class="mi mi-square-o mi-stack-2x"></i>
+      #   # =>   <i class="mi mi-twitter mi-stack-1x"></i>
+      #   # => </span>
+      #
+      #   mi_stacked_icon "terminal inverse", base: "square", class: "pull-right", text: "Hi!"
+      #   # => <span class="mi-stack pull-right">
+      #   # =>   <i class="mi mi-square mi-stack-2x"></i>
+      #   # =>   <i class="mi mi-terminal mi-inverse mi-stack-1x"></i>
+      #   # => </span> Hi!
+      #
+      #   mi_stacked_icon "camera", base: "ban-circle", reverse: true
+      #   # => <span class="mi-stack">
+      #   # =>   <i class="mi mi-camera mi-stack-1x"></i>
+      #   # =>   <i class="mi mi-ban-circle mi-stack-2x"></i>
+      #   # => </span>
+      def mi_stacked_icon(names = 'flag', original_options = {})
+        options = original_options.deep_dup
+        classes = Private.icon_names('stack').concat(Array(options.delete(:class)))
+        base_names = Private.array_value(options.delete(:base) || 'square-o').push('stack-2x')
+        names = Private.array_value(names).push('stack-1x')
+        base = mi_icon(base_names, options.delete(:base_options) || {})
+        icon = mi_icon(names, options.delete(:icon_options) || {})
+        icons = [base, icon]
+        icons.reverse! if options.delete(:reverse)
+        text = options.delete(:text)
+        right_icon = options.delete(:right)
+        stacked_icon = content_tag(:span, safe_join(icons), options.merge(class: classes))
+        Private.icon_join(stacked_icon, text, right_icon)
+      end
+      alias fa_stacked_icon mi_stacked_icon
+
+      module Private
+        extend ActionView::Helpers::OutputSafetyHelper
+
+        def self.icon_join(icon, text, reverse_order = false)
+          return icon if text.blank?
+          elements = [icon, ERB::Util.html_escape(text)]
+          elements.reverse! if reverse_order
+          safe_join(elements, ' ')
+        end
+
+        def self.icon_names(names = [])
+          array_value(names).map { |n| "mi-#{n}" }
+        end
+
+        def self.array_value(value = [])
+          value.is_a?(Array) ? value : value.to_s.split(/\s+/)
+        end
+      end
+    end
+  end
+end

data/lib/drg_material_icons/engine.rb

@@ -0,0 +1,6 @@
+module DrgMaterialIcons
+  module Rails
+    class Engine < ::Rails::Engine
+    end
+  end
+end

data/lib/drg_material_icons/version.rb

@@ -0,0 +1,6 @@
+module DrgMaterialIcons
+  module Rails
+    MI_VERSION = '0.22.1'.freeze
+    VERSION = '0.1.0'.freeze
+  end
+end

data/lib/drg_material_icons.rb

@@ -0,0 +1,2 @@
+require 'drg_material_icons/version'
+require 'drg_material_icons/engine' if defined?(::Rails)

data/lib/generators/drg_material_icons_update/USAGE

@@ -0,0 +1,8 @@
+Description:
+    drg_material_icons_update_generator will create CSS file required to use Material fonts icons.
+
+Example:
+    rails generate drg_material_icons_update
+
+    This will create:
+        app/assets/stylesheets/drg_material_icons.css

data/lib/generators/drg_material_icons_update/common.css

@@ -0,0 +1,284 @@
+/*
+ Copyright (c) 2022- Damjan Rems
+*/
+@font-face {
+  font-family: MI;
+  font-style: normal;
+  font-weight: 400;
+  src: url('material-icons-regular.woff2') format('woff2')
+}
+
+@font-face {
+  font-family: MI-O;
+  font-style: normal;
+  font-weight: 400;
+  src: url('material-icons-outline.woff2') format('woff2')
+}
+
+.mi, .fa {
+  font-family: MI;
+}
+.mi-o {
+  font-family: MI-O;
+}
+
+.mi, .mi-o, .fa {
+  font-size: 24px;
+  font-weight: normal;
+  font-style: normal;
+  vertical-align: middle;
+  display: inline-block;
+  width: initial;
+  height: 1em;
+  text-transform: none;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Rules for sizing the icon. */
+.mi-md-18 { font-size: 18px; }
+.mi-md-24 { font-size: 24px; }
+.mi-md-36 { font-size: 36px; }
+.mi-md-48 { font-size: 48px; }
+
+/* Rules for using icons as black on a light background. */
+.mi-md-dark { color: rgba(0, 0, 0, 0.54); }
+.mi-md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
+
+/* Rules for using icons as white on a dark background. */
+.mi-md-light { color: rgba(255, 255, 255, 1); }
+.mi-md-inactive { color: rgba(255, 255, 255, 0.3); }
+
+/* Rules to rotate items */
+.mi-r90 {
+  transform: rotate(90deg);
+}
+.mi-r180 {
+  transform: rotate(180deg);
+}
+.mi-r270 {
+  transform: rotate(270deg);
+}
+.mi-flip-horizontal {
+  transform: scale(-1, 1);
+}
+.mi-flip-vertical {
+  transform: scale(1, -1);
+}
+
+/* old fa- settings and mi- replacements */
+.mi-lg, .fa-lg {
+  font-size: 32px;
+}
+.mi-2x, .fa-2x {
+  font-size: 48px;
+}
+.mi-3x, .fa-3x {
+  font-size: 72px;
+}
+.mi-4x, .fa-4x {
+  font-size: 96px;
+}
+.mi-5x, .fa-5x {
+  font-size: 120px;
+}
+.mi-ul, .fa-ul {
+  padding-left: 0;
+  margin-left: 2.14285714em;
+  list-style-type: none;
+}
+.mi-ul > li, .fa-ul > li {
+  position: relative;
+}
+.mi-li, .fa-li {
+  position: absolute;
+  left: -2.14285714em;
+  width: 2.14285714em;
+  top: 0.14285714em;
+  text-align: center;
+}
+.mi-li.mi-lg, .fa-li.fa-lg {
+  left: -1.85714286em;
+}
+.mi-border, .fa-border {
+  padding: .2em .25em .15em;
+  border: solid 0.08em #eeeeee;
+  border-radius: .1em;
+}
+.mi-pull-left, .fa-pull-left {
+  float: left;
+}
+.mi-pull-right, .fa-pull-right {
+  float: right;
+}
+.mi.mi-pull-left, .fa.fa-pull-left {
+  margin-right: .3em;
+}
+.mi.mi-pull-right, .fa.fa-pull-right {
+  margin-left: .3em;
+}
+
+.mi.pull-left, .fa.pull-left {
+  margin-right: .3em;
+}
+.mi.pull-right .fa.pull-right {
+  margin-left: .3em;
+}
+.mi-spin, .fa-spin {
+  -webkit-animation: fa-spin 1.5s infinite linear;
+  animation: fa-spin 1.5s infinite linear;
+}
+.mi-pulse, .fa-pulse {
+  -webkit-animation: fa-spin 1s infinite steps(8);
+  animation: fa-spin 1s infinite steps(8);
+}
+
+@-webkit-keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@-webkit-keyframes mi-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+
+@keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@keyframes mi-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+
+.mi-rotate-90, .fa-rotate-90 {
+  transform: rotate(90deg);
+}
+.mi-rotate-180, .fa-rotate-180 {
+  transform: rotate(180deg);
+}
+.mi-rotate-270, .fa-rotate-270 {
+  transform: rotate(270deg);
+}
+.mi-flip-horizontal, .fa-flip-horizontal {
+  transform: scale(-1, 1);
+}
+.mi-flip-vertical, .fa-flip-vertical {
+  transform: scale(1, -1);
+}
+:root .fa-rotate-90,
+:root .fa-rotate-180,
+:root .fa-rotate-270,
+:root .fa-flip-horizontal,
+:root .fa-flip-vertical,
+:root .mi-rotate-90,
+:root .mi-rotate-180,
+:root .mi-rotate-270,
+:root .mi-flip-horizontal,
+:root .mi-flip-vertical {
+  filter: none;
+}
+.mi-stack, .fa-stack {
+  position: relative;
+  display: inline-block;
+  width: 2em;
+  height: 2em;
+  line-height: 2em;
+  vertical-align: middle;
+}
+.fa-stack-1x,
+.fa-stack-2x,
+.mi-stack-1x,
+.mi-stack-2x {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  text-align: center;
+}
+.mi-stack-1x, .fa-stack-1x {
+  line-height: inherit;
+}
+.mi-stack-2x, .fa-stack-2x {
+  font-size: 2em;
+}
+.mi-inverse, .fa-inverse {
+  color: #ffffff;
+}
+
+/* fa icons replacements */
+.mi-user:before {content: '\e7fd';}
+.mi-users:before {content: '\e7fc';}
+.mi-bars:before {content: '\e5d2';}
+.mi-file_excel:before {content: '\e2c4'}
+.mi-cog:before {content: '\e8b8';}
+.mi-envelope:before {content: '\e0e1';}
+.mi-square:before {content: '\e834';}
+.mi-check_square:before {content: '\e835';}
+.mi-plus:before {content: '\e145';}
+.mi-frown:before {content: '\e811';}
+.mi-thumbs_up:before {content: '\e8dc';}
+.mi-thumbs_down:before {content: '\e8db';}
+.mi-mobile:before {content: '\e32c';}
+.mi-eye:before {content: '\e8f4';}
+.mi-question:before {content: '\eb8b';}
+.mi-question_circle:before {content: '\e887';}
+.mi-calendar:before {content: '\ebcc';}
+.mi-table:before {content: '\f101';}
+.mi-sliders:before {content: '\e429';}
+.mi-file_text:before {content: '\e873';}
+.mi-trash:before {content: '\e92e';}
+.mi-caret_down:before {content: '\e5c5';}
+.mi-sort_unset:before {content: '\ef4f';}
+.mi-sort_up:before {content: '\e5db';}
+.mi-sort_down:before {content: '\e5d8';}
+.mi-arrow_right:before {content: '\e5c8';}
+.mi-arrow_left:before {content: '\e5c4';}
+.mi-clock:before {content: '\e8b5';}
+.mi-calculator:before {content: '\ea5f';}
+.mi-car:before {content: '\e531';}
+.mi-plus_square:before {content: '\e146';}
+.mi-paperclip:before {content: '\e226';}
+.mi-sign_in:before {content: '\ea77';}
+.mi-sign_out:before {content: '\e9ba';}
+.mi-check_circle:before {content: '\e86c';}
+.mi-plus_circle:before {content: '\e147';}
+.mi-cogs:before {content: '\ea3d';}
+.mi-table:before {font-family: MI-O; content: '\f101';}
+.mi-arrow_up:before {content: '\e5d8';}
+.mi-arrow_down:before {content: '\e5db';}
+.mi-window_close:before {content: '\e0e9';}
+.mi-chevron_down:before {content: '\e5cf';}
+.mi-chevron_up:before {content: '\e5ce';}
+.mi-angle_down:before {content: '\e5cf'; font-size: 18px}
+.mi-angle_up:before {content: '\e5ce'; font-size: 18px}
+.mi-times:before {content: '\e5cd'}
+

data/lib/generators/drg_material_icons_update/drg_material_icons_update_generator.rb

@@ -0,0 +1,41 @@
+class DrgMaterialIconsUpdateGenerator < Rails::Generators::Base
+  
+source_root File.expand_path('../templates', __FILE__)
+desc "This generator creates app/assets/stylesheets/drg_material_icons.css"
+
+###########################################################################
+# Will create output and save it to form filename.
+###########################################################################
+def create_css_file
+  @cp_dir = File.dirname(__FILE__)
+  @css_dir = File.expand_path('../../../../app/assets/stylesheets', __FILE__)
+  css = common_css + build_css
+  create_file "#{@css_dir}/drg_material_icons.css", css
+end
+
+private
+###########################################################################
+#
+###########################################################################
+def common_css
+  File.read("#{@cp_dir}/common.css")
+end
+
+###########################################################################
+#
+###########################################################################
+def build_css
+  icons = {}
+  File.readlines("#{@cp_dir}/material-icons-outline.codepoints").each do |line|
+    name, code = line.chomp.split(' ')
+    icons[name] = code
+  end
+
+  File.readlines("#{@cp_dir}/material-icons-regular.codepoints").each do |line|
+    name, code = line.chomp.split(' ')
+    icons[name] = code if icons[name].nil?
+  end
+  icons.inject('') { |r, icon| r << %(.mi-#{icon.first}:before {content: '\\#{icon.last}';}\n) }
+end
+
+end