diff --git a/resources/assets/stylesheets/scss/courseware/toolbar.scss b/resources/assets/stylesheets/scss/courseware/toolbar.scss
index bf52e79a05854dbe906b2e612b2ed05f977aa46b..fdabbf218027ec3dceed6181d3eaa769c9dbfbec 100644
--- a/resources/assets/stylesheets/scss/courseware/toolbar.scss
+++ b/resources/assets/stylesheets/scss/courseware/toolbar.scss
@@ -1,10 +1,3 @@
-$toolbar-icons: (
- toggle-out: arr_2right,
- toggle-in: arr_2left,
- add: add,
- clipboard: clipboard
-);
-
.cw-toolbar {
z-index: 30;
display: flex;
@@ -104,6 +97,10 @@ $toolbar-icons: (
}
}
+ .cw-toolbar-folded-wrapper {
+ display: flex;
+ flex-direction: column;
+ }
.cw-toolbar-button-wrapper {
position: sticky;
top: 0;
@@ -125,21 +122,8 @@ $toolbar-icons: (
cursor: pointer;
border-bottom: solid 2px transparent;
- @each $type, $icon in $toolbar-icons {
- &.cw-toolbar-button-#{$type} {
- @include background-icon(#{$icon}, clickable, 24);
- }
- }
&.cw-toolbar-button-toggle {
- right: 0;
- width: 42px;
-
- &.cw-toolbar-button-toggle-out {
- position: absolute;
- }
- &.cw-toolbar-button-toggle-in {
- position: relative;
- }
+ text-align: end;
}
&.active {
@@ -161,7 +145,7 @@ $toolbar-icons: (
width: 128px;
padding: 2px 16px 0 16px;
&.cw-toolbar-button-toggle {
- width: 42px;
+ text-align: end;
}
}
}
diff --git a/resources/vue/components/courseware/structural-element/CoursewareStructuralElement.vue b/resources/vue/components/courseware/structural-element/CoursewareStructuralElement.vue
index 6ad1ec34b607e87cc412eb06aff12505b7114d8c..b5e063b116af388099a74a67feb3686a12a5e8f9 100644
--- a/resources/vue/components/courseware/structural-element/CoursewareStructuralElement.vue
+++ b/resources/vue/components/courseware/structural-element/CoursewareStructuralElement.vue
@@ -143,7 +143,7 @@
<courseware-root-content v-if="showRootLayout" :structuralElement="currentElement" :canEdit="canEdit" />
<div
- v-if="canVisit && (!canEdit || !toolbarActive ) && !isLink && !hideRootContent"
+ v-if="canVisit && (!canEdit || hideEditLayout ) && !isLink && !hideRootContent"
class="cw-container-wrapper"
:class="{
'cw-container-wrapper-consume': consumeMode,
@@ -154,7 +154,7 @@
:key="container.id"
:is="containerComponent(container)"
:container="container"
- :canEdit="canEdit && toolbarActive"
+ :canEdit="canEdit && !hideEditLayout"
:canAddElements="canAddElements"
:isTeacher="userIsTeacher"
class="cw-container-item"
@@ -185,7 +185,7 @@
class="cw-container-item"
/>
</div>
- <div v-if="canVisit && canEdit && toolbarActive && !isLink && !hideRootContent" class="cw-container-wrapper cw-container-wrapper-edit">
+ <div v-if="canVisit && canEdit && !hideEditLayout && !isLink && !hideRootContent" class="cw-container-wrapper cw-container-wrapper-edit">
<template v-if="!processing">
<span aria-live="assertive" class="assistive-text">{{ assistiveLive }}</span>
<span id="operation" class="assistive-text">
@@ -841,7 +841,7 @@ export default {
childrenById: 'courseware-structure/children',
rootLayout: 'rootLayout',
- toolbarActive: 'toolbarActive',
+ hideEditLayout: 'hideEditLayout',
isFeedbackActivated: 'isFeedbackActivated',
canCreateFeedbackElement: 'canCreateFeedbackElement',
getFeedbackElementById: 'feedback-elements/byId',
diff --git a/resources/vue/components/courseware/toolbar/CoursewareToolbar.vue b/resources/vue/components/courseware/toolbar/CoursewareToolbar.vue
index 7a49363f33ddba2f5570a34b3bf937cfafd6eb95..d31e963d1fc6c3bf9bcdffd85fff9f161bc389a0 100644
--- a/resources/vue/components/courseware/toolbar/CoursewareToolbar.vue
+++ b/resources/vue/components/courseware/toolbar/CoursewareToolbar.vue
@@ -1,11 +1,11 @@
<template>
<div class="cw-toolbar-wrapper">
<div id="cw-toolbar" class="cw-toolbar" :style="toolbarStyle">
- <div v-if="showTools" class="cw-toolbar-tools" :class="{ unfold: unfold, hd: isHd, wqhd: isWqhd}">
+ <div v-if="showTools" class="cw-toolbar-tools" :class="{ unfold: unfold, hd: isHd, wqhd: isWqhd }">
<div class="cw-toolbar-button-wrapper">
<button
class="cw-toolbar-button"
- :class="{active: activeTool === 'blockAdder'}"
+ :class="{ active: activeTool === 'blockAdder' }"
:title="$gettext('Blöcke hinzufügen')"
@click="activateTool('blockAdder')"
>
@@ -13,7 +13,7 @@
</button>
<button
class="cw-toolbar-button"
- :class="{active: activeTool === 'containerAdder'}"
+ :class="{ active: activeTool === 'containerAdder' }"
:title="$gettext('Abschnitte hinzufügen')"
@click="activateTool('containerAdder')"
>
@@ -21,28 +21,44 @@
</button>
<button
class="cw-toolbar-button"
- :class="{active: activeTool === 'clipboard'}"
+ :class="{ active: activeTool === 'clipboard' }"
:title="$gettext('Block Merkliste')"
@click="activateTool('clipboard')"
>
{{ $gettext('Merkliste') }}
</button>
<button
- class="cw-toolbar-button cw-toolbar-button-toggle cw-toolbar-button-toggle-out"
+ class="cw-toolbar-button cw-toolbar-button-toggle"
:title="$gettext('Werkzeugleiste einklappen')"
@click="toggleToolbarActive"
- ></button>
+ >
+ <studip-icon shape="arr_2right" :size="24" />
+ </button>
</div>
<courseware-toolbar-blocks v-if="activeTool === 'blockAdder'" />
<courseware-toolbar-containers v-if="activeTool === 'containerAdder'" />
<courseware-toolbar-clipboard v-if="activeTool === 'clipboard'" />
</div>
- <button
- v-else
- class="cw-toolbar-button cw-toolbar-button-toggle cw-toolbar-button-toggle-in"
- :title="$gettext('Werkzeugleiste ausklappen')"
- @click="toggleToolbarActive"
- ></button>
+ <div v-else class="cw-toolbar-folded-wrapper">
+ <button
+ class="cw-toolbar-button"
+ :title="$gettext('Werkzeugleiste ausklappen')"
+ @click="toggleToolbarActive"
+ >
+ <studip-icon shape="arr_2left" :size="24" />
+ </button>
+ <button
+ class="cw-toolbar-button"
+ :title="
+ hideEditLayout
+ ? $gettext('Bearbeitungselemente anzeigen')
+ : $gettext('Bearbeitungselemente ausblenden')
+ "
+ @click="toggleHideEditLayout"
+ >
+ <studip-icon :shape="hideEditLayout ? 'visibility-checked' : 'visibility-invisible'" :size="24" />
+ </button>
+ </div>
<div class="cw-toolbar-spacer-right"></div>
</div>
</div>
@@ -61,7 +77,7 @@ export default {
components: {
CoursewareToolbarBlocks,
CoursewareToolbarContainers,
- CoursewareToolbarClipboard
+ CoursewareToolbarClipboard,
},
data() {
return {
@@ -71,7 +87,7 @@ export default {
activeTool: 'blockAdder',
windowWidth: window.outerWidth,
- windowInnerHeight: window.innerHeight
+ windowInnerHeight: window.innerHeight,
};
},
computed: {
@@ -79,10 +95,15 @@ export default {
relatedContainers: 'courseware-containers/related',
structuralElementById: 'courseware-structural-elements/byId',
toolbarActive: 'toolbarActive',
+ hideEditLayout: 'hideEditLayout',
}),
toolbarStyle() {
const scrollTopStyles = window.getComputedStyle(document.getElementById('scroll-to-top'));
- const scrollTopHeight = parseInt(scrollTopStyles['height'], 10) + parseInt(scrollTopStyles['padding-top'], 10) + parseInt(scrollTopStyles['padding-bottom'], 10) + parseInt(scrollTopStyles['margin-bottom'], 10);
+ const scrollTopHeight =
+ parseInt(scrollTopStyles['height'], 10) +
+ parseInt(scrollTopStyles['padding-top'], 10) +
+ parseInt(scrollTopStyles['padding-bottom'], 10) +
+ parseInt(scrollTopStyles['margin-bottom'], 10);
let height = parseInt(
Math.min(this.windowInnerHeight * 0.9, this.windowInnerHeight - this.toolbarTop - scrollTopHeight)
);
@@ -95,8 +116,8 @@ export default {
},
containers() {
return this.relatedContainers({
- parent: this.structuralElementById({id: this.$route.params.id}),
- relationship: 'containers'
+ parent: this.structuralElementById({ id: this.$route.params.id }),
+ relationship: 'containers',
});
},
toolbarHeader() {
@@ -120,6 +141,7 @@ export default {
methods: {
...mapActions({
toggleToolbarActive: 'toggleToolbarActive',
+ toggleHideEditLayout: 'toggleHideEditLayout',
}),
activateTool(tool) {
this.activeTool = tool;
@@ -135,18 +157,17 @@ export default {
const ribbon = document.getElementById('cw-ribbon') ?? document.getElementById('contentbar');
if (ribbon) {
const contentbarRect = ribbon.getBoundingClientRect();
- if (ribbon.classList.contains("cw-ribbon-sticky")) {
+ if (ribbon.classList.contains('cw-ribbon-sticky')) {
this.toolbarTop = contentbarRect.bottom + 16;
} else {
this.toolbarTop = contentbarRect.bottom + 15;
}
}
-
},
onResize() {
this.windowWidth = window.outerWidth;
this.windowInnerHeight = window.innerHeight;
- }
+ },
},
mounted() {
this.updateToolbarTop();
@@ -156,9 +177,9 @@ export default {
});
this.resetAdderStorage();
},
- beforeDestroy() {
+ beforeDestroy() {
window.removeEventListener('scroll', this.updateToolbarTop);
- window.removeEventListener('resize', this.onResize);
+ window.removeEventListener('resize', this.onResize);
},
watch: {
diff --git a/resources/vue/store/courseware/courseware.module.js b/resources/vue/store/courseware/courseware.module.js
index 056802f7b8e9e7876c55a9adae0612b7ffc51450..c44bba17ce5f467232a169a790bcb885cccadee4 100644
--- a/resources/vue/store/courseware/courseware.module.js
+++ b/resources/vue/store/courseware/courseware.module.js
@@ -67,6 +67,7 @@ const getDefaultState = () => {
progresses: null,
toolbarActive: true,
+ hideEditLayout: false,
feedbackSettings: null,
processing: false,
};
@@ -302,6 +303,9 @@ const getters = {
toolbarActive(state) {
return state.toolbarActive;
},
+ hideEditLayout(state) {
+ return state.hideEditLayout;
+ },
feedbackSettings(state) {
return state.feedbackSettings;
},
@@ -1544,8 +1548,14 @@ export const actions = {
},
toggleToolbarActive({ commit, rootGetters }) {
+ if (!rootGetters['toolbarActive']) {
+ commit('setHideEditLayout', false);
+ }
commit('setToolbarActive', !rootGetters['toolbarActive']);
},
+ toggleHideEditLayout({ commit, rootGetters}) {
+ commit('setHideEditLayout', !rootGetters['hideEditLayout']);
+ },
setFeedbackSettings(context, feedbackSettings) {
context.commit('setFeedbackSettings', feedbackSettings);
},
@@ -1754,6 +1764,9 @@ export const mutations = {
setToolbarActive(state, active) {
state.toolbarActive = active;
},
+ setHideEditLayout(state, hide) {
+ state.hideEditLayout = hide;
+ },
setFeedbackSettings(state, feedbackSettings) {
state.feedbackSettings = feedbackSettings;
},