Skip to content

Commit cdff44a

Browse files
committed
splash screen with theme-aware SVG background, login dialog redesign
- Replace ValueDialog-based LoginDialog with Dialog-based layout styled like SettingsDialog - Add splash screen overlay with percussion-background.svg mask, auto-adapts to theme - Show splash during Setup, AdminSetup, Login phases; fade out on Running - Add logo.svg watermark (top-right, desaturated, wobble animation every 5s) - Center ProgressIndicator in a rounded card during Checking phase - Button component passes type attribute to native <button> element - Fix Sign In from Running: transition through Login phase for proper splash display - Fix continue-anonymous from Running: return directly without reinitializing - Fix stale StatusBar items and score lib after logout/login without page refresh - Tests updated Signed-off-by: Mike Lischke <mike@lischke-online.de>
1 parent 6e6f100 commit cdff44a

13 files changed

Lines changed: 4788 additions & 403 deletions

File tree

public/percussion-background.svg

Lines changed: 4111 additions & 0 deletions
Loading

src/App.scss

Lines changed: 81 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,79 @@ h6 {
6767
}
6868
}
6969

70+
#splashScreen {
71+
position: fixed;
72+
inset: 0;
73+
display: flex;
74+
justify-content: center;
75+
align-items: center;
76+
z-index: 1000;
77+
opacity: 0;
78+
pointer-events: none;
79+
transition: opacity 0.3s ease-out;
80+
81+
&::before {
82+
content: "";
83+
position: absolute;
84+
inset: 24px;
85+
background-color: var(--color-base-content);
86+
mask: url("/percussion-background.svg") center / contain no-repeat;
87+
}
88+
89+
&::after {
90+
content: "";
91+
position: absolute;
92+
top: 24px;
93+
right: 24px;
94+
width: 120px;
95+
height: 144px;
96+
background: url("/logo.svg") center / contain no-repeat;
97+
filter: saturate(0);
98+
opacity: 0.5;
99+
animation: logoWobble 5s ease-in-out infinite;
100+
}
101+
102+
&.splash-visible {
103+
opacity: 1;
104+
pointer-events: auto;
105+
}
106+
}
107+
108+
@keyframes logoWobble {
109+
110+
0%,
111+
10%,
112+
100% {
113+
transform: rotate(0deg);
114+
}
115+
116+
1%,
117+
3%,
118+
7%,
119+
9% {
120+
transform: rotate(1.5deg);
121+
}
122+
123+
2%,
124+
8% {
125+
transform: rotate(-1.5deg);
126+
}
127+
128+
5% {
129+
transform: rotate(0deg) scale(1.1);
130+
}
131+
}
132+
133+
.progressIndicatorCard {
134+
display: flex;
135+
justify-content: center;
136+
align-items: center;
137+
width: 180px;
138+
height: 180px;
139+
background: var(--color-base-100);
140+
border-radius: 12px;
141+
}
142+
70143
.separator {
71144
width: 8px;
72145
height: 100%;
@@ -146,6 +219,10 @@ h6 {
146219
#arrangementPlayControls {
147220
margin: 8px 0;
148221
height: 90%;
222+
223+
#recordButton {
224+
margin-left: 20px;
225+
}
149226
}
150227

151228
#arrangementEditControls {
@@ -1662,14 +1739,12 @@ h6 {
16621739
}
16631740

16641741
#settingsDialog .zoomButton {
1665-
border: none;
16661742
width: 32px;
16671743
height: 32px;
16681744
margin: 0 2px;
16691745
}
16701746

16711747
#settingsDialog .resetButton {
1672-
border: none;
16731748
height: 32px;
16741749
margin-left: 8px;
16751750
padding: 0 12px;
@@ -1837,3 +1912,7 @@ h6 {
18371912
}
18381913
}
18391914
}
1915+
1916+
#backendSetupDialog #backend-setup-header {
1917+
margin-bottom: 12px;
1918+
}

0 commit comments

Comments
 (0)