Move admin logo upload to theming
This commit is contained in:
Jože Fortun
parent
50d964ca24
commit
8674742551
@ -4,11 +4,11 @@
|
||||
>
|
||||
<div
|
||||
v-if="value"
|
||||
class="preview d-flex w-100 mb-2"
|
||||
class="d-flex justify-content-center w-100 mb-2"
|
||||
>
|
||||
<b-img
|
||||
:src="value"
|
||||
class="w-100 h-auto"
|
||||
class="mw-100 h-auto"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -70,9 +70,3 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.preview {
|
||||
height: 300px;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -62,6 +62,65 @@
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<b-row v-else>
|
||||
<b-col
|
||||
cols="12"
|
||||
lg="6"
|
||||
>
|
||||
<b-form-group
|
||||
label-class="d-flex align-items-center text-primary"
|
||||
>
|
||||
<template #label>
|
||||
{{ $t('mainLogo.title') }}
|
||||
|
||||
<c-input-confirm
|
||||
v-if="uploadedFile('ui.main-logo')"
|
||||
show-icon
|
||||
class="ml-auto"
|
||||
@confirmed="resetAttachment('ui.main-logo')"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<c-uploader-with-preview
|
||||
:value="uploadedFile('ui.main-logo')"
|
||||
:endpoint="'/settings/ui.main-logo'"
|
||||
:disabled="!canManage"
|
||||
:labels="$t('mainLogo.uploader', { returnObjects: true })"
|
||||
@upload="onUpload($event)"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
cols="12"
|
||||
lg="6"
|
||||
>
|
||||
<b-form-group
|
||||
label-class="d-flex align-items-center text-primary h-lg-100"
|
||||
>
|
||||
<template #label>
|
||||
{{ $t('iconLogo.title') }}
|
||||
|
||||
<c-input-confirm
|
||||
v-if="uploadedFile('ui.icon-logo')"
|
||||
show-icon
|
||||
class="ml-auto"
|
||||
@confirmed="resetAttachment('ui.icon-logo')"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<c-uploader-with-preview
|
||||
:value="uploadedFile('ui.icon-logo')"
|
||||
:endpoint="'/settings/ui.icon-logo'"
|
||||
:disabled="!canManage"
|
||||
:labels="$t('iconLogo.uploader', { returnObjects: true })"
|
||||
@upload="onUpload($event)"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-form-group
|
||||
@ -121,6 +180,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CUploaderWithPreview from 'corteza-webapp-admin/src/components//CUploaderWithPreview'
|
||||
import { components } from '@cortezaproject/corteza-vue'
|
||||
const { CInputColorPicker, CAceEditor } = components
|
||||
|
||||
@ -133,6 +193,7 @@ export default {
|
||||
},
|
||||
|
||||
components: {
|
||||
CUploaderWithPreview,
|
||||
CInputColorPicker,
|
||||
CAceEditor,
|
||||
},
|
||||
@ -307,6 +368,34 @@ export default {
|
||||
this.$set(theme.variables, key, theme.id === 'light' ? this.lightModeVariables[key] : this.darkModeVariables[key])
|
||||
},
|
||||
|
||||
onUpload ({ name, value }) {
|
||||
this.$set(this.settings, name, value)
|
||||
},
|
||||
|
||||
resetAttachment (name) {
|
||||
this.$SystemAPI.settingsUpdate({ values: [{ name, value: undefined }], upload: {} })
|
||||
.then(() => {
|
||||
this.$set(this.settings, name, undefined)
|
||||
})
|
||||
},
|
||||
|
||||
uploadedFile (name) {
|
||||
const localAttachment = /^attachment:(\d+)/
|
||||
|
||||
switch (true) {
|
||||
case this.settings[name] && localAttachment.test(this.settings[name]):
|
||||
const [, attachmentID] = localAttachment.exec(this.settings[name])
|
||||
|
||||
return this.$SystemAPI.baseURL +
|
||||
this.$SystemAPI.attachmentOriginalEndpoint({
|
||||
attachmentID,
|
||||
kind: 'settings',
|
||||
name,
|
||||
})
|
||||
}
|
||||
|
||||
return undefined
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,119 +0,0 @@
|
||||
<template>
|
||||
<b-row>
|
||||
<b-col
|
||||
cols="12"
|
||||
lg="6"
|
||||
>
|
||||
<b-card
|
||||
header-class="d-flex align-items-center justify-content-between pr-2 border-bottom"
|
||||
class="shadow-sm mb-3"
|
||||
>
|
||||
<template #header>
|
||||
<h4 class="mb-0">
|
||||
{{ $t('mainLogo.title') }}
|
||||
</h4>
|
||||
|
||||
<c-input-confirm
|
||||
v-if="uploadedFile('ui.main-logo')"
|
||||
show-icon
|
||||
@confirmed="resetAttachment('ui.main-logo')"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<c-uploader-with-preview
|
||||
:value="uploadedFile('ui.main-logo')"
|
||||
:endpoint="'/settings/ui.main-logo'"
|
||||
:disabled="!canManage"
|
||||
:labels="$t('mainLogo.uploader', { returnObjects: true })"
|
||||
@upload="onUpload($event)"
|
||||
/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
cols="12"
|
||||
lg="6"
|
||||
>
|
||||
<b-card
|
||||
header-class="d-flex align-items-center justify-content-between pr-2 border-bottom"
|
||||
class="shadow-sm mb-3"
|
||||
>
|
||||
<template #header>
|
||||
<h4 class="mb-0">
|
||||
{{ $t('iconLogo.title') }}
|
||||
</h4>
|
||||
|
||||
<c-input-confirm
|
||||
v-if="uploadedFile('ui.icon-logo')"
|
||||
show-icon
|
||||
@confirmed="resetAttachment('ui.icon-logo')"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<c-uploader-with-preview
|
||||
:value="uploadedFile('ui.icon-logo')"
|
||||
:endpoint="'/settings/ui.icon-logo'"
|
||||
:disabled="!canManage"
|
||||
:labels="$t('iconLogo.uploader', { returnObjects: true })"
|
||||
@upload="onUpload($event)"
|
||||
@clear="resetAttachment('ui.icon-logo')"
|
||||
/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CUploaderWithPreview from 'corteza-webapp-admin/src/components//CUploaderWithPreview'
|
||||
|
||||
export default {
|
||||
name: 'CUILogoEditor',
|
||||
|
||||
components: {
|
||||
CUploaderWithPreview,
|
||||
},
|
||||
|
||||
props: {
|
||||
settings: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
|
||||
canManage: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
onUpload ({ name, value }) {
|
||||
this.$set(this.settings, name, value)
|
||||
},
|
||||
|
||||
resetAttachment (name) {
|
||||
this.$SystemAPI.settingsUpdate({ values: [{ name, value: undefined }], upload: {} })
|
||||
.then(() => {
|
||||
this.$set(this.settings, name, undefined)
|
||||
})
|
||||
},
|
||||
|
||||
uploadedFile (name) {
|
||||
const localAttachment = /^attachment:(\d+)/
|
||||
|
||||
switch (true) {
|
||||
case this.settings[name] && localAttachment.test(this.settings[name]):
|
||||
const [, attachmentID] = localAttachment.exec(this.settings[name])
|
||||
|
||||
return this.$SystemAPI.baseURL +
|
||||
this.$SystemAPI.attachmentOriginalEndpoint({
|
||||
attachmentID,
|
||||
kind: 'settings',
|
||||
name,
|
||||
})
|
||||
}
|
||||
|
||||
return undefined
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -6,12 +6,6 @@
|
||||
:title="$t('title')"
|
||||
/>
|
||||
|
||||
<c-ui-logo-editor
|
||||
v-if="settings"
|
||||
:settings="settings"
|
||||
:can-manage="canManage"
|
||||
/>
|
||||
|
||||
<c-ui-branding-editor
|
||||
v-if="settings"
|
||||
:settings="settings"
|
||||
@ -35,7 +29,6 @@
|
||||
|
||||
<script>
|
||||
import editorHelpers from 'corteza-webapp-admin/src/mixins/editorHelpers'
|
||||
import CUILogoEditor from 'corteza-webapp-admin/src/components/Settings/UI/CUILogoEditor'
|
||||
import CUIBrandingEditor from '../../components/Settings/UI/CUIBrandingEditor.vue'
|
||||
import CUITopbarSettings from 'corteza-webapp-admin/src/components/Settings/UI/CUITopbarSettings'
|
||||
import { mapGetters } from 'vuex'
|
||||
@ -49,7 +42,6 @@ export default {
|
||||
},
|
||||
|
||||
components: {
|
||||
'c-ui-logo-editor': CUILogoEditor,
|
||||
'c-ui-branding-editor': CUIBrandingEditor,
|
||||
'c-ui-topbar-settings': CUITopbarSettings,
|
||||
},
|
||||
|
||||
@ -1,26 +1,5 @@
|
||||
editor:
|
||||
title: 'User Interface Settings'
|
||||
|
||||
mainLogo:
|
||||
title: 'Main logo'
|
||||
|
||||
uploader:
|
||||
instructions: 'Click or drop main logo here to upload'
|
||||
uploading: 'Uploading main logo'
|
||||
|
||||
iconLogo:
|
||||
title: 'Icon logo'
|
||||
|
||||
uploader:
|
||||
instructions: 'Click or drop icon logo image here to upload'
|
||||
uploading: 'Uploading icon logo'
|
||||
|
||||
favicon:
|
||||
title: 'Favicon'
|
||||
|
||||
uploader:
|
||||
instructions: 'Click or drop favicon file here to upload'
|
||||
uploading: 'Uploading favicon'
|
||||
title: User Interface Settings
|
||||
|
||||
corteza-studio:
|
||||
title: Theming
|
||||
@ -28,6 +7,16 @@ editor:
|
||||
sassNotInstalled: No dart-sass binaries were detected. For guidance on how to set it up, refer to
|
||||
installSassDocs: docs here
|
||||
custom-css: Custom CSS
|
||||
mainLogo:
|
||||
title: Main logo
|
||||
uploader:
|
||||
instructions: Click or drop main logo here to upload
|
||||
uploading: Uploading main logo
|
||||
iconLogo:
|
||||
title: Icon logo
|
||||
uploader:
|
||||
instructions: Click or drop icon logo image here to upload
|
||||
uploading: Uploading icon logo
|
||||
label:
|
||||
default: Default
|
||||
tabs:
|
||||
@ -51,7 +40,6 @@ editor:
|
||||
|
||||
topbar:
|
||||
title: Topbar
|
||||
|
||||
general: General
|
||||
|
||||
app-selector:
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user