valvin
/
ttrss
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

notify: use iconfont, update colors and increase height a bit

This commit is contained in:
Andrew Dolgov 2018-12-06 12:52:44 +03:00
parent 0ea0b606be
commit d99d04a2ae
6 changed files with 82 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
css/default.css
View File

@ -126,37 +126,34 @@ body.ttrss_main a:hover {
text-decoration: underline; text-decoration: underline;
} }
body.ttrss_main #notify.visible { body.ttrss_main #notify.visible {
transform: translate(0, -35px); transform: translate(0, -45px);
} }
body.ttrss_main #notify { body.ttrss_main #notify {
bottom: -35px; bottom: -45px;
right: 0px; right: 0px;
height: 20px; height: 30px;
left: 0px; left: 0px;
border-width: 1px 0px 0px 0px; border-width: 1px 0px 0px 0px;
border-style: solid; border-style: solid;
position: fixed; position: fixed;
font-size: 12px; font-size: 13px;
z-index: 99; z-index: 99;
padding: 5px; display: flex;
box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.1);
transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
} }
body.ttrss_main #notify > * {
align-self: center;
padding: 4px;
}
body.ttrss_main #notify img { body.ttrss_main #notify img {
vertical-align: middle; vertical-align: middle;
max-height: 14px;
} }
body.ttrss_main #notify span.msg { body.ttrss_main #notify .msg {
width: 100%; flex-grow: 2;
} }
body.ttrss_main #notify img.close { body.ttrss_main #notify .icon-close {
cursor: pointer; cursor: pointer;
} }
body.ttrss_main #notify span {
display: table-cell;
vertical-align: middle;
padding: 2px;
}
body.ttrss_main .notify { body.ttrss_main .notify {
border-color: #d7c47a; border-color: #d7c47a;
background-color: #fff7d5; background-color: #fff7d5;
@ -169,9 +166,17 @@ body.ttrss_main .notify.notify_info {
border-color: #257aa7; border-color: #257aa7;
background-color: #d5ebf6; background-color: #d5ebf6;
} }
body.ttrss_main .notify.notify_info i.icon-notify {
color: #257aa7;
}
body.ttrss_main .notify.notify_error { body.ttrss_main .notify.notify_error {
background-color: #ffcccc; background-color: #c00;
border-color: #ff0000; border-color: #900;
color: white;
}
body.ttrss_main .notify.notify_error i.icon-notify,
body.ttrss_main .notify.notify_error i.icon-close {
color: white;
} }
body.ttrss_main .hl { body.ttrss_main .hl {
border: 0px solid #ddd; border: 0px solid #ddd;

2
css/default.css.map
View File

File diff suppressed because one or more lines are too long

42
css/tt-rss.less
View File

@ -143,42 +143,39 @@ body.ttrss_main {
} }
#notify.visible { #notify.visible {
transform: translate(0, -35px); transform: translate(0, -45px);
} }
#notify { #notify {
bottom : -35px; bottom : -45px;
right : 0px; right : 0px;
height : 20px; height : 30px;
left : 0px; left : 0px;
border-width : 1px 0px 0px 0px; border-width : 1px 0px 0px 0px;
border-style : solid; border-style : solid;
position : fixed; position : fixed;
font-size : 12px; font-size : 13px;
z-index : 99; z-index : 99;
padding : 5px; display : flex;
box-shadow : 0px -2px 2px rgba(0,0,0,0.1);
transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
> * {
align-self : center;
padding : 4px;
}
img { img {
vertical-align : middle; vertical-align : middle;
max-height : 14px;
} }
span.msg { .msg {
width : 100%; flex-grow : 2;
} }
img.close { .icon-close {
cursor : pointer; cursor : pointer;
} }
span {
display : table-cell;
vertical-align : middle;
padding : 2px;
}
} }
.notify { .notify {
@ -194,11 +191,20 @@ body.ttrss_main {
.notify.notify_info { .notify.notify_info {
border-color : @color-accent; border-color : @color-accent;
background-color : @color-accent-light; background-color : @color-accent-light;
i.icon-notify {
color : @color-accent;
}
} }
.notify.notify_error { .notify.notify_error {
background-color : #ffcccc; background-color : #c00;
border-color : #ff0000; border-color : #900;
color : white;
i.icon-notify, i.icon-close {
color : white;
}
} }
.hl { .hl {

19
js/common.js
View File

@ -170,8 +170,7 @@ const Notify = {
} }
let msgfmt = "<span class=\"msg\">%s</span>".replace("%s", __(msg)); let msgfmt = "<span class=\"msg\">%s</span>".replace("%s", __(msg));
let icon = false; let icon = "";
notify.className = "notify"; notify.className = "notify";
@ -180,22 +179,28 @@ const Notify = {
switch (kind) { switch (kind) {
case this.KIND_INFO: case this.KIND_INFO:
notify.addClassName("notify_info") notify.addClassName("notify_info")
icon = App.getInitParam("icon_information"); icon = "notifications";
break; break;
case this.KIND_ERROR: case this.KIND_ERROR:
notify.addClassName("notify_error"); notify.addClassName("notify_error");
icon = App.getInitParam("icon_alert"); icon = "error";
break; break;
case this.KIND_PROGRESS: case this.KIND_PROGRESS:
notify.addClassName("notify_progress"); notify.addClassName("notify_progress");
icon = App.getInitParam("icon_indicator_white") icon = App.getInitParam("icon_indicator_white")
break; break;
default:
icon = "notifications";
} }
if (icon) msgfmt = "<span><img src=\"%s\"></span>".replace("%s", icon) + msgfmt; if (icon)
if (icon.indexOf("data:image") != -1)
msgfmt = "<img src=\"%s\">".replace("%s", icon) + msgfmt;
else
msgfmt = "<i class='material-icons icon-notify'>%s</i>".replace("%s", icon) + msgfmt;
msgfmt += (" <span><img src=\"%s\" class='close' title=\"" + msgfmt += ("<i class='material-icons icon-close' title=\"" +
__("Click to close") + "\" onclick=\"Notify.close()\"></span>") __("Click to close") + "\" onclick=\"Notify.close()\">close</i>")
.replace("%s", App.getInitParam("icon_cross")); .replace("%s", App.getInitParam("icon_cross"));
notify.innerHTML = msgfmt; notify.innerHTML = msgfmt;

39
themes/night.css
View File

@ -126,37 +126,34 @@ body.ttrss_main a:hover {
text-decoration: underline; text-decoration: underline;
} }
body.ttrss_main #notify.visible { body.ttrss_main #notify.visible {
transform: translate(0, -35px); transform: translate(0, -45px);
} }
body.ttrss_main #notify { body.ttrss_main #notify {
bottom: -35px; bottom: -45px;
right: 0px; right: 0px;
height: 20px; height: 30px;
left: 0px; left: 0px;
border-width: 1px 0px 0px 0px; border-width: 1px 0px 0px 0px;
border-style: solid; border-style: solid;
position: fixed; position: fixed;
font-size: 12px; font-size: 13px;
z-index: 99; z-index: 99;
padding: 5px; display: flex;
box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.1);
transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
} }
body.ttrss_main #notify > * {
align-self: center;
padding: 4px;
}
body.ttrss_main #notify img { body.ttrss_main #notify img {
vertical-align: middle; vertical-align: middle;
max-height: 14px;
} }
body.ttrss_main #notify span.msg { body.ttrss_main #notify .msg {
width: 100%; flex-grow: 2;
} }
body.ttrss_main #notify img.close { body.ttrss_main #notify .icon-close {
cursor: pointer; cursor: pointer;
} }
body.ttrss_main #notify span {
display: table-cell;
vertical-align: middle;
padding: 2px;
}
body.ttrss_main .notify { body.ttrss_main .notify {
border-color: #d7c47a; border-color: #d7c47a;
background-color: #fff7d5; background-color: #fff7d5;
@ -169,9 +166,17 @@ body.ttrss_main .notify.notify_info {
border-color: #257aa7; border-color: #257aa7;
background-color: #d5ebf6; background-color: #d5ebf6;
} }
body.ttrss_main .notify.notify_info i.icon-notify {
color: #257aa7;
}
body.ttrss_main .notify.notify_error { body.ttrss_main .notify.notify_error {
background-color: #ffcccc; background-color: #c00;
border-color: #ff0000; border-color: #900;
color: white;
}
body.ttrss_main .notify.notify_error i.icon-notify,
body.ttrss_main .notify.notify_error i.icon-close {
color: white;
} }
body.ttrss_main .hl { body.ttrss_main .hl {
border: 0px solid #ddd; border: 0px solid #ddd;

2
themes/night.css.map
View File

File diff suppressed because one or more lines are too long