cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-19 14:14:17 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

refactor: reusable dialog management

Browse Source
This commit is contained in:
Carlos Valente
2025-06-22 11:23:45 +02:00
committed by Carlos Valente
parent e0f2830072
commit 3f3cef7d6f
15 changed files with 35 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/common/components/identify-overlay/IdentifyOverlay.module.scss
+1 -1
View File
@@ -15,7 +15,7 @@
display: grid; display: grid;
place-content: center; place-content: center;
text-align: center; text-align: center;
z-index: 100; z-index: $zindex-modal;
cursor: pointer; cursor: pointer;
} }
apps/client/src/common/components/view-params-editor/ViewParamsEditor.module.scss
+4 -4
View File
@@ -11,8 +11,8 @@
.backdrop { .backdrop {
position: fixed; position: fixed;
inset: 0; inset: 0;
z-index: 10; z-index: $zindex-backdrop;
background-color: rgba(0, 0, 0, 0.7); background-color: $backdrop-color;
transition: opacity 300ms cubic-bezier(0.45, 1.005, 0, 1.005); transition: opacity 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
&[data-starting-style], &[data-starting-style],
@@ -27,7 +27,7 @@
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
z-index: 11; z-index: $zindex-dialog;
width: 40rem; width: 40rem;
height: 100vh; height: 100vh;
@@ -70,7 +70,7 @@
.body { .body {
flex: 1; flex: 1;
padding-bottom: 10vh; padding-bottom: 10vh;
overflow-y: scroll; overflow-y: auto;
} }
.footer { .footer {
apps/client/src/features/app-settings/panel-content/PanelContent.module.scss
+1 -1
View File
@@ -2,7 +2,7 @@
position: absolute; position: absolute;
top: 1rem; top: 1rem;
right: 2rem; right: 2rem;
z-index: 100; z-index: $zindex-floating;
} }
.contentWrapper { .contentWrapper {
apps/client/src/features/app-settings/panel-utils/PanelUtils.module.scss
+3 -3
View File
@@ -92,7 +92,7 @@ $inner-padding: 1rem;
thead { thead {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 3; z-index: $zindex-floating;
background-color: $gray-1350; background-color: $gray-1350;
} }
@@ -152,12 +152,12 @@ $inner-padding: 1rem;
.divider { .divider {
border-top: 1px solid $white-10; border-top: 1px solid $white-10;
margin: 1rem -2rem; margin: 1rem -2rem;
z-index: 999; z-index: $zindex-floating;
} }
.overlay { .overlay {
position: absolute; position: absolute;
z-index: 10; z-index: $zindex-backdrop;
width: 100%; width: 100%;
height: 100%; height: 100%;
backdrop-filter: blur(2px); backdrop-filter: blur(2px);
apps/client/src/features/app-settings/panel/automations-panel/template-input/TemplateInput.module.scss
+1 -1
View File
@@ -11,7 +11,7 @@
left: 0; left: 0;
width: 100%; width: 100%;
margin: 0; margin: 0;
z-index: 5; z-index: $zindex-floating;
padding-block: 0.25rem; padding-block: 0.25rem;
max-height: 200px; max-height: 200px;
apps/client/src/features/operator/Operator.module.scss
+2 -2
View File
@@ -20,12 +20,12 @@
.editPrompt { .editPrompt {
position: fixed; position: fixed;
z-index: 1; z-index: $zindex-dialog;
left: 50%; left: 50%;
transform: translate(-50%, 0); transform: translate(-50%, 0);
text-align: center; text-align: center;
background: rgba(0,0,0, 0.7); background: $backdrop-color;
border-radius: 2px; border-radius: 2px;
padding: 0.5em 2em; padding: 0.5em 2em;
color: $orange-500; color: $orange-500;
apps/client/src/features/operator/edit-modal/EditModal.module.scss
+2 -5
View File
@@ -3,7 +3,7 @@
top: 10%; top: 10%;
left: 50%; left: 50%;
z-index: 2; z-index: $zindex-dialog;
transform: translateX(-50%); transform: translateX(-50%);
padding-inline: 1rem; padding-inline: 1rem;
@@ -45,9 +45,6 @@
padding-block: 1rem; padding-block: 1rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: end;
gap: 1rem; gap: 1rem;
button {
width: 100%;
}
} }
apps/client/src/features/operator/follow-button/FollowButton.module.scss
+1 -1
View File
@@ -4,7 +4,7 @@
bottom: calc(1.5rem + env(safe-area-inset-bottom)); bottom: calc(1.5rem + env(safe-area-inset-bottom));
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
z-index: 1; z-index: $zindex-floating;
display: flex; display: flex;
align-items: center; align-items: center;
apps/client/src/features/operator/status-bar/StatusBar.module.scss
+1 -1
View File
@@ -2,7 +2,7 @@
position: sticky; position: sticky;
top: 0; top: 0;
width: 100%; width: 100%;
z-index: 2; z-index: $zindex-floating;
background-color: $gray-1350; background-color: $gray-1350;
border-bottom: 1px solid $white-10; border-bottom: 1px solid $white-10;
apps/client/src/features/overview/Overview.module.scss
+1 -1
View File
@@ -17,7 +17,7 @@
background-color: $red-700; background-color: $red-700;
border-radius: 2px; border-radius: 2px;
font-size: calc(1rem - 2px); font-size: calc(1rem - 2px);
z-index: 10; z-index: $zindex-sudo;
} }
} }
apps/client/src/features/rundown/event-block/RundownIndicators.module.scss
+1 -1
View File
@@ -5,7 +5,7 @@ $gap-left: calc(2rem + 0.25rem + 3rem);
font-size: calc(1rem - 5px); font-size: calc(1rem - 5px);
position: absolute; position: absolute;
top: -1em; top: -1em;
z-index: 2; z-index: $zindex-floating;;
margin-left: $gap-left; margin-left: $gap-left;
display: flex; display: flex;
apps/client/src/features/rundown/time-input-flow/TimeInputFlow.module.scss
+1 -1
View File
@@ -1,6 +1,6 @@
.timeLabel { .timeLabel {
position: absolute; position: absolute;
z-index: 100; z-index: $zindex-floating;
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 600; font-weight: 600;
top: 2px; top: 2px;
apps/client/src/theme/_ontimeStyles.scss
+9
View File
@@ -7,6 +7,14 @@ $component-border-radius-md: 3px;
$component-border-radius-sm: 2px; $component-border-radius-sm: 2px;
$component-border-radius-full: 99px; $component-border-radius-full: 99px;
// indexes
$zindex-floating: 100;
$zindex-nav: 200;
$zindex-backdrop: 300;
$zindex-dialog: 400;
$zindex-modal: 500;
$zindex-sudo: 1000;
// semantic colours // semantic colours
$action-blue: $blue-500; $action-blue: $blue-500;
$action-text-color: $blue-400; $action-text-color: $blue-400;
@@ -37,6 +45,7 @@ $bg-container-l3: $gray-1350;
$bg-container-onlight: $gray-100; $bg-container-onlight: $gray-100;
$backdrop-color: rgba(0, 0, 0, 0.7);
$box-shadow-l1: rgba(0, 0, 0, 0.15) 0 3px 3px 0; $box-shadow-l1: rgba(0, 0, 0, 0.15) 0 3px 3px 0;
$box-shadow-l2: rgba(0, 0, 0, 0.15) 0 3px 3px 0; $box-shadow-l2: rgba(0, 0, 0, 0.15) 0 3px 3px 0;
$box-shadow-right: rgba(0, 0, 0, 0.15) 3px 0 3px 0; $box-shadow-right: rgba(0, 0, 0, 0.15) 3px 0 3px 0;
apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.module.scss
+1 -1
View File
@@ -56,7 +56,7 @@ $table-header-font-size: calc(1rem - 2px);
.tableHeader { .tableHeader {
position: sticky; position: sticky;
top: 0px; top: 0px;
z-index: 10; z-index: $zindex-floating;
background-color: $ui-black; background-color: $ui-black;
font-size: $table-header-font-size; font-size: $table-header-font-size;
color: $label-gray; color: $label-gray;
apps/client/src/views/timer/Timer.scss
+6 -10
View File
@@ -25,15 +25,14 @@
.blackout { .blackout {
position: absolute; position: absolute;
top: 0; inset: 0;
left: 0; z-index: 0;
width: 100vw;
height: 100vh;
background-color: #000; background-color: #000;
z-index: 2;
opacity: 0; opacity: 0;
transition: opacity $viewer-transition-time; transition: opacity $viewer-transition-time;
&--active { &--active {
z-index: calc($zindex-floating + 1);
opacity: 1; opacity: 1;
} }
} }
@@ -169,17 +168,14 @@
.message-overlay { .message-overlay {
position: fixed; position: fixed;
top: 0; inset: 0;
left: 0;
right: 0;
bottom: 0;
padding: 2vw; padding: 2vw;
background: var(--background-color-override, $viewer-background-color); background: var(--background-color-override, $viewer-background-color);
opacity: 0; opacity: 0;
transition: opacity $viewer-transition-time; transition: opacity $viewer-transition-time;
z-index: 2;
&--active { &--active {
z-index: $zindex-floating;
opacity: 1; opacity: 1;
} }
} }