feat(client): add loader for apps menu
arcad/edge/pipeline/head This commit looks good Details

This commit is contained in:
wpetit 2023-10-25 21:27:41 +02:00
parent 8889694125
commit 02c74b6f8d
7 changed files with 168 additions and 50 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -5,5 +5,6 @@ import LoginIcon from './login.svg';
import HomeIcon from './home.svg'; import HomeIcon from './home.svg';
import LinkIcon from './link.svg'; import LinkIcon from './link.svg';
import LogoutIcon from './logout.svg'; import LogoutIcon from './logout.svg';
import LoaderIcon from './loader.svg';
export { UserCircleIcon, MenuIcon, CloudIcon, LoginIcon, HomeIcon, LinkIcon, LogoutIcon } export { LoaderIcon, UserCircleIcon, MenuIcon, CloudIcon, LoginIcon, HomeIcon, LinkIcon, LogoutIcon }

View File

@ -0,0 +1 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path fill="none" d="M0 0h24v24H0z"></path> <path d="M12 2a1 1 0 0 1 1 1v3a1 1 0 0 1-2 0V3a1 1 0 0 1 1-1zm0 15a1 1 0 0 1 1 1v3a1 1 0 0 1-2 0v-3a1 1 0 0 1 1-1zm8.66-10a1 1 0 0 1-.366 1.366l-2.598 1.5a1 1 0 1 1-1-1.732l2.598-1.5A1 1 0 0 1 20.66 7zM7.67 14.5a1 1 0 0 1-.366 1.366l-2.598 1.5a1 1 0 1 1-1-1.732l2.598-1.5a1 1 0 0 1 1.366.366zM20.66 17a1 1 0 0 1-1.366.366l-2.598-1.5a1 1 0 0 1 1-1.732l2.598 1.5A1 1 0 0 1 20.66 17zM7.67 9.5a1 1 0 0 1-1.366.366l-2.598-1.5a1 1 0 1 1 1-1.732l2.598 1.5A1 1 0 0 1 7.67 9.5z"></path> </g> </g></svg>

After

Width:  |  Height:  |  Size: 773 B

View File

@ -0,0 +1,57 @@
import { LitElement, html, css } from 'lit';
import { LoaderIcon } from './icons';
export class Loader extends LitElement {
static styles = css`
:host {
display: inline-block;
height: 100%;
width: 100%;
border-bottom: 1px solid rgb(229,231,235);
border-top: 10px solid transparent;
background-color: #fff;
min-height: 50px;
padding: 10px 0;
}
.container {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
color: black;
}
.icon {
height: 35px;
animation-duration: 3s;
animation-name: spin;
animation-iteration-count: infinite;
}
@keyframes spin {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
`;
constructor() {
super();
}
render() {
return html`
<div class="container">
<img class="icon" src="${LoaderIcon}" />
Chargement en cours
</div>
`
}
}

View File

@ -49,6 +49,9 @@ export class Menu extends LitElement {
@property() @property()
_profile: Profile _profile: Profile
@property()
_loading: boolean = false
static styles = css` static styles = css`
:host { :host {
position: fixed; position: fixed;
@ -95,6 +98,7 @@ export class Menu extends LitElement {
} }
_fetchApps() { _fetchApps() {
this._loading = true;
return fetch(`${BASE_API_URL}/apps`) return fetch(`${BASE_API_URL}/apps`)
.then(res => res.json()) .then(res => res.json())
.then(result => { .then(result => {
@ -130,9 +134,14 @@ export class Menu extends LitElement {
return Promise.all(promises); return Promise.all(promises);
}) })
.then((manifests: Manifest[]) => { .then((manifests: Manifest[]) => {
this._loading = false
this._apps = manifests; this._apps = manifests;
}) })
.catch(err => console.error(err)) .catch(err => {
console.error(err);
this._loading = false;
})
} }
_fetchProfile() { _fetchProfile() {
@ -158,19 +167,24 @@ export class Menu extends LitElement {
} }
_renderApps() { _renderApps() {
const apps = this._apps let apps;
.filter(manifest => this._canAccess(manifest)) if (this._loading) {
.map(manifest => { apps = [ html`<edge-loader></edge-loader>` ]
const iconUrl = ( ( manifest.url || '') + ( manifest.metadata?.paths?.icon || '' ) ) || LinkIcon; } else {
return html` apps = this._apps
<edge-menu-sub-item .filter(manifest => this._canAccess(manifest))
name='${ manifest.id }' .map(manifest => {
label='${ manifest.title }' const iconUrl = ( ( manifest.url || '') + ( manifest.metadata?.paths?.icon || '' ) ) || LinkIcon;
icon-url='${ iconUrl }' return html`
link-url='${ manifest.url || '#' }'> <edge-menu-sub-item
</edge-menu-sub-item> name='${ manifest.id }'
` label='${ manifest.title }'
}); icon-url='${ iconUrl }'
link-url='${ manifest.url || '#' }'>
</edge-menu-sub-item>
`
});
}
return html` return html`
<edge-menu-item name='apps' label='Apps' icon-url='${CloudIcon}'> <edge-menu-item name='apps' label='Apps' icon-url='${CloudIcon}'>

View File

@ -6,10 +6,12 @@ import { MenuItem as MenuItemElement } from './components/menu-item.js';
import { MenuSubItem as MenuSubItemElement } from './components/menu-sub-item.js'; import { MenuSubItem as MenuSubItemElement } from './components/menu-sub-item.js';
import { CrossFrameMessenger } from './crossframe-messenger.js'; import { CrossFrameMessenger } from './crossframe-messenger.js';
import { MenuManager } from './menu-manager.js'; import { MenuManager } from './menu-manager.js';
import { Loader } from './components/loader';
customElements.define('edge-menu', MenuElement); customElements.define('edge-menu', MenuElement);
customElements.define('edge-menu-item', MenuItemElement); customElements.define('edge-menu-item', MenuItemElement);
customElements.define('edge-menu-sub-item', MenuSubItemElement); customElements.define('edge-menu-sub-item', MenuSubItemElement);
customElements.define('edge-loader', Loader);
export const Client = new EdgeClient(); export const Client = new EdgeClient();
export const Frame = new CrossFrameMessenger(); export const Frame = new CrossFrameMessenger();