From 9f4aa63a5e914612bc9c07d56e8a4edaced5edc8 Mon Sep 17 00:00:00 2001 From: Ron Lucke Date: Thu, 22 Jun 2023 08:41:22 +0000 Subject: =?UTF-8?q?Courseware=20-=20=C3=84nderung=20des=20Abschnittstyps?= =?UTF-8?q?=20erm=C3=B6glichen?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Closes #2019 Merge request studip/studip!1466 --- .../JsonApi/Routes/Courseware/ContainersUpdate.php | 6 ++ public/assets/images/icons/blue/column-full.svg | 1 + .../images/icons/blue/column-half-centered.svg | 1 + public/assets/images/icons/blue/column-half.svg | 1 + public/assets/images/icons/white/column-full.svg | 1 + .../images/icons/white/column-half-centered.svg | 1 + public/assets/images/icons/white/column-half.svg | 1 + resources/assets/stylesheets/scss/courseware.scss | 119 ++++++++++++++++++++ .../courseware/CoursewareContainerActions.vue | 7 +- .../courseware/CoursewareDefaultContainer.vue | 120 ++++++++++++++++++++- .../courseware/CoursewareToolsBlockadder.vue | 61 +++++++---- 11 files changed, 294 insertions(+), 25 deletions(-) create mode 100644 public/assets/images/icons/blue/column-full.svg create mode 100644 public/assets/images/icons/blue/column-half-centered.svg create mode 100644 public/assets/images/icons/blue/column-half.svg create mode 100644 public/assets/images/icons/white/column-full.svg create mode 100644 public/assets/images/icons/white/column-half-centered.svg create mode 100644 public/assets/images/icons/white/column-half.svg diff --git a/lib/classes/JsonApi/Routes/Courseware/ContainersUpdate.php b/lib/classes/JsonApi/Routes/Courseware/ContainersUpdate.php index 219395d..7f2467f 100644 --- a/lib/classes/JsonApi/Routes/Courseware/ContainersUpdate.php +++ b/lib/classes/JsonApi/Routes/Courseware/ContainersUpdate.php @@ -73,6 +73,12 @@ class ContainersUpdate extends JsonApiController 'data.relationships.structural-element.data.id' ); } + if (self::arrayHas($json, 'data.attributes.container-type')) { + $resource->container_type = self::arrayGet( + $json, + 'data.attributes.container-type' + ); + } $resource->position = $json['data']['attributes']['position']; diff --git a/public/assets/images/icons/blue/column-full.svg b/public/assets/images/icons/blue/column-full.svg new file mode 100644 index 0000000..41898e9 --- /dev/null +++ b/public/assets/images/icons/blue/column-full.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/images/icons/blue/column-half-centered.svg b/public/assets/images/icons/blue/column-half-centered.svg new file mode 100644 index 0000000..0793691 --- /dev/null +++ b/public/assets/images/icons/blue/column-half-centered.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/images/icons/blue/column-half.svg b/public/assets/images/icons/blue/column-half.svg new file mode 100644 index 0000000..f941d1b --- /dev/null +++ b/public/assets/images/icons/blue/column-half.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/images/icons/white/column-full.svg b/public/assets/images/icons/white/column-full.svg new file mode 100644 index 0000000..8d75738 --- /dev/null +++ b/public/assets/images/icons/white/column-full.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/images/icons/white/column-half-centered.svg b/public/assets/images/icons/white/column-half-centered.svg new file mode 100644 index 0000000..424d1b9 --- /dev/null +++ b/public/assets/images/icons/white/column-half-centered.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/images/icons/white/column-half.svg b/public/assets/images/icons/white/column-half.svg new file mode 100644 index 0000000..9ad612b --- /dev/null +++ b/public/assets/images/icons/white/column-half.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/resources/assets/stylesheets/scss/courseware.scss b/resources/assets/stylesheets/scss/courseware.scss index 77e8491..eb3a9ea 100644 --- a/resources/assets/stylesheets/scss/courseware.scss +++ b/resources/assets/stylesheets/scss/courseware.scss @@ -2006,7 +2006,54 @@ b l o c k a d d e r } } +.cw-container-style-selector { + display: flex; + margin-bottom: 8px; + + label { + border: solid thin var(--content-color-40); + padding: calc(0.5em + 32px) 1em 0.5em 1em; + color: var(--base-color); + text-align: center; + width: 33%; + background-position: center 0.5em; + background-repeat: no-repeat; + cursor: pointer; + + &.full { + @include background-icon(column-full, clickable, 32); + } + &.half { + @include background-icon(column-half, clickable, 32); + } + &.half-center { + @include background-icon(column-half-centered, clickable, 32); + } + &:hover { + color: var(--active-color); + } + &:not(:first-child) { + border-left: solid thin transparent; + } + &.cw-container-style-selector-active { + background-color: var(--content-color-20); + border: solid thin var(--base-color); + } + } + input[type=radio] { + position: absolute; + opacity: 0; + width: 0; + + &:focus + label { + outline-color: Highlight; + outline-color: -webkit-focus-ring-color; + outline-style: auto; + outline-width: 1px; + } + } +} /* * * * * * * * * * * * * b l o c k a d d e r e n d @@ -5577,3 +5624,75 @@ s h e l f i t e m s /* * * * * * * * * * * * * * * * * * s h e l f i t e m s e n d * * * * * * * * * * * * * * * * * */ + +/* * * * * * * * * +r a d i o s e t +* * * * * * * * */ + +.cw-radioset { + display: flex; + flex-direction: row; + justify-content: center; + margin-bottom: 1em; + .cw-radioset-box { + width: 128px; + height: 128px; + text-align: center; + margin-right: 16px; + border: solid thin var(--content-color-40); + &.selected { + border-color: var(--base-color); + background-color: var(--content-color-20); + } + &:last-child { + margin-right: 0; + } + label { + height: 100%; + width: 100%; + margin: 0; + cursor: pointer; + .label-icon { + background-position: center 8px; + background-repeat: no-repeat; + height: 64px; + padding: 8px; + &.accordion { + @include background-icon(block-accordion, clickable, 64); + } + &.list { + @include background-icon(view-list, clickable, 64); + } + &.tabs { + @include background-icon(block-tabs, clickable, 64); + } + &.full { + @include background-icon(column-full, clickable, 64); + } + &.half { + @include background-icon(column-half, clickable, 64); + } + &.half-center { + @include background-icon(column-half-centered, clickable, 64); + } + } + + } + input[type=radio] { + position: absolute; + opacity: 0; + width: 0; + + &:focus + label { + outline-color: Highlight; + outline-color: -webkit-focus-ring-color; + outline-style: auto; + outline-width: 1px; + } + } + } +} + +/* * * * * * * * * * * * +r a d i o s e t e n d +* * * * * * * * * * * */ diff --git a/resources/vue/components/courseware/CoursewareContainerActions.vue b/resources/vue/components/courseware/CoursewareContainerActions.vue index 4795984..87c0e12 100644 --- a/resources/vue/components/courseware/CoursewareContainerActions.vue +++ b/resources/vue/components/courseware/CoursewareContainerActions.vue @@ -4,6 +4,7 @@ :items="menuItems" :context="container.attributes.title" @editContainer="editContainer" + @changeContainer="changeContainer" @deleteContainer="deleteContainer" @removeLock="removeLock" /> @@ -41,7 +42,8 @@ export default { if (this.container.attributes["container-type"] !== 'list') { menuItems.push({ id: 1, label: this.$gettext('Abschnitt bearbeiten'), icon: 'edit', emit: 'editContainer' }); } - menuItems.push({ id: 2, label: this.$gettext('Abschnitt löschen'), icon: 'trash', emit: 'deleteContainer' }); + menuItems.push({ id: 2, label: this.$gettext('Abschnitt verändern'), icon: 'settings', emit: 'changeContainer' }); + menuItems.push({ id: 3, label: this.$gettext('Abschnitt löschen'), icon: 'trash', emit: 'deleteContainer' }); } if (this.blocked && this.blockedByAnotherUser && this.userIsTeacher) { @@ -67,6 +69,9 @@ export default { editContainer() { this.$emit('editContainer'); }, + changeContainer() { + this.$emit('changeContainer'); + }, deleteContainer() { this.$emit('deleteContainer'); }, diff --git a/resources/vue/components/courseware/CoursewareDefaultContainer.vue b/resources/vue/components/courseware/CoursewareDefaultContainer.vue index e1fa87b..a3f99d0 100644 --- a/resources/vue/components/courseware/CoursewareDefaultContainer.vue +++ b/resources/vue/components/courseware/CoursewareDefaultContainer.vue @@ -17,6 +17,7 @@ :canEdit="canEdit" :container="container" @editContainer="displayEditDialog" + @changeContainer="displayChangeDialog" @deleteContainer="displayDeleteDialog" @removeLock="displayRemoveLockDialog" /> @@ -48,6 +49,60 @@ + + + + + - - - +
+

{{ $gettext('Abschnitt-Stil') }}

+ +
+ @@ -90,7 +106,6 @@