From a46b30cd1f443368cbe1cd6225eee40f08fc34b5 Mon Sep 17 00:00:00 2001 From: Dan Wenzel Date: Sat, 19 May 2018 10:28:03 -0500 Subject: [PATCH 1/4] Ignore vscode settings --- .gitignore | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.gitignore b/.gitignore index 4f156581..60df13c8 100644 --- a/.gitignore +++ b/.gitignore @@ -22,3 +22,6 @@ jsconfig.json .node_modules.ember-try/ bower.json.ember-try package.json.ember-try + +# text editors +.vscode/* From 5bc0c5ebcf03b4db012c293c256a85bd7b4fd85c Mon Sep 17 00:00:00 2001 From: Dan Wenzel Date: Sat, 19 May 2018 11:02:19 -0500 Subject: [PATCH 2/4] Add range input to freestyle-dynamic --- addon/components/freestyle-dynamic-input.js | 1 + .../templates/components/freestyle-dynamic-input.hbs | 10 ++++++++++ addon/templates/components/freestyle-dynamic.hbs | 2 ++ tests/dummy/app/components/x-bar/component.js | 12 ++++++++++++ tests/dummy/app/components/x-bar/template.hbs | 2 +- tests/dummy/app/controllers/acceptance.js | 7 +++++++ tests/dummy/app/templates/acceptance.hbs | 1 + 7 files changed, 34 insertions(+), 1 deletion(-) diff --git a/addon/components/freestyle-dynamic-input.js b/addon/components/freestyle-dynamic-input.js index 46418b62..22687f5f 100644 --- a/addon/components/freestyle-dynamic-input.js +++ b/addon/components/freestyle-dynamic-input.js @@ -11,6 +11,7 @@ export default Component.extend({ isTextarea: equal('inputType', 'textarea'), isSelect: equal('inputType', 'select'), isNumber: equal('inputType', 'number'), + isRange: equal('inputType', 'range'), inputId: computed('propertyName', function() { return `${this.get('elementId')}_${this.get('propertyName')}`; diff --git a/addon/templates/components/freestyle-dynamic-input.hbs b/addon/templates/components/freestyle-dynamic-input.hbs index 02e45faf..411ca2c3 100644 --- a/addon/templates/components/freestyle-dynamic-input.hbs +++ b/addon/templates/components/freestyle-dynamic-input.hbs @@ -29,6 +29,16 @@ id=inputId input=(action 'sendChangedNumberValue' value='target.value') }} +{{else if isRange}} + {{input + type='range' + id=inputId + min=min + max=max + input=(action 'sendChangedValue' value='target.value') + value=(readonly value) + }} + {{value}} {{else}} {{input value=value id=inputId key-up=(action 'sendChangedValue')}} {{/if}} diff --git a/addon/templates/components/freestyle-dynamic.hbs b/addon/templates/components/freestyle-dynamic.hbs index f5292bf7..e0ce05e3 100644 --- a/addon/templates/components/freestyle-dynamic.hbs +++ b/addon/templates/components/freestyle-dynamic.hbs @@ -8,6 +8,8 @@ options=propertyHash.options inputType=propertyHash.inputType description=propertyHash.description + min=propertyHash.min + max=propertyHash.max changeValueTo=(action 'changeValueTo' propertyName) }} {{/each-in}} diff --git a/tests/dummy/app/components/x-bar/component.js b/tests/dummy/app/components/x-bar/component.js index 3795f6d1..0a8a0001 100644 --- a/tests/dummy/app/components/x-bar/component.js +++ b/tests/dummy/app/components/x-bar/component.js @@ -1,5 +1,7 @@ import Component from '@ember/component'; import layout from './template'; +import { computed } from '@ember/object'; +import { htmlSafe } from '@ember/string'; export default Component.extend({ layout, @@ -9,4 +11,14 @@ export default Component.extend({ showBorder: true, isVisible: true, isTasteful: false, + + innerBorderThicknessStyle: computed('innerBorderThickness', function() { + const innerBorderThickness = this.get('innerBorderThickness'); + + if (innerBorderThickness) { + return htmlSafe(`border-width: ${innerBorderThickness}px`); + } else { + return ''; + } + }) }); diff --git a/tests/dummy/app/components/x-bar/template.hbs b/tests/dummy/app/components/x-bar/template.hbs index 5d7739a4..3141d1f4 100644 --- a/tests/dummy/app/components/x-bar/template.hbs +++ b/tests/dummy/app/components/x-bar/template.hbs @@ -8,7 +8,7 @@
{{rank}}

{{description}}

-
+
{{yield}}
diff --git a/tests/dummy/app/controllers/acceptance.js b/tests/dummy/app/controllers/acceptance.js index 7a483630..9e1151f4 100644 --- a/tests/dummy/app/controllers/acceptance.js +++ b/tests/dummy/app/controllers/acceptance.js @@ -34,6 +34,13 @@ export default FreestyleController.extend({ value: false, inputType: 'checkbox', description: 'Changes to a tasteful color scheme' + }, + innerBorderThickness: { + value: 1, + inputType: 'range', + min: 0, + max: 20, + description: 'Width of the inner border, in pixels', } } }), diff --git a/tests/dummy/app/templates/acceptance.hbs b/tests/dummy/app/templates/acceptance.hbs index b114d067..58e34274 100644 --- a/tests/dummy/app/templates/acceptance.hbs +++ b/tests/dummy/app/templates/acceptance.hbs @@ -92,6 +92,7 @@ rank=dynamic.rank isVisible=dynamic.isVisible isTasteful=dynamic.isTasteful + innerBorderThickness=dynamic.innerBorderThickness }}

{{dynamic.blockContent}}

Static block content

From 5e8001fa622be769b6d42f7133d35935065f3d17 Mon Sep 17 00:00:00 2001 From: Dan Wenzel Date: Sat, 19 May 2018 11:37:07 -0500 Subject: [PATCH 3/4] Make sure range value stays an integer --- addon/templates/components/freestyle-dynamic-input.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addon/templates/components/freestyle-dynamic-input.hbs b/addon/templates/components/freestyle-dynamic-input.hbs index 411ca2c3..c21f37db 100644 --- a/addon/templates/components/freestyle-dynamic-input.hbs +++ b/addon/templates/components/freestyle-dynamic-input.hbs @@ -35,7 +35,7 @@ id=inputId min=min max=max - input=(action 'sendChangedValue' value='target.value') + input=(action 'sendChangedNumberValue' value='target.value') value=(readonly value) }} {{value}} From e75a73c2a2dca1da889b5cc2560ac1c92039f74c Mon Sep 17 00:00:00 2001 From: Dan Wenzel Date: Sat, 19 May 2018 16:37:26 -0500 Subject: [PATCH 4/4] Allow 0 in x-bar range input example --- tests/dummy/app/components/x-bar/component.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/tests/dummy/app/components/x-bar/component.js b/tests/dummy/app/components/x-bar/component.js index 0a8a0001..08852a46 100644 --- a/tests/dummy/app/components/x-bar/component.js +++ b/tests/dummy/app/components/x-bar/component.js @@ -15,7 +15,8 @@ export default Component.extend({ innerBorderThicknessStyle: computed('innerBorderThickness', function() { const innerBorderThickness = this.get('innerBorderThickness'); - if (innerBorderThickness) { + // allow 0 + if (innerBorderThickness != null) { return htmlSafe(`border-width: ${innerBorderThickness}px`); } else { return '';