dlegr250_material_design 0.5.30 → 0.5.31

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 8646dfd3a23be710399430d3fa858d5746980b0c
-  data.tar.gz: 8906b718c6721477c2f1d8a274bd8cf067d739ff
+  metadata.gz: 29a7a8821f33f2e14e4008a15b90cf93095b4a6a
+  data.tar.gz: 3a65120bb2ff8b23822987ed0a0885799df189b4
 SHA512:
-  metadata.gz: b6dfda508e6c142f1e8ffb3b2f55a018529ea52a90c1e6b9965677a8f39d286b6177581ae412ad94394168d672fbd3d2c1e1992dda3860f4ed51dde51e1bf50a
-  data.tar.gz: 4e9b79bf7f8cc838be05cbf675ac485524d82a817e2bb202adcc803fc8286eef60fa6c2f80283da297f33d4c7e36487f621a0d8177bda6aa63677d725833b0d7
+  metadata.gz: 470d35593a2cab9154238518e8a37988cfca464e1e67f56903e18e3412dbfc8da351189682a85ec30b8908dbe93b5b34a88d513af6345139c18094dce1c71cad
+  data.tar.gz: df2e85ae8f6a31608668ecbda8573defa9ff0cc7f784ede487af3dfb1b6317547bf8e0d28126b793f9af6b15df5a1a704728ff9f2ef0c20fa867526ce6595b52

data/lib/dlegr250_material_design/version.rb

@@ -1,3 +1,3 @@
 module Dlegr250MaterialDesign
-  VERSION = "0.5.30"
+  VERSION = "0.5.31"
 end

data/vendor/assets/javascripts/components/dialog.coffee

@@ -23,12 +23,22 @@ class App.MD.Dialog
 
     $("body").on "click", "[role='dialog-close']", (e) ->
       $dialog = $(this).parents(".dialog-container")
-      App.MD.Dialog.hideDialog($dialog)
+      App.MD.Dialog.closeDialog($dialog)
 
     $("body").on "click", "[role='dialog-confirm']", (e) ->
       $dialog = $(this).parents(".dialog-container")
       $dialog.find("#dialog-trigger-original-link").click()
-      App.MD.Dialog.hideDialog($dialog)
+      App.MD.Dialog.closeDialog($dialog)
+
+    $(document).on "click", ".dialog-container", (e) ->
+      $target = $(e.target)
+      # If explicitely told not to close
+      if ($target.attr("data-closable") == "false")
+        return false
+
+      # If clicking ONLY on parent element (not inner dialog)
+      if $target.hasClass("dialog-container")
+        App.MD.Dialog.closeDialog($target)
 
   @call: (html) ->
     $dialog = $(html)
@@ -43,9 +53,14 @@ class App.MD.Dialog
     element.find("input[autofocus]").focus()
     false
 
-  @hideDialog: (element) ->
-    element.removeClass("visible")
+  @closeDialog: (element) ->
+    $element = $(element)
+    $element.removeClass("visible")
     window.setTimeout =>
-      element.remove()
+      $element.remove()
     , 500
     false
+
+  # DEPRECATED: convert code to use @closeDialog() method
+  @hideDialog: (element) ->
+    App.MD.Dialog.closeDialog(element)

data/vendor/assets/stylesheets/base/variables/dimensions.scss

@@ -45,6 +45,15 @@ $list-three-lines-height: 88px;
 // 72px is the specification, but minus 32px for 16px left/right padding.
 $list-item-icon-width: 40px;
 
+// Dimensions - dialogs
+//----------------------------------------------------------------------
+
+$dialog-width-xsmall: 280px; // From Google Material Design spec, min size
+$dialog-width-small: 360px;
+$dialog-width-normal: 500px;
+$dialog-width-large: 760px;
+$dialog-width-xlarge: 1000px;
+
 // Dimensions - menus
 //----------------------------------------------------------------------
 

data/vendor/assets/stylesheets/components/dialogs.scss

@@ -2,7 +2,7 @@
 //----------------------------------------------------------------------
 
 .dialog-container {
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: rgba(0, 0, 0, 0.3);
   box-sizing: border-box;
   height: 100%;
   left: 0;
@@ -34,13 +34,16 @@
   cursor: default;
   max-height: 100%;
   max-width: 90%;
+  min-width: $dialog-width-xsmall;
   overflow: hidden;
+  width: $dialog-width-xsmall;
   z-index: $dialog-depth;
-  @include rounded-corners;
+  @include rounded-corners();
 }
 
 // Full-screen dialogs take up entire screen on small sizes
