Skip to content
GitLab
Commit ed8d3893 authored by akiraohgaki's avatar akiraohgaki
Browse files

Merge branch 'develop'

parents f9b41444 50587964
Hide whitespace changes
Inline Side-by-side
app/scripts/components/CollectiondownloadComponent.js
View file @ ed8d3893
......@@ -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>
`;
......
app/scripts/components/CollectioninstalledComponent.js
View file @ ed8d3893
......@@ -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_openUrl" data-url="${fileUrl}">${openButtonText}</button>
<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_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>
`;
......@@ -125,19 +110,31 @@ export default class CollectioninstalledComponent extends BaseComponent {
return listItemSet;
}
_disposableIndicator(target) {
const indicator = document.createElement('app-indicator');
target.appendChild(indicator);
indicator.start();
setTimeout(() => {
indicator.stop();
indicator.remove();
}, 3000);
}
_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_openUrl':
this.dispatch('ocsManager_openUrl', {url: target.getAttribute('data-url')});
break;
case 'ocsManager_applyTheme':
this._disposableIndicator(target);
this.dispatch('ocsManager_applyTheme', {
path: target.getAttribute('data-path'),
installType: target.getAttribute('data-install-type')
});
break;
case 'ocsManager_openUrl':
this._disposableIndicator(target);
this.dispatch('ocsManager_openUrl', {url: target.getAttribute('data-url')});
break;
case 'ocsManager_uninstall':
this.dispatch('ocsManager_uninstall', {itemKey: target.getAttribute('data-item-key')});
target.closest('li').remove();
......
app/scripts/components/CollectionsidebarComponent.js
View file @ ed8d3893
......@@ -74,28 +74,10 @@ export default class CollectionsidebarComponent extends BaseComponent {
text-overflow: ellipsis;
line-height: 1;
}
nav[data-sidebar] ul li a span[data-count] {
nav[data-sidebar] ul li a app-badge {
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;
}
</style>
......@@ -105,13 +87,13 @@ export default class CollectionsidebarComponent extends BaseComponent {
<li>
<a href="#" data-action="update" data-state="inactive">
<span data-name>Update</span>
<span data-count="0">0</span>
<app-badge data-count="0" data-emphasis="high"></app-badge>
</a>
</li>
<li>
<a href="#" data-action="download" data-state="active">
<span data-name>Download</span>
<span data-count="0">0</span>
<app-badge data-count="0" data-emphasis="medium"></app-badge>
</a>
</li>
</ul>
......@@ -158,7 +140,7 @@ export default class CollectionsidebarComponent extends BaseComponent {
<li>
<a href="#" data-action="installed" data-install-type="${category.installType}">
<span data-name>${category.name}</span>
<span data-count="${category.count}">${category.count}</span>
<app-badge data-count="${category.count}"></app-badge>
</a>
</li>
`;
......@@ -211,18 +193,16 @@ export default class CollectionsidebarComponent extends BaseComponent {
const menuItem = this.contentRoot.querySelector('a[data-action="update"]');
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.textContent = '' + state.count;
}
_viewHandler_ocsManager_metadataSet(state) {
const menuItem = this.contentRoot.querySelector('a[data-action="download"]');
//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.textContent = '' + state.count;
}
}
app/scripts/components/CollectionupdateComponent.js
View file @ ed8d3893
......@@ -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')});
......
app/scripts/components/OmniboxComponent.js
View file @ ed8d3893
......@@ -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] {
......@@ -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>
</div>
</div>
<app-indicator data-state="inactive"></app-indicator>
<app-indicator></app-indicator>
</div>
<div data-palette data-state="${state}" class="fade-in">
<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;
......@@ -238,7 +229,8 @@ export default class OmniboxComponent extends BaseComponent {
}
_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) {
......
app/scripts/components/ToolbarComponent.js
View file @ ed8d3893
......@@ -79,30 +79,20 @@ export default class ToolbarComponent extends BaseComponent {
color: var(--color-text);
}
nav[data-toolbar] ul li span[data-badge] {
nav[data-toolbar] ul li app-badge {
z-index: 1;
position: relative;
top: -36px;
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;
}
nav[data-toolbar] ul li span[data-badge="update"] {
nav[data-toolbar] ul li app-badge[data-emphasis="high"] {
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;
background-color: var(--color-information);
color: var(--color-content);
}
</style>
......@@ -129,14 +119,15 @@ export default class ToolbarComponent extends BaseComponent {
<li>
<app-iconbutton data-action="ocsManager_collection"
data-title="My Collection" data-icon="folder"></app-iconbutton><br>
<span data-badge="update" data-count="0">0</span>
<span data-badge="download" data-count="0">0</span>
<app-badge data-count="0" data-emphasis="high"></app-badge>
<app-badge data-count="0" data-emphasis="medium"></app-badge>
</li>
<li data-omnibox><app-omnibox></app-omnibox></li>
<li>
<app-iconbutton data-action="menu_open"
data-title="Other Operations..." data-icon="more_vert"></app-iconbutton><br>
<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>
</app-menu>
</li>
......@@ -180,6 +171,10 @@ export default class ToolbarComponent extends BaseComponent {
case 'menu_open':
this.contentRoot.querySelector('app-menu').open();
break;
case 'webview_appBugsPage':
this.dispatch('webview_appBugsPage', {});
this.contentRoot.querySelector('app-menu').close();
break;
case 'general_about':
this.dispatch('general_about', {});
this.contentRoot.querySelector('app-menu').close();
......@@ -202,15 +197,13 @@ export default class ToolbarComponent extends BaseComponent {
}
_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.textContent = state.count;
}
_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.textContent = state.count;
}
}
app/scripts/components/common/BadgeComponent.js 0 → 100644
View file @ ed8d3893
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>
`;
}
}
app/scripts/components/common/ButtonComponent.js 0 → 100644
View file @ ed8d3893
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>
`;
}
}
app/scripts/components/common/IconbuttonComponent.js
View file @ ed8d3893
......@@ -3,7 +3,7 @@ import BaseComponent from './BaseComponent.js';
export default class IconbuttonComponent extends BaseComponent {
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() {
......@@ -24,6 +24,7 @@ export default class IconbuttonComponent extends BaseComponent {
const state = this.getAttribute('data-state') || 'active';
const disabled = (state === 'inactive') ? 'disabled' : '';
const checked = this.hasAttribute('data-checked') ? 'data-checked' : '';
return this.html`
<style>
......@@ -51,15 +52,21 @@ export default class IconbuttonComponent extends BaseComponent {
border-radius: 3px;
background-color: transparent;
outline: none;
cursor: pointer;
transition: background-color 0.2s ease-out;
}
button:hover {
button:enabled {
cursor: pointer;
}
button:enabled:hover {
background-color: var(--color-active);
}
button[data-checked],
button[data-checked]:hover {
background-color: var(--color-information-secondary);
}
</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>
</button>
`;
......
app/scripts/components/common/IndicatorComponent.js
View file @ ed8d3893
......@@ -61,4 +61,16 @@ export default class IndicatorComponent extends BaseComponent {
`;
}
start() {
this.contentRoot.querySelector('div[data-container]').setAttribute('data-state', 'active');
this.contentRoot.querySelector('div[data-indicator]').setAttribute('data-state', 'active');
this.dispatch('indicator_start', {});
}
stop() {
this.contentRoot.querySelector('div[data-container]').setAttribute('data-state', 'inactive');
this.contentRoot.querySelector('div[data-indicator]').setAttribute('data-state', 'inactive');
this.dispatch('indicator_stop', {});
}
}
app/scripts/components/index.js
View file @ ed8d3893
......@@ -4,9 +4,15 @@ SwitchviewComponent.define('app-switchview');
import PageComponent from './common/PageComponent.js';
PageComponent.define('app-page');
import ButtonComponent from './common/ButtonComponent.js';
ButtonComponent.define('app-button');
import IconbuttonComponent from './common/IconbuttonComponent.js';
IconbuttonComponent.define('app-iconbutton');
import BadgeComponent from './common/BadgeComponent.js';
BadgeComponent.define('app-badge');
import IndicatorComponent from './common/IndicatorComponent.js';
IndicatorComponent.define('app-indicator');
......
app/scripts/handlers/WebviewHandler.js
View file @ ed8d3893
......@@ -4,6 +4,8 @@ export default class WebviewHandler {
this._stateManager = stateManager;
this._ipcRenderer = ipcRenderer;
this._appPackage = this._ipcRenderer.sendSync('app', 'package');
this._partition = 'persist:opendesktop';