go/pocketbase
1
0
Fork 0
mirror of https://github.com/pocketbase/pocketbase.git synced 2025-01-24 06:16:43 +02:00
Code Issues Releases Activity

moved field option btns inside the panel

Browse Source
This commit is contained in:
Gani Georgiev 2022-07-18 00:28:56 +03:00
parent 994761b728
commit 7f959011b8
2 changed files with 28 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
ui/src/components/collections/FieldAccordion.svelte
View File

@ -1,6 +1,6 @@
<script> <script>
import { createEventDispatcher, onMount } from "svelte"; import { createEventDispatcher, onMount } from "svelte";
import { scale, fly } from "svelte/transition"; import { scale } from "svelte/transition";
import { SchemaField } from "pocketbase"; import { SchemaField } from "pocketbase";
import CommonHelper from "@/utils/CommonHelper"; import CommonHelper from "@/utils/CommonHelper";
import tooltip from "@/actions/tooltip"; import tooltip from "@/actions/tooltip";
@ -157,28 +157,6 @@
/> />
{/if} {/if}
{#if expanded && !field.toDelete}
<div class="inline-flex flex-gap-base flex-nowrap" in:fly={{ duration: 200, x: 20, opacity: 0 }}>
<button
type="button"
class="btn btn-sm fade p-l-0 p-r-0"
on:click|stopPropagation={handleDelete}
>
<span class="txt">Remove</span>
</button>
{#if interactive}
<button
type="button"
class="btn btn-sm btn-outline btn-expanded-sm"
on:click|stopPropagation={collapse}
>
<span class="txt">Done</span>
</button>
{/if}
</div>
{/if}
{#if field.toDelete} {#if field.toDelete}
<button <button
type="button" type="button"
@ -259,14 +237,14 @@
{/if} {/if}
</div> </div>
<div class="col-4"> <div class="col-sm-4 flex">
<Field class="form-field form-field-toggle m-0" name="requried" let:uniqueId> <Field class="form-field form-field-toggle m-0" name="requried" let:uniqueId>
<input type="checkbox" id={uniqueId} bind:checked={field.required} /> <input type="checkbox" id={uniqueId} bind:checked={field.required} />
<label for={uniqueId}>Required</label> <label for={uniqueId}>Required</label>
</Field> </Field>
</div> </div>
<div class="col-4"> <div class="col-sm-4 flex">
{#if field.type !== "file"} {#if field.type !== "file"}
<Field class="form-field form-field-toggle m-0" name="unique" let:uniqueId> <Field class="form-field form-field-toggle m-0" name="unique" let:uniqueId>
<input type="checkbox" id={uniqueId} bind:checked={field.unique} /> <input type="checkbox" id={uniqueId} bind:checked={field.unique} />
@ -274,6 +252,31 @@
</Field> </Field>
{/if} {/if}
</div> </div>
{#if !field.toDelete}
<div class="col-sm-4">
<div class="flex-fill" />
<div class="inline-flex flex-gap-base flex-nowrap">
<button
type="button"
class="btn btn-sm btn-secondary fade"
on:click|stopPropagation={handleDelete}
>
<span class="txt">Remove</span>
</button>
{#if interactive}
<button
type="button"
class="btn btn-sm btn-outline btn-expanded-sm"
on:click|stopPropagation={collapse}
>
<span class="txt">Done</span>
</button>
{/if}
</div>
</div>
{/if}
</div> </div>
<input type="submit" class="hidden" tabindex="-1" /> <input type="submit" class="hidden" tabindex="-1" />

12
ui/src/scss/_accordion.scss
View File

@ -132,15 +132,3 @@
} }
} }
} }
.field-accordion {
&.active {
.accordion-header {
padding-right: var(--smSpacing);
&:after {
content: none;
display: none;
}
}
}
}