-.dialog-full-screen {
+.dialog-full-screen,
+.dialog[data-fullscreen="true"] {
   height: 100%;
   left: 0;
   max-width: 100%;
@@ -54,20 +57,19 @@
   .dialog {
     height: auto;
     max-height: 90%;
-    max-width: 90%;
-    width: 500px;
     position: relative;
     @include box-shadow(0 12px 15px 0 rgba(0,0,0,0.24));
-    @include rounded-corners;
+    @include rounded-corners();
   }
 }
 
 // Sizes
 @media (min-width: $width-small) {
-  .dialog-small { width: $width-small; }
-  .dialog-medium { width: $width-medium; }
-  .dialog-large { width: $width-large; }
-  .dialog-xlarge { width: $width-xlarge; }
+  .dialog-xsmall { width: $dialog-width-xsmall; }
+  .dialog-small { width: $dialog-width-small; }
+  .dialog-normal { width: $dialog-width-normal; }
+  .dialog-large { width: $dialog-width-large; }
+  .dialog-xlarge { width: $dialog-width-xlarge; }
 }
 
 // Dialogs - header
@@ -75,14 +77,11 @@
 
 .dialog-header {
   @include flex-parent-row();
+  border-bottom: 1px solid color("divider");
   height: $appbar-height;
   padding: 0 $spacing-small;
 }
 
-.dialog-header-bordered {
-  border-bottom: 1px solid color("divider");
-}
-
 .dialog-header-icon {
   width: $appbar-button-height;
 
@@ -132,7 +131,6 @@
 .dialog-scrollable {
   max-height: calc(100vh - #{$appbar-height}); // For dialog-header
   overflow: scroll;
-  // @include force-text-wrap();
 }
 
 @media (min-width: $width-small) {
@@ -145,12 +143,25 @@
 //----------------------------------------------------------------------
 
 .dialog-actions {
+  border-top: 1px solid color("divider");
   height: $appbar-height;
   line-height: $appbar-height;
   padding: 0 $spacing-normal;
-  // @include flex-parent-row();
 }
 
-.dialog-actions-bordered {
-  border-top: 1px solid color("divider");
+// Dialogs - simple
+//----------------------------------------------------------------------
+
+.dialog-simple {
+  .dialog-header {
+    border-bottom: 0;
+  }
+
+  .dialog-content {
+    padding-top: 0;
+  }
+
+  .dialog-actions {
+    border-top: 0;
+  }
 }

data/vendor/assets/stylesheets/components/keyboard_shortcuts.scss

@@ -0,0 +1,13 @@
+//======================================================================
+// Resemble keyboard keys to notify user of keyboard shortcuts.
+//======================================================================
+.keyboard-shortcut {
+  background-color: color("white");
+  border: 1px solid color("divider");
+  color: color("text");
+  display: inline-block;
+  font-size: $font-size-small;
+  margin-left: 2px;
+  padding: $spacing-xsmall $spacing-small;
+  @include rounded-corners();
+}

data/vendor/assets/stylesheets/components/lists.scss

@@ -178,6 +178,12 @@ ol {
   }
 }
 
+// Sizes for component lists
+.component-list.list-one-line .list-item { min-height: $list-one-line-height; }
+.component-list.list-two-lines .list-item { min-height: $list-two-lines-height; }
+.component-list.list-three-lines .list-item { min-height: $list-three-lines-height; }
+
+
 // List headers
 //----------------------------------------------------------------------
 

data/vendor/assets/stylesheets/components/menus.scss

@@ -85,23 +85,14 @@
   }
 }
 
-// Menus - menu item - icon
-//----------------------------------------------------------------------
-
 .menu-item-icon {
   @include list-item-icon();
 }
 
-// Menus - menu item - primary
-//----------------------------------------------------------------------
-
 .menu-item-primary {
   @include list-item-primary();
 }
 
-// Menus - menu item - secondary
-//----------------------------------------------------------------------
-
 .menu-item-secondary {
   @include list-item-secondary();
 }

data/vendor/assets/stylesheets/dlegr250_material_design.scss

@@ -29,6 +29,7 @@
 @import "components/breadcrumbs";
 @import "components/circles";
 @import "components/comments";
+@import "components/keyboard_shortcuts";
 @import "components/menus";
 @import "components/dividers";
 @import "components/boxes";

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: dlegr250_material_design
 version: !ruby/object:Gem::Version
-  version: 0.5.30
+  version: 0.5.31
 platform: ruby
 authors:
 - Daniel LeGrand
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-02-11 00:00:00.000000000 Z
+date: 2017-02-13 00:00:00.000000000 Z
 dependencies: []
 description: 'WARNING: ALPHA CODE, NOT PRODUCTION READY. ACTIVELY UNDER DEVELOPMENT
   AS OF AUG 2016. Implement Google Material Design spec with modern browsers in mind
@@ -86,6 +86,7 @@ files:
 - vendor/assets/stylesheets/components/forms/text_fields.scss
 - vendor/assets/stylesheets/components/forms/toggles.scss
 - vendor/assets/stylesheets/components/grids.scss
+- vendor/assets/stylesheets/components/keyboard_shortcuts.scss
 - vendor/assets/stylesheets/components/lists.scss
 - vendor/assets/stylesheets/components/menus.scss
 - vendor/assets/stylesheets/components/overlay.scss