Skip to content

Commit

Permalink
Task/qe 785 alert widget colors (#3750)
Browse files Browse the repository at this point in the history 
QE-785: improved the alert widget (mostly scss) to make text and closing-x visible for dark backgrounds;
 improved the alert widget (mostly scss) to make text and closing-x visible for dark backgrounds;
added close button logic color for "non filled" alerts

---------

Co-authored-by: twilligls <tim.willig@limesurvey.org>
  • Loading branch information
@Trischi80 @twilligls
Trischi80 and twilligls committed Feb 21, 2024
1 parent f8c2fea commit bc7edf6
Show file tree
Hide file tree
Showing 7 changed files with 89 additions and 106 deletions.
4 changes: 3 additions & 1 deletion application/extensions/AlertWidget/AlertWidget.php
View file
Expand Up @@ -79,6 +79,8 @@ public function run()
'inErrorMode' => $inErrorMode,
'htmlOptions' => $this->htmlOptions,
'icon' => $this->icon,
'type' => $this->type,
'isFilled' => $this->isFilled
]);
}
}
Expand Down Expand Up @@ -203,4 +205,4 @@ private function setTimeout()
$this->timeout = self::DEFAULT_TIMEOUT;
}
}
}
}
10 changes: 9 additions & 1 deletion application/extensions/AlertWidget/views/alert.php
View file
Expand Up @@ -9,6 +9,8 @@
/** @var boolean $inErrorMode */
/** @var array $htmlOptions */
/** @var String $icon */
/** @var String $type */
/** @var boolean $isFilled */

echo CHtml::openTag($tag, $htmlOptions);
if ($showIcon && $header == '') {
Expand All @@ -31,11 +33,17 @@
echo $this->render('error-summary', ['errors' => $errors]);
}
if ($showCloseButton) {
//change closing 'x' when type has a dark background color
$addColorWhite = '';
if (in_array($type, [ 'info', 'dark']) && $isFilled) {
//closing x must be white
$addColorWhite = 'btn-close-white';
}
echo CHtml::htmlButton(
'',
[
'type' => 'button',
'class' => 'btn-close',
'class' => 'btn-close ' . $addColorWhite,
'data-bs-dismiss' => 'alert',
'aria-label' => gT("Close")
]
Expand Down
13 changes: 9 additions & 4 deletions assets/admin_themes/Sea_Green/alert/alert.scss
View file
Expand Up @@ -18,19 +18,24 @@ $alert-status : (
border-left : 8px solid $color;
} @else {
background-color : $color;
@if ($color== var(--bs-info)) {
@if ($color== var(--bs-info) or $color== var(--bs-dark)) {
color: $white;
.alert-link {
color : $white;
text-decoration: underline;
}
} @else {
color : $g-900;
.alert-link {
color : $g-900;
text-decoration: underline;
}
}
}

hr {
border-top-color : $color;
}
.alert-link {
color : $grape;
}
}

@each $state, $value in $alert-status {
Expand Down
82 changes: 33 additions & 49 deletions themes/admin/Sea_Green/css/sea_green-rtl.css
View file
Expand Up @@ -18640,12 +18640,13 @@ table [class^=ri-], table [class*=" ri-"] {
background-color: var(--bs-primary);
color: #1E1E1E;
}
.alert-filled-primary .alert-link {
color: #1E1E1E;
text-decoration: underline;
}
.alert-filled-primary hr {
border-top-color: var(--bs-primary);
}
.alert-filled-primary .alert-link {
color: #8146F6;
}

.alert-primary {
border: 1.33px solid #1E1E1E;
Expand All @@ -18656,21 +18657,19 @@ table [class^=ri-], table [class*=" ri-"] {
.alert-primary hr {
border-top-color: var(--bs-primary);
}
.alert-primary .alert-link {
color: #8146F6;
}

.alert-filled-secondary {
border: 1.33px solid #1E1E1E;
background-color: var(--bs-secondary);
color: #1E1E1E;
}
.alert-filled-secondary .alert-link {
color: #1E1E1E;
text-decoration: underline;
}
.alert-filled-secondary hr {
border-top-color: var(--bs-secondary);
}
.alert-filled-secondary .alert-link {
color: #8146F6;
}

.alert-secondary {
border: 1.33px solid #1E1E1E;
Expand All @@ -18681,21 +18680,19 @@ table [class^=ri-], table [class*=" ri-"] {
.alert-secondary hr {
border-top-color: var(--bs-secondary);
}
.alert-secondary .alert-link {
color: #8146F6;
}

.alert-filled-success {
border: 1.33px solid #1E1E1E;
background-color: var(--bs-success);
color: #1E1E1E;
}
.alert-filled-success .alert-link {
color: #1E1E1E;
text-decoration: underline;
}
.alert-filled-success hr {
border-top-color: var(--bs-success);
}
.alert-filled-success .alert-link {
color: #8146F6;
}

.alert-success {
border: 1.33px solid #1E1E1E;
Expand All @@ -18706,21 +18703,19 @@ table [class^=ri-], table [class*=" ri-"] {
.alert-success hr {
border-top-color: var(--bs-success);
}
.alert-success .alert-link {
color: #8146F6;
}

.alert-filled-warning {
border: 1.33px solid #1E1E1E;
background-color: var(--bs-warning);
color: #1E1E1E;
}
.alert-filled-warning .alert-link {
color: #1E1E1E;
text-decoration: underline;
}
.alert-filled-warning hr {
border-top-color: var(--bs-warning);
}
.alert-filled-warning .alert-link {
color: #8146F6;
}

.alert-warning {
border: 1.33px solid #1E1E1E;
Expand All @@ -18731,21 +18726,19 @@ table [class^=ri-], table [class*=" ri-"] {
.alert-warning hr {
border-top-color: var(--bs-warning);
}
.alert-warning .alert-link {
color: #8146F6;
}

.alert-filled-danger {
border: 1.33px solid #1E1E1E;
background-color: var(--bs-danger);
color: #1E1E1E;
}
.alert-filled-danger .alert-link {
color: #1E1E1E;
text-decoration: underline;
}
.alert-filled-danger hr {
border-top-color: var(--bs-danger);
}
.alert-filled-danger .alert-link {
color: #8146F6;
}

.alert-danger {
border: 1.33px solid #1E1E1E;
Expand All @@ -18756,21 +18749,19 @@ table [class^=ri-], table [class*=" ri-"] {
.alert-danger hr {
border-top-color: var(--bs-danger);
}
.alert-danger .alert-link {
color: #8146F6;
}

.alert-filled-info {
border: 1.33px solid #1E1E1E;
background-color: var(--bs-info);
color: #fff;
}
.alert-filled-info .alert-link {
color: #fff;
text-decoration: underline;
}
.alert-filled-info hr {
border-top-color: var(--bs-info);
}
.alert-filled-info .alert-link {
color: #8146F6;
}

.alert-info {
border: 1.33px solid #1E1E1E;
Expand All @@ -18781,21 +18772,19 @@ table [class^=ri-], table [class*=" ri-"] {
.alert-info hr {
border-top-color: var(--bs-info);
}
.alert-info .alert-link {
color: #8146F6;
}

.alert-filled-light {
border: 1.33px solid #1E1E1E;
background-color: var(--bs-light);
color: #1E1E1E;
}
.alert-filled-light .alert-link {
color: #1E1E1E;
text-decoration: underline;
}
.alert-filled-light hr {
border-top-color: var(--bs-light);
}
.alert-filled-light .alert-link {
color: #8146F6;
}

.alert-light {
border: 1.33px solid #1E1E1E;
Expand All @@ -18806,21 +18795,19 @@ table [class^=ri-], table [class*=" ri-"] {
.alert-light hr {
border-top-color: var(--bs-light);
}
.alert-light .alert-link {
color: #8146F6;
}

.alert-filled-dark {
border: 1.33px solid #1E1E1E;
background-color: var(--bs-dark);
color: #1E1E1E;
color: #fff;
}
.alert-filled-dark .alert-link {
color: #fff;
text-decoration: underline;
}
.alert-filled-dark hr {
border-top-color: var(--bs-dark);
}
.alert-filled-dark .alert-link {
color: #8146F6;
}

.alert-dark {
border: 1.33px solid #1E1E1E;
Expand All @@ -18831,9 +18818,6 @@ table [class^=ri-], table [class*=" ri-"] {
.alert-dark hr {
border-top-color: var(--bs-dark);
}
.alert-dark .alert-link {
color: #8146F6;
}

.alert-dismissible .btn-close {
padding: 1rem 1rem;
Expand Down
2 changes: 1 addition & 1 deletion themes/admin/Sea_Green/css/sea_green-rtl.min.css
View file

Large diffs are not rendered by default.

0 comments on commit bc7edf6

Please sign in to comment.