From 92659c64f2cc5652791eb27703781d8f64a9b158 Mon Sep 17 00:00:00 2001 From: Alice Gaudon Date: Tue, 14 Jul 2020 11:08:09 +0200 Subject: [PATCH] Add service loading navigation button animation --- frontend/sass/index.scss | 219 ++++++++++++++++++++------------------- frontend/ts/index.ts | 7 ++ 2 files changed, 118 insertions(+), 108 deletions(-) diff --git a/frontend/sass/index.scss b/frontend/sass/index.scss index 4e663c7..fbd5acf 100644 --- a/frontend/sass/index.scss +++ b/frontend/sass/index.scss @@ -7,6 +7,16 @@ body { flex-direction: row; } +#service-buttons { + flex-grow: 1; + + overflow: hidden auto; +} + +*:focus { + outline-color: rgb(118, 93, 176); +} + #navigation { display: flex; flex-direction: column; @@ -16,16 +26,43 @@ body { body.fullscreen & { display: none; } -} -#navigation > :not(#service-buttons) { - flex-shrink: 0; -} + > :not(#service-buttons) { + flex-shrink: 0; + } -#service-buttons { - flex-grow: 1; + button { + position: relative; + display: block; + width: var(--nav-width); + height: var(--nav-width); + margin: 0; + padding: 0; - overflow: hidden auto; + color: #fff; + border: 0; + background: transparent; + + cursor: pointer; + border-radius: 0; + + &:focus { + outline: none; + background: #fff3 !important; + } + + &:hover { + background-color: #fff3; + } + + i { + font-size: calc(var(--nav-width) / 2); + } + + img { + width: calc(var(--nav-width) / 2); + } + } } #service-selector { @@ -34,20 +71,76 @@ body { padding: 0; list-style: none; -} -#service-selector::-webkit-scrollbar { - width: 6px; -} + &::-webkit-scrollbar { + width: 6px; + } -#service-selector [draggable] { - user-select: none; - background-color: rgb(43, 43, 43); -} + li { + position: relative; -#service-selector [draggable] img { - -webkit-user-drag: none; - user-drag: none; + button { + border-radius: 0; + } + + &.active button { + background-color: #fff2; + } + + &.loading, &.loaded { + button::before { + content: ""; + display: block; + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + height: 75%; + border-right: 4px solid #ffffff3e; + } + } + + &.loading button::before { + animation: loading-button-after linear 500ms infinite alternate; + height: 45%; + + @keyframes loading-button-after { + from { + opacity: 0.1; + } + to { + opacity: 0.5; + } + } + } + } + + [draggable] { + user-select: none; + background-color: rgb(43, 43, 43); + + img { + -webkit-user-drag: none; + user-drag: none; + } + } + + .drag-target-self button::after { + height: var(--nav-width); + border: 1px dashed #fff; + transform: none; + } + + .drag-target button::after { + position: absolute; + left: 0; + top: 0; + width: 100%; + } + + .drag-target::after { + top: 75% !important; + } } #service-selector .drag-target button::after, @@ -60,96 +153,6 @@ body { background: #fff9; } -#service-selector .drag-target-self button::after { - height: var(--nav-width); - border: 1px dashed #fff; - transform: none; -} - -#service-selector .drag-target button::after { - position: absolute; - left: 0; - top: 0; - width: 100%; -} - -#service-selector .drag-target::after { - top: 75% !important; -} - -*:focus { - outline-color: rgb(118, 93, 176); -} - -#navigation button { - position: relative; - display: block; - width: var(--nav-width); - height: var(--nav-width); - margin: 0; - padding: 0; - - color: #fff; - border: 0; - background: transparent; - - cursor: pointer; -} - -#navigation button:focus { - outline: none; - background: #fff3 !important; -} - -#navigation button img { - width: calc(var(--nav-width) / 2); -} - -#navigation button i { - font-size: calc(var(--nav-width) / 2); -} - -#service-selector li { - position: relative; -} - -#service-selector li button, -#navigation > button { - border-radius: 0; -} - -#service-selector li.active button { - background-color: #fff2; -} - -#service-selector li.loaded button::before { - content: ""; - display: block; - position: absolute; - right: 0; - top: 50%; - transform: translateY(-50%); - height: 75%; - border-right: 4px solid #ffffff3e; -} - -/*#service-selector li.loaded::after {*/ -/* content: "";*/ -/* position: absolute;*/ -/* top: 50%;*/ -/* right: 2px;*/ -/* transform: translateY(-50%);*/ -/* width: 4px;*/ -/* height: 4px;*/ - -/* background-color: #fff;*/ -/* border-radius: 100%;*/ -/*}*/ - -#navigation button:hover { - background-color: #fff3; -} - #history { display: flex; flex-direction: column; diff --git a/frontend/ts/index.ts b/frontend/ts/index.ts index d0c84d3..e8cf232 100644 --- a/frontend/ts/index.ts +++ b/frontend/ts/index.ts @@ -469,6 +469,7 @@ function loadService(serviceId: number, service: any) { document.querySelector('#services > .loader')?.classList.remove('hidden'); service.view = document.createElement('webview'); + updateNavigation(); // Start loading animation service.view.setAttribute('enableRemoteModule', 'false'); service.view.setAttribute('partition', 'persist:service_' + service.partition); service.view.setAttribute('autosize', 'true'); @@ -653,10 +654,16 @@ function updateNavigation() { for (let i = 0; i < services.length; i++) { const service = services[i]; + if (!service.li) continue; + // Active? if (parseInt(selectedService) === i) service.li.classList.add('active'); else service.li.classList.remove('active'); + // Loading? + if (service.view && !service.viewReady) service.li.classList.add('loading'); + else service.li.classList.remove('loading'); + // Loaded? if (service.viewReady) service.li.classList.add('loaded'); else service.li.classList.remove('loaded');