amorfo77/sogo
1
0
Fork 0
mirror of https://github.com/inverse-inc/sogo.git synced 2026-04-25 06:49:29 +00:00
Code Issues Projects Releases Wiki Activity

MODULE-TYPO

Browse Source 
- Sass set-up
- md-list
- md-theming (install)
This commit is contained in:
iRouge
2015-01-16 07:52:29 -05:00
parent ec1b4b9b0c
commit f1d2b8cb75
312 changed files with 26839 additions and 1309 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
UI/WebServerResources/scss/vendors/angular-material/components/progressCircular/demoBasicUsage/index.html vendored Normal file
View File

@@ -0,0 +1,25 @@
<div ng-controller="AppCtrl" layout="column" layout-margin style="padding:25px;">
<h4 style="margin-top:10px">Determinate</h4>
<p>For operations where the percentage of the operation completed can be determined, use a determinate indicator. They give users a quick sense of how long an operation will take.</p>
<div layout="row" layout-sm="column" layout-align="space-around">
<md-progress-circular md-mode="determinate" value="{{determinateValue}}"></md-progress-circular>
</div>
<h4>Indeterminate</h4>
<p>For operations where the user is asked to wait a moment while something finishes up, and it’s not necessary to expose what's happening behind the scenes and how long it will take, use an indeterminate indicator.</p>
<div layout="row" layout-sm="column" layout-align="space-around">
<md-progress-circular md-mode="indeterminate"></md-progress-circular>
</div>
<h4>Theming</h4>
<div layout="row" layout-sm="column" layout-align="space-around">
<md-progress-circular class="md-hue-2" md-mode="indeterminate"></md-progress-circular>
<md-progress-circular class="md-accent" md-mode="indeterminate"></md-progress-circular>
<md-progress-circular class="md-accent md-hue-1" md-mode="indeterminate"></md-progress-circular>
<md-progress-circular class="md-warn md-hue-3" md-mode="indeterminate"></md-progress-circular>
<md-progress-circular class="md-warn" md-mode="indeterminate"></md-progress-circular>
</div>
</div>

14
UI/WebServerResources/scss/vendors/angular-material/components/progressCircular/demoBasicUsage/script.js vendored Normal file
View File

@@ -0,0 +1,14 @@
angular.module('progressCircularDemo1', ['ngMaterial'])
.controller('AppCtrl', ['$scope', '$interval',
function($scope, $interval) {
$scope.mode = 'query';
$scope.determinateValue = 30;
$interval(function() {
$scope.determinateValue += 1;
if ($scope.determinateValue > 100) {
$scope.determinateValue = 30;
}
}, 100, 0, true);
}
]);

11
UI/WebServerResources/scss/vendors/angular-material/components/progressCircular/demoBasicUsage/style.css vendored Normal file
View File

@@ -0,0 +1,11 @@
body {
padding: 20px;
}
h4 {
margin: 10px 0;
}
md-progress-circular {
margin-bottom:20px;
}

71
UI/WebServerResources/scss/vendors/angular-material/components/progressCircular/progressCircular-theme.scss vendored Normal file
View File

@@ -0,0 +1,71 @@
md-progress-circular.md-THEME_NAME-theme {
background-color: transparent;
.md-inner {
.md-gap {
border-top-color: '{{primary-color}}';
border-bottom-color: '{{primary-color}}';
}
.md-left, .md-right {
.md-half-circle {
border-top-color: '{{primary-color}}';
}
}
.md-right {
.md-half-circle {
border-right-color: '{{primary-color}}';
}
}
.md-left {
.md-half-circle {
border-left-color: '{{primary-color}}';
}
}
}
&.md-warn {
.md-inner {
.md-gap {
border-top-color: '{{warn-color}}';
border-bottom-color: '{{warn-color}}';
}
.md-left, .md-right {
.md-half-circle {
border-top-color: '{{warn-color}}';
}
}
.md-right {
.md-half-circle {
border-right-color: '{{warn-color}}';
}
}
.md-left {
.md-half-circle {
border-left-color: '{{warn-color}}';
}
}
}
}
&.md-accent {
.md-inner {
.md-gap {
border-top-color: '{{accent-color}}';
border-bottom-color: '{{accent-color}}';
}
.md-left, .md-right {
.md-half-circle {
border-top-color: '{{accent-color}}';
}
}
.md-right {
.md-half-circle {
border-right-color: '{{accent-color}}';
}
}
.md-left {
.md-half-circle {
border-left-color: '{{accent-color}}';
}
}
}
}
}

