Skip to content

Commit 9c4b98a

Browse files
hristoiankovhristoiankov
committed
project button animation upgrade
1 parent d662e88 commit 9c4b98a

3 files changed

Lines changed: 133 additions & 25 deletions

File tree

‎cider-app/src/app/welcome/welcome.component.html‎

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,40 @@
1-
<app-page-header [header]="'welcome.title' | translate"
2-
[subheader]="isElectron ? ('welcome.subtitle-electron' | translate)
1+
<app-page-header [header]="'welcome.title' | translate" [subheader]="isElectron ? ('welcome.subtitle-electron' | translate)
32
: ('welcome.subtitle' | translate)"></app-page-header>
43
<p-card styleClass="artwork-card"></p-card>
54
@if (isElectron) {
6-
<p-card styleClass="projects-card">
7-
<p-button label="+ Blank Project"
8-
(click)="newProject(true)"></p-button>
9-
<p-button label="Sample Card Game"
10-
(click)="newProject(false)"></p-button>
11-
@for (projectUrl of recentProjectUrls; track projectUrl) {
12-
<p-button styleClass="project-button"
13-
[label]="projectUrl.name"
14-
(mouseover)="projectUrl.hover = true"
15-
(mouseout)="projectUrl.hover = false"
16-
(click)="openProject(projectUrl.persistentPath)"
17-
[style]="{
5+
<p-card styleClass="projects-card">
6+
<p-button label="+ Blank Project" (click)="newProject(true)"></p-button>
7+
<p-button label="Sample Card Game" (click)="newProject(false)"></p-button>
8+
@for (projectUrl of recentProjectUrls; track projectUrl) {
9+
<p-button styleClass="project-button" (mouseover)="projectUrl.hover = true" (mouseout)="projectUrl.hover = false"
10+
(click)="openProject(projectUrl.persistentPath)" [style]="{
1811
'background': projectUrl.hover
1912
? 'linear-gradient(45deg, hsl(' + projectUrl.hue + ' 50% 50%),
20-
hsl(' + projectUrl.hue2 + ' 50% 35%)) 0% 0% / 250% 250%'
13+
hsl(' + projectUrl.hue2 + ' 50% 55%)) 0% 0% / 250% 250%'
2114
: 'linear-gradient(45deg, hsl(' + projectUrl.hue + ' 50% 45%),
22-
hsl(' + projectUrl.hue2 + ' 50% 30%)) 0% 0% / 250% 250%'
23-
}"></p-button>
24-
}
25-
</p-card>
15+
hsl(' + projectUrl.hue2 + ' 50% 50%)) 0% 0% / 250% 250%'
16+
}">
17+
<span class="project-label">{{ projectUrl.name }}</span>
18+
<div class="bubbles-container">
19+
@for (bubble of projectUrl.bubbles; track bubble) {
20+
<span class="bubble" [style.left]="bubble.left" [style.width]="bubble.size" [style.height]="bubble.size"
21+
[style.animationDuration]="bubble.duration" [style.animationDelay]="bubble.delay"></span>
22+
}
23+
</div>
24+
</p-button>
25+
}
26+
</p-card>
2627
}
2728
<p-confirmDialog [style]="{width: '450px'}"></p-confirmDialog>
28-
<p-dialog [header]="loadingHeader" [(visible)]="displayLoading" [style]="{width: '450px'}" [modal]="true" >
29+
<p-dialog [header]="loadingHeader" [(visible)]="displayLoading" [style]="{width: '450px'}" [modal]="true">
2930
<div class="p-field">
3031
Please wait for the process to complete.
3132
</div>
3233
<p-progressbar [value]="loadingPercent" [showValue]="false"
33-
[mode]="loadingIndeterminate ? 'indeterminate' : 'determinate'"></p-progressbar>
34+
[mode]="loadingIndeterminate ? 'indeterminate' : 'determinate'"></p-progressbar>
3435
<div class="p-field p-mt-2">
3536
{{loadingInfo}}
3637
</div>
3738
</p-dialog>
3839

39-
<div style="height: 25px"></div>
40+
<div style="height: 25px"></div>

‎cider-app/src/app/welcome/welcome.component.scss‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@
1515
// margin-right: 21px;
1616
color: #e4e4e6;
1717
background: #343e4d;
18+
// background: var(--cider-surface-border);
19+
// color: var(--cider-text-color);
1820
border-radius: 10px;
1921
border-width: 0;
2022

@@ -23,6 +25,8 @@
2325
}
2426

2527
&.project-button {
28+
position: relative; // Ensure absolute children are relative to this button
29+
overflow: hidden; // Ensure bubbles don't spill out
2630
animation: gradient 5s ease infinite;
2731

2832
&::after,
@@ -49,6 +53,68 @@
4953
animation: liquid 10s linear infinite;
5054
}
5155

