Merge branch 'wip'

frontend/src/components/Button.svelte

@@ -10,7 +10,7 @@
 </button>
 
 <script>
-    export let icon;
+    export let icon = undefined;
     export let fullWidth = false;
     export let disabled = false;
     export let type = "submit";

frontend/src/components/Card.svelte

@@ -3,7 +3,7 @@
     export let fill = true;
     export let footerRight = false;
     export let dropdown = false;
-    export let ref;
+    export let ref = undefined;
 
     let dropdownActive = false;
 </script>

frontend/src/components/Collapsible.svelte

@@ -1,6 +1,8 @@
 <div style="margin-bottom: 8px">
-  <div style="cursor: pointer;" class="inline" on:click={toggle}>
+  <div class="inline" class:pointer={!forceAlwaysOpen} on:click={() => toggle(false)}>
-    {#if expanded}
+    {#if forceAlwaysOpen}
+      <i class="fas fa-chevron-right"></i>
+    {:else if expanded}
       <i class="{retractIcon}"></i>
     {:else}
       <i class="{expandIcon}"></i>
@@ -36,13 +38,15 @@
 <script>
     import {onMount} from "svelte";
     import Tooltip from "svelte-tooltip";
+    import { createEventDispatcher } from 'svelte';
 
     export let retractIcon = "fas fa-minus";
     export let expandIcon = "fas fa-plus";
 
+    export let forceAlwaysOpen = false;
     export let defaultOpen = false;
-    export let tooltip;
+    export let tooltip = undefined;
-    export let tooltipUrl;
+    export let tooltipUrl = undefined;
 
     let expanded = false;
     let showOverflow = true;
@@ -52,7 +56,13 @@
     let innerWidth;
     $: innerWidth, updateIfExpanded();
 
-    export function toggle() {
+    const dispatch = createEventDispatcher();
+
+    export function toggle(force) {
+        if (forceAlwaysOpen && !force) {
+            return;
+        }
+
         if (expanded) {
             content.style.maxHeight = 0;
         } else {
@@ -62,7 +72,7 @@
         expanded = !expanded;
     }
 
-    export function updateSize() {
+    function updateSize() {
         content.style.maxHeight = `${content.scrollHeight}px`;
     }
 
@@ -73,10 +83,17 @@
     }
 
     onMount(() => {
-        content.addEventListener('DOMNodeInserted', updateIfExpanded);
+        // content.addEventListener('DOMNodeInserted', updateIfExpanded);
-        content.addEventListener('DOMNodeRemoved', updateIfExpanded);
+        // content.addEventListener('DOMNodeRemoved', updateIfExpanded);
 
-        if (defaultOpen) toggle();
+        const observer = new MutationObserver(() => {
+            updateIfExpanded();
+            setTimeout(updateIfExpanded, 300); // TODO: Move with transition height
+        });
+
+        observer.observe(content, { childList: true, subtree: true });
+
+        if (defaultOpen || forceAlwaysOpen) toggle(true);
     });
 </script>
 
@@ -105,4 +122,8 @@
         width: 100%;
         flex: 1;
     }
+
+    .pointer {
+        cursor: pointer;
+    }
 </style>

frontend/src/components/EmbedForm.svelte

@@ -1,4 +1,5 @@
-<form class="form-wrapper" on:submit|preventDefault>
+{#if data}
+  <form class="form-wrapper" on:submit|preventDefault>
     <div class="row">
       <Colour col3 label="Embed Colour" bind:value={data.colour}/>
       <Input col3 label="Title" placeholder="Embed Title" bind:value={data.title}/>
@@ -10,7 +11,7 @@
                       bind:value={data.description}/>
     </div>
 
-  <Collapsible>
+    <Collapsible forceAlwaysOpen>
       <span slot="header">Author</span>
 
       <div slot="content" class="row">
@@ -22,7 +23,7 @@
       </div>
     </Collapsible>
 
-  <Collapsible>
+    <Collapsible forceAlwaysOpen>
       <span slot="header">Images</span>
       <div slot="content" class="row">
         <Input col2 label="Large Image URL" placeholder="https://example.com/image.png"
@@ -32,7 +33,7 @@
       </div>
     </Collapsible>
 
-  <Collapsible>
+    <Collapsible forceAlwaysOpen>
       <span slot="header">Footer</span>
       <div slot="content" class="row">
         {#if footerPremiumOnly}
@@ -48,7 +49,7 @@
       </div>
     </Collapsible>
 
-  <Collapsible>
+    <Collapsible forceAlwaysOpen>
       <span slot="header">Fields</span>
       <div slot="content" class="col-1">
         {#each data.fields as field, i}
@@ -68,7 +69,8 @@
         <Button type="button" icon="fas fa-plus" fullWidth on:click={addField}>Add Field</Button>
       </div>
     </Collapsible>
-</form>
+  </form>
+{/if}
 
 <style>
     .form-wrapper {
@@ -98,19 +100,16 @@
     import Button from "./Button.svelte";
 
     export let data;
+
+    $: data = data ?? {
+        fields: [],
+        colour: '#2ECC71',
+        author: {},
+        footer: {},
+    };
+
     export let footerPremiumOnly = true;
 
-    if (data === undefined || data === null) {
-        if (!data) {
-            data = {};
-        }
-
-        data.fields = [];
-        data.colour = '#2ECC71';
-        data.author = {};
-        data.footer = {};
-    }
-
     function addField() {
         data.fields.push({name: '', value: '', inline: false});
         data = data;

frontend/src/components/NavElement.svelte

@@ -18,7 +18,7 @@
 
 <script>
   export let icon;
-  export let link;
+  export let link = undefined;
 </script>
 
 <style>

frontend/src/components/form/EmojiInput.svelte

@@ -14,8 +14,8 @@
 
 <script>
     export let value;
-    export let label;
+    export let label = undefined;
-    export let placeholder;
+    export let placeholder = undefined;
     export let disabled = false;
 
     export let col1 = false;

frontend/src/components/form/Input.svelte

@@ -31,7 +31,7 @@
     export let value;
     export let label;
     export let placeholder;
-    export let badge;
+    export let badge = undefined;
     export let disabled = false;
 
     export let tooltipText = undefined;

frontend/src/components/manage/PanelCreationForm.svelte

@@ -5,6 +5,53 @@
 {/if}
 
 <form class="settings-form" on:submit|preventDefault>
+    <Collapsible defaultOpen>
+        <span slot="header">Ticket Properties</span>
+        <div slot="content" class="col-1">
+            <div class="row">
+                <div class="col-2">
+                    <label class="form-label">Mention On Open</label>
+                    <div class="multiselect-super">
+                        <Select items={mentionItems}
+                                bind:selectedValue={selectedMentions}
+                                on:select={updateMentions}
+                                optionIdentifier="id"
+                                getSelectionLabel={mentionNameMapper}
+                                getOptionLabel={mentionNameMapper}
+                                placeholderAlwaysShow={true}
+                                isMulti={true} />
+                    </div>
+                </div>
+                <div class="col-2">
+                    <label class="form-label">Support Teams</label>
+                    <div class="multiselect-super">
+                        <Select items={teamsWithDefault}
+                                bind:selectedValue={selectedTeams}
+                                on:select={updateTeams}
+                                isSearchable={false}
+                                optionIdentifier="id"
+                                getSelectionLabel={nameMapper}
+                                getOptionLabel={nameMapper}
+                                isMulti={true} />
+                    </div>
+                </div>
+            </div>
+            <div class="incomplete-row">
+                <CategoryDropdown label="Ticket Category" col3 {channels} bind:value={data.category_id}/>
+
+                <Dropdown col4 label="Form" bind:value={data.form_id}>
+                    <option value=null>None</option>
+                    {#each forms as form}
+                        <option value={form.form_id}>{form.title}</option>
+                    {/each}
+                </Dropdown>
+            </div>
+        </div>
+    </Collapsible>
+
+    <Collapsible defaultOpen>
+        <span slot="header">Panel Message</span>
+        <div slot="content" class="col-1">
             <div class="row">
                 <div class="col-1-3">
                     <Input label="Panel Title" placeholder="Open a ticket!" col1=true bind:value={data.title}/>
@@ -14,17 +61,22 @@
                                   bind:value={data.content}/>
                 </div>
             </div>
+
             <div class="row">
                 <Colour col4=true label="Panel Colour" on:change={updateColour} bind:value={tempColour}/>
                 <ChannelDropdown label="Panel Channel" allowAnnouncementChannel col4 {channels} bind:value={data.channel_id}/>
-        <CategoryDropdown label="Ticket Category" col4 {channels} bind:value={data.category_id}/>
+                <div class="col-2">
-        <Dropdown col4=true label="Form" bind:value={data.form_id}>
+                    <div class="row" style="justify-content: flex-start; gap: 10px">
-            <option value=null>None</option>
+                        <div style="white-space: nowrap">
-            {#each forms as form}
+                            <Checkbox label="Disable Panel" bind:value={data.disabled}></Checkbox>
-                <option value={form.form_id}>{form.title}</option>
-            {/each}
-        </Dropdown>
                         </div>
+                        {#if data.disabled}
+                            <b style="display: flex; align-self: center">You will be unable to open any tickets with this panel</b>
+                        {/if}
+                    </div>
+                </div>
+            </div>
+
             <div class="row">
                 <Dropdown col4=true label="Button Colour" bind:value={data.button_style}>
                     <option value="1">Blue</option>
@@ -63,93 +115,23 @@
                     </div>
                 </div>
             </div>
-    <div class="row" style="justify-content: center">
+
-        <div class="col-3">
+
-            <Button icon="fas fa-sliders-h" fullWidth=true type="button"
-                    on:click={toggleAdvancedSettings}>Toggle Advanced Settings
-            </Button>
-        </div>
-    </div>
-    <div class="row advanced-settings" class:advanced-settings-show={advancedSettings}
-         class:advanced-settings-hide={!advancedSettings} class:show-overflow={overflowShow}>
-        <div class="inner" class:inner-show={advancedSettings} class:absolute={advancedSettings && !overflowShow} >
             <div class="row">
-                <div class="col-2">
+                <Input col2={true} label="Large Image URL" badge="Optional" bind:value={data.image_url} placeholder="https://example.com/image.png" />
-                    <label class="form-label">Welcome Message</label>
+                <Input col2={true} label="Small Image URL" badge="Optional" bind:value={data.thumbnail_url} placeholder="https://example.com/image.png" />
-                    <div class="row" style="justify-content: flex-start; gap: 10px">
-                        <Button icon="fas fa-brush" on:click={openWelcomeMessageBuilder}>Open Editor</Button>
-                        <Button icon="fas fa-trash-can" danger
-                                on:click={() => data.welcome_message = null}>Clear</Button>
-                    </div>
-                </div>
-                <div class="col-2">
-                    <label for="naming-scheme-wrapper" class="form-label">Naming Scheme</label>
-                    <div class="row" id="naming-scheme-wrapper">
-                        <div>
-                            <label class="form-label">Use Server Default</label>
-                            <Toggle hideLabel
-                                    toggledColor="#66bb6a"
-                                    untoggledColor="#ccc"
-                                    bind:toggled={data.use_server_default_naming_scheme} />
-                        </div>
-                        <div class="col-fill">
-                            {#if !data.use_server_default_naming_scheme}
-                                <Input label="Naming Scheme"
-                                       bind:value={data.naming_scheme}
-                                       placeholder="ticket-%id%"
-                                       tooltipText="Click here for the full placeholder list"
-                                       tooltipLink="https://docs.ticketsbot.net" />
-                            {/if}
-                        </div>
-                    </div>
             </div>
         </div>
+    </Collapsible>
+
+    <Collapsible>
+        <span slot="header">Welcome Message</span>
+        <div slot="content" class="col-1">
             <div class="row">
-                <div class="col-2">
+                <EmbedForm bind:data={data.welcome_message} />
-                    <label class="form-label">Mention On Open</label>
-                    <div class="multiselect-super">
-                        <Select items={mentionItems}
-                                bind:selectedValue={selectedMentions}
-                                on:select={updateMentions}
-                                optionIdentifier="id"
-                                getSelectionLabel={mentionNameMapper}
-                                getOptionLabel={mentionNameMapper}
-                                placeholderAlwaysShow={true}
-                                isMulti={true} />
-                    </div>
-                </div>
-                <div class="col-2">
-                    <label class="form-label">Support Teams</label>
-                    <div class="multiselect-super">
-                        <Select items={teamsWithDefault}
-                                bind:selectedValue={selectedTeams}
-                                on:select={updateTeams}
-                                isSearchable={false}
-                                optionIdentifier="id"
-                                getSelectionLabel={nameMapper}
-                                getOptionLabel={nameMapper}
-                                isMulti={true} />
-                    </div>
-                </div>
-            </div>
-            <div class="row">
-                <Input col2={true} label="Large Image URL" bind:value={data.image_url} placeholder="https://example.com/image.png" />
-                <Input col2={true} label="Small Image URL" bind:value={data.thumbnail_url} placeholder="https://example.com/image.png" />
-            </div>
-            <div class="row">
-                <div class="col-2">
-                    <div class="row" style="justify-content: flex-start; gap: 10px">
-                        <div style="white-space: nowrap">
-                            <Checkbox label="Disable Panel" bind:value={data.disabled}></Checkbox>
-                        </div>
-                        {#if data.disabled}
-                            <b style="display: flex; align-self: center">You will be unable to open any tickets with this panel</b>
-                        {/if}
-                    </div>
-                </div>
-            </div>
             </div>
         </div>
+    </Collapsible>
 </form>
 
 <script>
@@ -169,6 +151,8 @@
     import Dropdown from "../form/Dropdown.svelte";
     import Toggle from "svelte-toggle";
     import Checkbox from "../form/Checkbox.svelte";
+    import Collapsible from "../Collapsible.svelte";
+    import EmbedForm from "../EmbedForm.svelte";
 
     export let guildId;
     export let seedDefault = true;
@@ -346,6 +330,14 @@
         margin-bottom: 10px;
     }
 
+    .incomplete-row {
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
+        width: 100%;
+        margin-bottom: 10px;
+    }
+
     form {
         display: flex;
         flex-direction: column;

frontend/src/includes/Head.svelte

@@ -13,7 +13,7 @@
   <!--<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">-->
 
   <!-- Icons -->
-  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.1.1/css/all.css">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.4.0/css/all.css">
 
   <!-- GA -->
   <script async src='https://www.google-analytics.com/analytics.js'