feat(client): add loader for apps menu
arcad/edge/pipeline/head This commit looks good
Details
arcad/edge/pipeline/head This commit looks good
Details
This commit is contained in:
parent
8889694125
commit
02c74b6f8d
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -5,5 +5,6 @@ import LoginIcon from './login.svg';
|
|||
import HomeIcon from './home.svg';
|
||||
import LinkIcon from './link.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 }
|
|
@ -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 |
|
@ -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>
|
||||
`
|
||||
}
|
||||
}
|
|
@ -49,6 +49,9 @@ export class Menu extends LitElement {
|
|||
@property()
|
||||
_profile: Profile
|
||||
|
||||
@property()
|
||||
_loading: boolean = false
|
||||
|
||||
static styles = css`
|
||||
:host {
|
||||
position: fixed;
|
||||
|
@ -95,6 +98,7 @@ export class Menu extends LitElement {
|
|||
}
|
||||
|
||||
_fetchApps() {
|
||||
this._loading = true;
|
||||
return fetch(`${BASE_API_URL}/apps`)
|
||||
.then(res => res.json())
|
||||
.then(result => {
|
||||
|
@ -130,9 +134,14 @@ export class Menu extends LitElement {
|
|||
return Promise.all(promises);
|
||||
})
|
||||
.then((manifests: Manifest[]) => {
|
||||
this._loading = false
|
||||
this._apps = manifests;
|
||||
})
|
||||
.catch(err => console.error(err))
|
||||
.catch(err => {
|
||||
console.error(err);
|
||||
this._loading = false;
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
_fetchProfile() {
|
||||
|
@ -158,19 +167,24 @@ export class Menu extends LitElement {
|
|||
}
|
||||
|
||||
_renderApps() {
|
||||
const apps = this._apps
|
||||
.filter(manifest => this._canAccess(manifest))
|
||||
.map(manifest => {
|
||||
const iconUrl = ( ( manifest.url || '') + ( manifest.metadata?.paths?.icon || '' ) ) || LinkIcon;
|
||||
return html`
|
||||
<edge-menu-sub-item
|
||||
name='${ manifest.id }'
|
||||
label='${ manifest.title }'
|
||||
icon-url='${ iconUrl }'
|
||||
link-url='${ manifest.url || '#' }'>
|
||||
</edge-menu-sub-item>
|
||||
`
|
||||
});
|
||||
let apps;
|
||||
if (this._loading) {
|
||||
apps = [ html`<edge-loader></edge-loader>` ]
|
||||
} else {
|
||||
apps = this._apps
|
||||
.filter(manifest => this._canAccess(manifest))
|
||||
.map(manifest => {
|
||||
const iconUrl = ( ( manifest.url || '') + ( manifest.metadata?.paths?.icon || '' ) ) || LinkIcon;
|
||||
return html`
|
||||
<edge-menu-sub-item
|
||||
name='${ manifest.id }'
|
||||
label='${ manifest.title }'
|
||||
icon-url='${ iconUrl }'
|
||||
link-url='${ manifest.url || '#' }'>
|
||||
</edge-menu-sub-item>
|
||||
`
|
||||
});
|
||||
}
|
||||
|
||||
return html`
|
||||
<edge-menu-item name='apps' label='Apps' icon-url='${CloudIcon}'>
|
||||
|
|
|
@ -6,10 +6,12 @@ import { MenuItem as MenuItemElement } from './components/menu-item.js';
|
|||
import { MenuSubItem as MenuSubItemElement } from './components/menu-sub-item.js';
|
||||
import { CrossFrameMessenger } from './crossframe-messenger.js';
|
||||
import { MenuManager } from './menu-manager.js';
|
||||
import { Loader } from './components/loader';
|
||||
|
||||
customElements.define('edge-menu', MenuElement);
|
||||
customElements.define('edge-menu-item', MenuItemElement);
|
||||
customElements.define('edge-menu-sub-item', MenuSubItemElement);
|
||||
customElements.define('edge-loader', Loader);
|
||||
|
||||
export const Client = new EdgeClient();
|
||||
export const Frame = new CrossFrameMessenger();
|
||||
|
|
Loading…
Reference in New Issue