ZenBrowserMirrors/zen-desktop
1
0
Fork 1
mirror of https://github.com/zen-browser/desktop.git synced 2025-07-10 19:25:40 +02:00
Code Releases Wiki Activity

Added browser loading for glance and animations!

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

2
src/browser/base/content/zen-components

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

12
src/browser/base/content/zen-glance.inc.xhtml
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">
<vbox id="zen-glance-browser-container"></vbox>
<vbox id="zen-glance-sidebar-container"></vbox>
<vbox id="zen-glance-browser-container">
<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>

97
src/browser/base/content/zen-styles/zen-animations.css
View file

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

6
src/browser/base/content/zen-styles/zen-browser-container.css
View file

@ -5,13 +5,15 @@
position: relative;
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;
border-radius: var(--zen-webview-border-radius, var(--zen-border-radius));
}
@media (-moz-bool-pref: 'zen.view.experimental-rounded-view') {
&.deck-selected .browserContainer {
&.deck-selected .browserContainer,
#zen-glance-browser-container {
mix-blend-mode: multiply;
}
}

112
src/browser/base/content/zen-styles/zen-glance.css
View file

@ -7,9 +7,9 @@
top: 0;
left: 0;
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);
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);
&[hidden='true'] {
@ -17,15 +17,29 @@
}
&[fade-out='true'] {
background: transparent;
opacity: 1;
& #zen-glance-content {
& #zen-glance-browser-container {
transform: translate(var(--initial-x), var(--initial-y));
width: var(--initial-width);
height: var(--initial-height);
top: 0;
left: 0;
animation: zen-glance-content-animation-out .3s ease-in-out forwards !important;
animation-direction: reverse !important;
& browser {
opacity: 0;
transition: all .8s ease-in-out;
transition: opacity .1s 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;
& #zen-glance-browser-container {
opacity: .5;
background: var(--zen-dialog-background);
border-radius: var(--zen-border-radius);
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
transform: translate(var(--initial-x), var(--initial-y));
width: var(--initial-width);
height: var(--initial-height);
animation: zen-glance-content-animation .8s ease-in-out forwards;
position: absolute;
opacity: 0;
top: 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;
}
}
}
}
}
}

1
src/browser/themes/shared/zen-icons/icons.css
View file

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