Skip to content

Commit

Permalink
Replace paper-button (kalkih#82)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kalkih
kalkih committed Feb 17, 2019
1 parent d535daa commit 4455281
Show file tree
Hide file tree
Showing 2 changed files with 77 additions and 47 deletions.
46 changes: 30 additions & 16 deletions main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,13 @@ import { LitElement, html } from 'lit-element';
import ResizeObserver from 'resize-observer-polyfill';
import style from './style';

if (!customElements.get('mwc-button')) {
customElements.define(
'mwc-button',
class extends customElements.get('paper-button') {},
);
}

const DEFAULT_HIDE = {
shuffle: true,
power_state: true,
Expand Down Expand Up @@ -416,18 +423,20 @@ class MiniMediaPlayer extends LitElement {
<span>Group speakers</span>
${entities.map(item => this._renderGroupListItem(item, group, master))}
<div class='buttons'>
<paper-button
<mwc-button
class='speaker-select__button'
raised
?disabled=${group.length < 2}
@click='${e => this._handleGroupItemChange(e, isMaster ? group : this.config.entity, false)}'>
${isMaster ? html`Ungroup` : html`Leave`}
</paper-button>
<paper-button
</mwc-button>
<mwc-button
class='speaker-select__button'
raised
?disabled=${!isMaster}
@click='${e => this._handleGroupItemChange(e, entities.map(item => item.entity_id), true)}'>
Group all
</paper-button>
</mwc-button>
</div>
</div>`;
}
Expand All @@ -454,17 +463,21 @@ class MiniMediaPlayer extends LitElement {

const source = entity.attributes.source || '';
const selected = sources.indexOf(source);
const button = this.config.source === 'icon' || this.config.collapse || this.break || this.idle
? html`<paper-icon-button class='source-menu__button' slot='dropdown-trigger' .icon=${ICON.DROPDOWN}></paper-icon-button>`
: html`
<mwc-button class='source-menu__button' slot='dropdown-trigger'>
<span class='source-menu__source' display=${this.config.source}>
${this.source || source}
</span>
<iron-icon .icon=${ICON.DROPDOWN}></iron-icon>
</mwc-button>`;
return html`
<paper-menu-button class='source-menu' slot='dropdown-trigger'
.horizontalAlign=${'right'} .verticalAlign=${'top'}
.verticalOffset=${40} .noAnimations=${true}
@click='${e => e.stopPropagation()}'>
<paper-button class='source-menu__button' slot='dropdown-trigger'>
<span class='source-menu__source' display=${this.config.source}>
${this.source || source}
</span>
<iron-icon .icon=${ICON.DROPDOWN}></iron-icon>
</paper-button>
${button}
<paper-listbox slot='dropdown-content' selected=${selected}
@click='${e => this._handleSource(e, e.target.getAttribute('value'))}'>
${sources.map(item => html`<paper-item value=${item}>${item}</paper-item>`)}
Expand Down Expand Up @@ -546,9 +559,9 @@ class MiniMediaPlayer extends LitElement {
@click='${e => e.stopPropagation()}'>
</paper-input>
<div>
<paper-button @click='${e => this._handleTts(e)}'>
<mwc-button class='tts_button' @click='${e => this._handleTts(e)}'>
SEND
</paper-button>
</mwc-button>
</div>
</div>`;
}
Expand All @@ -560,12 +573,12 @@ class MiniMediaPlayer extends LitElement {
<paper-menu-button class='media-dropdown'
noink no-animations horizontal-align vertical-align .noLabelFloat=${true}
@click='${e => e.stopPropagation()}'>
<paper-button class='media-dropdown__button' slot='dropdown-trigger'>
<mwc-button class='media-dropdown__button' slot='dropdown-trigger'>
<span class='media-dropdown__label'>
${'Select media...'}
</span>
<iron-icon class='media-dropdown__icon' .icon=${ICON.MENU}></iron-icon>
</paper-button>
</mwc-button>
<paper-listbox slot="dropdown-content" class="media-dropdown-trigger"
@click='${e => this._handleQuickSelect(e, 'list', e.target.getAttribute('value'))}'>
${items.map((item, i) => html`
Expand All @@ -583,11 +596,12 @@ class MiniMediaPlayer extends LitElement {
return html`
<div class='media-buttons'>
${items.map((item, i) => html`
<paper-button raised
<mwc-button raised
class='media-buttons__button'
@click='${e => this._handleQuickSelect(e, 'buttons', i)}'>
${item.icon ? html`<iron-icon .icon=${item.icon}></iron-icon>` : ''}
${item.name ? html`<span class='media-label'>${item.name}</span>` : ''}
</paper-button>`)}
</mwc-button>`)}
</div>`;
}

Expand Down
78 changes: 47 additions & 31 deletions style.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,14 @@ const style = css`
header {
display: none;
}
mwc-button {
--mdc-theme-primary: var(--primary-text-color);
}
mwc-button[raised] {
--mdc-theme-on-primary: var(--primary-text-color);
--mdc-theme-primary: transparent;
background: rgba(255,255,255,.25);
}
ha-card[has-title] header {
display: block;
font-size: var(--paper-font-headline_-_font-size);
Expand Down Expand Up @@ -116,13 +124,17 @@ const style = css`
ha-card[artwork*='cover'][has-artwork] ha-icon,
ha-card[artwork*='cover'][has-artwork] .entity__info,
ha-card[artwork*='cover'][has-artwork] .entity__info__name,
ha-card[artwork*='cover'][has-artwork] paper-button,
ha-card[artwork*='cover'][has-artwork] mwc-button,
ha-card[artwork*='cover'][has-artwork] header,
ha-card[artwork*='cover'][has-artwork] .speaker-select > span,
ha-card[artwork*='cover'][has-artwork] paper-menu-button paper-button[focused] iron-icon {
ha-card[artwork*='cover'][has-artwork] paper-menu-button mwc-button:focus iron-icon {
color: #FFFFFF;
border-color: #FFFFFF;
}
ha-card[artwork*='cover'][has-artwork] mwc-button {
--mdc-theme-primary: #FFFFFF;
--mdc-theme-on-primary: #FFFFFF;
}
ha-card[artwork*='cover'][has-artwork] paper-input {
--paper-input-container-focus-color: #FFFFFF;
}
Expand All @@ -133,10 +145,13 @@ const style = css`
--paper-checkbox-unchecked-color: #FFFFFF;
--paper-checkbox-label-color: #FFFFFF;
}
ha-card[artwork*='cover'][has-artwork] .media-buttons paper-button,
ha-card[artwork*='cover'][has-artwork] .speaker-select paper-button {
background-color: rgba(255,255,255,.65);
color: black;
ha-card[artwork*='cover'][has-artwork] .media-buttons__button,
ha-card[artwork*='cover'][has-artwork] .speaker-select__button {
background-color: rgba(255,255,255,.25);
}
ha-card[artwork*='cover'][has-artwork] mwc-button[raised] {
--mdc-theme-primary: transparent;
--mdc-theme-on-primary: #FFFFFF;
}
ha-card[artwork*='cover'][has-artwork] paper-input {
--paper-input-container-color: #FFFFFF;
Expand Down Expand Up @@ -229,7 +244,7 @@ const style = css`
.entity[inactive] .entity__info__media,
.entity__info__name,
paper-icon-button,
paper-button {
mwc-button {
color: var(--primary-text-color);
position: relative;
}
Expand Down Expand Up @@ -306,7 +321,7 @@ const style = css`
font-size: 1em;
};
}
.tts paper-button {
.tts__button {
margin: 0;
padding: .4em;
}
Expand Down Expand Up @@ -343,30 +358,28 @@ const style = css`
margin-top: 8px;
padding-top: 8px;
}
.media-buttons > paper-button {
.media-buttons__button {
background-color: rgba(255,255,255,.1);
border-radius: 0;
box-sizing: border-box;
margin: 8px 0 0 0;
margin: 8px 8px 0 0;
min-width: 0;
padding: .2em 1em;
width: calc(50% - 4px);
width: calc(50% - 8px);
--mdc-button-horizontal-padding: 45px;
}
.media-buttons > paper-button > span {
.media-buttons__button > span {
line-height: 24px;
}
.media-buttons > paper-button > *:nth-child(2),
.media-buttons__button > *:nth-child(2),
.media-dropdown paper-item > *:nth-child(2) {
margin-left: 4px;
}
.media-buttons > paper-button:nth-child(odd) {
margin-right: 8px;
.media-buttons__button:nth-child(odd) {
}
.media-buttons > paper-button:nth-child(-n+2) {
.media-buttons__button:nth-child(-n+2) {
margin-top: 0;
}
.media-buttons > paper-button:nth-last-child(1):nth-child(odd) {
margin: 8px 0 0 0;
.media-buttons__button:nth-last-child(1):nth-child(odd) {
width: 100%;
}
.control-row--top .vol-control {
Expand Down Expand Up @@ -420,18 +433,14 @@ const style = css`
.speaker-select .buttons {
display: flex;
}
.speaker-select paper-button {
.speaker-select__button {
background-color: rgba(255,255,255,.1);
margin: 8px 8px 0 0;
min-width: 0;
padding: .5em 1em;
text-transform: uppercase;
text-align: center;
width: 50%;
}
.speaker-select paper-button:nth-child(even) {
margin: 8px 0 0 8px;
}
.speaker-select > paper-checkbox > span {
font-weight: 600;
}
Expand All @@ -449,20 +458,28 @@ const style = css`
};
}
.source-menu {
display: flex;
align-items: center;
height: 40px;
line-height: 20px;
padding: 0;
}
paper-menu-button[focused] paper-button > iron-icon {
paper-menu-button[focused] mwc-button > iron-icon,
paper-menu-button[focused] paper-icon-button {
color: var(--accent-color);
transform: rotate(180deg);
}
paper-menu-button paper-button[focused] iron-icon {
paper-menu-button mwc-button:focus iron-icon,
paper-menu-button mwc-button[focused] iron-icon,
paper-menu-button[focused] paper-icon-button[focused] {
color: var(--primary-text-color);
transform: rotate(0deg);
}
ha-card[has-artwork][artwork*='cover'] paper-menu-button[focused] paper-icon-button[focused] {
color: #FFFFFF;
}
.source-menu__button {
height: 40px;
height: 36px;
line-height: 20px;
margin: 0;
min-width: 0;
Expand Down Expand Up @@ -510,16 +527,16 @@ const style = css`
.label {
margin: 0 8px;
}
.media-dropdown[focused] paper-button,
.media-dropdown[focused] mwc-button,
paper-icon-button[color][opaque],
paper-input[focused] {
opacity: 1;
}
.media-dropdown[focused] paper-button[focused] {
.media-dropdown[focused] mwc-button:focus {
opacity: .75;
}
paper-icon-button[opaque],
.speaker-select paper-button[disabled] {
.speaker-select mwc-button[disabled] {
opacity: .5;
}
ha-card[flow] .control-row--top {
Expand All @@ -541,7 +558,6 @@ const style = css`
}
ha-card[break*="break"] .rows > * {
padding-left: 8px;
padding-right: 8px;
}
ha-card[break*="break"] .rows > .control-row {
padding: 0;
Expand Down

0 comments on commit 4455281

Please sign in to comment.