Merge pull request #2128 from nextcloud/fix/1718/notifications-style

fix(style): clear excessive and redundant styles

css/notifications-main.css

@@ -1,3 +1,3 @@
 /* extracted by css-entry-points-plugin */
-@import './main-DSR4m-70.chunk.css';
+@import './main-DW6Mw_HJ.chunk.css';
 @import './style-BRbSke62.chunk.css';

js/notifications-main.mjs

@@ -1,3 +1,3 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=[window.OC.filePath('notifications', '', 'js/NotificationsApp-DaOxHK0q.chunk.mjs'),window.OC.filePath('notifications', '', 'js/_plugin-vue2_normalizer-CZfd6CVi.chunk.mjs'),window.OC.filePath('notifications', '', 'js/style-N1aAjoYj.chunk.mjs'),window.OC.filePath('notifications', '', 'css/style-BRbSke62.chunk.css'),window.OC.filePath('notifications', '', 'css/_plugin-vue2_normalizer-DbW0erEk.chunk.css'),window.OC.filePath('notifications', '', 'js/BrowserStorage-L-6Brd9g.chunk.mjs'),window.OC.filePath('notifications', '', 'css/BrowserStorage-pJDdPtEN.chunk.css'),window.OC.filePath('notifications', '', 'css/NotificationsApp-CAV_mxbb.chunk.css')])))=>i.map(i=>d[i]);
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=[window.OC.filePath('notifications', '', 'js/NotificationsApp-lmZRk3-S.chunk.mjs'),window.OC.filePath('notifications', '', 'js/_plugin-vue2_normalizer-CZfd6CVi.chunk.mjs'),window.OC.filePath('notifications', '', 'js/style-N1aAjoYj.chunk.mjs'),window.OC.filePath('notifications', '', 'css/style-BRbSke62.chunk.css'),window.OC.filePath('notifications', '', 'css/_plugin-vue2_normalizer-DbW0erEk.chunk.css'),window.OC.filePath('notifications', '', 'js/BrowserStorage-L-6Brd9g.chunk.mjs'),window.OC.filePath('notifications', '', 'css/BrowserStorage-pJDdPtEN.chunk.css'),window.OC.filePath('notifications', '', 'css/NotificationsApp-DMxXHcXK.chunk.css')])))=>i.map(i=>d[i]);
 /*! third party licenses: js/vendor.LICENSE.txt */
-import{V as p}from"./style-N1aAjoYj.chunk.mjs";const v="modulepreload",w=function(i,c){return new URL(i,c).href},y={},A=function(i,c,f){let u=Promise.resolve();if(c&&c.length>0){const s=document.getElementsByTagName("link"),e=document.querySelector("meta[property=csp-nonce]"),h=e?.nonce||e?.getAttribute("nonce");u=Promise.allSettled(c.map(r=>{if(r=w(r,f),r in y)return;y[r]=!0;const l=r.endsWith(".css"),E=l?'[rel="stylesheet"]':"";if(f)for(let a=s.length-1;a>=0;a--){const d=s[a];if(d.href===r&&(!l||d.rel==="stylesheet"))return}else if(document.querySelector(`link[href="${r}"]${E}`))return;const o=document.createElement("link");if(o.rel=l?"stylesheet":v,l||(o.as="script"),o.crossOrigin="",o.href=r,h&&o.setAttribute("nonce",h),document.head.appendChild(o),l)return new Promise((a,d)=>{o.addEventListener("load",a),o.addEventListener("error",()=>d(new Error(`Unable to preload CSS for ${r}`)))})}))}function m(s){const e=new Event("vite:preloadError",{cancelable:!0});if(e.payload=s,window.dispatchEvent(e),!e.defaultPrevented)throw s}return u.then(s=>{for(const e of s||[])e.status==="rejected"&&m(e.reason);return i().catch(m)})};p.prototype.t=t,p.prototype.n=n,p.prototype.OC=OC,p.prototype.OCA=OCA,new p({el:"#notifications",name:"NotificationsApp",components:{NotificationsApp:()=>A(()=>import("./NotificationsApp-DaOxHK0q.chunk.mjs").then(i=>i.N),__vite__mapDeps([0,1,2,3,4,5,6,7]),import.meta.url)},render:i=>i("NotificationsApp")});export{A as _};
+import{V as p}from"./style-N1aAjoYj.chunk.mjs";const v="modulepreload",w=function(i,c){return new URL(i,c).href},y={},A=function(i,c,f){let u=Promise.resolve();if(c&&c.length>0){const s=document.getElementsByTagName("link"),e=document.querySelector("meta[property=csp-nonce]"),h=e?.nonce||e?.getAttribute("nonce");u=Promise.allSettled(c.map(r=>{if(r=w(r,f),r in y)return;y[r]=!0;const l=r.endsWith(".css"),E=l?'[rel="stylesheet"]':"";if(f)for(let a=s.length-1;a>=0;a--){const d=s[a];if(d.href===r&&(!l||d.rel==="stylesheet"))return}else if(document.querySelector(`link[href="${r}"]${E}`))return;const o=document.createElement("link");if(o.rel=l?"stylesheet":v,l||(o.as="script"),o.crossOrigin="",o.href=r,h&&o.setAttribute("nonce",h),document.head.appendChild(o),l)return new Promise((a,d)=>{o.addEventListener("load",a),o.addEventListener("error",()=>d(new Error(`Unable to preload CSS for ${r}`)))})}))}function m(s){const e=new Event("vite:preloadError",{cancelable:!0});if(e.payload=s,window.dispatchEvent(e),!e.defaultPrevented)throw s}return u.then(s=>{for(const e of s||[])e.status==="rejected"&&m(e.reason);return i().catch(m)})};p.prototype.t=t,p.prototype.n=n,p.prototype.OC=OC,p.prototype.OCA=OCA,new p({el:"#notifications",name:"NotificationsApp",components:{NotificationsApp:()=>A(()=>import("./NotificationsApp-lmZRk3-S.chunk.mjs").then(i=>i.N),__vite__mapDeps([0,1,2,3,4,5,6,7]),import.meta.url)},render:i=>i("NotificationsApp")});export{A as _};

