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

Commit 2ac6821

Browse files
ajoslinajoslin
committed
wip: input
1 parent 764a723 commit 2ac6821

File tree

5 files changed

+276
-0
lines changed

5 files changed

+276
-0
lines changed

‎src/components/input/_input.scss

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
2+
$tff-font-size: 0.75em;
3+
$tff-line-height:26px;
4+
$tff-transition: all 0.15s $swift-ease-in-out-timing-function;
5+
// - `label` element (aka hint)
6+
$tff-hint-offset-large : 22px;
7+
$tff-hint-offset-small : 4px;
8+
$ttf-hint-offset-scale : 0.75;
9+
// - `line` element
10+
$tff-line-focused-width: 2px;
11+
$tff-line-disabled-width: 0px;
12+
$tff-line-dot-width: 1px;
13+
$tff-line-dot-size: 3px;
14+
$tff-line-dashed: #cfcfcf;
15+
16+
$tff-margin: 10px 0 (10px - $tff-line-focused-width) 0;
17+
18+
// ******************************
19+
// Mixins: Text Fields
20+
// ******************************
21+
22+
@mixin text-field($transition:false, $borderWidth:1px ) {
23+
}
24+
25+
@mixin text-hint($size:large, $transition:false ) {
26+
label {
27+
@if $size == "small" {
28+
transform: translate3d(0, $tff-hint-offset-small, 0) scale($ttf-hint-offset-scale);
29+
} @else {
30+
transform: translate3d(0, $tff-hint-offset-large, 0);
31+
transform-origin: left center;
32+
transition: $tff-transition;
33+
}
34+
35+
@if( $transition != false ) {
36+
transition: $transition;
37+
}
38+
}
39+
}
40+
41+
@mixin text-dashed-line( $dotGap, $dotSize) {
42+
background-size: $dotSize $dotGap;
43+
background-position: 0 bottom;
44+
background-size: (1px + 1px) $dotGap;
45+
background-repeat: repeat-x;
46+
}
47+
48+
md-input-two {
49+
50+
label {
51+
display: block;
52+
font-size: $tff-font-size;
53+
}
54+
55+
textarea,
56+
input[type="text"],
57+
input[type="password"],
58+
input[type="datetime"],
59+
input[type="datetime-local"],
60+
input[type="date"],
61+
input[type="month"],
62+
input[type="time"],
63+
input[type="week"],
64+
input[type="number"],
65+
input[type="email"],
66+
input[type="url"],
67+
input[type="search"],
68+
input[type="tel"],
69+
input[type="color"] {
70+
display: block;
71+
border-width: 0 0 1px 0;
72+
padding-top: 2px;
73+
line-height: $tff-line-height;
74+
padding-bottom: 1px;
75+
76+
&:focus {
77+
outline: 0;
78+
}
79+
}
80+
81+
input, textarea {
82+
background: none;
83+
}
84+
}
85+
86+
// Light-Theme
87+
md-input-two {
88+
padding-bottom: $tff-line-focused-width;
89+
margin: $tff-margin;
90+
91+
position: relative;
92+
display: block;
93+
94+
label {
95+
font-size: 1em;
96+
z-index: 1;
97+
pointer-events: none;
98+
-webkit-font-smoothing: antialiased;
99+
100+
&:hover {
101+
cursor: text;
102+
}
103+
}
104+
105+
label {
106+
transform: translate3d(0, $tff-hint-offset-large, 0);
107+
transform-origin: left center;
108+
transition: $tff-transition;
109+
}
110+
111+
&.md-input-focused,
112+
&.md-input-has-value {
113+
label {
114+
transform: translate3d(0, $tff-hint-offset-small, 0) scale($ttf-hint-offset-scale);
115+
}
116+
}
117+
&.md-input-focused {
118+
input, textarea {
119+
border-bottom-width: $tff-line-focused-width;
120+
padding-bottom: 0;
121+
}
122+
}
123+
124+
&[disabled] {
125+
input, textarea {
126+
background-size: $tff-line-dot-width $tff-line-dot-size;
127+
background-position: 0 bottom;
128+
background-size: (1px + 1px) $tff-line-dot-size;
129+
background-repeat: repeat-x;
130+
pointer-events: none;
131+
}
132+
}
133+
}

‎src/components/input/demoNew/index.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<md-content ng-init="SHOW=true">
2+
<md-input-two foo="bar" ng-if="SHOW" ng-model="test">
3+
Hello
4+
</md-input-two>
5+
</md-content>

‎src/components/input/demoNew/script.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
angular.module('testNewApp', ['ngMaterial']);

