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

content and edit record

Browse Source
This commit is contained in:
Alex Lingris
2024-08-15 18:52:53 +03:00
parent f9806f60c9
commit 113533408d
38 changed files with 577 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/js/svelte/common/Checkbox.svelte
+14
View File
@@ -0,0 +1,14 @@
<script>
let checkboxEl = null;
export let indeterminate = false;
export let value;
export let checked = false;
</script>
<div class="checkbox-wrapper">
<input bind:this={checkboxEl} on:change id="c1-13" type="checkbox" {value} {indeterminate} checked={checked}/>
</div>
front/js/svelte/common/ErrorAlert.svelte
+3 -2
View File
@@ -3,7 +3,8 @@
</script>
{#if message}
<div class="alert alert-danger" role="alert">
{message}
<div class="notice notice-error" role="alert">
<div class="title">Submission Errors</div>
<div class="content"> {message}</div>
</div>
{/if}
front/js/svelte/common/SpinnerButton.svelte
+1 -1
View File
@@ -3,7 +3,7 @@
export let disabled = false;
</script>
<button type="submit" class="btn btn-primary btn-spinner" {disabled}>
<button type="submit" class="button btn-primary btn-spinner" {disabled}>
<span
class="spinner-border spinner-border-sm"
role="status"
front/js/svelte/common/Switch.svelte
+9
View File
@@ -0,0 +1,9 @@
<script>
export let value;
export let checked = false;
</script>
<input type="checkbox" {value} on:change
class="switch" {checked}/>
front/js/svelte/content/ActionsOnSelected.svelte
+7 -7
View File
@@ -35,47 +35,47 @@
}
</script>
<div class="d-flex align-items-center mb-3">
<div style="display: flex;align-items: center; gap: 8px">
<span class="me-2">{selected.length} records selected</span>
<div class="btn-group " role="group" aria-label="Basic example">
<button
on:click|preventDefault={(e) => changeStatus(e, "published")}
type="button"
class="btn btn-sm btn-outline-primary">Publish
class="button">Publish
</button
>
<button
on:click|preventDefault={(e) => changeStatus(e, "draft")}
type="button"
class="btn btn-sm btn-outline-primary">Make Draft
class="button">Make Draft
</button
>
{#if filter["status_in"] === "trashed"}
<button
on:click|preventDefault={(e) => changeStatus(e, "published")}
type="button"
class="btn btn-sm btn-outline-primary">Publish
class="button">Publish
</button
>
{#if schema.hasDrafts}
<button
on:click|preventDefault={(e) => changeStatus(e, "draft")}
type="button"
class="btn btn-sm btn-outline-primary">Make Draft
class="button">Make Draft
</button
>
{/if}
<button
on:click|preventDefault={deleteRecords}
type="button"
class="btn btn-sm btn-outline-primary">Delete forever
class="button">Delete forever
</button
>
{:else}
<button
type="button"
on:click|preventDefault={(e) => changeStatus(e, "trashed")}
class="btn btn-sm btn-outline-primary">Move to trash
class="button">Move to trash
</button
>
{/if}
front/js/svelte/content/Table.svelte
+39 -51
View File
@@ -5,6 +5,7 @@
import {getContext} from "svelte";
import Avatar from "../account/Avatar.svelte";
import {selectRecord, toggleAll} from "./functions/recordSelect.js";
import Checkbox from "../common/Checkbox.svelte";
const channel = getContext("channel");
@@ -20,7 +21,7 @@
export let selected = [];
function eventToggleAll(e) {
selected = toggleAll(e,records,selected)
selected = toggleAll(e, records, selected)
}
function select(record) {
@@ -31,20 +32,18 @@
</script>
<div class="table">
<table class="">
<thead class="table-light">
<div class="table mt-5 ">
<table>
<thead>
<tr>
{#if isWritable}
<th>
<input
on:change|preventDefault={eventToggleAll}
indeterminate={selected.length > 0 &&
selected.length < records.length}
checked={selected.length == records.length}
class="form-check-input"
type="checkbox"
/>
<Checkbox
on:change={eventToggleAll}
indeterminate={selected.length > 0 && selected.length < records.length}
checked={selected.length === records.length}
>
</Checkbox>
</th>
{/if}
@@ -54,13 +53,13 @@
class:is-sort={field.name === sortField.name}
scope="col"
title={field.help}
data-bs-toggle="tooltip"
data-bs-placement="top">{field.label}</th
>{field.label}</th
>
{/each}
{#each systemFields.filter(c => schema.visible.includes(c.name)) as sysField}
<th>{sysField.label}</th>
<th class:is-sort={sysField.name === sortField.name}>{sysField.label}</th>
{/each}
<th></th>
</tr>
</thead>
<tbody>
@@ -68,44 +67,26 @@
<tr>
<td class="title-td">
<div
class="title-td-contents d-inline-flex justify-content-between w-100 align-items-center"
class="title-td-contents"
>
<div class="d-flex align-items-center ">
{#if isWritable}
<div class="form-check">
<input
on:change={() => select(record)}
class="form-check-input "
type="checkbox"
checked={selected.find(
(r) => r.id === record.id
)}
value={record}
/>
</div>
{/if}
<a
class="me-2 text-decoration-none text-dark fs-6"
href="{channel.lucentUrl}/records/{record.id}"
target={inModal ? "_blank" : "_self"}
title={previewTitle(channel.schemas, record, graph)}
data-bs-toggle="tooltip" data-bs-placement="left"
{#if isWritable}
<Checkbox
on:change={() => select(record)}
checked={selected.find((r) => r.id === record.id)}
value={record}
>
{previewTitle(channel.schemas, record, graph)}
</a>
</div>
<div>
<Avatar
name={usernameById(
users,
record._sys.updatedBy
)}
side={24}
/>
</div>
</Checkbox>
{/if}
<a
class="me-2 text-decoration-none text-dark fs-6"
href="{channel.lucentUrl}/records/{record.id}"
target={inModal ? "_blank" : "_self"}
>
{previewTitle(channel.schemas, record, graph)}
</a>
</div>
</td>
<RecordRow
@@ -117,6 +98,13 @@
{sortField}
{users}
/>
<td> <Avatar
name={usernameById(
users,
record._sys.updatedBy
)}
side={24}
/></td>
</tr>
{/each}
</tbody>
front/js/svelte/content/pagination/NavItem.svelte
+2 -2
View File
@@ -28,8 +28,8 @@
</script>
{#each pages as i}
<li class="page-item">
{#if currentPage == i}
<li class="page-item" class:active={currentPage === i}>
{#if currentPage === i}
<span class="page-link active">{i}</span>
{:else}
<a class="page-link" on:click={(e) => goto(e, i)} href={url(i)}
front/js/svelte/content/pagination/Pagination.svelte
+2 -2
View File
@@ -43,7 +43,7 @@
</script>
<nav>
<ul class="pagination justify-content-center">
<ul class="pagination">
{#if totalPages > 1}
<li class="page-item disabled" class:disabled={currentPage === 1}>
<a on:click={first} href="/" class="page-link"> First </a>
@@ -69,7 +69,7 @@
{/if}
</ul>
</nav>
<p class="text-muted text-center">
<p style="display: flex;justify-content: center; gap: 4px">
Showing
<span class="font-medium">{+skip + 1}</span>
to
front/js/svelte/content/tools/Tools.svelte
+2 -2
View File
@@ -74,13 +74,13 @@
<form method="GET" on:submit={search}>
<input type="search" name="filter[search_regex]" placeholder="Search"
class="form-control" required>
class="search" required>
</form>
</div>
<div style="display:flex;align-items: center">
<div style="display:flex;align-items: center;gap:4px">
{#if schema.type === "collection"}
{#if !inModal && isWritable}
<a
front/js/svelte/libs/Tinymce.svelte
+3 -3
View File
@@ -7,6 +7,7 @@
import "tinymce/themes/silver";
import "tinymce/skins/ui/oxide/skin.css";
import contentUiSkinCss from "tinymce/skins/ui/oxide/content.css";
import customcss from "./tinymce.css";
import "tinymce/plugins/link";
import "tinymce/plugins/code";
@@ -52,7 +53,7 @@
toolbar_sticky: true,
skin: false,
content_css: false,
content_style: contentUiSkinCss.toString(),
content_style: contentUiSkinCss.toString() + customcss.toString(),
branding: false,
inline: false,
plugins: plugins,
@@ -67,8 +68,7 @@
browser_spellcheck: true,
max_height: 600,
// media_poster: false,
content_style:
"img {max-width: 100%;height: auto;",
setup: function (editor) {
activeEditor = editor;
front/js/svelte/libs/tinymce.css
+37
View File
@@ -0,0 +1,37 @@
.mce-content-body .img {
max-width: 100%;
height: auto;
}
.mce-content-body{
font-size: 16px;
line-height: 20px;
}
.mce-content-body p{
margin-bottom: 14px;
&:last-child{
margin-bottom: 0;
}
}
.mce-content-body ul {
padding: 0 0 0 16px;
list-style: none outside none;
}
.mce-content-body li::before {
content: "—";
opacity: .5;
font-size: 12px;
padding-right: 6px;
vertical-align: 10%;
}
.mce-content-body li {
list-style: none;
padding: 0;
}
front/js/svelte/records/Edit.svelte
+25 -33
View File
@@ -1,15 +1,15 @@
<script>
import {afterUpdate, getContext, onMount} from "svelte";
import {isEqual} from "lodash";
import Manager from "./Manager.svelte";
import EditHeader from "./EditHeader.svelte"
import StatusSelect from "./StatusSelect.svelte"
import axios from "axios";
import EditHeader from "./header/EditHeader.svelte"
import FilePreview from "./FilePreview.svelte"
import ContentTabs from "./ContentTabs.svelte"
import ContentTabs from "./header/ContentTabs.svelte"
import FormField from "./FormField.svelte"
import Graph from "./Graph.svelte"
import Info from "./Info.svelte"
import ErrorAlert from "../common/ErrorAlert.svelte"
import Title from "./header/Title.svelte";
const channel = getContext("channel");
@@ -151,47 +151,39 @@
<svelte:window on:beforeunload={beforeUnload}/>
<div class="wrapper-normal transparent">
<Manager managerRecords={recordHistory} {graph}/>
<EditHeader {schema} {record} {isCreateMode} {graph} bind:activeContentTab/>
{#if !["_graph", "_info"].includes(activeContentTab) && isWritable}
<div class="shadow-lg "
style="position:fixed;bottom:0;left:0px;width:100%;background: rgb(206, 223, 210);z-index:1050"
<div class="record-edit">
<div class="tools-header">
<!-- <Manager managerRecords={recordHistory} {graph}/>-->
{#if isCreateMode}
<button
class="button btn-spinner"
on:click={save}
>
<div
class="d-flex mt-3 mb-3 align-items-center justify-content-center"
>
<StatusSelect bind:status={record.status} {record} {schema}/>
{#if isCreateMode}
<button
class="ms-2 btn btn-primary btn-spinner"
on:click={save}
>
<span
class="spinner-border spinner-border-sm"
role="status"
aria-hidden="true"
/>
Create
</button>
{:else if hasUnsavedData}
<button
type="button"
class="ms-2 btn btn-primary btn-spinner"
on:click={save}
>
Create
</button>
{:else if hasUnsavedData}
<button
type="button"
class="button ms-2 btn btn-primary btn-spinner"
on:click={save}
>
<span
class="spinner-border spinner-border-sm"
role="status"
aria-hidden="true"
/>
Save
</button>
{/if}
</div>
</div>
Save
</button>
{/if}
<EditHeader {schema} bind:record {isCreateMode} {graph} bind:activeContentTab/>
</div>
<Title {schema} {record} {isCreateMode}/>
<ErrorAlert message={errorMessage}/>
front/js/svelte/records/EditHeader.svelte
-73
View File
@@ -1,73 +0,0 @@
<script>
import {getContext} from "svelte";
import Icon from "../common/Icon.svelte";
import {previewTitle} from "./Preview";
const channel = getContext("channel");
export let schema;
export let graph;
export let record;
export let isCreateMode;
export let activeContentTab;
function clone(e) {
e.preventDefault();
axios.post(channel.lucentUrl + "/records/clone/" + record.id).then(response => {
window.location = channel.lucentUrl + "/records/" + response.data.id;
}).catch(error => {
});
}
</script>
<h3 class="header-normal mt-5 mb-0">
<a
class="text-muted d-block text-decoration-none fs-6 mb-1"
href="{channel.lucentUrl}/content/{schema.name}"
>{schema.label.toUpperCase()}</a
>
<span class="text-dark d-block">
{#if !isCreateMode}
{previewTitle(channel.schemas, record, graph)}
{:else}
New Record
{/if}
</span>
{#if !isCreateMode}
<div class="dropdown d-inline-block">
<button
class="btn btn-link btn-sm"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<Icon icon="ellipsis"/>
</button>
<div class="dropdown-menu">
<h6 class="dropdown-header">Record Actions</h6>
<a
class="dropdown-item"
href="{channel.lucentUrl}/records/new?schema={schema.name}"
>Create new</a
>
{#if !isCreateMode}
<a
class="dropdown-item"
on:click={clone}
href={channel.lucentUrl}
>
Clone
</a>
{/if}
<a
on:click|preventDefault={(e) =>
(activeContentTab = "_info")}
class="dropdown-item"
href="{channel.lucentUrl}">Revisions</a
>
</div>
</div>
{/if}
</h3>
front/js/svelte/records/FormField.svelte
+2 -2
View File
@@ -47,8 +47,8 @@
const id = `field-${field.name}-${record.id}`;
</script>
<div class="card editor-field">
<FieldHeader {schema} {field} {id}/>
<div class="editor-field">
<FieldHeader {field} {id}/>
{#if field.info.name === "reference" && field.layout === "inline"}
<ReferenceInline
bind:graph
front/js/svelte/records/InlineEdit.svelte
+2 -2
View File
@@ -4,8 +4,8 @@
import {isEqual} from "lodash";
import FormField from "./FormField.svelte";
import FilePreview from "./FilePreview.svelte";
import ContentTabs from "./ContentTabs.svelte";
import StatusSelect from "./StatusSelect.svelte";
import ContentTabs from "./header/ContentTabs.svelte";
import StatusSelect from "./header/StatusSelect.svelte";
import ErrorAlert from "../common/ErrorAlert.svelte";
const channel = getContext("channel");
front/js/svelte/records/StatusSelect.svelte
-57
View File
@@ -1,57 +0,0 @@
<script>
import {getContext} from "svelte";
import {getStatus, getStatusList} from "./StatusText";
const channel = getContext("channel");
export let status = "draft";
export let record;
export let schema;
let dropdown;
$: currentStatus = getStatus(status);
const statusList = Object.values(getStatusList());
function updateStatus(e, statusValue) {
// e.preventDefault();
status = statusValue;
dropdown.click();
}
</script>
<!-- Example split danger button -->
<div class="d-flex justify-content-between">
<div class="btn-group dropup">
<button type="button" class="btn btn-{currentStatus.bg}"
>{currentStatus.text}</button
>
<button
bind:this={dropdown}
type="button"
class="btn btn-{currentStatus.bg} dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<div class="dropdown-header">Change status to</div>
{#each statusList as astatus}
{#if astatus.value !== status}
<button
type="button"
class="dropdown-item my-2 rounded w-100 bg-{astatus.bg} text-{astatus.color}"
on:click={(e) => updateStatus(e, astatus.value)}
>
{astatus.text}
</button>
{/if}
{/each}
</div>
</div>
{#if channel.previewTarget}
<a href="{channel.previewTargetUrl}?schema={schema.name}&id={record.id}" target="_blank" class="btn btn-info ms-3">
Preview
</a>
{/if}
</div>
front/js/svelte/records/elements/Checkbox.svelte
+1 -1
View File
@@ -8,7 +8,7 @@
$: errorMessage = getErrorMessage(validationErrors, field.name);
</script>
<div>
<div class="field-checkbox">
<div class="form-check form-check-inline">
<input
class="form-check-input"
front/js/svelte/records/elements/FieldHeader.svelte
+6 -6
View File
@@ -3,20 +3,20 @@
export let id;
</script>
<div class="mb-1">
<div class="d-flex justify-content-between">
<div>
<label for={id} class="form-label"
<div class="field-header">
<div class="labels">
<div class="label-and-help">
<label for={id}
>{field.label}</label
>
{#if field.help}
<small class=" text-primary opacity-50">{field.help}</small>
<small class="help-text">{field.help}</small>
{/if}
</div>
<span
tabindex="-1"
class="text-decoration-none"
><code class="text-primary opacity-50">{field.name}</code>
><code class="field-id">{field.name}</code>
</span>
</div>
</div>
front/js/svelte/records/ContentTabs.svelte → front/js/svelte/records/header/ContentTabs.svelte
+3 -3
View File
@@ -37,12 +37,12 @@
</script>
{#if tabs.length > 1}
<ul class="nav nav-pills mb-4 justify-content-center">
<ul class="tabs">
{#each tabs as tab}
<li class="nav-item">
<li class="tab">
<button
on:click={(e) => changeTab(e, tab.name)}
class="nav-link"
class="button"
class:active={active === tab.name}
aria-current="page"
>
front/js/svelte/records/header/EditHeader.svelte
+54
View File
@@ -0,0 +1,54 @@
<script>
import {getContext} from "svelte";
import Icon from "../../common/Icon.svelte";
import Dropdown from "../../common/Dropdown.svelte";
import StatusSelect from "./StatusSelect.svelte";
const channel = getContext("channel");
export let schema;
export let record;
export let isCreateMode;
export let activeContentTab;
function clone(e) {
e.preventDefault();
axios.post(channel.lucentUrl + "/records/clone/" + record.id).then(response => {
window.location = channel.lucentUrl + "/records/" + response.data.id;
}).catch(error => {
});
}
</script>
<StatusSelect bind:status={record.status} {record}></StatusSelect>
{#if !isCreateMode}
<Dropdown orientation="right">
<div slot="button">
<Icon icon="ellipsis"/>
</div>
<h6 class="dropdown-header">Record Actions</h6>
<a
class="dropdown-item"
href="{channel.lucentUrl}/records/new?schema={schema.name}"
>Create new</a
>
{#if !isCreateMode}
<a
class="dropdown-item"
on:click={clone}
href={channel.lucentUrl}
>
Clone
</a>
{/if}
<a
on:click|preventDefault={(e) =>
(activeContentTab = "_info")}
class="dropdown-item"
href="{channel.lucentUrl}">Revisions</a
>
</Dropdown>
{/if}
front/js/svelte/records/header/StatusSelect.svelte
+26
View File
@@ -0,0 +1,26 @@
<script>
import Switch from "../../common/Switch.svelte";
export let status = "draft";
export let record;
function updateStatus(e) {
if(e.target.checked){
status = "published";
}else{
status = "draft";
}
}
</script>
{#if record.status !== "trashed"}
<Switch value="published" on:change={updateStatus} checked={record.status === "published"}></Switch>
{/if}
{#if record.status === "published"}
Published
{:else if record.status === "draft"}
Draft
{:else if record.status === "trashed"}
Trashed
{/if}
front/js/svelte/records/header/Title.svelte
+27
View File
@@ -0,0 +1,27 @@
<script>
import {getContext} from "svelte";
import {previewTitle} from "./../Preview";
const channel = getContext("channel");
export let schema;
export let record;
export let isCreateMode;
</script>
<div class="record-header">
<span class="record-title">
{#if !isCreateMode}
{previewTitle(channel.schemas, record)}
{:else}
New Record
{/if}
</span>
<a
class="schema-name"
href="{channel.lucentUrl}/content/{schema.name}"
>{schema.label.toUpperCase()}</a
>
</div>
front/sass/_button.scss
+4 -1
View File
@@ -6,7 +6,10 @@
filter: brightness(97%);
border: none;
font-size: 14px;
min-height: 27px;
display: flex;
align-items: center;
gap: 4px;
&:focus {
filter: brightness(94%);
}
front/sass/_card.scss
-5
View File
@@ -1,5 +0,0 @@
.lx-card {
padding: 44px;
background-color: #fff;
border-radius: 32px;
}
front/sass/_checkbox.scss
+104
View File
@@ -0,0 +1,104 @@
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
.checkbox-wrapper input[type=checkbox] {
--active-inner: #fff;
--focus: 2px rgba(39, 94, 254, .3);
--border-hover: #275EFE;
--disabled: #F6F8FF;
--disabled-inner: #E1E6F9;
-webkit-appearance: none;
-moz-appearance: none;
height: 21px;
outline: none;
display: inline-block;
vertical-align: top;
position: relative;
margin: 0;
cursor: pointer;
border: 1px solid var(--bc, var(--border-color));
background: var(--b, var(--background));
transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
}
.checkbox-wrapper input[type=checkbox]:after {
content: "";
display: block;
left: 0;
top: 0;
position: absolute;
transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
}
.checkbox-wrapper input[type=checkbox]:checked {
--b: var(--secondary);
--bc: var(--secondary);
--d-o: .3s;
--d-t: .6s;
--d-t-e: cubic-bezier(.2, .85, .32, 1.2);
}
.checkbox-wrapper input[type=checkbox]:disabled {
--b: var(--disabled);
cursor: not-allowed;
opacity: 0.9;
}
.checkbox-wrapper input[type=checkbox]:disabled:checked {
--b: var(--disabled-inner);
--bc: var(--border-color);
}
.checkbox-wrapper input[type=checkbox]:disabled + label {
cursor: not-allowed;
}
.checkbox-wrapper input[type=checkbox]:hover:not(:checked):not(:disabled) {
--bc: var(--border-hover);
}
.checkbox-wrapper input[type=checkbox]:focus {
box-shadow: 0 0 0 var(--focus);
}
.checkbox-wrapper input[type=checkbox]:not(.switch) {
width: 21px;
}
.checkbox-wrapper input[type=checkbox]:not(.switch):after {
opacity: var(--o, 0);
}
.checkbox-wrapper input[type=checkbox]:not(.switch):checked {
--o: 1;
}
.checkbox-wrapper input[type=checkbox] + label {
display: inline-block;
vertical-align: middle;
cursor: pointer;
margin-left: 4px;
}
.checkbox-wrapper input[type=checkbox]:not(.switch) {
border-radius: 7px;
}
.checkbox-wrapper input[type=checkbox]:not(.switch):after {
width: 5px;
height: 9px;
border: 2px solid var(--active-inner);
border-top: 0;
border-left: 0;
left: 7px;
top: 4px;
transform: rotate(var(--r, 20deg));
}
.checkbox-wrapper input[type=checkbox]:not(.switch):checked {
--r: 43deg;
}
}
.checkbox-wrapper * {
box-sizing: inherit;
}
.checkbox-wrapper *:before,
.checkbox-wrapper *:after {
box-sizing: inherit;
}
.checkbox-wrapper input[type=checkbox]:indeterminate {
--b: var(--secondary);
--bc: var(--secondary);
--d-o: .3s;
--d-t: .6s;
--d-t-e: cubic-bezier(.2, .85, .32, 1.2);
}
front/sass/_dropdown.scss
+1
View File
@@ -20,6 +20,7 @@
filter: brightness(97%);
transition: 600ms;
flex-grow: 1;
top: 35px;
&.orientation-right {
right: 0;
front/sass/_files.scss
-3
View File
@@ -1,3 +0,0 @@
.file-wrapper.selected {
box-shadow: inset 0px 0px 0px 2px $primary;
}
front/sass/_form.scss
+4 -5
View File
@@ -5,12 +5,11 @@ label {
margin-bottom: 4px;
}
input{
input[type=text]{
width: 100%;
}
input,textarea{
input[type=text],textarea{
background: var(--input-bg);
border: 1px solid var(--border-color);
border-radius: 5px;
@@ -18,7 +17,7 @@ input,textarea{
font-size: 16px;
filter: brightness(95%);
}
input:focus,textarea:focus{
input[type=text]:focus,textarea:focus{
filter: brightness(101%);
}
front/sass/_pagination.scss
+27
View File
@@ -0,0 +1,27 @@
.pagination {
margin: 20px auto 10px ;
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
padding: 0;
li {
font-size: 14px;
border-radius: 12px;
padding: 4px 18px;
background: var(--background);
list-style: none;
filter: brightness(90%);
&.disabled {
pointer-events: none;
opacity: .7;
}
&.active {
background: var(--secondary);
}
}
}
front/sass/_record-edit.scss
+68
View File
@@ -0,0 +1,68 @@
.record-edit {
}
.record-header {
margin: 10px 0 0;
.schema-name {
font-size: 14px;
}
.record-title {
font-size: 18px;
display: block;
}
}
.tools-header {
margin: 30px 0 0;
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
}
.editor-field {
background: var(--background);
filter: brightness(98%);
padding: 18px;
border-radius: 12px;
margin: 6px 0;
border-color: transparent;
}
.field-header{
margin-bottom: 4px;
.labels{
display: flex;
justify-content: space-between;
align-items: center;
}
.label-and-help{
display: flex;
align-items: center;
gap: 6px;
}
label{font-size: 14px;line-height: 14px;margin: 0;font-weight: 700;}
.help-text{font-size: 14px;opacity: .7;line-height: 14px}
code{}
}
.field-checkbox{
display: flex;
gap: 20px;
align-items: center;
.form-check-inline{
display: flex;
align-items: center;
gap: 4px;
}
.form-check-label{
font-size: 14px;
line-height: 14px;
}
}
front/sass/_revisions.scss
-3
View File
@@ -1,3 +0,0 @@
.text-danger.field-content .preview-file-filename{
color: $danger;
}
front/sass/_sidebar.scss
+1
View File
@@ -36,6 +36,7 @@
filter: brightness(94%);
border-bottom: 0px solid var(--border-color);
border-radius: 12px;
&:hover {
background: var(--secondary);
}
front/sass/_switch.scss
+34
View File
@@ -0,0 +1,34 @@
input.switch {
-webkit-appearance: none;
width: 34px;
height: 18px;
border: 2px solid var(--border-color);
position: relative;
border-radius: 50px;
box-sizing: content-box;
cursor: pointer;
transition: background 150ms ease-in-out;
background: white;
}
input.switch::after {
top: 2px;
left: 2px;
transition: left 150ms ease-in-out;
content: " ";
width: 14px;
height: 14px;
background: var(--border-color);
box-shadow: inset 0 0 0px 1px var(--border-color);
position: absolute;
border-radius: 50px;
}
input.switch:checked {
background: var(--secondary);
}
input.switch:checked::after {
left: calc(100% - 17px);
background: var(--background);
}
front/sass/_table.scss
+20 -10
View File
@@ -5,25 +5,26 @@
padding: 20px;
background: var(--background);
filter: brightness(97%);
font-size: 14px;
table {
width: 100%;
}
th {
font-size: 15px;
font-size: 14px;
font-weight: normal;
white-space: nowrap;
max-width: 400px;
// height: 34px;
text-align: left;
padding: 8px 16px;
// border-bottom: 1px solid #ccc;
background: var(--background);
filter: brightness(90%);
&.is-sort {
background-color: rgba($primary, 0.1);
font-weight: 700;
}
}
td {
font-size: 15px;
font-weight: normal;
white-space: nowrap;
max-width: 400px;
@@ -31,9 +32,7 @@
padding: 4px 16px;
overflow: hidden;
&.is-sort {
background-color: rgba($primary, 0.1);
}
img{
width: 48px;
@@ -48,8 +47,20 @@
align-items: center;
gap: 6px;
}
.title-td-contents{
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
line-height: 14px;
}
}
tr {
background: var(--background);
&:has(input:checked){
filter: brightness(90%);
}
&:hover {
box-shadow: inset 0em 0em 0em 10em rgba(0, 0, 0, 0.1);
}
@@ -64,8 +75,7 @@
// border-right: 1px solid #e4e4e4;
}
th:nth-child(odd) {
border-left: 1px solid #e4e4e4;
border-right: 1px solid #e4e4e4;
}
.field-ui-number {
front/sass/_tabs.scss
+11
View File
@@ -0,0 +1,11 @@
.tabs{
padding: 0;
margin: 20px 0 20px;
display: flex;
gap: 4px;
.tab{
list-style: none;
}
}
front/sass/_toolbar.scss
+11
View File
@@ -3,6 +3,17 @@
align-items: center;
gap: 5px;
justify-content: space-between;
input.search{
border-radius: 12px;
background: var(--background);
padding: 3px 10px;
cursor: pointer;
filter: brightness(97%);
border: none;
font-size: 14px;
}
}
.toolbar-filters{ display: flex;
align-items: center;
front/sass/_typography.scss
+1 -1
View File
@@ -1,6 +1,6 @@
.content{
.content {
font-size: 16px;
line-height: 20px;
p{
front/sass/app.scss
+26 -14
View File
@@ -116,7 +116,7 @@ $themes: (
--radialPrimarySecondary: radial-gradient(#5b86be, #d9cca1);
--radialPrimaryAccent: radial-gradient(#5b86be, #80c671);
--radialSecondaryAccent: radial-gradient(#d9cca1, #80c671);
--border-color: #000;
--border-color: #ccc;
--main-font: ‘Open Sans‘, Arial, Helvetica, sans-serif;
--main-font-color: #444;
--input-bg: rgb(245,245,249);
@@ -143,16 +143,14 @@ $themes: (
@import "./codemirror";
@import "./layout";
@import "./wrappers";
@import "./card";
@import "./files";
@import "./revisions";
@import "./toolbar";
@import "./dropdown";
@import "./button";
@import "./checkbox";
@import "./pagination";
@import "./record-edit";
@import "./tabs";
@import "./switch";
body {
background-color: var(--background);
@@ -170,14 +168,28 @@ body {
cursor: pointer;
}
.editor-field {
padding: 22px 44px;
margin: 6px 0;
border-color: transparent;
}
a{
color: var(--text);
text-decoration: none;
}
.spinner-border {
width: 9px;
height: 9px;
border: 2px solid #FFF;
border-bottom-color: #FF3D00;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}