From 41334698bd7179b57fe5959152f948d93b3478aa Mon Sep 17 00:00:00 2001 From: Keegan Date: Tue, 9 Feb 2016 13:40:56 -0800 Subject: [PATCH] make Clay work with phone apps --- gulpfile.js | 58 ++++++---- index.js | 50 +++++--- package.json | 5 + src/config-page.html | 5 +- src/scripts/components/color.js | 107 ++++++++++++++++++ src/scripts/components/footer.js | 10 ++ src/scripts/components/heading.js | 11 ++ src/scripts/components/index.js | 12 ++ src/scripts/components/input.js | 12 ++ src/scripts/components/select.js | 22 ++++ src/scripts/components/submit.js | 10 ++ src/scripts/components/text.js | 10 ++ src/scripts/components/toggle.js | 11 ++ src/scripts/config-page.js | 15 ++- src/scripts/lib/clay-config.js | 10 +- src/scripts/lib/clay-events.js | 4 +- src/scripts/lib/clay-item.js | 2 +- src/scripts/vendor/autoprefixify.js | 54 +++++++++ src/scripts/vendor/{minified => }/minified.js | 0 src/styles/{clay.scss => _clay.scss} | 0 src/styles/clay/_base.scss | 3 +- src/styles/clay/components/color.scss | 91 +++++++++++++++ src/styles/clay/components/input.scss | 41 +++++++ src/styles/clay/components/select.scss | 36 ++++++ src/styles/clay/components/toggle.scss | 51 +++++++++ src/styles/clay/elements/_button.scss | 3 +- src/templates/components/color.tpl | 17 +++ src/templates/components/footer.tpl | 5 + src/templates/components/heading.tpl | 3 + src/templates/components/input.tpl | 9 ++ src/templates/components/select.tpl | 9 ++ src/templates/components/submit.tpl | 9 ++ src/templates/components/text.tpl | 3 + src/templates/components/toggle.tpl | 14 +++ test/fixture.js | 6 +- test/spec/lib/clay-config.js | 2 +- test/spec/lib/clay-events.js | 4 +- test/spec/lib/clay-item.js | 2 +- 38 files changed, 655 insertions(+), 61 deletions(-) create mode 100644 src/scripts/components/color.js create mode 100644 src/scripts/components/footer.js create mode 100644 src/scripts/components/heading.js create mode 100644 src/scripts/components/index.js create mode 100644 src/scripts/components/input.js create mode 100644 src/scripts/components/select.js create mode 100644 src/scripts/components/submit.js create mode 100644 src/scripts/components/text.js create mode 100644 src/scripts/components/toggle.js create mode 100644 src/scripts/vendor/autoprefixify.js rename src/scripts/vendor/{minified => }/minified.js (100%) rename src/styles/{clay.scss => _clay.scss} (100%) create mode 100644 src/styles/clay/components/color.scss create mode 100644 src/styles/clay/components/input.scss create mode 100644 src/styles/clay/components/select.scss create mode 100644 src/styles/clay/components/toggle.scss create mode 100755 src/templates/components/color.tpl create mode 100755 src/templates/components/footer.tpl create mode 100755 src/templates/components/heading.tpl create mode 100755 src/templates/components/input.tpl create mode 100755 src/templates/components/select.tpl create mode 100755 src/templates/components/submit.tpl create mode 100644 src/templates/components/text.tpl create mode 100755 src/templates/components/toggle.tpl diff --git a/gulpfile.js b/gulpfile.js index 3a2e754..0403284 100755 --- a/gulpfile.js +++ b/gulpfile.js @@ -11,6 +11,28 @@ var sass = require('gulp-sass'); var sourceMaps = require('gulp-sourcemaps'); var autoprefixer = require('gulp-autoprefixer'); var sassify = require('sassify'); +var autoprefixify = require('./src/scripts/vendor/autoprefixify'); + +var sassIncludePaths = [].concat( + require('bourbon').includePaths, + 'src/styles' +); + +var sassifyOptions = { + base64Encode: false, + sourceMap: false, + sourceMapEmbed: false, + sourceMapContents: false, + outputStyle: 'compact', + includePaths: sassIncludePaths +}; + +var autoprefixerOptions = { + browsers: ['Android 4', 'iOS 8'], + cascade: false +}; + +var stringifyOptions = ['.html', '.tpl']; gulp.task('clean-js', function() { return del(['tmp/config-page.js']); @@ -18,7 +40,6 @@ gulp.task('clean-js', function() { gulp.task('js', ['clean-js'], function() { return browserify('src/scripts/config-page.js', { debug: true }) - .transform(stringify(['.html', '.tpl'])) .transform('deamdify') .bundle() .pipe(source('config-page.js')) @@ -31,11 +52,10 @@ gulp.task('clean-sass', function() { gulp.task('sass', ['clean-sass'], function() { gulp.src('./src/styles/config-page.scss') .pipe(sourceMaps.init()) - .pipe(sass().on('error', sass.logError)) - .pipe(autoprefixer({ - browsers: ['Android 4', 'iOS 8'], - cascade: false - })) + .pipe(sass({ + includePaths: sassIncludePaths + }).on('error', sass.logError)) + .pipe(autoprefixer(autoprefixerOptions)) .pipe(sourceMaps.write('./')) .pipe(gulp.dest('tmp')); }); @@ -56,8 +76,13 @@ gulp.task('inlineHtml', ['js', 'sass'], function() { }); gulp.task('clay', ['inlineHtml'], function() { - return browserify('index.js', { debug: false }) - .transform(stringify(['.html', '.tpl'])) + return browserify('index.js', { + debug: false, + standalone: 'clay' + }) + .transform(stringify(stringifyOptions)) + .transform(sassify, sassifyOptions) + .transform(autoprefixify, autoprefixerOptions) .require(require.resolve('./index'), {expose: 'pebble-clay'}) .bundle() .pipe(source('clay.js')) @@ -65,21 +90,10 @@ gulp.task('clay', ['inlineHtml'], function() { }); gulp.task('dev-js', ['js', 'sass'], function() { - return browserify('dev/dev.js', { debug: true, global: true }) - .transform(stringify(['.html', '.tpl']), { global: true }) + return browserify('dev/dev.js', { debug: true }) + .transform(stringify(stringifyOptions)) .transform('deamdify') - .transform(sassify, { - global: true, - base64Encode: false, - sourceMap: false, - sourceMapEmbed: false, - sourceMapContents: false, - outputStyle: 'compact', - includePaths: [].concat( - require('bourbon').includePaths, - 'src/styles' - ) - }) + .transform(sassify, sassifyOptions) .bundle() .pipe(source('dev.js')) .pipe(gulp.dest('./tmp/')); diff --git a/index.js b/index.js index 64b7b83..2509fa6 100755 --- a/index.js +++ b/index.js @@ -1,6 +1,8 @@ 'use strict'; var configPageHtml = require('./tmp/config-page.html'); +var toSource = require('tosource'); +var standardComponents = require('./src/scripts/components'); /** * @param {string} input @@ -56,16 +58,42 @@ function encodeDataUri(input) { } /** - * @param {array} config - the Clay config + * @param {Array} config - the Clay config * @param {function} [customFn] - custom code to run from the config page. * Will run with api as context * @constructor */ function Clay(config, customFn) { - this.config = config; - this.customFn = customFn || function() {}; + var self = this; + + self.config = config; + self.customFn = customFn || function() {}; + self.components = []; + + /** + * @private + * @param {Clay~ConfigItem|Array} item + * @return {void} + */ + function _registerStandardComponents(item) { + if (Array.isArray(item)) { + item.forEach(function(item) { + _registerStandardComponents(item); + }); + } else if (item.type === 'section') { + _registerStandardComponents(item.items); + } else if (standardComponents[item.type]) { + self.registerComponent(standardComponents[item.type]); + } + } + + _registerStandardComponents(self.config); } +Clay.prototype.registerComponent = function(component) { + this.components.push(component); +}; + /** * Generate the Data URI used by the config Page with settings injected * @param {string} returnTo - used while developing on desktop. @@ -80,19 +108,13 @@ Clay.prototype.generateUrl = function(returnTo) { settings = {}; } - var strings = { - customFn: this.customFn.toString().replace(/^.*?\{/, '{'), - returnTo: returnTo || 'pebblejs://close#', - config: JSON.stringify(this.config), - settings: JSON.stringify(settings) - }; - // Show config page return encodeDataUri(configPageHtml - .replace('$$CUSTOM_FN$$', strings.customFn) - .replace('$$RETURN_TO$$', strings.returnTo) - .replace('$$CONFIG$$', strings.config) - .replace('$$SETTINGS$$', strings.settings) + .replace('$$CUSTOM_FN$$', toSource(this.customFn)) + .replace('$$RETURN_TO$$', returnTo || 'pebblejs://close#') + .replace('$$CONFIG$$', toSource(this.config)) + .replace('$$SETTINGS$$', toSource(settings)) + .replace('$$COMPONENTS$$', toSource(this.components)) ); }; diff --git a/package.json b/package.json index d7dc4a1..e0c60c4 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ }, "homepage": "https://github.com/pebble/clay#readme", "devDependencies": { + "autoprefixer": "^6.3.1", "bourbon": "^4.2.6", "browserify": "^13.0.0", "browserify-istanbul": "^0.2.1", @@ -54,9 +55,13 @@ "karma-threshold-reporter": "^0.1.15", "mocha": "^2.3.4", "pebble-clay-components": "git+https://github.com/pebble/clay-components.git#master", + "postcss": "^5.0.14", + "require-from-string": "^1.1.0", "sassify": "^0.9.1", "sinon": "^1.17.3", "stringify": "^3.2.0", + "through": "^2.3.8", + "tosource": "^1.0.0", "vinyl-source-stream": "^1.1.0", "watchify": "^3.7.0" }, diff --git a/src/config-page.html b/src/config-page.html index 63e641b..837fe40 100755 --- a/src/config-page.html +++ b/src/config-page.html @@ -8,11 +8,12 @@ window.returnTo = '$$RETURN_TO$$'; window.clayConfig = $$CONFIG$$; window.claySettings = $$SETTINGS$$; - window.customFn = function() $$CUSTOM_FN$$; + window.customFn = $$CUSTOM_FN$$; + window.clayComponents = $$COMPONENTS$$;
- + diff --git a/src/scripts/components/color.js b/src/scripts/components/color.js new file mode 100644 index 0000000..dabc272 --- /dev/null +++ b/src/scripts/components/color.js @@ -0,0 +1,107 @@ +'use strict'; + +module.exports = { + name: 'color', + template: require('../../templates/components/color.tpl'), + style: require('../../styles/clay/components/color.scss'), + manipulator: 'val', + defaults: { + label: '' + }, + initialize: function(minified) { + var HTML = minified.HTML; + var self = this; + + /* eslint-disable comma-spacing, no-multi-spaces, max-len, + standard/array-bracket-even-spacing */ + var layout = self.config.layout || [ + [false , false , '#55FF00', '#AAFF55', false , '#FFFF55', '#FFFFAA', false , false ], + [false , '#AAFFAA', '#55FF55', '#00FF00', '#AAFF00', '#FFFF00', '#FFAA55', '#FFAAAA', false ], + ['#55FFAA', '#00FF55', '#00AA00', '#55AA00', '#AAAA55', '#AAAA00', '#FFAA00', '#FF5500', '#FF5555'], + ['#AAFFFF', '#00FFAA', '#00AA55', '#55AA55', '#005500', '#555500', '#AA5500', '#FF0000', '#FF0055'], + [false , '#55AAAA', '#00AAAA', '#005555', '#FFFFFF', '#000000', '#AA5555', '#AA0000', false ], + ['#55FFFF', '#00FFFF', '#00AAFF', '#0055AA', '#AAAAAA', '#555555', '#550000', '#AA0055', '#FF55AA'], + ['#55AAFF', '#0055FF', '#0000FF', '#0000AA', '#000055', '#550055', '#AA00AA', '#FF00AA', '#FFAAFF'], + [false , '#5555AA', '#5555FF', '#5500FF', '#5500AA', '#AA00FF', '#FF00FF', '#FF55FF', false ], + [false , false , false , '#AAAAFF', '#AA55FF', '#AA55AA', false , false , false ] + ]; + /* eslint-enable */ + + var grid = ''; + var itemWidth = 100 / layout[0].length; + var itemHeight = 100 / layout.length; + var $elem = self.$element; + + for (var i = 0; i < layout.length; i++) { + for (var j = 0; j < layout[i].length; j++) { + + var color = layout[i][j] || 'transparent'; + var selectable = (color !== 'transparent' ? ' selectable' : ''); + + var roundedTL = (i === 0 && j === 0) || i === 0 && !layout[i][j - 1] || + !layout[i][j - 1] && !layout[i - 1][j] ? + ' rounded-tl' : + ''; + + var roundedTR = i === 0 && !layout[i][j + 1] || + !layout[i][j + 1] && !layout[i - 1][j] ? + ' rounded-tr ' : + ''; + + var roundedBL = (i === layout.length - 1 && j === 0) || + i === layout.length - 1 && !layout[i][j - 1] || + !layout[i][j - 1] && !layout[i + 1][j] ? + ' rounded-bl' : + ''; + + var roundedBR = i === layout.length - 1 && !layout[i][j + 1] || + !layout[i][j + 1] && !layout[i + 1][j] ? + ' rounded-br' : + ''; + + grid += '' + + ''; + } + } + + $elem.select('.color-box-container').add(HTML(grid)); + + var $valueDisplay = $elem.select('.value'); + var $picker = $elem.select('.picker-wrap'); + var disabled = self.$manipulatorTarget.get('disabled'); + + $elem.select('label').on('click', function(ev) { + if (!disabled) { + $picker.set('show'); // toggle visibility + } + }); + + self.on('change', function() { + var value = self.get().replace(/^0x/, '').toLowerCase(); + $valueDisplay.set('$background-color', '#' + value); + $elem.select('.color-box').set('-selected'); + $elem.select('.color-box[data-value="0x' + value + '"]').set('+selected'); + }); + + $elem.select('.color-box.selectable').on('click', function(ev) { + self.set(ev.target.dataset.value); + $picker.set('-show'); + }); + + self.on('disabled', function() { + disabled = true; + }); + + self.on('enabled', function() { + disabled = false; + }); + + } +}; diff --git a/src/scripts/components/footer.js b/src/scripts/components/footer.js new file mode 100644 index 0000000..cfda6eb --- /dev/null +++ b/src/scripts/components/footer.js @@ -0,0 +1,10 @@ +'use strict'; + +module.exports = { + name: 'footer', + template: require('../../templates/components/footer.tpl'), + manipulator: 'html', + defaults: { + attributes: {} + } +}; diff --git a/src/scripts/components/heading.js b/src/scripts/components/heading.js new file mode 100644 index 0000000..961c591 --- /dev/null +++ b/src/scripts/components/heading.js @@ -0,0 +1,11 @@ +'use strict'; + +module.exports = { + name: 'heading', + template: require('../../templates/components/heading.tpl'), + manipulator: 'html', + defaults: { + attributes: {}, + size: 4 + } +}; diff --git a/src/scripts/components/index.js b/src/scripts/components/index.js new file mode 100644 index 0000000..f08ccc3 --- /dev/null +++ b/src/scripts/components/index.js @@ -0,0 +1,12 @@ +'use strict'; + +module.exports = { + color: require('./color'), + footer: require('./footer'), + heading: require('./heading'), + input: require('./input'), + select: require('./select'), + submit: require('./submit'), + text: require('./text'), + toggle: require('./toggle') +}; diff --git a/src/scripts/components/input.js b/src/scripts/components/input.js new file mode 100644 index 0000000..eaf8050 --- /dev/null +++ b/src/scripts/components/input.js @@ -0,0 +1,12 @@ +'use strict'; + +module.exports = { + name: 'input', + template: require('../../templates/components/input.tpl'), + style: require('../../styles/clay/components/input.scss'), + manipulator: 'val', + defaults: { + label: '', + attributes: {} + } +}; diff --git a/src/scripts/components/select.js b/src/scripts/components/select.js new file mode 100644 index 0000000..be0e6c7 --- /dev/null +++ b/src/scripts/components/select.js @@ -0,0 +1,22 @@ +'use strict'; + +module.exports = { + name: 'select', + template: require('../../templates/components/select.tpl'), + style: require('../../styles/clay/components/select.scss'), + manipulator: 'val', + defaults: { + label: '', + options: [] + }, + initialize: function() { + var self = this; + + var $value = self.$element.select('.value'); + + self.on('change', function(ev) { + var value = self.$manipulatorTarget.select('option:checked').get('innerHTML'); + $value.set('innerHTML', value); + }); + } +}; diff --git a/src/scripts/components/submit.js b/src/scripts/components/submit.js new file mode 100644 index 0000000..a083933 --- /dev/null +++ b/src/scripts/components/submit.js @@ -0,0 +1,10 @@ +'use strict'; + +module.exports = { + name: 'submit', + template: require('../../templates/components/submit.tpl'), + manipulator: 'val', + defaults: { + attributes: {} + } +}; diff --git a/src/scripts/components/text.js b/src/scripts/components/text.js new file mode 100644 index 0000000..016e985 --- /dev/null +++ b/src/scripts/components/text.js @@ -0,0 +1,10 @@ +'use strict'; + +module.exports = { + name: 'text', + template: require('../../templates/components/text.tpl'), + manipulator: 'html', + defaults: { + attributes: {} + } +}; diff --git a/src/scripts/components/toggle.js b/src/scripts/components/toggle.js new file mode 100644 index 0000000..7b5f453 --- /dev/null +++ b/src/scripts/components/toggle.js @@ -0,0 +1,11 @@ +'use strict'; + +module.exports = { + name: 'toggle', + template: require('../../templates/components/toggle.tpl'), + style: require('../../styles/clay/components/toggle.scss'), + manipulator: 'checked', + defaults: { + attributes: {} + } +}; diff --git a/src/scripts/config-page.js b/src/scripts/config-page.js index 6d447a7..4c1cf6e 100755 --- a/src/scripts/config-page.js +++ b/src/scripts/config-page.js @@ -1,13 +1,20 @@ 'use strict'; -var $ = require('./vendor/minified/minified').$; -var _ = require('./vendor/minified/minified')._; +var minified = require('./vendor/minified'); var ClayConfig = require('./lib/clay-config'); -var config = _.extend([], window.clayConfig || []); +var $ = minified.$; +var _ = minified._; + +var config = _.extend([], window.clayConfig || []); var settings = _.extend({}, window.claySettings || {}); var returnTo = window.returnTo || 'pebblejs://close#'; var customFn = window.customFn || function() {}; +var clayComponents = window.clayComponents || {}; + +_.eachObj(clayComponents, function(key, component) { + ClayConfig.registerComponent(component); +}); var $mainForm = $('#main-form'); var clayConfig = new ClayConfig(settings, config, $mainForm); @@ -27,7 +34,7 @@ clayConfig.on(clayConfig.EVENTS.AFTER_BUILD, function() { }); // Run the custom function in the context of the ClayConfig -customFn.call(clayConfig); +customFn.call(clayConfig, minified); // Now that we have given the dev's custom code to run and attach listeners, // we build the config diff --git a/src/scripts/lib/clay-config.js b/src/scripts/lib/clay-config.js index b51d01b..f6101ce 100644 --- a/src/scripts/lib/clay-config.js +++ b/src/scripts/lib/clay-config.js @@ -9,12 +9,12 @@ * @property {string} [id] * @property {string} [label] * @property {object} [attributes] - * @property {array} [options] - * @property {array} [items] + * @property {Array} [options] + * @property {Array} [items] */ -var HTML = require('../vendor/minified/minified').HTML; -var _ = require('../vendor/minified/minified')._; +var HTML = require('../vendor/minified').HTML; +var _ = require('../vendor/minified')._; var ClayItem = require('./clay-item'); var utils = require('../lib/utils'); var ClayEvents = require('./clay-events'); @@ -39,7 +39,7 @@ function ClayConfig(settings, config, $rootContainer) { /** * Add item(s) to the config - * @param {Clay~ConfigItem|array} item + * @param {Clay~ConfigItem|Array} item * @param {M} $container * @return {void} */ diff --git a/src/scripts/lib/clay-events.js b/src/scripts/lib/clay-events.js index be3e65c..ae3c246 100644 --- a/src/scripts/lib/clay-events.js +++ b/src/scripts/lib/clay-events.js @@ -1,7 +1,7 @@ 'use strict'; -var $ = require('../vendor/minified/minified').$; -var _ = require('../vendor/minified/minified')._; +var $ = require('../vendor/minified').$; +var _ = require('../vendor/minified')._; /** * Attaches event methods to the context. diff --git a/src/scripts/lib/clay-item.js b/src/scripts/lib/clay-item.js index 0d74f4f..a75a052 100644 --- a/src/scripts/lib/clay-item.js +++ b/src/scripts/lib/clay-item.js @@ -1,7 +1,7 @@ 'use strict'; var componentRegistry = require('./component-registry'); -var minified = require('../vendor/minified/minified'); +var minified = require('../vendor/minified'); var utils = require('../lib/utils'); var ClayEvents = require('./clay-events'); diff --git a/src/scripts/vendor/autoprefixify.js b/src/scripts/vendor/autoprefixify.js new file mode 100644 index 0000000..2d632d8 --- /dev/null +++ b/src/scripts/vendor/autoprefixify.js @@ -0,0 +1,54 @@ +var path = require('path'); +var through = require('through'); +var postcss = require('postcss'); +var autoprefixer = require('autoprefixer'); +var requireFromString = require('require-from-string'); + +/** + * Stringifies the content + * @param {string} content + * @returns {string} + */ +function stringify (content) { + return 'module.exports = ' + JSON.stringify(content) + ';\n'; +} + +module.exports = function (file, options) { + + /** + * The function Browserify will use to transform the input. + * @param {string} file + * @returns {stream} + */ + function browserifyTransform (file) { + var extensions = ['.css', '.sass', '.scss', '.less']; + var chunks = []; + + if (extensions.indexOf(path.extname(file)) === -1) { + return through(); + } + + var write = function (buffer) { + chunks.push(buffer); + }; + + var end = function () { + var contents = requireFromString(Buffer.concat(chunks).toString('utf8')); + contents = postcss([autoprefixer(options)]).process(contents).css; + this.queue(stringify(contents)); + this.queue(null); + }; + + return through(write, end); + } + + if (typeof file !== 'string') { + // Factory: return a function. + // Set options variable here so it is ready for when browserifyTransform + // is called. Note: first argument is the options. + options = file; + return browserifyTransform; + } else { + return browserifyTransform(file); + } +}; diff --git a/src/scripts/vendor/minified/minified.js b/src/scripts/vendor/minified.js similarity index 100% rename from src/scripts/vendor/minified/minified.js rename to src/scripts/vendor/minified.js diff --git a/src/styles/clay.scss b/src/styles/_clay.scss similarity index 100% rename from src/styles/clay.scss rename to src/styles/_clay.scss diff --git a/src/styles/clay/_base.scss b/src/styles/clay/_base.scss index a266eec..e97d04d 100644 --- a/src/styles/clay/_base.scss +++ b/src/styles/clay/_base.scss @@ -1,6 +1,5 @@ @import "bourbon"; -@import "vars"; -@import "mixins"; +@import "clay"; html, body { @include font-pfdin(regular); diff --git a/src/styles/clay/components/color.scss b/src/styles/clay/components/color.scss new file mode 100644 index 0000000..241a78f --- /dev/null +++ b/src/styles/clay/components/color.scss @@ -0,0 +1,91 @@ +@import "clay"; + +.component-color { + + .value { + width: $small-component-width; + height: $base-height; + border-radius: $base-height / 2; + box-shadow: $box-shadow-small-components; + } + + input:disabled ~ .value, + input:disabled ~ .label { + opacity: 0.25; + } + + .picker-wrap { + left: 0; + top: 0; + top: 0; + right: 0; + bottom: 0; + position: fixed; + padding: 1rem; + background: rgba(0,0,0,0.7); + opacity: 0; + transition: opacity 70ms ease-in 175ms; + pointer-events: none; + z-index: 100; + + .picker { + padding: 1rem; + background: $color-gray-11; + border-radius: $border-radius; + } + + &.show { + transition-delay: 0ms; + pointer-events: auto; + opacity: 1; + } + } + + .color-box-wrap { + box-sizing: border-box; + position: relative; + height: 0; + width: 100%; + padding: 0 0 100% 0; // overridden with inline style + margin: 0.6em 0 0em; + + .color-box-container { + position: absolute; + height: 99.97%; + width: 100%; + left: 0; + top: 0; + + .color-box { + float:left; + cursor: pointer; + -webkit-tap-highlight-color: rgba(0,0,0,0); + + &.rounded-tl { + border-top-left-radius: $border-radius; + } + + &.rounded-tr { + border-top-right-radius: $border-radius; + } + + &.rounded-bl { + border-bottom-left-radius: $border-radius; + } + + &.rounded-br { + border-bottom-right-radius: $border-radius; + } + + &.selected { + transform: scale(1.15); + border-radius: $border-radius; + box-shadow: #111 0 0 0.24rem; + position: relative; + z-index: 100; + } + } + + } + } +} diff --git a/src/styles/clay/components/input.scss b/src/styles/clay/components/input.scss new file mode 100644 index 0000000..af9066e --- /dev/null +++ b/src/styles/clay/components/input.scss @@ -0,0 +1,41 @@ +@import "clay"; + +.component-input { + + display: block; + + .label { + padding-bottom: $item-spacing-v; + } + + .input { + position: relative; + min-width: 100%; + margin-top: $item-spacing-v; + margin-left: 0; + } + + input { + display:block; + width: 100%; + background: $color-gray-2; + border-radius: $border-radius; + padding: $item-spacing-v / 2 $item-spacing-h / 2; + border: none; + vertical-align: baseline; + color: $color-white; + font-size: inherit; + + @include placeholder { + color: $color-gray-8; + } + + &:focus { + @include placeholder { + color: $color-gray-6; + } + border: none; + box-shadow: none ; + } + } +} diff --git a/src/styles/clay/components/select.scss b/src/styles/clay/components/select.scss new file mode 100644 index 0000000..1b43d93 --- /dev/null +++ b/src/styles/clay/components/select.scss @@ -0,0 +1,36 @@ +@import "bourbon"; +@import "clay"; + +.component-select { + position: relative; + + .value { + $triangle-size: 0.85rem; + position: relative; + padding-right: $triangle-size + 0.25rem; + + &:after { + content: ""; + position: absolute; + right: 0; + top: 50%; + margin-top: -0.1rem; + @include triangle($triangle-size, $color-gray-10, down); + } + } + + 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; + } +} diff --git a/src/styles/clay/components/toggle.scss b/src/styles/clay/components/toggle.scss new file mode 100644 index 0000000..6f92f7a --- /dev/null +++ b/src/styles/clay/components/toggle.scss @@ -0,0 +1,51 @@ +@import "clay"; + +.component-toggle { + + $slide-height: $base-height * 0.75; + $slide-width: $small-component-width; + $marker-diameter: $base-height; + + input { + display: none; // @todo make sure this doesn't mess up interactivity on iOS + } + + .graphic { + display: inline-block; + position: relative; + + .slide { + display:block; + border-radius: $slide-height; + height: $slide-height; + width: $slide-width; + background: $color-gray-1; + transition: background-color 150ms linear; + } + + .marker { + background: $color-gray-10; + width: $marker-diameter; + height: $marker-diameter; + border-radius: $marker-diameter; + position: absolute; + left: 0; + display: block; + top: ($marker-diameter - $slide-height) / 2 * -1; + transition: transform 150ms linear; + box-shadow: $box-shadow-small-components; + } + } + + input:checked + .graphic { + .slide { + background: $color-orange-dark; + } + + .marker { + background: $color-orange; + transform: translateX($slide-width - $marker-diameter); + } + } + +} diff --git a/src/styles/clay/elements/_button.scss b/src/styles/clay/elements/_button.scss index d84d2d0..8912034 100644 --- a/src/styles/clay/elements/_button.scss +++ b/src/styles/clay/elements/_button.scss @@ -1,5 +1,4 @@ -@import "../vars"; -@import "../mixins"; +@import "clay"; button, .button { diff --git a/src/templates/components/color.tpl b/src/templates/components/color.tpl new file mode 100755 index 0000000..50df2c3 --- /dev/null +++ b/src/templates/components/color.tpl @@ -0,0 +1,17 @@ +
+ +
+
+
+
+
+
+
+
diff --git a/src/templates/components/footer.tpl b/src/templates/components/footer.tpl new file mode 100755 index 0000000..4f67438 --- /dev/null +++ b/src/templates/components/footer.tpl @@ -0,0 +1,5 @@ +
diff --git a/src/templates/components/heading.tpl b/src/templates/components/heading.tpl new file mode 100755 index 0000000..812bec4 --- /dev/null +++ b/src/templates/components/heading.tpl @@ -0,0 +1,3 @@ +
+ +
diff --git a/src/templates/components/input.tpl b/src/templates/components/input.tpl new file mode 100755 index 0000000..7f1a758 --- /dev/null +++ b/src/templates/components/input.tpl @@ -0,0 +1,9 @@ + diff --git a/src/templates/components/select.tpl b/src/templates/components/select.tpl new file mode 100755 index 0000000..88e7463 --- /dev/null +++ b/src/templates/components/select.tpl @@ -0,0 +1,9 @@ + diff --git a/src/templates/components/submit.tpl b/src/templates/components/submit.tpl new file mode 100755 index 0000000..8598a12 --- /dev/null +++ b/src/templates/components/submit.tpl @@ -0,0 +1,9 @@ +
+ +
diff --git a/src/templates/components/text.tpl b/src/templates/components/text.tpl new file mode 100644 index 0000000..6b7d505 --- /dev/null +++ b/src/templates/components/text.tpl @@ -0,0 +1,3 @@ +
+

+
diff --git a/src/templates/components/toggle.tpl b/src/templates/components/toggle.tpl new file mode 100755 index 0000000..1233d08 --- /dev/null +++ b/src/templates/components/toggle.tpl @@ -0,0 +1,14 @@ + diff --git a/test/fixture.js b/test/fixture.js index eb1bc19..ca67e09 100644 --- a/test/fixture.js +++ b/test/fixture.js @@ -1,8 +1,8 @@ 'use strict'; -var _ = require('../src/scripts/vendor/minified/minified')._; -var $ = require('../src/scripts/vendor/minified/minified').$; -var HTML = require('../src/scripts/vendor/minified/minified').HTML; +var _ = require('../src/scripts/vendor/minified')._; +var $ = require('../src/scripts/vendor/minified').$; +var HTML = require('../src/scripts/vendor/minified').HTML; var ClayItem = require('../src/scripts/lib/clay-item'); var ClayConfig = require('../src/scripts/lib/clay-config'); var idCounter = 0; diff --git a/test/spec/lib/clay-config.js b/test/spec/lib/clay-config.js index 48685ba..808f85b 100644 --- a/test/spec/lib/clay-config.js +++ b/test/spec/lib/clay-config.js @@ -1,7 +1,7 @@ 'use strict'; var assert = require('chai').assert; -var _ = require('../../../src/scripts/vendor/minified/minified')._; +var _ = require('../../../src/scripts/vendor/minified')._; var selectComponent = require('pebble-clay-components').select; var componentRegistry = require('../../../src/scripts/lib/component-registry'); var checkReadOnly = require('../../test-utils').checkReadOnly; diff --git a/test/spec/lib/clay-events.js b/test/spec/lib/clay-events.js index 17215e0..8dba003 100644 --- a/test/spec/lib/clay-events.js +++ b/test/spec/lib/clay-events.js @@ -2,8 +2,8 @@ var sinon = require('sinon'); var assert = require('chai').assert; var ClayEvents = require('../../../src/scripts/lib/clay-events'); -var $ = require('../../../src/scripts/vendor/minified/minified').$; -var HTML = require('../../../src/scripts/vendor/minified/minified').HTML; +var $ = require('../../../src/scripts/vendor/minified').$; +var HTML = require('../../../src/scripts/vendor/minified').HTML; /** * @extends ClayEvents diff --git a/test/spec/lib/clay-item.js b/test/spec/lib/clay-item.js index e09e1c5..39f1de4 100644 --- a/test/spec/lib/clay-item.js +++ b/test/spec/lib/clay-item.js @@ -4,7 +4,7 @@ var assert = require('chai').assert; var sinon = require('sinon'); var checkReadOnly = require('../../test-utils').checkReadOnly; var ClayItem = require('../../../src/scripts/lib/clay-item'); -var minified = require('../../../src/scripts/vendor/minified/minified'); +var minified = require('../../../src/scripts/vendor/minified'); var clayItemFixture = require('../../fixture').clayItem; var configItemFixture = require('../../fixture').configItem; var componentRegistry = require('../../../src/scripts/lib/component-registry');