diff --git a/.gitignore b/.gitignore index a16810e..e47e939 100755 --- a/.gitignore +++ b/.gitignore @@ -27,3 +27,5 @@ build/Release node_modules tmp + +dist diff --git a/README.md b/README.md index 08a9bd2..2a3e468 100755 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ Clay will by default automatically handle the 'showConfiguration' and 'webviewcl Clay will eventually be built into the Pebble SDK. However, while it is still in beta you will need to follow the steps shown below: -1. Download the Clay distribution file from: [dist/clay.js](dist/clay.js). +1. Download the **clay.js** distribution file from the [latest release](https://github.com/pebble/clay/releases/latest). 2. Drop `clay.js` in your project's `src/js` directory. 3. Create a JSON file called `config.json` and place it in your `src/js` directory. 4. In order for JSON files to work you may need to change a line in your `wscript` from `ctx.pbl_bundle(binaries=binaries, js=ctx.path.ant_glob('src/js/**/*.js'))` to `ctx.pbl_bundle(binaries=binaries, js=ctx.path.ant_glob(['src/js/**/*.js', 'src/js/**/*.json']))`. @@ -27,7 +27,7 @@ Clay will eventually be built into the Pebble SDK. However, while it is still in Clay will eventually be built into CloudPebble. However while it is still in beta, you will need to follow some steps 1. Create a new JavaScript file called `clay.js`. -2. Copy the contents of the Clay distribution file from [dist/clay.js](dist/clay.js) into your newly created `clay.js` file. +2. Copy the contents from the **clay.js** distribution file found in the [latest release](https://github.com/pebble/clay/releases/latest) into your newly created `clay.js` file. 3. Create another JavaScript file called `config.js` with the following content. This will act as your config's root array element, from which the rest of the page is built up: ```javascript @@ -67,7 +67,7 @@ Your root element **must** be an array. This represents the entire page. Inside ## Components -![Example](src/images/example.png) + ### Section @@ -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. | @@ -443,60 +449,75 @@ The submit button for the page. You **MUST** include this component somewhere in ## Manipulators -Each component has a **manipulator**. This is a set of methods used to talk to the item on the page. At a minimum, manipulators must have a `.get()` and `.set(value)` method. When the config page is closed, the `.get()` method is run on all components registered with an `appKey` to construct the object sent to the C app. Many of these methods fire an event when the method is called. You can listen for these events with `ClayItem.on()`. +Each component has a **manipulator**. This is a set of methods used to talk to the item on the page. +At a minimum, manipulators must have a `.get()` and `.set(value)` method however there are also methods to assist in interactivity such as `.hide()` and `.disable()`. +**NOTE:** There is currently no way to disable or hide an entire section. You must disable/hide each item in the section to achieve this effect. +When the config page is closed, the `.get()` method is run on all components registered with an `appKey` to construct the object sent to the C app. +Many of these methods fire an event when the method is called. You can listen for these events with `ClayItem.on()`. #### html | Method | Returns | Event Fired | Description | |--------|---------|-------------| ------------| | `.set( [string\|HTML] value)` | `ClayItem` | `change` | Sets the content of this item. | -| `.get()` | `string` | Gets the content of this item. | +| `.get()` | `string` | | Gets the content of this item. | +| `.hide()` | `ClayItem` | `hide` | Hides the item | +| `.show()` | `ClayItem` | `show` | Shows the item | #### val | Method | Returns | Event Fired | Description | |--------|---------|-------------| ------------| | `.set( [string] value)` | `ClayItem` | `change` | Sets the value of this item. | -| `.get()` | `string` | Gets the content of this item. | +| `.get()` | `string` | | Gets the content of this item. | | `.disable()` | `ClayItem` | `disabled` | Prevents this item from being edited by the user. | | `.enable()` | `ClayItem` | `enabled` | Allows this item to be edited by the user. | +| `.hide()` | `ClayItem` | `hide` | Hides the item | +| `.show()` | `ClayItem` | `show` | Shows the item | #### checked | Method | Returns | Event Fired | Description | |--------|---------|-------------| ------------| | `.set( [boolean\|int] value)` | `ClayItem` | `change` | Check/uncheck the state of this item. | -| `.get()` | `int` | 1 if checked, 0 if not checked | +| `.get()` | `int` | | 1 if checked, 0 if not checked | | `.disable()` | `ClayItem` | `disabled` | Prevents this item from being edited by the user. | | `.enable()` | `ClayItem` | `enabled` | Allows this item to be edited by the user. | +| `.hide()` | `ClayItem` | `hide` | Hides the item | +| `.show()` | `ClayItem` | `show` | Shows the item | #### color | Method | Returns | Event Fired | Description | |--------|---------|-------------| ------------| | `.set( [string\|int] value)` | `ClayItem` | `change` | Sets the color picker to the provided color. If the value is a string, it must be provided in hex notation eg `'FF0000'`. | -| `.get()` | `int` | Get the chosen color. This is returned as a number in order to make it easy to use on the watch side using `GColorFromHEX()`. | +| `.get()` | `int` | | Get the chosen color. This is returned as a number in order to make it easy to use on the watch side using `GColorFromHEX()`. | | `.disable()` | `ClayItem` | `disabled` | Prevents this item from being edited by the user. | | `.enable()` | `ClayItem` | `enabled` | Allows this item to be edited by the user. | +| `.hide()` | `ClayItem` | `hide` | Hides the item | +| `.show()` | `ClayItem` | `show` | Shows the item | #### radiogroup | Method | Returns | Event Fired | Description | |--------|---------|-------------| ------------| | `.set( [string] value)` | `ClayItem` | `change` | Checks the radio button that corresponds to the provided value. | -| `.get()` | `string` | Gets the value of the checked radio button in the list. | +| `.get()` | `string` | | Gets the value of the checked radio button in the list. | | `.disable()` | `ClayItem` | `disabled` | Prevents this item from being edited by the user. | | `.enable()` | `ClayItem` | `enabled` | Allows this item to be edited by the user. | +| `.hide()` | `ClayItem` | `hide` | Hides the item | +| `.show()` | `ClayItem` | `show` | Shows the item | #### checkboxgroup | Method | Returns | Event Fired | Description | |--------|---------|-------------| ------------| | `.set( [array] value)` | `ClayItem` | `change` | Checks the checkboxes that corresponds to the provided list of values. | -| `.get()` | `Array.` | Gets an array of strings representing the list of the values of the checked items | +| `.get()` | `Array.` | | Gets an array of strings representing the list of the values of the checked items | | `.disable()` | `ClayItem` | `disabled` | Prevents this item from being edited by the user. | | `.enable()` | `ClayItem` | `enabled` | Allows this item to be edited by the user. | - +| `.hide()` | `ClayItem` | `hide` | Hides the item | +| `.show()` | `ClayItem` | `show` | Shows the item | # Extending Clay @@ -591,7 +612,13 @@ module.exports = function(minified) { var coolStuffToggle = Clay.getItemByAppKey('cool_stuff'); toggleBackground.call(coolStuffToggle); coolStuffToggle.on('change', toggleBackground); + + // Hide the color picker for aplite + if (Clay.meta.activeWatchInfo.platform === 'aplite') { + Clay.getItemByAppKey('background').hide(); + } }); + }; ``` diff --git a/dev/config.js b/dev/config.js index 76aa57a..7b13947 100644 --- a/dev/config.js +++ b/dev/config.js @@ -24,32 +24,31 @@ module.exports = [ "type": "input", "appKey": "email", "defaultValue": "", - "label": "Email", + "label": "Input Field", + "description": "This is a description for the input component. " + + "You can add html in here too.", "attributes": { - "placeholder": "eg: name@domain.com", - "limit": 10, - "required": "required", - type: "email" + "placeholder": "Placeholder set with attributes" } }, { "type": "toggle", "appKey": "cool_stuff", - "label": "Enable Cool Stuff", + "label": "This is a Toggle", "defaultValue": false }, { "type": "color", "appKey": "colorTest", "defaultValue": "FF0000", - "label": "Background Color", + "label": "Standard Color Picker", "sunlight": false }, { "type": "color", "appKey": "sunnyColorTest", "defaultValue": "00FF00", - "label": "Sunny Color", + "label": "Sunny Color Picker", "sunlight": true } ] @@ -64,46 +63,33 @@ module.exports = [ { "type": "radiogroup", "appKey": "radiogroup-test", - "label": "Radio test", + "label": "Radio Group", "options": [ - { "label": "Test thing one", "value": "one" }, + { "label": "Test thing", "value": "one" }, { "label": "Another thing", "value": "two" }, - { "label": "One really long thing that would not fit", "value": "three" }, - { "label": "Small", "value": "quote' \"test" }, - { "label": "Final thing", "value": "three" } + { "label": "Final thing with html", "value": "three" } ] }, { "type": "checkboxgroup", "appKey": "checkboxgroup-test", "defaultValue": ["quote' \"test", "two"], - "label": "Checkbox test", + "label": "Checkbox Group", "options": [ - { "label": "Test thing one", "value": "one" }, + { "label": "First thing", "value": "three" }, { "label": "Another thing", "value": "two" }, - { "label": "One really long thing that would not fit", "value": "three" }, - { "label": "Small", "value": "quote' \"test" }, { "label": "Final thing", "value": "three" } ] }, - { - "type": "input", - "appKey": "date", - "defaultValue": "", - "label": "Range", - "attributes": { - type: "range" - } - }, { "type": "select", "appKey": "flavor", "defaultValue": "grape", - "label": "Favorite Flavor", + "label": "Select Menu", "options": [ { "label": "", "value": "" }, { "label": "Berry", "value": "berry" }, - { "label": "Grape", "value": "grape" }, + { "label": "This Option is Selected", "value": "grape" }, { "label": "Banana", "value": "banana" } ], "attributes": { diff --git a/dev/custom-fn.js b/dev/custom-fn.js index 4688283..259bc60 100644 --- a/dev/custom-fn.js +++ b/dev/custom-fn.js @@ -10,9 +10,9 @@ module.exports = function() { */ function toggleBackground() { if (this.get()) { - Clay.getItemByAppKey('background').enable(); + Clay.getItemByAppKey('colorTest').enable(); } else { - Clay.getItemByAppKey('background').disable(); + Clay.getItemByAppKey('colorTest').disable(); } } diff --git a/dist/clay.js b/dist/clay.js deleted file mode 100644 index c0ec8eb..0000000 --- a/dist/clay.js +++ /dev/null @@ -1,3 +0,0 @@ -/* Clay - https://github.com/pebble/clay - Version: 0.1.0 - Build Date: 2016-02-29T01:15:16.630Z */ -!function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var e;e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,e.clay=t()}}(function(){return function t(e,n,o){function r(a,c){if(!n[a]){if(!e[a]){var s="function"==typeof require&&require;if(!c&&s)return s(a,!0);if(i)return i(a,!0);var l=new Error("Cannot find module '"+a+"'");throw l.code="MODULE_NOT_FOUND",l}var u=n[a]={exports:{}};e[a][0].call(u.exports,function(t){var n=e[a][1][t];return r(n?n:t)},u,u.exports,t,e,n,o)}return n[a].exports}for(var i="function"==typeof require&&require,a=0;a0)return"{$circularReference:"+u+"}";if(c.push(t),Array.isArray(t))return"["+s(t.map(function(t){return a(t,e,n,l,c.slice())}))+"]";var f=Object.keys(t);return f.length?"{"+s(f.map(function(r){return(o(r)?r:JSON.stringify(r))+":"+a(t[r],e,n,l,c.slice())}))+"}":"{}"}var c=[];return a(t,e,void 0===n?" ":n||"",i||"",c)};var i=/^(abstract|boolean|break|byte|case|catch|char|class|const|continue|debugger|default|delete|do|double|else|enum|export|extends|false|final|finally|float|for|function|goto|if|implements|import|in|instanceof|int|interface|long|native|new|null|package|private|protected|public|return|short|static|super|switch|synchronized|this|throw|throws|transient|true|try|typeof|undefined|var|void|volatile|while|with)$/,a="\\/"===new RegExp("/").source},{}],2:[function(t,e,n){"use strict";e.exports={name:"checkboxgroup",template:t("../../templates/components/checkboxgroup.tpl"),style:t("../../styles/clay/components/checkboxgroup.scss"),manipulator:"checkboxgroup",defaults:{label:"",options:[],attributes:{}}}},{"../../styles/clay/components/checkboxgroup.scss":13,"../../templates/components/checkboxgroup.tpl":19}],3:[function(t,e,n){"use strict";e.exports={name:"color",template:t("../../templates/components/color.tpl"),style:t("../../styles/clay/components/color.scss"),manipulator:"color",defaults:{label:""},initialize:function(t){function e(t){if(t===!1)return"transparent";for("number"==typeof t&&(t=t.toString(16));t.length<6;)t="0"+t;return"#"+(r?i[t]:t)}for(var n=t.HTML,o=this,r=o.config.sunlight!==!1,i={"000000":"000000","000055":"001e41","0000aa":"004387","0000ff":"0068ca","005500":"2b4a2c","005555":"27514f","0055aa":"16638d","0055ff":"007dce","00aa00":"5e9860","00aa55":"5c9b72","00aaaa":"57a5a2","00aaff":"4cb4db","00ff00":"8ee391","00ff55":"8ee69e","00ffaa":"8aebc0","00ffff":"84f5f1",550000:"4a161b",550055:"482748","5500aa":"40488a","5500ff":"2f6bcc",555500:"564e36",555555:"545454","5555aa":"4f6790","5555ff":"4180d0","55aa00":"759a64","55aa55":"759d76","55aaaa":"71a6a4","55aaff":"69b5dd","55ff00":"9ee594","55ff55":"9de7a0","55ffaa":"9becc2","55ffff":"95f6f2",aa0000:"99353f",aa0055:"983e5a",aa00aa:"955694",aa00ff:"8f74d2",aa5500:"9d5b4d",aa5555:"9d6064",aa55aa:"9a7099",aa55ff:"9587d5",aaaa00:"afa072",aaaa55:"aea382",aaaaaa:"ababab",ffffff:"ffffff",aaaaff:"a7bae2",aaff00:"c9e89d",aaff55:"c9eaa7",aaffaa:"c7f0c8",aaffff:"c3f9f7",ff0000:"e35462",ff0055:"e25874",ff00aa:"e16aa3",ff00ff:"de83dc",ff5500:"e66e6b",ff5555:"e6727c",ff55aa:"e37fa7",ff55ff:"e194df",ffaa00:"f1aa86",ffaa55:"f1ad93",ffaaaa:"efb5b8",ffaaff:"ecc3eb",ffff00:"ffeeab",ffff55:"fff1b5",ffffaa:"fff6d3"},a=o.config.layout||[[!1,!1,"55ff00","aaff55",!1,"ffff55","ffffaa",!1,!1],[!1,"aaffaa","55ff55","00ff00","aaff00","ffff00","ffaa55","ffaaaa",!1],["55ffaa","00ff55","00aa00","55aa00","aaaa55","aaaa00","ffaa00","ff5500","ff5555"],["aaffff","00ffaa","00aa55","55aa55","005500","555500","aa5500","ff0000","ff0055"],[!1,"55aaaa","00aaaa","005555","ffffff","000000","aa5555","aa0000",!1],["55ffff","00ffff","00aaff","0055aa","aaaaaa","555555","550000","aa0055","ff55aa"],["55aaff","0055ff","0000ff","0000aa","000055","550055","aa00aa","ff00aa","ffaaff"],[!1,"5555aa","5555ff","5500ff","5500aa","aa00ff","ff00ff","ff55ff",!1],[!1,!1,!1,"aaaaff","aa55ff","aa55aa",!1,!1,!1]],c="",s=100/a[0].length,l=100/a.length,u=o.$element,f=0;f'}u.select(".color-box-container").add(n(c));var y=u.select(".value"),v=u.select(".picker-wrap"),k=o.$manipulatorTarget.get("disabled");u.select("label").on("click",function(t){k||v.set("show")}),o.on("change",function(){var t=o.get();y.set("$background-color",e(t)),u.select(".color-box").set("-selected"),u.select('.color-box[data-value="'+t+'"]').set("+selected")}),u.select(".color-box.selectable").on("click",function(t){o.set(parseInt(t.target.dataset.value,10)),v.set("-show")}),v.on("click",function(){v.set("-show")}),o.on("disabled",function(){k=!0}),o.on("enabled",function(){k=!1})}}},{"../../styles/clay/components/color.scss":14,"../../templates/components/color.tpl":20}],4:[function(t,e,n){"use strict";e.exports={name:"footer",template:t("../../templates/components/footer.tpl"),manipulator:"html"}},{"../../templates/components/footer.tpl":21}],5:[function(t,e,n){"use strict";e.exports={name:"heading",template:t("../../templates/components/heading.tpl"),manipulator:"html",defaults:{size:4}}},{"../../templates/components/heading.tpl":22}],6:[function(t,e,n){"use strict";e.exports={color:t("./color"),footer:t("./footer"),heading:t("./heading"),input:t("./input"),select:t("./select"),submit:t("./submit"),text:t("./text"),toggle:t("./toggle"),radiogroup:t("./radiogroup"),checkboxgroup:t("./checkboxgroup")}},{"./checkboxgroup":2,"./color":3,"./footer":4,"./heading":5,"./input":7,"./radiogroup":8,"./select":9,"./submit":10,"./text":11,"./toggle":12}],7:[function(t,e,n){"use strict";e.exports={name:"input",template:t("../../templates/components/input.tpl"),style:t("../../styles/clay/components/input.scss"),manipulator:"val",defaults:{label:"",attributes:{}}}},{"../../styles/clay/components/input.scss":15,"../../templates/components/input.tpl":23}],8:[function(t,e,n){"use strict";e.exports={name:"radiogroup",template:t("../../templates/components/radiogroup.tpl"),style:t("../../styles/clay/components/radiogroup.scss"),manipulator:"radiogroup",defaults:{label:"",options:[],attributes:{}}}},{"../../styles/clay/components/radiogroup.scss":16,"../../templates/components/radiogroup.tpl":24}],9:[function(t,e,n){"use strict";e.exports={name:"select",template:t("../../templates/components/select.tpl"),style:t("../../styles/clay/components/select.scss"),manipulator:"val",defaults:{label:"",options:[],attributes:{}},initialize:function(){var t=this,e=t.$element.select(".value");t.on("change",function(n){var o=t.$manipulatorTarget.select("option:checked").get("innerHTML");e.set("innerHTML",o)})}}},{"../../styles/clay/components/select.scss":17,"../../templates/components/select.tpl":25}],10:[function(t,e,n){"use strict";e.exports={name:"submit",template:t("../../templates/components/submit.tpl"),manipulator:"html",defaults:{attributes:{}}}},{"../../templates/components/submit.tpl":26}],11:[function(t,e,n){"use strict";e.exports={name:"text",template:t("../../templates/components/text.tpl"),manipulator:"html"}},{"../../templates/components/text.tpl":27}],12:[function(t,e,n){"use strict";e.exports={name:"toggle",template:t("../../templates/components/toggle.tpl"),style:t("../../styles/clay/components/toggle.scss"),manipulator:"checked",defaults:{label:"",attributes:{}}}},{"../../styles/clay/components/toggle.scss":18,"../../templates/components/toggle.tpl":28}],13:[function(t,e,n){e.exports=".component-checkbox { -webkit-tap-highlight-color: transparent; display: block; }\n\n.component-checkbox:active { background-color: transparent; }\n\n.component-checkbox > .label { display: block; padding-bottom: 0.35rem; }\n\n.component-checkbox .checkbox-group label { padding: 0.35rem 0; -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1); }\n\n.component-checkbox .checkbox-group label:active { background-color: rgba(255, 255, 255, 0.1); }\n\n.component-checkbox .checkbox-group .label { font-size: 0.9em; padding: 0 0.375rem; }\n\n.component-checkbox .checkbox-group input { opacity: 0; position: absolute; }\n\n.component-checkbox .checkbox-group i { display: block; position: relative; border-radius: 0.25rem; width: 1.4rem; height: 1.4rem; border: 0.11765rem solid #767676; -webkit-flex-shrink: 0; flex-shrink: 0; }\n\n.component-checkbox .checkbox-group input:checked ~ i { border-color: #ff4700; background: #ff4700; }\n\n.component-checkbox .checkbox-group input:checked ~ i:after { content: ''; box-sizing: border-box; -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; left: 0.35rem; top: -0.05rem; display: block; width: 0.5rem; height: 1rem; border: 0 solid #ffffff; border-right-width: 0.11765rem; border-bottom-width: 0.11765rem; }\n"},{}],14:[function(t,e,n){e.exports=".component-color .value { width: 2.2652rem; height: 1.4rem; border-radius: 0.7rem; box-shadow: #2f2f2f 0 0.1rem 0.1rem; }\n\n.component-color .picker-wrap { left: 0; top: 0; right: 0; bottom: 0; position: fixed; padding: 1rem; background: rgba(0, 0, 0, 0.7); opacity: 0; -webkit-transition: opacity 70ms ease-in 175ms; transition: opacity 70ms ease-in 175ms; pointer-events: none; z-index: 100; }\n\n.component-color .picker-wrap .picker { padding: 1rem; background: #f2f2f2; border-radius: 0.25rem; }\n\n.component-color .picker-wrap.show { -webkit-transition-delay: 0ms; transition-delay: 0ms; pointer-events: auto; opacity: 1; }\n\n.component-color .color-box-wrap { box-sizing: border-box; position: relative; height: 0; width: 100%; padding: 0 0 100% 0; margin: 0.6em 0 0; }\n\n.component-color .color-box-wrap .color-box-container { position: absolute; height: 99.97%; width: 100%; left: 0; top: 0; }\n\n.component-color .color-box-wrap .color-box-container .color-box { float: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }\n\n.component-color .color-box-wrap .color-box-container .color-box.rounded-tl { border-top-left-radius: 0.25rem; }\n\n.component-color .color-box-wrap .color-box-container .color-box.rounded-tr { border-top-right-radius: 0.25rem; }\n\n.component-color .color-box-wrap .color-box-container .color-box.rounded-bl { border-bottom-left-radius: 0.25rem; }\n\n.component-color .color-box-wrap .color-box-container .color-box.rounded-br { border-bottom-right-radius: 0.25rem; }\n\n.component-color .color-box-wrap .color-box-container .color-box.selected { -webkit-transform: scale(1.15); transform: scale(1.15); border-radius: 0.25rem; box-shadow: #111 0 0 0.24rem; position: relative; z-index: 100; }\n"},{}],15:[function(t,e,n){e.exports=".component-input { display: block; }\n\n.component-input .label { padding-bottom: 0.7rem; }\n\n.component-input .input { position: relative; min-width: 100%; margin-top: 0.7rem; margin-left: 0; }\n\n.component-input input { display: block; width: 100%; background: #333333; border-radius: 0.25rem; padding: 0.35rem 0.375rem; border: none; vertical-align: baseline; color: #ffffff; font-size: inherit; }\n\n.component-input input::-webkit-input-placeholder { color: #858585; }\n\n.component-input input::-moz-placeholder { color: #858585; }\n\n.component-input input:-moz-placeholder { color: #858585; }\n\n.component-input input:-ms-input-placeholder { color: #858585; }\n\n.component-input input:focus { border: none; box-shadow: none; }\n\n.component-input input:focus::-webkit-input-placeholder { color: #666666; }\n\n.component-input input:focus::-moz-placeholder { color: #666666; }\n\n.component-input input:focus:-moz-placeholder { color: #666666; }\n\n.component-input input:focus:-ms-input-placeholder { color: #666666; }\n"},{}],16:[function(t,e,n){e.exports=".component-radio { -webkit-tap-highlight-color: transparent; display: block; }\n\n.component-radio:active { background-color: transparent; }\n\n.component-radio > .label { display: block; padding-bottom: 0.35rem; }\n\n.component-radio .radio-group label { padding: 0.35rem 0; -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1); }\n\n.component-radio .radio-group label:active { background-color: rgba(255, 255, 255, 0.1); }\n\n.component-radio .radio-group .label { font-size: 0.9em; padding: 0 0.375rem; }\n\n.component-radio .radio-group input { opacity: 0; position: absolute; }\n\n.component-radio .radio-group i { display: block; position: relative; border-radius: 1.4rem; width: 1.4rem; height: 1.4rem; border: 2px solid #767676; -webkit-flex-shrink: 0; flex-shrink: 0; }\n\n.component-radio .radio-group input:checked ~ i { border-color: #ff4700; }\n\n.component-radio .radio-group input:checked ~ i:after { content: ''; display: block; position: absolute; left: 15%; right: 15%; top: 15%; bottom: 15%; border-radius: 1.4rem; background: #ff4700; }\n"},{}],17:[function(t,e,n){e.exports='.component-select { position: relative; }\n\n.component-select .value { position: relative; padding-right: 1.1rem; }\n\n.component-select .value:after { content: ""; position: absolute; right: 0; top: 50%; margin-top: -0.1rem; height: 0; width: 0; border-left: 0.425rem solid transparent; border-right: 0.425rem solid transparent; border-top: 0.425rem solid #ececec; }\n\n.component-select select { opacity: 0; position: absolute; display: block; left: 0; right: 0; top: 0; bottom: 0; background: #000; width: 100%; border: none; margin: 0; padding: 0; }\n'},{}],18:[function(t,e,n){e.exports=".component-toggle input { display: none; }\n\n.component-toggle .graphic { display: inline-block; position: relative; }\n\n.component-toggle .graphic .slide { display: block; border-radius: 1.05rem; height: 1.05rem; width: 2.2652rem; background: #2f2f2f; -webkit-transition: background-color 150ms linear; transition: background-color 150ms linear; }\n\n.component-toggle .graphic .marker { background: #ececec; width: 1.4rem; height: 1.4rem; border-radius: 1.4rem; position: absolute; left: 0; display: block; top: -0.175rem; -webkit-transition: -webkit-transform 150ms linear; transition: -webkit-transform 150ms linear; transition: transform 150ms linear; transition: transform 150ms linear, -webkit-transform 150ms linear; box-shadow: #2f2f2f 0 0.1rem 0.1rem; }\n\n.component-toggle input:checked + .graphic .slide { background: #993d19; }\n\n.component-toggle input:checked + .graphic .marker { background: #ff4700; -webkit-transform: translateX(0.8652rem); transform: translateX(0.8652rem); }\n"},{}],19:[function(t,e,n){e.exports='
\n {{{label}}}\n
\n {{each options}}\n \n {{/each}}\n
\n
\n'},{}],20:[function(t,e,n){e.exports='
\n \n
\n
\n
\n
\n
\n
\n
\n
\n'},{}],21:[function(t,e,n){e.exports='
\n'},{}],22:[function(t,e,n){e.exports='
\n \n
\n'},{}],23:[function(t,e,n){e.exports='\n'},{}],24:[function(t,e,n){e.exports='
\n {{{label}}}\n
\n {{each options}}\n \n {{/each}}\n
\n
\n'},{}],25:[function(t,e,n){e.exports='\n'},{}],26:[function(t,e,n){e.exports='
\n \n
\n'},{}],27:[function(t,e,n){e.exports='
\n

\n
\n'},{}],28:[function(t,e,n){e.exports='\n'},{}],29:[function(t,e,n){e.exports='
'; -},{}],"pebble-clay":[function(t,e,n){"use strict";function o(t,e,n){function o(){i.meta={activeWatchInfo:Pebble.getActiveWatchInfo&&Pebble.getActiveWatchInfo(),accountToken:Pebble.getAccountToken(),watchToken:Pebble.getWatchToken()}}function r(t){Array.isArray(t)?t.forEach(function(t){r(t)}):"section"===t.type?r(t.items):a[t.type]&&i.registerComponent(a[t.type])}var i=this;if(!Array.isArray(t))throw new Error("config must be an Array");if(e&&"function"!=typeof e)throw new Error('customFn must be a function or "null"');n=n||{},i.config=t,i.customFn=e||function(){},i.components={},i.meta={activeWatchInfo:null,accountToken:"",watchToken:""},n.autoHandleEvents!==!1&&"undefined"!=typeof Pebble?(Pebble.addEventListener("showConfiguration",function(){o(),Pebble.openURL(i.generateUrl())}),Pebble.addEventListener("webviewclosed",function(t){t&&t.response&&Pebble.sendAppMessage(i.getSettings(t.response),function(){console.log("Sent config data to Pebble")},function(t){console.log("Failed to send config data!"),console.log(JSON.stringify(t))})})):"undefined"!=typeof Pebble&&Pebble.addEventListener("ready",function(){o()}),r(i.config)}var r=t("./tmp/config-page.html"),i=t("tosource"),a=t("./src/scripts/components");o.prototype.registerComponent=function(t){this.components[t.name]=t},o.prototype.generateUrl=function(){var t={},e=!Pebble||"pypkjs"===Pebble.platform,n=e?"$$$RETURN_TO$$$":"pebblejs://close#";try{t=JSON.parse(localStorage.getItem("clay-settings"))||{}}catch(a){console.error(a.toString())}var c=r.replace("$$RETURN_TO$$",n).replace("$$CUSTOM_FN$$",i(this.customFn)).replace("$$CONFIG$$",i(this.config)).replace("$$SETTINGS$$",i(t)).replace("$$COMPONENTS$$",i(this.components)).replace("$$META$$",i(this.meta));return e?o.encodeDataUri(c,"http://clay.pebble.com.s3-website-us-west-2.amazonaws.com/#"):o.encodeDataUri(c)},o.prototype.getSettings=function(t){var e={};try{e=JSON.parse(decodeURIComponent(t))}catch(n){throw new Error("The provided response was not valid JSON")}return localStorage.setItem("clay-settings",JSON.stringify(e)),e},o.encodeDataUri=function(t,e){if(e="undefined"!=typeof e?e:"data:text/html;base64,",window.btoa)return e+encodeURIComponent(window.btoa(t));var n="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";t=String(t);var o,r,i,a,c,s,l,u=0,f=[];if(/[^\x00-\xFF]/.test(t))throw Error("InvalidCharacterError");for(;u>2,c=(3&o)<<4|r>>4,s=(15&r)<<2|i>>6,l=63&i,u===t.length+2?(s=64,l=64):u===t.length+1&&(l=64),f.push(n.charAt(a),n.charAt(c),n.charAt(s),n.charAt(l));return e+encodeURIComponent(f.join(""))},e.exports=o},{"./src/scripts/components":6,"./tmp/config-page.html":29,tosource:1}]},{},["pebble-clay"])("pebble-clay")}); \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index a65f2a8..5cad718 100755 --- a/gulpfile.js +++ b/gulpfile.js @@ -103,6 +103,7 @@ gulp.task('dev-js', ['js', 'sass'], function() { .transform(stringify(stringifyOptions)) .transform('deamdify') .transform(sassify, sassifyOptions) + .transform(autoprefixify, autoprefixerOptions) .bundle() .pipe(source('dev.js')) .pipe(gulp.dest('./tmp/')); diff --git a/package.json b/package.json index 527e9c3..124eeb7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pebble-clay", - "version": "0.1.0", + "version": "0.1.1", "description": "Pebble Config Framework", "main": "dist/clay.js", "directories": { diff --git a/src/images/example.png b/src/images/example.png index fc0856f..3a96913 100644 Binary files a/src/images/example.png and b/src/images/example.png differ diff --git a/src/scripts/components/checkboxgroup.js b/src/scripts/components/checkboxgroup.js index a327bef..b894745 100644 --- a/src/scripts/components/checkboxgroup.js +++ b/src/scripts/components/checkboxgroup.js @@ -8,6 +8,7 @@ module.exports = { defaults: { label: '', options: [], + description: '', attributes: {} } }; diff --git a/src/scripts/components/color.js b/src/scripts/components/color.js index d12932c..cebb6f0 100644 --- a/src/scripts/components/color.js +++ b/src/scripts/components/color.js @@ -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; diff --git a/src/scripts/components/input.js b/src/scripts/components/input.js index eaf8050..45fce5f 100644 --- a/src/scripts/components/input.js +++ b/src/scripts/components/input.js @@ -7,6 +7,7 @@ module.exports = { manipulator: 'val', defaults: { label: '', + description: '', attributes: {} } }; diff --git a/src/scripts/components/radiogroup.js b/src/scripts/components/radiogroup.js index 771c1cd..5cd436b 100644 --- a/src/scripts/components/radiogroup.js +++ b/src/scripts/components/radiogroup.js @@ -8,6 +8,7 @@ module.exports = { defaults: { label: '', options: [], + description: '', attributes: {} } }; diff --git a/src/scripts/components/select.js b/src/scripts/components/select.js index 7cfd71e..ebd3229 100644 --- a/src/scripts/components/select.js +++ b/src/scripts/components/select.js @@ -8,6 +8,7 @@ module.exports = { defaults: { label: '', options: [], + description: '', attributes: {} }, initialize: function() { @@ -15,8 +16,10 @@ module.exports = { var $value = self.$element.select('.value'); - self.on('change', function(ev) { - var value = self.$manipulatorTarget.select('option:checked').get('innerHTML'); + self.on('change', function() { + var selectedIndex = self.$manipulatorTarget.get('selectedIndex'); + var $options = self.$manipulatorTarget.select('option'); + var value = $options[selectedIndex] && $options[selectedIndex].innerHTML; $value.set('innerHTML', value); }); } diff --git a/src/scripts/components/submit.js b/src/scripts/components/submit.js index 23ef4df..18c684c 100644 --- a/src/scripts/components/submit.js +++ b/src/scripts/components/submit.js @@ -3,6 +3,7 @@ module.exports = { name: 'submit', template: require('../../templates/components/submit.tpl'), + style: require('../../styles/clay/components/submit.scss'), manipulator: 'html', defaults: { attributes: {} diff --git a/src/scripts/components/toggle.js b/src/scripts/components/toggle.js index f0b2d56..ca4eace 100644 --- a/src/scripts/components/toggle.js +++ b/src/scripts/components/toggle.js @@ -7,6 +7,7 @@ module.exports = { manipulator: 'checked', defaults: { label: '', + description: '', attributes: {} } }; diff --git a/src/scripts/lib/manipulators.js b/src/scripts/lib/manipulators.js index 5a54cde..9f0000b 100755 --- a/src/scripts/lib/manipulators.js +++ b/src/scripts/lib/manipulators.js @@ -18,6 +18,22 @@ function enable() { return this.trigger('enabled'); } +/** + * @returns {ClayEvents} + */ +function hide() { + this.$element.set('+hide'); + return this.trigger('hide'); +} + +/** + * @returns {ClayEvents} + */ +function show() { + this.$element.set('-hide'); + return this.trigger('show'); +} + module.exports = { html: { get: function() { @@ -26,7 +42,9 @@ module.exports = { set: function(value) { this.$manipulatorTarget.set('innerHTML', value); return this.trigger('change'); - } + }, + hide: hide, + show: show }, val: { get: function() { @@ -37,7 +55,9 @@ module.exports = { return this.trigger('change'); }, disable: disable, - enable: enable + enable: enable, + hide: hide, + show: show }, checked: { get: function() { @@ -48,7 +68,9 @@ module.exports = { return this.trigger('change'); }, disable: disable, - enable: enable + enable: enable, + hide: hide, + show: show }, radiogroup: { get: function() { @@ -61,7 +83,9 @@ module.exports = { return this.trigger('change'); }, disable: disable, - enable: enable + enable: enable, + hide: hide, + show: show }, checkboxgroup: { get: function() { @@ -83,7 +107,9 @@ module.exports = { return self.trigger('change'); }, disable: disable, - enable: enable + enable: enable, + hide: hide, + show: show }, color: { get: function() { @@ -99,6 +125,8 @@ module.exports = { return this.trigger('change'); }, disable: disable, - enable: enable + enable: enable, + hide: hide, + show: show } }; diff --git a/src/styles/clay/_base.scss b/src/styles/clay/_base.scss index 6a468fa..aaa67a6 100644 --- a/src/styles/clay/_base.scss +++ b/src/styles/clay/_base.scss @@ -17,7 +17,24 @@ html, body { body { background-color: $color-gray-2; - padding: $item-spacing-v $item-spacing-h; + padding: 0 $item-spacing-h $item-spacing-v; +} + +em { + font-style: italic; +} + +strong { + @include font-pfdin(medium); + color: $color-orange; +} + +a { + color: $color-gray-8; + + &:hover { + color: inherit; + } } h1, h2, h3, h4 { @@ -54,6 +71,7 @@ label { display: flex; justify-content: space-between; align-items: center; + padding: $item-spacing-v $item-spacing-h; .input { white-space: nowrap; @@ -83,35 +101,43 @@ label { } } -.component { - padding-bottom: $item-spacing-v; +.hide { + display: none !important; +} + +.tap-highlight { @include tap-highlight(); +} + +.component { + padding-top: $item-spacing-v; &.disabled { - opacity: 0.25; pointer-events: none; + > * { + opacity: 0.25; + } } } .section { background: $color-gray-4; border-radius: 0.25rem; - margin-bottom: 1rem; box-shadow: $color-gray-1 0 0.15rem 0.25rem; - .component { - padding-top: $item-spacing-v; + > .component { + padding-bottom: $item-spacing-v; padding-right: $item-spacing-h; padding-left: $item-spacing-h; position: relative; + margin-top: 1rem; - &:last-child, - &:first-child { - padding-bottom: $item-spacing-v; - - &:after { - display: none; - } + &:not(.hide) ~ .component { + margin-top: 0; + } + + &:first-child:after { + display: none; } &:after { @@ -119,7 +145,7 @@ label { background: $color-gray-6; display: block; position: absolute; - bottom: 0; + top: 0; left: $item-spacing-h / 2; right: $item-spacing-h / 2; height: 1px; @@ -127,72 +153,41 @@ label { } } - .component-heading:first-child { + // don't show the separator for the first non-hidden item + > .component:not(.hide):after { + display: none; + } + + > .component:not(.hide) ~ .component:not(.hide):after { + display: block; + } + + > .component-heading:first-child { background: $color-gray-3; border-radius: $border-radius $border-radius 0 0; + + // don't show the separator for the first non-hidden item after the heading + &:after, + ~ .component:not(.hide):after { + display: none; + } + + ~ .component:not(.hide) ~ .component:not(.hide):after { + display: block; + } } } -strong { - @include font-pfdin(medium); - color: $color-orange; -} - -a { - color: $color-gray-8; - - &:hover { - color: inherit; - } +.description { + padding: 0 $item-spacing-h $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; - } - - } - } - - } } + diff --git a/src/styles/clay/_vars.scss b/src/styles/clay/_vars.scss index 7982216..391ecbd 100644 --- a/src/styles/clay/_vars.scss +++ b/src/styles/clay/_vars.scss @@ -34,14 +34,7 @@ $color-gray-9: #a4a4a4 ; $color-gray-10: #ececec; $color-gray-11: #f2f2f2; - - - -$global-margin: 55px; -$form-margin: 25px; $button-padding: 0.7rem; $button-padding-ios: 0.6rem; -$button-line-height: 13px; -$footer-height-large: 90px; $box-shadow-small-components: $color-gray-1 0 0.1rem 0.1rem; diff --git a/src/styles/clay/components/checkboxgroup.scss b/src/styles/clay/components/checkboxgroup.scss index 88585a7..651a470 100644 --- a/src/styles/clay/components/checkboxgroup.scss +++ b/src/styles/clay/components/checkboxgroup.scss @@ -3,9 +3,11 @@ .component-checkbox { - @include tap-highlight(rgba(0,0,0,0)); display: block; + .section & { + padding-right: $item-spacing-h / 2; + } > .label { display: block; @@ -14,14 +16,14 @@ .checkbox-group { + padding-bottom: $item-spacing-v / 2; + label { - padding: $item-spacing-v / 2 0; - @include tap-highlight(); + padding: $item-spacing-v / 2 $item-spacing-h / 2; } .label { font-size: 0.9em; - padding: 0 $item-spacing-h / 2; } input { @@ -39,7 +41,7 @@ flex-shrink: 0; } - input:checked ~ i { + input:checked + i { border-color: $color-orange; background: $color-orange; @@ -59,6 +61,10 @@ } } + } + .description { + padding-left: 0; + padding-right: 0; } } diff --git a/src/styles/clay/components/color.scss b/src/styles/clay/components/color.scss index 2d0d9d9..a6c2752 100644 --- a/src/styles/clay/components/color.scss +++ b/src/styles/clay/components/color.scss @@ -2,11 +2,16 @@ .component-color { + .section & { + padding: 0; + } + .value { width: $small-component-width; height: $base-height; border-radius: $base-height / 2; box-shadow: $box-shadow-small-components; + display: block; } .picker-wrap { diff --git a/src/styles/clay/components/input.scss b/src/styles/clay/components/input.scss index af9066e..593683e 100644 --- a/src/styles/clay/components/input.scss +++ b/src/styles/clay/components/input.scss @@ -2,7 +2,13 @@ .component-input { - display: block; + .section & { + padding: 0; + } + + label { + display: block; + } .label { padding-bottom: $item-spacing-v; diff --git a/src/styles/clay/components/radiogroup.scss b/src/styles/clay/components/radiogroup.scss index 2db5ea3..a1578e0 100644 --- a/src/styles/clay/components/radiogroup.scss +++ b/src/styles/clay/components/radiogroup.scss @@ -3,9 +3,11 @@ .component-radio { - @include tap-highlight(rgba(0,0,0,0)); display: block; + .section & { + padding-right: $item-spacing-h / 2; + } > .label { display: block; @@ -14,14 +16,14 @@ .radio-group { + padding-bottom: $item-spacing-v / 2; + label { - padding: $item-spacing-v / 2 0; - @include tap-highlight(); + padding: $item-spacing-v / 2 $item-spacing-h / 2; } .label { font-size: 0.9em; - padding: 0 $item-spacing-h / 2; } input { @@ -39,7 +41,7 @@ flex-shrink: 0; } - input:checked ~ i { + input:checked + i { border-color: $color-orange; &:after { @@ -58,4 +60,9 @@ } } + + .description { + padding-left: 0; + padding-right: 0; + } } diff --git a/src/styles/clay/components/select.scss b/src/styles/clay/components/select.scss index 1b43d93..2e48ad9 100644 --- a/src/styles/clay/components/select.scss +++ b/src/styles/clay/components/select.scss @@ -2,12 +2,20 @@ @import "clay"; .component-select { - position: relative; + + .section & { + padding: 0; + } + + label { + position: relative; + } .value { $triangle-size: 0.85rem; position: relative; padding-right: $triangle-size + 0.25rem; + display: block; &:after { content: ""; @@ -15,7 +23,7 @@ right: 0; top: 50%; margin-top: -0.1rem; - @include triangle($triangle-size, $color-gray-10, down); + @include triangle($triangle-size, $color-orange, down); } } diff --git a/src/styles/clay/components/submit.scss b/src/styles/clay/components/submit.scss new file mode 100644 index 0000000..74b11f4 --- /dev/null +++ b/src/styles/clay/components/submit.scss @@ -0,0 +1,3 @@ +.component-submit { + text-align: center; +} diff --git a/src/styles/clay/components/toggle.scss b/src/styles/clay/components/toggle.scss index 6f92f7a..92c9e68 100644 --- a/src/styles/clay/components/toggle.scss +++ b/src/styles/clay/components/toggle.scss @@ -6,6 +6,10 @@ $slide-width: $small-component-width; $marker-diameter: $base-height; + .section & { + padding: 0; + } + input { display: none; // @todo make sure this doesn't mess up interactivity on iOS } diff --git a/src/styles/clay/elements/_button.scss b/src/styles/clay/elements/_button.scss index 8912034..6ece43c 100644 --- a/src/styles/clay/elements/_button.scss +++ b/src/styles/clay/elements/_button.scss @@ -9,7 +9,7 @@ button, font-size: 1rem; line-height: 1; border: none; - display: block; + display: inline-block; color: $color-white; min-width: 12rem; diff --git a/src/templates/components/checkboxgroup.tpl b/src/templates/components/checkboxgroup.tpl index 203e2d2..2a7906b 100755 --- a/src/templates/components/checkboxgroup.tpl +++ b/src/templates/components/checkboxgroup.tpl @@ -2,7 +2,7 @@ {{{label}}}
{{each options}} -
+ {{if description}} +
{{{description}}}
+ {{/if}} diff --git a/src/templates/components/color.tpl b/src/templates/components/color.tpl index 9e985c6..043b3be 100755 --- a/src/templates/components/color.tpl +++ b/src/templates/components/color.tpl @@ -1,5 +1,5 @@
-