mirror of
https://github.com/pebble-dev/clay.git
synced 2026-08-29 13:26:59 -04:00
Merge remote-tracking branch 'origin/master' into #6/show-hide-items
# Conflicts: # dev/custom-fn.js # src/styles/clay/_base.scss
This commit is contained in:
Keegan
@@ -10,6 +10,7 @@
|
||||
window.claySettings = $$SETTINGS$$;
|
||||
window.customFn = $$CUSTOM_FN$$;
|
||||
window.clayComponents = $$COMPONENTS$$;
|
||||
window.clayMeta = $$META$$;
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -15,8 +15,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);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -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: {}
|
||||
|
||||
@@ -11,6 +11,7 @@ var settings = _.extend({}, window.claySettings || {});
|
||||
var returnTo = window.returnTo || 'pebblejs://close#';
|
||||
var customFn = window.customFn || function() {};
|
||||
var clayComponents = window.clayComponents || {};
|
||||
var clayMeta = window.clayMeta || {};
|
||||
|
||||
var platform = window.navigator.userAgent.match(/android/i) ? 'android' : 'ios';
|
||||
document.documentElement.classList.add('platform-' + platform);
|
||||
@@ -21,7 +22,7 @@ _.eachObj(clayComponents, function(key, component) {
|
||||
});
|
||||
|
||||
var $mainForm = $('#main-form');
|
||||
var clayConfig = new ClayConfig(settings, config, $mainForm);
|
||||
var clayConfig = new ClayConfig(settings, config, $mainForm, clayMeta);
|
||||
|
||||
// add listeners here
|
||||
$mainForm.on('submit', function() {
|
||||
|
||||
@@ -26,9 +26,10 @@ var manipulators = require('./manipulators');
|
||||
* @param {Object} settings - setting that were set from a previous session
|
||||
* @param {Array|Object} config
|
||||
* @param {M} $rootContainer
|
||||
* @param {Object} meta
|
||||
* @constructor
|
||||
*/
|
||||
function ClayConfig(settings, config, $rootContainer) {
|
||||
function ClayConfig(settings, config, $rootContainer, meta) {
|
||||
var self = this;
|
||||
|
||||
var _settings = _.copyObj(settings);
|
||||
@@ -95,6 +96,8 @@ function ClayConfig(settings, config, $rootContainer) {
|
||||
return true;
|
||||
}
|
||||
|
||||
self.meta = meta;
|
||||
|
||||
self.EVENTS = {
|
||||
/**
|
||||
* Called before framework has initialized. This is when you would attach your
|
||||
@@ -183,7 +186,6 @@ function ClayConfig(settings, config, $rootContainer) {
|
||||
|
||||
// expose the config to allow developers to update it before the build is run
|
||||
self.config = config;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -100,6 +100,10 @@ label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tap-highlight {
|
||||
@include tap-highlight();
|
||||
}
|
||||
|
||||
.component {
|
||||
padding-bottom: $item-spacing-v;
|
||||
|
||||
@@ -124,10 +128,10 @@ label {
|
||||
&:last-child,
|
||||
&:first-child {
|
||||
padding-bottom: $item-spacing-v;
|
||||
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:after {
|
||||
@@ -146,6 +150,10 @@ label {
|
||||
.component-heading:first-child {
|
||||
background: $color-gray-3;
|
||||
border-radius: $border-radius $border-radius 0 0;
|
||||
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -163,7 +171,7 @@ label {
|
||||
.input {
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
|
||||
.input {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@@ -3,10 +3,8 @@
|
||||
|
||||
.component-checkbox {
|
||||
|
||||
@include tap-highlight(rgba(0,0,0,0));
|
||||
display: block;
|
||||
|
||||
|
||||
> .label {
|
||||
display: block;
|
||||
padding-bottom: $item-spacing-v / 2;
|
||||
@@ -16,7 +14,6 @@
|
||||
|
||||
label {
|
||||
padding: $item-spacing-v / 2 0;
|
||||
@include tap-highlight();
|
||||
}
|
||||
|
||||
.label {
|
||||
@@ -39,7 +36,7 @@
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
input:checked ~ i {
|
||||
input:checked + i {
|
||||
border-color: $color-orange;
|
||||
background: $color-orange;
|
||||
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
height: $base-height;
|
||||
border-radius: $base-height / 2;
|
||||
box-shadow: $box-shadow-small-components;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.picker-wrap {
|
||||
|
||||
@@ -3,10 +3,8 @@
|
||||
|
||||
.component-radio {
|
||||
|
||||
@include tap-highlight(rgba(0,0,0,0));
|
||||
display: block;
|
||||
|
||||
|
||||
> .label {
|
||||
display: block;
|
||||
padding-bottom: $item-spacing-v / 2;
|
||||
@@ -16,7 +14,6 @@
|
||||
|
||||
label {
|
||||
padding: $item-spacing-v / 2 0;
|
||||
@include tap-highlight();
|
||||
}
|
||||
|
||||
.label {
|
||||
@@ -39,7 +36,7 @@
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
input:checked ~ i {
|
||||
input:checked + i {
|
||||
border-color: $color-orange;
|
||||
|
||||
&:after {
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
$triangle-size: 0.85rem;
|
||||
position: relative;
|
||||
padding-right: $triangle-size + 0.25rem;
|
||||
display: block;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
.component-submit {
|
||||
text-align: center;
|
||||
}
|
||||
@@ -9,7 +9,7 @@ button,
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
border: none;
|
||||
display: block;
|
||||
display: inline-block;
|
||||
|
||||
color: $color-white;
|
||||
min-width: 12rem;
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<span class="label">{{{label}}}</span>
|
||||
<div class="checkbox-group">
|
||||
{{each options}}
|
||||
<label>
|
||||
<label class="tap-highlight">
|
||||
<span class="label">{{{this.label}}}</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="component component-color">
|
||||
<div class="component component-color tap-highlight">
|
||||
<label>
|
||||
<input
|
||||
data-manipulator-target
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<label class="component component-input">
|
||||
<label class="component component-input tap-highlight">
|
||||
<span class="label">{{{label}}}</span>
|
||||
<span class="input">
|
||||
<input
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<span class="label">{{{label}}}</span>
|
||||
<div class="radio-group">
|
||||
{{each options}}
|
||||
<label>
|
||||
<label class="tap-highlight">
|
||||
<span class="label">{{{this.label}}}</span>
|
||||
<input
|
||||
type="radio"
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<label class="component component-select">
|
||||
<label class="component component-select tap-highlight">
|
||||
<span class="label">{{{label}}}</span>
|
||||
<span class="value"></span>
|
||||
<select data-manipulator-target {{each key: attributes}}{{key}}="{{this}}"{{/each}}>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="component component-button">
|
||||
<div class="component component-submit">
|
||||
<button
|
||||
data-manipulator-target
|
||||
type="submit"
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<label class="component component-toggle">
|
||||
<label class="component component-toggle tap-highlight">
|
||||
<span class="label">{{{label}}}</span>
|
||||
<span class="input">
|
||||
<input
|
||||
|
||||
Reference in New Issue
Block a user