mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-17 13:23:35 +00:00
event cucle (#76)
* install sass * refact: integration settings - OSC in its own HTTP endpoint - OSC settings have own object in db * refact: simplify event cycle * refact: restructure external triggers http * refact: restructure external triggers osc+socket * refact: restructure data updates * feat: osc integration class * IO improvements - timer uses osc integration - create trigger handler to manage external triggers * refact: refract state machine update * Integration: simple HTTP Client * Integration: http options in datamodel * Integration: call http send on life cycle * feat/62-logging: fix issue #71
This commit is contained in:
Carlos Valente
GitHub
@@ -1,4 +1,4 @@
|
||||
import { IconButton } from '@chakra-ui/button';
|
||||
import { Button, IconButton } from '@chakra-ui/button';
|
||||
import { FiPlus, FiMinus } from 'react-icons/fi';
|
||||
import { ModalBody } from '@chakra-ui/modal';
|
||||
import { Input } from '@chakra-ui/react';
|
||||
@@ -6,7 +6,7 @@ import { fetchEvent } from 'app/api/eventApi';
|
||||
import { useState } from 'react';
|
||||
import { useFetch } from 'app/hooks/useFetch';
|
||||
import { EVENT_TABLE } from 'app/api/apiConstants';
|
||||
import style from './Modals.module.css';
|
||||
import style from './Modals.module.scss';
|
||||
|
||||
export default function AliasesModal() {
|
||||
const { data, status, isError } = useFetch(EVENT_TABLE, fetchEvent);
|
||||
@@ -31,10 +31,10 @@ export default function AliasesModal() {
|
||||
<p className={style.notes}>
|
||||
Configure easy to use URL Aliases
|
||||
<br />
|
||||
!!! Feature is not yet implemented !!!
|
||||
❄️ Feature is not yet implemented ❄️
|
||||
</p>
|
||||
|
||||
<span> Default URLs </span>
|
||||
<span>Default URLs</span>
|
||||
|
||||
<div className={style.highNotes}>
|
||||
<p className={style.flexNote}>
|
||||
@@ -83,7 +83,7 @@ export default function AliasesModal() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<span> Manage custom aliases</span>
|
||||
<span>Manage custom aliases</span>
|
||||
<div className={style.modalInline}>
|
||||
<Input
|
||||
size='sm'
|
||||
@@ -145,6 +145,16 @@ export default function AliasesModal() {
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div className={style.submitContainer}>
|
||||
<Button
|
||||
colorScheme='blue'
|
||||
type='submit'
|
||||
isLoading={submitting}
|
||||
disabled={true}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
</div>
|
||||
</ModalBody>
|
||||
</form>
|
||||
</>
|
||||
|
||||
@@ -1,26 +1,21 @@
|
||||
import { ModalBody } from '@chakra-ui/modal';
|
||||
import { FormLabel, FormControl, Input, Button } from '@chakra-ui/react';
|
||||
import { getInfo, ontimePlaceholderInfo, postInfo } from 'app/api/ontimeApi';
|
||||
import { getOSC, oscPlaceholderSettings, postOSC } from 'app/api/ontimeApi';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useFetch } from 'app/hooks/useFetch';
|
||||
import { APP_TABLE } from 'app/api/apiConstants';
|
||||
import { OSC_SETTINGS } from 'app/api/apiConstants';
|
||||
import { showErrorToast } from 'common/helpers/toastManager';
|
||||
import style from './Modals.module.css';
|
||||
import style from './Modals.module.scss';
|
||||
|
||||
export default function AppSettingsModal() {
|
||||
const { data, status } = useFetch(APP_TABLE, getInfo);
|
||||
const [formData, setFormData] = useState(ontimePlaceholderInfo);
|
||||
const { data, status } = useFetch(OSC_SETTINGS, getOSC);
|
||||
const [formData, setFormData] = useState(oscPlaceholderSettings);
|
||||
const [changed, setChanged] = useState(false);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (data == null) return;
|
||||
|
||||
setFormData({
|
||||
oscInPort: data.oscInPort,
|
||||
oscOutPort: data.oscOutPort,
|
||||
oscOutIP: data.oscOutIP,
|
||||
});
|
||||
setFormData({ ...data });
|
||||
}, [data]);
|
||||
|
||||
const submitHandler = async (event) => {
|
||||
@@ -30,15 +25,15 @@ export default function AppSettingsModal() {
|
||||
let e = { status: false, message: '' };
|
||||
|
||||
// Validate fields
|
||||
if (f.oscInPort < 1024 || f.oscInPort > 65535) {
|
||||
if (f.port < 1024 || f.port > 65535) {
|
||||
// Port in incorrect range
|
||||
e.status = true;
|
||||
e.message += 'OSC IN Port in incorrect range (1024 - 65535)';
|
||||
} else if (f.oscOutPort < 1024 || f.oscOutPort > 65535) {
|
||||
} else if (f.portOut < 1024 || f.portOut > 65535) {
|
||||
// Port in incorrect range
|
||||
e.status = true;
|
||||
e.message += 'OSC OUT Port in incorrect range (1024 - 65535)';
|
||||
} else if (f.oscInPort === f.oscOutPort) {
|
||||
} else if (f.port === f.portOut) {
|
||||
// Cant use the same port
|
||||
e.status = true;
|
||||
e.message += 'OSC IN and OUT Ports cant be the same';
|
||||
@@ -51,7 +46,7 @@ export default function AppSettingsModal() {
|
||||
}
|
||||
|
||||
// Post here
|
||||
postInfo(formData);
|
||||
postOSC(formData);
|
||||
|
||||
setChanged(false);
|
||||
setSubmitting(false);
|
||||
@@ -66,7 +61,7 @@ export default function AppSettingsModal() {
|
||||
<p className={style.notes}>
|
||||
Options related to the application
|
||||
<br />
|
||||
!!! Changes take effect after app restart !!!
|
||||
🔥 Changes take effect after app restart 🔥
|
||||
</p>
|
||||
|
||||
<FormControl id='serverPort'>
|
||||
@@ -85,8 +80,8 @@ export default function AppSettingsModal() {
|
||||
/>
|
||||
<span className={style.notes}>(Read Only Value)</span>
|
||||
</FormControl>
|
||||
<FormControl id='oscInPort'>
|
||||
<FormLabel htmlFor='oscInPort'>
|
||||
<FormControl id='port'>
|
||||
<FormLabel htmlFor='port'>
|
||||
OSC In Port
|
||||
<span className={style.notes}>
|
||||
<br />
|
||||
@@ -95,18 +90,18 @@ export default function AppSettingsModal() {
|
||||
</FormLabel>
|
||||
<Input
|
||||
size='sm'
|
||||
name='oscInPort'
|
||||
name='port'
|
||||
placeholder='8888'
|
||||
autoComplete='off'
|
||||
type='number'
|
||||
value={formData.oscInPort}
|
||||
value={formData.port}
|
||||
min='1024'
|
||||
max='65535'
|
||||
onChange={(event) => {
|
||||
setChanged(true);
|
||||
setFormData({
|
||||
...formData,
|
||||
oscInPort: parseInt(event.target.value),
|
||||
port: parseInt(event.target.value),
|
||||
});
|
||||
}}
|
||||
isDisabled={submitting}
|
||||
@@ -114,8 +109,8 @@ export default function AppSettingsModal() {
|
||||
/>
|
||||
</FormControl>
|
||||
<div className={style.modalInline}>
|
||||
<FormControl id='oscOutIP' width='auto'>
|
||||
<FormLabel htmlFor='oscOutIP'>
|
||||
<FormControl id='targetIP' width='auto'>
|
||||
<FormLabel htmlFor='targetIP'>
|
||||
OSC Out Target IP
|
||||
<span className={style.notes}>
|
||||
<br />
|
||||
@@ -124,23 +119,23 @@ export default function AppSettingsModal() {
|
||||
</FormLabel>
|
||||
<Input
|
||||
size='sm'
|
||||
name='oscOutIP'
|
||||
name='targetIP'
|
||||
placeholder='127.0.0.1'
|
||||
autoComplete='off'
|
||||
value={formData.oscOutIP}
|
||||
value={formData.targetIP}
|
||||
onChange={(event) => {
|
||||
setChanged(true);
|
||||
setFormData({
|
||||
...formData,
|
||||
oscOutIP: event.target.value,
|
||||
targetIP: event.target.value,
|
||||
});
|
||||
}}
|
||||
isDisabled={submitting}
|
||||
style={{ width: '12em', textAlign: 'right' }}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl id='oscOutPort' width='auto'>
|
||||
<FormLabel htmlFor='oscOutPort'>
|
||||
<FormControl id='portOut' width='auto'>
|
||||
<FormLabel htmlFor='portOut'>
|
||||
OSC Out Port
|
||||
<span className={style.notes}>
|
||||
<br />
|
||||
@@ -149,18 +144,18 @@ export default function AppSettingsModal() {
|
||||
</FormLabel>
|
||||
<Input
|
||||
size='sm'
|
||||
name='oscOutPort'
|
||||
name='portOut'
|
||||
placeholder='9999'
|
||||
autoComplete='off'
|
||||
type='number'
|
||||
value={formData.oscOutPort}
|
||||
value={formData.portOut}
|
||||
min='1024'
|
||||
max='65535'
|
||||
onChange={(event) => {
|
||||
setChanged(true);
|
||||
setFormData({
|
||||
...formData,
|
||||
oscOutPort: parseInt(event.target.value),
|
||||
portOut: parseInt(event.target.value),
|
||||
});
|
||||
}}
|
||||
isDisabled={submitting}
|
||||
@@ -170,14 +165,16 @@ export default function AppSettingsModal() {
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<Button
|
||||
colorScheme='blue'
|
||||
type='submit'
|
||||
isLoading={submitting}
|
||||
disabled={!changed}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<div className={style.submitContainer}>
|
||||
<Button
|
||||
colorScheme='blue'
|
||||
type='submit'
|
||||
isLoading={submitting}
|
||||
disabled={!changed}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
</div>
|
||||
</ModalBody>
|
||||
</form>
|
||||
</>
|
||||
|
||||
@@ -10,7 +10,7 @@ import { fetchEvent, postEvent } from 'app/api/eventApi';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useFetch } from 'app/hooks/useFetch';
|
||||
import { EVENT_TABLE } from 'app/api/apiConstants';
|
||||
import style from './Modals.module.css';
|
||||
import style from './Modals.module.scss';
|
||||
|
||||
export default function SettingsModal() {
|
||||
const { data, status } = useFetch(EVENT_TABLE, fetchEvent);
|
||||
@@ -122,6 +122,7 @@ export default function SettingsModal() {
|
||||
name='backstageInfo'
|
||||
placeholder='Information to be shown on backstage screens'
|
||||
autoComplete='off'
|
||||
resize={false}
|
||||
value={formData.backstageInfo}
|
||||
onChange={(event) => {
|
||||
setChanged(true);
|
||||
@@ -160,14 +161,16 @@ export default function SettingsModal() {
|
||||
</FormControl>
|
||||
</>
|
||||
)}
|
||||
<Button
|
||||
colorScheme='blue'
|
||||
type='submit'
|
||||
isLoading={submitting}
|
||||
disabled={!changed}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<div className={style.submitContainer}>
|
||||
<Button
|
||||
colorScheme='blue'
|
||||
type='submit'
|
||||
isLoading={submitting}
|
||||
disabled={!changed}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
</div>
|
||||
</ModalBody>
|
||||
</form>
|
||||
</>
|
||||
|
||||
@@ -0,0 +1,335 @@
|
||||
import { ModalBody } from '@chakra-ui/modal';
|
||||
import {
|
||||
FormLabel,
|
||||
FormControl,
|
||||
Input,
|
||||
Button,
|
||||
Switch,
|
||||
} from '@chakra-ui/react';
|
||||
import {
|
||||
getInfo,
|
||||
httpPlaceholder,
|
||||
ontimeVars,
|
||||
postInfo,
|
||||
} from 'app/api/ontimeApi';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useFetch } from 'app/hooks/useFetch';
|
||||
import { APP_TABLE } from 'app/api/apiConstants';
|
||||
import { showErrorToast } from 'common/helpers/toastManager';
|
||||
import style from './Modals.module.scss';
|
||||
|
||||
export default function IntegrationSettingsModal() {
|
||||
const { data, status } = useFetch(APP_TABLE, getInfo);
|
||||
const [formData, setFormData] = useState(httpPlaceholder);
|
||||
const [changed, setChanged] = useState(false);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const ready = status === 'success';
|
||||
const integrationInputProps = {
|
||||
size: 'sm',
|
||||
autoComplete: 'off',
|
||||
isDisabled: submitting || !ready,
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (data == null) return;
|
||||
|
||||
setFormData({
|
||||
onLoad: data?.onLoad,
|
||||
onStart: data?.onStart,
|
||||
onUpdate: data?.onUpdate,
|
||||
onPause: data?.onPause,
|
||||
onStop: data?.onStop,
|
||||
});
|
||||
}, [data]);
|
||||
|
||||
const submitHandler = async (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const f = formData;
|
||||
let e = { status: false, message: '' };
|
||||
|
||||
// set fields with error
|
||||
if (e.status) {
|
||||
showErrorToast('Invalid Input', e.message);
|
||||
return;
|
||||
}
|
||||
|
||||
// Post here
|
||||
postInfo(f);
|
||||
|
||||
setChanged(false);
|
||||
setSubmitting(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<form onSubmit={submitHandler}>
|
||||
<ModalBody
|
||||
className={ready ? style.modalBody : style.modalBodyDisabled}
|
||||
>
|
||||
<>
|
||||
<p className={style.notes}>
|
||||
Integrate with third party over an HTTP API
|
||||
<br />
|
||||
🔥 Changes take effect after app restart 🔥
|
||||
</p>
|
||||
<div className={style.highNotes}>
|
||||
<p>
|
||||
Add HTTP messages that ontime will send during the app lifecycle
|
||||
</p>
|
||||
<p>
|
||||
You can use the variables below to pass data directly from
|
||||
ontime eg:
|
||||
<span className={style.emNote}>
|
||||
http://127.0.0.1:8088/API/?setHeadline=<b>$title</b>
|
||||
&setSub=<b>$presenter</b>
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<table>
|
||||
{ontimeVars.map((v) => (
|
||||
<tr>
|
||||
<td className={style.noteItem}>{v.name}</td>
|
||||
<td>{v.description}</td>
|
||||
</tr>
|
||||
))}
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<>
|
||||
<FormLabel>
|
||||
On Load
|
||||
<span className={style.notes}>When a new event loads</span>
|
||||
</FormLabel>
|
||||
<FormControl id='onLoad' className={style.modalInline}>
|
||||
<Input
|
||||
{...integrationInputProps}
|
||||
name='onLoadURL'
|
||||
value={formData?.onLoad?.url}
|
||||
onChange={(event) => {
|
||||
setChanged(true);
|
||||
setFormData({
|
||||
...formData,
|
||||
onLoad: {
|
||||
...formData.onLoad,
|
||||
url: event.target.value,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<Switch
|
||||
colorScheme='green'
|
||||
id='onLoadEnable'
|
||||
value={formData?.onLoad?.enabled}
|
||||
onChange={(event) => {
|
||||
setChanged(true);
|
||||
setFormData({
|
||||
...formData,
|
||||
onLoad: {
|
||||
...formData.onLoad,
|
||||
enabled: event.target.value,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel>
|
||||
On Start
|
||||
<span className={style.notes}>
|
||||
When an timer starts / resumes
|
||||
</span>
|
||||
</FormLabel>
|
||||
<FormControl id='onStart' className={style.modalInline}>
|
||||
<Input
|
||||
{...integrationInputProps}
|
||||
name='onStartURL'
|
||||
value={formData?.onStart?.url}
|
||||
onChange={(event) => {
|
||||
setChanged(true);
|
||||
setFormData({
|
||||
...formData,
|
||||
onStart: {
|
||||
...formData.onStart,
|
||||
url: event.target.value,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<Switch
|
||||
colorScheme='green'
|
||||
id='onStartEnable'
|
||||
value={formData?.onStart?.enabled}
|
||||
onChange={(event) => {
|
||||
setChanged(true);
|
||||
setFormData({
|
||||
...formData,
|
||||
onStart: {
|
||||
...formData.onStart,
|
||||
enabled: event.target.value,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel>
|
||||
On Update
|
||||
<span className={style.notes}>At every clock tick</span>
|
||||
</FormLabel>
|
||||
<FormControl id='onUpdate' className={style.modalInline}>
|
||||
<Input
|
||||
{...integrationInputProps}
|
||||
name='onUpdateURL'
|
||||
value={formData?.onUpdate?.url}
|
||||
onChange={(event) => {
|
||||
setChanged(true);
|
||||
setFormData({
|
||||
...formData,
|
||||
onUpdate: {
|
||||
...formData.onUpdate,
|
||||
url: event.target.value,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<Switch
|
||||
colorScheme='green'
|
||||
id='onUpdateEnable'
|
||||
value={formData?.onUpdate?.enabled}
|
||||
onChange={(event) => {
|
||||
setChanged(true);
|
||||
setFormData({
|
||||
...formData,
|
||||
onUpdate: {
|
||||
...formData.onUpdate,
|
||||
enabled: event.target.value,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel>
|
||||
On Pause
|
||||
<span className={style.notes}>When a timer pauses</span>
|
||||
</FormLabel>
|
||||
<FormControl id='onPause' className={style.modalInline}>
|
||||
<Input
|
||||
{...integrationInputProps}
|
||||
name='onPauseURL'
|
||||
value={formData?.onPause?.url}
|
||||
onChange={(event) => {
|
||||
setChanged(true);
|
||||
setFormData({
|
||||
...formData,
|
||||
onPause: {
|
||||
...formData.onPause,
|
||||
url: event.target.value,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<Switch
|
||||
colorScheme='green'
|
||||
id='onPauseEnable'
|
||||
value={formData?.onPause?.enabled}
|
||||
onChange={(event) => {
|
||||
setChanged(true);
|
||||
setFormData({
|
||||
...formData,
|
||||
onPause: {
|
||||
...formData.onPause,
|
||||
enabled: event.target.value,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel>
|
||||
On Stop
|
||||
<span className={style.notes}>When an event is unloaded</span>
|
||||
</FormLabel>
|
||||
<FormControl id='onStop' className={style.modalInline}>
|
||||
<Input
|
||||
{...integrationInputProps}
|
||||
name='onStopURL'
|
||||
value={formData?.onStop?.url}
|
||||
onChange={(event) => {
|
||||
setChanged(true);
|
||||
setFormData({
|
||||
...formData,
|
||||
onStop: {
|
||||
...formData.onStop,
|
||||
url: event.target.value,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<Switch
|
||||
colorScheme='green'
|
||||
id='onStopEnable'
|
||||
value={formData?.onStop?.enabled}
|
||||
onChange={(event) => {
|
||||
setChanged(true);
|
||||
setFormData({
|
||||
...formData,
|
||||
onStop: {
|
||||
...formData.onStop,
|
||||
enabled: event.target.value,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel>
|
||||
On Finish
|
||||
<span className={style.notes}>When an event is finished</span>
|
||||
</FormLabel>
|
||||
<FormControl id='onFinish' className={style.modalInline}>
|
||||
<Input
|
||||
{...integrationInputProps}
|
||||
name='onFinishURL'
|
||||
value={formData?.onFinish?.url}
|
||||
onChange={(event) => {
|
||||
setChanged(true);
|
||||
setFormData({
|
||||
...formData,
|
||||
onStop: {
|
||||
...formData.onFinish,
|
||||
url: event.target.value,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<Switch
|
||||
colorScheme='green'
|
||||
id='onFinishEnable'
|
||||
value={formData?.onFinish?.enabled}
|
||||
onChange={(event) => {
|
||||
setChanged(true);
|
||||
setFormData({
|
||||
...formData,
|
||||
onStop: {
|
||||
...formData.onStop,
|
||||
enabled: event.target.value,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
</>
|
||||
</>
|
||||
<div className={style.submitContainer}>
|
||||
<Button
|
||||
colorScheme='blue'
|
||||
type='submit'
|
||||
isLoading={submitting}
|
||||
disabled={!changed || !ready}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
</div>
|
||||
</ModalBody>
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -10,6 +10,7 @@ import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/tabs';
|
||||
import EventSettingsModal from './EventSettingsModal';
|
||||
import AppSettingsModal from './AppSettingsModal';
|
||||
import AliasesModal from './AliasesModal';
|
||||
import IntegrationSettingsModal from './IntegrationSettingsModal';
|
||||
|
||||
export default function ModalManager(props) {
|
||||
const { isOpen, onClose } = props;
|
||||
@@ -19,6 +20,7 @@ export default function ModalManager(props) {
|
||||
onClose={onClose}
|
||||
closeOnOverlayClick={false}
|
||||
motionPreset={'slideInBottom'}
|
||||
size='lg'
|
||||
>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
@@ -27,9 +29,10 @@ export default function ModalManager(props) {
|
||||
|
||||
<Tabs size='sm' isLazy>
|
||||
<TabList>
|
||||
<Tab>Event Settings</Tab>
|
||||
<Tab>Application Settings</Tab>
|
||||
<Tab>URL Aliases</Tab>
|
||||
<Tab style={{ fontSize: '0.9em' }}>Event Data</Tab>
|
||||
<Tab style={{ fontSize: '0.9em' }}>Application Settings</Tab>
|
||||
<Tab style={{ fontSize: '0.9em' }}>URL Aliases</Tab>
|
||||
{/*<Tab style={{ fontSize: '0.9em' }}>Integration</Tab>*/}
|
||||
</TabList>
|
||||
<TabPanels>
|
||||
<TabPanel>
|
||||
@@ -41,6 +44,9 @@ export default function ModalManager(props) {
|
||||
<TabPanel>
|
||||
<AliasesModal />
|
||||
</TabPanel>
|
||||
{/*<TabPanel>*/}
|
||||
{/* <IntegrationSettingsModal />*/}
|
||||
{/*</TabPanel>*/}
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
</ModalContent>
|
||||
|
||||
@@ -1,60 +0,0 @@
|
||||
.modalBody {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.modalBody > * {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
.modalBody > button {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.notes {
|
||||
font-weight: 400;
|
||||
color: #2b6cb0;
|
||||
}
|
||||
|
||||
p.notes {
|
||||
text-align: center;
|
||||
border-color: #2b6cb055;
|
||||
border-width: 0 2px;
|
||||
font-size: 0.9em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
span.notes {
|
||||
font-size: 0.8em;
|
||||
padding-left: 0.4em;
|
||||
}
|
||||
|
||||
.modalInline {
|
||||
display: flex;
|
||||
gap: 2em;
|
||||
}
|
||||
|
||||
.highNotes {
|
||||
background-color: #2b6cb022;
|
||||
margin: 1em 0;
|
||||
padding: 0.3em;
|
||||
}
|
||||
|
||||
.flexNote {
|
||||
font-size: 0.9em;
|
||||
padding-bottom: 0.3em;
|
||||
}
|
||||
|
||||
a::after {
|
||||
content: ' \2197';
|
||||
color: #ff7597;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #ff7597;
|
||||
}
|
||||
|
||||
.separator {
|
||||
border: 1px solid #2b6cb055;
|
||||
width: 50%;
|
||||
margin: 0.5em auto;
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
@use '../../styles/variables' as *;
|
||||
|
||||
//////////////////////////////////// main
|
||||
|
||||
.modalBody,
|
||||
.modalBodyDisabled {
|
||||
font-weight: 400;
|
||||
|
||||
.notes {
|
||||
font-weight: 400;
|
||||
color: $light-bg;
|
||||
}
|
||||
|
||||
.separator {
|
||||
border: 1px solid $light-bg-transparent;
|
||||
width: 50%;
|
||||
margin: 0.5em auto;
|
||||
}
|
||||
|
||||
.modalInline {
|
||||
display: flex;
|
||||
gap: 2em;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.submitContainer {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
button {
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.modalBody > *,
|
||||
.modalBodyDisabled > * {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
//////////////////////////////////// notes
|
||||
p {
|
||||
&.notes {
|
||||
text-align: center;
|
||||
border-color: $light-bg-transparent;
|
||||
border-width: 0 2px;
|
||||
font-size: 0.9em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
&.notes {
|
||||
font-size: 0.8em;
|
||||
padding-left: 0.4em;
|
||||
}
|
||||
}
|
||||
|
||||
.highNotes {
|
||||
background-color: $light-text;
|
||||
margin: 1em 0;
|
||||
padding: 0.3em;
|
||||
font-size: 0.9em;
|
||||
|
||||
table {
|
||||
background-color: $light-text;
|
||||
width: 100%;
|
||||
margin-top: 0.3em;
|
||||
}
|
||||
|
||||
.noteItem {
|
||||
user-select: text;
|
||||
font-weight: 700;
|
||||
padding-right: 2em;
|
||||
}
|
||||
|
||||
.flexNote {
|
||||
user-select: text;
|
||||
padding-bottom: 0.3em;
|
||||
}
|
||||
|
||||
.emNote {
|
||||
user-select: text;
|
||||
display: block;
|
||||
background-color: #fffc;
|
||||
}
|
||||
}
|
||||
|
||||
// Define style for a link
|
||||
a {
|
||||
&::after {
|
||||
content: ' \2197';
|
||||
color: $accent;
|
||||
}
|
||||
&:hover {
|
||||
color: $accent;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user