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

Add button for removal of chooser widget

This commit is contained in:
Ramon Wenger 2022-02-17 12:36:29 +01:00
parent 10dc8361ff
commit c6b1117778
9 changed files with 55 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/Modal.vue
View File

@ -30,7 +30,7 @@
</template>
<script>
const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/Cross');
const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon');
export default {
props: {

2
client/src/components/book-navigation/NavigationSidebar.vue
View File

@ -24,7 +24,7 @@
import sidebarMixin from '@/mixins/sidebar';
const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/Cross');
const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon');
export default {
mixins: [sidebarMixin],

22
client/src/components/content-block-form/ContentBlockForm.vue
View File

@ -63,7 +63,7 @@
:element="content"
class="content-block-form__segment"
@update="update(index, $event, outer)"
@remove="remove(outer, index)"
@remove="remove(outer, index, $event)"
@up="up(outer, index)"
@down="down(outer, index)"
@top="top(outer, index)"
@ -83,7 +83,7 @@
class="content-block-form__segment"
v-else
@update="update(outer, $event)"
@remove="remove(outer)"
@remove="remove(outer, undefined, $event)"
@up="up(outer)"
@down="down(outer)"
@top="top(outer)"
@ -220,14 +220,18 @@
];
}
},
remove(outer, inner) {
this.$modal.open('confirm')
.then(() => {
this.executeRemoval(outer, inner);
})
.catch(() => {
remove(outer, inner, askForConfirmation = true) {
if(askForConfirmation) {
this.$modal.open('confirm')
.then(() => {
this.executeRemoval(outer, inner);
})
.catch(() => {
});
});
} else {
this.executeRemoval(outer, inner);
}
},
shift(outer, inner, distance) {
if (inner === undefined) {

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

@ -6,6 +6,7 @@
v-bind="element"
v-if="isChooser"
@change-type="changeType"
@remove="$emit('remove', false)"
/>
<!-- Content Forms -->
<content-form-section
@ -159,9 +160,6 @@
},
});
},
debug(arg) {
console.log(arg);
},
changeUrl(value) {
this._updateProperty(value, 'url');
},

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

@ -1,14 +1,21 @@
<template>
<div class="content-block-element-chooser-widget__wrapper">
<button
class="content-block-element-chooser-widget__remove-button icon-button"
@click="remove"
>
<cross-icon class="icon-button__icon" />
</button>
<h3 class="content-block-element-chooser-widget__heading">
Neuer Inhalt
</h3>
<template
v-if="includeListOption"
>
<h3 class="content-block-element-chooser-widget__heading">
Neuer Inhalt
</h3>
<checkbox
class="content-block-element-chooser-widget__list-toggle"
:checked="convertToList"
data-cy="convert-to-list-checkbox"
label="Neues Aufzählungszeichen hinzufügen"
@input="convertToList=$event"
/>
@ -98,6 +105,7 @@
import formElementIcons from '@/components/ui/form-element-icons';
import TitleIcon from '@/components/icons/TitleIcon';
import CrossIcon from '@/components/icons/CrossIcon';
export default {
props: {
@ -105,30 +113,34 @@
index: {},
hideAssignment: {
type: Boolean,
default: false
default: false,
},
includeListOption: {
type: Boolean,
default: false
}
default: false,
},
},
components: {
CrossIcon,
TitleIcon,
Checkbox,
...formElementIcons
...formElementIcons,
},
data: () => ({
convertToList: false
convertToList: false,
}),
methods: {
changeType(type) {
this.$emit('change-type', {
type,
convertToList: this.convertToList
convertToList: this.convertToList,
});
},
remove() {
this.$emit('remove');
}
},
};
@ -148,10 +160,11 @@
grid-column-gap: 0px;
font-family: $sans-serif-font-family;
text-align: center;
//border: 2px solid $color-silver-dark;
//border-radius: 12px;
position: relative;
// grid position in wrapper element
grid-column: 1 / span 2;
/*IE10+*/
& > :nth-child(1) {
-ms-grid-column: 1;
@ -182,13 +195,25 @@
-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
}
&__wrapper {
display: grid;
grid-template-columns: 1fr 50px;
}
&__remove-button {
grid-column: 2;
}
&__heading {
@include heading-4;
margin-bottom: $medium-spacing;
grid-column: 1;
grid-row: 1;
}
&__list-toggle {
margin-bottom: $medium-spacing;
grid-column: 1;
}
&__link {

0
client/src/components/icons/Cross.vue → client/src/components/icons/CrossIcon.vue
View File

2
client/src/components/profile/ProfileSidebar.vue
View File

@ -84,7 +84,7 @@
import me from '@/mixins/me';
import LogoutWidget from '@/components/LogoutWidget';
import {MY_TEAM} from '@/router/me.names';
const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/Cross');
const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon');
export default {

2
client/src/layouts/FullScreenLayout.vue
View File

@ -15,7 +15,7 @@
</template>
<script>
const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/Cross');
const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon');
export default {
components: {

2
client/src/layouts/SimpleLayout.vue
View File

@ -20,7 +20,7 @@
<script>
import SimpleFooter from '@/layouts/SimpleFooter';
import enableFooter from '@/helpers/footer';
const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/Cross');
const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon');
export default {
components: {