diff --git a/resources/assets/stylesheets/scss/courseware.scss b/resources/assets/stylesheets/scss/courseware.scss index 0c00869432982b3af05c2dbc2d44e3d0d8b59d3a..08016e8cb038589fd9d5aed582ebb6b23228ec47 100755 --- a/resources/assets/stylesheets/scss/courseware.scss +++ b/resources/assets/stylesheets/scss/courseware.scss @@ -1637,6 +1637,12 @@ v i e w w i d g e t } } .cw-action-widget { + .cw-action-widget-show-toc { + @include background-icon(table-of-contents, clickable); + } + .cw-action-widget-show-consume-mode { + @include background-icon(fullscreen-on, clickable); + } .cw-action-widget-edit{ @include background-icon(edit, clickable); } diff --git a/resources/vue/components/courseware/CoursewareActionWidget.vue b/resources/vue/components/courseware/CoursewareActionWidget.vue index b0a284c6f2b2d8bc2dc33277196e785fdcc5342a..7d94fc3a61a2fb541941203772f3c53c115ed261 100644 --- a/resources/vue/components/courseware/CoursewareActionWidget.vue +++ b/resources/vue/components/courseware/CoursewareActionWidget.vue @@ -1,5 +1,11 @@ <template> <ul class="widget-list widget-links cw-action-widget" v-if="structuralElement"> + <li class="cw-action-widget-show-toc" @click="toggleTOC"> + {{ tocText }} + </li> + <li class="cw-action-widget-show-consume-mode" @click="showConsumeMode"> + <translate>Vollbild einschalten</translate> + </li> <li v-show="canEdit" class="cw-action-widget-edit" @click="editElement"> <translate>Seite bearbeiten</translate> </li> @@ -37,6 +43,8 @@ export default { oerEnabled: 'oerEnabled', oerTitle: 'oerTitle', userId: 'userId', + consumeMode: 'consumeMode', + showToolbar: 'showToolbar' }), isRoot() { if (!this.structuralElement) { @@ -66,6 +74,9 @@ export default { blockedByAnotherUser() { return this.blocked && this.userId !== this.blockerId; }, + tocText() { + return this.showToolbar ? this.$gettext('Inhaltsverzeichnis ausblenden') : this.$gettext('Inhaltsverzeichnis anzeigen'); + } }, methods: { ...mapActions({ @@ -78,6 +89,9 @@ export default { companionInfo: 'companionInfo', addBookmark: 'addBookmark', lockObject: 'lockObject', + setConsumeMode: 'coursewareConsumeMode', + setViewMode: 'coursewareViewMode', + setShowToolbar: 'coursewareShowToolbar' }), async editElement() { if (this.blockedByAnotherUser) { @@ -118,6 +132,13 @@ export default { oerElement() { this.showElementOerDialog(true); }, + toggleTOC() { + this.setShowToolbar(!this.showToolbar); + }, + showConsumeMode() { + this.setViewMode('read'); + this.setConsumeMode(true); + }, }, }; </script>