‎src/components/input/input-theme.scss

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
$tff-focus-color: map-get($primary-color-palette, '500') !default;
2+
$tff-text-color: $foreground-primary-color !default;
3+
$tff-hint-small-color: mix($foreground-secondary-color, $foreground-tertiary-color, 40%) !default;
4+
$tff-hint-color: $foreground-tertiary-color !default;
5+
$tff-line-color: $foreground-quarternary-color !default;
6+
$tff-disabled-line-color: mix($foreground-tertiary-color, $foreground-quarternary-color) !default;
7+
$tff-disabled-color: $foreground-quarternary-color !default;
8+
9+
md-input-two.md-#{$theme-name}-theme {
10+
input, textarea {
11+
text-shadow: $foreground-text-shadow;
12+
@include input-placeholder($tff-hint-color);
13+
}
14+
15+
label {
16+
text-shadow: $foreground-text-shadow;
17+
color: $tff-hint-color;
18+
}
19+
20+
input, textarea {
21+
color: $tff-text-color;
22+
border-color: $tff-line-color;
23+
}
24+
25+
&.md-input-focused {
26+
input, textarea {
27+
border-color: $tff-focus-color;
28+
}
29+
label {
30+
color: $tff-focus-color;
31+
}
32+
&.md-input-has-value {
33+
@if $dark-theme {
34+
label {
35+
color: lighten($tff-focus-color, 10%);
36+
}
37+
}
38+
}
39+
}
40+
41+
&.md-input-has-value:not(.md-input-focused) {
42+
label {
43+
color: $tff-hint-small-color;
44+
}
45+
}
46+
47+
&[disabled] {
48+
input, textarea {
49+
border-bottom-color: $tff-disabled-color;
50+
color: $tff-hint-color;
51+
background-image: linear-gradient(to right, $tff-disabled-line-color 0%, $tff-disabled-line-color 50%, rgba(0, 0, 0, 0) 0%);
52+
}
53+
}
54+
}

‎src/components/input/input.js

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
angular.module('material.components.input', [])
2+
3+
.directive('mdInputTwo', InputDirective);
4+
5+
function InputDirective($compile, $injector) {
6+
var PRIORITY = 99;
7+
var copyableAttributes = { /* eg `'ng-if': true` */ };
8+
9+
return {
10+
priority: PRIORITY,
11+
terminal: true,
12+
link: {
13+
pre: preLink,
14+
post: postLink
15+
}
16+
};
17+
18+
function preLink(scope, element, attr) {
19+
var input = angular.element(angular.isDefined(attr.mdMultiline) ? '<textarea>' : '<input>');
20+
var node = element[0];
21+
22+
// Copy relevant attributes down to the input element: attrs that either aren't a directive,
23+
// or are a directive that has already run (a directive with higher priority)
24+
// For example, ng-if would NOT be copied down to the input because it has a higher priority
25+
angular.forEach(node.attributes, function(data) {
26+
var attrName = data.name;
27+
var attrValue = data.value;
28+
29+
if (!copyableAttributes.hasOwnProperty(attrName)) {
30+
copyableAttributes[attrName] = attrIsHigherPriority(attrName);
31+
}
32+
33+
if (copyableAttributes[attrName]) {
34+
node.removeAttribute(attrName);
35+
input[0].setAttribute(attrName, attrValue);
36+
}
37+
});
38+
39+
function attrIsHigherPriority(attrName) {
40+
var injectName = attr.$normalize(attrName) + 'Directive';
41+
var directives = $injector.has(injectName) ? $injector.get(injectName) : [];
42+
43+
for (var i = 0, ii = directives.length; i < ii; i++) {
44+
if (directives[i].priority > PRIORITY) {
45+
return false;
46+
}
47+
}
48+
return true;
49+
}
50+
51+
var label = angular.element('<label>').append(element.contents());
52+
element.append(label);
53+
54+
element.append(input);
55+
$compile(input)(scope);
56+
}
57+
58+
function postLink(scope, element, attr) {
59+
var input = element.find(angular.isDefined(attr.mdMultiline) ? 'textarea' : 'input');
60+
var ngModelCtrl = input.data('$ngModelController');
61+
62+
ngModelCtrl && setupFloatingLabel();
63+
64+
//*********
65+
// Methods
66+
//*********
67+
68+
function setupFloatingLabel() {
69+
scope.$watch(function() {
70+
return ngModelCtrl.$isEmpty(ngModelCtrl.$viewValue);
71+
}, function isEmptyWatch(value) {
72+
element.toggleClass('md-input-has-value', !value);
73+
});
74+
75+
input.on('focus', function() {
76+
element.addClass('md-input-focused');
77+
});
78+
input.on('blur', function() {
79+
element.removeClass('md-input-focused');
80+
});
81+
}
82+
}
83+
}

0 commit comments

Comments
 (0)