frontend/src/components/General/Input.svelte

@@ -0,0 +1,95 @@
+<script lang=ts>
+    import { onDestroy } from 'svelte';
+    import * as SoftwareVariables from '../../stores.js';
+
+    export let label = '';
+    export let type = 'text';
+    export let min = undefined;
+    export let max = undefined;
+    export let src = undefined;
+    export let alt = undefined;
+    export let width = undefined;
+    export let height = undefined;
+
+    // Import the main colors from the store
+    let firstColor, secondColor, thirdColor, fourthColor, okColor, nokColor, whiteColor
+    const unsubscribeFirstColor = SoftwareVariables.firstColor.subscribe((value) => (firstColor = value));
+    const unsubscribeSecondColor = SoftwareVariables.secondColor.subscribe((value) => (secondColor = value));
+    const unsubscribeThirdColor = SoftwareVariables.thirdColor.subscribe((value) => (thirdColor = value));
+    const unsubscribeFourthColor = SoftwareVariables.fourthColor.subscribe((value) => (fourthColor = value));
+    const unsubscribeOkColor = SoftwareVariables.okColor.subscribe((value) => (okColor = value));
+    const unsubscribeNokColor = SoftwareVariables.nokColor.subscribe((value) => (nokColor = value));
+    const unsubscribeWhiteColor = SoftwareVariables.whiteColor.subscribe((value) => (whiteColor = value))
+
+    onDestroy(() => {
+        unsubscribeFirstColor();
+        unsubscribeSecondColor();
+        unsubscribeThirdColor();
+        unsubscribeFourthColor();
+        unsubscribeOkColor();
+        unsubscribeNokColor();
+        unsubscribeWhiteColor();
+    });
+
+</script>
+
+<div style="width: {width}; height: {height};">
+    <p style="color: {firstColor};">{label}</p>
+    <!-- Handle the textarea input -->
+    {#if type === 'large'}
+        <textarea style="background-color: {firstColor}; color: {whiteColor};"/>
+    <!-- Handle the simple inputs -->
+    {:else}
+        <input style="background-color: {firstColor}; color: {whiteColor};" type={type} min={min} max={max} src={src} alt={alt}/>
+    {/if}
+</div>
+
+<style>
+    div{
+        display:inline-block;
+    }
+    p{
+        margin:0;
+    }
+    input{
+        border:none;
+        border-radius: 0.5em;
+        text-align: center;
+        width: 100%;
+    }
+
+    input::selection {
+        background: #0F4C75; /* Couleur de fond de la sélection */
+        color: #FFFFFF; /* Couleur du texte de la sélection */
+    }
+
+    /* Pour Firefox */
+    input::-moz-selection {
+        background: #0F4C75; /* Couleur de fond de la sélection */
+        color: #FFFFFF; /* Couleur du texte de la sélection */
+    }
+    input:focus {
+        outline: 1px solid #BBE1FA;
+    }
+
+    textarea{
+        border:none;
+        border-radius: 0.5em;
+        resize: none;
+        width: 100%;
+    }
+
+    textarea::selection {
+        background: #0F4C75; /* Couleur de fond de la sélection */
+        color: #FFFFFF; /* Couleur du texte de la sélection */
+    }
+
+    /* Pour Firefox */
+    textarea::-moz-selection {
+        background: #0F4C75; /* Couleur de fond de la sélection */
+        color: #FFFFFF; /* Couleur du texte de la sélection */
+    }
+    textarea:focus {
+        outline: 1px solid #BBE1FA;
+    }
+</style>

frontend/src/components/General/Tab.svelte

@@ -4,6 +4,8 @@
     import * as SoftwareVariables from '../../stores.js';
 
     export let tabs = [];
+    export let maxWidth = undefined;
+    export let maxHeight = undefined;
 
     let activeTab = 0;
 
@@ -41,7 +43,7 @@
     </div>
 
     <div class="bodyContainer"
-    style='background-color: {thirdColor};'>
+    style='background-color: {thirdColor}; max-width: {maxWidth}; max-height: {maxHeight};'>
     {#if tabs[activeTab]}
         <svelte:component this={tabs[activeTab].component} />
     {/if}
@@ -64,7 +66,9 @@
         border-radius: 0.5em;
     }
     .bodyContainer{
+        padding: 0.5em;
         background-color: red;
         border-radius: 0.5em;
+        overflow:auto;
     }
 </style>

frontend/src/components/Settings/ProjectPropertiesContent.svelte

@@ -1,9 +1,52 @@
 <script lang=ts>
+    import { onDestroy } from 'svelte';
+    import * as SoftwareVariables from '../../stores.js';
+    import Input from "../General/Input.svelte";
+    import RoundedButton from '../General/RoundedButton.svelte';
+
+    // Import the main colors from the store
+    let firstColor, secondColor, thirdColor, fourthColor, okColor, nokColor, whiteColor
+    const unsubscribeFirstColor = SoftwareVariables.firstColor.subscribe((value) => (firstColor = value));
+    const unsubscribeSecondColor = SoftwareVariables.secondColor.subscribe((value) => (secondColor = value));
+    const unsubscribeThirdColor = SoftwareVariables.thirdColor.subscribe((value) => (thirdColor = value));
+    const unsubscribeFourthColor = SoftwareVariables.fourthColor.subscribe((value) => (fourthColor = value));
+    const unsubscribeOkColor = SoftwareVariables.okColor.subscribe((value) => (okColor = value));
+    const unsubscribeNokColor = SoftwareVariables.nokColor.subscribe((value) => (nokColor = value));
+    const unsubscribeWhiteColor = SoftwareVariables.whiteColor.subscribe((value) => (whiteColor = value))
+
+    onDestroy(() => {
+        unsubscribeFirstColor();
+        unsubscribeSecondColor();
+        unsubscribeThirdColor();
+        unsubscribeFourthColor();
+        unsubscribeOkColor();
+        unsubscribeNokColor();
+        unsubscribeWhiteColor();
+    });
 
 </script>
 
-<button>You can change your project properties here</button>
+<div class='flexSettings'>
+    <div>
+        <Input label='Nom du show' type='text'/>
+        <Input label='Date du show' type='date'/>
+        <Input label='Statut de la sauvegarde' type='file'/>
+        <Input label="Nombre d'univers DMX" type='number' min='1' max='10'/>
+    </div>
+    <div>
+        <Input label='Statut de la sauvegarde' type='image' src='appicon.png' alt='Photo de profil du show' width='11em'/>
+        <RoundedButton text='Charger une nouvelle image' icon='bxs-image' active/>
+    </div>
+    <div>
+        <Input label="Commentaires" type='large' width='100%'/>
+    </div>
+</div>
+
 
 <style>
+    .flexSettings{
+        display: flex;
+        flex-direction: column;
+    }
 
 </style>

frontend/src/components/Settings/Settings.svelte

@@ -2,7 +2,6 @@
     import RoundedButton from "../General/RoundedButton.svelte";
     import ProjectPropertiesContent from "./ProjectPropertiesContent.svelte";
     import InputsOutputsContent from "./InputsOutputsContent.svelte";
-    import Clock from "../General/Clock.svelte";
     import Tab from "../General/Tab.svelte";
     import { _ } from 'svelte-i18n'
 
@@ -18,7 +17,7 @@
 <RoundedButton text={$_("openProjectString")} icon='bx-folder-open' tooltip={$_("openProjectTooltip")}/>
 
 <!-- Project tabcontrol -->
-<Tab { tabs } />
+<Tab { tabs } maxHeight='73vh'/>
 
 <style>