Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 8 commits into from
Sep 13, 2024
Merged

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

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1f4ab90
create input config rule
shawnyama Sep 13, 2024
844d611
Merge branch 'main' into simplify-slider-css
shawnyama Sep 13, 2024
4cd8dea
padding
shawnyama Sep 13, 2024
e735723
Merge branch 'simplify-slider-css' of https://github.com/DARPA-ASKEM/…
shawnyama Sep 13, 2024
b5d23c2
remove unused spacers
Sep 13, 2024
d6622c4
s
shawnyama Sep 13, 2024
fe86060
Merge branch 'simplify-slider-css' of https://github.com/DARPA-ASKEM/…
shawnyama Sep 13, 2024
730a723
flex 1
shawnyama Sep 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 29 additions & 8 deletions packages/client/hmi-client/src/components/widgets/tera-slider-panel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,9 @@
/>
<h4>{{ header }}</h4>
</header>
<slot name="content" />
<div class="content-wrapper">
<slot name="content" />
</div>
</aside>
<slot name="overlay" />
</template>
Expand Down Expand Up @@ -103,6 +105,10 @@ const onScroll = (event: Event) => {
</script>

<style scoped>
aside {
height: 100%;
}

header {
position: sticky;
top: 0;
Expand All @@ -114,20 +120,31 @@ 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;
/* 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 {
Expand All @@ -139,6 +156,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);
Expand Down
23 changes: 6 additions & 17 deletions ...i-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -159,7 +164,6 @@
</div>
</div>
</section>
<div class="spacer m-7" />
</template>
</tera-slider-panel>
</section>
Expand Down Expand Up @@ -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;
Expand Down
32 changes: 6 additions & 26 deletions packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -84,7 +89,6 @@
</AccordionTab>
</Accordion>
</main>
<div class="spacer m-7" />
</template>
</tera-slider-panel>
</div>
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
15 changes: 6 additions & 9 deletions ...lient/hmi-client/src/components/workflow/ops/model-config/tera-model-config-drilldown.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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;
Expand Down
24 changes: 6 additions & 18 deletions ...hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss-drilldown.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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;
shawnyama marked this conversation as resolved.
Show resolved Hide resolved
}
: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;
Expand Down
22 changes: 6 additions & 16 deletions ...hmi-client/src/components/workflow/ops/simulate-ciemss/tera-simulate-ciemss-drilldown.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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;
Expand Down
Loading