mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-14 11:53:49 +00:00
V3 (#657)
* refactor: cleanup routes * style: smaller base font * chore: upgrade dependencies * chore: lock node version to electron * refactor: pass HTTP to integration controller (#652) * refactor: deprecate onair control * refactor: remove playback router * Several project files user folder (#617) * chore: automated screenshots (#667) * feat: app settings (#658) * refactor: remove deprecated event data (#674) * Studio clock (#663) --------- Co-authored-by: Carlos Valente <carlosvalente@pm.me> * Feat: reorder events with alt+ctrl + arrow up/down (#645) * Warning and danger per event (#677) --------- Co-authored-by: Fabian Posenau <fabian@fphome.de> * refactor: stabilise actionHandler (#683) Co-authored-by: Fabian Posenau <fabian@fphome.de> * improvement: hide seconds (#675) * wip: overview (#688) * fix: focus cursor (#695) * refactor: update lower third (#665) * Refactor/time formatting (#696) --------- Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com> Co-authored-by: Carlos Valente <carlosvalente@pm.me> * feat: multiple selection (#703) --------- Co-authored-by: asharonbaltazar <asharonbaltazar@outlook.com> Co-authored-by: Alex <ac@omnivox.dk> * fix: test - go to `Edit mode` befor tying to click `Event options` button (#708) * refactor: runtime service (#715) * fix: issue with loosing cursor position on message (#719) * remove info panel (#721) * Event editor continue (#722) * update API - part (#709) --------- Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com> Co-authored-by: Carlos Valente <carlosvalente@pm.me> * refactor: update timers (#729) * feat: many timers (#706) --------- Co-authored-by: arc-alex <ac@omnivox.dk> * refactor: excel cleanup (#734) * refactor: allow import of blocks and skip import (#735) * Project manager (#697) * refactor: UI for linking events (#763) * upgraded pipeline actions (#777) * Over under (#771) * custom fields (#744) --------- Co-authored-by: Carlos Valente <carlosvalente@pm.me> * Sheets settings (#774) --------- Co-authored-by: arc-alex <ac@omnivox.dk> * style: tweaks to lower thirds (#785) * refactor: delays account for gaps (#784) * refactor: partial state updates (#780) * feat: generate crash report (#787) * Sheet use limited input device auth flow (#782) --------- Co-authored-by: cv <34649812+cpvalente@users.noreply.github.com> Co-authored-by: Carlos Valente <carlosvalente@pm.me> * Custom fields views (#789) * refactor: deprecate presenter and subtitle (#795) * refactor: organise API around resources (#798) --------- Co-authored-by: Bianca Procopio <biancahprocopio@gmail.com> * Time to end (#804) * Skip fixes (#805) * fix: onair derives from playback * Param nav (#822) --------- Co-authored-by: Alex Christoffer Rasmussen <ac@omnivox.dk> * refactor: download files from interface (#831) * Quick options (#814) * End pause (#832) * chore: bump node version in docker (#834) * refactor: follow in run mode (#840) * fix: uncaught error in http integration (#837) * Apply project (#843) Co-authored-by: Matteo Gheza <matteo.gheza07@gmail.com> Co-authored-by: Ary <arylmoraesn@gmail.com> Co-authored-by: Alex Christoffer Rasmussen <ac@omnivox.dk> Co-authored-by: Fabian Posenau <19673098+kellhogs@users.noreply.github.com> Co-authored-by: Fabian Posenau <fabian@fphome.de> Co-authored-by: Alex Rohleder <alexrohleder96@gmail.com> Co-authored-by: asharonbaltazar <asharonbaltazar@outlook.com> Co-authored-by: Bianca Procopio <biancahprocopio@gmail.com> Co-authored-by: Fabian Posenau <fabianpos99+github@gmail.com>
This commit is contained in:
@@ -1,11 +1,12 @@
|
||||
export const ontimeAlertOnLight = {
|
||||
export const ontimeAlertOnDark = {
|
||||
container: {
|
||||
fontSize: '14px',
|
||||
backgroundColor: '#f6f6f6', // $gray-50
|
||||
color: '#101010', // $ui-black
|
||||
fontSize: 'calc(1rem - 1px)',
|
||||
backgroundColor: '#1a1a1a', // $gray-1300
|
||||
color: '#e2e2e2', // $gray-200
|
||||
borderRadius: '3px',
|
||||
},
|
||||
icon: {
|
||||
alignSelf: 'start',
|
||||
color: '#578AF4', // $blue-500
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,8 +0,0 @@
|
||||
export const ontimeProgressGray = {
|
||||
track: {
|
||||
background: '#f6f6f6', // $gray-500
|
||||
},
|
||||
filledTrack: {
|
||||
background: '#578AF4', // $blue-500
|
||||
},
|
||||
};
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "v2Styles" as *;
|
||||
@use "ontimeStyles" as *;
|
||||
|
||||
//////////////////////////////////// general app elements
|
||||
|
||||
@@ -9,8 +9,9 @@
|
||||
cursor: pointer;
|
||||
transition-property: color;
|
||||
transition-duration: $transition-time-action;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
color: $ontime-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -28,6 +28,7 @@ $gray-1100: #2d2d2d;
|
||||
$gray-1200: #262626;
|
||||
$gray-1250: #202020;
|
||||
$gray-1300: #1a1a1a;
|
||||
$gray-1325: #151515;
|
||||
$gray-1350: #101010;
|
||||
$pure-white: #fff;
|
||||
$ui-white: $gray-50;
|
||||
|
||||
@@ -36,6 +36,7 @@ $bg-container-onlight: $gray-100;
|
||||
|
||||
$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-right: rgba(0, 0, 0, 0.15) 3px 0 3px 0;
|
||||
$large-bottom-drawer-shadow: rgba(0, 0, 0, 0.35) 0 3px 6px 6px;
|
||||
$large-top-drawer-shadow: rgba(0, 0, 0, 0.35) 0 1px 6px 3px;
|
||||
|
||||
@@ -68,3 +69,9 @@ $min-tablet: 500px;
|
||||
opacity: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ellipsis-overflow() {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
@@ -1,7 +1,3 @@
|
||||
.mirror {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.blackout {
|
||||
opacity: 0;
|
||||
}
|
||||
@@ -1,12 +1,12 @@
|
||||
@use 'v2Styles' as *;
|
||||
@use 'ontimeStyles' as *;
|
||||
@use 'viewerCommon' as *;
|
||||
@use "ontimeColours" as *;
|
||||
@use 'ontimeColours' as *;
|
||||
|
||||
// General
|
||||
$viewer-transition-time: 0.5s;
|
||||
|
||||
// Text
|
||||
$viewer-font-family: "Open Sans", "Segoe UI", sans-serif; // --font-family-override
|
||||
$viewer-font-family: 'Open Sans', 'Segoe UI', sans-serif; // --font-family-override
|
||||
$viewer-opacity-disabled: 0.6;
|
||||
|
||||
// General styling
|
||||
@@ -25,6 +25,6 @@ $element-border-radius: 8px;
|
||||
// Properties related to timer
|
||||
$timer-color: rgba(white, 80%); // --timer-color-override
|
||||
$timer-finished-color: $playback-negative;
|
||||
$timer-bold-font-family: "Arial Black", sans-serif; // --card-background-color-override
|
||||
$timer-bold-font-family: 'Arial Black', sans-serif; // --card-background-color-override
|
||||
|
||||
$external-color: rgba(white, 70%); // --external-color-override
|
||||
|
||||
@@ -47,41 +47,28 @@ export const ontimeButtonSubtle = {
|
||||
},
|
||||
};
|
||||
|
||||
// TODO: revise colours
|
||||
export const ontimeButtonGhostedWhite = {
|
||||
...ontimeButtonSubtle,
|
||||
backgroundColor: 'transparent',
|
||||
color: 'white',
|
||||
_hover: {
|
||||
background: '#404040', // $gray-1000
|
||||
},
|
||||
_active: {
|
||||
background: '#2d2d2d', // $gray-1100
|
||||
},
|
||||
};
|
||||
|
||||
export const ontimeButtonGhosted = {
|
||||
...ontimeButtonSubtle,
|
||||
backgroundColor: 'transparent',
|
||||
};
|
||||
|
||||
export const ontimeButtonSubtleOnLight = {
|
||||
backgroundColor: '#ececec', // $gray-100
|
||||
color: '#595959', // $gray-800
|
||||
border: '1px solid transparent',
|
||||
_hover: {
|
||||
backgroundColor: '#cfcfcf', // $gray-200
|
||||
_disabled: {
|
||||
backgroundColor: '#ececec', // $gray-100
|
||||
},
|
||||
},
|
||||
_active: {
|
||||
backgroundColor: '#ececec', // $gray-200
|
||||
borderColor: '#ececec', // $gray-300
|
||||
},
|
||||
};
|
||||
|
||||
export const ontimeGhostOnLight = {
|
||||
backgroundColor: 'transparent',
|
||||
color: '#595959', // $gray-800
|
||||
_hover: {
|
||||
color: '#595959', // $gray-800
|
||||
backgroundColor: '#ececec', // $gray-200
|
||||
background: '#404040', // $gray-1000
|
||||
_disabled: {
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
},
|
||||
_active: {
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: '#595959', // $gray-800
|
||||
},
|
||||
};
|
||||
|
||||
export const ontimeButtonSubtleWhite = {
|
||||
|
||||
@@ -3,12 +3,24 @@ export const ontimeCheckboxOnDark = {
|
||||
border: '1px',
|
||||
borderColor: '#2d2d2d', // $gray-1100
|
||||
backgroundColor: '#2d2d2d', // $gray-1100
|
||||
_disabled: {
|
||||
color: 'white',
|
||||
borderColor: '#2d2d2d', // $gray-1100
|
||||
backgroundColor: '#2d2d2d', // $gray-1100
|
||||
opacity: 0.6,
|
||||
},
|
||||
_checked: {
|
||||
borderColor: '#3182ce', // $action-blue
|
||||
backgroundColor: '#3182ce', //$action-blue
|
||||
_disabled: {
|
||||
color: 'white',
|
||||
borderColor: '#3182ce', // $action-blue
|
||||
backgroundColor: '#3182ce', //$action-blue
|
||||
opacity: 0.6,
|
||||
},
|
||||
},
|
||||
_focus: {
|
||||
boxShadow: '0 0 0 1px #578AF4', // $blue-500
|
||||
boxShadow: 'none',
|
||||
},
|
||||
},
|
||||
label: {
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
export const ontimeDrawer = {
|
||||
header: {
|
||||
color: '#fefefe', // $gray-50
|
||||
backgroundColor: '#202020', // $gray-1250
|
||||
},
|
||||
body: {
|
||||
color: '#fefefe', // $gray-50
|
||||
backgroundColor: '#202020', // $gray-1250
|
||||
},
|
||||
footer: {
|
||||
backgroundColor: '#202020', // $gray-1250
|
||||
},
|
||||
closeButton: {
|
||||
color: '#fefefe', // $gray-50
|
||||
_hover: {
|
||||
color: '#303030', // $gray-1050
|
||||
backgroundColor: '#fefefe', // $gray-50
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -1,19 +1,27 @@
|
||||
export const ontimeMenuOnDark = {
|
||||
list: {
|
||||
fontSize: 'calc(1rem - 2px)',
|
||||
borderRadius: '3px',
|
||||
border: 'none',
|
||||
bg: '#fff', // $gray-50
|
||||
borderColor: 'rgba(255, 255, 255, 0.1)',
|
||||
color: '#ececec', // $gray-1030
|
||||
backgroundColor: '#202020', // $gray-1250
|
||||
zIndex: 100,
|
||||
},
|
||||
item: {
|
||||
letterSpacing: '0.15px',
|
||||
color: '#101010', // $gray-1350
|
||||
bg: '#fff', //
|
||||
backgroundColor: 'transparent',
|
||||
paddingBlock: '0.5rem',
|
||||
_hover: {
|
||||
backgroundColor: '#e2e2e2', // $gray-200
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.2)',
|
||||
_disabled: {
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
},
|
||||
_disabled: {
|
||||
color: '#b1b1b1', // $gray-400
|
||||
},
|
||||
},
|
||||
divider: {
|
||||
borderColor: '#cfcfcf', // $gray-200
|
||||
borderColor: 'rgba(255, 255, 255, 0.07)',
|
||||
opacity: 1,
|
||||
},
|
||||
};
|
||||
|
||||
@@ -4,45 +4,26 @@ export const ontimeModal = {
|
||||
letterSpacing: '0.3px',
|
||||
padding: '1rem 1.5rem',
|
||||
fontSize: '1.25rem',
|
||||
color: '#202020', // $gray-50
|
||||
color: '#fefefe', // $gray-50
|
||||
},
|
||||
dialog: {
|
||||
borderRadius: '3px',
|
||||
padding: 0,
|
||||
minHeight: 'min(500px, 75vh)',
|
||||
minHeight: 'min(200px, 10vh)',
|
||||
backgroundColor: '#202020', // $gray-1250
|
||||
color: '#fefefe', // $gray-50
|
||||
},
|
||||
body: {
|
||||
padding: 0,
|
||||
padding: '1rem',
|
||||
fontSize: 'calc(1rem - 2px)',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '1rem',
|
||||
},
|
||||
closeButton: {
|
||||
color: '#202020', // $gray-50
|
||||
color: '#fefefe', // $gray-50
|
||||
},
|
||||
footer: {
|
||||
padding: '0.5rem',
|
||||
},
|
||||
};
|
||||
|
||||
export const ontimeSmallModal = {
|
||||
...ontimeModal,
|
||||
body: {
|
||||
padding: '1rem',
|
||||
fontSize: 'calc(1rem - 2px)',
|
||||
},
|
||||
dialog: {
|
||||
minHeight: 'min(200px, 10vh)',
|
||||
},
|
||||
};
|
||||
|
||||
export const ontimeUploadModal = {
|
||||
...ontimeSmallModal,
|
||||
body: {
|
||||
padding: '1rem',
|
||||
fontSize: 'calc(1rem - 2px)',
|
||||
},
|
||||
dialog: {
|
||||
minHeight: 'min(200px, 10vh)',
|
||||
maxWidth: 'min(800px, 80vh)',
|
||||
},
|
||||
};
|
||||
|
||||
@@ -13,6 +13,11 @@ export const ontimeSelect = {
|
||||
color: '#f6f6f6', // $gray-50
|
||||
border: '1px solid #578AF4', // $blue-500
|
||||
},
|
||||
_disabled: {
|
||||
_hover: {
|
||||
background: '#262626', // $gray-1100
|
||||
},
|
||||
},
|
||||
},
|
||||
icon: {
|
||||
color: '#e2e2e2', // $gray-200
|
||||
|
||||
@@ -10,16 +10,3 @@ export const ontimeSwitch = {
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const lightSwitch = {
|
||||
track: {
|
||||
border: '1px solid transparent',
|
||||
background: '#cfcfcf', // $gray-300
|
||||
_checked: {
|
||||
background: '#578AF4', // $blue-500
|
||||
},
|
||||
_focus: {
|
||||
border: '1px solid #D2DDFF', // $blue-200
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -3,6 +3,7 @@ const commonStyles = {
|
||||
backgroundColor: '#262626', // $gray-1200
|
||||
color: '#e2e2e2', // $gray-200
|
||||
border: '1px solid transparent',
|
||||
borderRadius: '3px',
|
||||
_hover: {
|
||||
backgroundColor: '#2d2d2d', // $gray-1100
|
||||
},
|
||||
@@ -25,20 +26,14 @@ export const ontimeInputFilled = {
|
||||
},
|
||||
};
|
||||
|
||||
export const ontimeInputFilledOnLight = {
|
||||
export const ontimeInputGhosted = {
|
||||
field: {
|
||||
backgroundColor: 'white',
|
||||
border: '2px solid #f6f6f6', // $gray-50
|
||||
...commonStyles,
|
||||
backgroundColor: 'transparent',
|
||||
color: '#f6f6f6', // $gray-50
|
||||
_hover: {
|
||||
border: '2px solid #D2DDFF', // $blue-200
|
||||
},
|
||||
_focus: {
|
||||
border: '2px solid #578AF4', // $blue-500
|
||||
},
|
||||
_disabled: {
|
||||
_hover: {
|
||||
backgroundColor: 'white',
|
||||
},
|
||||
backgroundColor: 'transparent', // $gray-1100
|
||||
border: '1px solid #2B5ABC', // $blue-500
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -46,6 +41,7 @@ export const ontimeInputFilledOnLight = {
|
||||
export const ontimeTextAreaFilled = {
|
||||
...commonStyles,
|
||||
};
|
||||
|
||||
export const ontimeTextAreaTransparent = {
|
||||
...commonStyles,
|
||||
backgroundColor: 'transparent',
|
||||
@@ -53,24 +49,3 @@ export const ontimeTextAreaTransparent = {
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.10)', // $white-10
|
||||
},
|
||||
};
|
||||
|
||||
export const ontimeTextAreaFilledOnLight = {
|
||||
borderRadius: '3px',
|
||||
fontWeight: '400',
|
||||
backgroundColor: 'white',
|
||||
color: '#202020', // $gray-1200
|
||||
border: '2px solid #f6f6f6', // $gray-50
|
||||
_hover: {
|
||||
border: '2px solid #D2DDFF', // $blue-200
|
||||
},
|
||||
_focus: {
|
||||
color: '#101010',
|
||||
border: '2px solid #578AF4', // $blue-500
|
||||
},
|
||||
_placeholder: { color: '#9d9d9d' }, // $gray-500
|
||||
_disabled: {
|
||||
_hover: {
|
||||
backgroundColor: 'white',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,38 +1,38 @@
|
||||
import { extendTheme } from '@chakra-ui/react';
|
||||
|
||||
import { ontimeAlertOnLight } from './OntimeAlert';
|
||||
import { ontimeAlertOnDark } from './OntimeAlert';
|
||||
import {
|
||||
ontimeButtonFilled,
|
||||
ontimeButtonGhosted,
|
||||
ontimeButtonGhostedWhite,
|
||||
ontimeButtonOutlined,
|
||||
ontimeButtonSubtle,
|
||||
ontimeButtonSubtleOnLight,
|
||||
ontimeButtonSubtleWhite,
|
||||
ontimeGhostOnLight,
|
||||
} from './ontimeButton';
|
||||
import { ontimeCheckboxOnDark } from './ontimeCheckbox';
|
||||
import { ontimeDrawer } from './ontimeDrawer';
|
||||
import { ontimeEditable } from './ontimeEditable';
|
||||
import { ontimeMenuOnDark } from './ontimeMenu';
|
||||
import { ontimeModal, ontimeSmallModal, ontimeUploadModal } from './ontimeModal';
|
||||
import { ontimeProgressGray } from './OntimeProgress';
|
||||
import { ontimeModal } from './ontimeModal';
|
||||
import { ontimeBlockRadio } from './ontimeRadio';
|
||||
import { ontimeSelect } from './ontimeSelect';
|
||||
import { lightSwitch, ontimeSwitch } from './ontimeSwitch';
|
||||
import { ontimeSwitch } from './ontimeSwitch';
|
||||
import { ontimeTab } from './ontimeTab';
|
||||
import {
|
||||
ontimeInputFilled,
|
||||
ontimeInputFilledOnLight,
|
||||
ontimeInputGhosted,
|
||||
ontimeTextAreaFilled,
|
||||
ontimeTextAreaFilledOnLight,
|
||||
ontimeTextAreaTransparent,
|
||||
} from './ontimeTextInputs';
|
||||
import { ontimeTooltip } from './ontimeTooltip';
|
||||
|
||||
const theme = extendTheme({
|
||||
initialColorMode: 'dark',
|
||||
useSystemColorMode: false,
|
||||
components: {
|
||||
Alert: {
|
||||
variants: {
|
||||
'ontime-on-light-info': { ...ontimeAlertOnLight },
|
||||
'ontime-on-dark-info': { ...ontimeAlertOnDark },
|
||||
},
|
||||
},
|
||||
Button: {
|
||||
@@ -46,9 +46,8 @@ const theme = extendTheme({
|
||||
'ontime-outlined': { ...ontimeButtonOutlined },
|
||||
'ontime-subtle': { ...ontimeButtonSubtle },
|
||||
'ontime-ghosted': { ...ontimeButtonGhosted },
|
||||
'ontime-ghosted-white': { ...ontimeButtonGhostedWhite },
|
||||
'ontime-subtle-white': { ...ontimeButtonSubtleWhite },
|
||||
'ontime-subtle-on-light': { ...ontimeButtonSubtleOnLight },
|
||||
'ontime-ghost-on-light': { ...ontimeGhostOnLight },
|
||||
},
|
||||
},
|
||||
Checkbox: {
|
||||
@@ -56,6 +55,11 @@ const theme = extendTheme({
|
||||
'ontime-ondark': { ...ontimeCheckboxOnDark },
|
||||
},
|
||||
},
|
||||
Drawer: {
|
||||
variants: {
|
||||
ontime: { ...ontimeDrawer },
|
||||
},
|
||||
},
|
||||
Editable: {
|
||||
variants: {
|
||||
ontime: { ...ontimeEditable },
|
||||
@@ -68,7 +72,7 @@ const theme = extendTheme({
|
||||
},
|
||||
variants: {
|
||||
'ontime-filled': { ...ontimeInputFilled },
|
||||
'ontime-filled-on-light': { ...ontimeInputFilledOnLight },
|
||||
'ontime-ghosted': { ...ontimeInputGhosted },
|
||||
},
|
||||
},
|
||||
Menu: {
|
||||
@@ -77,15 +81,11 @@ const theme = extendTheme({
|
||||
},
|
||||
},
|
||||
Modal: {
|
||||
baseStyle: {
|
||||
background: 'rgba(0, 0, 0, 0.5)',
|
||||
},
|
||||
variants: {
|
||||
ontime: { ...ontimeModal },
|
||||
'ontime-small': { ...ontimeSmallModal },
|
||||
'ontime-upload': { ...ontimeUploadModal },
|
||||
},
|
||||
},
|
||||
Progress: {
|
||||
variants: {
|
||||
'ontime-on-light': { ...ontimeProgressGray },
|
||||
},
|
||||
},
|
||||
Radio: {
|
||||
@@ -105,7 +105,6 @@ const theme = extendTheme({
|
||||
variants: {
|
||||
'ontime-filled': { ...ontimeTextAreaFilled },
|
||||
'ontime-transparent': { ...ontimeTextAreaTransparent },
|
||||
'ontime-filled-on-light': { ...ontimeTextAreaFilledOnLight },
|
||||
},
|
||||
},
|
||||
Tooltip: {
|
||||
@@ -114,7 +113,6 @@ const theme = extendTheme({
|
||||
Switch: {
|
||||
variants: {
|
||||
ontime: { ...ontimeSwitch },
|
||||
'ontime-on-light': { ...lightSwitch },
|
||||
},
|
||||
},
|
||||
Select: {
|
||||
|
||||
Reference in New Issue
Block a user