Add thumbnail styling to file page blocks and field types configurators
This commit is contained in:
Kelani Tolulope
@@ -7,6 +7,7 @@
|
||||
<b-form-input
|
||||
v-model="f.options.maxSize"
|
||||
type="number"
|
||||
number
|
||||
/>
|
||||
</b-input-group>
|
||||
</b-form-group>
|
||||
@@ -36,7 +37,7 @@
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
v-if="enableFileNameHiding"
|
||||
v-if="enablePreviewStyling"
|
||||
class="mb-0"
|
||||
>
|
||||
<b-form-checkbox
|
||||
@@ -45,6 +46,154 @@
|
||||
{{ $t('kind.file.view.showName') }}
|
||||
</b-form-checkbox>
|
||||
</b-form-group>
|
||||
|
||||
<template v-if="enablePreviewStyling">
|
||||
<hr>
|
||||
|
||||
<h5 class="mb-2">
|
||||
{{ $t('kind.file.view.previewStyle') }}
|
||||
</h5>
|
||||
|
||||
<b-row
|
||||
align-v="center"
|
||||
class="mb-2 mt-2"
|
||||
>
|
||||
<b-col
|
||||
sm="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('kind.file.view.height')"
|
||||
>
|
||||
<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-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
sm="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('kind.file.view.width')"
|
||||
>
|
||||
<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-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
sm="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('kind.file.view.maxHeight')"
|
||||
>
|
||||
<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-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
sm="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('kind.file.view.maxWidth')"
|
||||
>
|
||||
<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-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
sm="12"
|
||||
md="6"
|
||||
>
|
||||
<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')"
|
||||
>
|
||||
<b-form-input
|
||||
v-model="f.options.backgroundColor"
|
||||
type="color"
|
||||
debounce="300"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
sm="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('kind.file.view.margin')"
|
||||
>
|
||||
<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-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -68,8 +217,9 @@ export default {
|
||||
]
|
||||
},
|
||||
|
||||
enableFileNameHiding () {
|
||||
return (this.f.options.mode === 'single') || (this.f.options.mode === 'gallery')
|
||||
enablePreviewStyling () {
|
||||
const { mode } = this.f.options
|
||||
return (mode === 'single') || (mode === 'gallery')
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
:namespace="namespace"
|
||||
:mode="field.options.mode"
|
||||
:hide-file-name="field.options.hideFileName"
|
||||
:preview-options="options"
|
||||
/>
|
||||
|
||||
<errors :errors="errors" />
|
||||
|
||||
@@ -67,6 +67,10 @@ export default {
|
||||
}
|
||||
return []
|
||||
},
|
||||
|
||||
options () {
|
||||
return this.field.options
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -7,12 +7,13 @@
|
||||
class="p-2 h-100"
|
||||
>
|
||||
<list-loader
|
||||
class="h-100"
|
||||
kind="page"
|
||||
:set="options.attachments"
|
||||
:namespace="namespace"
|
||||
:mode="options.mode"
|
||||
:hide-file-name="options.hideFileName"
|
||||
:preview-options="options"
|
||||
class="h-100"
|
||||
/>
|
||||
</div>
|
||||
</wrap>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
</b-form-group>
|
||||
<b-form-checkbox
|
||||
v-model="options.hideFileName"
|
||||
:disabled="!enableFileNameHiding"
|
||||
:disabled="!currentPreviewMode"
|
||||
class="mb-3"
|
||||
>
|
||||
{{ $t('kind.file.view.showName') }}
|
||||
@@ -35,6 +35,154 @@
|
||||
mode="list"
|
||||
class="mt-2"
|
||||
/>
|
||||
|
||||
<template v-if="currentPreviewMode">
|
||||
<hr>
|
||||
|
||||
<h5 class="mb-2">
|
||||
{{ $t('kind.file.view.previewStyle') }}
|
||||
</h5>
|
||||
|
||||
<b-row
|
||||
align-v="center"
|
||||
class="mb-2 mt-2"
|
||||
>
|
||||
<b-col
|
||||
sm="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('kind.file.view.height')"
|
||||
>
|
||||
<b-input-group
|
||||
:append="$t('kind.file.view.px')"
|
||||
>
|
||||
<b-form-input
|
||||
v-model="options.height"
|
||||
type="number"
|
||||
number
|
||||
:placeholder="$t('kind.file.view.height')"
|
||||
/>
|
||||
</b-input-group>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
sm="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('kind.file.view.width')"
|
||||
>
|
||||
<b-input-group
|
||||
:append="$t('kind.file.view.px')"
|
||||
>
|
||||
<b-form-input
|
||||
v-model="options.width"
|
||||
type="number"
|
||||
number
|
||||
:placeholder="$t('kind.file.view.width')"
|
||||
/>
|
||||
</b-input-group>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
sm="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('kind.file.view.maxHeight')"
|
||||
>
|
||||
<b-input-group
|
||||
:append="$t('kind.file.view.px')"
|
||||
>
|
||||
<b-form-input
|
||||
v-model="options.maxHeight"
|
||||
type="number"
|
||||
number
|
||||
:placeholder="$t('kind.file.view.maxHeight')"
|
||||
/>
|
||||
</b-input-group>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
sm="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('kind.file.view.maxWidth')"
|
||||
>
|
||||
<b-input-group
|
||||
:append="$t('kind.file.view.px')"
|
||||
>
|
||||
<b-form-input
|
||||
v-model="options.maxWidth"
|
||||
type="number"
|
||||
number
|
||||
:placeholder="$t('kind.file.view.maxWidth')"
|
||||
/>
|
||||
</b-input-group>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
sm="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('kind.file.view.borderRadius')"
|
||||
>
|
||||
<b-input-group
|
||||
:append="$t('kind.file.view.px')"
|
||||
>
|
||||
<b-form-input
|
||||
v-model="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')"
|
||||
>
|
||||
<b-form-input
|
||||
v-model="options.backgroundColor"
|
||||
type="color"
|
||||
debounce="300"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
sm="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('kind.file.view.margin')"
|
||||
>
|
||||
<b-input-group
|
||||
:append="$t('kind.file.view.px')"
|
||||
>
|
||||
<b-form-input
|
||||
v-model="options.margin"
|
||||
type="number"
|
||||
number
|
||||
:placeholder="$t('kind.file.view.margin')"
|
||||
/>
|
||||
</b-input-group>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</template>
|
||||
</b-tab>
|
||||
</template>
|
||||
<script>
|
||||
@@ -75,8 +223,9 @@ export default {
|
||||
]
|
||||
},
|
||||
|
||||
enableFileNameHiding () {
|
||||
return (this.options.mode === 'single') || (this.options.mode === 'gallery')
|
||||
currentPreviewMode () {
|
||||
const { mode } = this.options
|
||||
return (mode === 'single') || (mode === 'gallery')
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
@@ -83,7 +83,6 @@
|
||||
:icon="['far', 'file-'+ext(a)]"
|
||||
class="text-dark float-left mr-2"
|
||||
/>
|
||||
{{ a.name }}
|
||||
</attachment-link>
|
||||
<i18next
|
||||
path="general.label.attachmentFileInfo"
|
||||
@@ -111,7 +110,7 @@
|
||||
:meta="a.meta"
|
||||
:name="a.name"
|
||||
:alt="a.name"
|
||||
:preview-style="{ width: 'unset' }"
|
||||
:preview-style="{ width: 'unset', ...inlineCustomStyles(a) }"
|
||||
:labels="previewLabels"
|
||||
@openPreview="openLightbox({ ...a, ...$event })"
|
||||
/>
|
||||
@@ -189,6 +188,11 @@ export default {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
|
||||
previewOptions: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
|
||||
data () {
|
||||
@@ -321,6 +325,34 @@ export default {
|
||||
default: return 'alt'
|
||||
}
|
||||
},
|
||||
|
||||
inlineCustomStyles (a) {
|
||||
const {
|
||||
height,
|
||||
width,
|
||||
maxHeight,
|
||||
maxWidth,
|
||||
borderRadius,
|
||||
backgroundColor,
|
||||
margin,
|
||||
} = this.previewOptions
|
||||
|
||||
if (this.ext(a) === 'image') {
|
||||
return {
|
||||
...(height && { height: `${height}px` }),
|
||||
...(width && { width: `${width}px` }),
|
||||
...(maxHeight && { maxHeight: `${maxHeight}px` }),
|
||||
...(maxWidth && { maxWidth: `${maxWidth}px` }),
|
||||
...(borderRadius && { borderRadius: `${borderRadius}px` }),
|
||||
...(backgroundColor && { backgroundColor: backgroundColor }),
|
||||
...(margin && { margin: `${margin}px` }),
|
||||
objectFit: 'cover',
|
||||
objectPosition: 'center',
|
||||
}
|
||||
}
|
||||
|
||||
return {}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -22,6 +22,13 @@ interface FileOptions extends Options {
|
||||
inline: boolean;
|
||||
hideFileName: boolean;
|
||||
mimetypes?: string;
|
||||
height?: number;
|
||||
width?: number;
|
||||
maxHeight?: number;
|
||||
maxWidth?: number;
|
||||
borderRadius?: number;
|
||||
margin?: number;
|
||||
backgroundColor?: string;
|
||||
}
|
||||
|
||||
const defaults = (): Readonly<FileOptions> => Object.freeze({
|
||||
@@ -33,6 +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,
|
||||
})
|
||||
|
||||
export class ModuleFieldFile extends ModuleField {
|
||||
@@ -49,9 +63,9 @@ export class ModuleFieldFile extends ModuleField {
|
||||
if (!o) return
|
||||
super.applyOptions(o)
|
||||
|
||||
Apply(this.options, o, Number, 'maxSize')
|
||||
Apply(this.options, o, Number, 'maxSize', 'height', 'width', 'maxHeight', 'maxWidth', 'borderRadius', 'margin')
|
||||
Apply(this.options, o, Boolean, 'allowImages', 'allowDocuments', 'inline', 'hideFileName')
|
||||
Apply(this.options, o, String, 'mimetypes')
|
||||
Apply(this.options, o, String, 'mimetypes', 'backgroundColor')
|
||||
ApplyWhitelisted(this.options, o, modes, 'mode')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,6 +7,13 @@ interface Options {
|
||||
mode: string;
|
||||
attachments: string[];
|
||||
hideFileName: boolean;
|
||||
height?: number;
|
||||
width?: number;
|
||||
maxHeight?: number;
|
||||
maxWidth?: number;
|
||||
borderRadius?: number;
|
||||
margin?: number;
|
||||
backgroundColor?: string;
|
||||
}
|
||||
|
||||
const PageBlockFileDefaultMode = 'list'
|
||||
@@ -25,6 +32,13 @@ const defaults: Readonly<Options> = Object.freeze({
|
||||
mode: PageBlockFileDefaultMode,
|
||||
attachments: [],
|
||||
hideFileName: false,
|
||||
height: undefined,
|
||||
width: undefined,
|
||||
maxHeight: undefined,
|
||||
maxWidth: undefined,
|
||||
borderRadius: undefined,
|
||||
margin: undefined,
|
||||
backgroundColor: undefined,
|
||||
})
|
||||
|
||||
export class PageBlockFile extends PageBlock {
|
||||
@@ -45,6 +59,8 @@ export class PageBlockFile extends PageBlock {
|
||||
}
|
||||
|
||||
Apply(this.options, o, Boolean, 'hideFileName')
|
||||
Apply(this.options, o, String, 'backgroundColor')
|
||||
Apply(this.options, o, Number, 'height', 'width', 'maxHeight', 'maxWidth', 'borderRadius', 'margin')
|
||||
|
||||
if (o.mode) {
|
||||
if (PageBlockFileModes.includes(o.mode)) {
|
||||
|
||||
@@ -38,6 +38,16 @@ kind:
|
||||
modeLabel: View mode
|
||||
showName: Hide file name
|
||||
single: Single image
|
||||
previewStyle: Preview style
|
||||
height: Height
|
||||
width: Width
|
||||
maxHeight: Max height
|
||||
maxWidth: Max width
|
||||
borderRadius: Border radius
|
||||
background: Background color
|
||||
margin: Margin
|
||||
unitType: Unit type
|
||||
px: px
|
||||
number:
|
||||
exampleFormat: Format
|
||||
exampleInput: Input
|
||||
|
||||
Reference in New Issue
Block a user