third-party-mirrors/maloja
1
0
Fork 0
mirror of https://github.com/krateng/maloja.git synced 2025-06-03 17:11:13 +03:00
Code Issues Packages Projects Releases Wiki Activity

Notification design

Browse Source
This commit is contained in:
krateng 2024-01-20 20:12:39 +01:00
parent ed34992d8b
commit c648b25d28
3 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
maloja/web/static/css/maloja.css
View File

@ -363,12 +363,14 @@ div#notification_area {
right:20px; right:20px;
} }
div#notification_area div.notification { div#notification_area div.notification {
background-color:white; background-color:black;
width:400px; width:400px;
min-height:50px; min-height:50px;
margin-bottom:7px; margin-bottom:7px;
padding:9px; padding:9px;
opacity:0.4; opacity:0.5;
border-left: 8px solid var(--notification-color);
border-radius: 3px;
} }
div#notification_area div.notification:hover { div#notification_area div.notification:hover {
opacity:0.95; opacity:0.95;

2
maloja/web/static/js/manualscrobble.js
View File

@ -126,7 +126,7 @@ function scrobble(artists,title,albumartists,album,timestamp) {
lastArtists = artists; lastArtists = artists;
lastTrack = title; lastTrack = title;
lastAlbum = album; lastAlbum = album;
lastAlbumartists = albumartists; lastAlbumartists = albumartists || [];
var payload = { var payload = {
"artists":artists, "artists":artists,

24
maloja/web/static/js/notifications.js
View File

@ -1,12 +1,14 @@
// JS for feedback to the user whenever any XHTTP action is taken // JS for feedback to the user whenever any XHTTP action is taken
const colors = { const colors = {
'warning':'red', 'error': 'red',
'warning':'#8ACC26',
'info':'green' 'info':'green'
} }
const notification_template = info => ` const notification_template = info => `
<div class="notification" style="background-color:${colors[info.notification_type]};"> <div class="notification" style="--notification-color: ${colors[info.notification_type]};">
<b>${info.title}</b><br/> <b>${info.title}</b><br/>
<span>${info.body}</span> <span>${info.body}</span>
@ -35,18 +37,24 @@ function notify(title,msg,notification_type='info',reload=false) {
} }
function notifyCallback(request) { function notifyCallback(request) {
var body = request.response; var response = request.response;
var status = request.status; var status = request.status;
if (status == 200) { if (status == 200) {
var notification_type = 'info'; if (response.hasOwnProperty('warnings') && response.warnings.length > 0) {
var notification_type = 'warning';
}
else {
var notification_type = 'info';
}
var title = "Success!"; var title = "Success!";
var msg = body.desc || body; var msg = response.desc || response;
} }
else { else {
var notification_type = 'warning'; var notification_type = 'error';
var title = "Error: " + body.error.type; var title = "Error: " + response.error.type;
var msg = body.error.desc || ""; var msg = response.error.desc || "";
} }