Settings style (#808)

apps/client/src/features/app-settings/AppSettings.tsx

@@ -32,10 +32,10 @@ export default function AppSettings() {
         <PanelContent onClose={closeSettings}>
           {selectedPanel === 'project' && <ProjectPanel />}
           {selectedPanel === 'general' && <GeneralPanel />}
+          {selectedPanel === 'project_settings' && <ProjectSettingsPanel />}
           {selectedPanel === 'sources' && <SourcesPanel />}
           {selectedPanel === 'interface' && <InterfacePanel />}
           {selectedPanel === 'integrations' && <IntegrationsPanel />}
-          {selectedPanel === 'project_settings' && <ProjectSettingsPanel />}
           {selectedPanel === 'about' && <AboutPanel />}
           {selectedPanel === 'log' && <LogPanel />}
         </PanelContent>

apps/client/src/features/app-settings/panel/Panel.module.scss

@@ -98,7 +98,7 @@ $inner-padding: 1rem;
 }
 
 .listGroup {
-  padding: 1rem 2rem 0 2rem;
+  padding: 0 2rem;
 
   > li:not(:last-child) {
     border-bottom: 1px solid $white-10;
@@ -130,23 +130,22 @@ $inner-padding: 1rem;
 .divider {
   border-top: 1px solid $white-10;
   margin: 1rem -2rem;
+  z-index: 999;
 }
 
-$loader-size: 4rem;
-
 .overlay {
   position: absolute;
   z-index: 10;
-  width: calc(100% - 2rem);
+  width: 100%;
-  left: 1rem;
+  height: 100%;
-  height: calc(80% - 1rem);
+  backdrop-filter: blur(2px);
   display: grid;
   place-content: center;
-  backdrop-filter: blur(5px);
+  background-color: $black-10;
-  background-color: rgba(0, 0, 0, 0.01);
 }
 
 .loader {
+  $loader-size: 4rem;
   width: $loader-size;
   height: $loader-size;
   background: $blue-500;

apps/client/src/features/app-settings/panel/PanelUtils.tsx

@@ -82,10 +82,13 @@ export function Divider() {
   return <hr className={style.divider} />;
 }
 
-export function Loader() {
+export function Loader({ isLoading }: { isLoading: boolean }) {
+  if (!isLoading) {
+    return null;
+  }
   return (
     <div className={style.overlay}>
-      <span className={style.loader} />
+      <div className={style.loader} />
     </div>
   );
 }

apps/client/src/features/app-settings/panel/general-panel/GeneralPanelForm.tsx

@@ -59,6 +59,8 @@ export default function GeneralPanelForm() {
     reset(data);
   };
 
+  const isLoading = status === 'pending';
+
   return (
     <Panel.Section as='form' onSubmit={handleSubmit(onSubmit)} id='app-settings'>
       <Panel.Card>
@@ -82,6 +84,8 @@ export default function GeneralPanelForm() {
         </Panel.SubHeader>
         {submitError && <Panel.Error>{submitError}</Panel.Error>}
         <Panel.Divider />
+        <Panel.Section>
+          <Panel.Loader isLoading={isLoading} />
           <Panel.ListGroup>
             <Panel.ListItem>
               <Panel.Field
@@ -152,6 +156,7 @@ export default function GeneralPanelForm() {
               </Select>
             </Panel.ListItem>
           </Panel.ListGroup>
+        </Panel.Section>
       </Panel.Card>
     </Panel.Section>
   );

apps/client/src/features/app-settings/panel/general-panel/UrlPresetsForm.tsx

@@ -84,11 +84,11 @@ export default function UrlPresetsForm() {
     });
   };
 
-  const isPending = status === 'pending';
+  const isLoading = status === 'pending';
   const canSubmit = !isSubmitting && isDirty && isValid;
 
   return (
-    <Panel.Section as='form' onSubmit={handleSubmit(onSubmit)} data-testId='url-preset-form'>
+    <Panel.Section as='form' onSubmit={handleSubmit(onSubmit)} data-testid='url-preset-form'>
       <Panel.Card>
         <Panel.SubHeader>
           URL Presets
@@ -102,8 +102,6 @@ export default function UrlPresetsForm() {
           </div>
         </Panel.SubHeader>
         <Panel.Divider />
-        {isPending && <Panel.Loader />}
-        <Panel.Section>
         <Alert status='info' variant='ontime-on-dark-info'>
           <AlertIcon />
           <AlertDescription>
@@ -117,6 +115,8 @@ export default function UrlPresetsForm() {
             <ExternalLink href={urlPresetsDocs}>See the docs</ExternalLink>
           </AlertDescription>
         </Alert>
+        <Panel.Section>
+          <Panel.Loader isLoading={isLoading} />
           <Panel.Title>
             Manage presets
             <Button variant='ontime-subtle' rightIcon={<IoAdd />} size='sm' onClick={addNew}>

apps/client/src/features/app-settings/panel/general-panel/ViewSettingsForm.tsx

@@ -16,8 +16,8 @@ import style from './GeneralPanel.module.scss';
 const cssOverrideDocsUrl = 'https://docs.getontime.no/features/custom-styling/';
 
 export default function ViewSettingsForm() {
-  const { data, status, refetch, isFetching } = useViewSettings();
+  const { data, status, refetch } = useViewSettings();
-  const { data: info, isFetching: isFetchingInfo } = useInfo();
+  const { data: info, status: infoStatus } = useInfo();
 
   const {
     control,
@@ -64,7 +64,7 @@ export default function ViewSettingsForm() {
     return null;
   }
 
-  const disableInputs = status === 'pending';
+  const isLoading = status === 'pending' || infoStatus === 'pending';
 
   return (
     <Panel.Section as='form' onSubmit={handleSubmit(onSubmit)} id='view-settings'>
@@ -81,8 +81,6 @@ export default function ViewSettingsForm() {
           </div>
         </Panel.SubHeader>
         <Panel.Divider />
-        {isFetching || isFetchingInfo ? <Panel.Loader /> : null}
-        <Panel.ListGroup>
         <Alert status='info' variant='ontime-on-dark-info'>
           <AlertIcon />
           <AlertDescription>
@@ -93,6 +91,9 @@ export default function ViewSettingsForm() {
             <ExternalLink href={cssOverrideDocsUrl}>See the docs</ExternalLink>
           </AlertDescription>
         </Alert>
+        <Panel.Section>
+          <Panel.Loader isLoading={isLoading} />
+          <Panel.ListGroup>
             <Panel.ListItem>
               <Panel.Field
                 title='Override CSS styles'
@@ -125,11 +126,11 @@ export default function ViewSettingsForm() {
                 maxLength={150}
                 width='275px'
                 placeholder='Message shown when timer reaches end'
-              isDisabled={disableInputs}
                 {...register('endMessage')}
               />
             </Panel.ListItem>
           </Panel.ListGroup>
+        </Panel.Section>
       </Panel.Card>
     </Panel.Section>
   );

apps/client/src/features/app-settings/panel/integrations-panel/HttpIntegrations.tsx

@@ -16,7 +16,7 @@ import { cycles } from './integrationUtils';
 import style from './IntegrationsPanel.module.css';
 
 export default function HttpIntegrations() {
-  const { data } = useHttpSettings();
+  const { data, status } = useHttpSettings();
   const { mutateAsync } = usePostHttpSettings();
 
   const {
@@ -69,6 +69,7 @@ export default function HttpIntegrations() {
   };
 
   const canSubmit = !isSubmitting && isDirty && isValid;
+  const isLoading = status === 'pending';
 
   return (
     <Panel.Section>
@@ -93,6 +94,7 @@ export default function HttpIntegrations() {
         </Panel.SubHeader>
         <Panel.Divider />
         <Panel.Section as='form' id='http-form' onSubmit={handleSubmit(onSubmit)} onKeyDown={preventEscape}>
+          <Panel.Loader isLoading={isLoading} />
           {errors?.root && <Panel.Error>{errors.root.message}</Panel.Error>}
           <Panel.ListGroup>
             <Panel.ListItem>

apps/client/src/features/app-settings/panel/integrations-panel/OscIntegrations.tsx

@@ -16,7 +16,7 @@ import { cycles } from './integrationUtils';
 import style from './IntegrationsPanel.module.css';
 
 export default function OscIntegrations() {
-  const { data } = useOscSettings();
+  const { data, status } = useOscSettings();
   const { mutateAsync } = useOscSettingsMutation();
 
   const {
@@ -75,6 +75,7 @@ export default function OscIntegrations() {
   };
 
   const canSubmit = !isSubmitting && isDirty && isValid;
+  const isLoading = status === 'pending';
 
   return (
     <Panel.Card>
@@ -100,6 +101,7 @@ export default function OscIntegrations() {
       <Panel.Divider />
 
       <Panel.Section as='form' id='osc-form' onSubmit={handleSubmit(onSubmit)} onKeyDown={preventEscape}>
+        <Panel.Loader isLoading={isLoading} />
         <Panel.Title>OSC Settings</Panel.Title>
         {errors?.root && <Panel.Error>{errors.root.message}</Panel.Error>}
         <Panel.ListGroup>

apps/client/src/features/app-settings/panel/project-panel/ManageProjects.tsx

@@ -51,6 +51,7 @@ export default function ManageProjects() {
   const handleCloseForm = () => {
     setIsCreatingProject(false);
   };
+
   return (
     <Panel.Section>
       <Input

apps/client/src/features/app-settings/panel/project-panel/ProjectData.tsx

@@ -11,7 +11,7 @@ import * as Panel from '../PanelUtils';
 import style from './ProjectPanel.module.scss';
 
 export default function ProjectData() {
-  const { data, refetch } = useProjectData();
+  const { data, status, refetch } = useProjectData();
 
   const {
     handleSubmit,
@@ -45,9 +45,13 @@ export default function ProjectData() {
     }
   };
 
+  // populate with new data if we get an update
   const onReset = () => {
     reset(data);
   };
+
+  const isLoading = status === 'pending';
+
   return (
     <Panel.Section as='form' onSubmit={handleSubmit(onSubmit)}>
       <Panel.Card>
@@ -70,6 +74,7 @@ export default function ProjectData() {
         </Panel.SubHeader>
         <Panel.Divider />
         <Panel.Section>
+          <Panel.Loader isLoading={isLoading} />
           <label>
             Project title
             <Input