120
UI/WebServerResources/scss/vendors/angular-material/components/progressCircular/progressCircular.js vendored Normal file
View File

@@ -0,0 +1,120 @@
(function() {
'use strict';
/**
* @ngdoc module
* @name material.components.progressCircular
* @description Circular Progress module!
*/
angular.module('material.components.progressCircular', [
'material.core'
])
.directive('mdProgressCircular', MdProgressCircularDirective);
/**
* @ngdoc directive
* @name mdProgressCircular
* @module material.components.progressCircular
* @restrict E
*
* @description
* The circular progress directive is used to make loading content in your app as delightful and painless as possible by minimizing the amount of visual change a user sees before they can view and interact with content.
*
* For operations where the percentage of the operation completed can be determined, use a determinate indicator. They give users a quick sense of how long an operation will take.
*
* For operations where the user is asked to wait a moment while something finishes up, and it’s not necessary to expose what's happening behind the scenes and how long it will take, use an indeterminate indicator.
*
* @param {string} md-mode Select from one of two modes: determinate and indeterminate.
* @param {number=} value In determinate mode, this number represents the percentage of the circular progress. Default: 0
* @param {number=} md-diameter This specifies the diamter of the circular progress. Default: 48
*
* @usage
* <hljs lang="html">
* <md-progress-circular md-mode="determinate" value="..."></md-progress-circular>
*
* <md-progress-circular md-mode="determinate" ng-value="..."></md-progress-circular>
*
* <md-progress-circular md-mode="determinate" value="..." md-diameter="100"></md-progress-circular>
*
* <md-progress-circular md-mode="indeterminate"></md-progress-circular>
* </hljs>
*/
function MdProgressCircularDirective($$rAF, $mdConstant, $mdTheming) {
var fillRotations = new Array(101),
fixRotations = new Array(101);
for (var i = 0; i < 101; i++) {
var percent = i / 100;
var rotation = Math.floor(percent * 180);
fillRotations[i] = 'rotate(' + rotation.toString() + 'deg)';
fixRotations[i] = 'rotate(' + (rotation * 2).toString() + 'deg)';
}
return {
restrict: 'E',
template:
'<div class="md-spinner-wrapper">' +
'<div class="md-inner">' +
'<div class="md-gap"></div>' +
'<div class="md-left">' +
'<div class="md-half-circle"></div>' +
'</div>' +
'<div class="md-right">' +
'<div class="md-half-circle"></div>' +
'</div>' +
'</div>' +
'</div>',
compile: compile
};
function compile(tElement, tAttrs, transclude) {
tElement.attr('aria-valuemin', 0);
tElement.attr('aria-valuemax', 100);
tElement.attr('role', 'progressbar');
return postLink;
}
function postLink(scope, element, attr) {
$mdTheming(element);
var circle = element[0],
fill = circle.querySelectorAll('.md-fill, .md-mask.md-full'),
fix = circle.querySelectorAll('.md-fill.md-fix'),
i, clamped, fillRotation, fixRotation;
var diameter = attr.mdDiameter || 48;
var scale = diameter/48;
circle.style[$mdConstant.CSS.TRANSFORM] = 'scale(' + scale.toString() + ')';
attr.$observe('value', function(value) {
clamped = clamp(value);
fillRotation = fillRotations[clamped];
fixRotation = fixRotations[clamped];
element.attr('aria-valuenow', clamped);
for (i = 0; i < fill.length; i++) {
fill[i].style[$mdConstant.CSS.TRANSFORM] = fillRotation;
}
for (i = 0; i < fix.length; i++) {
fix[i].style[$mdConstant.CSS.TRANSFORM] = fixRotation;
}
});
}
function clamp(value) {
if (value > 100) {
return 100;
}
if (value < 0) {
return 0;
}
return Math.ceil(value || 0);
}
}
})();

159
UI/WebServerResources/scss/vendors/angular-material/components/progressCircular/progressCircular.scss vendored Normal file
View File

