From 4cb65d6c19c536b5748f979d8c9d4228c5db4576 Mon Sep 17 00:00:00 2001 From: Paul Nicholls Date: Sat, 8 Oct 2016 00:28:26 +1300 Subject: [PATCH 1/3] paper-icon: Set md-font-icon attribute (#515) * paper-icon: Add md-font-icon attribute This causes the md-icon's width to be auto, rather than fixed at 24px. * Add test for paper-icon md-font-icon attribute --- addon/components/paper-icon.js | 2 +- tests/integration/components/paper-icon-test.js | 11 +++++++++++ 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/addon/components/paper-icon.js b/addon/components/paper-icon.js index 3125a0a7c..978298d6a 100644 --- a/addon/components/paper-icon.js +++ b/addon/components/paper-icon.js @@ -15,7 +15,7 @@ let PaperIconComponent = Component.extend(ColorMixin, { tagName: 'md-icon', classNames: ['paper-icon', 'md-font', 'material-icons', 'md-default-theme'], classNameBindings: ['spinClass'], - attributeBindings: ['aria-label', 'title', 'sizeStyle:style'], + attributeBindings: ['aria-label', 'title', 'sizeStyle:style', 'iconClass:md-font-icon'], icon: '', spin: false, diff --git a/tests/integration/components/paper-icon-test.js b/tests/integration/components/paper-icon-test.js index 1fb11e6ba..83c0cc345 100644 --- a/tests/integration/components/paper-icon-test.js +++ b/tests/integration/components/paper-icon-test.js @@ -129,3 +129,14 @@ test('it renders the correct ligature when given a dashed or underscored icon na assert.equal($component.text().trim(), 'aspect_ratio'); }); + +test('it renders with md-font-icon attribute', function(assert) { + assert.expect(1); + + this.set('iconName', 'check'); + this.render(hbs`{{paper-icon iconName}}`); + + let $component = this.$('md-icon'); + + assert.equal($component.attr('md-font-icon'), 'check'); +}); From 7b985060a238c0b3724e37757ecfbbc255832611 Mon Sep 17 00:00:00 2001 From: Andrey Khomenko Date: Fri, 7 Oct 2016 11:33:21 -0400 Subject: [PATCH 2/3] Legible paper-radio demo (#517) * Dummy app horizontal scrollbar-thumb must match the size of vertical thumb * Legible paper-radio demo --- tests/dummy/app/controllers/demo/radio.js | 6 +- tests/dummy/app/styles/demo.scss | 44 ++++++--- tests/dummy/app/templates/demo/radio.hbs | 113 +++++++++++++--------- 3 files changed, 100 insertions(+), 63 deletions(-) diff --git a/tests/dummy/app/controllers/demo/radio.js b/tests/dummy/app/controllers/demo/radio.js index 50a663410..548870851 100644 --- a/tests/dummy/app/controllers/demo/radio.js +++ b/tests/dummy/app/controllers/demo/radio.js @@ -4,9 +4,7 @@ const { Controller } = Ember; export default Controller.extend({ - actions: { - foo() { + selectedFruit: 'Apple', + selectedGraphic: 'graphic-1' - } - } }); diff --git a/tests/dummy/app/styles/demo.scss b/tests/dummy/app/styles/demo.scss index be219fc40..5c22e18dc 100644 --- a/tests/dummy/app/styles/demo.scss +++ b/tests/dummy/app/styles/demo.scss @@ -167,11 +167,12 @@ md-toolbar.md-default-theme.page-main-toolbar { .demo-header-searchbox { - border: none; - outline: none; - height: 100%; - width: 100%; - padding: 0; } + border: none; + outline: none; + height: 100%; + width: 100%; + padding: 0; +} .demo-select-header { box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 0, 0, 0.14), 0 0 0 0 rgba(0, 0, 0, 0.12); padding-left: 10.667px; @@ -180,23 +181,25 @@ md-toolbar.md-default-theme.page-main-toolbar { position: relative; display: flex; align-items: center; - width: auto; } + width: auto; +} /************ * DOCS MENU ************/ *::-webkit-scrollbar { - width: 5px; - } + width: 5px; + height: 5px; +} *::-webkit-scrollbar-track { - background: color($color-grey, '200'); - } + background: rgba(0,0,0,0); +} *::-webkit-scrollbar-thumb { - background: color($color-grey, '500'); - } + background: color($color-grey, '500'); +} .site-sidenav, .site-sidenav.md-locked-open-add-active, @@ -368,6 +371,23 @@ md-sidenav.site-sidenav { } } +/************ + * Radio button demo + ************/ +.radio-button-demo { + overflow: hidden; + hr { + margin-left: -20px; + opacity: 0.3; + } + .radio-value { + margin-left: 5px; + color: #0f9d58; + font-weight: bold; + padding: 5px; + } +} + .grid-list-demo-dynamicTiles { md-icon { width: 50%; diff --git a/tests/dummy/app/templates/demo/radio.hbs b/tests/dummy/app/templates/demo/radio.hbs index 981dad6a4..6b53dbe60 100644 --- a/tests/dummy/app/templates/demo/radio.hbs +++ b/tests/dummy/app/templates/demo/radio.hbs @@ -1,54 +1,73 @@ {{page-toolbar pageTitle="Radio" isDemo=true}} + {{#doc-content}} + {{#paper-card class="radio-button-demo"}} + {{#paper-card-content}} +

Basic Usage

+

+ Stand alone +

+
+ {{! BEGIN-SNIPPET radio.standalone-usage }} + {{#paper-radio toggle=true value="Toggable" groupValue=toggleValue + onChange=(action (mut toggleValue))}} + Toggable + {{/paper-radio}} + {{paper-radio label="Blockless" + toggle=true + value="Blockless" + groupValue=blocklessValue + onChange=(action (mut blocklessValue))}} + {{#paper-radio value=false disabled=true onChange=null}} + Disabled + {{/paper-radio}} + {{! END-SNIPPET }} +
+

Template

+ {{code-snippet name="radio.standalone-usage.hbs"}} +
-{{#doc-content}} -
- {{! BEGIN-SNIPPET radio.basic-usage }} -
{{#paper-radio onChange=(action "foo")}}A radio button{{/paper-radio}}
-
{{#paper-radio toggle=true value="123" groupValue=toggleValue onChange=(action (mut toggleValue))}}Toggable radio button{{/paper-radio}}
-
{{#paper-radio disabled=true onChange=(action "foo")}}Disabled radio button{{/paper-radio}}
- {{! END-SNIPPET }} -
+

+ Selected Value: {{selectedFruit}} +

+ {{! BEGIN-SNIPPET radio.basic-group-usage}} + {{#paper-radio-group + groupValue=(readonly selectedFruit) + onChange=(action (mut selectedFruit)) as |group|}} + {{#group.radio value="Apple" primary=true}} Apple {{/group.radio}} + {{#group.radio value="Banana" warn=true}} Banana {{/group.radio}} + {{#group.radio value="Mango"}} Mango {{/group.radio}} + {{/paper-radio-group}} + {{! END-SNIPPET }} - {{code-snippet name="radio.basic-usage.hbs"}} +

Template

+ {{code-snippet name="radio.basic-group-usage.hbs"}} +
-

Radio Button Group

- {{! BEGIN-SNIPPET radio.group }} - {{#paper-radio-group groupValue=groupValue onChange=(action (mut groupValue)) as |group|}} - {{#group.radio value="1" primary=true}} - Radio button 1 - {{/group.radio}} - {{#group.radio value="2" warn=true}} - Radio button 2 - {{/group.radio}} - {{#group.radio value="3"}} - Radio button 3 - {{/group.radio}} - {{/paper-radio-group}} +

+ Graphic radio buttons +

+

+ Selected Value: {{selectedGraphic}} +

+ {{! BEGIN-SNIPPET radio.images }} + {{#paper-radio-group + groupValue=selectedGraphic + onChange=(action (mut selectedGraphic)) as |group|}} + {{#group.radio value="graphic-1" primary=true}} + + {{/group.radio}} + {{#group.radio value="graphic-2" warn=true}} + + {{/group.radio}} + {{#group.radio value="graphic-3"}} + + {{/group.radio}} + {{/paper-radio-group}} + {{! END-SNIPPET }} -

Selected value: {{groupValue}}

- -

{{paper-radio toggle=true label="Blockless version" onChange=(action "foo")}}

- {{! END-SNIPPET }} - -

Template

- {{code-snippet name="radio.group.hbs"}} - -

Radio Button w/ Images

- {{! BEGIN-SNIPPET radio.images }} - {{#paper-radio-group groupValue=groupValue2 onChange=(action (mut groupValue2)) as |group|}} - {{#group.radio value="image1" primary=true}} - - {{/group.radio}} - {{#group.radio value="image2" warn=true}} - - {{/group.radio}} - {{#group.radio value="image3"}} - - {{/group.radio}} - {{/paper-radio-group}} -{{! END-SNIPPET }} - -

Template

- {{code-snippet name="radio.images.hbs"}} +

Template

+ {{code-snippet name="radio.images.hbs"}} + {{/paper-card-content}} + {{/paper-card}} {{/doc-content}} From b17819cefffd913ee9811d1657bc80cae4eb34e2 Mon Sep 17 00:00:00 2001 From: Andrey Khomenko Date: Fri, 7 Oct 2016 11:34:35 -0400 Subject: [PATCH 3/3] Dummy app horizontal scrollbar-thumb must match the size of vertical thumb (#516)