style(clean): apply a class to tera-slider-panel if you want it grey (

#4799) Co-authored-by: Brittany Kondo <bkondo@brittanys-mbp.home>
DARPA-ASKEM · Sep 13, 2024 · 9e2f2c5 · 9e2f2c5
1 parent 33a37c9
commit 9e2f2c5
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 94 deletions.
diff --git a/packages/client/hmi-client/src/components/widgets/tera-slider-panel.vue b/packages/client/hmi-client/src/components/widgets/tera-slider-panel.vue
@@ -18,7 +18,9 @@
 					/>
 					<h4>{{ header }}</h4>
 				</header>
-				<slot name="content" />
+				<div class="content-wrapper">
+					<slot name="content" />
+				</div>
 			</aside>
 			<slot name="overlay" />
 		</template>
@@ -103,6 +105,12 @@ const onScroll = (event: Event) => {
 </script>
 
 <style scoped>
+aside {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+
 header {
 	position: sticky;
 	top: 0;
@@ -114,20 +122,35 @@ header {
 	padding: var(--gap-2);
 	padding-left: var(--gap);
 	gap: var(--gap);
-	background-color: rgba(255, 255, 255, 0.8);
-	backdrop-filter: blur(3px);
 	&.shadow {
 		box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
 	}
 }
 
-aside {
-	height: 100%;
-	overflow-y: auto;
+header:not(.tab) {
+	background-color: rgba(255, 255, 255, 0.8);
+	backdrop-filter: blur(3px);
 }
 
-.p-button.p-button-icon-only.p-button-rounded {
-	height: 2.5rem;
+.content-wrapper {
+	flex: 1;
+}
+
+/* Makes the slider light grey - apply this class to this component when needed */
+.input-config {
+	& header {
+		background: color-mix(in srgb, var(--surface-100) 80%, transparent 20%);
+	}
+
+	& .content-wrapper {
+		padding-bottom: 4rem;
+	}
+
+	& :deep(.slider-content),
+	& :deep(.slider-tab) {
+		background-color: var(--surface-100);
+		border-right: 1px solid var(--surface-border-light);
+	}
 }
 
 .tab {
@@ -139,6 +162,10 @@ h5 {
 	writing-mode: vertical-lr;
 }
 
+.p-button.p-button-icon-only.p-button-rounded {
+	height: var(--gap-10);
+}
+
 .p-badge {
 	background-color: var(--surface-200);
 	color: var(--text-color-primary);

diff --git a/...i-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue b/...i-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue
@@ -7,7 +7,12 @@
 	>
 		<!-- Wizard -->
 		<section :tabName="DrilldownTabs.Wizard" class="wizard">
-			<tera-slider-panel v-model:is-open="isSidebarOpen" header="Calibration settings" content-width="420px">
+			<tera-slider-panel
+				class="input-config"
+				v-model:is-open="isSidebarOpen"
+				header="Calibration settings"
+				content-width="420px"
+			>
 				<template #content>
 					<div class="toolbar">
 						<p>Click Run to begin calibrating.</p>
@@ -159,7 +164,6 @@
 							</div>
 						</div>
 					</section>
-					<div class="spacer m-7" />
 				</template>
 			</tera-slider-panel>
 		</section>
@@ -1028,21 +1032,6 @@ watch(
 </script>
 
 <style scoped>
-/* Left sidebar stuff */
-:deep(.slider-content) {
-	background-color: var(--surface-100);
-	border-right: 1px solid var(--surface-border-light);
-}
-:deep(.slider-content aside header) {
-	background: color-mix(in srgb, var(--surface-100) 80%, transparent 20%);
-}
-:deep(.slider-tab) {
-	background-color: var(--surface-100);
-	border-right: 1px solid var(--surface-border-light);
-}
-:deep(.slider-tab header) {
-	background: transparent;
-}
 .wizard .toolbar {
 	display: flex;
 	align-items: center;

diff --git a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman.vue b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman.vue
@@ -6,7 +6,12 @@
 		@update-state="(state: any) => emit('update-state', state)"
 	>
 		<div :tabName="FunmanTabs.Wizard">
-			<tera-slider-panel v-model:is-open="isSliderOpen" header="Validate configuration settings" content-width="515px">
+			<tera-slider-panel
+				class="input-config"
+				v-model:is-open="isSliderOpen"
+				header="Validate configuration settings"
+				content-width="515px"
+			>
 				<template #content>
 					<div class="top-toolbar">
 						<p>Set your model checks and settings then click run.</p>
@@ -84,7 +89,6 @@
 							</AccordionTab>
 						</Accordion>
 					</main>
-					<div class="spacer m-7" />
 				</template>
 			</tera-slider-panel>
 		</div>
@@ -579,11 +583,6 @@ div.section-row.timespan > div > span {
 	width: 100%;
 }
 
-.spacer {
-	margin-top: 1rem;
-	margin-bottom: 1rem;
-}
-
 .add-constraint-spacer {
 	margin-top: 0.5rem;
 	margin-bottom: 2rem;
@@ -613,25 +612,6 @@ div.section-row.timespan > div > span {
 	grid-template-columns: auto 1fr;
 }
 
-/* Make the slider light grey */
-:deep(.slider-content) {
-	background-color: var(--surface-100);
-	border-right: 1px solid var(--surface-border-light);
-}
-
-:deep(.slider-content header) {
-	background: transparent;
-}
-
-:deep(.slider-tab) {
-	background-color: var(--surface-100);
-	border-right: 1px solid var(--surface-border-light);
-}
-
-:deep(.slider-tab header) {
-	background: transparent;
-}
-
 .top-toolbar {
 	display: flex;
 	align-items: center;

diff --git a/...lient/hmi-client/src/components/workflow/ops/model-config/tera-model-config-drilldown.vue b/...lient/hmi-client/src/components/workflow/ops/model-config/tera-model-config-drilldown.vue
@@ -7,7 +7,12 @@
 		hide-dropdown
 	>
 		<template #sidebar>
-			<tera-slider-panel v-model:is-open="isSidebarOpen" header="Configurations" content-width="360px">
+			<tera-slider-panel
+				class="input-config"
+				v-model:is-open="isSidebarOpen"
+				header="Configurations"
+				content-width="360px"
+			>
 				<template #content>
 					<div class="m-3">
 						<div class="flex flex-row gap-1">
@@ -722,14 +727,6 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-/* Make left sidebar grey */
-:deep(.slider-content) {
-	background-color: var(--surface-100);
-}
-:deep(.slider-content aside header) {
-	background: color-mix(in srgb, var(--surface-100) 80%, transparent 20%);
-}
-
 .processing-new-configuration-tile {
 	display: flex;
 	flex-direction: row;

diff --git a/...hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss-drilldown.vue b/...hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss-drilldown.vue
@@ -7,7 +7,12 @@
 	>
 		<!-- Wizard tab -->
 		<section :tabName="DrilldownTabs.Wizard" class="wizard">
-			<tera-slider-panel v-model:is-open="isSidebarOpen" header="Optimize intervention settings" content-width="420px">
+			<tera-slider-panel
+				class="input-config"
+				v-model:is-open="isSidebarOpen"
+				header="Optimize intervention settings"
+				content-width="420px"
+			>
 				<template #content>
 					<div class="toolbar">
 						<p>Click Run to start optimization.</p>
@@ -1079,23 +1084,6 @@ watch(
 </script>
 
 <style scoped>
-/* Left sidebar styles */
-:deep(.slider-content) {
-	background-color: var(--surface-100);
-	border-right: 1px solid var(--surface-border-light);
-	height: auto;
-	padding-bottom: 7rem;
-}
-:deep(.slider-content aside header) {
-	background: color-mix(in srgb, var(--surface-100) 80%, transparent 20%);
-}
-:deep(.slider-tab) {
-	background-color: var(--surface-100);
-	border-right: 1px solid var(--surface-border-light);
-}
-:deep(.slider-tab header) {
-	background: transparent;
-}
 .wizard .toolbar {
 	display: flex;
 	align-items: center;

diff --git a/...hmi-client/src/components/workflow/ops/simulate-ciemss/tera-simulate-ciemss-drilldown.vue b/...hmi-client/src/components/workflow/ops/simulate-ciemss/tera-simulate-ciemss-drilldown.vue
@@ -8,7 +8,12 @@
 	>
 		<!-- Wizard -->
 		<section :tabName="DrilldownTabs.Wizard" class="wizard">
-			<tera-slider-panel v-model:is-open="isSidebarOpen" header="Simulation settings" content-width="420px">
+			<tera-slider-panel
+				class="input-config"
+				v-model:is-open="isSidebarOpen"
+				header="Simulation settings"
+				content-width="420px"
+			>
 				<template #content>
 					<div class="toolbar">
 						<p>Click Run to start the simulation.</p>
@@ -549,21 +554,6 @@ onUnmounted(() => kernelManager.shutdown());
 </script>
 
 <style scoped>
-/* Make left sidebar grey */
-:deep(.slider-content) {
-	background-color: var(--surface-100);
-	border-right: 1px solid var(--surface-border-light);
-}
-:deep(.slider-content aside header) {
-	background: color-mix(in srgb, var(--surface-100) 80%, transparent 20%);
-}
-:deep(.slider-tab) {
-	background-color: var(--surface-100);
-	border-right: 1px solid var(--surface-border-light);
-}
-:deep(.slider-tab header) {
-	background: transparent;
-}
 .wizard .toolbar {
 	display: flex;
 	align-items: center;