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

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

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