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

refractor + style tweaks

Browse Source 
- bugfix on lower
- delay between 0-60 minutes
- action buttons in dropdown
- added button for toggling element visibility
- several css and code cleanups
- renamed settingsAPI
This commit is contained in:
cv
2021-04-24 10:32:19 +02:00
parent 11fca1ab6d
commit ea92fc7de7
44 changed files with 835 additions and 572 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/common/components/buttons/AddIconBtn.jsx
+1
View File
@@ -8,6 +8,7 @@ export default function AddIconBtn(props) {
icon={<FiPlus />}
colorScheme='blue'
onClick={props.clickHandler}
_focus={{ boxShadow: 'none' }}
/>
);
}
client/src/common/components/buttons/BlockIconBtn.jsx
+1
View File
@@ -8,6 +8,7 @@ export default function BlockIconBtn(props) {
icon={<FiMinusCircle />}
colorScheme='purple'
onClick={props.clickHandler}
_focus={{ boxShadow: 'none' }}
/>
);
}
client/src/common/components/buttons/CollapseIconBtn.jsx
+1
View File
@@ -9,6 +9,7 @@ export default function CollapseIconBtn(props) {
colorScheme='orange'
variant={props.active ? 'solid' : 'outline'}
onClick={props.clickHandler}
_focus={{ boxShadow: 'none' }}
/>
);
}
client/src/common/components/buttons/DelayIconBtn.jsx
+1
View File
@@ -8,6 +8,7 @@ export default function DelayIconBtn(props) {
icon={<FiClock />}
colorScheme='yellow'
onClick={props.clickHandler}
_focus={{ boxShadow: 'none' }}
/>
);
}
client/src/common/components/buttons/DeleteIconBtn.jsx
+1
View File
@@ -8,6 +8,7 @@ export default function DeleteIconBtn(props) {
icon={<FiMinus />}
colorScheme='red'
onClick={props.clickHandler}
_focus={{ boxShadow: 'none' }}
/>
);
}
client/src/common/components/buttons/NextIconBtn.jsx
+3 -2
View File
@@ -5,11 +5,12 @@ export default function NextIconBtn(props) {
return (
<IconButton
icon={<FiSkipForward />}
colorScheme= 'whiteAlpha'
colorScheme='whiteAlpha'
backgroundColor='#ffffff05'
variant= 'outline'
variant='outline'
onClick={props.clickHandler}
width={90}
_focus={{ boxShadow: 'none' }}
/>
);
}
client/src/common/components/buttons/PauseIconBtn.jsx
+2 -1
View File
@@ -8,7 +8,8 @@ export default function PauseIconBtn(props) {
colorScheme='orange'
variant={props.active ? 'solid' : 'outline'}
onClick={props.clickHandler}
width={90}
width={120}
_focus={{ boxShadow: 'none' }}
/>
);
}
client/src/common/components/buttons/PrevIconBtn.jsx
+3 -2
View File
@@ -5,11 +5,12 @@ export default function PrevIconBtn(props) {
return (
<IconButton
icon={<FiSkipBack />}
colorScheme= 'whiteAlpha'
colorScheme='whiteAlpha'
backgroundColor='#ffffff05'
variant= 'outline'
variant='outline'
onClick={props.clickHandler}
width={90}
_focus={{ boxShadow: 'none' }}
/>
);
}
client/src/common/components/buttons/ReloadIconBtn.jsx
+16
View File
@@ -0,0 +1,16 @@
import { IconButton } from '@chakra-ui/button';
import { FiRefreshCcw } from 'react-icons/fi';
export default function ReloadIconButton(props) {
return (
<IconButton
icon={<FiRefreshCcw />}
colorScheme='whiteAlpha'
backgroundColor='#ffffff05'
variant='outline'
onClick={props.clickHandler}
width={90}
_focus={{ boxShadow: 'none' }}
/>
);
}
client/src/common/components/buttons/RollIconBtn.jsx
+3 -1
View File
@@ -8,7 +8,9 @@ export default function RollIconBtn(props) {
colorScheme='blue'
variant={props.active ? 'solid' : 'outline'}
onClick={props.clickHandler}
width={90}
width={120}
disabled
_focus={{ boxShadow: 'none' }}
/>
);
}
client/src/common/components/buttons/SettingsIconBtn.jsx
+1
View File
@@ -9,6 +9,7 @@ export default function SettingsIconBtn(props) {
isRound
variant='outline'
onClick={props.clickHandler}
_focus={{ boxShadow: 'none' }}
/>
);
}
client/src/common/components/buttons/StartIconBtn.jsx
+2 -1
View File
@@ -8,7 +8,8 @@ export default function StartIconBtn(props) {
colorScheme='green'
variant={props.active ? 'solid' : 'outline'}
onClick={props.clickHandler}
width={90}
width={120}
_focus={{ boxShadow: 'none' }}
/>
);
}
client/src/common/components/buttons/UnloadIconBtn.jsx
+16
View File
@@ -0,0 +1,16 @@
import { IconButton } from '@chakra-ui/button';
import { FiCornerLeftUp } from 'react-icons/fi';
export default function UnloadIconBtn(props) {
return (
<IconButton
icon={<FiCornerLeftUp />}
colorScheme='whiteAlpha'
backgroundColor='#ffffff05'
variant='outline'
onClick={props.clickHandler}
width={90}
_focus={{ boxShadow: 'none' }}
/>
);
}
client/src/common/components/buttons/VisibleIconBtn.jsx
+1
View File
@@ -9,6 +9,7 @@ export default function VisibleIconBtn(props) {
colorScheme='blue'
variant={props.active ? 'solid' : 'outline'}
onClick={props.clickHandler}
_focus={{ boxShadow: 'none' }}
/>
);
}
client/src/common/components/eventTimes/EventTimes.jsx
-2
View File
@@ -1,5 +1,4 @@
import EditableTimer from '../../input/EditableTimer';
import DelayValue from '../../input/DelayValue';
import { showWarningToast } from '../../helpers/toastManager';
export default function EventTimes(props) {
@@ -24,7 +23,6 @@ export default function EventTimes(props) {
return (
<>
<DelayValue delay={delay} />
<EditableTimer
name='timeStart'
validate={handleValidate}
client/src/common/input/DelayValue.jsx
+2 -2
View File
@@ -1,11 +1,11 @@
import { millisToMinutes } from '../dateConfig';
import style from './EditableTimer.module.css';
import style from '../../features/editors/list/Block.module.css';
export default function DelayValue(props) {
const { delay } = props;
const delayed = delay > 0;
return (
<div className={delayed ? style.delayValue : undefined}>
<div className={style.delayValue}>
{delayed && <span>{`+ ${millisToMinutes(delay)}`}</span>}
</div>
);
client/src/common/input/EditableText.jsx
+10 -2
View File
@@ -1,8 +1,10 @@
import { Editable, EditableInput, EditablePreview } from '@chakra-ui/editable';
import { useState } from 'react';
import style from './EditableText.module.css';
export default function EditableText(props) {
const { label, defaultValue, placeholder, submitHandler } = props;
const [text, setText] = useState(props.defaultValue || '');
const handleSubmit = (submitedVal) => {
// No need to update if it hasnt changed
@@ -11,19 +13,25 @@ export default function EditableText(props) {
submitHandler(submitedVal);
};
const handleChange = (val) => {
if (val.length < 40) setText(val);
console.log(val.length);
};
return (
<div className={style.block}>
<span className={props.underlined ? style.titleUnderlined : style.title}>
{label}
</span>
<Editable
onChange={(v) => handleChange(v)}
onSubmit={(v) => handleSubmit(v)}
defaultValue={defaultValue}
value={text}
placeholder={placeholder}
className={style.inline}
>
<EditablePreview />
<EditableInput className={style.editable13} />
<EditableInput />
</Editable>
</div>
);
client/src/common/input/EditableText.module.css
+3 -5
View File
@@ -14,13 +14,11 @@
.block {
display: 'block';
overflow: hidden;
max-width: 100%;
}
.inline {
display: inline;
}
.editable13 {
width: '13em';
min-width: '13em';
width: max-content;
}
client/src/common/input/EditableTimer.module.css
+1 -10
View File
@@ -1,6 +1,5 @@
.time {
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 4px;
width: 5em;
height: fit-content;
@@ -10,17 +9,9 @@
.delayedEditable {
text-align: center;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.delayedEditable {
border: 1px solid #d69e2e55;
}
.delayValue {
color: #fff;
border-radius: 4px;
padding: 0.3em 0;
text-align: center;
align-self: flex-start;
background-color: #d69e2e55;
}
client/src/common/input/TimeInput.jsx
+4 -2
View File
@@ -22,14 +22,16 @@ export default function TimeInput(props) {
}, [props.value]);
const handleChange = (val) => {
if (val <= 999) setValue(val);
if (val <= 666) setValue(val);
};
const handleSubmit = (val) => {
if (val === props.value) return;
if (val === '') setValue(0);
if (val > 0 && val < 60) {
if (val >= 0 && val <= 60) {
props.submitHandler(val);
} else {
setValue(60);
}
};