Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

Commit

Permalink
feat(divider): add implementation of the divider component
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
EisenbergEffect authored and ajoslin committed Sep 11, 2014
1 parent 11ed42c commit e3aceea
Show file tree
Hide file tree
Showing 12 changed files with 174 additions and 15 deletions.
1 change: 1 addition & 0 deletions config/build.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
1 change: 1 addition & 0 deletions src/components/divider/README.MD
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Dividers, created with the `<material-divider>` directive.
10 changes: 7 additions & 3 deletions src/components/divider/_divider.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
51 changes: 51 additions & 0 deletions src/components/divider/demo1/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<div ng-app="app" ng-controller="AppCtrl">

<material-toolbar class="material-theme-light">
<h1 class="material-toolbar-tools">
<span>Full Bleed</span>
</h1>
</material-toolbar>

<material-content>
<material-list>
<material-item ng-repeat="item in messages">
<material-item-content>
<div class="material-tile-content">
<h2>{{item.what}}</h2>
<h3>{{item.who}}</h3>
<p>
{{item.notes}}
</p>
</div>
</material-item-content>
<material-divider ng-if="!$last"></material-divider>
</material-item>
</material-list>
</material-content>

<material-toolbar class="material-theme-light">
<h1 class="material-toolbar-tools">
<span>Inset</span>
</h1>
</material-toolbar>

<material-content>
<material-list>
<material-item ng-repeat="item in messages">
<material-item-content>
<div class="material-tile-left">
<img ng-src="{{item.face}}" class="face" alt="{{item.who}}">
</div>
<div class="material-tile-content">
<h2>{{item.what}}</h2>
<h3>{{item.who}}</h3>
<p>
{{item.notes}}
</p>
</div>
</material-item-content>
<material-divider inset ng-if="!$last"></material-divider>
</material-item>
</material-list>
</material-content>
</div>
34 changes: 34 additions & 0 deletions src/components/divider/demo1/script.js
Original file line number Diff line number Diff line change
@@ -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"
}];
});
6 changes: 6 additions & 0 deletions src/components/divider/demo1/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
.face {
border-radius: 30px;
border: 1px solid #ddd;
width: 48px;
margin: 16px;
}
37 changes: 37 additions & 0 deletions src/components/divider/divider.js
Original file line number Diff line number Diff line change
@@ -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
* <hljs lang="html">
* <material-divider></material-divider>
*
* <material-divider inset></material-divider>
* </hljs>
*
*/
function MaterialDividerDirective() {
return {
restrict: 'E',
controller: [MaterialDividerController]
};
}
10 changes: 10 additions & 0 deletions src/components/divider/module.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"module": "material.components.divider",
"name": "Divider",
"demos": {
"demo1": {
"name": "Divider Usage",
"files": ["demo1/*"]
}
}
}
9 changes: 7 additions & 2 deletions src/components/list/_list.scss
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
material-list {

}

material-item {

}

material-item-content {
@include flex-display();
@include flex-align-items(center);
@include flex-direction(row);
Expand All @@ -17,6 +22,7 @@ material-item {
*/
.material-tile-left {
min-width: 56px;
margin-right: -16px;
}

/**
Expand All @@ -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 {
Expand Down
22 changes: 12 additions & 10 deletions src/components/list/demo1/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,18 @@
<material-list>

<material-item ng-repeat="item in todos">
<div class="material-tile-left">
<img ng-src="{{item.face}}" class="face" alt="{{item.who}}">
</div>
<div class="material-tile-content">
<h2>{{item.what}}</h2>
<h3>{{item.who}}</h3>
<p>
{{item.notes}}
</p>
</div>
<material-item-content>
<div class="material-tile-left">
<img ng-src="{{item.face}}" class="face" alt="{{item.who}}">
</div>
<div class="material-tile-content">
<h2>{{item.what}}</h2>
<h3>{{item.who}}</h3>
<p>
{{item.notes}}
</p>
</div>
</material-item-content>
</material-item>

</material-list>
Expand Down
1 change: 1 addition & 0 deletions src/main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -31,4 +31,5 @@
"components/toolbar/toolbar",
"components/tabs/tabs",
"components/list/list",
"components/divider/divider",
"components/whiteframe/whiteframe";
7 changes: 7 additions & 0 deletions src/theme/_colors.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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
// ----------------------------
Expand Down

0 comments on commit e3aceea

Please sign in to comment.