Move panel creation to sections

2023-04-13 19:42:25 +01:00 · 2023-04-13 19:42:25 +01:00 · 929351eb45
commit 929351eb45
parent ae2789501c
9 changed files with 107 additions and 83 deletions
--- a/frontend/src/components/Button.svelte
+++ b/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";
--- a/frontend/src/components/Card.svelte
+++ b/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>
--- a/frontend/src/components/Collapsible.svelte
+++ b/frontend/src/components/Collapsible.svelte
@ -1,6 +1,8 @@
 <div style="margin-bottom: 8px">
-  <div style="cursor: pointer;" class="inline" on:click={toggle}>
-    {#if expanded}
+  <div class="inline" class:pointer={!forceAlwaysOpen} on:click={() => toggle(false)}>
+    {#if forceAlwaysOpen}
+      <i class="fas fa-chevron-right"></i>
+    {:else if expanded}
      <i class="{retractIcon}"></i>
    {:else}
      <i class="{expandIcon}"></i>
@ -26,7 +28,7 @@
    <hr/>
  </div>

-  <div bind:this={content} class="content" class:hide-overflow={!expanded}>
+  <div bind:this={content} class="content">
    <slot name="content"></slot>
  </div>
 </div>
@ -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 tooltipUrl;
+    export let tooltip = undefined;
+    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,24 +83,27 @@
    }

    onMount(() => {
-        content.addEventListener('DOMNodeInserted', updateIfExpanded);
-        content.addEventListener('DOMNodeRemoved', updateIfExpanded);
+        // content.addEventListener('DOMNodeInserted', 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>

 <style>
-    .hide-overflow {
-        overflow: hidden;
-    }
-
    .content {
        display: flex;
        transition: max-height .3s ease-in-out, margin-top .3s ease-in-out, margin-bottom .3s ease-in-out;
        position: relative;
+        overflow: hidden;
        max-height: 0;
-        margin-top: 4px;
    }

    .inline {
@ -109,4 +122,8 @@
        width: 100%;
        flex: 1;
    }
+
+    .pointer {
+        cursor: pointer;
+    }
 </style>
--- a/frontend/src/components/EmbedForm.svelte
+++ b/frontend/src/components/EmbedForm.svelte
@ -11,7 +11,7 @@
                      bind:value={data.description}/>
    </div>

-    <Collapsible>
+    <Collapsible forceAlwaysOpen>
      <span slot="header">Author</span>

      <div slot="content" class="row">
@ -23,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"
@ -33,7 +33,7 @@
      </div>
    </Collapsible>

-    <Collapsible>
+    <Collapsible forceAlwaysOpen>
      <span slot="header">Footer</span>
      <div slot="content" class="row">
        {#if footerPremiumOnly}
@ -49,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}
@ -100,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;
@ -122,4 +119,4 @@
        data.fields.splice(i, 1);
        data = data;
    }
-</script>
+</script>
--- a/frontend/src/components/NavElement.svelte
+++ b/frontend/src/components/NavElement.svelte
@ -18,7 +18,7 @@

 <script>
  export let icon;
-  export let link;
+  export let link = undefined;
 </script>

 <style>
--- a/frontend/src/components/form/EmojiInput.svelte
+++ b/frontend/src/components/form/EmojiInput.svelte
@ -14,8 +14,8 @@

 <script>
    export let value;
-    export let label;
-    export let placeholder;
+    export let label = undefined;
+    export let placeholder = undefined;
    export let disabled = false;

    export let col1 = false;
--- a/frontend/src/components/form/Input.svelte
+++ b/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;
--- a/frontend/src/components/manage/PanelCreationForm.svelte
+++ b/frontend/src/components/manage/PanelCreationForm.svelte
@ -5,6 +5,50 @@
 {/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">
@ -80,54 +124,12 @@
        </div>
    </Collapsible>

-    <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="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>
        <span slot="header">Welcome Message</span>
        <div slot="content" class="col-1">
-            <EmbedForm bind:data={data.welcome_message} />
+            <div class="row">
+                <EmbedForm bind:data={data.welcome_message} />
+            </div>
        </div>
    </Collapsible>
 </form>
@ -328,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;
--- a/frontend/src/includes/Head.svelte
+++ b/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'