56+
.project-label {
57+
position: relative;
58+
z-index: 10;
59+
}
60+
61+
.bubbles-container {
62+
position: absolute;
63+
top: 0;
64+
left: 0;
65+
width: 100%;
66+
height: 100%;
67+
overflow: hidden;
68+
pointer-events: none;
69+
border-radius: 10px; // Match button radius
70+
// z-index: 5; // Removed to let it sit between ::before and ::after naturally
71+
// Button background is on main element.
72+
// ::before/::after are pseudo elements.
73+
// If ::before/after z-index is auto (0), then bubbles (z-index 5) will be ON TOP of liquid?
74+
// The liquid pseudo elements are at z-index auto in same stacking context.
75+
// If they appear after content in DOM (pseudo elements are children), they might sit on top if z-index is same.
76+
// But specifically:
77+
// Stacking order:
78+
// 1. Background/Borders of root element
79+
// 2. Negative z-index children
80+
// 3. Block level non-positioned children
81+
// 4. Floats
82+
// 5. Inline non-positioned children
83+
// 6. z-index: auto or 0 positioned children (including pseudo elements if positioned)
84+
// 7. Positive z-index children
85+
86+
// If bubbles are z-index: 5, they will be ABOVE z-index: auto pseudo elements.
87+
// Depending on the desired effect:
88+
// If "liquid" is the pseudo-elements, bubbles should be inside/below them?
89+
// But the pseudo elements rotate and cover existing background.
90+
// If bubbles are *under* the pseudo elements, they might be obscured by the semi-transparent dark liquid.
91+
// This gives a "deep" look.
92+
// If they are on top, they look like they are on the surface or in front of the turbulence.
93+
// I think z-index 0 or 1 might be safer to be under the text (10).
94+
// Let's try z-index: 0 for bubbles container.
95+
// And since it's positioned absolute, it competes with pseudo elements (also positioned absolute).
96+
// If both are z-index 0/auto, DOM order matters.
97+
// Pseudo elements usually come *before* or *after* content. `::before` is before, `::after` is after.
98+
// So order: `::before` -> content -> `::after`.
99+
// So bubbles will be above `::before` but below `::after`?
100+
// This puts them "sandwiched" which creates a nice depth effect naturally!
101+
}
102+
103+
.bubble {
104+
position: absolute;
105+
bottom: -20px;
106+
background: rgba(255, 255, 255, 0.4); // Increased opacity for visibility
107+
border-radius: 50%;
108+
z-index: 1; // Try to force it above background layers slightly
109+
z-index: 1; // Try to force it above background layers slightly
110+
pointer-events: none;
111+
animation-name: rise;
112+
animation-timing-function: ease-in;
113+
animation-iteration-count: infinite;
114+
115+
116+
}
117+
52118
&:hover::after,
53119
&:hover::before {
54120
top: -50px;
@@ -81,6 +147,29 @@
81147
}
82148
}
83149

150+
@keyframes rise {
151+
0% {
152+
bottom: -10px;
153+
transform: translateX(0) scale(1);
154+
opacity: 0;
155+
}
156+
157+
50% {
158+
opacity: 1;
159+
transform: translateX(-5px) scale(1);
160+
}
161+
162+
75% {
163+
transform: translateX(-8px) scale(1);
164+
}
165+
166+
100% {
167+
bottom: 110%;
168+
transform: translateX(-10px) scale(0);
169+
opacity: 0;
170+
}
171+
}
172+
84173
:host ::ng-deep app-page-header .p-card {
85174
margin-left: 0;
86175
}

‎cider-app/src/app/welcome/welcome.component.ts‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,19 @@ export class WelcomeComponent implements OnInit {
3131
projectHomeUrl$: Observable<PersistentPath | undefined>;
3232
projectUnsaved$: Observable<boolean>;
3333

34-
recentProjectUrls: { persistentPath: PersistentPath; name: string; hue: number; hue2: number; hover: boolean }[] = [];
34+
recentProjectUrls: {
35+
persistentPath: PersistentPath;
36+
name: string;
37+
hue: number;
38+
hue2: number;
39+
hover: boolean,
40+
bubbles: {
41+
left: string;
42+
size: string;
43+
duration: string;
44+
delay: string;
45+
}[]
46+
}[] = [];
3547

3648
constructor(private localStorageService: LocalStorageService,
3749
private confirmationService: ConfirmationService,
@@ -62,7 +74,7 @@ export class WelcomeComponent implements OnInit {
6274
// 'usr/epic-quest-of-heroes',
6375
// 'usr/ancient-ruins-exploration',
6476
// ];
65-
// this.recentProjectUrls = urls.map(url => this.urlToProjectInfo(url));
77+
// this.recentProjectUrls = urls.map(url => this.urlToProjectInfo({ path: url, bookmark: undefined }));
6678
}
6779

6880
private urlToProjectInfo(persistentPath: PersistentPath) {
@@ -74,7 +86,13 @@ export class WelcomeComponent implements OnInit {
7486
name: name,
7587
hue: hue,
7688
hue2: (hue + hue2diff) % 360,
77-
hover: false
89+
hover: false,
90+
bubbles: Array.from({ length: 10 }, () => ({
91+
left: Math.floor(Math.random() * 90) + '%',
92+
size: (3 + Math.floor(Math.random() * 5)) + 'px',
93+
duration: (3 + Math.floor(Math.random() * 4)) + 's',
94+
delay: (Math.floor(Math.random() * 20) / 10) + 's'
95+
}))
7896
}
7997
}
8098

0 commit comments

Comments
 (0)