Skip to content

Commit a17d853

Browse files
AlecRustAlecRust
authored
Refactor inline alerts (hestiacp#3157)
1 parent 298701f commit a17d853

File tree

13 files changed

+196
-267
lines changed

13 files changed

+196
-267
lines changed

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
"@typescript-eslint/eslint-plugin": "^5.46.1",
2727
"@typescript-eslint/parser": "^5.46.1",
2828
"cssnano": "^5.1.14",
29-
"eslint": "^8.29.0",
29+
"eslint": "^8.30.0",
3030
"eslint-config-prettier": "^8.5.0",
3131
"eslint-plugin-editorconfig": "^4.0.2",
3232
"husky": "^8.0.2",
@@ -45,7 +45,7 @@
4545
"stylelint-config-prettier": "^9.0.4",
4646
"stylelint-config-standard": "^29.0.0",
4747
"typescript": "^4.9.4",
48-
"vitepress": "1.0.0-alpha.31",
48+
"vitepress": "1.0.0-alpha.32",
4949
"vue": "^3.2.45"
5050
}
5151
}

‎web/css/src/themes/dark.css‎

Lines changed: 4 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
:root {
1010
--color-text: #cdcdcd;
11-
--color-text-link: #52b9ff;
11+
--color-text-link: #4fabe9;
1212
--color-text-link-hover: #ff3478;
1313
--color-background: #282828;
1414
--alert-border-color: #212121;
@@ -51,23 +51,8 @@ strong {
5151
}
5252
}
5353

54-
&.unseen {
55-
& .top-bar-notification-title,
56-
& .top-bar-notification-title a {
57-
color: #fff;
58-
}
59-
}
60-
61-
& a {
62-
color: #4fabe9;
63-
64-
&:hover {
65-
color: #09f;
66-
}
67-
68-
&:active {
69-
color: #0079cb;
70-
}
54+
&.unseen .top-bar-notification-title {
55+
color: #fff;
7156
}
7257
}
7358

@@ -936,13 +921,7 @@ form#vstobjects.suspended {
936921
/* Inline alerts
937922
========================================================================== */
938923

