Add css variable support and use MD icon
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv)
John Molakvoæ
Родитель
bedc3a1e1e
Коммит
467e9f384e
|
|
@ -9,18 +9,23 @@
|
|||
padding: 10px;
|
||||
opacity: .6;
|
||||
|
||||
.svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.notification__dot {
|
||||
fill: #ff4402;
|
||||
&--white {
|
||||
fill: var(--color-primary-text);
|
||||
}
|
||||
}
|
||||
|
||||
&.hasNotifications {
|
||||
opacity: 1 !important;
|
||||
animation-name: pulse;
|
||||
animation-duration: 1600ms;
|
||||
animation-iteration-count: 4;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
|
|
@ -28,12 +33,23 @@
|
|||
}
|
||||
}
|
||||
|
||||
&,
|
||||
img {
|
||||
* {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
60% {
|
||||
opacity: .6;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-container {
|
||||
display: none;
|
||||
right: 13px;
|
||||
|
|
@ -51,7 +67,7 @@
|
|||
padding: 50px 0;
|
||||
margin: 0;
|
||||
|
||||
@include icon-black-white('notifications-dark', 'notifications', 1);
|
||||
@include icon-black-white('notifications', 'notifications', 1);
|
||||
}
|
||||
|
||||
.dismiss-all {
|
||||
|
|
@ -140,16 +156,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
img.notification-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
|
||||
body.theme--dark & {
|
||||
filter: invert(1);
|
||||
}
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: bold;
|
||||
opacity: 1;
|
||||
|
|
|
|||
|
|
@ -1,4 +1 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1" viewBox="0 0 16 16">
|
||||
<path d="m8 2c-0.5523 0-1 0.4477-1 1 0 0.0472 0.021 0.0873 0.0273 0.1328-1.7366 0.4362-3.0273 1.9953-3.0273 3.8672v2l-1 1v1h10v-1l-1-1v-2c0-1.8719-1.291-3.431-3.0273-3.8672 0.0063-0.0455 0.0273-0.0856 0.0273-0.1328 0-0.5523-0.4477-1-1-1zm-2 10c0 1.1046 0.8954 2 2 2s2-0.8954 2-2z" fill="#000"/>
|
||||
</svg>
|
||||
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M14 12.33V13H2v-.67L3.33 11V7a4.66 4.66 0 0 1 3.34-4.47v-.2A1.33 1.33 0 0 1 8 1a1.33 1.33 0 0 1 1.33 1.33v.2A4.66 4.66 0 0 1 12.67 7v4L14 12.33m-4.67 1.34A1.33 1.33 0 0 1 8 15a1.33 1.33 0 0 1-1.33-1.33"/></svg>
|
||||
|
До Ширина: | Высота: | Размер: 456 B После Ширина: | Высота: | Размер: 282 B |
|
|
@ -1 +0,0 @@
|
|||
<svg width="16" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="m8 2a1 1 0 0 0-1 1c0 0.047 0.021344 0.086813 0.027344 0.13281a3.992 3.992 0 0 0-3.0273 3.8672v2l-1 1v1h10v-1l-1-1v-1a4 4 0 0 1-0.16602-0.0039062 4 4 0 0 1-0.39844-0.035156 4 4 0 0 1-0.39258-0.076172 4 4 0 0 1-0.38281-0.11523 4 4 0 0 1-0.36914-0.15234 4 4 0 0 1-0.35352-0.18945 4 4 0 0 1-0.33203-0.22266 4 4 0 0 1-0.30664-0.25586 4 4 0 0 1-0.28125-0.2832 4 4 0 0 1-0.25195-0.3125 4 4 0 0 1-0.21875-0.33398 4 4 0 0 1-0.18359-0.35547 4 4 0 0 1-0.14844-0.37109 4 4 0 0 1-0.10938-0.38477 4 4 0 0 1-0.072266-0.39258 4 4 0 0 1-0.021484-0.26172 3 3 0 0 1-0.0058594-0.080078 4 4 0 0 1-0.0039063-0.056641 4 4 0 0 1 0-0.041016 3 3 0 0 1-0.0019531-0.076172c0-0.00507 0.0039063-0.0086099 0.0039062-0.013672a4 4 0 0 1 0.0058594-0.26953 4 4 0 0 1 0.048828-0.39648 4 4 0 0 1 0.087891-0.39062 4 4 0 0 1 0.125-0.37891 4 4 0 0 1 0.16406-0.36523 4 4 0 0 1 0.03125-0.054688 0.978 0.978 0 0 0-0.4668-0.13086zm-2 10a2 2 0 0 0 4 0h-4z"/><path d="m12 1a3 3 0 1 0 0 6 3 3 0 0 0 0-6z" fill="#ff4402" fill-rule="evenodd"/></svg>
|
||||
|
До Ширина: | Высота: | Размер: 1.1 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg width="16" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="m8 2a1 1 0 0 0-1 1c0 0.047 0.02134 0.08681 0.02734 0.13281a3.992 3.992 0 0 0-3.0273 3.8672v2l-1 1v1h10v-1l-1-1v-1a4 4 0 0 1-0.16602-0.00391 4 4 0 0 1-0.39844-0.035156 4 4 0 0 1-0.39258-0.076172 4 4 0 0 1-0.38281-0.11523 4 4 0 0 1-0.36914-0.15234 4 4 0 0 1-0.35352-0.18945 4 4 0 0 1-0.33203-0.22266 4 4 0 0 1-0.30664-0.25586 4 4 0 0 1-0.28125-0.2832 4 4 0 0 1-0.25195-0.3125 4 4 0 0 1-0.21875-0.33398 4 4 0 0 1-0.18359-0.35547 4 4 0 0 1-0.14844-0.37109 4 4 0 0 1-0.10938-0.38477 4 4 0 0 1-0.07227-0.39258 4 4 0 0 1-0.02148-0.26172 3 3 0 0 1-0.0059-0.08008 4 4 0 0 1-0.0039-0.05664 4 4 0 0 1 0-0.04102 3 3 0 0 1-0.0019-0.07617c0-0.0051 0.0039-0.0086 0.0039-0.01367a4 4 0 0 1 0.0059-0.26953 4 4 0 0 1 0.04883-0.39648 4 4 0 0 1 0.08789-0.39062 4 4 0 0 1 0.125-0.37891 4 4 0 0 1 0.16406-0.36523 4 4 0 0 1 0.03125-0.05469 0.978 0.978 0 0 0-0.4668-0.13086zm-2 10a2 2 0 0 0 4 0z" fill="#fff"/><path d="m12 1a3 3 0 1 0 0 6 3 3 0 0 0 0-6z" fill="#ff4402" fill-rule="evenodd"/></svg>
|
||||
|
До Ширина: | Высота: | Размер: 1.0 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg width="16" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="m8 2a1 1 0 0 0-1 1c0 0.047 0.02134 0.08681 0.02734 0.13281a3.992 3.992 0 0 0-3.0273 3.8672v2l-1 1v1h10v-1l-1-1v-1a4 4 0 0 1-0.16602-0.00391 4 4 0 0 1-0.39844-0.035156 4 4 0 0 1-0.39258-0.076172 4 4 0 0 1-0.38281-0.11523 4 4 0 0 1-0.36914-0.15234 4 4 0 0 1-0.35352-0.18945 4 4 0 0 1-0.33203-0.22266 4 4 0 0 1-0.30664-0.25586 4 4 0 0 1-0.28125-0.2832 4 4 0 0 1-0.25195-0.3125 4 4 0 0 1-0.21875-0.33398 4 4 0 0 1-0.18359-0.35547 4 4 0 0 1-0.14844-0.37109 4 4 0 0 1-0.10938-0.38477 4 4 0 0 1-0.07227-0.39258 4 4 0 0 1-0.02148-0.26172 3 3 0 0 1-0.0059-0.08008 4 4 0 0 1-0.0039-0.05664 4 4 0 0 1 0-0.04102 3 3 0 0 1-0.0019-0.07617c0-0.0051 0.0039-0.0086 0.0039-0.01367a4 4 0 0 1 0.0059-0.26953 4 4 0 0 1 0.04883-0.39648 4 4 0 0 1 0.08789-0.39062 4 4 0 0 1 0.125-0.37891 4 4 0 0 1 0.16406-0.36523 4 4 0 0 1 0.03125-0.05469 0.978 0.978 0 0 0-0.4668-0.13086zm-2 10a2 2 0 0 0 4 0z"/><path d="m12 1a3 3 0 1 0 0 6 3 3 0 0 0 0-6z" fill-rule="evenodd"/></svg>
|
||||
|
До Ширина: | Высота: | Размер: 1.0 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg width="16" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="m8 2a1 1 0 0 0-1 1c0 0.047 0.02134 0.08681 0.02734 0.13281a3.992 3.992 0 0 0-3.0273 3.8672v2l-1 1v1h10v-1l-1-1v-1a4 4 0 0 1-0.16602-0.00391 4 4 0 0 1-0.39844-0.035156 4 4 0 0 1-0.39258-0.076172 4 4 0 0 1-0.38281-0.11523 4 4 0 0 1-0.36914-0.15234 4 4 0 0 1-0.35352-0.18945 4 4 0 0 1-0.33203-0.22266 4 4 0 0 1-0.30664-0.25586 4 4 0 0 1-0.28125-0.2832 4 4 0 0 1-0.25195-0.3125 4 4 0 0 1-0.21875-0.33398 4 4 0 0 1-0.18359-0.35547 4 4 0 0 1-0.14844-0.37109 4 4 0 0 1-0.10938-0.38477 4 4 0 0 1-0.07227-0.39258 4 4 0 0 1-0.02148-0.26172 3 3 0 0 1-0.0059-0.08008 4 4 0 0 1-0.0039-0.05664 4 4 0 0 1 0-0.04102 3 3 0 0 1-0.0019-0.07617c0-0.0051 0.0039-0.0086 0.0039-0.01367a4 4 0 0 1 0.0059-0.26953 4 4 0 0 1 0.04883-0.39648 4 4 0 0 1 0.08789-0.39062 4 4 0 0 1 0.125-0.37891 4 4 0 0 1 0.16406-0.36523 4 4 0 0 1 0.03125-0.05469 0.978 0.978 0 0 0-0.4668-0.13086zm-2 10a2 2 0 0 0 4 0z" fill="#fff"/><path d="m12 1a3 3 0 1 0 0 6 3 3 0 0 0 0-6z" fill="#fff" fill-rule="evenodd"/></svg>
|
||||
|
До Ширина: | Высота: | Размер: 1.0 KiB |
Двоичные данные
img/notifications.png
Двоичные данные
img/notifications.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 219 B После Ширина: | Высота: | Размер: 269 B |
|
|
@ -1,4 +1 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1" viewBox="0 0 16 16">
|
||||
<path d="m8 2c-0.5523 0-1 0.4477-1 1 0 0.0472 0.021 0.0873 0.0273 0.1328-1.7366 0.4362-3.0273 1.9953-3.0273 3.8672v2l-1 1v1h10v-1l-1-1v-2c0-1.8719-1.291-3.431-3.0273-3.8672 0.0063-0.0455 0.0273-0.0856 0.0273-0.1328 0-0.5523-0.4477-1-1-1zm-2 10c0 1.1046 0.8954 2 2 2s2-0.8954 2-2z" fill="#fff"/>
|
||||
</svg>
|
||||
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M14 12.33V13H2v-.67L3.33 11V7a4.66 4.66 0 0 1 3.34-4.47v-.2A1.33 1.33 0 0 1 8 1a1.33 1.33 0 0 1 1.33 1.33v.2A4.66 4.66 0 0 1 12.67 7v4L14 12.33m-4.67 1.34A1.33 1.33 0 0 1 8 15a1.33 1.33 0 0 1-1.33-1.33" fill="#fff"/></svg>
|
||||
|
До Ширина: | Высота: | Размер: 456 B После Ширина: | Высота: | Размер: 294 B |
|
|
@ -2061,6 +2061,55 @@
|
|||
"npm": "^7.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@nextcloud/vue/node_modules/loader-utils": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
|
||||
"integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
|
||||
"dependencies": {
|
||||
"big.js": "^5.2.2",
|
||||
"emojis-list": "^3.0.0",
|
||||
"json5": "^2.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@nextcloud/vue/node_modules/schema-utils": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
|
||||
"integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
|
||||
"dependencies": {
|
||||
"@types/json-schema": "^7.0.8",
|
||||
"ajv": "^6.12.5",
|
||||
"ajv-keywords": "^3.5.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 10.13.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/webpack"
|
||||
}
|
||||
},
|
||||
"node_modules/@nextcloud/vue/node_modules/style-loader": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/style-loader/-/style-loader-2.0.0.tgz",
|
||||
"integrity": "sha512-Z0gYUJmzZ6ZdRUqpg1r8GsaFKypE+3xAzuFeMuoHgjc9KZv3wMyCRjQIWEbhoFSq7+7yoHXySDJyyWQaPajeiQ==",
|
||||
"dependencies": {
|
||||
"loader-utils": "^2.0.0",
|
||||
"schema-utils": "^3.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 10.13.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/webpack"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"webpack": "^4.0.0 || ^5.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@nextcloud/webpack-vue-config": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@nextcloud/webpack-vue-config/-/webpack-vue-config-5.0.0.tgz",
|
||||
|
|
@ -2257,8 +2306,7 @@
|
|||
"node_modules/@types/json-schema": {
|
||||
"version": "7.0.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
|
||||
"integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
|
||||
"peer": true
|
||||
"integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ=="
|
||||
},
|
||||
"node_modules/@types/json5": {
|
||||
"version": "0.0.29",
|
||||
|
|
@ -2673,7 +2721,6 @@
|
|||
"version": "6.12.6",
|
||||
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
|
||||
"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"fast-deep-equal": "^3.1.1",
|
||||
"fast-json-stable-stringify": "^2.0.0",
|
||||
|
|
@ -2731,7 +2778,6 @@
|
|||
"version": "3.5.2",
|
||||
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
|
||||
"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
|
||||
"peer": true,
|
||||
"peerDependencies": {
|
||||
"ajv": "^6.9.1"
|
||||
}
|
||||
|
|
@ -3396,8 +3442,6 @@
|
|||
"version": "5.2.2",
|
||||
"resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
|
||||
"integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": "*"
|
||||
}
|
||||
|
|
@ -5258,8 +5302,6 @@
|
|||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
|
||||
"integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">= 4"
|
||||
}
|
||||
|
|
@ -6621,8 +6663,7 @@
|
|||
"node_modules/fast-deep-equal": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
|
||||
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
|
||||
"peer": true
|
||||
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
|
||||
},
|
||||
"node_modules/fast-glob": {
|
||||
"version": "3.2.7",
|
||||
|
|
@ -6707,8 +6748,7 @@
|
|||
"node_modules/fast-json-stable-stringify": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
|
||||
"integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
|
||||
"peer": true
|
||||
"integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
|
||||
},
|
||||
"node_modules/fast-levenshtein": {
|
||||
"version": "2.0.6",
|
||||
|
|
@ -8769,8 +8809,7 @@
|
|||
"node_modules/json-schema-traverse": {
|
||||
"version": "0.4.1",
|
||||
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
|
||||
"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
|
||||
"peer": true
|
||||
"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
|
||||
},
|
||||
"node_modules/json-stable-stringify-without-jsonify": {
|
||||
"version": "1.0.1",
|
||||
|
|
@ -10781,7 +10820,6 @@
|
|||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
|
||||
"integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
|
|
@ -12534,6 +12572,8 @@
|
|||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
|
||||
"integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">= 12.13.0"
|
||||
},
|
||||
|
|
@ -13684,7 +13724,6 @@
|
|||
"version": "4.4.1",
|
||||
"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
|
||||
"integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"punycode": "^2.1.0"
|
||||
}
|
||||
|
|
@ -16139,6 +16178,36 @@
|
|||
"vue-material-design-icons": "^5.0.0",
|
||||
"vue-multiselect": "^2.1.6",
|
||||
"vue2-datepicker": "^3.6.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"loader-utils": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
|
||||
"integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
|
||||
"requires": {
|
||||
"big.js": "^5.2.2",
|
||||
"emojis-list": "^3.0.0",
|
||||
"json5": "^2.1.2"
|
||||
}
|
||||
},
|
||||
"schema-utils": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
|
||||
"integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
|
||||
"requires": {
|
||||
"@types/json-schema": "^7.0.8",
|
||||
"ajv": "^6.12.5",
|
||||
"ajv-keywords": "^3.5.2"
|
||||
}
|
||||
},
|
||||
"style-loader": {
|
||||
"version": "https://registry.npmjs.org/style-loader/-/style-loader-2.0.0.tgz",
|
||||
"integrity": "sha512-Z0gYUJmzZ6ZdRUqpg1r8GsaFKypE+3xAzuFeMuoHgjc9KZv3wMyCRjQIWEbhoFSq7+7yoHXySDJyyWQaPajeiQ==",
|
||||
"requires": {
|
||||
"loader-utils": "^2.0.0",
|
||||
"schema-utils": "^3.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@nextcloud/webpack-vue-config": {
|
||||
|
|
@ -16307,8 +16376,7 @@
|
|||
"@types/json-schema": {
|
||||
"version": "7.0.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
|
||||
"integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
|
||||
"peer": true
|
||||
"integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ=="
|
||||
},
|
||||
"@types/json5": {
|
||||
"version": "0.0.29",
|
||||
|
|
@ -16693,7 +16761,6 @@
|
|||
"version": "6.12.6",
|
||||
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
|
||||
"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
|
||||
"peer": true,
|
||||
"requires": {
|
||||
"fast-deep-equal": "^3.1.1",
|
||||
"fast-json-stable-stringify": "^2.0.0",
|
||||
|
|
@ -16737,7 +16804,6 @@
|
|||
"version": "3.5.2",
|
||||
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
|
||||
"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
|
||||
"peer": true,
|
||||
"requires": {}
|
||||
},
|
||||
"amdefine": {
|
||||
|
|
@ -17273,9 +17339,7 @@
|
|||
"big.js": {
|
||||
"version": "5.2.2",
|
||||
"resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
|
||||
"integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
|
||||
"dev": true,
|
||||
"peer": true
|
||||
"integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ=="
|
||||
},
|
||||
"binary-extensions": {
|
||||
"version": "1.13.1",
|
||||
|
|
@ -18753,9 +18817,7 @@
|
|||
"emojis-list": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
|
||||
"integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
|
||||
"dev": true,
|
||||
"peer": true
|
||||
"integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q=="
|
||||
},
|
||||
"encodeurl": {
|
||||
"version": "1.0.2",
|
||||
|
|
@ -19778,8 +19840,7 @@
|
|||
"fast-deep-equal": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
|
||||
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
|
||||
"peer": true
|
||||
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
|
||||
},
|
||||
"fast-glob": {
|
||||
"version": "3.2.7",
|
||||
|
|
@ -19848,8 +19909,7 @@
|
|||
"fast-json-stable-stringify": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
|
||||
"integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
|
||||
"peer": true
|
||||
"integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
|
||||
},
|
||||
"fast-levenshtein": {
|
||||
"version": "2.0.6",
|
||||
|
|
@ -21386,8 +21446,7 @@
|
|||
"json-schema-traverse": {
|
||||
"version": "0.4.1",
|
||||
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
|
||||
"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
|
||||
"peer": true
|
||||
"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
|
||||
},
|
||||
"json-stable-stringify-without-jsonify": {
|
||||
"version": "1.0.1",
|
||||
|
|
@ -22976,8 +23035,7 @@
|
|||
"punycode": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
|
||||
"integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
|
||||
"peer": true
|
||||
"integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
|
||||
},
|
||||
"q": {
|
||||
"version": "1.5.1",
|
||||
|
|
@ -24352,6 +24410,8 @@
|
|||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
|
||||
"integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"requires": {}
|
||||
},
|
||||
"style-search": {
|
||||
|
|
@ -25204,7 +25264,6 @@
|
|||
"version": "4.4.1",
|
||||
"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
|
||||
"integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
|
||||
"peer": true,
|
||||
"requires": {
|
||||
"punycode": "^2.1.0"
|
||||
}
|
||||
|
|
|
|||
128
src/App.vue
128
src/App.vue
|
|
@ -10,12 +10,25 @@
|
|||
aria-controls="notification-container"
|
||||
aria-expanded="false"
|
||||
@click="requestWebNotificationPermissions">
|
||||
<img ref="icon"
|
||||
class="svg"
|
||||
alt=""
|
||||
<Bell v-if="notifications.length === 0"
|
||||
:size="20"
|
||||
:title="t('notifications', 'Notifications')"
|
||||
:src="iconPath">
|
||||
fill-color="var(--color-primary-text)" />
|
||||
<!-- From material design icons -->
|
||||
<svg v-else
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
version="1.1"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="var(--color-primary-text)">
|
||||
<path d="M 19,11.79 C 18.5,11.92 18,12 17.5,12 14.47,12 12,9.53 12,6.5 12,5.03 12.58,3.7 13.5,2.71 13.15,2.28 12.61,2 12,2 10.9,2 10,2.9 10,4 V 4.29 C 7.03,5.17 5,7.9 5,11 v 6 l -2,2 v 1 H 21 V 19 L 19,17 V 11.79 M 12,23 c 1.11,0 2,-0.89 2,-2 h -4 c 0,1.11 0.9,2 2,2 z" />
|
||||
<path :class="isRedThemed ? 'notification__dot--white' : ''" class="notification__dot" d="M 21,6.5 C 21,8.43 19.43,10 17.5,10 15.57,10 14,8.43 14,6.5 14,4.57 15.57,3 17.5,3 19.43,3 21,4.57 21,6.5" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Notifications list content -->
|
||||
<div ref="container" class="notification-container">
|
||||
<transition name="fade">
|
||||
<ul v-if="notifications.length > 0" class="notification-wrapper">
|
||||
|
|
@ -29,6 +42,8 @@
|
|||
:object-type="n.object_type"
|
||||
@remove="onRemove" />
|
||||
</transition-group>
|
||||
|
||||
<!-- Dismiss all -->
|
||||
<li v-if="notifications.length > 0">
|
||||
<div class="dismiss-all" @click="onDismissAll">
|
||||
<Button type="tertiary"
|
||||
|
|
@ -36,22 +51,23 @@
|
|||
<template #icon>
|
||||
<Close decorative
|
||||
title=""
|
||||
size="20" />
|
||||
:size="20" />
|
||||
</template>
|
||||
{{ t('notifications', 'Dismiss all notifications') }}
|
||||
</Button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div v-else class="emptycontent">
|
||||
<div class="icon icon-notifications-dark" />
|
||||
<h2 v-if="webNotificationsGranted === null">
|
||||
{{ t('notifications', 'Requesting browser permissions to show notifications') }}
|
||||
</h2>
|
||||
<h2 v-else>
|
||||
{{ t('notifications', 'No notifications') }}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<!-- No notifications -->
|
||||
<EmptyContent v-else>
|
||||
{{ webNotificationsGranted === null
|
||||
? t('notifications', 'Requesting browser permissions to show notifications')
|
||||
: t('notifications', 'No notifications') }}
|
||||
<template #icon>
|
||||
<Bell title="" decorative />
|
||||
</template>
|
||||
</EmptyContent>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -63,11 +79,13 @@ import Button from '@nextcloud/vue/dist/Components/Button'
|
|||
import Close from 'vue-material-design-icons/Close'
|
||||
import axios from '@nextcloud/axios'
|
||||
import { subscribe, unsubscribe } from '@nextcloud/event-bus'
|
||||
import { loadState } from '@nextcloud/initial-state'
|
||||
import { showError } from '@nextcloud/dialogs'
|
||||
import { imagePath, generateOcsUrl } from '@nextcloud/router'
|
||||
import { generateOcsUrl } from '@nextcloud/router'
|
||||
import { getNotificationsData } from './services/notificationsService'
|
||||
import { listen } from '@nextcloud/notify_push'
|
||||
import Bell from 'vue-material-design-icons/Bell'
|
||||
import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
|
||||
import { getCapabilities } from '@nextcloud/capabilities'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
|
|
@ -75,17 +93,18 @@ export default {
|
|||
components: {
|
||||
Button,
|
||||
Close,
|
||||
Bell,
|
||||
EmptyContent,
|
||||
Notification,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
webNotificationsGranted: false,
|
||||
hadNotifications: false,
|
||||
backgroundFetching: false,
|
||||
hasNotifyPush: false,
|
||||
shutdown: false,
|
||||
theming: {},
|
||||
theming: getCapabilities()?.theming || {},
|
||||
notifications: [],
|
||||
lastETag: null,
|
||||
lastTabId: null,
|
||||
|
|
@ -106,27 +125,6 @@ export default {
|
|||
_$icon: null,
|
||||
|
||||
computed: {
|
||||
iconPath() {
|
||||
let iconPath = 'notifications'
|
||||
|
||||
if (this.webNotificationsGranted === null || this.notifications.length) {
|
||||
if (this.isRedThemed) {
|
||||
iconPath += '-red'
|
||||
}
|
||||
iconPath += '-new'
|
||||
}
|
||||
|
||||
if (this.invertedTheme) {
|
||||
iconPath += '-dark'
|
||||
}
|
||||
|
||||
return imagePath('notifications', iconPath)
|
||||
},
|
||||
|
||||
invertedTheme() {
|
||||
return !!this.theming?.inverted
|
||||
},
|
||||
|
||||
isRedThemed() {
|
||||
if (this.theming?.color) {
|
||||
const hsl = this.rgbToHsl(this.theming.color.substring(1, 3),
|
||||
|
|
@ -146,11 +144,6 @@ export default {
|
|||
},
|
||||
},
|
||||
|
||||
beforeMount() {
|
||||
console.debug('Loading theming data for notification bell styling')
|
||||
this.theming = loadState('theming', 'data', {})
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.tabId = OC.requestToken || ('' + Math.random())
|
||||
this._$icon = $(this.$refs.icon)
|
||||
|
|
@ -187,19 +180,6 @@ export default {
|
|||
unsubscribe('networkOnline', this.handleNetworkOnline)
|
||||
},
|
||||
|
||||
updated() {
|
||||
if (!this.hadNotifications && this.notifications.length) {
|
||||
console.debug('New notification, animating the bell icon')
|
||||
this._$icon
|
||||
.animate({ opacity: 0.6 }, 600)
|
||||
.animate({ opacity: 1 }, 600)
|
||||
.animate({ opacity: 0.6 }, 600)
|
||||
.animate({ opacity: 1 }, 600)
|
||||
}
|
||||
|
||||
this.hadNotifications = this.notifications.length > 0
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleNetworkOffline() {
|
||||
console.debug('Network is offline, slowing down pollingInterval to ' + this.pollIntervalBase * 10)
|
||||
|
|
@ -432,21 +412,25 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fade-enter-active,
|
||||
.fade-leave-active,
|
||||
.fade-collapse-enter-active,
|
||||
.fade-collapse-leave-active {
|
||||
transition: opacity var(--animation-quick), max-height var(--animation-quick);
|
||||
}
|
||||
.empty-content {
|
||||
margin: 12vh 0;
|
||||
}
|
||||
|
||||
.fade-collapse-enter,
|
||||
.fade-collapse-leave-to {
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
}
|
||||
.fade-enter-active,
|
||||
.fade-leave-active,
|
||||
.fade-collapse-enter-active,
|
||||
.fade-collapse-leave-active {
|
||||
transition: opacity var(--animation-quick), max-height var(--animation-quick);
|
||||
}
|
||||
|
||||
.fade-enter,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
.fade-collapse-enter,
|
||||
.fade-collapse-leave-to {
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
}
|
||||
|
||||
.fade-enter,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -320,8 +320,17 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .rich-text--wrapper {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
.notification::v-deep {
|
||||
img.notification-icon {
|
||||
display: flex;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
filter: var(--background-invert-if-dark);
|
||||
}
|
||||
.rich-text--wrapper {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче