DeforaNetworks/corteza
3
0
Fork 0
Code Activity

Apply preview styles from file page block to module field

Browse Source
This commit is contained in:
Katrin Yordanova
2023-03-28 17:16:32 +03:00
parent 6fbf36ec67
commit 1d67e906a3
4 changed files with 58 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
client/web/compose/src/components/ModuleFields/Configurator/File.vue
View File

@@ -54,6 +54,8 @@
{{ $t('kind.file.view.previewStyle') }}
</h5>
<small>{{ $t('kind.file.view.description' ) }}</small>
<b-row
align-v="center"
class="mb-2 mt-2"
@@ -64,17 +66,11 @@
>
<b-form-group
:label="$t('kind.file.view.height')"
label-class="text-primary"
>
<b-input-group
:append="$t('kind.file.view.px')"
>
<b-form-input
v-model="f.options.height"
type="number"
number
:placeholder="$t('kind.file.view.height')"
/>
</b-input-group>
<b-form-input
v-model="f.options.height"
/>
</b-form-group>
</b-col>
@@ -84,17 +80,11 @@
>
<b-form-group
:label="$t('kind.file.view.width')"
label-class="text-primary"
>
<b-input-group
:append="$t('kind.file.view.px')"
>
<b-form-input
v-model="f.options.width"
type="number"
number
:placeholder="$t('kind.file.view.width')"
/>
</b-input-group>
<b-form-input
v-model="f.options.width"
/>
</b-form-group>
</b-col>
@@ -104,17 +94,11 @@
>
<b-form-group
:label="$t('kind.file.view.maxHeight')"
label-class="text-primary"
>
<b-input-group
:append="$t('kind.file.view.px')"
>
<b-form-input
v-model="f.options.maxHeight"
type="number"
number
:placeholder="$t('kind.file.view.maxHeight')"
/>
</b-input-group>
<b-form-input
v-model="f.options.maxHeight"
/>
</b-form-group>
</b-col>
@@ -124,17 +108,11 @@
>
<b-form-group
:label="$t('kind.file.view.maxWidth')"
label-class="text-primary"
>
<b-input-group
:append="$t('kind.file.view.px')"
>
<b-form-input
v-model="f.options.maxWidth"
type="number"
number
:placeholder="$t('kind.file.view.maxWidth')"
/>
</b-input-group>
<b-form-input
v-model="f.options.maxWidth"
/>
</b-form-group>
</b-col>
@@ -144,31 +122,10 @@
>
<b-form-group
:label="$t('kind.file.view.borderRadius')"
>
<b-input-group
:append="$t('kind.file.view.px')"
>
<b-form-input
v-model="f.options.borderRadius"
type="number"
number
:placeholder="$t('kind.file.view.borderRadius')"
/>
</b-input-group>
</b-form-group>
</b-col>
<b-col
sm="12"
md="6"
>
<b-form-group
:label="$t('kind.file.view.background')"
label-class="text-primary"
>
<b-form-input
v-model="f.options.backgroundColor"
type="color"
debounce="300"
v-model="f.options.borderRadius"
/>
</b-form-group>
</b-col>
@@ -179,17 +136,27 @@
>
<b-form-group
:label="$t('kind.file.view.margin')"
label-class="text-primary"
>
<b-input-group
:append="$t('kind.file.view.px')"
>
<b-form-input
v-model="f.options.margin"
type="number"
number
:placeholder="$t('kind.file.view.margin')"
/>
</b-input-group>
<b-form-input
v-model="f.options.margin"
/>
</b-form-group>
</b-col>
<b-col
sm="12"
md="6"
>
<b-form-group
:label="$t('kind.file.view.background')"
label-class="text-primary"
>
<b-form-input
v-model="f.options.backgroundColor"
type="color"
debounce="300"
/>
</b-form-group>
</b-col>
</b-row>

8
client/web/compose/src/components/PageBlocks/FileConfigurator.vue
View File

@@ -58,6 +58,8 @@
{{ $t('kind.file.view.previewStyle') }}
</h5>
<small>{{ $t('kind.file.view.description' ) }}</small>
<b-row
align-v="center"
class="mb-2 mt-2"
@@ -73,7 +75,6 @@
<b-input-group>
<b-form-input
v-model="options.height"
:placeholder="$t('kind.file.view.height')"
/>
</b-input-group>
</b-form-group>
@@ -90,7 +91,6 @@
<b-input-group>
<b-form-input
v-model="options.width"
:placeholder="$t('kind.file.view.width')"
/>
</b-input-group>
</b-form-group>
@@ -107,7 +107,6 @@
<b-input-group>
<b-form-input
v-model="options.maxHeight"
:placeholder="$t('kind.file.view.maxHeight')"
/>
</b-input-group>
</b-form-group>
@@ -124,7 +123,6 @@
<b-input-group>
<b-form-input
v-model="options.maxWidth"
:placeholder="$t('kind.file.view.maxWidth')"
/>
</b-input-group>
</b-form-group>
@@ -141,7 +139,6 @@
<b-input-group>
<b-form-input
v-model="options.borderRadius"
:placeholder="$t('kind.file.view.borderRadius')"
/>
</b-input-group>
</b-form-group>
@@ -158,7 +155,6 @@
<b-input-group>
<b-form-input
v-model="options.margin"
:placeholder="$t('kind.file.view.margin')"
/>
</b-input-group>
</b-form-group>

30
lib/js/src/compose/types/module-field/file.ts
View File

@@ -22,12 +22,12 @@ interface FileOptions extends Options {
inline: boolean;
hideFileName: boolean;
mimetypes?: string;
height?: number;
width?: number;
maxHeight?: number;
maxWidth?: number;
borderRadius?: number;
margin?: number;
height?: string;
width?: string;
maxHeight?: string;
maxWidth?: string;
borderRadius?: string;
margin?: string;
backgroundColor?: string;
}
@@ -40,13 +40,13 @@ const defaults = (): Readonly<FileOptions> => Object.freeze({
inline: true,
hideFileName: false,
mimetypes: '',
height: undefined,
width: undefined,
maxHeight: undefined,
maxWidth: undefined,
borderRadius: undefined,
margin: undefined,
backgroundColor: undefined,
height: '',
width: '',
maxHeight: '',
maxWidth: '',
borderRadius: '',
margin: 'auto',
backgroundColor: '',
})
export class ModuleFieldFile extends ModuleField {
@@ -63,9 +63,9 @@ export class ModuleFieldFile extends ModuleField {
if (!o) return
super.applyOptions(o)
Apply(this.options, o, Number, 'maxSize', 'height', 'width', 'maxHeight', 'maxWidth', 'borderRadius', 'margin')
Apply(this.options, o, Number, 'maxSize')
Apply(this.options, o, Boolean, 'allowImages', 'allowDocuments', 'inline', 'hideFileName')
Apply(this.options, o, String, 'mimetypes', 'backgroundColor')
Apply(this.options, o, String, 'mimetypes', 'height', 'width', 'maxHeight', 'maxWidth', 'borderRadius', 'margin', 'backgroundColor')
ApplyWhitelisted(this.options, o, modes, 'mode')
}
}

1
locale/en/corteza-webapp-compose/field.yaml
View File

@@ -50,6 +50,7 @@ kind:
px: px
enableDownload: Enable download
clickToView: Click to view file
description: 'Add unit after value to set it. For example: 50px or 50%'
number:
exampleFormat: Format
exampleInput: Input