src/Components/Notification.vue

@@ -301,8 +301,6 @@ export default {
 
 <style lang="scss" scoped>
 .notification {
-	background-color: var(--color-main-background);
-
 	:deep(img.notification-icon) {
 		display: flex;
 		width: 32px;

src/NotificationsApp.vue

@@ -20,39 +20,36 @@
 		<!-- Notifications list content -->
 		<div ref="container" class="notification-container">
 			<transition name="fade" mode="out-in">
-				<div v-if="notifications.length > 0">
-					<transition-group class="notification-wrapper"
-						name="list"
-						tag="ul">
-						<Notification v-if="hasThrottledPushNotifications"
-							:key="-2016"
-							datetime="warning"
-							app="core"
-							:icon="warningIcon"
-							external-link="https://nextcloud.com/fairusepolicy"
-							:message="emptyContentDescription"
-							:subject="emptyContentMessage"
-							:index="2016" />
-						<Notification v-for="(n, index) in notifications"
-							:key="n.notificationId"
-							v-bind="n"
-							:index="index"
-							@remove="onRemove" />
-					</transition-group>
-
+				<transition-group v-if="notifications.length > 0"
+					class="notification-wrapper"
+					name="list"
+					tag="ul">
+					<Notification v-if="hasThrottledPushNotifications"
+						:key="-2016"
+						datetime="warning"
+						app="core"
+						:icon="warningIcon"
+						external-link="https://nextcloud.com/fairusepolicy"
+						:message="emptyContentDescription"
+						:subject="emptyContentMessage"
+						:index="2016" />
+					<Notification v-for="(n, index) in notifications"
+						:key="n.notificationId"
+						v-bind="n"
+						:index="index"
+						@remove="onRemove" />
 					<!-- Dismiss all -->
-					<span v-if="notifications.length > 0"
-						class="dismiss-all"
-						@click="onDismissAll">
+					<li key="dismiss-button" class="dismiss-all">
 						<NcButton type="tertiary"
+							wide
 							@click="onDismissAll">
 							<template #icon>
 								<IconClose :size="20" />
 							</template>
 							{{ t('notifications', 'Dismiss all notifications') }}
 						</NcButton>
-					</span>
-				</div>
+					</li>
+				</transition-group>
 
 				<!-- No notifications -->
 				<NcEmptyContent v-else
@@ -481,18 +478,23 @@ export default {
 .notification-container {
 	/* Prevent slide animation to go out of the div */
 	overflow: hidden;
-}
 
-.notification-wrapper {
-	max-height: calc(100vh - 50px * 4);
-	overflow: auto;
-}
+	&,
+	& :deep(*),
+	& :deep(*::before),
+	& :deep(*::after) {
+		box-sizing: border-box;
+	}
 
-::v-deep .empty-content {
-	margin: 12vh 10px;
+	.notification-wrapper {
+		display: flex;
+		flex-direction: column;
+		max-height: calc(100vh - 50px * 4);
+		overflow: auto;
+	}
 
-	p {
-		color: var(--color-text-maxcontrast);
+	.dismiss-all {
+		padding: calc(2 * var(--default-grid-baseline));
 	}
 }
 

src/styles/styles.scss

@@ -23,10 +23,6 @@
 			opacity: 1;
 		}
 	}
-
-	* {
-		cursor: pointer;
-	}
 }
 
 svg {
@@ -45,28 +41,6 @@ svg {
 	}
 }
 
-.notification-container {
-	.notification-wrapper {
-		display: flex;
-		flex-direction: column;
-	}
-
-	.dismiss-all {
-		display: flex;
-		justify-content: center;
-		color: var(--color-text-maxcontrast);
-		border-top: 1px solid var(--color-border);
-		padding: 10px;
-		background-color: var(--color-main-background);
-	}
-
-	/* Menu arrow */
-	&:after {
-		right: 101px;
-	}
-}
-
-
 .notification {
 	padding-bottom: 12px;