Animate deletion of notifications (#4316)

build.js

@@ -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, '-');
 	}

package-lock.json

@@ -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",

package.json

@@ -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",

web/css/src/themes/default.css

@@ -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;

web/templates/includes/js.php

@@ -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');

web/templates/includes/panel.php

@@ -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>