lucent/lucent-laravel
2
0
Fork 0
Code Issues 14 Pull Requests Releases 1 Activity

fixed zindex thing - brightness was the problem

Browse Source
This commit is contained in:
Alex Lingris
2024-08-16 21:11:01 +03:00
parent 5a13ddb2ec
commit db37653748
26 changed files with 466 additions and 670 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/js/svelte/Channel.svelte
-2
View File
@@ -8,8 +8,6 @@
import HomeIndex from "./home/Index.svelte"; import HomeIndex from "./home/Index.svelte";
import BuildReport from "./build/Report.svelte"; import BuildReport from "./build/Report.svelte";
import Header from "./layout/Header.svelte"; import Header from "./layout/Header.svelte";
import BrowseModal from "./records/elements/BrowseModal.svelte";
import Dialog from "./dialog/Dialog.svelte";
const components = { const components = {
members: Members, members: Members,
front/js/svelte/autocomplete/Autocomplete.svelte
+52
View File
@@ -0,0 +1,52 @@
<script>
import Selectlist from "./Selectlist.svelte";
import Icon from "../common/Icon.svelte";
let searchEl;
let search;
export let value;
export let field;
function handleSelect(){
searchEl.focus();
searchEl.blur()
}
</script>
<div class="autocomplete">
<input
type="search"
bind:value={search}
bind:this={searchEl}
placeholder="Search for options"
autocomplete="off"
/>
<div class="autocomplete-results">
<Selectlist
{field}
bind:value
bind:search
on:selected={handleSelect}
/>
</div>
</div>
{#if value}
<div class="autocomplete-selected-value">
{#if Array.isArray(field.selectOptions)}
{value}
{:else}
{field.selectOptions[value]}
{/if}
<button
on:click|preventDefault={(e) => (value = "")}
type="button"
class="button-text"
aria-label="Close"
>
<Icon width={12} height={12} icon="close"></Icon>
</button>
</div>
{/if}
front/js/svelte/autocomplete/Selectlist.svelte
+60
View File
@@ -0,0 +1,60 @@
<script>
import Fuse from "fuse.js";
import {createEventDispatcher} from "svelte";
export let field;
export let value;
export let search = "";
const dispatch = createEventDispatcher();
function select(e, option) {
e.preventDefault();
value = option.value;
search = "";
dispatch("selected", {option: option})
}
function formatOptionsForSearch(listOptions) {
if (Array.isArray(listOptions)) {
return listOptions.map(value => {
return {
value: value,
label: value,
}
})
}
return Object.entries(listOptions).map(([k, v]) => {
return {
value: k,
label: v,
}
})
}
let formattedOptions = formatOptionsForSearch(field.selectOptions);
const fuse = new Fuse(formattedOptions, {
includeScore: false,
keys: ['value', 'label']
})
$: result = search === "" ? formattedOptions : fuse.search(search).map(resItem => resItem.item)
</script>
{#if result}
{#each result as suggestion (suggestion.value)}
<div
class="autocomplete-option"
role="button"
tabindex="0"
on:click={(e) => select(e, suggestion)}
on:keypress={(e) => select(e, suggestion)}
>
<span class="dropdown-item">
{suggestion.label}
</span>
</div>
{/each}
{/if}
front/js/svelte/records/Edit.svelte
+1 -1
View File
@@ -188,7 +188,7 @@
<ErrorAlert message={errorMessage}/> <ErrorAlert message={errorMessage}/>
<div class=" mt-4" style="margin-bottom:150px"> <div class=" mt-4" style="margin-bottom:150px;position:relative;">
<ContentTabs <ContentTabs
{schema} {schema}
{isCreateMode} {isCreateMode}
front/js/svelte/records/elements/BrowseModal.svelte
-114
View File
@@ -1,114 +0,0 @@
<script>
import {createEventDispatcher, getContext} from "svelte";
import Index from "../../content/Index.svelte";
const dispatch = createEventDispatcher();
const channel = getContext("channel");
$: data = {};
let isOpen = false;
let selectedRecords = [];
// onMount(() => {
// load();
// });
export function open(schema) {
isOpen = true;
load(schema);
}
export function close() {
isOpen = false;
selectedRecords = [];
}
function load(schema) {
axios
.get(channel.lucentUrl + "/content/" + schema)
.then((response) => {
data = response.data;
})
.catch((error) => console.log(error));
}
function insert(e) {
e.preventDefault();
dispatch("insert", {
records: selectedRecords,
action: "insert",
});
}
function replace(e) {
e.preventDefault();
dispatch("insert", {
records: selectedRecords,
action: "replace",
});
}
</script>
{#if data.schema}
<div
class="modal fade show"
tabindex="-1"
class:d-block={isOpen}
aria-modal="true"
role="dialog"
style="background: rgba(100,100,100,.6);"
>
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<div class="d-flex align-items-center">
<button
type="button"
class="btn btn-primary me-1"
on:click={insert}
disabled={selectedRecords.length === 0}
>
Insert
</button>
<button
type="button"
class="btn btn-outline-primary me-3"
on:click={replace}
disabled={selectedRecords.length === 0}
>
Replace
</button>
{#if selectedRecords.length > 0}
<span class="">
{selectedRecords.length} records selected
</span>
{/if}
</div>
<button
on:click|preventDefault={(e) => (isOpen = false)}
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
/>
</div>
<div class="modal-body">
<Index {...data} bind:selected={selectedRecords}/>
</div>
</div>
</div>
</div>
{/if}
<style>
.modal-dialog {
width: auto;
max-width: 100%;
}
.modal-content {
margin: 40px auto;
width: auto;
height: 100%;
}
</style>
front/js/svelte/records/elements/Color.svelte
+4 -5
View File
@@ -1,5 +1,6 @@
<script> <script>
import { getErrorMessage } from "./errorMessage"; import {getErrorMessage} from "./errorMessage";
export let field; export let field;
export let value; export let value;
export let isCreateMode; export let isCreateMode;
@@ -9,16 +10,14 @@
</script> </script>
<div class="mb-0"> <div class="mb-0">
<div class="input-group "> <div style="display: flex; align-items: center;gap: 10px">
<div style="width:64px;">
<input <input
type="color" type="color"
{id} {id}
class="form-control form-control-color" style="border: none;background: transparent;padding: 0;width:64px;"
disabled={field.readonly && !isCreateMode} disabled={field.readonly && !isCreateMode}
bind:value bind:value
/> />
</div>
<input <input
type="text" type="text"
class:is-invalid={errorMessage} class:is-invalid={errorMessage}
front/js/svelte/records/elements/Datalist.svelte
-70
View File
@@ -1,70 +0,0 @@
<script>
import {getContext} from "svelte";
import {debounce} from "lodash";
import {previewTitle} from "../Preview";
const channel = getContext("channel");
export let field;
export let value;
export let search;
$: options = [];
export const update = debounce((e) => {
axios
.get("/records/suggestions", {
params: {
schema: field.optionsFrom,
field: field.optionsField,
value: search,
ui: field.ui,
},
})
.then((response) => {
options = response.data;
})
.catch((error) => {
console.log(error);
});
}, 500);
function select(e, option) {
e.preventDefault();
value = option.data[field.optionsField];
search = "";
}
</script>
{#if field.optionsFrom}
{#each options as option (option.id)}
<div
on:click={(e) => select(e, option)}
on:keypress={(e) => select(e, option)}
>
<span class="dropdown-item">
{previewTitle(channel.schemas, option)}
<small class="text-muted "
>{option.data[field.optionsField]}</small
>
</span>
</div>
{:else}
{#if search && field.optionsSuggest}
<div
on:click={(e) => {
value = search;
search = "";
}}
on:keypress={(e) => {
value = search;
search = "";
}}
>
<span class="dropdown-item">
Add "{search}"
</span>
</div>
{:else}
No results
{/if}
{/each}
{/if}
front/js/svelte/records/elements/Date.svelte
+2 -57
View File
@@ -1,21 +1,16 @@
<script> <script>
import Datalist from "./Datalist.svelte";
import {onMount} from "svelte"; import {onMount} from "svelte";
import flatpickr from "flatpickr"; import flatpickr from "flatpickr";
import "flatpickr/dist/flatpickr.css"; import "flatpickr/dist/flatpickr.css";
import "flatpickr/dist/themes/light.css"; import "flatpickr/dist/themes/light.css";
import {getErrorMessage} from "./errorMessage"; import {getErrorMessage} from "./errorMessage";
import Icon from "../../common/Icon.svelte";
export let field; export let field;
export let value; export let value;
export let id; export let id;
export let isCreateMode; export let isCreateMode;
export let validationErrors; export let validationErrors;
$: search = "";
$: listMode = field.optionsFrom && !(field.readonly && !isCreateMode);
$: errorMessage = getErrorMessage(validationErrors, field.name); $: errorMessage = getErrorMessage(validationErrors, field.name);
let list;
let pickerInput; let pickerInput;
let pickerInstance; let pickerInstance;
let flatpickrOptions = { let flatpickrOptions = {
@@ -34,9 +29,7 @@
onMount(() => { onMount(() => {
if (!field.readonly || isCreateMode) { if (!field.readonly || isCreateMode) {
if (listMode) {
flatpickrOptions.clickOpens = false;
}
pickerInstance = flatpickr(pickerInput, flatpickrOptions); pickerInstance = flatpickr(pickerInput, flatpickrOptions);
} }
}); });
@@ -44,54 +37,7 @@
<div class="mb-0"> <div class="mb-0">
{#if listMode}
<div class="dropdown d-flex">
<input
type="search"
{id}
on:keyup={list.update}
on:focus={list.update}
class="form-control dropdown-toggle"
class:is-invalid={errorMessage}
bind:value={search}
bind:this={pickerInput}
placeholder="Search for options"
data-bs-toggle="dropdown"
autocomplete="off"
readonly={field.readonly && !isCreateMode}
/>
<button
class="btn btn-light ms-1"
on:click|preventDefault={(e) => pickerInstance.open()}
>
<Icon icon="calendar"/>
</button>
<ul class="dropdown-menu w-100">
{#if field.optionsFrom}
<Datalist
{field}
bind:this={list}
bind:value
bind:search
/>
{/if}
</ul>
</div>
{#if value}
<span class="badge rounded-pill bg-light text-dark fs-6 mt-3">
<div class="d-flex align-items-center ">
{value}
<button
on:click|preventDefault={(e) => (value = "")}
type="button"
class="btn-close btn-sm ms-1"
style="font-size:10px"
aria-label="Close"
/>
</div>
</span>
{/if}
{:else}
<input <input
type="text" type="text"
{id} {id}
@@ -102,7 +48,6 @@
autocomplete="off" autocomplete="off"
readonly={field.readonly && !isCreateMode} readonly={field.readonly && !isCreateMode}
/> />
{/if}
{#if errorMessage} {#if errorMessage}
<div class="invalid-feedback d-block"> <div class="invalid-feedback d-block">
front/js/svelte/records/elements/Datetime.svelte
+3 -60
View File
@@ -1,27 +1,21 @@
<script> <script>
import Datalist from "./Datalist.svelte";
import {onMount} from "svelte"; import {onMount} from "svelte";
import flatpickr from "flatpickr"; import flatpickr from "flatpickr";
import "flatpickr/dist/flatpickr.css"; import "flatpickr/dist/flatpickr.css";
import "flatpickr/dist/themes/light.css"; import "flatpickr/dist/themes/light.css";
import {getErrorMessage} from "./errorMessage"; import {getErrorMessage} from "./errorMessage";
import Icon from "../../common/Icon.svelte";
export let field; export let field;
export let value; export let value;
export let isCreateMode; export let isCreateMode;
export let validationErrors; export let validationErrors;
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone; const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
$: search = "";
$: listMode = field.optionsFrom && !(field.readonly && !isCreateMode);
$: errorMessage = getErrorMessage(validationErrors, field.name); $: errorMessage = getErrorMessage(validationErrors, field.name);
export let id; export let id;
let list;
let pickerInput; let pickerInput;
let pickerInstance; let pickerInstance;
let flatpickrOptions = { let flatpickrOptions = {
enableTime: false,
allowInput: true, allowInput: true,
altInput: true, altInput: true,
altFormat: "Y-m-d H:i:S", altFormat: "Y-m-d H:i:S",
@@ -41,63 +35,13 @@
onMount(() => { onMount(() => {
if (!field.readonly || isCreateMode) { if (!field.readonly || isCreateMode) {
if (listMode) {
flatpickrOptions.clickOpens = false;
}
pickerInstance = flatpickr(pickerInput, flatpickrOptions); pickerInstance = flatpickr(pickerInput, flatpickrOptions);
} }
}); });
</script> </script>
<div class="mb-0"> <div class="mb-0">
{#if listMode}
<div class="dropdown d-flex">
<input
type="search"
{id}
on:keyup={list.update}
on:focus={list.update}
class="form-control dropdown-toggle"
class:is-invalid={errorMessage}
bind:value={search}
bind:this={pickerInput}
placeholder="Search for options"
data-bs-toggle="dropdown"
autocomplete="off"
readonly={field.readonly && !isCreateMode}
/>
<button
class="btn btn-light ms-1"
on:click|preventDefault={(e) => pickerInstance.open()}
>
<Icon icon="calendar"/>
</button>
<ul class="dropdown-menu w-100">
{#if field.optionsFrom}
<Datalist
{field}
bind:this={list}
bind:value
bind:search
/>
{/if}
</ul>
</div>
{#if value}
<span class="badge rounded-pill bg-light text-dark fs-6 mt-3">
<div class="d-flex align-items-center ">
{value}
<button
on:click|preventDefault={(e) => (value = "")}
type="button"
class="btn-close btn-sm ms-1"
style="font-size:10px"
aria-label="Close"
/>
</div>
</span>
{/if}
{:else}
<input <input
type="text" type="text"
{id} {id}
@@ -108,9 +52,8 @@
autocomplete="off" autocomplete="off"
readonly={field.readonly && !isCreateMode} readonly={field.readonly && !isCreateMode}
/> />
{/if} <span class="system-help-text"
<small class=" text-primary opacity-50" >Dates are displayed according to your timezone: {timezone}</span
>Dates are displayed according to your timezone: {timezone}</small
> >
{#if errorMessage} {#if errorMessage}
front/js/svelte/records/elements/Number.svelte
-49
View File
@@ -1,14 +1,11 @@
<script> <script>
import Datalist from "./Datalist.svelte";
import {getErrorMessage} from "./errorMessage"; import {getErrorMessage} from "./errorMessage";
export let field; export let field;
export let value; export let value;
export let schemas;
export let validationErrors; export let validationErrors;
export let isCreateMode; export let isCreateMode;
export let id; export let id;
$: search = "";
$: errorMessage = getErrorMessage(validationErrors, field.name); $: errorMessage = getErrorMessage(validationErrors, field.name);
let list; let list;
@@ -23,55 +20,10 @@
return parseFloat(number).toFixed(field.decimals); return parseFloat(number).toFixed(field.decimals);
} }
$: listMode = field.optionsFrom && !(field.readonly && !isCreateMode);
</script> </script>
<div class="mb-0"> <div class="mb-0">
{#if listMode}
<div class="dropdown">
<input
type="number"
{id}
on:keyup={list.update}
on:focus={list.update}
bind:value={search}
placeholder="Search for options"
class="form-control dropdown-toggle"
class:is-invalid={errorMessage}
data-bs-toggle="dropdown"
autocomplete="off"
readonly={field.readonly && !isCreateMode}
/>
<ul class="dropdown-menu w-100">
{#if field.optionsFrom}
<Datalist
{field}
bind:this={list}
{schemas}
bind:value
bind:search
/>
{/if}
</ul>
</div>
{#if value}
<span class="badge rounded-pill bg-light text-dark fs-6 mt-3">
<div class="d-flex align-items-center ">
{value}
<button
on:click|preventDefault={(e) => (value = "")}
type="button"
class="btn-close btn-sm ms-1"
style="font-size:10px"
aria-label="Close"
/>
</div>
</span>
{/if}
{:else}
<input <input
type="number" type="number"
{id} {id}
@@ -82,7 +34,6 @@
autocomplete="off" autocomplete="off"
readonly={field.readonly && !isCreateMode} readonly={field.readonly && !isCreateMode}
/> />
{/if}
{#if errorMessage} {#if errorMessage}
<div class="invalid-feedback d-block"> <div class="invalid-feedback d-block">
front/js/svelte/records/elements/ReferenceInlineButtons.svelte
-1
View File
@@ -2,7 +2,6 @@
import {createEventDispatcher, getContext} from "svelte"; import {createEventDispatcher, getContext} from "svelte";
import Icon from "../../common/Icon.svelte"; import Icon from "../../common/Icon.svelte";
import InlineEdit from "../InlineEdit.svelte"; import InlineEdit from "../InlineEdit.svelte";
import BrowseModal from "./BrowseModal.svelte";
import Dialog from "../../dialog/Dialog.svelte"; import Dialog from "../../dialog/Dialog.svelte";
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
front/js/svelte/records/elements/ReferenceTags.svelte
+32 -18
View File
@@ -4,13 +4,14 @@
import {previewTitle} from "../Preview"; import {previewTitle} from "../Preview";
import {getErrorMessage} from "./errorMessage"; import {getErrorMessage} from "./errorMessage";
import {insertEdges} from "./reference.js"; import {insertEdges} from "./reference.js";
import Icon from "../../common/Icon.svelte";
const channel = getContext("channel"); const channel = getContext("channel");
export let field; export let field;
export let id; export let id;
export let record; export let record;
export let graph; export let graph;
let searchEl;
export let validationErrors; export let validationErrors;
$: errorMessage = getErrorMessage(validationErrors, field.name); $: errorMessage = getErrorMessage(validationErrors, field.name);
@@ -58,6 +59,9 @@
function insert(e, insertRecord) { function insert(e, insertRecord) {
e.preventDefault(); e.preventDefault();
graph = insertEdges(graph, record, [insertRecord], field.name, e.detail.action); graph = insertEdges(graph, record, [insertRecord], field.name, e.detail.action);
search = ""
searchEl.focus()
searchEl.blur()
} }
const updateResults = debounce((e) => { const updateResults = debounce((e) => {
@@ -81,31 +85,32 @@
</script> </script>
<div class="reference-tags">
{#if errorMessage} {#if errorMessage}
<div class="invalid-feedback d-block mb-3"> <div class="invalid-feedback d-block mb-3">
{errorMessage} {errorMessage}
</div> </div>
{/if} {/if}
<input <input
type="search" type="search"
bind:this={searchEl}
{id} {id}
on:keyup={updateResults} on:keyup={updateResults}
class="form-control dropdown-toggle"
class:is-invalid={errorMessage} class:is-invalid={errorMessage}
bind:value={search} bind:value={search}
placeholder={"Search for "+field.label} placeholder={"Search for "+field.label}
data-bs-toggle="dropdown"
autocomplete="off" autocomplete="off"
readonly={field.readonly && !isCreateMode} />
/>
<div class="dropdown-menu w-100"> <div class="reference-tags-results">
{#if searchOptions} {#if searchOptions}
{#each searchOptions as option (option.id)} {#each searchOptions as option (option.id)}
<div <div
class="reference-tags-option"
role="button"
tabindex="0"
on:click={(e) => insert(e, option)} on:click={(e) => insert(e, option)}
on:keypress={(e) => insert(e, option)} on:keypress={(e) => insert(e, option)}
> >
@@ -121,6 +126,9 @@
{/if} {/if}
{#if search } {#if search }
<div <div
class="reference-tags-option"
role="button"
tabindex="0"
on:click={(e) => saveNew(e,search)} on:click={(e) => saveNew(e,search)}
on:keypress={(e) => saveNew(e,search)} on:keypress={(e) => saveNew(e,search)}
> >
@@ -129,23 +137,29 @@
</span> </span>
</div> </div>
{/if} {/if}
</div>
</div> </div>
{#if references.length > 0} {#if references.length > 0}
<div class="d-flex"> <div style="display: flex;align-items: center;gap: 4px">
{#each references as record (record.id)} {#each references as record (record.id)}
<span class="badge rounded-pill bg-light text-dark fs-6 mt-3"> <span class="autocomplete-selected-value">
<div class="d-flex align-items-center "> <a
class="record-title"
href="{channel.lucentUrl}/records/{record.id}"
>
{previewTitle(channel.schemas, record)} {previewTitle(channel.schemas, record)}
</a>
<button <button
on:click|preventDefault={(e) => removeReference(e, record.id)} on:click|preventDefault={(e) => removeReference(e, record.id)}
type="button" type="button"
class="btn-close btn-sm ms-1" class="button-text"
style="font-size:10px"
aria-label="Close" aria-label="Close"
/> >
</div> <Icon width={12} height={12} icon="close"></Icon>
</button>
</span> </span>
{/each} {/each}
</div> </div>
front/js/svelte/records/elements/Selectlist.svelte
-39
View File
@@ -1,39 +0,0 @@
<script>
export let field;
export let value;
export let search;
function select(e, option) {
e.preventDefault();
value = option;
search = "";
}
</script>
{#if field.selectOptions}
{#if Array.isArray(field.selectOptions)}
{#each field.selectOptions as suggestion (suggestion)}
<div
on:click={(e) => select(e, suggestion)}
on:keypress={(e) => select(e, suggestion)}
>
<span class="dropdown-item">
{suggestion}
</span>
</div>
{/each}
{:else}
{#each Object.entries(field.selectOptions) as [k, v] (k)}
<div
on:click={(e) => select(e, k)}
on:keypress={(e) => select(e, k)}
>
<span class="dropdown-item">
{v}
</span>
</div>
{/each}
{/if}
{/if}
front/js/svelte/records/elements/Slug.svelte
+3 -1
View File
@@ -20,7 +20,9 @@
autocomplete="off" autocomplete="off"
readonly={field.readonly && !isCreateMode} readonly={field.readonly && !isCreateMode}
/> />
<div class="system-help-text">
Leave this empty to autogenerate from <i>{field.source}</i>
</div>
{#if errorMessage} {#if errorMessage}
<div class="invalid-feedback d-block"> <div class="invalid-feedback d-block">
{errorMessage} {errorMessage}
front/js/svelte/records/elements/Text.svelte
+4 -91
View File
@@ -1,7 +1,6 @@
<script> <script>
import Datalist from "./Datalist.svelte";
import Selectlist from "./Selectlist.svelte";
import {getErrorMessage} from "./errorMessage"; import {getErrorMessage} from "./errorMessage";
import Autocomplete from "../../autocomplete/Autocomplete.svelte";
export let field; export let field;
export let value; export let value;
@@ -9,99 +8,13 @@
export let validationErrors; export let validationErrors;
$: errorMessage = getErrorMessage(validationErrors, field.name); $: errorMessage = getErrorMessage(validationErrors, field.name);
$: search = "";
export let id; export let id;
let list;
$: listMode = field.optionsFrom && !(field.readonly && !isCreateMode);
</script> </script>
<div class="mb-0"> <div style="position: relative;">
{#if listMode} {#if field.selectOptions}
<div class="dropdown"> <Autocomplete {field} bind:value={value}></Autocomplete>
<input
type="search"
{id}
on:keyup={list.update}
on:focus={list.update}
class="form-control dropdown-toggle"
class:is-invalid={errorMessage}
bind:value={search}
placeholder="Search for options"
data-bs-toggle="dropdown"
autocomplete="off"
readonly={field.readonly && !isCreateMode}
/>
<div class="dropdown-menu w-100">
{#if field.optionsFrom}
<Datalist
{field}
bind:this={list}
bind:value
bind:search
/>
{/if}
</div>
</div>
{#if value}
<span class="badge rounded-pill bg-light text-dark fs-6 mt-3">
<div class="d-flex align-items-center ">
{value}
<button
on:click|preventDefault={(e) => (value = "")}
type="button"
class="btn-close btn-sm ms-1"
style="font-size:10px"
aria-label="Close"
/>
</div>
</span>
{/if}
{:else if field.selectOptions}
<div class="dropdown">
<input
type="search"
{id}
class="form-control dropdown-toggle"
class:is-invalid={errorMessage}
bind:value={search}
placeholder="Search for options"
data-bs-toggle="dropdown"
autocomplete="off"
readonly={field.readonly && !isCreateMode}
/>
<div class="dropdown-menu w-100">
<Selectlist
{field}
bind:value
bind:search
/>
</div>
</div>
{#if value}
<span class="badge rounded-pill bg-light text-dark fs-6 mt-3">
<div class="d-flex align-items-center ">
{#if Array.isArray(field.selectOptions)}
{value}
{:else}
{field.selectOptions[value]}
{/if}
<button
on:click|preventDefault={(e) => (value = "")}
type="button"
class="btn-close btn-sm ms-1"
style="font-size:10px"
aria-label="Close"
/>
</div>
</span>
{/if}
{:else} {:else}
<input <input
type="text" type="text"
front/package-lock.json
Generated
+9
View File
@@ -6,6 +6,7 @@
"": { "": {
"dependencies": { "dependencies": {
"@codemirror/lang-markdown": "^6.2.5", "@codemirror/lang-markdown": "^6.2.5",
"fuse.js": "^7.0.0",
"htmx.org": "^2.0.1" "htmx.org": "^2.0.1"
}, },
"devDependencies": { "devDependencies": {
@@ -1259,6 +1260,14 @@
"node": "^8.16.0 || ^10.6.0 || >=11.0.0" "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
} }
}, },
"node_modules/fuse.js": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-7.0.0.tgz",
"integrity": "sha512-14F4hBIxqKvD4Zz/XjDc3y94mNZN6pRv3U13Udo0lNLCWRBUsrMv2xwcF/y/Z5sV6+FQW+/ow68cHpm4sunt8Q==",
"engines": {
"node": ">=10"
}
},
"node_modules/glob-parent": { "node_modules/glob-parent": {
"version": "5.1.2", "version": "5.1.2",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
front/package.json
+1
View File
@@ -27,6 +27,7 @@
}, },
"dependencies": { "dependencies": {
"@codemirror/lang-markdown": "^6.2.5", "@codemirror/lang-markdown": "^6.2.5",
"fuse.js": "^7.0.0",
"htmx.org": "^2.0.1" "htmx.org": "^2.0.1"
} }
} }
front/sass/_autocomplete.scss
+47
View File
@@ -0,0 +1,47 @@
.autocomplete {
position: relative;
z-index: 1000;
overflow: visible;
.autocomplete-option {
cursor: pointer;
}
&:focus-within {
.autocomplete-results{
display: flex;
}
}
}
.autocomplete-selected-value {
font-size: 13px;
margin-top: 10px;
border-radius: 12px;
background: var(--background);
filter: brightness(97%);
padding: 3px 10px;
display: inline-flex;
justify-content: center;
gap: 4px;
line-height: 22px;
}
.autocomplete-selected-value:hover {
opacity: .8;
background-color: #eee;
}
.autocomplete-results {
display: none;
flex-direction: column;
padding: 10px;
overflow: visible;
position: absolute;
border-radius: 12px;
z-index: 20;
background: var(--background);
filter: brightness(97%);
transition: 600ms;
flex-grow: 1;
top: 45px;
min-width: max-content;
}
front/sass/_button.scss
+2 -3
View File
@@ -1,10 +1,9 @@
.button{ .button{
border-radius: 12px; border-radius: 12px;
background: var(--background); background: var(--background-button);
padding: 3px 10px; padding: 3px 10px;
cursor: pointer; cursor: pointer;
filter: brightness(97%); border: 1px solid var(--border-color);
border: none;
font-size: 14px; font-size: 14px;
min-height: 27px; min-height: 27px;
display: flex; display: flex;
front/sass/_dialog.scss
+1 -1
View File
@@ -22,7 +22,7 @@ dialog {
overflow: auto; overflow: auto;
max-height: 96vh; max-height: 96vh;
//position: relative; //position: relative;
z-index: 2;
.close { .close {
position: absolute; position: absolute;
top: 10px; top: 10px;
front/sass/_form.scss
+2 -2
View File
@@ -5,11 +5,11 @@ label {
margin-bottom: 4px; margin-bottom: 4px;
} }
input[type=text]{ input[type=text],input[type=number],input[type=search],textarea{
width: 100%; width: 100%;
} }
input[type=text],textarea{ input[type=text],input[type=number],input[type=search],textarea{
background: var(--input-bg); background: var(--input-bg);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 5px; border-radius: 5px;
front/sass/_layout.scss
+3 -1
View File
@@ -1,11 +1,12 @@
.sidebar-content{ .sidebar-content{
min-width: 300px; min-width: 300px;
max-width: 400px; max-width: 400px;
position: relative;
} }
.main-content { .main-content {
width: 100%; width: 100%;
position: relative;
} }
@@ -13,4 +14,5 @@
display: flex; display: flex;
gap: 40px; gap: 40px;
padding: 20px; padding: 20px;
position: relative;
} }
front/sass/_preview.scss
+3 -3
View File
@@ -3,7 +3,7 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 10px; gap: 10px;
background: var(--background); background: var(--background-2);
border-radius: 12px; border-radius: 12px;
.image{ .image{
@@ -18,14 +18,14 @@
} }
&:hover{ &:hover{
filter: brightness(95%); background: var(--background-3);
.trash-action{ .trash-action{
display: block; display: block;
} }
} }
} }
.preview-reference{ .preview-reference{
filter: brightness(97%); background: var(--background-2);
padding: 10px 20px; padding: 10px 20px;
margin-bottom: 4px; margin-bottom: 4px;
} }
front/sass/_record-edit.scss
+38 -12
View File
@@ -1,7 +1,7 @@
.record-edit { .record-edit {
position: relative; position: relative;
.invalid-feedback{ .invalid-feedback {
color: var(--error); color: var(--error);
font-size: 15px; font-size: 15px;
line-height: 20px; line-height: 20px;
@@ -38,43 +38,69 @@
} }
.editor-field { .editor-field {
background: var(--background); background: var(--background-stack);
filter: brightness(97%);
padding: 18px; padding: 18px;
position: relative;
border-radius: 12px; border-radius: 12px;
margin: 6px 0; margin: 6px 0;
border-color: transparent; border-color: transparent;
} }
.field-header{ .field-header {
margin-bottom: 4px; margin-bottom: 4px;
.labels{ position: relative;
.labels {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.label-and-help{
.label-and-help {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
} }
label{font-size: 14px;line-height: 14px;margin: 0;font-weight: 700;}
.help-text{font-size: 14px;opacity: .7;line-height: 14px} label {
code{} font-size: 14px;
line-height: 14px;
margin: 0;
font-weight: 700;
}
.help-text {
font-size: 14px;
opacity: .7;
line-height: 14px
}
code {
}
} }
.field-checkbox{ .system-help-text {
font-size: 14px;
opacity: .7;
line-height: 14px;
margin-top: 10px;
}
.field-checkbox {
display: flex; display: flex;
gap: 20px; gap: 20px;
align-items: center; align-items: center;
.form-check-inline{ .form-check-inline {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 4px; gap: 4px;
} }
.form-check-label{ .form-check-label {
font-size: 14px; font-size: 14px;
line-height: 14px; line-height: 14px;
} }
front/sass/_reference-tags.scss
+46
View File
@@ -0,0 +1,46 @@
.reference-tags {
position: relative;
z-index: 20;
.reference-tags-option {
cursor: pointer;
}
&:focus-within {
.reference-tags-results{
display: flex;
}
}
}
.reference-tags-selected-value {
font-size: 13px;
margin-top: 10px;
border-radius: 12px;
background: var(--background);
filter: brightness(97%);
padding: 3px 10px;
display: inline-flex;
justify-content: center;
gap: 4px;
line-height: 22px;
}
.reference-tags-selected-value:hover {
opacity: .8;
background-color: #eee;
}
.reference-tags-results {
display: none;
flex-direction: column;
padding: 10px;
overflow: visible;
position: absolute;
border-radius: 12px;
z-index: 20;
background: var(--background);
filter: brightness(97%);
transition: 600ms;
flex-grow: 1;
top: 45px;
min-width: max-content;
}
front/sass/app.scss
+17 -4
View File
@@ -88,6 +88,7 @@ $primary: #5b86be;
$secondary: #d9cca1; $secondary: #d9cca1;
$success: #80c671; $success: #80c671;
$background: #f4f6fa; $background: #f4f6fa;
$table-striped-bg-factor: 0.03; $table-striped-bg-factor: 0.03;
$dropdown-bg: rgb(206, 223, 210); $dropdown-bg: rgb(206, 223, 210);
@@ -109,19 +110,23 @@ $themes: (
accent: #488e39, accent: #488e39,
), ),
); );
:root{ :root {
--linearPrimarySecondary: linear-gradient(#5b86be, #d9cca1); --linearPrimarySecondary: linear-gradient(#5b86be, #d9cca1);
--linearPrimaryAccent: linear-gradient(#5b86be, #80c671); --linearPrimaryAccent: linear-gradient(#5b86be, #80c671);
--linearSecondaryAccent: linear-gradient(#d9cca1, #80c671); --linearSecondaryAccent: linear-gradient(#d9cca1, #80c671);
--radialPrimarySecondary: radial-gradient(#5b86be, #d9cca1); --radialPrimarySecondary: radial-gradient(#5b86be, #d9cca1);
--radialPrimaryAccent: radial-gradient(#5b86be, #80c671); --radialPrimaryAccent: radial-gradient(#5b86be, #80c671);
--radialSecondaryAccent: radial-gradient(#d9cca1, #80c671); --radialSecondaryAccent: radial-gradient(#d9cca1, #80c671);
--border-color: #ccc; --border-color: #cecece;
--main-font: ‘Open Sans‘, Arial, Helvetica, sans-serif; --main-font: ‘Open Sans‘, Arial, Helvetica, sans-serif;
--main-font-color: #444; --main-font-color: #444;
--input-bg: rgb(245,245,249); --input-bg: rgb(245, 245, 249);
--text: #010b05; --text: #010b05;
--background: #f7fefa; --background: #f7fefa;
--background-stack: #f0f6f3;
--background-2: #E8EBEAFF;
--background-3: #C2C7C5FF;
--background-button: #ddd;
--primary: #1ce776; --primary: #1ce776;
--secondary: #7bc8f1; --secondary: #7bc8f1;
--accent: #5086ed; --accent: #5086ed;
@@ -154,6 +159,8 @@ $themes: (
@import "./switch"; @import "./switch";
@import "./preview"; @import "./preview";
@import "./dialog"; @import "./dialog";
@import "./autocomplete";
@import "./reference-tags";
body { body {
background-color: var(--background); background-color: var(--background);
@@ -163,6 +170,7 @@ body {
.btn-spinner .spinner-border { .btn-spinner .spinner-border {
display: none; display: none;
} }
.btn-spinner.spinner-on .spinner-border { .btn-spinner.spinner-on .spinner-border {
display: inline-block; display: inline-block;
} }
@@ -172,7 +180,7 @@ body {
} }
a{ a {
color: var(--text); color: var(--text);
text-decoration: none; text-decoration: none;
} }
@@ -196,3 +204,8 @@ a{
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
.lucent-component {
position: relative;
}