Commit 1d744f1e authored by akiraohgaki's avatar akiraohgaki

Replace button element to app-button

parent bb75b126
......@@ -78,22 +78,7 @@ export default class CollectiondownloadComponent extends BaseComponent {
nav[data-action] {
flex: 0 0 auto;
}
nav[data-action] button {
-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"] {
nav[data-action] app-button[data-state="inactive"] {
display: none;
}
</style>
......@@ -114,7 +99,7 @@ export default class CollectiondownloadComponent extends BaseComponent {
<p data-message>${state.message}</p>
</div>
<nav data-action>
<!--<button data-action="" data-item-key="">Cancel</button>-->
<!--<app-button data-action="" data-item-key="">Cancel</app-button>-->
</nav>
</li>
`;
......
......@@ -66,22 +66,7 @@ export default class CollectioninstalledComponent extends BaseComponent {
nav[data-action] {
flex: 0 0 auto;
}
nav[data-action] button {
-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"] {
nav[data-action] app-button[data-state="inactive"] {
display: none;
}
</style>
......@@ -110,11 +95,11 @@ export default class CollectioninstalledComponent extends BaseComponent {
<h4 data-name>${file}</h4>
</div>
<nav data-action>
<button data-action="ocsManager_applyTheme"
<app-button data-action="ocsManager_applyTheme"
data-path="${filePath}" data-install-type="${state.installType}"
data-state="${applyButtonState}">Apply</button>
<button data-action="ocsManager_openUrl" data-url="${fileUrl}">${openButtonText}</button>
<button data-action="ocsManager_uninstall" data-item-key="${key}">Delete</button>
data-state="${applyButtonState}">Apply</app-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>
</li>
`;
......@@ -126,8 +111,8 @@ export default class CollectioninstalledComponent extends BaseComponent {
}
_handleClick(event) {
if (event.target.closest('button[data-action]')) {
const target = event.target.closest('button[data-action]');
if (event.target.closest('app-button[data-action]')) {
const target = event.target.closest('app-button[data-action]');
switch (target.getAttribute('data-action')) {
case 'ocsManager_applyTheme':
this.dispatch('ocsManager_applyTheme', {
......
......@@ -77,22 +77,7 @@ export default class CollectionupdateComponent extends BaseComponent {
nav[data-action] {
flex: 0 0 auto;
}
nav[data-action] button {
-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"] {
nav[data-action] app-button[data-state="inactive"] {
display: none;
}
</style>
......@@ -117,7 +102,7 @@ export default class CollectionupdateComponent extends BaseComponent {
<p data-message></p>
</div>
<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>
</li>
`;
......@@ -128,8 +113,8 @@ export default class CollectionupdateComponent extends BaseComponent {
}
_handleClick(event) {
if (event.target.closest('button[data-action]')) {
const target = event.target.closest('button[data-action]');
if (event.target.closest('app-button[data-action]')) {
const target = event.target.closest('app-button[data-action]');
switch (target.getAttribute('data-action')) {
case 'ocsManager_update':
this.dispatch('ocsManager_update', {itemKey: target.getAttribute('data-item-key')});
......
......@@ -125,27 +125,8 @@ export default class OmniboxComponent extends BaseComponent {
width: 50%;
padding: 5px;
}
div[data-palette] nav ul li button {
-webkit-appearance: none;
appearance: none;
display: inline-block;
div[data-palette] nav ul li app-button {
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] {
......@@ -177,12 +158,12 @@ export default class OmniboxComponent extends BaseComponent {
<h4><i class="material-icons md-small">home</i> Choose Startpage</h4>
<nav>
<ul>
<li><button data-action="webview_startPage" data-url="https://www.opendesktop.org/">opendesktop.org</button></li>
<li><button data-action="webview_startPage" data-url="https://www.opendesktop.org/s/Gnome">gnome-look.org</button></li>
<li><button data-action="webview_startPage" data-url="https://store.kde.org/">store.kde.org</button></li>
<li><button data-action="webview_startPage" data-url="https://www.opendesktop.org/s/XFCE">xfce-look.org</button></li>
<li><button data-action="webview_startPage" data-url="https://www.opendesktop.org/s/Window-Managers">box-look.org</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/">opendesktop.org</app-button></li>
<li><app-button data-action="webview_startPage" data-url="https://www.opendesktop.org/s/Gnome">gnome-look.org</app-button></li>
<li><app-button data-action="webview_startPage" data-url="https://store.kde.org/">store.kde.org</app-button></li>
<li><app-button data-action="webview_startPage" data-url="https://www.opendesktop.org/s/XFCE">xfce-look.org</app-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><app-button data-action="webview_startPage" data-url="https://www.opendesktop.org/s/Enlightenment">enlightenment-themes.org</app-button></li>
</ul>
</nav>
</div>
......@@ -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() {
this.contentRoot.querySelector('div[data-palette]').setAttribute('data-state', 'active');
this.contentRoot.querySelector('div[data-overlay]').setAttribute('data-state', 'active');
......@@ -219,8 +210,8 @@ export default class OmniboxComponent extends BaseComponent {
if (event.target.closest('app-iconbutton[data-action]')) {
target = event.target.closest('app-iconbutton[data-action]');
}
else if (event.target.closest('button[data-action]')) {
target = event.target.closest('button[data-action]');
else if (event.target.closest('app-button[data-action]')) {
target = event.target.closest('app-button[data-action]');
}
else {
return;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment