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 !3673
parent 64f6b010
Branches
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 ...@@ -40,7 +40,6 @@ class MessageBox implements LayoutMessage, JsonSerializable
public $message; public $message;
public $details; public $details;
public $close_details; public $close_details;
protected $hide_close = false;
public static $counter = 0; public static $counter = 0;
/** /**
...@@ -137,7 +136,6 @@ class MessageBox implements LayoutMessage, JsonSerializable ...@@ -137,7 +136,6 @@ class MessageBox implements LayoutMessage, JsonSerializable
*/ */
public function hideClose($state = true) public function hideClose($state = true)
{ {
$this->hide_close = (bool) $state;
return $this; return $this;
} }
...@@ -147,7 +145,7 @@ class MessageBox implements LayoutMessage, JsonSerializable ...@@ -147,7 +145,7 @@ class MessageBox implements LayoutMessage, JsonSerializable
*/ */
public function isCloseable(): bool public function isCloseable(): bool
{ {
return $this->hide_close; return false;
} }
/** /**
...@@ -169,7 +167,6 @@ class MessageBox implements LayoutMessage, JsonSerializable ...@@ -169,7 +167,6 @@ class MessageBox implements LayoutMessage, JsonSerializable
'message' => $this->message, 'message' => $this->message,
'details' => is_array($this->details) ? $this->details : [], 'details' => is_array($this->details) ? $this->details : [],
'close_details' => $this->close_details, 'close_details' => $this->close_details,
'hide_close' => $this->hide_close,
'label' => $label[$this->class], 'label' => $label[$this->class],
'counter' => self::$counter++, '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; ...@@ -215,7 +215,9 @@ $calendar-category-255-aux: $light-gray-color-20;
6.x C O L O R S 6.x C O L O R S
* * * * * * * * * * */ * * * * * * * * * * */
$color--black: #000;
$color--blue-1: #28497c; $color--blue-1: #28497c;
$color--blue-2: #36598f;
$color--gray-1: #101010; $color--gray-1: #101010;
$color--gray-2: #3c454e; $color--gray-2: #3c454e;
$color--gray-3: #676767; $color--gray-3: #676767;
...@@ -299,5 +301,10 @@ $color--shadow: $color--gray-4; ...@@ -299,5 +301,10 @@ $color--shadow: $color--gray-4;
$color--focus: $color--gray-4; $color--focus: $color--gray-4;
$color--warning: $color--red-1; $color--warning: $color--red-1;
$color--warning-alternative: mix($color--warning, $color--white, 20%);
$color--attention: $color--yellow-1; $color--attention: $color--yellow-1;
$color--attention-alternative: mix($color--attention, $color--white, 20%);
$color--good: $color--green-1; $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 --------------------------------------------------------- */ /* --- MessageBoxes --------------------------------------------------------- */
div.messagebox { div.messagebox {
background: no-repeat 10px 10px; background: no-repeat 10px 10px;
border: 2px solid; border-left: 5px solid;
font-size: 12pt; font-size: 12pt;
font-weight: bold; font-weight: bold;
margin: 0 0 5px 0; margin: 0 0 5px 0;
...@@ -64,11 +64,11 @@ div.messagebox_details { ...@@ -64,11 +64,11 @@ div.messagebox_details {
} }
} }
@include messagebox(info, var(--black), var(--white), var(--base-color)); @include messagebox(info, var(--color--black), var(--color--info-alternative), var(--color--info));
@include messagebox(success, var(--black), var(--white), var(--dark-green)); @include messagebox(success, var(--color--black), var(--color--good-alternative), var(--color--good));
@include messagebox(error, var(--black), var(--white), var(--red)); @include messagebox(error, var(--color--black), var(--color--warning-alternative), var(--color--warning));
@include messagebox(exception, var(--red), var(--red-20), var(--red)); @include messagebox(exception, var(--color--black), var(--color--warning-alternative), var(--color--warning));
@include messagebox(warning, var(--black), var(--white), var(--yellow-60), advice); @include messagebox(warning, var(--color--black), var(--color--attention-alternative), var(--color--attention), advice);
// Define modal messagebox // Define modal messagebox
.modaloverlay { .modaloverlay {
......
resources/assets/stylesheets/scss/system-notifications.scss
+ 19
− 19
View file @ 68725581
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
&.top-center { &.top-center {
left: calc(50% - 300px); left: calc(50% - 300px);
top: 41px; top: 40px;
.system-notification { .system-notification {
&.system-notification-slide-enter, &.system-notification-slide-enter,
...@@ -74,7 +74,7 @@ ...@@ -74,7 +74,7 @@
.system-notification { .system-notification {
background-color: var(--content-color-20); background-color: var(--content-color-20);
color: var(--white); color: var(--color--white);
cursor: pointer; cursor: pointer;
display: flex; display: flex;
margin-bottom: 6px; margin-bottom: 6px;
...@@ -142,12 +142,12 @@ ...@@ -142,12 +142,12 @@
} }
a:not(.system-notification-message) { a:not(.system-notification-message) {
color: var(--white); color: var(--color--white);
text-decoration-line: underline; text-decoration-line: underline;
} }
a.system-notification-message { a.system-notification-message {
color: var(--white); color: var(--color--white);
text-decoration: unset; text-decoration: unset;
} }
...@@ -160,55 +160,55 @@ ...@@ -160,55 +160,55 @@
} }
.system-notification-exception { .system-notification-exception {
background-color: var(--red); background-color: var(--color--warning);
color: var(--white); color: var(--color--white);
.system-notification-timeout { .system-notification-timeout {
background-color: var(--red-40); background-color: var(--color--warning-alternative);
} }
} }
.system-notification-error { .system-notification-error {
background-color: var(--red); background-color: var(--color--warning);
color: var(--white); color: var(--color--white);
.system-notification-timeout { .system-notification-timeout {
background-color: var(--red-40); background-color: var(--color--warning-alternative);
} }
} }
.system-notification-warning { .system-notification-warning {
background-color: var(--yellow); background-color: var(--color--attention);
color: var(--black); color: var(--color--black);
.system-notification-timeout { .system-notification-timeout {
background-color: var(--yellow-40); background-color: var(--color--attention-alternative);
} }
a:not(.system-notification-message) { a:not(.system-notification-message) {
color: var(--black); color: var(--color--white);
text-decoration-line: underline; text-decoration-line: underline;
} }
a.system-notification-message { a.system-notification-message {
color: var(--white); color: var(--color--white);
text-decoration: unset; text-decoration: unset;
} }
} }
.system-notification-success { .system-notification-success {
background-color: var(--green); background-color: var(--color--good);
.system-notification-timeout { .system-notification-timeout {
background-color: var(--green-40); background-color: var(--color--good-alternative);
} }
} }
.system-notification-info { .system-notification-info {
background-color: var(--dark-violet); background-color: var(--color--info);
.system-notification-timeout { .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; ...@@ -196,7 +196,9 @@ $grid-gap: 0;
--transition-duration-slow: #{$transition-duration-slow}; --transition-duration-slow: #{$transition-duration-slow};
--transition-duration-superslow: #{$transition-duration-superslow}; --transition-duration-superslow: #{$transition-duration-superslow};
--color--black: #{$color--black};
--color--blue-1: #{$color--blue-1}; --color--blue-1: #{$color--blue-1};
--color--blue-2: #{$color--blue-2};
--color--gray-1: #{$color--gray-1}; --color--gray-1: #{$color--gray-1};
--color--gray-2: #{$color--gray-2}; --color--gray-2: #{$color--gray-2};
--color--gray-3: #{$color--gray-3}; --color--gray-3: #{$color--gray-3};
...@@ -280,8 +282,13 @@ $grid-gap: 0; ...@@ -280,8 +282,13 @@ $grid-gap: 0;
--color--focus: #{$color--focus}; --color--focus: #{$color--focus};
--color--warning: #{$color--warning}; --color--warning: #{$color--warning};
--color--warning-alternative: #{$color--warning-alternative};
--color--attention: #{$color--attention}; --color--attention: #{$color--attention};
--color--attention-alternative: #{$color--attention-alternative};
--color--good: #{$color--good}; --color--good: #{$color--good};
--color--good-alternative: #{$color--good-alternative};
--color--info: #{$color--info};
--color--info-alternative: #{$color--info-alternative};
@media (prefers-reduced-motion) { @media (prefers-reduced-motion) {
#{"--"}transition-duration: 0s; #{"--"}transition-duration: 0s;
......
resources/vue/components/SystemNotification.vue
+ 1
− 1
View file @ 68725581
...@@ -170,7 +170,7 @@ export default { ...@@ -170,7 +170,7 @@ export default {
} }
setTimeout(() => { setTimeout(() => {
audio.play(); audio.play().catch(error => {});
}, timing); }, timing);
} }
}, },
......
templates/shared/message_box.php
+ 0
− 5
View file @ 68725581
...@@ -5,11 +5,6 @@ ...@@ -5,11 +5,6 @@
<span><?= _('Detailanzeige umschalten') ?></span> <span><?= _('Detailanzeige umschalten') ?></span>
</a> </a>
<? endif ?> <? endif ?>
<? if (!$hide_close): ?>
<a class="close" role="button" href="#" title="<?= _('Nachrichtenbox schließen') ?>">
<span><?= _('Nachrichtenbox schließen') ?></span>
</a>
<? endif; ?>
</div> </div>
<div role="status" id="messagebox-<?= $counter ?>"> <div role="status" id="messagebox-<?= $counter ?>">
<?= $message ?> <?= $message ?>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment