update headlines to use vector icons

This commit is contained in:
Andrew Dolgov 2018-12-05 13:58:18 +03:00
parent 89b213b4bb
commit b65d8384c2
8 changed files with 111 additions and 73 deletions

View File

@ -466,7 +466,7 @@ class Feeds extends Handler_Protected {
id=\"RROW-$id\" data-content=\"$content_encoded\" data-article-id='$id' data-orig-feed-id='$feed_id' $mouseover_attrs>"; id=\"RROW-$id\" data-content=\"$content_encoded\" data-article-id='$id' data-orig-feed-id='$feed_id' $mouseover_attrs>";
$tmp_content .= "<div class=\"header\">"; $tmp_content .= "<div class=\"header\">";
$tmp_content .= "<div class=\"buttons\">"; $tmp_content .= "<div class=\"left\">";
$tmp_content .= "<input dojoType=\"dijit.form.CheckBox\" $tmp_content .= "<input dojoType=\"dijit.form.CheckBox\"
type=\"checkbox\" onclick=\"Headlines.onRowChecked(this)\" type=\"checkbox\" onclick=\"Headlines.onRowChecked(this)\"

View File

@ -13,10 +13,24 @@
.header { .header {
> * { > * {
align-self : center; align-self : center;
padding : 5px; padding : 4px;
white-space : nowrap; white-space : nowrap;
} }
.left {
display : flex;
> * {
align-self : center;
}
i.material-icons {
margin-left : 2px;
font-size : 18px;
padding : 2px;
}
}
.titleWrap { .titleWrap {
flex-grow : 2; flex-grow : 2;
} }

View File

@ -184,17 +184,27 @@ body.ttrss_main .hl {
body.ttrss_main .hl > * { body.ttrss_main .hl > * {
align-self: center; align-self: center;
white-space: nowrap; white-space: nowrap;
padding: 5px; padding: 4px;
} }
body.ttrss_main .hl img { body.ttrss_main .hl img {
vertical-align: middle; vertical-align: middle;
} }
body.ttrss_main .hl .left {
display: flex;
}
body.ttrss_main .hl .left > * {
align-self: center;
}
body.ttrss_main .hl .left i.material-icons {
margin-left: 2px;
font-size: 18px;
padding: 2px;
}
body.ttrss_main .hl div.title { body.ttrss_main .hl div.title {
cursor: pointer; cursor: pointer;
flex-grow: 2; flex-grow: 2;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
padding-left: 5px;
} }
body.ttrss_main .hl div.right { body.ttrss_main .hl div.right {
text-align: right; text-align: right;
@ -398,20 +408,10 @@ body.ttrss_main span.hlLabelRef {
white-space: nowrap; white-space: nowrap;
border-radius: 4px; border-radius: 4px;
} }
body.ttrss_main img.marked-pic, body.ttrss_main i.marked-pic,
body.ttrss_main img.pub-pic { body.ttrss_main i.pub-pic {
cursor: pointer; cursor: pointer;
vertical-align: middle; color: #ccc;
opacity: 0.5;
transition: opacity 0.25s;
}
body.ttrss_main img.marked-pic:hover,
body.ttrss_main img.pub-pic:hover {
opacity: 1;
}
body.ttrss_main img[src*='pub_set.png'],
body.ttrss_main img[src*='mark_set.png'] {
opacity: 1;
} }
body.ttrss_main div.tagCloudContainer { body.ttrss_main div.tagCloudContainer {
background: white; background: white;
@ -961,6 +961,12 @@ body.ttrss_main .dijitDialog h3:first-of-type,
body.ttrss_main .dijitDialog h4:first-of-type { body.ttrss_main .dijitDialog h4:first-of-type {
margin-top: 0px; margin-top: 0px;
} }
.hl.marked .left i.marked-pic {
color: #ffc069;
}
.hl.published .left i.pub-pic {
color: #ff5718;
}
::selection { ::selection {
background: #257aa7; background: #257aa7;
color: white; color: white;
@ -987,9 +993,20 @@ body.ttrss_main .dijitDialog h4:first-of-type {
} }
.cdm .header > * { .cdm .header > * {
align-self: center; align-self: center;
padding: 5px; padding: 4px;
white-space: nowrap; white-space: nowrap;
} }
.cdm .header .left {
display: flex;
}
.cdm .header .left > * {
align-self: center;
}
.cdm .header .left i.material-icons {
margin-left: 2px;
font-size: 18px;
padding: 2px;
}
.cdm .header .titleWrap { .cdm .header .titleWrap {
flex-grow: 2; flex-grow: 2;
} }

File diff suppressed because one or more lines are too long

View File

@ -212,19 +212,32 @@ body.ttrss_main {
> * { > * {
align-self : center; align-self : center;
white-space : nowrap; white-space : nowrap;
padding : 5px; padding : 4px;
} }
img { img {
vertical-align : middle; vertical-align : middle;
} }
.left {
display : flex;
> * {
align-self : center;
}
i.material-icons {
margin-left : 2px;
font-size : 18px;
padding : 2px;
}
}
div.title { div.title {
cursor : pointer; cursor : pointer;
flex-grow : 2; flex-grow : 2;
overflow : hidden; overflow : hidden;
text-overflow : ellipsis; text-overflow : ellipsis;
padding-left : 5px;
} }
div.right { div.right {
@ -459,19 +472,9 @@ body.ttrss_main {
border-radius : 4px; border-radius : 4px;
} }
img.marked-pic, img.pub-pic { i.marked-pic, i.pub-pic {
cursor : pointer; cursor : pointer;
vertical-align : middle; color : #ccc;
opacity : 0.5;
transition : opacity 0.25s;
}
img.marked-pic:hover, img.pub-pic:hover {
opacity : 1;
}
img[src*='pub_set.png'], img[src*='mark_set.png'] {
opacity : 1;
} }
div.tagCloudContainer { div.tagCloudContainer {
@ -1133,6 +1136,14 @@ body.ttrss_main .dijitDialog {
} }
} }
.hl.marked .left i.marked-pic {
color : #ffc069;
}
.hl.published .left i.pub-pic {
color : #ff5718;
}
::selection { ::selection {
background : @color-accent; background : @color-accent;
color : white; color : white;

View File

@ -498,19 +498,9 @@ define(["dojo/_base/declare"], function (declare) {
const row = $("RROW-" + id); const row = $("RROW-" + id);
if (row) { if (row) {
const imgs = $$("img[class*=marked-pic][class*=marked-" + id + "]");
imgs.each((img) => {
if (!row.hasClassName("marked")) {
img.src = img.src.replace("mark_unset", "mark_set");
query.mark = 1;
} else {
img.src = img.src.replace("mark_set", "mark_unset");
query.mark = 0;
}
});
row.toggleClassName("marked"); row.toggleClassName("marked");
query.mark = row.hasClassName("marked") ? 1 : 0;
if (!client_only) if (!client_only)
xhrPost("backend.php", query, (transport) => { xhrPost("backend.php", query, (transport) => {
@ -524,19 +514,8 @@ define(["dojo/_base/declare"], function (declare) {
if (row) { if (row) {
const query = {op: "rpc", id: id, method: "publ"}; const query = {op: "rpc", id: id, method: "publ"};
const imgs = $$("img[class*=pub-pic][class*=pub-" + id + "]");
imgs.each((img) => {
if (!row.hasClassName("published")) {
img.src = img.src.replace("pub_unset", "pub_set");
query.pub = 1;
} else {
img.src = img.src.replace("pub_set", "pub_unset");
query.pub = 0;
}
});
row.toggleClassName("published"); row.toggleClassName("published");
query.pub = row.hasClassName("published") ? 1 : 0;
if (!client_only) if (!client_only)
xhrPost("backend.php", query, (transport) => { xhrPost("backend.php", query, (transport) => {

View File

@ -184,17 +184,27 @@ body.ttrss_main .hl {
body.ttrss_main .hl > * { body.ttrss_main .hl > * {
align-self: center; align-self: center;
white-space: nowrap; white-space: nowrap;
padding: 5px; padding: 4px;
} }
body.ttrss_main .hl img { body.ttrss_main .hl img {
vertical-align: middle; vertical-align: middle;
} }
body.ttrss_main .hl .left {
display: flex;
}
body.ttrss_main .hl .left > * {
align-self: center;
}
body.ttrss_main .hl .left i.material-icons {
margin-left: 2px;
font-size: 18px;
padding: 2px;
}
body.ttrss_main .hl div.title { body.ttrss_main .hl div.title {
cursor: pointer; cursor: pointer;
flex-grow: 2; flex-grow: 2;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
padding-left: 5px;
} }
body.ttrss_main .hl div.right { body.ttrss_main .hl div.right {
text-align: right; text-align: right;
@ -398,20 +408,10 @@ body.ttrss_main span.hlLabelRef {
white-space: nowrap; white-space: nowrap;
border-radius: 4px; border-radius: 4px;
} }
body.ttrss_main img.marked-pic, body.ttrss_main i.marked-pic,
body.ttrss_main img.pub-pic { body.ttrss_main i.pub-pic {
cursor: pointer; cursor: pointer;
vertical-align: middle; color: #ccc;
opacity: 0.5;
transition: opacity 0.25s;
}
body.ttrss_main img.marked-pic:hover,
body.ttrss_main img.pub-pic:hover {
opacity: 1;
}
body.ttrss_main img[src*='pub_set.png'],
body.ttrss_main img[src*='mark_set.png'] {
opacity: 1;
} }
body.ttrss_main div.tagCloudContainer { body.ttrss_main div.tagCloudContainer {
background: white; background: white;
@ -961,6 +961,12 @@ body.ttrss_main .dijitDialog h3:first-of-type,
body.ttrss_main .dijitDialog h4:first-of-type { body.ttrss_main .dijitDialog h4:first-of-type {
margin-top: 0px; margin-top: 0px;
} }
.hl.marked .left i.marked-pic {
color: #ffc069;
}
.hl.published .left i.pub-pic {
color: #ff5718;
}
::selection { ::selection {
background: #257aa7; background: #257aa7;
color: white; color: white;
@ -987,9 +993,20 @@ body.ttrss_main .dijitDialog h4:first-of-type {
} }
.cdm .header > * { .cdm .header > * {
align-self: center; align-self: center;
padding: 5px; padding: 4px;
white-space: nowrap; white-space: nowrap;
} }
.cdm .header .left {
display: flex;
}
.cdm .header .left > * {
align-self: center;
}
.cdm .header .left i.material-icons {
margin-left: 2px;
font-size: 18px;
padding: 2px;
}
.cdm .header .titleWrap { .cdm .header .titleWrap {
flex-grow: 2; flex-grow: 2;
} }

File diff suppressed because one or more lines are too long