Commit ed8d3893 authored by akiraohgaki's avatar akiraohgaki

Merge branch 'develop'

parents f9b41444 50587964
Pipeline #323 passed with stage
in 2 minutes and 15 seconds
...@@ -78,22 +78,7 @@ export default class CollectiondownloadComponent extends BaseComponent { ...@@ -78,22 +78,7 @@ export default class CollectiondownloadComponent extends BaseComponent {
nav[data-action] { nav[data-action] {
flex: 0 0 auto; flex: 0 0 auto;
} }
nav[data-action] button { nav[data-action] app-button[data-state="inactive"] {
-webkit-appearance: none;
appearance: none;
display: inline-block;
padding: 0.5em 1em;
border: 1px solid var(--color-border);
border-radius: 3px;
background-color: var(--color-content);
line-height: 1;
outline: none;
cursor: pointer;
}
nav[data-action] button:hover {
border-color: rgba(0,0,0,0.3);
}
nav[data-action] button[data-state="inactive"] {
display: none; display: none;
} }
</style> </style>
...@@ -114,7 +99,7 @@ export default class CollectiondownloadComponent extends BaseComponent { ...@@ -114,7 +99,7 @@ export default class CollectiondownloadComponent extends BaseComponent {
<p data-message>${state.message}</p> <p data-message>${state.message}</p>
</div> </div>
<nav data-action> <nav data-action>
<!--<button data-action="" data-item-key="">Cancel</button>--> <!--<app-button data-action="" data-item-key="">Cancel</app-button>-->
</nav> </nav>
</li> </li>
`; `;
......
...@@ -66,22 +66,7 @@ export default class CollectioninstalledComponent extends BaseComponent { ...@@ -66,22 +66,7 @@ export default class CollectioninstalledComponent extends BaseComponent {
nav[data-action] { nav[data-action] {
flex: 0 0 auto; flex: 0 0 auto;
} }
nav[data-action] button { nav[data-action] app-button[data-state="inactive"] {
-webkit-appearance: none;
appearance: none;
display: inline-block;
padding: 0.5em 1em;
border: 1px solid var(--color-border);
border-radius: 3px;
background-color: var(--color-content);
line-height: 1;
outline: none;
cursor: pointer;
}
nav[data-action] button:hover {
border-color: rgba(0,0,0,0.3);
}
nav[data-action] button[data-state="inactive"] {
display: none; display: none;
} }
</style> </style>
...@@ -110,11 +95,11 @@ export default class CollectioninstalledComponent extends BaseComponent { ...@@ -110,11 +95,11 @@ export default class CollectioninstalledComponent extends BaseComponent {
<h4 data-name>${file}</h4> <h4 data-name>${file}</h4>
</div> </div>
<nav data-action> <nav data-action>
<button data-action="ocsManager_openUrl" data-url="${fileUrl}">${openButtonText}</button> <app-button data-action="ocsManager_applyTheme"
<button data-action="ocsManager_applyTheme"
data-path="${filePath}" data-install-type="${state.installType}" data-path="${filePath}" data-install-type="${state.installType}"
data-state="${applyButtonState}">Apply</button> data-state="${applyButtonState}">Apply</app-button>
<button data-action="ocsManager_uninstall" data-item-key="${key}">Delete</button> <app-button data-action="ocsManager_openUrl" data-url="${fileUrl}">${openButtonText}</app-button>
<app-button data-action="ocsManager_uninstall" data-item-key="${key}">Delete</app-button>
</nav> </nav>
</li> </li>
`; `;
...@@ -125,19 +110,31 @@ export default class CollectioninstalledComponent extends BaseComponent { ...@@ -125,19 +110,31 @@ export default class CollectioninstalledComponent extends BaseComponent {
return listItemSet; return listItemSet;
} }
_disposableIndicator(target) {
const indicator = document.createElement('app-indicator');
target.appendChild(indicator);
indicator.start();
setTimeout(() => {
indicator.stop();
indicator.remove();
}, 3000);
}
_handleClick(event) { _handleClick(event) {
if (event.target.closest('button[data-action]')) { if (event.target.closest('app-button[data-action]')) {
const target = event.target.closest('button[data-action]'); const target = event.target.closest('app-button[data-action]');
switch (target.getAttribute('data-action')) { switch (target.getAttribute('data-action')) {
case 'ocsManager_openUrl':
this.dispatch('ocsManager_openUrl', {url: target.getAttribute('data-url')});
break;
case 'ocsManager_applyTheme': case 'ocsManager_applyTheme':
this._disposableIndicator(target);
this.dispatch('ocsManager_applyTheme', { this.dispatch('ocsManager_applyTheme', {
path: target.getAttribute('data-path'), path: target.getAttribute('data-path'),
installType: target.getAttribute('data-install-type') installType: target.getAttribute('data-install-type')
}); });
break; break;
case 'ocsManager_openUrl':
this._disposableIndicator(target);
this.dispatch('ocsManager_openUrl', {url: target.getAttribute('data-url')});
break;
case 'ocsManager_uninstall': case 'ocsManager_uninstall':
this.dispatch('ocsManager_uninstall', {itemKey: target.getAttribute('data-item-key')}); this.dispatch('ocsManager_uninstall', {itemKey: target.getAttribute('data-item-key')});
target.closest('li').remove(); target.closest('li').remove();
......
...@@ -74,28 +74,10 @@ export default class CollectionsidebarComponent extends BaseComponent { ...@@ -74,28 +74,10 @@ export default class CollectionsidebarComponent extends BaseComponent {
text-overflow: ellipsis; text-overflow: ellipsis;
line-height: 1; line-height: 1;
} }
nav[data-sidebar] ul li a span[data-count] { nav[data-sidebar] ul li a app-badge {
flex: 0 0 auto; flex: 0 0 auto;
display: inline-block;
padding: 3px 6px;
border-radius: 10px;
background-color: var(--color-active-secondary);
font-size: 11px;
line-height: 1;
}
nav[data-sidebar] ul li a[data-action="update"] span[data-count] {
background-color: var(--color-warning);
color: var(--color-content);
}
nav[data-sidebar] ul li a[data-action="update"] span[data-count="0"] {
display: none;
}
nav[data-sidebar] ul li a[data-action="download"] span[data-count] {
background-color: var(--color-information);
color: var(--color-content);
} }
nav[data-sidebar] ul li a[data-action="download"] span[data-count="0"] { nav[data-sidebar] ul li app-badge[data-count="0"] {
display: none; display: none;
} }
</style> </style>
...@@ -105,13 +87,13 @@ export default class CollectionsidebarComponent extends BaseComponent { ...@@ -105,13 +87,13 @@ export default class CollectionsidebarComponent extends BaseComponent {
<li> <li>
<a href="#" data-action="update" data-state="inactive"> <a href="#" data-action="update" data-state="inactive">
<span data-name>Update</span> <span data-name>Update</span>
<span data-count="0">0</span> <app-badge data-count="0" data-emphasis="high"></app-badge>
</a> </a>
</li> </li>
<li> <li>
<a href="#" data-action="download" data-state="active"> <a href="#" data-action="download" data-state="active">
<span data-name>Download</span> <span data-name>Download</span>
<span data-count="0">0</span> <app-badge data-count="0" data-emphasis="medium"></app-badge>
</a> </a>
</li> </li>
</ul> </ul>
...@@ -158,7 +140,7 @@ export default class CollectionsidebarComponent extends BaseComponent { ...@@ -158,7 +140,7 @@ export default class CollectionsidebarComponent extends BaseComponent {
<li> <li>
<a href="#" data-action="installed" data-install-type="${category.installType}"> <a href="#" data-action="installed" data-install-type="${category.installType}">
<span data-name>${category.name}</span> <span data-name>${category.name}</span>
<span data-count="${category.count}">${category.count}</span> <app-badge data-count="${category.count}"></app-badge>
</a> </a>
</li> </li>
`; `;
...@@ -211,18 +193,16 @@ export default class CollectionsidebarComponent extends BaseComponent { ...@@ -211,18 +193,16 @@ export default class CollectionsidebarComponent extends BaseComponent {
const menuItem = this.contentRoot.querySelector('a[data-action="update"]'); const menuItem = this.contentRoot.querySelector('a[data-action="update"]');
menuItem.setAttribute('data-state', state.count ? 'active' : 'inactive'); menuItem.setAttribute('data-state', state.count ? 'active' : 'inactive');
const badge = menuItem.querySelector('span[data-count]'); const badge = menuItem.querySelector('app-badge');
badge.setAttribute('data-count', '' + state.count); badge.setAttribute('data-count', '' + state.count);
badge.textContent = '' + state.count;
} }
_viewHandler_ocsManager_metadataSet(state) { _viewHandler_ocsManager_metadataSet(state) {
const menuItem = this.contentRoot.querySelector('a[data-action="download"]'); const menuItem = this.contentRoot.querySelector('a[data-action="download"]');
//menuItem.setAttribute('data-state', state.count ? 'active' : 'inactive'); //menuItem.setAttribute('data-state', state.count ? 'active' : 'inactive');
const badge = menuItem.querySelector('span[data-count]'); const badge = menuItem.querySelector('app-badge');
badge.setAttribute('data-count', '' + state.count); badge.setAttribute('data-count', '' + state.count);
badge.textContent = '' + state.count;
} }
} }
...@@ -77,22 +77,7 @@ export default class CollectionupdateComponent extends BaseComponent { ...@@ -77,22 +77,7 @@ export default class CollectionupdateComponent extends BaseComponent {
nav[data-action] { nav[data-action] {
flex: 0 0 auto; flex: 0 0 auto;
} }
nav[data-action] button { nav[data-action] app-button[data-state="inactive"] {
-webkit-appearance: none;
appearance: none;
display: inline-block;
padding: 0.5em 1em;
border: 1px solid var(--color-border);
border-radius: 3px;
background-color: var(--color-content);
line-height: 1;
outline: none;
cursor: pointer;
}
nav[data-action] button:hover {
border-color: rgba(0,0,0,0.3);
}
nav[data-action] button[data-state="inactive"] {
display: none; display: none;
} }
</style> </style>
...@@ -117,7 +102,7 @@ export default class CollectionupdateComponent extends BaseComponent { ...@@ -117,7 +102,7 @@ export default class CollectionupdateComponent extends BaseComponent {
<p data-message></p> <p data-message></p>
</div> </div>
<nav data-action> <nav data-action>
<button data-action="ocsManager_update" data-item-key="${key}" data-state="active">Update</button> <app-button data-action="ocsManager_update" data-item-key="${key}" data-state="active">Update</app-button>
</nav> </nav>
</li> </li>
`; `;
...@@ -128,8 +113,8 @@ export default class CollectionupdateComponent extends BaseComponent { ...@@ -128,8 +113,8 @@ export default class CollectionupdateComponent extends BaseComponent {
} }
_handleClick(event) { _handleClick(event) {
if (event.target.closest('button[data-action]')) { if (event.target.closest('app-button[data-action]')) {
const target = event.target.closest('button[data-action]'); const target = event.target.closest('app-button[data-action]');
switch (target.getAttribute('data-action')) { switch (target.getAttribute('data-action')) {
case 'ocsManager_update': case 'ocsManager_update':
this.dispatch('ocsManager_update', {itemKey: target.getAttribute('data-item-key')}); this.dispatch('ocsManager_update', {itemKey: target.getAttribute('data-item-key')});
......
...@@ -125,27 +125,8 @@ export default class OmniboxComponent extends BaseComponent { ...@@ -125,27 +125,8 @@ export default class OmniboxComponent extends BaseComponent {
width: 50%; width: 50%;
padding: 5px; padding: 5px;
} }
div[data-palette] nav ul li button { div[data-palette] nav ul li app-button {
-webkit-appearance: none;
appearance: none;
display: inline-block;
width: 100%; width: 100%;
padding: 0.4em 0.2em;
border: 1px solid var(--color-border);
border-radius: 3px;
background-color: var(--color-content);
line-height: 1;
outline: none;
cursor: pointer;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
div[data-palette] nav ul li button:hover {
border-color: rgba(0,0,0,0.3);
}
div[data-palette] nav ul li button[data-action="webview_startPage"][data-url="${this.state.startPage}"] {
border-color: var(--color-information);
} }
div[data-overlay] { div[data-overlay] {
...@@ -170,19 +151,19 @@ export default class OmniboxComponent extends BaseComponent { ...@@ -170,19 +151,19 @@ export default class OmniboxComponent extends BaseComponent {
data-title="Open in Browser" data-icon="open_in_browser" data-size="small"></app-iconbutton> data-title="Open in Browser" data-icon="open_in_browser" data-size="small"></app-iconbutton>
</div> </div>
</div> </div>
<app-indicator data-state="inactive"></app-indicator> <app-indicator></app-indicator>
</div> </div>
<div data-palette data-state="${state}" class="fade-in"> <div data-palette data-state="${state}" class="fade-in">
<h4><i class="material-icons md-small">home</i> Choose Startpage</h4> <h4><i class="material-icons md-small">home</i> Choose Startpage</h4>
<nav> <nav>
<ul> <ul>
<li><button data-action="webview_startPage" data-url="https://www.opendesktop.org/">opendesktop.org</button></li> <li><app-button data-action="webview_startPage" data-url="https://www.opendesktop.org/">opendesktop.org</app-button></li>
<li><button data-action="webview_startPage" data-url="https://www.opendesktop.org/s/Gnome">gnome-look.org</button></li> <li><app-button data-action="webview_startPage" data-url="https://www.opendesktop.org/s/Gnome">gnome-look.org</app-button></li>
<li><button data-action="webview_startPage" data-url="https://store.kde.org/">store.kde.org</button></li> <li><app-button data-action="webview_startPage" data-url="https://store.kde.org/">store.kde.org</app-button></li>
<li><button data-action="webview_startPage" data-url="https://www.opendesktop.org/s/XFCE">xfce-look.org</button></li> <li><app-button data-action="webview_startPage" data-url="https://www.opendesktop.org/s/XFCE">xfce-look.org</app-button></li>
<li><button data-action="webview_startPage" data-url="https://www.opendesktop.org/s/Window-Managers">box-look.org</button></li> <li><app-button data-action="webview_startPage" data-url="https://www.opendesktop.org/s/Window-Managers">box-look.org</app-button></li>
<li><button data-action="webview_startPage" data-url="https://www.opendesktop.org/s/Enlightenment">enlightenment-themes.org</button></li> <li><app-button data-action="webview_startPage" data-url="https://www.opendesktop.org/s/Enlightenment">enlightenment-themes.org</app-button></li>
</ul> </ul>
</nav> </nav>
</div> </div>
...@@ -191,6 +172,16 @@ export default class OmniboxComponent extends BaseComponent { ...@@ -191,6 +172,16 @@ export default class OmniboxComponent extends BaseComponent {
`; `;
} }
componentUpdatedCallback() {
if (this.contentRoot.querySelector('app-button[data-action="webview_startPage"][data-checked]')) {
this.contentRoot.querySelector('app-button[data-action="webview_startPage"][data-checked]').removeAttribute('data-checked');
}
if (this.contentRoot.querySelector(`app-button[data-action="webview_startPage"][data-url="${this.state.startPage}"]`)) {
this.contentRoot.querySelector(`app-button[data-action="webview_startPage"][data-url="${this.state.startPage}"]`).setAttribute('data-checked', 'data-checked');
}
}
open() { open() {
this.contentRoot.querySelector('div[data-palette]').setAttribute('data-state', 'active'); this.contentRoot.querySelector('div[data-palette]').setAttribute('data-state', 'active');
this.contentRoot.querySelector('div[data-overlay]').setAttribute('data-state', 'active'); this.contentRoot.querySelector('div[data-overlay]').setAttribute('data-state', 'active');
...@@ -219,8 +210,8 @@ export default class OmniboxComponent extends BaseComponent { ...@@ -219,8 +210,8 @@ export default class OmniboxComponent extends BaseComponent {
if (event.target.closest('app-iconbutton[data-action]')) { if (event.target.closest('app-iconbutton[data-action]')) {
target = event.target.closest('app-iconbutton[data-action]'); target = event.target.closest('app-iconbutton[data-action]');
} }
else if (event.target.closest('button[data-action]')) { else if (event.target.closest('app-button[data-action]')) {
target = event.target.closest('button[data-action]'); target = event.target.closest('app-button[data-action]');
} }
else { else {
return; return;
...@@ -238,7 +229,8 @@ export default class OmniboxComponent extends BaseComponent { ...@@ -238,7 +229,8 @@ export default class OmniboxComponent extends BaseComponent {
} }
_viewHandler_webview_loading(state) { _viewHandler_webview_loading(state) {
this.contentRoot.querySelector('app-indicator').setAttribute('data-state', state.isLoading ? 'active' : 'inactive'); const indicator = this.contentRoot.querySelector('app-indicator');
state.isLoading ? indicator.start() : indicator.stop();
} }
_viewHandler_webview_page(state) { _viewHandler_webview_page(state) {
......
...@@ -79,30 +79,20 @@ export default class ToolbarComponent extends BaseComponent { ...@@ -79,30 +79,20 @@ export default class ToolbarComponent extends BaseComponent {
color: var(--color-text); color: var(--color-text);
} }
nav[data-toolbar] ul li span[data-badge] { nav[data-toolbar] ul li app-badge {
z-index: 1; z-index: 1;
position: relative; position: relative;
top: -36px; top: -36px;
left: 22px; left: 22px;
display: inline-block;
padding: 3px 6px;
border-radius: 10px;
background-color: var(--color-active-secondary);
font-size: 11px;
line-height: 1;
} }
nav[data-toolbar] ul li span[data-badge][data-count="0"] { nav[data-toolbar] ul li app-badge[data-count="0"] {
display: none; display: none;
} }
nav[data-toolbar] ul li span[data-badge="update"] { nav[data-toolbar] ul li app-badge[data-emphasis="high"] {
z-index: 2; z-index: 2;
background-color: var(--color-warning);
color: var(--color-content);
} }
nav[data-toolbar] ul li span[data-badge="download"] { nav[data-toolbar] ul li app-badge[data-emphasis="medium"] {
z-index: 3; z-index: 3;
background-color: var(--color-information);
color: var(--color-content);
} }
</style> </style>
...@@ -129,14 +119,15 @@ export default class ToolbarComponent extends BaseComponent { ...@@ -129,14 +119,15 @@ export default class ToolbarComponent extends BaseComponent {
<li> <li>
<app-iconbutton data-action="ocsManager_collection" <app-iconbutton data-action="ocsManager_collection"
data-title="My Collection" data-icon="folder"></app-iconbutton><br> data-title="My Collection" data-icon="folder"></app-iconbutton><br>
<span data-badge="update" data-count="0">0</span> <app-badge data-count="0" data-emphasis="high"></app-badge>
<span data-badge="download" data-count="0">0</span> <app-badge data-count="0" data-emphasis="medium"></app-badge>
</li> </li>
<li data-omnibox><app-omnibox></app-omnibox></li> <li data-omnibox><app-omnibox></app-omnibox></li>
<li> <li>
<app-iconbutton data-action="menu_open" <app-iconbutton data-action="menu_open"
data-title="Other Operations..." data-icon="more_vert"></app-iconbutton><br> data-title="Other Operations..." data-icon="more_vert"></app-iconbutton><br>
<app-menu data-width="250px" data-offset-x="-220px"> <app-menu data-width="250px" data-offset-x="-220px">
<a slot="menuitem" href="#" data-action="webview_appBugsPage">Report a Bug</a>
<a slot="menuitem" href="#" data-action="general_about">About This App</a> <a slot="menuitem" href="#" data-action="general_about">About This App</a>
</app-menu> </app-menu>
</li> </li>
...@@ -180,6 +171,10 @@ export default class ToolbarComponent extends BaseComponent { ...@@ -180,6 +171,10 @@ export default class ToolbarComponent extends BaseComponent {
case 'menu_open': case 'menu_open':
this.contentRoot.querySelector('app-menu').open(); this.contentRoot.querySelector('app-menu').open();
break; break;
case 'webview_appBugsPage':
this.dispatch('webview_appBugsPage', {});
this.contentRoot.querySelector('app-menu').close();
break;
case 'general_about': case 'general_about':
this.dispatch('general_about', {}); this.dispatch('general_about', {});
this.contentRoot.querySelector('app-menu').close(); this.contentRoot.querySelector('app-menu').close();
...@@ -202,15 +197,13 @@ export default class ToolbarComponent extends BaseComponent { ...@@ -202,15 +197,13 @@ export default class ToolbarComponent extends BaseComponent {
} }
_viewHandler_ocsManager_updateAvailableItems(state) { _viewHandler_ocsManager_updateAvailableItems(state) {
const badge = this.contentRoot.querySelector('span[data-badge="update"]'); const badge = this.contentRoot.querySelector('app-badge[data-emphasis="high"]');
badge.setAttribute('data-count', '' + state.count); badge.setAttribute('data-count', '' + state.count);
badge.textContent = state.count;
} }
_viewHandler_ocsManager_metadataSet(state) { _viewHandler_ocsManager_metadataSet(state) {
const badge = this.contentRoot.querySelector('span[data-badge="download"]'); const badge = this.contentRoot.querySelector('app-badge[data-emphasis="medium"]');
badge.setAttribute('data-count', '' + state.count); badge.setAttribute('data-count', '' + state.count);
badge.textContent = state.count;
} }
} }
import BaseComponent from './BaseComponent.js';
export default class BadgeComponent extends BaseComponent {
static get componentObservedAttributes() {
return ['data-count', 'data-emphasis'];
}
render() {
const count = this.getAttribute('data-count') || '0';
const emphasis = this.getAttribute('data-emphasis') || 'low';
return this.html`
<style>
${this.sharedStyle}
</style>
<style>
:host {
display: inline-block;
}
span {
display: inline-block;
padding: 3px 6px;
border-radius: 10px;
font-size: 11px;
line-height: 1;
}
span[data-emphasis="low"] {
background-color: var(--color-active-secondary);
color: var(--color-text);
}
span[data-emphasis="medium"] {
background-color: var(--color-information);
color: var(--color-content);
}
span[data-emphasis="high"] {
background-color: var(--color-warning);
color: var(--color-content);
}
</style>
<span data-emphasis="${emphasis}">${count}</span>
`;
}
}
import BaseComponent from './BaseComponent.js';
export default class ButtonComponent extends BaseComponent {
static get componentObservedAttributes() {
return ['data-title', 'data-state', 'data-checked'];
}
render() {
const title = this.getAttribute('data-title') || '';
const state = this.getAttribute('data-state') || 'active';
const disabled = (state === 'inactive') ? 'disabled' : '';
const checked = this.hasAttribute('data-checked') ? 'data-checked' : '';
return this.html`
<style>
${this.sharedStyle}
</style>
<style>
:host {
display: inline-block;
line-height: 1;
}
button {
-webkit-appearance: none;
appearance: none;
display: inline-block;
width: inherit;
height: inherit;
padding: 0.5em 1em;
border: 1px solid var(--color-border);
border-radius: 3px;
background-color: var(--color-content);
outline: none;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
button:enabled {
cursor: pointer;
}
button:enabled:hover {
border-color: rgba(0,0,0,0.3);
}
button:disabled {
color: var(--color-text-secondary);
}
button[data-checked],
button[data-checked]:hover {
border-color: var(--color-information);
}
</style>
<button title="${title}" ?disabled=${disabled} ?data-checked=${checked}><slot></slot></button>
`;
}
}
...@@ -3,7 +3,7 @@ import BaseComponent from './BaseComponent.js'; ...@@ -3,7 +3,7 @@ import BaseComponent from './BaseComponent.js';
export default class IconbuttonComponent extends BaseComponent { export default class IconbuttonComponent extends BaseComponent {
static get componentObservedAttributes() { static get componentObservedAttributes() {
return ['data-title', 'data-icon', 'data-size', 'data-color', 'data-state']; return ['data-title', 'data-icon', 'data-size', 'data-color', 'data-state', 'data-checked'];
} }
init() { init() {
...@@ -24,6 +24,7 @@ export default class IconbuttonComponent extends BaseComponent { ...@@ -24,6 +24,7 @@ export default class IconbuttonComponent extends BaseComponent {
const state = this.getAttribute('data-state') || 'active'; const state = this.getAttribute('data-state') || 'active';
const disabled = (state === 'inactive') ? 'disabled' : ''; const disabled = (state === 'inactive') ? 'disabled' : '';
const checked = this.hasAttribute('data-checked') ? 'data-checked' : '';
return this.html` return this.html`
<style> <style>
...@@ -51,15 +52,21 @@ export default class IconbuttonComponent extends BaseComponent { ...@@ -51,15 +52,21 @@ export default class IconbuttonComponent extends BaseComponent {
border-radius: 3px; border-radius: 3px;
background-color: transparent; background-color: transparent;
outline: none; outline: none;
cursor: pointer;
transition: background-color 0.2s ease-out; transition: background-color 0.2s ease-out;
} }
button:hover { button:enabled {
cursor: pointer;
}
button:enabled:hover {
background-color: var(--color-active); background-color: var(--color-active);
} }
button[data-checked],
button[data-checked]:hover {
background-color: var(--color-information-secondary);
}
</style> </style>
<button title="${title}" ?disabled=${disabled}> <button title="${title}" ?disabled=${disabled} ?data-checked=${checked}>
<i class="material-icons md-${size} md-${color} md-${state}">${icon}</i> <i class="material-icons md-${size} md-${color} md-${state}">${icon}</i>
</button> </button>
`; `;
......