From e3aceeae827a0a6ca132404aaaf4d1d90ebb84ae Mon Sep 17 00:00:00 2001 From: Rob Eisenberg Date: Mon, 8 Sep 2014 10:29:50 -0400 Subject: [PATCH] feat(divider): add implementation of the divider component This commit adds an implementation of the "divider" component which groups and separates content within lists and page layouts using strong visual and spatial distinctions. Demos and docs accompany the implementation. Closes #194. Closes #250. --- config/build.config.js | 1 + src/components/divider/README.MD | 1 + src/components/divider/_divider.scss | 10 +++-- src/components/divider/demo1/index.html | 51 +++++++++++++++++++++++++ src/components/divider/demo1/script.js | 34 +++++++++++++++++ src/components/divider/demo1/style.css | 6 +++ src/components/divider/divider.js | 37 ++++++++++++++++++ src/components/divider/module.json | 10 +++++ src/components/list/_list.scss | 9 ++++- src/components/list/demo1/index.html | 22 ++++++----- src/main.scss | 1 + src/theme/_colors.scss | 7 ++++ 12 files changed, 174 insertions(+), 15 deletions(-) create mode 100644 src/components/divider/README.MD create mode 100644 src/components/divider/demo1/index.html create mode 100644 src/components/divider/demo1/script.js create mode 100644 src/components/divider/demo1/style.css create mode 100644 src/components/divider/divider.js create mode 100644 src/components/divider/module.json diff --git a/config/build.config.js b/config/build.config.js index d91c375c0dd..a52d6a415f5 100644 --- a/config/build.config.js +++ b/config/build.config.js @@ -92,6 +92,7 @@ module.exports = { 'src/components/toast/toast.js', 'src/components/toolbar/toolbar.js', 'src/components/whiteframe/whiteframe.js', + 'src/components/divider/divider.js', //Services 'src/services/decorators.js', diff --git a/src/components/divider/README.MD b/src/components/divider/README.MD new file mode 100644 index 00000000000..f49cfff116d --- /dev/null +++ b/src/components/divider/README.MD @@ -0,0 +1 @@ +Dividers, created with the `` directive. \ No newline at end of file diff --git a/src/components/divider/_divider.scss b/src/components/divider/_divider.scss index 8f0a4d0d7ba..75451ea1679 100644 --- a/src/components/divider/_divider.scss +++ b/src/components/divider/_divider.scss @@ -1,5 +1,9 @@ material-divider { display: block; - border-bottom: 1px solid #d2d2d2; - margin-top: 5px; -} + border-top: 1px solid $color-divider; + margin: 0; + + &[inset] { + margin-left: $baseline-grid * 10; + } +} \ No newline at end of file diff --git a/src/components/divider/demo1/index.html b/src/components/divider/demo1/index.html new file mode 100644 index 00000000000..08e975c2d6a --- /dev/null +++ b/src/components/divider/demo1/index.html @@ -0,0 +1,51 @@ +
+ + +

+ Full Bleed +

+ + + + + + +
+

{{item.what}}

+

{{item.who}}

+

+ {{item.notes}} +

+
+ + + + + + + +

+ Inset +

+ + + + + + +
+ {{item.who}} +
+
+

{{item.what}}

+

{{item.who}}

+

+ {{item.notes}} +

