Add indicator to show the settings sidebar has more options below

SevenTV · Jul 27, 2023 · 918b2a7 · 918b2a7
1 parent 6bb9aba
commit 918b2a7
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 2 deletions.
diff --git a/src/app/settings/SettingsMenu.vue b/src/app/settings/SettingsMenu.vue
@@ -28,7 +28,7 @@
 							<input v-model="filter" placeholder="Search..." class="seventv-settings-search-input" />
 						</div>
 
-						<UiScrollable>
+						<UiScrollable @container-scroll="processSidebarScroll">
 							<div class="seventv-settings-sidebar-categories">
 								<SettingsUpdateButton v-if="!updater.isUpToDate" />
 								<CategoryDropdown
@@ -62,6 +62,16 @@
 									:sub-categories="[]"
 									@open-category="() => ctx.switchView('backup')"
 								/>
+								<div
+									class="seventv-settings-expansion-indicator"
+									:style="{ opacity: sidebarAtTop ? 1 : 0 }"
+								>
+									<div class="color-overlay">
+										<div class="shade-1"></div>
+										<div class="transparent-2"></div>
+									</div>
+									<DropdownIcon class="expansion-icon" />
+								</div>
 							</div>
 						</UiScrollable>
 
@@ -105,6 +115,7 @@ import { SITE_CURRENT_PLATFORM } from "@/common/Constant";
 import { useActor } from "@/composable/useActor";
 import { useSettings } from "@/composable/useSettings";
 import useUpdater from "@/composable/useUpdater";
+import DropdownIcon from "@/assets/svg/icons/DropdownIcon.vue";
 import LogoutIcon from "@/assets/svg/icons/LogoutIcon.vue";
 import Logo7TV from "@/assets/svg/logos/Logo7TV.vue";
 import TwClose from "@/assets/svg/twitch/TwClose.vue";
@@ -207,6 +218,16 @@ function openAuthWindow(): void {
 	actor.openAuthorizeWindow(platform);
 }
 
+const sidebarAtTop = ref(true);
+
+function processSidebarScroll(event: Event) {
+	const target = event.target;
+
+	if (target instanceof Element) {
+		sidebarAtTop.value = target.scrollTop < 3;
+	}
+}
+
 const keys = useMagicKeys();
 const paintToolShortcut = keys["Alt+Shift+P"];
 const storeShortcut = keys["Alt+Shift+S"];
@@ -419,4 +440,46 @@ watch(
 		height: calc(60vh);
 	}
 }
+
+.seventv-settings-expansion-indicator {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: absolute;
+	bottom: 0;
+	width: 100%;
+	padding: 1rem;
+	pointer-events: none;
+	opacity: 1;
+	transition: opacity linear 200ms;
+
+	.color-overlay {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		mask-image: linear-gradient(to top, rgba(0, 0, 0, 100%), rgba(0, 0, 0, 0%));
+		/* stylelint-disable-next-line property-no-vendor-prefix */
+		-webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 100%), rgba(0, 0, 0, 0%));
+
+		> * {
+			position: absolute;
+			width: 100%;
+			height: 100%;
+		}
+
+		.shade-1 {
+			background: var(--seventv-background-shade-1);
+		}
+
+		.transparent-2 {
+			background: var(--seventv-background-transparent-2);
+		}
+	}
+
+	.expansion-icon {
+		margin-top: 3rem;
+		font-size: 1.75rem;
+		transform: rotate(180deg);
+	}
+}
 </style>
diff --git a/src/assets/svg/icons/DropdownIcon.vue b/src/assets/svg/icons/DropdownIcon.vue
@@ -1,5 +1,5 @@
 <template>
-	<svg width="9" height="6" viewBox="0 0 9 6" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+	<svg width="1em" height="0.6666em" viewBox="0 0 9 6" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
 		<path
 			d="M0.221974 4.46565L3.93498 0.251908C4.0157 0.160305 4.10314 0.0955723 4.19731 0.0577097C4.29148 0.0192364 4.39238 5.49454e-08 4.5 5.3662e-08C4.60762 5.23786e-08 4.70852 0.0192364 4.80269 0.0577097C4.89686 0.0955723 4.9843 0.160305 5.06502 0.251908L8.77803 4.46565C8.92601 4.63359 9 4.84733 9 5.10687C9 5.36641 8.92601 5.58015 8.77803 5.74809C8.63005 5.91603 8.4417 6 8.213 6C7.98431 6 7.79596 5.91603 7.64798 5.74809L4.5 2.17557L1.35202 5.74809C1.20404 5.91603 1.0157 6 0.786996 6C0.558296 6 0.369956 5.91603 0.221974 5.74809C0.0739918 5.58015 6.39938e-08 5.36641 6.08988e-08 5.10687C5.78038e-08 4.84733 0.0739918 4.63359 0.221974 4.46565Z"
 		/>