@@ -0,0 +1,159 @@
$progress-circular-ease-in-out : cubic-bezier(0.35, 0, 0.25, 1) !default;
$progress-circular-duration : 5.25s !default;
$progress-circular-circle-duration : $progress-circular-duration * 0.25 !default;
$progress-circular-outer-duration : $progress-circular-duration * (5 / 9) !default;
$progress-circular-sporadic-duration : $progress-circular-duration !default;
$progress-circular-size : 50px !default;
@keyframes outer-rotate {
100% { transform: rotate(360deg); }
}
@keyframes left-wobble {
0%, 100% { transform: rotate(130deg); }
50% { transform: rotate( -5deg); }
}
@keyframes right-wobble {
0%, 100% { transform: rotate(-130deg); }
50% { transform: rotate( 5deg); }
}
@keyframes sporadic-rotate {
12.5% { transform: rotate( 135deg); }
25% { transform: rotate( 270deg); }
37.5% { transform: rotate( 405deg); }
50% { transform: rotate( 540deg); }
62.5% { transform: rotate( 675deg); }
75% { transform: rotate( 810deg); }
87.5% { transform: rotate( 945deg); }
100% { transform: rotate(1080deg); }
}
md-progress-circular {
width: $progress-circular-size;
height: $progress-circular-size;
display: block;
position: relative;
padding-top: 0 !important;
margin-bottom: 0 !important;
overflow: hidden;
.md-inner {
width: $progress-circular-size;
height: $progress-circular-size;
position: relative;
.md-gap {
position: absolute;
left: $progress-circular-size * 0.5 - 1;
right: $progress-circular-size * 0.5 - 1;
top: 0;
bottom: 0;
border-top: 5px solid black;
box-sizing: border-box;
}
.md-left, .md-right {
position: absolute;
top: 0;
height: $progress-circular-size;
width: $progress-circular-size * 0.5;
overflow: hidden;
.md-half-circle {
position: absolute;
top: 0;
width: $progress-circular-size;
height: $progress-circular-size;
box-sizing: border-box;
border-width: 5px;
border-style: solid;
border-color: black black transparent;
border-radius: 50%;
}
}
.md-left {
left: 0;
.md-half-circle {
left: 0;
border-right-color: transparent;
}
}
.md-right {
right: 0;
.md-half-circle {
right: 0;
border-left-color: transparent;
}
}
}
$i: 0;
@while $i <= 100 {
&[value="#{$i}"] {
.md-inner {
.md-left {
.md-half-circle {
@if $i <= 50 {
transform: rotate(135deg);
} @else {
transition: transform 0.1s linear;
$deg: ($i - 50) / 50 * 180 + 135;
transform: rotate(#{$deg}deg);
}
}
}
.md-right {
.md-half-circle {
@if $i <= 50 {
transition: transform 0.1s linear;
$deg: $i / 50 * 180 - 135;
transform: rotate(#{$deg}deg);
} @else {
transform: rotate(45deg);
}
}
}
.md-gap {
border-bottom-width: 5px;
border-bottom-style: solid;
@if $i <= 50 {
border-bottom-color: transparent !important;
} @else {
transition: border-bottom-color 0.1s linear;
}
}
}
}
$i: $i + 1;
}
&:not([md-mode=indeterminate]) {
.md-inner {
.md-left, .md-right {
.md-half-circle {
}
}
}
}
&[md-mode=indeterminate] {
.md-spinner-wrapper {
animation: outer-rotate $progress-circular-outer-duration linear infinite;
.md-inner {
animation: sporadic-rotate $progress-circular-sporadic-duration $progress-circular-ease-in-out infinite;
.md-left, .md-right {
.md-half-circle {
animation-iteration-count: infinite;
animation-duration: ($progress-circular-duration * 0.25);
animation-timing-function: $progress-circular-ease-in-out;
}
}
.md-left {
.md-half-circle {
animation-name: left-wobble;
}
}
.md-right {
.md-half-circle {
animation-name: right-wobble;
}
}
}
}
}
}

18
UI/WebServerResources/scss/vendors/angular-material/components/progressCircular/progressCircular.spec.js vendored Normal file
View File

@@ -0,0 +1,18 @@
describe('mdProgressCircular', function() {
beforeEach(module('material.components.progressCircular'));
it('should update aria-valuenow', inject(function($compile, $rootScope) {
var element = $compile('<div>' +
'<md-progress-circular value="{{progress}}">' +
'</md-progress-circular>' +
'</div>')($rootScope);
$rootScope.$apply(function() {
$rootScope.progress = 50;
});
var progress = element.find('md-progress-circular');
expect(progress.eq(0).attr('aria-valuenow')).toEqual('50');
}));
});