Skip to content

Commit

Permalink
feat: expose raised attribute for all buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
Alex Van Camp committed Sep 22, 2018
1 parent 6d3b076 commit ee29c71
Showing 1 changed file with 29 additions and 21 deletions.
50 changes: 29 additions & 21 deletions nodecg-position-select.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,111 +66,111 @@
<iron-selector id="metaSelector" attr-for-selected="id" selected="{{type}}">
<nodecg-position-select-selector id="cardinal-corner" selectable=".option" class="userSelector">
<div class="row">
<paper-button class="option" data-vert="top" data-horiz="left">
<paper-button raised="[[raised]]" class="option" data-vert="top" data-horiz="left">
<iron-icon icon="arrow-back" style="transform: rotate(45deg);"></iron-icon>
</paper-button>

<paper-button class="option" data-vert="top" data-horiz="center">
<paper-button raised="[[raised]]" class="option" data-vert="top" data-horiz="center">
<iron-icon icon="arrow-upward"></iron-icon>
</paper-button>

<paper-button class="option" data-vert="top" data-horiz="right">
<paper-button raised="[[raised]]" class="option" data-vert="top" data-horiz="right">
<iron-icon icon="arrow-forward" style="transform: rotate(-45deg);"></iron-icon>
</paper-button>
</div>

<div class="row">
<paper-button class="option" data-vert="center" data-horiz="left">
<paper-button raised="[[raised]]" class="option" data-vert="center" data-horiz="left">
<iron-icon icon="arrow-back"></iron-icon>
</paper-button>

<paper-button disabled></paper-button>
<paper-button raised="[[raised]]" disabled></paper-button>

<paper-button class="option" data-vert="center" data-horiz="right">
<paper-button raised="[[raised]]" class="option" data-vert="center" data-horiz="right">
<iron-icon icon="arrow-forward"></iron-icon>
</paper-button>
</div>

<div class="row">
<paper-button class="option" data-vert="bottom" data-horiz="left">
<paper-button raised="[[raised]]" class="option" data-vert="bottom" data-horiz="left">
<iron-icon icon="arrow-back" style="transform: rotate(-45deg);"></iron-icon>
</paper-button>

<paper-button class="option" data-vert="bottom" data-horiz="center">
<paper-button raised="[[raised]]" class="option" data-vert="bottom" data-horiz="center">
<iron-icon icon="arrow-downward"></iron-icon>
</paper-button>

<paper-button class="option" data-vert="bottom" data-horiz="right">
<paper-button raised="[[raised]]" class="option" data-vert="bottom" data-horiz="right">
<iron-icon icon="arrow-forward" style="transform: rotate(45deg);"></iron-icon>
</paper-button>
</div>
</nodecg-position-select-selector>

<nodecg-position-select-selector id="cardinal" selectable=".option" class="userSelector">
<div class="row">
<paper-button class="option" data-vert="top" data-horiz="center">
<paper-button raised="[[raised]]" class="option" data-vert="top" data-horiz="center">
<iron-icon icon="arrow-upward"></iron-icon>
</paper-button>
</div>

<div class="row">
<paper-button class="option" data-vert="center" data-horiz="left">
<paper-button raised="[[raised]]" class="option" data-vert="center" data-horiz="left">
<iron-icon icon="arrow-back"></iron-icon>
</paper-button>

<paper-button class="option" data-vert="bottom" data-horiz="center">
<paper-button raised="[[raised]]" class="option" data-vert="bottom" data-horiz="center">
<iron-icon icon="arrow-downward"></iron-icon>
</paper-button>

<paper-button class="option" data-vert="center" data-horiz="right">
<paper-button raised="[[raised]]" class="option" data-vert="center" data-horiz="right">
<iron-icon icon="arrow-forward"></iron-icon>
</paper-button>
</div>
</nodecg-position-select-selector>

<nodecg-position-select-selector id="corner" selectable=".option" class="userSelector">
<div class="row">
<paper-button class="option" data-vert="top" data-horiz="left">
<paper-button raised="[[raised]]" class="option" data-vert="top" data-horiz="left">
<iron-icon icon="arrow-back" style="transform: rotate(45deg);"></iron-icon>
</paper-button>

<paper-button class="option" data-vert="top" data-horiz="right">
<paper-button raised="[[raised]]" class="option" data-vert="top" data-horiz="right">
<iron-icon icon="arrow-forward" style="transform: rotate(-45deg);"></iron-icon>
</paper-button>
</div>

<div class="row">
<paper-button class="option" data-vert="bottom" data-horiz="left">
<paper-button raised="[[raised]]" class="option" data-vert="bottom" data-horiz="left">
<iron-icon icon="arrow-back" style="transform: rotate(-45deg);"></iron-icon>
</paper-button>

<paper-button class="option" data-vert="bottom" data-horiz="right">
<paper-button raised="[[raised]]" class="option" data-vert="bottom" data-horiz="right">
<iron-icon icon="arrow-forward" style="transform: rotate(45deg);"></iron-icon>
</paper-button>
</div>
</nodecg-position-select-selector>

<nodecg-position-select-selector id="vertical" selectable=".option" class="userSelector">
<div class="row">
<paper-button class="option" data-vert="top">
<paper-button raised="[[raised]]" class="option" data-vert="top">
<iron-icon icon="arrow-upward"></iron-icon>
</paper-button>
</div>

<div class="row">
<paper-button class="option" data-vert="bottom">
<paper-button raised="[[raised]]" class="option" data-vert="bottom">
<iron-icon icon="arrow-downward"></iron-icon>
</paper-button>
</div>
</nodecg-position-select-selector>

<nodecg-position-select-selector id="horizontal" selectable=".option" class="userSelector">
<div class="row">
<paper-button class="option" data-horiz="left">
<paper-button raised="[[raised]]" class="option" data-horiz="left">
<iron-icon icon="arrow-back"></iron-icon>
</paper-button>

<paper-button class="option" data-horiz="right">
<paper-button raised="[[raised]]" class="option" data-horiz="right">
<iron-icon icon="arrow-forward"></iron-icon>
</paper-button>
</div>
Expand Down Expand Up @@ -205,6 +205,14 @@
type: {
type: String,
value: 'corner'
},

/**
* Whether or not to apply the `raised` attribute to all `paper-button` instances, which changes their appearance.
*/
raised: {
type: Boolean,
value: false
}
};
}
Expand Down

0 comments on commit ee29c71

Please sign in to comment.