939-
.inline-danger {
940-
color: #f33;
941-
}
942-
943-
.inline-success {
944-
color: #53ba55;
945-
924+
.inline-alert-success {
946925
& a {
947926
color: #fff;
948927

‎web/css/src/themes/default.css‎

Lines changed: 14 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -194,15 +194,6 @@
194194
&.unseen {
195195
& .top-bar-notification-title {
196196
color: #c36;
197-
198-
& a {
199-
color: #c36;
200-
201-
&:hover,
202-
&:active {
203-
color: #e83b75;
204-
}
205-
}
206197
}
207198

208199
& .top-bar-notification-delete {
@@ -211,16 +202,7 @@
211202
}
212203

213204
& a {
214-
color: #1a4492;
215205
font-weight: 600;
216-
217-
&:hover {
218-
color: #4a87fb;
219-
}
220-
221-
&:active {
222-
color: #1a4492;
223-
}
224206
}
225207
}
226208

@@ -823,8 +805,7 @@
823805
display: flex;
824806
align-items: center;
825807

826-
& .inline-success,
827-
& .inline-danger {
808+
& .inline-alert {
828809
margin-right: 20px;
829810
}
830811

@@ -2334,27 +2315,6 @@ form#vstobjects.suspended {
23342315
padding-bottom: 30px;
23352316
}
23362317

2337-
#tooltip {
2338-
background-color: #3b9de8;
2339-
border-radius: 15px;
2340-
bottom: 6px;
2341-
color: #fff;
2342-
font-size: 0.8rem;
2343-
font-weight: 600;
2344-
height: 26px;
2345-
left: 12px;
2346-
letter-spacing: 0;
2347-
line-height: 25px;
2348-
margin-left: 12px;
2349-
margin-top: 7px;
2350-
padding: 3px 14px 3px 27px;
2351-
position: absolute;
2352-
text-transform: uppercase;
2353-
white-space: nowrap;
2354-
word-break: keep-all;
2355-
z-index: -1;
2356-
}
2357-
23582318
/* Badge component
23592319
========================================================================== */
23602320

@@ -2375,10 +2335,10 @@ form#vstobjects.suspended {
23752335
}
23762336

23772337
.l-unit--suspended .badge {
2378-
background: #eaeaea !important;
2379-
color: #c0c0c0 !important;
2380-
text-shadow: 0 -1px #fafafa !important;
2381-
box-shadow: 0 1px 2px rgb(120 120 120 / 30%) !important;
2338+
background: #eaeaea;
2339+
color: #c0c0c0;
2340+
text-shadow: 0 -1px #fafafa;
2341+
box-shadow: 0 1px 2px rgb(120 120 120 / 30%);
23822342
}
23832343

23842344
/* Icon component
@@ -2633,26 +2593,22 @@ form#vstobjects.suspended {
26332593
/* Inline alerts
26342594
========================================================================== */
26352595

2636-
.inline-danger {
2637-
color: #f33;
2596+
.inline-alert {
2597+
display: flex;
26382598
font-weight: 600;
2639-
text-overflow: ellipsis;
2640-
white-space: nowrap;
26412599

26422600
& .fas {
2643-
margin-right: 3px;
2601+
margin-top: 4px;
2602+
margin-right: 6px;
26442603
}
26452604
}
26462605

2647-
.inline-success {
2648-
color: #53ba55;
2649-
font-weight: 600;
2650-
text-overflow: ellipsis;
2651-
white-space: nowrap;
2606+
.inline-alert-danger {
2607+
color: #f33;
2608+
}
26522609

2653-
& .fas {
2654-
margin-right: 3px;
2655-
}
2610+
.inline-alert-success {
2611+
color: #53ba55;
26562612

26572613
& a {
26582614
color: #326b9b;

‎web/css/src/themes/vestia.css‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,8 @@ strong {
3737
box-shadow: 0 2px 10px 0 rgb(0 0 0 / 25%);
3838
}
3939

40-
.top-bar-notification-item.unseen {
41-
& .top-bar-notification-title,
42-
& .top-bar-notification-title a {
40+
.top-bar-notification-item {
41+
&.unseen .top-bar-notification-title {
4342
color: #111;
4443
}
4544
}

‎web/css/themes/dark.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/css/themes/default.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/css/themes/vestia.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/inc/main.php‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -219,23 +219,27 @@ function verify_csrf($method, $return = false) {
219219
}
220220

221221
function show_alert_message($data) {
222-
if (!empty($data["error_msg"]) || !empty($data["ok_msg"])) {
223-
if (!empty($data["error_msg"])) {
224-
$msg_icon = "fa-circle-exclamation icon-red";
225-
$msg_text = htmlentities($data["error_msg"]);
226-
$msg_class = "inline-danger";
227-
} else {
228-
$msg_icon = "fa-circle-check icon-green";
229-
$msg_text = $data["ok_msg"];
230-
$msg_class = "inline-success";
231-
}
232-
echo '<p class="' .
233-
$msg_class .
234-
' u-mb20"><i class="fas ' .
235-
$msg_icon .
236-
'"></i> ' .
237-
$msg_text .
238-
"</p>";
222+
$msgIcon = "";
223+
$msgText = "";
224+
$msgClass = "";
225+
226+
if (!empty($data["error_msg"])) {
227+
$msgIcon = "fa-circle-exclamation";
228+
$msgText = htmlentities($data["error_msg"]);
229+
$msgClass = "inline-alert-danger";
230+
} elseif (!empty($data["ok_msg"])) {
231+
$msgIcon = "fa-circle-check";
232+
$msgText = $data["ok_msg"];
233+
$msgClass = "inline-alert-success";
234+
}
235+
236+
if (!empty($msgText)) {
237+
printf(
238+
'<p class="inline-alert %s u-mb20"><i class="fas %s"></i> %s</p>',
239+
$msgClass,
240+
$msgIcon,
241+
$msgText,
242+
);
239243
}
240244
}
241245

‎web/templates/footer.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ class="button button-secondary button-circle button-floating button-floating-top
7272
<?php if (!empty($_SESSION["error_msg"])): ?>
7373
<div>
7474
<script>
75+
// TODO: This is broken, $ is not defined
7576
$(function() {
7677
$('#dialog:ui-dialog').dialog('destroy');
7778
$('#dialog-message').dialog({

‎web/templates/includes/panel.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ class="top-bar-notification-item"
8989
x-on:click="remove(notification.ID)"
9090
type="button"
9191
class="top-bar-notification-delete"
92+
title="<?= _("Delete notification") ?>"
9293
>
9394
<i class="fas fa-xmark"></i>
9495
</button>

0 commit comments

Comments
 (0)