wip
This commit is contained in:
rxdn
parent
e5148d4086
commit
ae2789501c
@ -26,7 +26,7 @@
|
|||||||
<hr/>
|
<hr/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div bind:this={content} class="content">
|
<div bind:this={content} class="content" class:hide-overflow={!expanded}>
|
||||||
<slot name="content"></slot>
|
<slot name="content"></slot>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -81,12 +81,16 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
.hide-overflow {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
display: flex;
|
display: flex;
|
||||||
transition: max-height .3s ease-in-out, margin-top .3s ease-in-out, margin-bottom .3s ease-in-out;
|
transition: max-height .3s ease-in-out, margin-top .3s ease-in-out, margin-bottom .3s ease-in-out;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
|
||||||
max-height: 0;
|
max-height: 0;
|
||||||
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.inline {
|
.inline {
|
||||||
|
|||||||
@ -1,74 +1,76 @@
|
|||||||
<form class="form-wrapper" on:submit|preventDefault>
|
{#if data}
|
||||||
<div class="row">
|
<form class="form-wrapper" on:submit|preventDefault>
|
||||||
<Colour col3 label="Embed Colour" bind:value={data.colour}/>
|
<div class="row">
|
||||||
<Input col3 label="Title" placeholder="Embed Title" bind:value={data.title}/>
|
<Colour col3 label="Embed Colour" bind:value={data.colour}/>
|
||||||
<Input col3 label="Title URL (Optional)" placeholder="https://example.com" bind:value={data.url}/>
|
<Input col3 label="Title" placeholder="Embed Title" bind:value={data.title}/>
|
||||||
</div>
|
<Input col3 label="Title URL (Optional)" placeholder="https://example.com" bind:value={data.url}/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<Textarea col1 label="Description" placeholder="Large text area, up to 4096 characters"
|
<Textarea col1 label="Description" placeholder="Large text area, up to 4096 characters"
|
||||||
bind:value={data.description}/>
|
bind:value={data.description}/>
|
||||||
</div>
|
|
||||||
|
|
||||||
<Collapsible>
|
|
||||||
<span slot="header">Author</span>
|
|
||||||
|
|
||||||
<div slot="content" class="row">
|
|
||||||
<Input col3 label="Author Name" placeholder="Author Name" bind:value={data.author.name}/>
|
|
||||||
<Input col3 label="Author Icon URL (Optional)" placeholder="https://example.com/image.png"
|
|
||||||
tooltipText="Small icon displayed in the top left" bind:value={data.author.icon_url}/>
|
|
||||||
<Input col3 label="Author URL (Optional)" placeholder="https://example.com"
|
|
||||||
tooltipText="Hyperlink on the author's name" bind:value={data.author.url}/>
|
|
||||||
</div>
|
</div>
|
||||||
</Collapsible>
|
|
||||||
|
|
||||||
<Collapsible>
|
<Collapsible>
|
||||||
<span slot="header">Images</span>
|
<span slot="header">Author</span>
|
||||||
<div slot="content" class="row">
|
|
||||||
<Input col2 label="Large Image URL" placeholder="https://example.com/image.png"
|
|
||||||
bind:value={data.image_url}/>
|
|
||||||
<Input col2 label="Small Image URL" placeholder="https://example.com/image.png"
|
|
||||||
bind:value={data.thumbnail_url}/>
|
|
||||||
</div>
|
|
||||||
</Collapsible>
|
|
||||||
|
|
||||||
<Collapsible>
|
<div slot="content" class="row">
|
||||||
<span slot="header">Footer</span>
|
<Input col3 label="Author Name" placeholder="Author Name" bind:value={data.author.name}/>
|
||||||
<div slot="content" class="row">
|
<Input col3 label="Author Icon URL (Optional)" placeholder="https://example.com/image.png"
|
||||||
{#if footerPremiumOnly}
|
tooltipText="Small icon displayed in the top left" bind:value={data.author.icon_url}/>
|
||||||
<Input col3 label="Footer Text" placeholder="Footer Text" badge="Premium" bind:value={data.footer.text}/>
|
<Input col3 label="Author URL (Optional)" placeholder="https://example.com"
|
||||||
<Input col3 label="Footer Icon URL (Optional)" badge="Premium" placeholder="https://example.com/image.png"
|
tooltipText="Hyperlink on the author's name" bind:value={data.author.url}/>
|
||||||
bind:value={data.footer.icon_url}/>
|
</div>
|
||||||
{:else}
|
</Collapsible>
|
||||||
<Input col3 label="Footer Text" placeholder="Footer Text" bind:value={data.footer.text}/>
|
|
||||||
<Input col3 label="Footer Icon URL (Optional)" placeholder="https://example.com/image.png"
|
|
||||||
bind:value={data.footer.icon_url}/>
|
|
||||||
{/if}
|
|
||||||
<DateTimePicker col3 label="Footer Timestamp (Optional)" bind:value={data.timestamp}/>
|
|
||||||
</div>
|
|
||||||
</Collapsible>
|
|
||||||
|
|
||||||
<Collapsible>
|
<Collapsible>
|
||||||
<span slot="header">Fields</span>
|
<span slot="header">Images</span>
|
||||||
<div slot="content" class="col-1">
|
<div slot="content" class="row">
|
||||||
{#each data.fields as field, i}
|
<Input col2 label="Large Image URL" placeholder="https://example.com/image.png"
|
||||||
<div class="row" style="justify-content: flex-start; gap: 10px">
|
bind:value={data.image_url}/>
|
||||||
<Input col2 label="Field Name" placeholder="Field Name" bind:value={field.name}/>
|
<Input col2 label="Small Image URL" placeholder="https://example.com/image.png"
|
||||||
<Checkbox label="Inline" bind:value={field.inline}/>
|
bind:value={data.thumbnail_url}/>
|
||||||
|
</div>
|
||||||
|
</Collapsible>
|
||||||
|
|
||||||
<div style="margin-top: 18px; display: flex; align-self: center">
|
<Collapsible>
|
||||||
<Button danger icon="fas fa-trash-can" on:click={() => deleteField(i)}>Delete</Button>
|
<span slot="header">Footer</span>
|
||||||
|
<div slot="content" class="row">
|
||||||
|
{#if footerPremiumOnly}
|
||||||
|
<Input col3 label="Footer Text" placeholder="Footer Text" badge="Premium" bind:value={data.footer.text}/>
|
||||||
|
<Input col3 label="Footer Icon URL (Optional)" badge="Premium" placeholder="https://example.com/image.png"
|
||||||
|
bind:value={data.footer.icon_url}/>
|
||||||
|
{:else}
|
||||||
|
<Input col3 label="Footer Text" placeholder="Footer Text" bind:value={data.footer.text}/>
|
||||||
|
<Input col3 label="Footer Icon URL (Optional)" placeholder="https://example.com/image.png"
|
||||||
|
bind:value={data.footer.icon_url}/>
|
||||||
|
{/if}
|
||||||
|
<DateTimePicker col3 label="Footer Timestamp (Optional)" bind:value={data.timestamp}/>
|
||||||
|
</div>
|
||||||
|
</Collapsible>
|
||||||
|
|
||||||
|
<Collapsible>
|
||||||
|
<span slot="header">Fields</span>
|
||||||
|
<div slot="content" class="col-1">
|
||||||
|
{#each data.fields as field, i}
|
||||||
|
<div class="row" style="justify-content: flex-start; gap: 10px">
|
||||||
|
<Input col2 label="Field Name" placeholder="Field Name" bind:value={field.name}/>
|
||||||
|
<Checkbox label="Inline" bind:value={field.inline}/>
|
||||||
|
|
||||||
|
<div style="margin-top: 18px; display: flex; align-self: center">
|
||||||
|
<Button danger icon="fas fa-trash-can" on:click={() => deleteField(i)}>Delete</Button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="row">
|
||||||
<div class="row">
|
|
||||||
<Textarea col1 label="Field Value" placeholder="Large text area, up to 1024 characters"
|
<Textarea col1 label="Field Value" placeholder="Large text area, up to 1024 characters"
|
||||||
bind:value={field.value}/>
|
bind:value={field.value}/>
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
<Button type="button" icon="fas fa-plus" fullWidth on:click={addField}>Add Field</Button>
|
<Button type="button" icon="fas fa-plus" fullWidth on:click={addField}>Add Field</Button>
|
||||||
</div>
|
</div>
|
||||||
</Collapsible>
|
</Collapsible>
|
||||||
</form>
|
</form>
|
||||||
|
{/if}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.form-wrapper {
|
.form-wrapper {
|
||||||
|
|||||||
@ -5,105 +5,84 @@
|
|||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<form class="settings-form" on:submit|preventDefault>
|
<form class="settings-form" on:submit|preventDefault>
|
||||||
<div class="row">
|
<Collapsible defaultOpen>
|
||||||
<div class="col-1-3">
|
<span slot="header">Panel Message</span>
|
||||||
<Input label="Panel Title" placeholder="Open a ticket!" col1=true bind:value={data.title}/>
|
<div slot="content" class="col-1">
|
||||||
</div>
|
|
||||||
<div class="col-2-3">
|
|
||||||
<Textarea col1=true label="Panel Content" placeholder="By clicking the button, a ticket will be opened for you."
|
|
||||||
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}/>
|
|
||||||
<Dropdown col4=true 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 class="row">
|
|
||||||
<Dropdown col4=true label="Button Colour" bind:value={data.button_style}>
|
|
||||||
<option value="1">Blue</option>
|
|
||||||
<option value="2">Grey</option>
|
|
||||||
<option value="3">Green</option>
|
|
||||||
<option value="4">Red</option>
|
|
||||||
</Dropdown>
|
|
||||||
|
|
||||||
<Input col4={true} label="Button Text" placeholder="Open a ticket!" bind:value={data.button_label} />
|
|
||||||
|
|
||||||
<div class="col-2" style="z-index: 1">
|
|
||||||
<label for="emoji-pick-wrapper" class="form-label">Button Emoji</label>
|
|
||||||
<div id="emoji-pick-wrapper" class="row">
|
|
||||||
<div class="col-2">
|
|
||||||
<label class="form-label" style="margin-bottom: 0 !important;">Custom Emoji</label>
|
|
||||||
<Toggle hideLabel
|
|
||||||
toggledColor="#66bb6a"
|
|
||||||
untoggledColor="#ccc"
|
|
||||||
bind:toggled={data.use_custom_emoji}
|
|
||||||
on:toggle={handleEmojiTypeChange} />
|
|
||||||
</div>
|
|
||||||
{#if data.use_custom_emoji}
|
|
||||||
<div class="multiselect-super">
|
|
||||||
<Select items={emojis}
|
|
||||||
Item={EmojiItem}
|
|
||||||
selectedValue={data.emote}
|
|
||||||
optionIdentifier="id"
|
|
||||||
getSelectionLabel={emojiNameMapper}
|
|
||||||
getOptionLabel={emojiNameMapper}
|
|
||||||
placeholderAlwaysShow={true}
|
|
||||||
on:select={handleCustomEmojiChange} />
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<EmojiInput col1=true bind:value={data.emote}/>
|
|
||||||
{/if}
|
|
||||||
</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="row">
|
||||||
|
<div class="col-1-3">
|
||||||
|
<Input label="Panel Title" placeholder="Open a ticket!" col1=true bind:value={data.title}/>
|
||||||
|
</div>
|
||||||
|
<div class="col-2-3">
|
||||||
|
<Textarea col1=true label="Panel Content" placeholder="By clicking the button, a ticket will be opened for you."
|
||||||
|
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}/>
|
||||||
<div class="col-2">
|
<div class="col-2">
|
||||||
<label class="form-label">Welcome Message</label>
|
|
||||||
<div class="row" style="justify-content: flex-start; gap: 10px">
|
<div class="row" style="justify-content: flex-start; gap: 10px">
|
||||||
<Button icon="fas fa-brush" on:click={openWelcomeMessageBuilder}>Open Editor</Button>
|
<div style="white-space: nowrap">
|
||||||
<Button icon="fas fa-trash-can" danger
|
<Checkbox label="Disable Panel" bind:value={data.disabled}></Checkbox>
|
||||||
on:click={() => data.welcome_message = null}>Clear</Button>
|
</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 class="col-2">
|
</div>
|
||||||
<label for="naming-scheme-wrapper" class="form-label">Naming Scheme</label>
|
|
||||||
<div class="row" id="naming-scheme-wrapper">
|
<div class="row">
|
||||||
<div>
|
<Dropdown col4=true label="Button Colour" bind:value={data.button_style}>
|
||||||
<label class="form-label">Use Server Default</label>
|
<option value="1">Blue</option>
|
||||||
|
<option value="2">Grey</option>
|
||||||
|
<option value="3">Green</option>
|
||||||
|
<option value="4">Red</option>
|
||||||
|
</Dropdown>
|
||||||
|
|
||||||
|
<Input col4={true} label="Button Text" placeholder="Open a ticket!" bind:value={data.button_label} />
|
||||||
|
|
||||||
|
<div class="col-2" style="z-index: 1">
|
||||||
|
<label for="emoji-pick-wrapper" class="form-label">Button Emoji</label>
|
||||||
|
<div id="emoji-pick-wrapper" class="row">
|
||||||
|
<div class="col-2">
|
||||||
|
<label class="form-label" style="margin-bottom: 0 !important;">Custom Emoji</label>
|
||||||
<Toggle hideLabel
|
<Toggle hideLabel
|
||||||
toggledColor="#66bb6a"
|
toggledColor="#66bb6a"
|
||||||
untoggledColor="#ccc"
|
untoggledColor="#ccc"
|
||||||
bind:toggled={data.use_server_default_naming_scheme} />
|
bind:toggled={data.use_custom_emoji}
|
||||||
</div>
|
on:toggle={handleEmojiTypeChange} />
|
||||||
<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>
|
||||||
|
{#if data.use_custom_emoji}
|
||||||
|
<div class="multiselect-super">
|
||||||
|
<Select items={emojis}
|
||||||
|
Item={EmojiItem}
|
||||||
|
selectedValue={data.emote}
|
||||||
|
optionIdentifier="id"
|
||||||
|
getSelectionLabel={emojiNameMapper}
|
||||||
|
getOptionLabel={emojiNameMapper}
|
||||||
|
placeholderAlwaysShow={true}
|
||||||
|
on:select={handleCustomEmojiChange} />
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<EmojiInput col1=true bind:value={data.emote}/>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<Input col2={true} label="Large Image URL" badge="Optional" bind:value={data.image_url} placeholder="https://example.com/image.png" />
|
||||||
|
<Input col2={true} label="Small Image URL" badge="Optional" bind:value={data.thumbnail_url} placeholder="https://example.com/image.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Collapsible>
|
||||||
|
|
||||||
|
<Collapsible defaultOpen>
|
||||||
|
<span slot="header">Ticket Properties</span>
|
||||||
|
<div slot="content" class="col-1">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-2">
|
<div class="col-2">
|
||||||
<label class="form-label">Mention On Open</label>
|
<label class="form-label">Mention On Open</label>
|
||||||
@ -133,23 +112,24 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<Input col2={true} label="Large Image URL" bind:value={data.image_url} placeholder="https://example.com/image.png" />
|
<CategoryDropdown label="Ticket Category" col3 {channels} bind:value={data.category_id}/>
|
||||||
<Input col2={true} label="Small Image URL" bind:value={data.thumbnail_url} placeholder="https://example.com/image.png" />
|
|
||||||
</div>
|
<Dropdown col4 label="Form" bind:value={data.form_id}>
|
||||||
<div class="row">
|
<option value=null>None</option>
|
||||||
<div class="col-2">
|
{#each forms as form}
|
||||||
<div class="row" style="justify-content: flex-start; gap: 10px">
|
<option value={form.form_id}>{form.title}</option>
|
||||||
<div style="white-space: nowrap">
|
{/each}
|
||||||
<Checkbox label="Disable Panel" bind:value={data.disabled}></Checkbox>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Collapsible>
|
||||||
|
|
||||||
|
<Collapsible>
|
||||||
|
<span slot="header">Welcome Message</span>
|
||||||
|
<div slot="content" class="col-1">
|
||||||
|
<EmbedForm bind:data={data.welcome_message} />
|
||||||
|
</div>
|
||||||
|
</Collapsible>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -169,6 +149,8 @@
|
|||||||
import Dropdown from "../form/Dropdown.svelte";
|
import Dropdown from "../form/Dropdown.svelte";
|
||||||
import Toggle from "svelte-toggle";
|
import Toggle from "svelte-toggle";
|
||||||
import Checkbox from "../form/Checkbox.svelte";
|
import Checkbox from "../form/Checkbox.svelte";
|
||||||
|
import Collapsible from "../Collapsible.svelte";
|
||||||
|
import EmbedForm from "../EmbedForm.svelte";
|
||||||
|
|
||||||
export let guildId;
|
export let guildId;
|
||||||
export let seedDefault = true;
|
export let seedDefault = true;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user