+
+ + + + + +
\ No newline at end of file diff --git a/src/components/divider/demo1/script.js b/src/components/divider/demo1/script.js new file mode 100644 index 00000000000..70c03e80e12 --- /dev/null +++ b/src/components/divider/demo1/script.js @@ -0,0 +1,34 @@ +angular.module('app', ['ngMaterial']) + .controller('AppCtrl', function($scope) { + $scope.messages = [{ + face: '/img/list/60.jpeg', + what: 'Brunch this weekend?', + who: 'Min Li Chan', + when: '3:08PM', + notes: " I'll be in your neighborhood doing errands" + }, { + face: '/img/list/60.jpeg', + what: 'Brunch this weekend?', + who: 'Min Li Chan', + when: '3:08PM', + notes: " I'll be in your neighborhood doing errands" + }, { + face: '/img/list/60.jpeg', + what: 'Brunch this weekend?', + who: 'Min Li Chan', + when: '3:08PM', + notes: " I'll be in your neighborhood doing errands" + }, { + face: '/img/list/60.jpeg', + what: 'Brunch this weekend?', + who: 'Min Li Chan', + when: '3:08PM', + notes: " I'll be in your neighborhood doing errands" + }, { + face: '/img/list/60.jpeg', + what: 'Brunch this weekend?', + who: 'Min Li Chan', + when: '3:08PM', + notes: " I'll be in your neighborhood doing errands" + }]; + }); \ No newline at end of file diff --git a/src/components/divider/demo1/style.css b/src/components/divider/demo1/style.css new file mode 100644 index 00000000000..a777b36f49e --- /dev/null +++ b/src/components/divider/demo1/style.css @@ -0,0 +1,6 @@ +.face { + border-radius: 30px; + border: 1px solid #ddd; + width: 48px; + margin: 16px; +} \ No newline at end of file diff --git a/src/components/divider/divider.js b/src/components/divider/divider.js new file mode 100644 index 00000000000..3a189eb0b36 --- /dev/null +++ b/src/components/divider/divider.js @@ -0,0 +1,37 @@ +/** + * @ngdoc module + * @name material.components.divider + * @description Divider module! + */ +angular.module('material.components.divider', [ + 'material.animations', + 'material.services.aria' +]) + .directive('materialDivider', MaterialDividerDirective); + +function MaterialDividerController(){} + +/** + * @ngdoc directive + * @name materialDivider + * @module material.components.divider + * @restrict E + * + * @description + * Dividers group and separate content within lists and page layouts using strong visual and spatial distinctions. This divider is a thin rule, lightweight enough to not distract the user from content. + * + * @param {boolean=} inset Add this attribute to activate the inset divider style. + * @usage + * + * + * + * + * + * + */ +function MaterialDividerDirective() { + return { + restrict: 'E', + controller: [MaterialDividerController] + }; +} diff --git a/src/components/divider/module.json b/src/components/divider/module.json new file mode 100644 index 00000000000..ac8b84f993d --- /dev/null +++ b/src/components/divider/module.json @@ -0,0 +1,10 @@ +{ + "module": "material.components.divider", + "name": "Divider", + "demos": { + "demo1": { + "name": "Divider Usage", + "files": ["demo1/*"] + } + } +} \ No newline at end of file diff --git a/src/components/list/_list.scss b/src/components/list/_list.scss index c1d62afd81a..5723a1089c9 100644 --- a/src/components/list/_list.scss +++ b/src/components/list/_list.scss @@ -1,7 +1,12 @@ material-list { + } material-item { + +} + +material-item-content { @include flex-display(); @include flex-align-items(center); @include flex-direction(row); @@ -17,6 +22,7 @@ material-item { */ .material-tile-left { min-width: 56px; + margin-right: -16px; } /** @@ -25,9 +31,8 @@ material-item { .material-tile-content { @include flex(1); - padding: 15px 0 15px 0; + padding: $baseline-grid * 2; - border-bottom: 1px solid #eee; text-overflow: ellipsis; h2 { diff --git a/src/components/list/demo1/index.html b/src/components/list/demo1/index.html index 04ac1b38245..cdaa2898a1a 100644 --- a/src/components/list/demo1/index.html +++ b/src/components/list/demo1/index.html @@ -5,16 +5,18 @@ -
- {{item.who}} -
-
-

{{item.what}}

-

{{item.who}}

-

- {{item.notes}} -

-
+ +
+ {{item.who}} +
+
+

{{item.what}}

+

{{item.who}}

+

+ {{item.notes}} +

+
+ diff --git a/src/main.scss b/src/main.scss index d44198b29d5..9abf7f17e86 100644 --- a/src/main.scss +++ b/src/main.scss @@ -31,4 +31,5 @@ "components/toolbar/toolbar", "components/tabs/tabs", "components/list/list", +"components/divider/divider", "components/whiteframe/whiteframe"; diff --git a/src/theme/_colors.scss b/src/theme/_colors.scss index a954ba43a08..f10fd623c7f 100644 --- a/src/theme/_colors.scss +++ b/src/theme/_colors.scss @@ -2,6 +2,13 @@ // ----------------------------- // http://www.google.com/design/spec/style/color.html +// Text +// ---------------------------- + +$color-text: rgba(0,0,0,.87); +$color-text-secondary: rgba(0,0,0,.54); +$color-text-hint: rgba(0,0,0,.26); +$color-divider: rgba(0,0,0,.12); // Red // ----------------------------