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

Add generic button component

Browse Source
This commit is contained in:
Keegan
2016-03-06 12:31:25 +11:00
parent bdcd820f7c
commit a1df49623d
13 changed files with 128 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+48 -10
View File
@@ -108,7 +108,7 @@ Sections help divide up the page into logical groups of items. It is recommended
### Heading
**Manipulator:** `html`
**Manipulator:** [`html`](#html)
Headings can be used in anywhere and can have their size adjusted to suit the context. If you place a heading item at the first position of a section's `items` array then it will automatically be styled as the header for that section.
@@ -138,7 +138,7 @@ Headings can be used in anywhere and can have their size adjusted to suit the co
### Text
**Manipulator:** `html`
**Manipulator:** [`html`](#html)
Text is used to provide descriptions of sections or to explain complex parts of your page. Feel free to add any extra HTML you require to the `defaultValue`
@@ -165,7 +165,7 @@ Text is used to provide descriptions of sections or to explain complex parts of
### Input
**Manipulator:** `val`
**Manipulator:** [`val`](#val)
Standard text input field.
@@ -203,7 +203,7 @@ Standard text input field.
#### Toggle
**Manipulator:** `checked`
**Manipulator:** [`checked`](#checked)
Switch for a single item.
@@ -238,7 +238,7 @@ Switch for a single item.
#### Select
**Manipulator:** `val`
**Manipulator:** [`val`](#val)
A dropdown menu containing multiple options.
@@ -291,7 +291,7 @@ A dropdown menu containing multiple options.
#### Color
**Manipulator:** `color`
**Manipulator:** [`color`](#color)
A color picker containing the 64 supported colors on Basalt and Chalk.
@@ -323,7 +323,7 @@ A color picker containing the 64 supported colors on Basalt and Chalk.
#### RadioGroup
**Manipulator:** `radiogroup`
**Manipulator:** [`radiogroup`](#radiogroup)
A list of options allowing the user can only choose one option to submit.
@@ -368,7 +368,7 @@ A list of options allowing the user can only choose one option to submit.
#### CheckboxGroup
**Manipulator:** `checkboxgroup`
**Manipulator:** [`checkboxgroup`](#checkboxgroup)
A list of options where a user may choose more than one option to submit.
@@ -412,9 +412,37 @@ A list of options where a user may choose more than one option to submit.
---
### Generic Button
**Manipulator:** [`button`](#button)
The submit button for the page. You **MUST** include this component somewhere in the config page (traditionally at the bottom) or users will not be able to save the form.
##### Properties
| Property | Type | Description |
|----------|------|-------------|
| type | string | Set to `button`. |
| defaultValue | string | The text displayed on the button. |
| primary | boolean | If `true` the button will be orange, if `false`, the button will be gray (defaults to `false`)|
| attributes | object | An object containing HTML attributes to set on the input field. |
| description | string | Optional sub-text to include below the component |
##### Example
```javascript
{
"type": "button",
"primary": true,
"defaultValue": "Send"
}
```
---
### Submit
**Manipulator:** `html`
**Manipulator:** [`button`](#button)
The submit button for the page. You **MUST** include this component somewhere in the config page (traditionally at the bottom) or users will not be able to save the form.
@@ -440,7 +468,6 @@ The submit button for the page. You **MUST** include this component somewhere in
### Coming Soon
- Range Slider
- Generic Button
- Tabs
- Footer
- Dynamic + draggable list
@@ -464,6 +491,17 @@ Many of these methods fire an event when the method is called. You can listen fo
| `.hide()` | `ClayItem` | `hide` | Hides the item |
| `.show()` | `ClayItem` | `show` | Shows the item |
#### button
| 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. |
| `.disable()` | `ClayItem` | `disabled` | Prevents this item from being clicked by the user. |
| `.enable()` | `ClayItem` | `enabled` | Allows this item to be clicked by the user. |
| `.hide()` | `ClayItem` | `hide` | Hides the item |
| `.show()` | `ClayItem` | `show` | Shows the item |
#### val
| Method | Returns | Event Fired | Description |
dev/config.js
+8
View File
@@ -50,6 +50,14 @@ module.exports = [
"defaultValue": "00FF00",
"label": "Sunny Color Picker",
"sunlight": true
},
{
type: 'button',
id: 'testButton',
primary: false,
defaultValue: 'Generic Button',
description: 'This is a generic button. ' +
'You can listen for standard events like "click"'
}
]
},
src/images/example.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 116 KiB

After

Width:  |  Height:  |  Size: 124 KiB

src/scripts/components/button.js
+13
View File
@@ -0,0 +1,13 @@
'use strict';
module.exports = {
name: 'button',
template: require('../../templates/components/button.tpl'),
style: require('../../styles/clay/components/button.scss'),
manipulator: 'button',
defaults: {
primary: false,
attributes: {},
description: ''
}
};
src/scripts/components/index.js
+2 -1
View File
@@ -10,5 +10,6 @@ module.exports = {
text: require('./text'),
toggle: require('./toggle'),
radiogroup: require('./radiogroup'),
checkboxgroup: require('./checkboxgroup')
checkboxgroup: require('./checkboxgroup'),
button: require('./button')
};
src/scripts/components/submit.js
+1 -1
View File
@@ -4,7 +4,7 @@ module.exports = {
name: 'submit',
template: require('../../templates/components/submit.tpl'),
style: require('../../styles/clay/components/submit.scss'),
manipulator: 'html',
manipulator: 'button',
defaults: {
attributes: {}
}
src/scripts/lib/manipulators.js
+13
View File
@@ -46,6 +46,19 @@ module.exports = {
hide: hide,
show: show
},
button: {
get: function() {
return this.$manipulatorTarget.get('innerHTML');
},
set: function(value) {
this.$manipulatorTarget.set('innerHTML', value);
return this.trigger('change');
},
disable: disable,
enable: enable,
hide: hide,
show: show
},
val: {
get: function() {
return this.$manipulatorTarget.get('value');
src/styles/clay/_base.scss
+1
View File
@@ -183,6 +183,7 @@ label {
padding: 0 $item-spacing-h $item-spacing-v ;
@include font-size(0.9);
color: $color-gray-9;
text-align: left;
}
.inputs {
src/styles/clay/_vars.scss
+2 -2
View File
@@ -34,7 +34,7 @@ $color-gray-9: #a4a4a4 ;
$color-gray-10: #ececec;
$color-gray-11: #f2f2f2;
$button-padding: 0.7rem;
$button-padding-ios: 0.6rem;
$button-padding: 0.6rem;
$button-padding-ios: 0.5rem;
$box-shadow-small-components: $color-gray-1 0 0.1rem 0.1rem;
src/styles/clay/components/button.scss
+12
View File
@@ -0,0 +1,12 @@
.component-button {
text-align: center;
.section & {
padding-bottom: 0;
}
.description {
padding-left: 0;
padding-right: 0;
}
}
src/styles/clay/elements/_button.scss
+7 -29
View File
@@ -3,52 +3,30 @@
button,
.button {
@include font-pfdin(medium);
@include font-size(1);
text-transform: uppercase;
background-color: $color-gray-4;
background-color: $color-gray-7;
border-radius: $border-radius;
font-size: 1rem;
line-height: 1;
border: none;
display: inline-block;
color: $color-white;
min-width: 12rem;
text-align: center;
margin: 0 auto;
-webkit-tap-highlight-color: rgba(0,0,0,0);
margin: 0 auto $item-spacing-v;
padding: $button-padding;
@include tap-highlight($color-gray-8);
.platform-ios & {
padding: $button-padding-ios;
}
&:disabled {
background-color: $color-gray-3;
color: $color-gray-8;
}
&:not(:disabled):active {
background-color: $color-gray-8;
}
&.orange, &[type="submit"] {
&.primary, &[type="submit"] {
background-color: $color-orange;
&:disabled {
background-color: $color-orange-dark;
color: $color-gray-3;
@include tap-highlight($color-red);
}
&:not(:disabled):active {
background-color: $color-red;
}
}
&.light-grey {
background-color: $color-gray-5;
}
}
a.button {
src/templates/components/button.tpl
Executable
+11
View File
@@ -0,0 +1,11 @@
<div class="component component-button">
<button
type="button"
data-manipulator-target
class="{{primary ? 'primary' : ''}}"
{{each key: attributes}}{{key}}="{{this}}"{{/each}}
></button>
{{if description}}
<div class="description">{{{description}}}</div>
{{/if}}
</div>
test/spec/lib/manipulators.js
+10
View File
@@ -139,10 +139,20 @@ describe('manipulators', function() {
describe('html', function() {
testSetGet('text', 'test123');
testSetGet('button', '<span>some HTML</span>');
testShow('text');
testHide('text');
});
describe('button', function() {
testSetGet('button', 'test123');
testSetGet('button', '<span>some HTML</span>');
testDisable('button');
testEnable('button');
testShow('button');
testHide('button');
});
describe('val', function() {
testSetGet('input', 'test321');
testDisable('input');