From 687255810bb918b82d3c048fc068d8972cfce5ac Mon Sep 17 00:00:00 2001
From: Thomas Hackl <hackl@data-quest.de>
Date: Fri, 22 Nov 2024 12:59:24 +0000
Subject: [PATCH] Resolve "statische Message Boxen neu gestalten"
Closes #4504
Merge request studip/studip!3673
---
lib/classes/MessageBox.php | 5 +--
.../assets/stylesheets/mixins/colors.scss | 7 ++++
.../assets/stylesheets/scss/messagebox.scss | 12 +++---
.../scss/system-notifications.scss | 38 +++++++++----------
.../assets/stylesheets/scss/variables.scss | 7 ++++
.../vue/components/SystemNotification.vue | 2 +-
templates/shared/message_box.php | 5 ---
7 files changed, 41 insertions(+), 35 deletions(-)
diff --git a/lib/classes/MessageBox.php b/lib/classes/MessageBox.php
index b2854d89b51..54a4a85e6e4 100644
--- a/lib/classes/MessageBox.php
+++ b/lib/classes/MessageBox.php
@@ -40,7 +40,6 @@ class MessageBox implements LayoutMessage, JsonSerializable
public $message;
public $details;
public $close_details;
- protected $hide_close = false;
public static $counter = 0;
/**
@@ -137,7 +136,6 @@ class MessageBox implements LayoutMessage, JsonSerializable
*/
public function hideClose($state = true)
{
- $this->hide_close = (bool) $state;
return $this;
}
@@ -147,7 +145,7 @@ class MessageBox implements LayoutMessage, JsonSerializable
*/
public function isCloseable(): bool
{
- return $this->hide_close;
+ return false;
}
/**
@@ -169,7 +167,6 @@ class MessageBox implements LayoutMessage, JsonSerializable
'message' => $this->message,
'details' => is_array($this->details) ? $this->details : [],
'close_details' => $this->close_details,
- 'hide_close' => $this->hide_close,
'label' => $label[$this->class],
'counter' => self::$counter++,
]);
diff --git a/resources/assets/stylesheets/mixins/colors.scss b/resources/assets/stylesheets/mixins/colors.scss
index c3faffae1bb..d0f54bb3223 100644
--- a/resources/assets/stylesheets/mixins/colors.scss
+++ b/resources/assets/stylesheets/mixins/colors.scss
@@ -215,7 +215,9 @@ $calendar-category-255-aux: $light-gray-color-20;
6.x C O L O R S
* * * * * * * * * * */
+$color--black: #000;
$color--blue-1: #28497c;
+$color--blue-2: #36598f;
$color--gray-1: #101010;
$color--gray-2: #3c454e;
$color--gray-3: #676767;
@@ -299,5 +301,10 @@ $color--shadow: $color--gray-4;
$color--focus: $color--gray-4;
$color--warning: $color--red-1;
+$color--warning-alternative: mix($color--warning, $color--white, 20%);
$color--attention: $color--yellow-1;
+$color--attention-alternative: mix($color--attention, $color--white, 20%);
$color--good: $color--green-1;
+$color--good-alternative: mix($color--good, $color--white, 20%);
+$color--info: $color--blue-2;
+$color--info-alternative: mix($color--info, $color--white, 20%);
diff --git a/resources/assets/stylesheets/scss/messagebox.scss b/resources/assets/stylesheets/scss/messagebox.scss
index 6f34ef8a344..dbd173e52f6 100644
--- a/resources/assets/stylesheets/scss/messagebox.scss
+++ b/resources/assets/stylesheets/scss/messagebox.scss
@@ -1,7 +1,7 @@
/* --- MessageBoxes --------------------------------------------------------- */
div.messagebox {
background: no-repeat 10px 10px;
- border: 2px solid;
+ border-left: 5px solid;
font-size: 12pt;
font-weight: bold;
margin: 0 0 5px 0;
@@ -64,11 +64,11 @@ div.messagebox_details {
}
}
-@include messagebox(info, var(--black), var(--white), var(--base-color));
-@include messagebox(success, var(--black), var(--white), var(--dark-green));
-@include messagebox(error, var(--black), var(--white), var(--red));
-@include messagebox(exception, var(--red), var(--red-20), var(--red));
-@include messagebox(warning, var(--black), var(--white), var(--yellow-60), advice);
+@include messagebox(info, var(--color--black), var(--color--info-alternative), var(--color--info));
+@include messagebox(success, var(--color--black), var(--color--good-alternative), var(--color--good));
+@include messagebox(error, var(--color--black), var(--color--warning-alternative), var(--color--warning));
+@include messagebox(exception, var(--color--black), var(--color--warning-alternative), var(--color--warning));
+@include messagebox(warning, var(--color--black), var(--color--attention-alternative), var(--color--attention), advice);
// Define modal messagebox
.modaloverlay {
diff --git a/resources/assets/stylesheets/scss/system-notifications.scss b/resources/assets/stylesheets/scss/system-notifications.scss
index 57c00a098d3..9e817c108e7 100644
--- a/resources/assets/stylesheets/scss/system-notifications.scss
+++ b/resources/assets/stylesheets/scss/system-notifications.scss
@@ -33,7 +33,7 @@
&.top-center {
left: calc(50% - 300px);
- top: 41px;
+ top: 40px;
.system-notification {
&.system-notification-slide-enter,
@@ -74,7 +74,7 @@
.system-notification {
background-color: var(--content-color-20);
- color: var(--white);
+ color: var(--color--white);
cursor: pointer;
display: flex;
margin-bottom: 6px;
@@ -142,12 +142,12 @@
}
a:not(.system-notification-message) {
- color: var(--white);
+ color: var(--color--white);
text-decoration-line: underline;
}
a.system-notification-message {
- color: var(--white);
+ color: var(--color--white);
text-decoration: unset;
}
@@ -160,55 +160,55 @@
}
.system-notification-exception {
- background-color: var(--red);
- color: var(--white);
+ background-color: var(--color--warning);
+ color: var(--color--white);
.system-notification-timeout {
- background-color: var(--red-40);
+ background-color: var(--color--warning-alternative);
}
}
.system-notification-error {
- background-color: var(--red);
- color: var(--white);
+ background-color: var(--color--warning);
+ color: var(--color--white);
.system-notification-timeout {
- background-color: var(--red-40);
+ background-color: var(--color--warning-alternative);
}
}
.system-notification-warning {
- background-color: var(--yellow);
- color: var(--black);
+ background-color: var(--color--attention);
+ color: var(--color--black);
.system-notification-timeout {
- background-color: var(--yellow-40);
+ background-color: var(--color--attention-alternative);
}
a:not(.system-notification-message) {
- color: var(--black);
+ color: var(--color--white);
text-decoration-line: underline;
}
a.system-notification-message {
- color: var(--white);
+ color: var(--color--white);
text-decoration: unset;
}
}
.system-notification-success {
- background-color: var(--green);
+ background-color: var(--color--good);
.system-notification-timeout {
- background-color: var(--green-40);
+ background-color: var(--color--good-alternative);
}
}
.system-notification-info {
- background-color: var(--dark-violet);
+ background-color: var(--color--info);
.system-notification-timeout {
- background-color: var(--dark-violet-40);
+ background-color: var(--color--info-alternative);
}
}
diff --git a/resources/assets/stylesheets/scss/variables.scss b/resources/assets/stylesheets/scss/variables.scss
index 6337c110ece..d1564fef5e9 100644
--- a/resources/assets/stylesheets/scss/variables.scss
+++ b/resources/assets/stylesheets/scss/variables.scss
@@ -196,7 +196,9 @@ $grid-gap: 0;
--transition-duration-slow: #{$transition-duration-slow};
--transition-duration-superslow: #{$transition-duration-superslow};
+ --color--black: #{$color--black};
--color--blue-1: #{$color--blue-1};
+ --color--blue-2: #{$color--blue-2};
--color--gray-1: #{$color--gray-1};
--color--gray-2: #{$color--gray-2};
--color--gray-3: #{$color--gray-3};
@@ -280,8 +282,13 @@ $grid-gap: 0;
--color--focus: #{$color--focus};
--color--warning: #{$color--warning};
+ --color--warning-alternative: #{$color--warning-alternative};
--color--attention: #{$color--attention};
+ --color--attention-alternative: #{$color--attention-alternative};
--color--good: #{$color--good};
+ --color--good-alternative: #{$color--good-alternative};
+ --color--info: #{$color--info};
+ --color--info-alternative: #{$color--info-alternative};
@media (prefers-reduced-motion) {
#{"--"}transition-duration: 0s;
diff --git a/resources/vue/components/SystemNotification.vue b/resources/vue/components/SystemNotification.vue
index 947b73feec7..82324a155d6 100644
--- a/resources/vue/components/SystemNotification.vue
+++ b/resources/vue/components/SystemNotification.vue
@@ -170,7 +170,7 @@ export default {
}
setTimeout(() => {
- audio.play();
+ audio.play().catch(error => {});
}, timing);
}
},
diff --git a/templates/shared/message_box.php b/templates/shared/message_box.php
index 447763d7d97..06dc7192f2d 100644
--- a/templates/shared/message_box.php
+++ b/templates/shared/message_box.php
@@ -5,11 +5,6 @@
<span><?= _('Detailanzeige umschalten') ?></span>
</a>
<? endif ?>
- <? if (!$hide_close): ?>
- <a class="close" role="button" href="#" title="<?= _('Nachrichtenbox schließen') ?>">
- <span><?= _('Nachrichtenbox schließen') ?></span>
- </a>
- <? endif; ?>
</div>
<div role="status" id="messagebox-<?= $counter ?>">
<?= $message ?>
--
GitLab