CriticalDepsMirror/clay
1
0
Fork 0
mirror of https://github.com/pebble-dev/clay.git synced 2026-08-30 13:56:58 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add description field to all input type components.

Browse Source
This commit is contained in:
Keegan
2016-02-29 23:58:03 +11:00
parent 75aaa07048
commit 2f5f3cc4e8
17 changed files with 133 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/scripts/components/checkboxgroup.js
+1
View File
@@ -8,6 +8,7 @@ module.exports = {
defaults: {
label: '',
options: [],
description: '',
attributes: {}
}
};
src/scripts/components/color.js
+2 -1
View File
@@ -6,7 +6,8 @@ module.exports = {
style: require('../../styles/clay/components/color.scss'),
manipulator: 'color',
defaults: {
label: ''
label: '',
description: ''
},
initialize: function(minified) {
var HTML = minified.HTML;
src/scripts/components/input.js
+1
View File
@@ -7,6 +7,7 @@ module.exports = {
manipulator: 'val',
defaults: {
label: '',
description: '',
attributes: {}
}
};
src/scripts/components/radiogroup.js
+1
View File
@@ -8,6 +8,7 @@ module.exports = {
defaults: {
label: '',
options: [],
description: '',
attributes: {}
}
};
src/scripts/components/select.js
+1
View File
@@ -8,6 +8,7 @@ module.exports = {
defaults: {
label: '',
options: [],
description: '',
attributes: {}
},
initialize: function() {
src/scripts/components/toggle.js
+1
View File
@@ -7,6 +7,7 @@ module.exports = {
manipulator: 'checked',
defaults: {
label: '',
description: '',
attributes: {}
}
};
src/styles/clay/_base.scss
+50 -43
View File
@@ -147,52 +147,59 @@ a {
}
}
.description {
padding-top: $item-spacing-v;
@include font-size(0.9);
color: $color-gray-9;
}
.inputs {
display: block;
width:100%;
border-collapse: collapse;
.section & .component {
display: table;
width:100%;
.label,
.input {
display: table-cell;
}
.input {
text-align: right;
}
&.invalid {
.input:after {
content: "!";
display: inline-block;
color: $color-white;
background: $color-orange;
border-radius: $border-radius;
width: 1.2em;
text-align: center;
height: 1.2em;
font-size: 1em;
vertical-align: middle;
line-height: 1.3em;
margin-left: -0.7em;
position:absolute;
@include font-pfdin(regular);
}
.input input {
color: $color-orange;
padding-right: 1em;
@include placeholder {
color: $color-orange;
}
}
}
}
//.section & .component {
// display: table;
// width:100%;
//
// .label,
// .input {
// display: table-cell;
// }
//
// .input {
// text-align: right;
// }
//
// &.invalid {
// .input:after {
// content: "!";
// display: inline-block;
// color: $color-white;
// background: $color-orange;
// border-radius: $border-radius;
// width: 1.2em;
// text-align: center;
// height: 1.2em;
// font-size: 1em;
// vertical-align: middle;
// line-height: 1.3em;
// margin-left: -0.7em;
// position:absolute;
// @include font-pfdin(regular);
// }
//
// .input input {
// color: $color-orange;
// padding-right: 1em;
//
// @include placeholder {
// color: $color-orange;
// }
//
// }
// }
//
//}
}
src/styles/clay/components/select.scss
+4 -1
View File
@@ -2,7 +2,10 @@
@import "clay";
.component-select {
position: relative;
label {
position: relative;
}
.value {
$triangle-size: 0.85rem;
src/templates/components/checkboxgroup.tpl
+3
View File
@@ -15,4 +15,7 @@
</label>
{{/each}}
</div>
{{if description}}
<div class="description">{{{description}}}</div>
{{/if}}
</div>
src/templates/components/color.tpl
+3
View File
@@ -7,6 +7,9 @@
<span class="label">{{{label}}}</span>
<span class="value"></span>
</label>
{{if description}}
<div class="description">{{{description}}}</div>
{{/if}}
<div class="picker-wrap">
<div class="picker">
<div class="color-box-wrap">
src/templates/components/input.tpl
+3
View File
@@ -6,4 +6,7 @@
{{each key: attributes}}{{key}}="{{this}}"{{/each}}
/>
</span>
{{if description}}
<div class="description">{{{description}}}</div>
{{/if}}
</label>
src/templates/components/radiogroup.tpl
+3
View File
@@ -15,4 +15,7 @@
</label>
{{/each}}
</div>
{{if description}}
<div class="description">{{{description}}}</div>
{{/if}}
</div>
src/templates/components/select.tpl
+14 -9
View File
@@ -1,9 +1,14 @@
<label class="component component-select">
<span class="label">{{{label}}}</span>
<span class="value"></span>
<select data-manipulator-target {{each key: attributes}}{{key}}="{{this}}"{{/each}}>
{{each options}}
<option value="{{this.value}}" class="item-select-option">{{this.label}}</option>
{{/each}}
</select>
</label>
<div class="component component-select">
<label>
<span class="label">{{{label}}}</span>
<span class="value"></span>
<select data-manipulator-target {{each key: attributes}}{{key}}="{{this}}"{{/each}}>
{{each options}}
<option value="{{this.value}}" class="item-select-option">{{this.label}}</option>
{{/each}}
</select>
</label>
{{if description}}
<div class="description">{{{description}}}</div>
{{/if}}
</div>
src/templates/components/toggle.tpl
+18 -13
View File
@@ -1,14 +1,19 @@
<label class="component component-toggle">
<span class="label">{{{label}}}</span>
<span class="input">
<input
data-manipulator-target
type="checkbox"
{{each key: attributes}}{{key}}="{{this}}"{{/each}}
/>
<span class="graphic">
<span class="slide"></span>
<span class="marker"></span>
<div class="component component-toggle">
<label>
<span class="label">{{{label}}}</span>
<span class="input">
<input
data-manipulator-target
type="checkbox"
{{each key: attributes}}{{key}}="{{this}}"{{/each}}
/>
<span class="graphic">
<span class="slide"></span>
<span class="marker"></span>
</span>
</span>
</span>
</label>
</label>
{{if description}}
<div class="description">{{{description}}}</div>
{{/if}}
</div>