mirror of
https://github.com/inverse-inc/sogo.git
synced 2026-04-25 14:59:30 +00:00
MODULE-TYPO
- Sass set-up - md-list - md-theming (install)
This commit is contained in:
iRouge
@@ -0,0 +1,81 @@
|
||||
|
||||
<div ng-controller="SubheaderAppCtrl" layout="column" flex layout-fill>
|
||||
<md-content style="height: 600px;">
|
||||
<section>
|
||||
<md-subheader class="md-primary">Unread Messages</md-subheader>
|
||||
<md-list layout="column">
|
||||
<md-item ng-repeat="message in messages">
|
||||
<md-item-content>
|
||||
<div class="md-tile-left">
|
||||
<img ng-src="{{message.face}}" class="face" alt="{{message.who}}">
|
||||
</div>
|
||||
<div class="md-tile-content">
|
||||
<h3>{{message.what}}</h3>
|
||||
<h4>{{message.who}}</h4>
|
||||
<p>
|
||||
{{message.notes}}
|
||||
</p>
|
||||
</div>
|
||||
</md-item-content>
|
||||
</md-item>
|
||||
</md-list>
|
||||
</section>
|
||||
<section>
|
||||
<md-subheader class="md-warn">Late Messages</md-subheader>
|
||||
<md-list layout="column">
|
||||
<md-item ng-repeat="message in messages">
|
||||
<md-item-content>
|
||||
<div class="md-tile-left">
|
||||
<img ng-src="{{message.face}}" class="face" alt="{{message.who}}">
|
||||
</div>
|
||||
<div class="md-tile-content">
|
||||
<h3>{{message.what}}</h3>
|
||||
<h4>{{message.who}}</h4>
|
||||
<p>
|
||||
{{message.notes}}
|
||||
</p>
|
||||
</div>
|
||||
</md-item-content>
|
||||
</md-item>
|
||||
</md-list>
|
||||
</section>
|
||||
<section>
|
||||
<md-subheader>Read Messages</md-subheader>
|
||||
<md-list layout="column">
|
||||
<md-item ng-repeat="message in messages">
|
||||
<md-item-content>
|
||||
<div class="md-tile-left">
|
||||
<img ng-src="{{message.face}}" class="face" alt="{{message.who}}">
|
||||
</div>
|
||||
<div class="md-tile-content">
|
||||
<h3>{{message.what}}</h3>
|
||||
<h4>{{message.who}}</h4>
|
||||
<p>
|
||||
{{message.notes}}
|
||||
</p>
|
||||
</div>
|
||||
</md-item-content>
|
||||
</md-item>
|
||||
</md-list>
|
||||
</section>
|
||||
<section>
|
||||
<md-subheader class="md-accent">Archived messages</md-subheader>
|
||||
<md-list layout="column">
|
||||
<md-item ng-repeat="message in messages">
|
||||
<md-item-content>
|
||||
<div class="md-tile-left">
|
||||
<img ng-src="{{message.face}}" class="face" alt="{{message.who}}">
|
||||
</div>
|
||||
<div class="md-tile-content">
|
||||
<h3>{{message.what}}</h3>
|
||||
<h4>{{message.who}}</h4>
|
||||
<p>
|
||||
{{message.notes}}
|
||||
</p>
|
||||
</div>
|
||||
</md-item-content>
|
||||
</md-item>
|
||||
</md-list>
|
||||
</section>
|
||||
</md-content>
|
||||
</div>
|
||||
@@ -0,0 +1,84 @@
|
||||
|
||||
angular.module('subheaderBasicDemo', ['ngMaterial'])
|
||||
|
||||
.controller('SubheaderAppCtrl', 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"
|
||||
},
|
||||
{
|
||||
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"
|
||||
},
|
||||
{
|
||||
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"
|
||||
},
|
||||
];
|
||||
});
|
||||
@@ -0,0 +1,8 @@
|
||||
|
||||
.face {
|
||||
border-radius: 30px;
|
||||
border: 1px solid #ddd;
|
||||
width: 48px;
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
14
UI/WebServerResources/scss/vendors/angular-material/components/subheader/subheader-theme.scss
vendored
Normal file
14
UI/WebServerResources/scss/vendors/angular-material/components/subheader/subheader-theme.scss
vendored
Normal file
@@ -0,0 +1,14 @@
|
||||
.md-subheader.md-THEME_NAME-theme {
|
||||
color: '{{ foreground-2-0.23 }}';
|
||||
background-color: '{{background-hue-3}}';
|
||||
|
||||
&.md-primary {
|
||||
color: '{{primary-color}}'
|
||||
}
|
||||
&.md-accent {
|
||||
color: '{{accent-color}}'
|
||||
}
|
||||
&.md-warn {
|
||||
color: '{{warn-color}}'
|
||||
}
|
||||
}
|
||||
79
UI/WebServerResources/scss/vendors/angular-material/components/subheader/subheader.js
vendored
Normal file
79
UI/WebServerResources/scss/vendors/angular-material/components/subheader/subheader.js
vendored
Normal file
@@ -0,0 +1,79 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @ngdoc module
|
||||
* @name material.components.subheader
|
||||
* @description
|
||||
* SubHeader module
|
||||
*
|
||||
* Subheaders are special list tiles that delineate distinct sections of a
|
||||
* list or grid list and are typically related to the current filtering or
|
||||
* sorting criteria. Subheader tiles are either displayed inline with tiles or
|
||||
* can be associated with content, for example, in an adjacent column.
|
||||
*
|
||||
* Upon scrolling, subheaders remain pinned to the top of the screen and remain
|
||||
* pinned until pushed on or off screen by the next subheader. @see [Material
|
||||
* Design Specifications](https://www.google.com/design/spec/components/subheaders.html)
|
||||
*
|
||||
* > To improve the visual grouping of content, use the system color for your subheaders.
|
||||
*
|
||||
*/
|
||||
angular.module('material.components.subheader', [
|
||||
'material.core',
|
||||
'material.components.sticky'
|
||||
])
|
||||
.directive('mdSubheader', MdSubheaderDirective);
|
||||
|
||||
/**
|
||||
* @ngdoc directive
|
||||
* @name mdSubheader
|
||||
* @module material.components.subheader
|
||||
*
|
||||
* @restrict E
|
||||
*
|
||||
* @description
|
||||
* The `<md-subheader>` directive is a subheader for a section
|
||||
*
|
||||
* @usage
|
||||
* <hljs lang="html">
|
||||
* <md-subheader>Online Friends</md-subheader>
|
||||
* </hljs>
|
||||
*/
|
||||
|
||||
function MdSubheaderDirective($mdSticky, $compile, $mdTheming) {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
transclude: true,
|
||||
template:
|
||||
'<h2 class="md-subheader">' +
|
||||
'<span class="md-subheader-content"></span>' +
|
||||
'</h2>',
|
||||
compile: function(element, attr, transclude) {
|
||||
var outerHTML = element[0].outerHTML;
|
||||
return function postLink(scope, element, attr) {
|
||||
$mdTheming(element);
|
||||
function getContent(el) {
|
||||
return angular.element(el[0].querySelector('.md-subheader-content'));
|
||||
}
|
||||
|
||||
// Transclude the user-given contents of the subheader
|
||||
// the conventional way.
|
||||
transclude(scope, function(clone) {
|
||||
getContent(element).append(clone);
|
||||
});
|
||||
|
||||
// Create another clone, that uses the outer and inner contents
|
||||
// of the element, that will be 'stickied' as the user scrolls.
|
||||
transclude(scope, function(clone) {
|
||||
var stickyClone = $compile(angular.element(outerHTML))(scope);
|
||||
$mdTheming(stickyClone);
|
||||
getContent(stickyClone).append(clone);
|
||||
$mdSticky(scope, element, stickyClone);
|
||||
});
|
||||
};
|
||||
}
|
||||
};
|
||||
}
|
||||
})();
|
||||
54
UI/WebServerResources/scss/vendors/angular-material/components/subheader/subheader.scss
vendored
Normal file
54
UI/WebServerResources/scss/vendors/angular-material/components/subheader/subheader.scss
vendored
Normal file
@@ -0,0 +1,54 @@
|
||||
$subheader-line-height: 1em !default;
|
||||
$subheader-font-size: 0.9em !default;
|
||||
$subheader-padding: ($baseline-grid * 2) 0px ($baseline-grid * 2) ($baseline-grid * 2) !default;
|
||||
$subheader-font-weight: 400 !default;
|
||||
$subheader-margin: 0 0 0 0 !default;
|
||||
$subheader-margin-right: 16px !default;
|
||||
$subheader-sticky-shadow: 0px 2px 4px 0 rgba(0,0,0,0.16) !default;
|
||||
|
||||
@keyframes subheaderStickyHoverIn {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 transparent;
|
||||
}
|
||||
100% {
|
||||
box-shadow: $subheader-sticky-shadow;
|
||||
}
|
||||
}
|
||||
@keyframes subheaderStickyHoverOut {
|
||||
0% {
|
||||
box-shadow: $subheader-sticky-shadow;
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.md-subheader {
|
||||
display: block;
|
||||
font-size: $subheader-font-size;
|
||||
font-weight: $subheader-font-weight;
|
||||
line-height: $subheader-line-height;
|
||||
padding: $subheader-padding;
|
||||
margin: $subheader-margin;
|
||||
margin-right: $subheader-margin-right;
|
||||
position: relative;
|
||||
|
||||
&:not(.md-sticky-no-effect) {
|
||||
&:after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
right: -$subheader-margin-right;
|
||||
content: '';
|
||||
}
|
||||
|
||||
transition: 0.2s ease-out margin;
|
||||
&[sticky-state="active"] {
|
||||
margin-top: -2px;
|
||||
}
|
||||
&:not(.md-sticky-clone)[sticky-prev-state="active"]:after {
|
||||
animation: subheaderStickyHoverOut 0.3s ease-out both;
|
||||
}
|
||||
}
|
||||
}
|
||||
28
UI/WebServerResources/scss/vendors/angular-material/components/subheader/subheader.spec.js
vendored
Normal file
28
UI/WebServerResources/scss/vendors/angular-material/components/subheader/subheader.spec.js
vendored
Normal file
@@ -0,0 +1,28 @@
|
||||
describe('mdSubheader', function() {
|
||||
var $mdStickyMock,
|
||||
basicHtml = '<md-subheader>Hello world!</md-header>';
|
||||
|
||||
beforeEach(module('material.components.subheader', function($provide) {
|
||||
$mdStickyMock = function() {
|
||||
$mdStickyMock.args = Array.prototype.slice.call(arguments);
|
||||
};
|
||||
$provide.value('$mdSticky', $mdStickyMock);
|
||||
}));
|
||||
|
||||
|
||||
it('should preserve content', inject(function($compile, $rootScope) {
|
||||
var $scope = $rootScope.$new();
|
||||
$scope.to = 'world';
|
||||
var $el = $compile('<div><md-subheader>Hello {{ to }}!</md-subheader></div>')($scope);
|
||||
$scope.$digest();
|
||||
var $subHeader = $el.children();
|
||||
expect($subHeader.text()).toEqual('Hello world!');
|
||||
}));
|
||||
|
||||
it('should implement $mdSticky', inject(function($compile, $rootScope) {
|
||||
var scope = $rootScope.$new();
|
||||
var $el = $compile(basicHtml)(scope);
|
||||
expect($mdStickyMock.args[0]).toBe(scope);
|
||||
}));
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user