feat(material): first ng2 material design components
This commit is contained in:
Jeremy Elbourn
committed by
Yegor Jbanov
Yegor Jbanov
parent
ffe13078e5
commit
f149ae79c6
@ -0,0 +1,9 @@
|
||||
<style>@import "angular2_material/src/components/progress-linear/progress_linear.css";</style>
|
||||
|
||||
<div class="md-progress-linear-container md-ready">
|
||||
<div class="md-progress-linear-dashed"></div>
|
||||
<div class="md-progress-linear-bar md-progress-linear-bar1"
|
||||
[style.transform]="secondaryBarTransform"></div>
|
||||
<div class="md-progress-linear-bar md-progress-linear-bar2"
|
||||
[style.transform]="primaryBarTransform"></div>
|
||||
</div>
|
||||
98
modules/angular2_material/src/components/progress-linear/progress_linear.js
vendored
Normal file
98
modules/angular2_material/src/components/progress-linear/progress_linear.js
vendored
Normal file
@ -0,0 +1,98 @@
|
||||
import {Component, View, Attribute, PropertySetter, onChange} from 'angular2/angular2';
|
||||
import {isPresent, isBlank} from 'angular2/src/facade/lang';
|
||||
import {Math} from 'angular2/src/facade/math';
|
||||
|
||||
@Component({
|
||||
selector: 'md-progress-linear',
|
||||
lifecycle: [onChange],
|
||||
properties: {
|
||||
'value': 'value',
|
||||
'bufferValue': 'buffer-value'
|
||||
}
|
||||
})
|
||||
@View({
|
||||
templateUrl: 'angular2_material/src/components/progress-linear/progress_linear.html',
|
||||
directives: []
|
||||
})
|
||||
export class MdProgressLinear {
|
||||
/** Value for the primary bar. */
|
||||
value_: number;
|
||||
|
||||
/** Value for the secondary bar. */
|
||||
bufferValue: number;
|
||||
|
||||
/** The render mode for the progress bar. */
|
||||
mode: string;
|
||||
|
||||
/** Attribute setter for aria-valuenow. */
|
||||
ariaValueNowSetter: Function;
|
||||
|
||||
/** CSS `transform` property applied to the primary bar. */
|
||||
primaryBarTransform: string;
|
||||
|
||||
/** CSS `transform` property applied to the secondary bar. */
|
||||
secondaryBarTransform: string;
|
||||
|
||||
constructor(
|
||||
@Attribute('md-mode') mode: string,
|
||||
@PropertySetter('attr.role') roleSetter: Function,
|
||||
@PropertySetter('attr.aria-valuemin') ariaValueMinSetter: Function,
|
||||
@PropertySetter('attr.aria-valuemax') ariaValueMaxSetter: Function,
|
||||
@PropertySetter('attr.aria-valuenow') ariaValueNowSetter: Function) {
|
||||
this.ariaValueNowSetter = ariaValueNowSetter;
|
||||
this.primaryBarTransform = '';
|
||||
this.secondaryBarTransform = '';
|
||||
|
||||
roleSetter('progressbar');
|
||||
ariaValueMinSetter('0');
|
||||
ariaValueMaxSetter('100');
|
||||
|
||||
this.mode = isPresent(mode) ? mode : Mode.DETERMINATE;
|
||||
}
|
||||
|
||||
get value() {
|
||||
return this.value_;
|
||||
}
|
||||
|
||||
set value(v) {
|
||||
if (isPresent(v)) {
|
||||
this.value_ = MdProgressLinear.clamp(v);
|
||||
this.ariaValueNowSetter(this.value_);
|
||||
}
|
||||
}
|
||||
|
||||
onChange(_) {
|
||||
// If the mode does not use a value, or if there is no value, do nothing.
|
||||
if (this.mode == Mode['QUERY'] || this.mode == Mode['INDETERMINATE'] || isBlank(this.value)) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.primaryBarTransform = this.transformForValue(this.value);
|
||||
|
||||
// The bufferValue is only used in buffer mode.
|
||||
if (this.mode == Mode['BUFFER']) {
|
||||
this.secondaryBarTransform = this.transformForValue(this.bufferValue);
|
||||
}
|
||||
}
|
||||
|
||||
/** Gets the CSS `transform` property for a progress bar based on the given value (0 - 100). */
|
||||
transformForValue(value) {
|
||||
// TODO(jelbourn): test perf gain of caching these, since there are only 101 values.
|
||||
var scale = value / 100;
|
||||
var translateX = (value - 100) / 2;
|
||||
return `translateX(${translateX}%) scale(${scale}, 1)`;
|
||||
}
|
||||
|
||||
/** Clamps a value to be between 0 and 100. */
|
||||
static clamp(v) {
|
||||
return Math.max(0, Math.min(100, v));
|
||||
}
|
||||
}
|
||||
|
||||
/** @enum {string} Progress-linear modes. */
|
||||
var Mode = {
|
||||
'DETERMINATE': 'determinate',
|
||||
'INDETERMINATE': 'indeterminate',
|
||||
'BUFFER': 'buffer',
|
||||
'QUERY': 'query'
|
||||
};
|
||||
@ -0,0 +1,266 @@
|
||||
@import "../../core/style/variables";
|
||||
|
||||
// TODO(jelbourn): This goes away.
|
||||
@import "../../core/style/default-theme";
|
||||
|
||||
$progress-linear-bar-height: 5px !default;
|
||||
|
||||
md-progress-linear {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: $progress-linear-bar-height;
|
||||
|
||||
*, *:before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.md-progress-linear-container {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
height: $progress-linear-bar-height;
|
||||
top: $progress-linear-bar-height;
|
||||
transform: translate(0, 5px) scale(1, 0);
|
||||
transition: all .3s linear;
|
||||
}
|
||||
|
||||
.md-progress-linear-container.md-ready {
|
||||
transform: translate(0, 0) scale(1, 1);
|
||||
}
|
||||
|
||||
.md-progress-linear-bar {
|
||||
height: $progress-linear-bar-height;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.md-progress-linear-bar1, .md-progress-linear-bar2 {
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
|
||||
&[md-mode="determinate"] {
|
||||
.md-progress-linear-bar1 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&[md-mode="indeterminate"] {
|
||||
.md-progress-linear-bar1 {
|
||||
animation: indeterminate1 4s infinite linear;
|
||||
}
|
||||
|
||||
.md-progress-linear-bar2 {
|
||||
animation: indeterminate2 4s infinite linear;
|
||||
}
|
||||
}
|
||||
|
||||
&[md-mode="buffer"] {
|
||||
.md-progress-linear-container {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.md-progress-linear-dashed:before {
|
||||
content: "";
|
||||
display: block;
|
||||
height: $progress-linear-bar-height;
|
||||
width: 100%;
|
||||
margin-top: 0px;
|
||||
position: absolute;
|
||||
background-color: transparent;
|
||||
background-size: 10px 10px !important;
|
||||
background-position: 0px -23px;
|
||||
animation: buffer 3s infinite linear;
|
||||
}
|
||||
}
|
||||
|
||||
&[md-mode="query"] {
|
||||
.md-progress-linear-bar2 {
|
||||
animation: query .8s infinite cubic-bezier(0.390, 0.575, 0.565, 1.000);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes indeterminate1 {
|
||||
0% {
|
||||
transform: translateX(-25%) scale(.5, 1);
|
||||
}
|
||||
10% {
|
||||
transform: translateX(25%) scale(.5, 1);
|
||||
}
|
||||
19.99% {
|
||||
transform: translateX(50%) scale(0, 1);
|
||||
}
|
||||
20% {
|
||||
transform: translateX(-37.5%) scale(.25, 1);
|
||||
}
|
||||
30% {
|
||||
transform: translateX(37.5%) scale(.25, 1);
|
||||
}
|
||||
34.99% {
|
||||
transform: translateX(50%) scale(0, 1);
|
||||
}
|
||||
36.99% {
|
||||
transform: translateX(50%) scale(0, 1);
|
||||
}
|
||||
37% {
|
||||
transform: translateX(-37.5%) scale(.25, 1);
|
||||
}
|
||||
47% {
|
||||
transform: translateX(20%) scale(.25, 1);
|
||||
}
|
||||
52% {
|
||||
transform: translateX(35%) scale(.05, 1);
|
||||
}
|
||||
55% {
|
||||
transform: translateX(35%) scale(.1, 1);
|
||||
}
|
||||
58% {
|
||||
transform: translateX(50%) scale(.1, 1);
|
||||
}
|
||||
61.99% {
|
||||
transform: translateX(50%) scale(0, 1);
|
||||
}
|
||||
69.99% {
|
||||
transform: translateX(50%) scale(0, 1);
|
||||
}
|
||||
70% {
|
||||
transform: translateX(-37.5%) scale(.25, 1);
|
||||
}
|
||||
80% {
|
||||
transform: translateX(20%) scale(.25, 1);
|
||||
}
|
||||
85% {
|
||||
transform: translateX(35%) scale(.05, 1);
|
||||
}
|
||||
88% {
|
||||
transform: translateX(35%) scale(.1, 1);
|
||||
}
|
||||
91% {
|
||||
transform: translateX(50%) scale(.1, 1);
|
||||
}
|
||||
92.99% {
|
||||
transform: translateX(50%) scale(0, 1);
|
||||
}
|
||||
93% {
|
||||
transform: translateX(-50%) scale(0, 1);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-25%) scale(.5, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes indeterminate2 {
|
||||
0% {
|
||||
transform: translateX(-50%) scale(0, 1);
|
||||
}
|
||||
25.99%{
|
||||
transform: translateX(-50%) scale(0, 1);
|
||||
}
|
||||
28% {
|
||||
transform: translateX(-37.5%) scale(.25, 1);
|
||||
}
|
||||
38% {
|
||||
transform: translateX(37.5%) scale(.25, 1);
|
||||
}
|
||||
42.99% {
|
||||
transform: translateX(50%) scale(0, 1);
|
||||
}
|
||||
46.99% {
|
||||
transform: translateX(50%) scale(0, 1);
|
||||
}
|
||||
49.99% {
|
||||
transform: translateX(50%) scale(0, 1);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(-50%) scale(0, 1);
|
||||
}
|
||||
60% {
|
||||
transform: translateX(-25%) scale(.5, 1);
|
||||
}
|
||||
70% {
|
||||
transform: translateX(25%) scale(.5, 1);
|
||||
}
|
||||
79.99% {
|
||||
transform: translateX(50%) scale(0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes query {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateX(35%) scale(.3, 1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) scale(0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes buffer {
|
||||
0% {
|
||||
opacity: 1;
|
||||
background-position: 0px -23px;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
background-position: -200px -23px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// THEME
|
||||
|
||||
md-progress-linear {
|
||||
.md-progress-linear-container {
|
||||
background-color: md-color($md-primary, 100);
|
||||
}
|
||||
|
||||
.md-progress-linear-bar {
|
||||
background-color: md-color($md-primary);
|
||||
}
|
||||
|
||||
&.md-warn .md-progress-linear-container {
|
||||
background-color: md-color($md-warn, 100);
|
||||
}
|
||||
|
||||
&.md-warn .md-progress-linear-bar {
|
||||
background-color: md-color($md-warn);
|
||||
}
|
||||
|
||||
&.md-accent .md-progress-linear-container {
|
||||
background-color: md-color($md-accent, 100);
|
||||
}
|
||||
|
||||
&.md-accent .md-progress-linear-bar {
|
||||
background-color: md-color($md-accent);
|
||||
}
|
||||
|
||||
&[md-mode=buffer] {
|
||||
&.md-primary {
|
||||
.md-progress-linear-bar1 {
|
||||
background-color: md-color($md-primary, 100);
|
||||
}
|
||||
.md-progress-linear-dashed:before {
|
||||
background: radial-gradient(md-color($md-primary, 100) 0%, md-color($md-primary, 100) 16%, transparent 42%);
|
||||
}
|
||||
}
|
||||
&.md-warn {
|
||||
.md-progress-linear-bar1 {
|
||||
background-color: md-color($md-warn, 100);
|
||||
}
|
||||
.md-progress-linear-dashed:before {
|
||||
background: radial-gradient(md-color($md-warn, 100) 0%, md-color($md-warn, 100) 16%, transparent 42%);
|
||||
}
|
||||
}
|
||||
&.md-accent {
|
||||
.md-progress-linear-bar1 {
|
||||
background-color: md-color($md-accent, 100);
|
||||
}
|
||||
.md-progress-linear-dashed:before {
|
||||
background: radial-gradient(md-color($md-accent, 100) 0%, md-color($md-accent, 100) 16%, transparent 42%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user