notify: use iconfont, update colors and increase height a bit
This commit is contained in:
Andrew Dolgov
parent
0ea0b606be
commit
d99d04a2ae
|
|
@ -126,37 +126,34 @@ body.ttrss_main a:hover {
|
|||
text-decoration: underline;
|
||||
}
|
||||
body.ttrss_main #notify.visible {
|
||||
transform: translate(0, -35px);
|
||||
transform: translate(0, -45px);
|
||||
}
|
||||
body.ttrss_main #notify {
|
||||
bottom: -35px;
|
||||
bottom: -45px;
|
||||
right: 0px;
|
||||
height: 20px;
|
||||
height: 30px;
|
||||
left: 0px;
|
||||
border-width: 1px 0px 0px 0px;
|
||||
border-style: solid;
|
||||
position: fixed;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
z-index: 99;
|
||||
padding: 5px;
|
||||
box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
body.ttrss_main #notify > * {
|
||||
align-self: center;
|
||||
padding: 4px;
|
||||
}
|
||||
body.ttrss_main #notify img {
|
||||
vertical-align: middle;
|
||||
max-height: 14px;
|
||||
}
|
||||
body.ttrss_main #notify span.msg {
|
||||
width: 100%;
|
||||
body.ttrss_main #notify .msg {
|
||||
flex-grow: 2;
|
||||
}
|
||||
body.ttrss_main #notify img.close {
|
||||
body.ttrss_main #notify .icon-close {
|
||||
cursor: pointer;
|
||||
}
|
||||
body.ttrss_main #notify span {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
padding: 2px;
|
||||
}
|
||||
body.ttrss_main .notify {
|
||||
border-color: #d7c47a;
|
||||
background-color: #fff7d5;
|
||||
|
|
@ -169,9 +166,17 @@ body.ttrss_main .notify.notify_info {
|
|||
border-color: #257aa7;
|
||||
background-color: #d5ebf6;
|
||||
}
|
||||
body.ttrss_main .notify.notify_info i.icon-notify {
|
||||
color: #257aa7;
|
||||
}
|
||||
body.ttrss_main .notify.notify_error {
|
||||
background-color: #ffcccc;
|
||||
border-color: #ff0000;
|
||||
background-color: #c00;
|
||||
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 {
|
||||
border: 0px solid #ddd;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -143,42 +143,39 @@ body.ttrss_main {
|
|||
}
|
||||
|
||||
#notify.visible {
|
||||
transform: translate(0, -35px);
|
||||
transform: translate(0, -45px);
|
||||
}
|
||||
|
||||
#notify {
|
||||
bottom : -35px;
|
||||
bottom : -45px;
|
||||
right : 0px;
|
||||
height : 20px;
|
||||
height : 30px;
|
||||
left : 0px;
|
||||
border-width : 1px 0px 0px 0px;
|
||||
border-style : solid;
|
||||
position : fixed;
|
||||
font-size : 12px;
|
||||
font-size : 13px;
|
||||
z-index : 99;
|
||||
padding : 5px;
|
||||
box-shadow : 0px -2px 2px rgba(0,0,0,0.1);
|
||||
display : flex;
|
||||
|
||||
transition: all 0.5s ease-in-out;
|
||||
|
||||
> * {
|
||||
align-self : center;
|
||||
padding : 4px;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align : middle;
|
||||
max-height : 14px;
|
||||
}
|
||||
|
||||
span.msg {
|
||||
width : 100%;
|
||||
.msg {
|
||||
flex-grow : 2;
|
||||
}
|
||||
|
||||
img.close {
|
||||
.icon-close {
|
||||
cursor : pointer;
|
||||
}
|
||||
|
||||
span {
|
||||
display : table-cell;
|
||||
vertical-align : middle;
|
||||
padding : 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.notify {
|
||||
|
|
@ -194,11 +191,20 @@ body.ttrss_main {
|
|||
.notify.notify_info {
|
||||
border-color : @color-accent;
|
||||
background-color : @color-accent-light;
|
||||
|
||||
i.icon-notify {
|
||||
color : @color-accent;
|
||||
}
|
||||
}
|
||||
|
||||
.notify.notify_error {
|
||||
background-color : #ffcccc;
|
||||
border-color : #ff0000;
|
||||
background-color : #c00;
|
||||
border-color : #900;
|
||||
color : white;
|
||||
|
||||
i.icon-notify, i.icon-close {
|
||||
color : white;
|
||||
}
|
||||
}
|
||||
|
||||
.hl {
|
||||
|
|
|
|||
19
js/common.js
19
js/common.js
|
|
@ -170,8 +170,7 @@ const Notify = {
|
|||
}
|
||||
|
||||
let msgfmt = "<span class=\"msg\">%s</span>".replace("%s", __(msg));
|
||||
let icon = false;
|
||||
|
||||
let icon = "";
|
||||
|
||||
notify.className = "notify";
|
||||
|
||||
|
|
@ -180,22 +179,28 @@ const Notify = {
|
|||
switch (kind) {
|
||||
case this.KIND_INFO:
|
||||
notify.addClassName("notify_info")
|
||||
icon = App.getInitParam("icon_information");
|
||||
icon = "notifications";
|
||||
break;
|
||||
case this.KIND_ERROR:
|
||||
notify.addClassName("notify_error");
|
||||
icon = App.getInitParam("icon_alert");
|
||||
icon = "error";
|
||||
break;
|
||||
case this.KIND_PROGRESS:
|
||||
notify.addClassName("notify_progress");
|
||||
icon = App.getInitParam("icon_indicator_white")
|
||||
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=\"" +
|
||||
__("Click to close") + "\" onclick=\"Notify.close()\"></span>")
|
||||
msgfmt += ("<i class='material-icons icon-close' title=\"" +
|
||||
__("Click to close") + "\" onclick=\"Notify.close()\">close</i>")
|
||||
.replace("%s", App.getInitParam("icon_cross"));
|
||||
|
||||
notify.innerHTML = msgfmt;
|
||||
|
|
|
|||
|
|
@ -126,37 +126,34 @@ body.ttrss_main a:hover {
|
|||
text-decoration: underline;
|
||||
}
|
||||
body.ttrss_main #notify.visible {
|
||||
transform: translate(0, -35px);
|
||||
transform: translate(0, -45px);
|
||||
}
|
||||
body.ttrss_main #notify {
|
||||
bottom: -35px;
|
||||
bottom: -45px;
|
||||
right: 0px;
|
||||
height: 20px;
|
||||
height: 30px;
|
||||
left: 0px;
|
||||
border-width: 1px 0px 0px 0px;
|
||||
border-style: solid;
|
||||
position: fixed;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
z-index: 99;
|
||||
padding: 5px;
|
||||
box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
body.ttrss_main #notify > * {
|
||||
align-self: center;
|
||||
padding: 4px;
|
||||
}
|
||||
body.ttrss_main #notify img {
|
||||
vertical-align: middle;
|
||||
max-height: 14px;
|
||||
}
|
||||
body.ttrss_main #notify span.msg {
|
||||
width: 100%;
|
||||
body.ttrss_main #notify .msg {
|
||||
flex-grow: 2;
|
||||
}
|
||||
body.ttrss_main #notify img.close {
|
||||
body.ttrss_main #notify .icon-close {
|
||||
cursor: pointer;
|
||||
}
|
||||
body.ttrss_main #notify span {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
padding: 2px;
|
||||
}
|
||||
body.ttrss_main .notify {
|
||||
border-color: #d7c47a;
|
||||
background-color: #fff7d5;
|
||||
|
|
@ -169,9 +166,17 @@ body.ttrss_main .notify.notify_info {
|
|||
border-color: #257aa7;
|
||||
background-color: #d5ebf6;
|
||||
}
|
||||
body.ttrss_main .notify.notify_info i.icon-notify {
|
||||
color: #257aa7;
|
||||
}
|
||||
body.ttrss_main .notify.notify_error {
|
||||
background-color: #ffcccc;
|
||||
border-color: #ff0000;
|
||||
background-color: #c00;
|
||||
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 {
|
||||
border: 0px solid #ddd;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue