Add md-colors module
parent
e7b7e9cefe
commit
6404536d19
|
@ -0,0 +1,6 @@
|
|||
# Created by .ignore support plugin (hsz.mobi)
|
||||
WebServerResources/css
|
||||
WebServerResources/scss/.sass-cache
|
||||
WebServerResources/css/styles.css
|
||||
WebServerResources/css/styles.css.map
|
||||
WebServerResources/.sass-cache
|
|
@ -2,34 +2,34 @@
|
|||
<container
|
||||
xmlns = "http://www.w3.org/1999/xhtml"
|
||||
>
|
||||
<md-content class="md-whiteframe-z2" flex ="40" style="min-width: 300px; position: relative;" id = "messagesList">
|
||||
<md-content class="md-whiteframe-z2" flex="40" style="min-width: 300px; position: relative;" id="messagesList">
|
||||
<style>
|
||||
.vs-repeat-repeated-element {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<header class="md-background sg-md-subheader sg-avatar-left">
|
||||
<h2 class="sg-md-subhead-solo md-primary md-hue-3">Unread Messages</h2>
|
||||
</header>
|
||||
|
||||
<md-list data-vs-repeat = "72"
|
||||
data-vs-scroll-parent = "#messagesList">
|
||||
<md-item ng-repeat = "currentMessage in mailbox.$messages track by currentMessage.id"
|
||||
data-ng-class = "{unread: !currentMessage.isread}">
|
||||
<md-list data-vs-repeat="72"
|
||||
data-vs-scroll-parent="#messagesList">
|
||||
<md-item ng-repeat="currentMessage in mailbox.$messages track by currentMessage.id"
|
||||
data-ng-class="{unread: !currentMessage.isread}">
|
||||
<md-item-content>
|
||||
<div class = "md-tile-left">
|
||||
<div class="md-tile-left">
|
||||
<!--avatar-->
|
||||
</div>
|
||||
<div class = "sg-tile-content">
|
||||
<a data-ui-sref = "mail.account.mailbox.message({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: currentMessage.uid})"
|
||||
data-ui-sref-active = "_selected">
|
||||
<div class = "sg-md-subhead-multi">
|
||||
<div class="sg-tile-content">
|
||||
<a data-ui-sref="mail.account.mailbox.message({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: currentMessage.uid})"
|
||||
data-ui-sref-active="_selected">
|
||||
<div class="sg-md-subhead-multi">
|
||||
{{currentMessage.$shortAddress('from')}}
|
||||
</div>
|
||||
<span class = "right" data-ng-bind-html = "currentMessage.relativedate"><!-- date --></span>
|
||||
<div class = "sg-md-body-multi">{{currentMessage.subject}}</div>
|
||||
<i class = "icon-ion-refresh"
|
||||
data-ng-hide = "mailbox.$loadMessage(currentMessage.uid)"><!-- loading --></i>
|
||||
<span class="right" data-ng-bind-html="currentMessage.relativedate"><!-- date --></span>
|
||||
<div class="sg-md-body-multi">{{currentMessage.subject}}</div>
|
||||
<i class="icon-ion-refresh"
|
||||
data-ng-hide="mailbox.$loadMessage(currentMessage.uid)"><!-- loading --></i>
|
||||
</a>
|
||||
</div>
|
||||
</md-item-content>
|
||||
|
|
|
@ -174,6 +174,7 @@
|
|||
<script type = "text/javascript" rsrc:src = "js/Common/ui.js"><!-- space --></script>
|
||||
<script type = "text/javascript" rsrc:src = "js/Common/ui-common.js"><!-- space --></script>
|
||||
<script type = "text/javascript" rsrc:src = "js/Common/ui-desktop.js"><!-- space --></script>
|
||||
<script type = "text/javascript" rsrc:src = "md-colors/colors.js"><!-- space --></script>
|
||||
|
||||
<var:if condition = "hasProductSpecificJavaScript">
|
||||
<script type = "text/javascript"
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
angular.module('SOGo.UI', ['ngMaterial'])
|
||||
angular.module('SOGo.UI', ['ngMaterial', 'mdColors'])
|
||||
|
||||
.config(function ($mdThemingProvider) {
|
||||
|
||||
|
@ -119,7 +119,9 @@
|
|||
$log.debug("close RIGHT is done");
|
||||
});
|
||||
};
|
||||
});
|
||||
})
|
||||
|
||||
.controller('ColorController', ColorController);
|
||||
|
||||
})();
|
||||
|
||||
|
|
|
@ -0,0 +1,3 @@
|
|||
Adapted from : http://plnkr.co/edit/SHkXcAQDNPHWloBnVxrw?p=preview
|
||||
|
||||
Author : Sander Elias (https://github.com/SanderElias)
|
|
@ -0,0 +1,106 @@
|
|||
(function () {
|
||||
"use strict";
|
||||
|
||||
//module global to keep an reference to the dynamic style sheet
|
||||
var customSheet;
|
||||
//module global to available color pallettes
|
||||
var colorStore = {};
|
||||
|
||||
angular
|
||||
.module('mdColors',['ngMaterial'])
|
||||
.service("ThemeColors", ThemeColors)
|
||||
.config(configColors)
|
||||
.run(loadDefaults);
|
||||
|
||||
configColors.$inject = ['$mdThemingProvider'];
|
||||
function configColors($mdThemingProvider) {
|
||||
//fetch the colores out of the themeing provider
|
||||
//console.log($mdThemingProvider._THEMES.default.colors.primary.name)
|
||||
Object.keys($mdThemingProvider._PALETTES).forEach(parsePallete);
|
||||
return;
|
||||
|
||||
// clone the pallete colors to the colorStore var
|
||||
function parsePallete(palleteName) {
|
||||
var pallete = $mdThemingProvider._PALETTES[palleteName];
|
||||
var colors = [];
|
||||
colorStore[palleteName]=colors;
|
||||
Object.keys(pallete).forEach(copyColors);
|
||||
return ;
|
||||
|
||||
function copyColors(colorName) {
|
||||
// use an regex to look for hex colors, ignore the rest
|
||||
if (/#[0-9A-Fa-f]{6}|0-9A-Fa-f]{8}\b/.exec(pallete[colorName])) {
|
||||
colors.push({color:colorName,value:pallete[colorName]});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
loadDefaults.$inject=['ThemeColors'];
|
||||
function loadDefaults(ThemeColors) {
|
||||
// this sets the default that is stored in the config-fase into the service!
|
||||
ThemeColors.themes=Object.keys(colorStore);
|
||||
ThemeColors.loadColors('amber');
|
||||
}
|
||||
|
||||
ThemeColors.$inject = ['$interpolate'];
|
||||
function ThemeColors ($interpolate) {
|
||||
// wrap all of the above up in a reusable service.
|
||||
var service = this;
|
||||
service.theme = 'amber';
|
||||
service.colors = [];
|
||||
service.themes = [];
|
||||
service.loadColors = loadColors;
|
||||
|
||||
return service;
|
||||
|
||||
function loadColors(newPallete) {
|
||||
service.theme=newPallete;
|
||||
service.colors=colorStore[newPallete];
|
||||
createStyleSheet();
|
||||
}
|
||||
|
||||
function createStyleSheet () {
|
||||
var colors = service.colors;
|
||||
var fg, bg;
|
||||
if (typeof customSheet === 'undefined') {
|
||||
// use closure for caching the styleSheet
|
||||
newStyleSheet();
|
||||
} else {
|
||||
// remove existing rules
|
||||
// TODO: look into disabling/enabling pre-build style-guides
|
||||
// in stead of delete and recreate!
|
||||
while (customSheet.cssRules.length > 0 ) {
|
||||
customSheet.deleteRule(0);
|
||||
}
|
||||
}
|
||||
|
||||
// set up interpolation functions to build css rules.
|
||||
fg = $interpolate('.md-fg-{{color}} { color:{{value}};}');
|
||||
bg = $interpolate('.md-bg-{{color}} { background-color:{{value}};}');
|
||||
|
||||
colors.forEach(function (color) {
|
||||
// insert foreground color rule
|
||||
customSheet.insertRule(fg(color));
|
||||
// insert background color rule
|
||||
customSheet.insertRule(bg(color));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function newStyleSheet() {
|
||||
// function to ad an dynamic style-sheet to the document
|
||||
var style = document.createElement("style");
|
||||
style.title = 'Dynamic Generated my Angular-Material';
|
||||
// WebKit hack... (not sure if still needed)
|
||||
style.appendChild(document.createTextNode(""));
|
||||
|
||||
document.head.appendChild(style);
|
||||
// store the sheet in the closure for reuse
|
||||
// creating a new sheet is a 'costly' operation, and I
|
||||
// just need one.
|
||||
customSheet = style.sheet;
|
||||
return style.sheet;
|
||||
}
|
||||
|
||||
}());
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<html ng-app="myPlunk" ng-strict-di="">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<title>MD Template</title>
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=yes" />
|
||||
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.7.0/angular-material.min.css" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
|
||||
<body ng-controller="AppController as vm">
|
||||
<md-toolbar>
|
||||
<div class="md-toolbar-tools">
|
||||
<span>Hello angular {{vm.version}}</span>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
|
||||
|
||||
<md-card>
|
||||
<h2 class='md-bg-500 title md-hue-1'>Color Pallete Sample</h2>
|
||||
|
||||
<md-card-content>
|
||||
<p>This is a sample that goes with <a href="https://github.com/angular/material/issues/1269">this github issue</a></p>
|
||||
|
||||
<select ng-model='vm.th.theme' ng-options='color for color in vm.th.themes' ng-change='vm.th.loadColors(vm.th.theme);'>
|
||||
</select>
|
||||
|
||||
<div>
|
||||
<h4>Select a color-theme above!</h4>
|
||||
<p>This wil override the md-bg-[colorname] and md-fg-[colorname] css-rules.</p>
|
||||
</div>
|
||||
|
||||
<table>
|
||||
|
||||
<tr>
|
||||
<th>color</th>
|
||||
<th>className</th>
|
||||
<th>result</th>
|
||||
<th>classname</th>
|
||||
<th>result</th>
|
||||
</tr>
|
||||
|
||||
<tr ng-repeat='color in vm.th.colors'>
|
||||
<td>{{color.color}}</td>
|
||||
<td>md-fg-{{color.color}}:</td>
|
||||
<td>
|
||||
<div class="md-fg-{{color.color}}">Foreground</div>
|
||||
</td>
|
||||
<td>md-bg-{{color.color}}:</td>
|
||||
<td>
|
||||
<div class="md-bg-{{color.color}}">Background</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
<p>Those color will be available application wide, and will not change with local themes.</p>
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
|
||||
|
||||
|
||||
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
|
||||
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular-aria.min.js"></script>
|
||||
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular-animate.min.js"></script>
|
||||
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular-messages.min.js"></script>
|
||||
<script src="//code.angularjs.org/1.3.10/i18n/angular-locale_nl-nl.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.4/hammer.js"></script>
|
||||
<script src="//ajax.googleapis.com/ajax/libs/angular_material/0.7.0/angular-material.min.js"></script>
|
||||
<script src="colors.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,20 @@
|
|||
(function() {
|
||||
"use strict";
|
||||
//Use an IIFE
|
||||
|
||||
AppController.$inject = ['ThemeColors']
|
||||
function AppController(ThemeColors) {
|
||||
this.version = angular.version.full + " " + angular.version.codeName;
|
||||
|
||||
this.th = ThemeColors;
|
||||
}
|
||||
|
||||
|
||||
//Hook up all my function into angular
|
||||
angular.module('myPlunk', [
|
||||
'ngMaterial',
|
||||
'mdColors'
|
||||
])
|
||||
.controller('AppController', AppController)
|
||||
|
||||
}());
|
Loading…
Reference in New Issue