Skip to content

Commit f9a206c

Browse files
nikitalokhmachev-ainikitalokhmachev-ai
committed
feat: animations
1 parent fe41ff1 commit f9a206c

1 file changed

Lines changed: 95 additions & 70 deletions

File tree

‎src/sidepanel.ts‎

Lines changed: 95 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,35 @@ class ArgoViewer extends LitElement {
126126
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.6));
127127
}
128128
129+
/* Fade overlay styles */
130+
.tabs-wrapper {
131+
position: relative;
132+
}
133+
134+
.tabs-overlay {
135+
transition: opacity 0.3s ease;
136+
}
137+
.tabs-overlay.inactive {
138+
opacity: 0;
139+
pointer-events: none;
140+
}
141+
142+
.actions-overlay {
143+
position: absolute;
144+
top: 0;
145+
left: 0;
146+
width: 100%;
147+
transition: opacity 0.3s ease;
148+
opacity: 0;
149+
pointer-events: none;
150+
background: white;
151+
z-index: 1;
152+
}
153+
.actions-overlay.active {
154+
opacity: 1;
155+
pointer-events: auto;
156+
}
157+
129158
md-icon[filled] {
130159
font-variation-settings: "FILL" 1;
131160
}
@@ -852,90 +881,86 @@ class ArgoViewer extends LitElement {
852881

853882
renderTabs() {
854883
return html`
855-
${
856-
// @ts-expect-error - TS2339 - Property 'selectedCount' does not exist on type 'ArgoViewer'.
857-
this.selectedCount > 0
858-
? html`
859-
<div
860-
style="display:flex; align-items:center; justify-content:space-between; padding: 0.25rem 1rem;"
861-
>
862-
<div style="display:flex; align-items:center; gap: 0.5rem;">
863-
<!-- Deselect All -->
864-
<md-icon-button
865-
aria-label="Deselect All"
866-
@click=${() => {
867-
this.archiveList.clearSelection();
868-
// @ts-expect-error
869-
this.selectedCount = 0;
870-
}}
871-
>
872-
<md-icon style="color: gray">clear</md-icon>
873-
</md-icon-button>
874-
875-
<span class="md-typescale-body-small"
876-
>${
877-
// @ts-expect-error - TS2339 - Property 'selectedCount' does not exist on type 'ArgoViewer'.
878-
this.selectedCount
879-
}
880-
selected</span
881-
>
882-
</div>
883-
884-
<!-- Download -->
885-
<div style="display:flex; align-items:center; gap: 0.5rem;">
886-
<md-icon-button
887-
aria-label="Download"
888-
@click=${this.onDownload}
889-
>
890-
<md-icon>download</md-icon>
891-
</md-icon-button>
884+
<div class="tabs-wrapper">
885+
<!-- Original tabs overlay -->
886+
<div
887+
class="tabs-overlay ${
888+
//@ts-expect-error
889+
this.selectedCount > 0 ? "inactive" : ""
890+
}"
891+
>
892+
<md-tabs id="tabs" aria-label="Archive tabs">
893+
<md-primary-tab class="md-typescale-label-large"
894+
>My Archives</md-primary-tab
895+
>
896+
<md-primary-tab class="md-typescale-label-large"
897+
>My Shared Archives</md-primary-tab
898+
>
899+
</md-tabs>
900+
</div>
892901
893-
<!-- Share -->
894-
<md-icon-button
895-
aria-label="Share"
896-
@click=${this.onShareSelected}
897-
>
898-
<md-icon>share</md-icon>
899-
</md-icon-button>
902+
<!-- Actions overlay on selection -->
903+
<div
904+
class="actions-overlay ${
905+
//@ts-expect-error
906+
this.selectedCount > 0 ? "active" : ""
907+
}"
908+
>
909+
<div
910+
style="display:flex; align-items:center; justify-content:space-between; padding: 0.25rem 1rem;"
911+
>
912+
<div style="display:flex; align-items:center; gap: 0.5rem;">
913+
<md-icon-button
914+
aria-label="Deselect All"
915+
@click=${() => {
916+
this.archiveList.clearSelection();
917+
//@ts-expect-error
918+
this.selectedCount = 0;
919+
}}
920+
>
921+
<md-icon style="color: gray">clear</md-icon>
922+
</md-icon-button>
923+
<span class="md-typescale-body-small"
924+
>${
925+
//@ts-expect-error
926+
this.selectedCount
927+
}
928+
selected</span
929+
>
930+
</div>
900931
901-
<!-- Delete -->
902-
<md-icon-button
903-
aria-label="Delete"
904-
@click=${this.onDeleteSelected}
905-
>
906-
<md-icon>delete</md-icon>
907-
</md-icon-button>
908-
</div>
909-
</div>
910-
<md-divider></md-divider>
911-
`
912-
: html`
913-
<!-- ─── NORMAL TABS BAR ─── -->
914-
<md-tabs id="tabs" aria-label="Archive tabs">
915-
<md-primary-tab class="md-typescale-label-large"
916-
>My Archives</md-primary-tab
917-
>
918-
<md-primary-tab class="md-typescale-label-large"
919-
>My Shared Archives</md-primary-tab
920-
>
921-
</md-tabs>
922-
`
923-
}
932+
<div style="display:flex; align-items:center; gap: 0.5rem;">
933+
<md-icon-button aria-label="Download" @click=${this.onDownload}
934+
><md-icon>download</md-icon></md-icon-button
935+
>
936+
<md-icon-button aria-label="Share" @click=${this.onShareSelected}
937+
><md-icon>share</md-icon></md-icon-button
938+
>
939+
<md-icon-button
940+
aria-label="Delete"
941+
@click=${this.onDeleteSelected}
942+
><md-icon>delete</md-icon></md-icon-button
943+
>
944+
</div>
945+
</div>
946+
<md-divider></md-divider>
947+
</div>
948+
</div>
924949
925-
<!-- ─── PANELS ─── -->
950+
<!-- Panels remain unchanged -->
926951
<div
927952
class="tab-panels"
928953
style="flex:1; overflow-y:auto; position:relative; flex-grow:1;"
929954
@selection-change=${(e: CustomEvent) =>
930-
// @ts-expect-error - TS2339 - Property 'selectedCount' does not exist on type 'ArgoViewer'.
955+
// @ts-expect-error
931956
(this.selectedCount = e.detail.count)}
932957
>
933958
<div id="my-archives" class="tab-panel" active>
934959
${this.renderStatusCard()}
935960
<argo-archive-list
936961
id="archive-list"
937962
.filterQuery=${
938-
// @ts-expect-error - TS2339 - Property 'searchQuery' does not exist on type 'ArgoViewer'.
963+
// @ts-expect-error
939964
this.searchQuery
940965
}
941966
></argo-archive-list>

0 commit comments

Comments
 (0)