wip
This commit is contained in:
rxdn
parent
e5148d4086
commit
ae2789501c
@ -26,7 +26,7 @@
|
||||
<hr/>
|
||||
</div>
|
||||
|
||||
<div bind:this={content} class="content">
|
||||
<div bind:this={content} class="content" class:hide-overflow={!expanded}>
|
||||
<slot name="content"></slot>
|
||||
</div>
|
||||
</div>
|
||||
@ -81,12 +81,16 @@
|
||||
</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 {
|
||||
|
||||
@ -1,74 +1,76 @@
|
||||
<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}/>
|
||||
<Input col3 label="Title URL (Optional)" placeholder="https://example.com" bind:value={data.url}/>
|
||||
</div>
|
||||
{#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}/>
|
||||
<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"
|
||||
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>
|
||||
</Collapsible>
|
||||
|
||||
<Collapsible>
|
||||
<span slot="header">Images</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>
|
||||
<span slot="header">Author</span>
|
||||
|
||||
<Collapsible>
|
||||
<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>
|
||||
<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>
|
||||
</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}/>
|
||||
<Collapsible>
|
||||
<span slot="header">Images</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>
|
||||
|
||||
<div style="margin-top: 18px; display: flex; align-self: center">
|
||||
<Button danger icon="fas fa-trash-can" on:click={() => deleteField(i)}>Delete</Button>
|
||||
<Collapsible>
|
||||
<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 class="row">
|
||||
<div class="row">
|
||||
<Textarea col1 label="Field Value" placeholder="Large text area, up to 1024 characters"
|
||||
bind:value={field.value}/>
|
||||
</div>
|
||||
{/each}
|
||||
<Button type="button" icon="fas fa-plus" fullWidth on:click={addField}>Add Field</Button>
|
||||
</div>
|
||||
</Collapsible>
|
||||
</form>
|
||||
</div>
|
||||
{/each}
|
||||
<Button type="button" icon="fas fa-plus" fullWidth on:click={addField}>Add Field</Button>
|
||||
</div>
|
||||
</Collapsible>
|
||||
</form>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.form-wrapper {
|
||||
|
||||
@ -5,105 +5,84 @@
|
||||
{/if}
|
||||
|
||||
<form class="settings-form" on:submit|preventDefault>
|
||||
<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}/>
|
||||
<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} >
|
||||
<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}/>
|
||||
</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">
|
||||
<label class="form-label">Welcome Message</label>
|
||||
<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 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 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>
|
||||
</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_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}
|
||||
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">
|
||||
<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="col-2">
|
||||
<label class="form-label">Mention On Open</label>
|
||||
@ -133,23 +112,24 @@
|
||||
</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>
|
||||
<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>
|
||||
</div>
|
||||
</Collapsible>
|
||||
|
||||
<Collapsible>
|
||||
<span slot="header">Welcome Message</span>
|
||||
<div slot="content" class="col-1">
|
||||
<EmbedForm bind:data={data.welcome_message} />
|
||||
</div>
|
||||
</Collapsible>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
@ -169,6 +149,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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user