ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Add icons for content form sections, refactor components

This commit is contained in:
Ramon Wenger 2022-01-20 17:54:11 +01:00
parent 1a87dbb788
commit c6c56ac851
4 changed files with 47 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/components/content-block-form/ContentElement.vue
View File

@ -9,6 +9,7 @@
/>
<content-form-section
:title="title"
:icon="icon"
v-else
>
<div class="content-element__section">
@ -86,6 +87,9 @@
},
title() {
return this.type.title;
},
icon() {
return this.type.icon;
}
},

26
client/src/components/content-block-form/ContentFormSection.vue
View File

@ -1,19 +1,31 @@
<template>
<div class="content-form-section">
<h2 class="content-form-section__heading">
{{ title }}
<component
class="content-form-section__icon"
:is="icon"
/> <span class="content-form-section__title">{{ title }}</span>
</h2>
<slot />
</div>
</template>
<script>
import formElementIcons from '@/components/ui/form-element-icons';
export default {
props: {
title: {
type: String,
default: ''
},
icon: {
type: String,
default: ''
}
},
components: {
...formElementIcons
}
};
</script>
@ -28,7 +40,19 @@
margin-bottom: $medium-spacing;
&__heading {
display: flex;
align-items: center;
}
&__title {
@include heading-4;
margin-bottom: 0;
}
&__icon {
width: 28px;
height: 28px;
margin-right: $small-spacing;
}
}
</style>

15
client/src/components/content-forms/ContentBlockElementChooserWidget.vue
View File

@ -85,12 +85,8 @@
<script>
import Checkbox from '@/components/ui/Checkbox';
const LinkIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/LinkIcon');
const VideoIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/VideoIcon');
const ImageIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/ImageIcon');
const TextIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/TextIcon');
const SpeechBubbleIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/SpeechBubbleIcon');
const DocumentIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon');
import formElementIcons from '@/components/ui/form-element-icons';
export default {
props: {
@ -108,12 +104,7 @@
components: {
Checkbox,
LinkIcon,
VideoIcon,
ImageIcon,
TextIcon,
SpeechBubbleIcon,
DocumentIcon
...formElementIcons
},
data: () => ({

15
client/src/components/ui/form-element-icons.js Normal file
View File

@ -0,0 +1,15 @@
const LinkIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/LinkIcon');
const VideoIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/VideoIcon');
const ImageIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/ImageIcon');
const TextIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/TextIcon');
const SpeechBubbleIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/SpeechBubbleIcon');
const DocumentIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon');
export default {
LinkIcon,
VideoIcon,
ImageIcon,
TextIcon,
SpeechBubbleIcon,
DocumentIcon
};