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

style: tweaks to editor (#738)

Browse Source
This commit is contained in:
Carlos Valente
2024-01-28 22:42:19 +01:00
committed by GitHub
parent 5de40e8679
commit 4c77d26a71
14 changed files with 66 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/common/components/input/colour-input/SwatchSelect.module.scss
+1
View File
@@ -1,5 +1,6 @@
.list { .list {
display: flex; display: flex;
flex-wrap: wrap;
gap: 0.5rem gap: 0.5rem
} }
apps/client/src/common/components/input/time-input/TimeInputWithButton.module.scss
+1 -3
View File
@@ -1,9 +1,7 @@
$input-font-size: 15px; $input-font-size: 1rem;
$input-delayed-border-color: $ontime-delay-text; $input-delayed-border-color: $ontime-delay-text;
.timeInput { .timeInput {
width: fit-content;
&.delayed { &.delayed {
border: 1px solid $input-delayed-border-color; border: 1px solid $input-delayed-border-color;
} }
apps/client/src/common/components/input/time-input/TimeInputWithButton.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ export default function TimeInputWithButton<T extends string>(props: TimeInputWi
const inputClasses = cx([style.timeInput, hasDelay ? style.delayed : null]); const inputClasses = cx([style.timeInput, hasDelay ? style.delayed : null]);
return ( return (
<InputGroup size='sm' className={inputClasses}> <InputGroup size='sm' className={inputClasses} width='fit-content'>
<InputLeftElement className={style.inputLeft}> <InputLeftElement className={style.inputLeft}>
<Tooltip label={placeholder} openDelay={tooltipDelayFast} variant='ontime-ondark'> <Tooltip label={placeholder} openDelay={tooltipDelayFast} variant='ontime-ondark'>
<Button size='sm' variant='ontime-subtle-white' className={style.inputButton} tabIndex={-1}> <Button size='sm' variant='ontime-subtle-white' className={style.inputButton} tabIndex={-1}>
apps/client/src/features/editors/Editor.module.scss
+18 -20
View File
@@ -1,7 +1,9 @@
@use './EditorMixin' as editor; @use './EditorMixin' as editor;
$menu-width: 2.75rem; $menu-width: 2.75rem;
$playback-width: 30rem; $min-playback-width: 27rem;
$max-playback-width: 35rem;
$panel-gap: 0.5rem;
.corner { .corner {
@include editor.corner; @include editor.corner;
@@ -13,29 +15,23 @@ $playback-width: 30rem;
height: 100%; height: 100%;
color: $ui-white; color: $ui-white;
padding: 1rem 0.5rem; padding: 1rem 0.5rem;
display: grid; display: grid;
grid-template-columns: $menu-width auto; grid-template-columns: $menu-width auto;
grid-template-rows: 3rem 1fr; grid-template-rows: 3rem 1fr;
grid-template-areas: grid-template-areas:
'menu overview' 'menu overview'
'menu main'; 'menu main';
gap: 0.5rem; gap: $panel-gap;
} }
.panelContainer { .panelContainer {
grid-area: main; grid-area: main;
display: grid; display: flex;
grid-template-rows: auto 1fr; gap: $panel-gap;
grid-template-columns: 1fr $playback-width;
grid-template-areas:
'rundown play'
'rundown mess';
gap: 0.5rem;
overflow: hidden; overflow: hidden;
.corner { .corner {
/* we show this if the component hasnt been extracted */ /* we show this if the component hasnt been extracted */
display: inline; display: inline;
@@ -46,21 +42,23 @@ $playback-width: 30rem;
.messages { .messages {
position: relative; position: relative;
border-radius: 8px; border-radius: 8px;
height: 100%;
background-color: $bg-container-l2; background-color: $bg-container-l2;
padding: 1rem; padding: 1rem;
} }
} }
.messages { .left {
grid-area: mess; flex-grow: 1;
min-width: 24rem; flex-shrink: 1;
min-width: $min-playback-width;
max-width: $max-playback-width;
display: flex;
flex-direction: column;
gap: $panel-gap;
} }
.playback { .messages {
grid-area: play; flex: 1;
max-height: 380px;
min-width: 26rem;
} }
.content { .content {
apps/client/src/features/editors/Editor.tsx
+4 -2
View File
@@ -80,9 +80,11 @@ export default function Editor() {
<AppSettings /> <AppSettings />
) : ( ) : (
<div id='panels' className={styles.panelContainer}> <div id='panels' className={styles.panelContainer}>
<div className={styles.left}>
<TimerControl />
<MessageControl />
</div>
<Rundown /> <Rundown />
<MessageControl />
<TimerControl />
</div> </div>
)} )}
<Overview /> <Overview />
apps/client/src/features/overview/Overview.module.scss
+1
View File
@@ -5,6 +5,7 @@
justify-content: start; justify-content: start;
font-size: $inner-section-text-size; font-size: $inner-section-text-size;
gap: 2rem; gap: 2rem;
padding-left: 1rem;
padding-right: 0.5rem; padding-right: 0.5rem;
} }
apps/client/src/features/rundown/Rundown.module.scss
+1 -2
View File
@@ -7,9 +7,8 @@
margin-top: 1em; margin-top: 1em;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0 4px; padding-right: 4px; // size of scrollbar
overflow-y: scroll; overflow-y: scroll;
-ms-overflow-style: -ms-autohiding-scrollbar;
height: 100%; height: 100%;
} }
apps/client/src/features/rundown/RundownExport.module.scss
+15 -10
View File
@@ -1,12 +1,8 @@
@use '../editors//EditorMixin' as editor; @use '../editors//EditorMixin' as editor;
$rundown-width: 44.5rem;
$editor-width: 25rem;
.rundownExport { .rundownExport {
grid-area: rundown;
max-height: 100%;
height: 100%; height: 100%;
flex: 1;
} }
.rundown { .rundown {
@@ -24,17 +20,26 @@ $editor-width: 25rem;
.list { .list {
@include editor.panel; @include editor.panel;
height: inherit; height: inherit;
padding-left: 0;
box-shadow: $box-shadow-right; box-shadow: $box-shadow-right;
min-width: $rundown-width;
flex-grow: 1;
flex-shrink: 1;
min-width: 38rem;
max-width: 45rem;
} }
.side { .side {
max-height: 100%;
max-width: 45rem;
margin: 2rem 0; margin: 2rem 0;
padding: 1rem; padding: 1rem;
padding-right: 0;
background-color: $gray-1325; background-color: $gray-1325;
border-radius: 0 8px 8px 0; border-radius: 0 8px 8px 0;
min-width: $editor-width;
flex: 1; flex-grow: 1;
max-height: 100%; flex-shrink: 1;
overflow: auto; min-width: 30rem;
max-width: 45rem;
} }
apps/client/src/features/rundown/_blockMixins.scss
+5 -1
View File
@@ -1,11 +1,13 @@
@use '../../theme/ontimeColours' as *; @use '../../theme/ontimeColours' as *;
@use '../../theme/ontimeStyles' as *; @use '../../theme/ontimeStyles' as *;
$block-width: 33rem;
$block-gap: 0.25rem; $block-gap: 0.25rem;
$block-element-spacing: 0.25rem; $block-element-spacing: 0.25rem;
$block-binder-width: 2rem; $block-binder-width: 2rem;
$block-clearance: 0.5rem; $block-clearance: 0.5rem;
$block-border-radius: 0.5rem; $block-border-radius: 3px;
$block-text-color: $gray-50; $block-text-color: $gray-50;
$block-bg: $gray-1250; $block-bg: $gray-1250;
$block-bg2: $gray-1050; // for delay and blocks $block-bg2: $gray-1050; // for delay and blocks
@@ -21,6 +23,8 @@ $block-cursor-color: $blue-400;
margin: 0.25rem 0.125rem; margin: 0.25rem 0.125rem;
position: relative; position: relative;
color: $block-text-color; color: $block-text-color;
min-width: $block-width;
} }
@mixin block-spacing() { @mixin block-spacing() {
apps/client/src/features/rundown/delay-block/DelayBlock.module.scss
-1
View File
@@ -6,7 +6,6 @@
background-color: $block-bg2; background-color: $block-bg2;
min-width: 34rem;
display: grid; display: grid;
grid-template-columns: 2rem 1fr auto; grid-template-columns: 2rem 1fr auto;
grid-template-areas: 'drag inpt btns'; grid-template-areas: 'drag inpt btns';
apps/client/src/features/rundown/event-block/EventBlock.module.scss
+3 -8
View File
@@ -29,7 +29,7 @@ $skip-opacity: 0.1;
} }
&.selected { &.selected {
background-color: $gray-1350; background-color: $gray-1325;
} }
&.play { &.play {
@@ -123,15 +123,12 @@ $skip-opacity: 0.1;
.eventTimers { .eventTimers {
grid-area: times; grid-area: times;
display: flex; display: flex;
align-items: center;
gap: $block-clearance; gap: $block-clearance;
height: 100%; height: 100%;
.timerNote { .timerNote {
display: grid;
place-content: center;
color: $blue-500; color: $blue-500;
margin-right: 0.5em; margin-right: $block-clearance;
font-size: 1.5em; font-size: 1.5em;
} }
} }
@@ -145,9 +142,7 @@ $skip-opacity: 0.1;
.eventActions { .eventActions {
grid-area: actions; grid-area: actions;
display: flex; height: 100%;
gap: $block-clearance;
justify-content: flex-end;
} }
.progressBg { .progressBg {
apps/client/src/features/rundown/event-block/RundownIndicators.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ function formatOverlap(previousEnd: number | null, timeStart: number): string |
const overlapString = removeLeadingZero(millisToString(Math.abs(overlap))); const overlapString = removeLeadingZero(millisToString(Math.abs(overlap)));
return `${overlap > 0 ? 'Overlap' : 'Gap'}: ${overlapString}`; return `${overlap > 0 ? 'Overlap' : 'Gap'} ${overlapString}`;
} }
export default function RundownIndicators(props: RundownIndicatorProps) { export default function RundownIndicators(props: RundownIndicatorProps) {
apps/client/src/features/rundown/event-editor/EventEditor.module.scss
+6 -3
View File
@@ -1,20 +1,23 @@
.eventEditor { .eventEditor {
color: $label-gray;
max-height: 100%; max-height: 100%;
overflow-y: auto; overflow-y: auto;
flex: 1; padding: 0.5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-x: auto;
} }
.content { .content {
padding: 1rem; padding-right: 4px;
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 2rem; gap: 2rem;
overflow-y: auto; overflow-y: auto;
} }
.footer { .footer {
@@ -53,7 +56,7 @@
color: $label-gray; color: $label-gray;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.25rem;
max-width: max-content; max-width: max-content;
cursor: pointer; cursor: pointer;
} }
apps/client/src/index.scss
+9 -4
View File
@@ -1,9 +1,13 @@
@use './theme/ontimeStyles' as *; @use './theme/ontimeStyles' as *;
$track-color: $white-1;
$thumb-color: $gray-1100;
$thumb-color-hover: $gray-900;
* { * {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
scrollbar-color: #2b2b2b rgba(255, 255, 255, 0.01); scrollbar-color: $track-color $thumb-color;
scrollbar-width: thin; scrollbar-width: thin;
} }
@@ -39,21 +43,22 @@ option {
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 6px; width: 6px;
height: 6px; height: 6px;
-ms-overflow-style: -ms-autohiding-scrollbar;
} }
/* Track */ /* Track */
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.01); background: $track-color;
border-radius: 2px; border-radius: 2px;
} }
/* Handle */ /* Handle */
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: #2d2d2d; background: $thumb-color;
border-radius: 2px; border-radius: 2px;
} }
/* Handle on hover */ /* Handle on hover */
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: #404040; background: $thumb-color-hover;
} }