CriticalDepsMirror/clay
1
0
Fork 0
mirror of https://github.com/pebble-dev/clay.git synced 2026-08-27 20:36:33 -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
README.md
+6
View File
@@ -178,6 +178,7 @@ Standard text input field.
| appKey | string (unique) | The AppMessage key matching the `appKey` item defined in your `appinfo.json`. Set this to a unique string to allow this item to be looked up using `Clay.getItemsByAppKey()` in your custom function. You must set this if you wish for the value of this item to be persisted after the user closes the config page. |
| label | string | The label that should appear next to this item. |
| defaultValue | string | The default value of the input field. |
| description | string | Optional sub-text to include below the component |
| attributes | object | An object containing HTML attributes to set on the input field. You can add basic HTML5 validation this way by setting attributes such as `required` or `type`. |
@@ -215,6 +216,7 @@ Switch for a single item.
| appKey | string (unique) | The AppMessage key matching the `appKey` item defined in your `appinfo.json`. Set this to a unique string to allow this item to be looked up using `Clay.getItemsByAppKey()` in your custom function. You must set this if you wish for the value of this item to be persisted after the user closes the config page. |
| label | string | The label that should appear next to this item. |
| defaultValue | int\|boolean | The default value of the toggle. Defaults to `false` if not specified. |
| description | string | Optional sub-text to include below the component |
| attributes | object | An object containing HTML attributes to set on the input field. You can add basic HTML5 validation this way by setting attribute such as `required`. |
@@ -249,6 +251,7 @@ A dropdown menu containing multiple options.
| appKey | string (unique) | The AppMessage key matching the `appKey` item defined in your `appinfo.json`. Set this to a unique string to allow this item to be looked up using `Clay.getItemsByAppKey()` in your custom function. You must set this if you wish for the value of this item to be persisted after the user closes the config page. |
| label | string | The label that should appear next to this item. |
| defaultValue | string | The default value of the dropdown menu. Must match a value in the `options` array. |
| description | string | Optional sub-text to include below the component |
| attributes | object | An object containing HTML attributes to set on the input field. You can add basic HTML5 validation this way by setting attribute such as `required`. |
| options | array of objects | The options you want to appear in the dropdown menu. Each option is an object with a `label` and `value` property. |
@@ -301,6 +304,7 @@ A color picker containing the 64 supported colors on Basalt and Chalk.
| appKey | string (unique) | The AppMessage key matching the `appKey` item defined in your `appinfo.json`. Set this to a unique string to allow this item to be looked up using `Clay.getItemsByAppKey()` in your custom function. You must set this if you wish for the value of this item to be persisted after the user closes the config page. |
| label | string | The label that should appear next to this item. |
| defaultValue | string OR int | The default color. Always use the uncorrected value even if `sunlight` is true. The component will do the conversion internally. |
| description | string | Optional sub-text to include below the component |
| sunlight | boolean | Use the color-corrected sunlight color palette if `true`, else the uncorrected version. Defaults to `true` if not specified. |
##### Example
@@ -332,6 +336,7 @@ A list of options allowing the user can only choose one option to submit.
| appKey | string (unique) | The AppMessage key matching the `appKey` item defined in your `appinfo.json`. Set this to a unique string to allow this item to be looked up using `Clay.getItemsByAppKey()` in your custom function. You must set this if you wish for the value of this item to be persisted after the user closes the config page. |
| label | string | The label that should appear next to this item. |
| defaultValue | string | The default selected item. Must match a value in the `options` array. |
| description | string | Optional sub-text to include below the component |
| attributes | object | An object containing HTML attributes to set on the input field. You can add basic HTML5 validation this way by setting attribute such as `required`. |
| options | array of objects | The options you want to appear in the radio group. Each option is an object with a `label` and `value` property. |
@@ -376,6 +381,7 @@ A list of options where a user may choose more than one option to submit.
| appKey | string (unique) | The AppMessage key matching the `appKey` item defined in your `appinfo.json`. Set this to a unique string to allow this item to be looked up using `Clay.getItemsByAppKey()` in your custom function. You must set this if you wish for the value of this item to be persisted after the user closes the config page. |
| label | string | The label that should appear next to this item. |
| defaultValue | array of strings | The default selected items. Each value must match one in the `options` array. |
| description | string | Optional sub-text to include below the component |
| attributes | object | An object containing HTML attributes to set on the input field. You can add basic HTML5 validation this way by setting attribute such as `required`. |
| options | array of objects | The options you want to appear in the checkbox group. Each option is an object with a `label` and `value` property. |
dev/config.js
+19 -6
View File
@@ -30,13 +30,18 @@ module.exports = [
"limit": 10,
"required": "required",
type: "email"
}
},
"description": "Some arbitrary text explaining how this all works. " +
"It's cool if this wraps across multiple lines"
},
{
"type": "toggle",
"appKey": "cool_stuff",
"label": "Enable Cool Stuff",
"defaultValue": false
"defaultValue": false,
"description": "Some arbitrary text explaining how this all works. " +
"It's cool if this wraps across multiple lines"
},
{
"type": "color",
@@ -50,7 +55,9 @@ module.exports = [
"appKey": "sunnyColorTest",
"defaultValue": "00FF00",
"label": "Sunny Color",
"sunlight": true
"sunlight": true,
"description": "Some arbitrary text explaining how this all works. " +
"It's cool if this wraps across multiple lines"
}
]
},
@@ -71,7 +78,9 @@ module.exports = [
{ "label": "One really long thing that would not fit", "value": "three" },
{ "label": "Small", "value": "quote' \"test" },
{ "label": "Final thing", "value": "three" }
]
],
"description": "Some arbitrary text explaining how this all works. " +
"It's cool if this wraps across multiple lines"
},
{
"type": "checkboxgroup",
@@ -84,7 +93,9 @@ module.exports = [
{ "label": "One really long thing that would not fit", "value": "three" },
{ "label": "Small", "value": "quote' \"test" },
{ "label": "Final thing", "value": "three" }
]
],
"description": "Some arbitrary text explaining how this all works. " +
"It's cool if this wraps across multiple lines"
},
{
"type": "input",
@@ -108,7 +119,9 @@ module.exports = [
],
"attributes": {
"required": "required"
}
},
"description": "Some arbitrary text explaining how this all works. " +
"It's cool if this wraps across multiple lines"
}
]
},
dist/clay.js
Vendored
+3 -3
View File
File diff suppressed because one or more lines are too long
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>