H0llyW00dzZ/hestiacp
H0llyW00dzZ/hestiacp
1
0
Fork 0
mirror of https://github.com/hestiacp/hestiacp.git synced 2025-02-06 09:45:30 +00:00
Code Actions Releases Activity

Animate deletion of notifications (#4316)

Browse Source
This commit is contained in:
Alec Rust 2024-03-03 16:32:59 +00:00 committed by GitHub
parent d0567b5117
commit 304bc83952
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 39 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
build.js
View File

@ -12,6 +12,7 @@ import * as lightningcss from 'lightningcss';
const externalPackages = [
'chart.js/auto',
'alpinejs/dist/cdn.min.js',
'@alpinejs/collapse/dist/cdn.min.js',
'xterm',
'xterm-addon-webgl',
'xterm-addon-canvas',
@ -63,6 +64,8 @@ function getOutputPath(pkg) {
if (pkg.startsWith('alpinejs')) {
pkgName = 'alpinejs';
} else if (pkg.startsWith('@alpinejs/collapse')) {
pkgName = 'alpinejs-collapse';
} else {
pkgName = pkg.replace(/\//g, '-');
}

6
package-lock.json generated
View File

@ -10,6 +10,7 @@
"hasInstallScript": true,
"license": "GPL-3.0-or-later",
"dependencies": {
"@alpinejs/collapse": "^3.13.5",
"@fortawesome/fontawesome-free": "^6.5.1",
"alpinejs": "^3.13.5",
"chart.js": "^4.4.1",
@ -230,6 +231,11 @@
"@algolia/requester-common": "4.22.1"
}
},
"node_modules/@alpinejs/collapse": {
"version": "3.13.5",
"resolved": "https://registry.npmjs.org/@alpinejs/collapse/-/collapse-3.13.5.tgz",
"integrity": "sha512-LHtSF/T3Zrhr0WOeVm4ebdXNH6ftqoZMbmkBTU1n/j8r0joV3oLUsPCyn5qOU8+27d2P/N2a057etOm0MH60oQ=="
},
"node_modules/@babel/code-frame": {
"version": "7.23.5",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",

1
package.json
View File

@ -19,6 +19,7 @@
"prepare": "husky"
},
"dependencies": {
"@alpinejs/collapse": "^3.13.5",
"@fortawesome/fontawesome-free": "^6.5.1",
"alpinejs": "^3.13.5",
"chart.js": "^4.4.1",

5
web/css/src/themes/default.css
View File

@ -212,7 +212,6 @@
color: #6f6f6f;
font-size: 0.8rem;
border-bottom: 1px solid #e9e4e4;
padding: 15px 20px;
&:last-child {
border-bottom: none;
@ -231,6 +230,10 @@
& a {
font-weight: 600;
}
}
.top-bar-notification-inner {
padding: 15px 20px;
@media (--viewport-small) {
padding-left: 15px;

1
web/templates/includes/js.php
View File

@ -1,4 +1,5 @@
<script defer src="/js/dist/main.min.js?<?= JS_LATEST_UPDATE ?>"></script>
<script defer src="/js/dist/alpinejs-collapse.min.js?<?= JS_LATEST_UPDATE ?>"></script>
<script defer src="/js/dist/alpinejs.min.js?<?= JS_LATEST_UPDATE ?>"></script>
<script>
document.documentElement.classList.replace('no-js', 'js');

42
web/templates/includes/panel.php
View File

@ -99,26 +99,32 @@
x-bind:id="`notification-${notification.ID}`"
x-bind:class="notification.ACK && 'unseen'"
class="top-bar-notification-item"
x-data="{ open: true }"
x-show="open"
x-collapse
>
<div class="top-bar-notification-header">
<p x-text="notification.TOPIC" class="top-bar-notification-title"></p>
<button
x-on:click="remove(notification.ID)"
type="button"
class="top-bar-notification-delete"
title="<?= _("Delete notification") ?>"
>
<i class="fas fa-xmark"></i>
</button>
<div class="top-bar-notification-inner">
<div class="top-bar-notification-header">
<p x-text="notification.TOPIC" class="top-bar-notification-title"></p>
<button
x-on:click="open = false; setTimeout(() => remove(notification.ID), 300);"
type="button"
class="top-bar-notification-delete"
title="<?= _("Delete notification") ?>"
>
<i class="fas fa-xmark"></i>
<span class="u-hidden-visually"><?= _("Delete notification") ?></span>
</button>
</div>
<div class="top-bar-notification-content" x-html="notification.NOTICE"></div>
<p class="top-bar-notification-timestamp">
<time
:datetime="`${notification.TIMESTAMP_ISO}`"
x-bind:title="`${notification.TIMESTAMP_TITLE}`"
x-text="`${notification.TIMESTAMP_TEXT}`"
></time>
</p>
</div>
<div class="top-bar-notification-content" x-html="notification.NOTICE"></div>
<p class="top-bar-notification-timestamp">
<time
:datetime="`${notification.TIMESTAMP_ISO}`"
x-bind:title="`${notification.TIMESTAMP_TITLE}`"
x-text="`${notification.TIMESTAMP_TEXT}`"
></time>
</p>
</li>
</template>
</ul>