Skip to content
Snippets Groups Projects
Commit 68725581 authored by Thomas Hackl's avatar Thomas Hackl
Browse files

Resolve "statische Message Boxen neu gestalten" 

Closes #4504

Merge request studip/studip!3673
parent 64f6b010
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 41 additions and 35 deletions
lib/classes/MessageBox.php
+ 1
− 4
View file @ 68725581
......@@ -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++,
]);
......
resources/assets/stylesheets/mixins/colors.scss
+ 7
− 0
View file @ 68725581
......@@ -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%);
resources/assets/stylesheets/scss/messagebox.scss
+ 6
− 6
View file @ 68725581
/* --- 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 {
......
resources/assets/stylesheets/scss/system-notifications.scss
+ 19
− 19
View file @ 68725581
......@@ -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);
}
}
resources/assets/stylesheets/scss/variables.scss
+ 7
− 0
View file @ 68725581
......@@ -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;
......
resources/vue/components/SystemNotification.vue
+ 1
− 1
View file @ 68725581
......@@ -170,7 +170,7 @@ export default {
}
setTimeout(() => {
audio.play();
audio.play().catch(error => {});
}, timing);
}
},
......
templates/shared/message_box.php
+ 0
− 5
View file @ 68725581
......@@ -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 ?>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment