Add service loading navigation button animation

This commit is contained in:
Alice Gaudon 2020-07-14 11:08:09 +02:00
parent ae1c343560
commit 92659c64f2
2 changed files with 118 additions and 108 deletions

View File

@ -7,6 +7,16 @@ body {
flex-direction: row; flex-direction: row;
} }
#service-buttons {
flex-grow: 1;
overflow: hidden auto;
}
*:focus {
outline-color: rgb(118, 93, 176);
}
#navigation { #navigation {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -16,72 +26,12 @@ body {
body.fullscreen & { body.fullscreen & {
display: none; display: none;
} }
}
#navigation > :not(#service-buttons) { > :not(#service-buttons) {
flex-shrink: 0; flex-shrink: 0;
} }
#service-buttons { button {
flex-grow: 1;
overflow: hidden auto;
}
#service-selector {
display: block;
margin: 0;
padding: 0;
list-style: none;
}
#service-selector::-webkit-scrollbar {
width: 6px;
}
#service-selector [draggable] {
user-select: none;
background-color: rgb(43, 43, 43);
}
#service-selector [draggable] img {
-webkit-user-drag: none;
user-drag: none;
}
#service-selector .drag-target button::after,
#service-last-drag-position.drag-target {
content: "";
height: 4px;
transform: translateY(-50%);
border: 0;
box-sizing: border-box;
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; position: relative;
display: block; display: block;
width: var(--nav-width); width: var(--nav-width);
@ -94,35 +44,51 @@ body {
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
} border-radius: 0;
#navigation button:focus { &:focus {
outline: none; outline: none;
background: #fff3 !important; background: #fff3 !important;
} }
#navigation button img { &:hover {
width: calc(var(--nav-width) / 2); background-color: #fff3;
} }
#navigation button i { i {
font-size: calc(var(--nav-width) / 2); font-size: calc(var(--nav-width) / 2);
} }
#service-selector li { img {
position: relative; width: calc(var(--nav-width) / 2);
}
}
} }
#service-selector li button, #service-selector {
#navigation > button { display: block;
margin: 0;
padding: 0;
list-style: none;
&::-webkit-scrollbar {
width: 6px;
}
li {
position: relative;
button {
border-radius: 0; border-radius: 0;
} }
#service-selector li.active button { &.active button {
background-color: #fff2; background-color: #fff2;
} }
#service-selector li.loaded button::before { &.loading, &.loaded {
button::before {
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
@ -132,22 +98,59 @@ body {
height: 75%; height: 75%;
border-right: 4px solid #ffffff3e; border-right: 4px solid #ffffff3e;
} }
}
/*#service-selector li.loaded::after {*/ &.loading button::before {
/* content: "";*/ animation: loading-button-after linear 500ms infinite alternate;
/* position: absolute;*/ height: 45%;
/* top: 50%;*/
/* right: 2px;*/
/* transform: translateY(-50%);*/
/* width: 4px;*/
/* height: 4px;*/
/* background-color: #fff;*/ @keyframes loading-button-after {
/* border-radius: 100%;*/ from {
/*}*/ opacity: 0.1;
}
to {
opacity: 0.5;
}
}
}
}
#navigation button:hover { [draggable] {
background-color: #fff3; 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,
#service-last-drag-position.drag-target {
content: "";
height: 4px;
transform: translateY(-50%);
border: 0;
box-sizing: border-box;
background: #fff9;
} }
#history { #history {

View File

@ -469,6 +469,7 @@ function loadService(serviceId: number, service: any) {
document.querySelector('#services > .loader')?.classList.remove('hidden'); document.querySelector('#services > .loader')?.classList.remove('hidden');
service.view = document.createElement('webview'); service.view = document.createElement('webview');
updateNavigation(); // Start loading animation
service.view.setAttribute('enableRemoteModule', 'false'); service.view.setAttribute('enableRemoteModule', 'false');
service.view.setAttribute('partition', 'persist:service_' + service.partition); service.view.setAttribute('partition', 'persist:service_' + service.partition);
service.view.setAttribute('autosize', 'true'); service.view.setAttribute('autosize', 'true');
@ -653,10 +654,16 @@ function updateNavigation() {
for (let i = 0; i < services.length; i++) { for (let i = 0; i < services.length; i++) {
const service = services[i]; const service = services[i];
if (!service.li) continue;
// Active? // Active?
if (parseInt(selectedService) === i) service.li.classList.add('active'); if (parseInt(selectedService) === i) service.li.classList.add('active');
else service.li.classList.remove('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? // Loaded?
if (service.viewReady) service.li.classList.add('loaded'); if (service.viewReady) service.li.classList.add('loaded');
else service.li.classList.remove('loaded'); else service.li.classList.remove('loaded');