complete transition of more editors; fix user editor

This commit is contained in:
2021-01-10 17:11:00 +01:00
parent 9b6470655f
commit 7e8554b994
14 changed files with 121 additions and 153 deletions
@@ -44,11 +44,17 @@
{
border-bottom: none;
}
.ui-table.is-inline &
{
border-bottom-color: var(--color-line);
}
}
a.ui-table-row:hover
{
box-shadow: var(--shadow-mid);
background: var(--color-table-hover);
z-index: 2;
}
+4 -2
View File
@@ -1,12 +1,14 @@
<template>
<div class="editor-infos">
<div class="ui-box is-light editor-infos-aside">
<ui-property v-if="value.id && value.lastModifiedDate" field="lastModifiedDate" label="@ui.modifiedDate" :is-text="true" :vertical="true">
<slot name="before"></slot>
<ui-property v-if="value.id && value.lastModifiedDate" field="lastModifiedDate" label="@ui.modifiedDate">
<ui-date v-model="value.lastModifiedDate" />
</ui-property>
<ui-property v-if="value.id" label="@ui.createdDate" field="createdDate" :is-text="true" :vertical="true">
<ui-property v-if="value.id" label="@ui.createdDate" field="createdDate">
<ui-date v-model="value.createdDate" />
</ui-property>
<slot name="after"></slot>
</div>
</div>
</template>
+1 -42
View File
@@ -62,45 +62,4 @@
}
}
}
</script>
<style lang="scss">
.ui-editor-overlay
{
> content
{
position: relative;
padding-top: 0 !important;
}
.ui-box
{
margin: 0;
}
.ui-tabs-list
{
padding: 0;
padding-bottom: 32px;
}
.ui-property.ui-modules
{
margin: 0;
padding: 0;
}
.editor-outer.-infos-aside:not(.is-page)
{
display: block;
}
.ui-loading
{
position: absolute;
left: 50%;
top: 50%;
margin: -14px 0 0 -14px;
}
}
</style>
</script>
+9
View File
@@ -66,11 +66,19 @@
gap: var(--padding-l);
}
.editor-infos .ui-property
{
flex-direction: column;
border-top: none;
}
.editor-infos .ui-property-label
{
font-size: var(--font-size-s);
font-weight: 400;
color: var(--color-text-dim);
width: 100%;
padding-right: 0;
}
.editor-infos .ui-property-content
@@ -78,6 +86,7 @@
font-size: var(--font-size-s);
font-weight: 400;
color: var(--color-text-dim);
margin-top: 2px;
}
.editor-infos-aside .ui-property + .ui-property
@@ -30,7 +30,7 @@
{
LanguagesApi.getSupportedCultures().then(res =>
{
this.items = res
this.items = res;
});
}
}
+21 -32
View File
@@ -2,29 +2,26 @@
<ui-form ref="form" class="mediaitem" v-slot="form" @submit="onSubmit" @load="onLoad" :route="route">
<ui-form-header v-model="model" title="@media.name" :disabled="disabled" :is-create="!id" :state="form.state" :can-delete="meta.canDelete" @delete="onDelete" />
<ui-editor config="media" v-model="model" :meta="meta" :active-toggle="false" :disabled="disabled">
<template v-slot:infos-more>
<ui-property v-if="model.imageMeta" label="@media.fields.date" :is-text="true">
<ui-date v-model="model.imageMeta.createdDate" />
</ui-property>
<ui-property label="@media.fields.size" :is-text="true">
<span v-filesize="model.size"></span>
</ui-property>
</template>
<template v-slot:infos-after v-if="model.imageMeta">
<div class="ui-box">
<ui-property v-if="model.imageMeta.width" label="@media.fields.dimension" :is-text="true">
{{model.imageMeta.width}} × {{model.imageMeta.height}}
</ui-property>
<ui-property v-if="model.imageMeta.dpi != 0" label="@media.fields.dpi" :is-text="true">
{{model.imageMeta.dpi}}
</ui-property>
<ui-property v-if="model.imageMeta.colorSpace" label="@media.fields.colorSpace" :is-text="true">
{{model.imageMeta.colorSpace}}
</ui-property>
<ui-property v-if="model.imageMeta.frames > 1" label="@media.fields.frames" :is-text="true">
{{model.imageMeta.frames}}
</ui-property>
</div>
<template v-slot:below>
<ui-editor-infos v-model="model" :disabled="disabled">
<template v-slot:before>
<ui-property label="@media.fields.size">
<span v-filesize="model.size"></span>
</ui-property>
<ui-property v-if="model.imageMeta.width" label="@media.fields.dimension" :is-text="true">
{{model.imageMeta.width}} × {{model.imageMeta.height}}
</ui-property>
<ui-property v-if="model.imageMeta.dpi != 0" label="@media.fields.dpi" :is-text="true">
{{model.imageMeta.dpi}}
</ui-property>
<ui-property v-if="model.imageMeta.colorSpace" label="@media.fields.colorSpace" :is-text="true">
{{model.imageMeta.colorSpace}}
</ui-property>
<ui-property v-if="model.imageMeta.frames > 1" label="@media.fields.frames" :is-text="true">
{{model.imageMeta.frames}}
</ui-property>
</template>
</ui-editor-infos>
</template>
</ui-editor>
</ui-form>
@@ -73,12 +70,4 @@
}
}
}
</script>
<style lang="scss">
.country .country-flag-input
{
max-width: 80px;
}
</style>
</script>
+12 -6
View File
@@ -85,10 +85,16 @@
overflow: visible !important;
position: relative;
text-align: center;
font-size: 20px;
font-size: 28px;
box-shadow: var(--shadow-short);
}
.media-item.is-selected .media-item-preview
{
transform: scale(0.95);
border: 3px solid var(--color-primary);
}
.media-item-image
{
width: 100%;
@@ -104,17 +110,17 @@
display: none;
justify-content: center;
align-items: center;
width: 20px;
height: 20px;
width: 24px;
height: 24px;
border-radius: 20px;
position: absolute;
z-index: 2;
left: -5px;
top: -5px;
left: -12px;
top: -12px;
background: var(--color-primary);
color: var(--color-primary-text);
box-shadow: 1px 1px 0 1px var(--color-shadow);
font-size: 12px;
font-size: 11px;
.is-selected &
{
+1 -58
View File
@@ -99,61 +99,4 @@
}
}
}
</script>
<style lang="scss">
/*.integration .ui-header-bar
{
background: var(--color-primary);
margin-bottom: var(--padding);
}
.integration .ui-header-bar h2, .integration .ui-header-bar .ui-button-icon
{
color: var(--color-primary-text) !important;
}*/
.integration .ui-box + .ui-box
{
margin-top: var(--padding) !important;
}
.ui-editor-overlay
{
> content
{
position: relative;
padding-top: 0 !important;
}
.ui-box
{
margin: 0;
}
.ui-tabs-list
{
padding: 0;
padding-bottom: 32px;
}
.ui-property.ui-modules
{
margin: 0;
padding: 0;
}
.editor-outer.-infos-aside:not(.is-page)
{
display: block;
}
.ui-loading
{
position: absolute;
left: 50%;
top: 50%;
margin: -14px 0 0 -14px;
}
}
</style>
</script>
@@ -1,7 +1,11 @@
<template>
<ui-form ref="form" class="space-editor" v-slot="form" @submit="onSubmit" @load="onLoad" :route="route">
<ui-form-header v-model="model" :title="space.name" :title-disabled="space.view === 'editor'" :disabled="disabled" :is-create="!id" :state="form.state" :can-delete="meta.canDelete" @delete="onDelete" :active-toggle="true" />
<ui-editor v-if="editor" :config="editor" v-model="model" :meta="meta" :disabled="disabled" :active-toggle="false" />
<ui-editor v-if="editor" :config="editor" v-model="model" :meta="meta" :disabled="disabled" :active-toggle="false">
<template v-slot:below>
<ui-editor-infos v-model="model" :disabled="disabled" />
</template>
</ui-editor>
</ui-form>
</template>
@@ -7,6 +7,6 @@ editor.field('name', { label: '@ui.name' }).text(60).required();
editor.field('code').text(10).required();
editor.field('inheritedLanguageId').languagePicker();
editor.field('isDefault').toggle();
editor.field('isOptions').toggle();
editor.field('isOptional').toggle();
export default editor;
+34
View File
@@ -279,4 +279,38 @@ code
linear-gradient(45deg, #{$media-pattern-color-b} 25%, #{$media-pattern-color-a} 25%, #{$media-pattern-color-a} 75%, #{$media-pattern-color-b} 75%, #{$media-pattern-color-b} 100%);
border-radius: var(--radius);
}
}
.ui-editor-overlay
{
> content
{
position: relative;
padding-top: 0 !important;
}
.ui-box
{
margin: 0;
}
.ui-tabs-list, .editor
{
padding: 0;
}
.ui-property.ui-modules
{
margin: 0;
padding: 0;
}
.ui-loading
{
position: absolute;
left: 50%;
top: 50%;
margin: -14px 0 0 -14px;
}
}
+1 -1
View File
@@ -106,7 +106,7 @@
// tables
--color-table: #{$color-bg-shade-1};
--color-table-line-horizontal: transparent; //#{$color-bg-shade-3};
--color-table-line-horizontal: #{$color-bg}; //#{$color-bg-shade-3};
--color-table-line-vertical: transparent;
--color-table-head: #{$color-bg-shade-3};
--color-table-hover: #{$color-bg-shade-2};
+11 -9
View File
@@ -103,15 +103,17 @@ class Editor
{
options = options || {};
let field = this.fields.find(x => x.path === path);
//let field = this.fields.find(x => x.path === path);
// TODO we need another method to retrieve existing fields
// but we can't do it this way anymore as sometimes a field is defined multiple times with a condition
if (this.tabs.length < 1)
{
this.tab('content', '@ui.tab_content', x => 0, x => false, null, null);
}
if (!field)
{
//if (!field)
//{
if (typeof options.coreDatabase === 'undefined')
{
options.coreDatabase = this.options.coreDatabase;
@@ -120,13 +122,13 @@ class Editor
{
options.tab = 'content';
}
field = new EditorField(path, options);
let field = new EditorField(path, options);
this.fields.push(field);
}
else
{
field.options = { ...field.options, ...options };
}
//}
//else
//{
// field.options = { ...field.options, ...options };
//}
return field;
}
@@ -1,4 +1,6 @@
using Raven.Client.Documents.Linq;
using System.Collections.Generic;
using System.Threading.Tasks;
using zero.Core.Collections;
using zero.Core.Entities;
using zero.Core.Identity;
@@ -13,5 +15,17 @@ namespace zero.Web.Controllers
DefaultQuery = q => q.OrderByDescending(x => x.CreatedDate);
PreviewTransform = (item, model) => model.Icon = "fth-globe";
}
public IList<Culture> GetAllCultures()
{
return Collection.GetAllCultures();
}
public IList<Culture> GetSupportedCultures()
{
return Collection.GetAllCultures(Options.SupportedLanguages);
}
}
}