1
0
Fork 1
mirror of https://github.com/zen-browser/desktop.git synced 2025-07-10 22:45:31 +02:00

Added browser loading for glance and animations!

This commit is contained in:
mr. M 2024-10-29 00:38:10 +01:00
parent 15548d9bb2
commit c7bf92f20b
No known key found for this signature in database
GPG key ID: CBD57A2AEDBDA1FB
6 changed files with 200 additions and 32 deletions

@ -1 +1 @@
Subproject commit 416369c981695af637ba640d11f49047473e276c Subproject commit 8cfb95a3ac9d98afb056af0b175ee321cc0298f8

View file

@ -1,6 +1,12 @@
<hbox id="zen-glance-overlay" hidden="true" onclick="gZenGlanceManager.closeGlance()"> <hbox id="zen-glance-overlay" hidden="true" onclick="gZenGlanceManager.onOverlayClick(event)">
<hbox id="zen-glance-content"> <hbox id="zen-glance-content">
<vbox id="zen-glance-browser-container"></vbox> <vbox id="zen-glance-browser-container">
<vbox id="zen-glance-sidebar-container"></vbox> <vbox id="zen-glance-browser">
<hbox id="zen-glance-loading"></hbox>
</vbox>
<vbox id="zen-glance-sidebar-container">
<toolbarbutton id="zen-glance-sidebar-close" class="toolbarbutton-1" oncommand="gZenGlanceManager.closeGlance()"/>
</vbox>
</vbox>
</hbox> </hbox>
</hbox> </hbox>

View file

@ -227,32 +227,105 @@
} }
} }
@keyframes zen-glance-overlay-animation-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes zen-glance-content-animation { @keyframes zen-glance-content-animation {
/* make the box appear from initial width/height and x/y coordinates */ /* make the box appear from initial width/height and x/y coordinates */
0% { 0% {
}
25% {
opacity: 1; opacity: 1;
} }
75% { 30% {
top: -5px;
left: 50%;
transform: translateX(-50%);
}
70% {
/* make the box grow to full width/height */ /* make the box grow to full width/height */
opacity: 1; opacity: 1;
transform: translate(-50%, -50%); transform: translateX(-50%);
top: 50%; top: -5px;
left: 50%; left: 50%;
width: 92%; width: 78%;
height: 92%; height: 103%;
} }
100% { 100% {
/* make the box shrink to final width/height and x/y coordinates */ /* make the box shrink to final width/height and x/y coordinates */
transform: translate(-50%, -50%); transform: translateX(-50%);
opacity: 1; opacity: 1;
width: 90%; width: 75%;
height: 90%; height: 100%;
top: 50%; top: -5px;
left: 50%; left: 50%;
} }
} }
@keyframes zen-glance-content-animation-out {
0% {
opacity: 0;
}
5% {
opacity: 1;
}
96% {
opacity: 1;
}
98% {
/* make the box grow to full width/height */
opacity: 1;
transform: translateX(-50%);
top: -5px;
left: 50%;
width: 77%;
height: 102%;
}
100% {
transform: translateX(-50%);
opacity: 1;
width: 75%;
height: 100%;
top: -5px;
left: 50%;
}
}
@keyframes zen-glance-loading-animation {
0% {
opacity: 1;
width: 80%;
}
90% {
width: 100%;
}
100% {
opacity: 0;
}
}
@keyframes zen-glance-buttons-animation {
from {
right: 0;
opacity: 0;
}
to {
opacity: 1;
transform: translateX(105%);
}
}

View file

@ -5,13 +5,15 @@
position: relative; position: relative;
box-shadow: 0 0 1px 1px light-dark(rgba(0, 0, 0, 0.1), var(--zen-colors-border)); box-shadow: 0 0 1px 1px light-dark(rgba(0, 0, 0, 0.1), var(--zen-colors-border));
& .browserContainer { & .browserContainer,
#zen-glance-browser-container browser {
overflow: hidden; overflow: hidden;
border-radius: var(--zen-webview-border-radius, var(--zen-border-radius)); border-radius: var(--zen-webview-border-radius, var(--zen-border-radius));
} }
@media (-moz-bool-pref: 'zen.view.experimental-rounded-view') { @media (-moz-bool-pref: 'zen.view.experimental-rounded-view') {
&.deck-selected .browserContainer { &.deck-selected .browserContainer,
#zen-glance-browser-container {
mix-blend-mode: multiply; mix-blend-mode: multiply;
} }
} }

