From 6dbe8a1aa8e85e409955e3df366c7e86e3161876 Mon Sep 17 00:00:00 2001
From: Ron Lucke <lucke@elan-ev.de>
Date: Tue, 1 Oct 2024 14:11:29 +0000
Subject: [PATCH] =?UTF-8?q?Neues=20Layout=20f=C3=BCr=20den=20Merksatz=20Bl?=
=?UTF-8?q?ock?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Closes #4495
Merge request studip/studip!3446
---
.../scss/courseware/blocks/keypoint.scss | 186 +++++++++++-------
.../blocks/CoursewareKeyPointBlock.vue | 16 +-
.../vue/mixins/courseware/content-icons.js | 48 +++++
3 files changed, 178 insertions(+), 72 deletions(-)
diff --git a/resources/assets/stylesheets/scss/courseware/blocks/keypoint.scss b/resources/assets/stylesheets/scss/courseware/blocks/keypoint.scss
index 1cf7b867d12..a0e496be07f 100644
--- a/resources/assets/stylesheets/scss/courseware/blocks/keypoint.scss
+++ b/resources/assets/stylesheets/scss/courseware/blocks/keypoint.scss
@@ -2,99 +2,147 @@
@import '../variables.scss';
.cw-keypoint-content {
- display: flex;
- min-height: 52px;
- padding: 1.5em 2.5em 1.5em 2.5em;
- border-style: solid;
- border-width: 2px;
- align-items: center;
-}
+ position: relative;
+ min-height: 75px;
-.cw-keypoint-content > img {
- flex-shrink: 0;
+ .cw-keypoint-icon-wrapper {
+ position: absolute;
+ top: -16px;
+ left: 0;
+ height: 48px;
+ width: 48px;
+ background-color: var(--white);
+ border: solid 4px var(--black);
+ border-radius: 64px;
+ padding: 16px;
+ margin: 1px 0;
+ }
+
+ .cw-keypoint-sentence {
+ display: block;
+ background-color: var(--dark-gray-color-20);
+ margin: 16px 0 0 16px;
+ padding: 16px 16px 16px 96px;
+ width: calc(100% - 128px);
+ font-size: 20px;
+ }
}
.cw-keypoint-red {
- border-color: map-get($icon-colors, 'icon-red');
+ .cw-keypoint-icon-wrapper {
+ border-color: var(--red);
+ }
+ .cw-keypoint-icon {
+ filter: brightness(0) saturate(100%) invert(8%) sepia(95%) saturate(6904%) hue-rotate(1deg) brightness(95%) contrast(109%);
+ }
+ .cw-keypoint-sentence {
+ background-color: var(--red-20);
+ }
}
.cw-keypoint-blue {
- border-color: map-get($icon-colors, 'icon-blue');
+ .cw-keypoint-icon-wrapper {
+ border-color: var(--base-color);
+ }
+ .cw-keypoint-icon {
+ filter: brightness(0) saturate(100%) invert(26%) sepia(19%) saturate(1783%) hue-rotate(177deg) brightness(96%) contrast(93%);
+ }
+ .cw-keypoint-sentence {
+ background-color: var(--base-color-20);
+ }
}
.cw-keypoint-green {
- border-color: map-get($icon-colors, 'icon-green');
+ .cw-keypoint-icon-wrapper {
+ border-color: var(--dark-green);
+ }
+ .cw-keypoint-icon {
+ filter: brightness(0) saturate(100%) invert(27%) sepia(85%) saturate(1531%) hue-rotate(109deg) brightness(95%) contrast(101%);
+ }
+ .cw-keypoint-sentence {
+ background-color: var(--dark-green-20);
+ }
}
+.cw-keypoint-grey,
.cw-keypoint-gray {
- border-color: map-get($icon-colors, 'icon-gray');
+ .cw-keypoint-icon-wrapper {
+ border-color: var(--light-gray-color);
+ }
+ .cw-keypoint-icon {
+ filter: brightness(0) saturate(100%) invert(46%) sepia(1%) saturate(2621%) hue-rotate(169deg) brightness(87%) contrast(87%);
+ }
+ .cw-keypoint-sentence {
+ background-color: var(--light-gray-color-20);
+ }
}
.cw-keypoint-yellow {
- border-color: map-get($icon-colors, 'icon-yellow');
-}
-
-.cw-keypoint-sentence {
- display: inline;
- font-size: 1.25em;
- padding-left: 1.5em;
- margin-top: 10px;
-}
-
-.cw-keypoint-label-color {
- width: 32px !important;
- min-width: 32px !important;
- height: 32px;
- padding: 5px !important;
-
- > .cw-keypoint-input-color {
- visibility: hidden;
- position: absolute;
+ .cw-keypoint-icon-wrapper {
+ border-color: var(--yellow);
}
-
- > .cw-keypoint-input-color + div {
- cursor: pointer;
- border: 2px solid transparent;
- height: 32px;
- width: 32px;
+ .cw-keypoint-icon {
+ filter: brightness(0) saturate(100%) invert(94%) sepia(14%) saturate(7314%) hue-rotate(330deg) brightness(103%) contrast(101%);
}
-
- > .cw-keypoint-input-color:checked + div {
- /* (RADIO CHECKED) IMAGE STYLES */
- @include background-icon(accept, info_alt, 24);
- background-repeat: no-repeat;
- background-position: center;
+ .cw-keypoint-sentence {
+ background-color: var(--yellow-20);
}
}
-label[for='cw-keypoint-color'] {
- vertical-align: top;
-}
-
-.cw-keypoint-label-color {
- display: inline-block !important;
-}
-.cw-keypoint-icons {
- background-color: var(--white);
-}
-
-.cw-keypoint-bg-red {
- background-color: map-get($icon-colors, 'icon-red');
+.cw-keypoint-royal-purple {
+ .cw-keypoint-icon-wrapper {
+ border-color: var(--dark-violet);
+ }
+ .cw-keypoint-icon {
+ filter: brightness(0) saturate(100%) invert(35%) sepia(43%) saturate(658%) hue-rotate(234deg) brightness(100%) contrast(87%);
+ }
+ .cw-keypoint-sentence {
+ background-color: var(--dark-violet-20);
+ }
}
-
-.cw-keypoint-bg-blue {
- background-color: map-get($icon-colors, 'icon-blue');
+.cw-keypoint-apple-green {
+ .cw-keypoint-icon-wrapper {
+ border-color: var(--green-80);
+ }
+ .cw-keypoint-icon {
+ filter: brightness(0) saturate(100%) invert(74%) sepia(9%) saturate(1885%) hue-rotate(76deg) brightness(86%) contrast(88%);
+ }
+ .cw-keypoint-sentence {
+ background-color: var(--green-20);
+ }
}
-
-.cw-keypoint-bg-green {
- background-color: map-get($icon-colors, 'icon-green');
+.cw-keypoint-pumpkin {
+ .cw-keypoint-icon-wrapper {
+ border-color: var(--orange);
+ }
+ .cw-keypoint-icon {
+ filter: brightness(0) saturate(100%) invert(38%) sepia(86%) saturate(1993%) hue-rotate(13deg) brightness(104%) contrast(108%);
+ }
+ .cw-keypoint-sentence {
+ background-color: var(--orange-20);
+ }
}
-
-.cw-keypoint-bg-gray {
- background-color: map-get($icon-colors, 'icon-gray');
+.cw-keypoint-verdigris {
+ .cw-keypoint-icon-wrapper {
+ border-color: var(--petrol-80);
+ }
+ .cw-keypoint-icon {
+ filter: brightness(0) saturate(100%) invert(64%) sepia(11%) saturate(4959%) hue-rotate(131deg) brightness(103%) contrast(49%);
+ }
+ .cw-keypoint-sentence {
+ background-color: var(--petrol-20);
+ }
}
-.cw-keypoint-bg-yellow {
- background-color: map-get($icon-colors, 'icon-yellow');
-}
+.cw-keypoint-mulberry {
+ .cw-keypoint-icon-wrapper {
+ border-color: var(--violet-80);
+ }
+ .cw-keypoint-icon {
+ filter: brightness(0) saturate(100%) invert(49%) sepia(16%) saturate(1665%) hue-rotate(271deg) brightness(88%) contrast(95%);
+ }
+ .cw-keypoint-sentence {
+ background-color: var(--violet-20);
+ }
+}
\ No newline at end of file
diff --git a/resources/vue/components/courseware/blocks/CoursewareKeyPointBlock.vue b/resources/vue/components/courseware/blocks/CoursewareKeyPointBlock.vue
index e52b608a009..0931182927a 100644
--- a/resources/vue/components/courseware/blocks/CoursewareKeyPointBlock.vue
+++ b/resources/vue/components/courseware/blocks/CoursewareKeyPointBlock.vue
@@ -11,7 +11,9 @@
>
<template #content>
<div class="cw-keypoint-content" :class="['cw-keypoint-' + currentColor]">
- <studip-icon v-if="currentIcon" :size="48" :shape="currentIcon" :role="currentRole" />
+ <div class="cw-keypoint-icon-wrapper">
+ <StudipIcon v-if="currentIcon" :size="48" :shape="currentIcon" role="info" class="cw-keypoint-icon" />
+ </div>
<p class="cw-keypoint-sentence">{{ currentText }}</p>
</div>
</template>
@@ -112,9 +114,17 @@ export default {
return this.contentIcons;
},
colors() {
- return this.mixinColors.filter(
- (color) => color.icon && color.class !== 'white' && color.class !== 'studip-lightblue'
+ let colors = this.mixinColors.filter(
+ (color) => (color.icon && color.class !== 'white' && color.class !== 'studip-lightblue')
+ || color.class === 'royal-purple' || color.class === 'apple-green' || color.class === 'pumpkin' || color.class === 'verdigris' || color.class === 'mulberry'
);
+
+ return colors.map((color) => {
+ if (!color.icon) {
+ color.icon = color.class;
+ }
+ return color;
+ });
},
text() {
return this.block?.attributes?.payload?.text;
diff --git a/resources/vue/mixins/courseware/content-icons.js b/resources/vue/mixins/courseware/content-icons.js
index 4f86edfaaca..3bd5d052d31 100644
--- a/resources/vue/mixins/courseware/content-icons.js
+++ b/resources/vue/mixins/courseware/content-icons.js
@@ -3,6 +3,7 @@ const contentIconsMixin = {
contentIcons() {
return [
'accept',
+ 'accessibility',
'add',
'add-circle',
'admin',
@@ -10,11 +11,13 @@ const contentIconsMixin = {
'arr_1down',
'arr_1left',
'arr_1right',
+ 'arr_1sort',
'arr_1up',
'arr_2down',
'arr_2left',
'arr_2right',
'arr_2up',
+ 'assessment',
'audio',
'audio3',
'billboard',
@@ -24,18 +27,23 @@ const contentIconsMixin = {
'block-gallery',
'block-gallery2',
'block-imagemap',
+ 'blubber',
'brainstorm',
'campusnavi',
+ 'cc',
+ 'cellphone',
'chat2',
'code',
'community2',
'computer',
'consultation',
'content',
+ 'copy',
'courseware',
'crown',
'date-single',
'decline',
+ 'dialog-cards',
'decline-circle',
'doctoral_cap',
'download',
@@ -45,14 +53,32 @@ const contentIconsMixin = {
'exclaim-circle',
'export',
'favorite',
+ 'file2',
+ 'file-archive',
+ 'file-audio',
+ 'file-office',
+ 'file-pdf',
+ 'file-pic',
+ 'file-presentation',
+ 'file-spreadsheed',
+ 'file-text',
+ 'file-video',
+ 'files2',
'filter',
+ 'fishbowl',
+ 'folder-empty',
+ 'folder-full',
+ 'forum',
'globe',
'graph',
'group2',
'group3',
'group4',
+ 'guestbook',
+ 'hand',
'home',
'home2',
+ 'import',
'info',
'info-circle',
'install',
@@ -69,6 +95,7 @@ const contentIconsMixin = {
'literature',
'lock-locked',
'lock-unlocked',
+ 'mail',
'mail2',
'medal',
'metro',
@@ -86,16 +113,28 @@ const contentIconsMixin = {
'picture',
'place',
'plugin',
+ 'plugin2',
+ 'print',
+ 'progress',
'question',
'question-circle',
+ 'radar',
'ranking',
+ 'refresh',
'remove',
'remove-circle',
+ 'reply',
+ 'rescue',
'resources',
'roles',
+ 'rss',
'schedule2',
'search',
+ 'seminar',
'settings',
+ 'settings2',
+ 'share',
+ 'source',
'span-empty',
'span-1quarter',
'span-2quarter',
@@ -107,12 +146,21 @@ const contentIconsMixin = {
'star',
'star-empty',
'star-halffull',
+ 'stat',
+ 'studygroup',
+ 'tag',
'test',
'tools',
'topic',
'ufo',
+ 'unit-test',
+ 'upload',
+ 'vcard',
'video2',
'visibility-visible',
+ 'vote',
+ 'vote-stopped',
+ 'wiki',
'wizard',
];
},
--
GitLab