View file

@ -7,9 +7,9 @@
top: 0; top: 0;
left: 0; left: 0;
z-index: 3; z-index: 3;
background: color-mix(in srgb, var(--zen-colors-tertiary) 5%, transparent 95%); background: color-mix(in srgb, var(--zen-colors-tertiary) 10%, transparent 90%);
backdrop-filter: blur(2px); backdrop-filter: blur(2px);
animation: zen-glance-overlay-animation 0.2s ease-in-out forwards; animation: zen-glance-overlay-animation 0.1s ease-in-out forwards;
border-radius: var(--zen-border-radius); border-radius: var(--zen-border-radius);
&[hidden='true'] { &[hidden='true'] {
@ -17,15 +17,29 @@
} }
&[fade-out='true'] { &[fade-out='true'] {
background: transparent;
opacity: 1;
& #zen-glance-content { & #zen-glance-content {
& #zen-glance-browser-container { & #zen-glance-browser-container {
transform: translate(var(--initial-x), var(--initial-y)); animation: zen-glance-content-animation-out .3s ease-in-out forwards !important;
width: var(--initial-width); animation-direction: reverse !important;
height: var(--initial-height);
top: 0; & browser {
left: 0; opacity: 0;
opacity: 0; transition: opacity .1s ease-in-out;
transition: all .8s ease-in-out; }
& #zen-glance-sidebar-container {
opacity: 0;
transition: opacity .1s ease-in-out;
}
& #zen-glance-loading {
width: 0 !important;
opacity: 0 !important;
transition: none !important;
}
} }
} }
} }
@ -36,17 +50,89 @@
display: flex; display: flex;
& #zen-glance-browser-container { & #zen-glance-browser-container {
opacity: .5; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
background: var(--zen-dialog-background);
border-radius: var(--zen-border-radius);
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
transform: translate(var(--initial-x), var(--initial-y)); transform: translate(var(--initial-x), var(--initial-y));
width: var(--initial-width); width: var(--initial-width);
height: var(--initial-height); height: var(--initial-height);
animation: zen-glance-content-animation .8s ease-in-out forwards;
position: absolute; position: absolute;
opacity: 0;
top: 0; top: 0;
left: 0; left: 0;
& #zen-glance-browser {
border-radius: var(--zen-border-radius);
background: var(--zen-dialog-background);
overflow: hidden;
width: 100%;
position: relative;
height: 100%;
}
& #zen-glance-sidebar-container {
position: fixed;
top: 1%;
right: 0;
opacity: 0;
border-radius: var(--zen-border-radius);
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
background: var(--zen-dialog-background);
padding: 3px;
gap: 2px;
animation: zen-glance-buttons-animation 0.2s ease-in-out forwards;
animation-delay: 0.3s;
}
& #zen-glance-loading {
height: 2px;
background: var(--zen-primary-color);
pointer-events: none;
position: absolute;
left: 0;
top: 0;
&[not-loading='true'] {
width: 0;
}
&[loading='true'] {
width: 80%;
transition: width 8s ease-in-out;
}
&:not([loading='true']):not([not-loading='true']) {
animation: zen-glance-loading-animation .8s ease-in-out forwards;
}
}
& browser {
width: 100%;
height: 100%;
opacity: 1;
transition: opacity 0.3s ease-in-out;
transition-delay: 0.2s;
}
&[animate='true'] {
animation: zen-glance-content-animation .4s ease-in-out forwards;
animation-delay: 0.1s;
&:not([animate-end='true']) {
pointer-events: none;
& browser {
opacity: 0;
}
& #zen-glance-sidebar-container {
opacity: 0;
animation: none;
pointer-events: none;
}
}
}
} }
} }
} }

View file

@ -44,6 +44,7 @@
#stop-button, #stop-button,
.close-icon, .close-icon,
#zen-sidebar-web-panel-close, #zen-sidebar-web-panel-close,
#zen-glance-sidebar-close,
.zen-theme-picker-custom-list-item-remove { .zen-theme-picker-custom-list-item-remove {
list-style-image: url('close.svg') !important; list-style-image: url('close.svg') !important;
} }