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

yet another flex feedtree attempt

This commit is contained in:
Andrew Dolgov 2021-03-22 16:18:59 +03:00
parent 98251022d4
commit 0f6644880a
11 changed files with 134 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
classes/rpc.php
View File

@ -474,6 +474,7 @@ class RPC extends Handler_Protected {
$params["icon_indicator_white"] = $this->image_to_base64("images/indicator_white.gif");
$params["icon_oval"] = $this->image_to_base64("images/oval.svg");
$params["icon_three_dots"] = $this->image_to_base64("images/three-dots.svg");
$params["icon_blank"] = $this->image_to_base64("images/blank_icon.gif");
$params["labels"] = Labels::get_all($_SESSION["uid"]);
return $params;

2
gulpfile.js
View File

@ -13,7 +13,7 @@ gulp.task('less', function(cb) {
gulp
.src(['themes/compact.less', 'themes/compact_night.less',
'themes/light.less', 'themes/night_blue.less', 'themes/night.less'])
.pipe(less())
.pipe(less({javascriptEnabled: true}))
.on('error', swallowError)
.pipe(
gulp.dest(function(f) {

4
js/FeedTree.js
View File

@ -138,12 +138,12 @@ define(["dojo/_base/declare", "dojo/dom-construct", "dojo/_base/array", "dojo/co
tnode.rowNode.setAttribute('data-feed-id', bare_id);
tnode.rowNode.setAttribute('data-is-cat', "true");
tnode.loadingNode = dojo.create('img', { className: 'loadingNode', src: App.getInitParam('icon_three_dots')});
tnode.loadingNode = dojo.create('img', { className: 'loadingNode', src: App.getInitParam('icon_blank')});
domConstruct.place(tnode.loadingNode, tnode.labelNode, 'after');
}
if (id.match("FEED:")) {
tnode.loadingNode = dojo.create('img', { className: 'loadingNode', src: App.getInitParam('icon_oval')});
tnode.loadingNode = dojo.create('img', { className: 'loadingNode', src: App.getInitParam('icon_blank')});
domConstruct.place(tnode.loadingNode, tnode.expandoNode, 'only');
}

31
themes/compact.css
View File

@ -519,22 +519,25 @@ body.ttrss_main #feeds-holder #feedTree {
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow {
border: 1px solid transparent;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .loadingNode {
display: none;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .loadingNode.visible {
display: inline;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Feed .loadingNode {
left: -2px;
height: 14px;
width: 14px;
position: relative;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Feed .loadingNode.visible {
content: url('../images/oval.svg?1616419112660');
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Cat .loadingNode {
height: 11px;
width: 18px;
margin-left: 4px;
position: relative;
top: 2px;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Cat .loadingNode.visible {
display: inline;
content: url('../images/three-dots.svg?1616419112660');
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .counterNode {
order: 2;
@ -546,12 +549,8 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .counterNod
color: white;
background: #2a89bc;
border-radius: 4px;
vertical-align: middle;
float: right;
position: relative;
line-height: 14px;
margin-right: 8px;
margin-top: 2px;
min-width: 23px;
height: 14px;
}
@ -580,6 +579,8 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .dijitTreeL
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
top: -0.5px;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .dijitTreeLabel.Unread {
font-weight: bold;
@ -615,8 +616,6 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow i.icon.icon
color: #69C671;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow i.icon.icon-restore {
position: relative;
top: -1px;
font-weight: bold;
color: #257aa7;
}
@ -1921,6 +1920,14 @@ body.ttrss_utility.share_popup .content {
flex-direction: row;
align-items: center;
}
.flat .dijitTree .dijitTreeRowFlex .dijitTreeIcon {
font-size: inherit;
height: auto;
}
.flat .dijitTree .dijitTreeRowFlex .dijitTreeExpando {
height: auto;
line-height: 0;
}
.flat .dijitTree .dijitFolderClosed,
.flat .dijitTree .dijitFolderOpened {
display: none;

31
themes/compact_night.css
View File

@ -519,22 +519,25 @@ body.ttrss_main #feeds-holder #feedTree {
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow {
border: 1px solid transparent;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .loadingNode {
display: none;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .loadingNode.visible {
display: inline;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Feed .loadingNode {
left: -2px;
height: 14px;
width: 14px;
position: relative;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Feed .loadingNode.visible {
content: url('../images/oval.svg?1616419112701');
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Cat .loadingNode {
height: 11px;
width: 18px;
margin-left: 4px;
position: relative;
top: 2px;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Cat .loadingNode.visible {
display: inline;
content: url('../images/three-dots.svg?1616419112701');
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .counterNode {
order: 2;
@ -546,12 +549,8 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .counterNod
color: white;
background: #cd8b31;
border-radius: 4px;
vertical-align: middle;
float: right;
position: relative;
line-height: 14px;
margin-right: 8px;
margin-top: 2px;
min-width: 23px;
height: 14px;
}
@ -580,6 +579,8 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .dijitTreeL
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
top: -0.5px;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .dijitTreeLabel.Unread {
font-weight: bold;
@ -615,8 +616,6 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow i.icon.icon
color: #69C671;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow i.icon.icon-restore {
position: relative;
top: -1px;
font-weight: bold;
color: #b87d2c;
}
@ -1823,6 +1822,14 @@ body.ttrss_utility fieldset > label.checkbox {
flex-direction: row;
align-items: center;
}
.flat .dijitTree .dijitTreeRowFlex .dijitTreeIcon {
font-size: inherit;
height: auto;
}
.flat .dijitTree .dijitTreeRowFlex .dijitTreeExpando {
height: auto;
line-height: 0;
}
.flat .dijitTree .dijitFolderClosed,
.flat .dijitTree .dijitFolderOpened {
display: none;

31
themes/light.css
View File

@ -519,22 +519,25 @@ body.ttrss_main #feeds-holder #feedTree {
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow {
border: 1px solid transparent;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .loadingNode {
display: none;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .loadingNode.visible {
display: inline;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Feed .loadingNode {
left: -2px;
height: 14px;
width: 14px;
position: relative;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Feed .loadingNode.visible {
content: url('../images/oval.svg?1616419112749');
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Cat .loadingNode {
height: 11px;
width: 18px;
margin-left: 4px;
position: relative;
top: 2px;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Cat .loadingNode.visible {
display: inline;
content: url('../images/three-dots.svg?1616419112749');
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .counterNode {
order: 2;
@ -546,12 +549,8 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .counterNod
color: white;
background: #2a89bc;
border-radius: 4px;
vertical-align: middle;
float: right;
position: relative;
line-height: 14px;
margin-right: 8px;
margin-top: 2px;
min-width: 23px;
height: 14px;
}
@ -580,6 +579,8 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .dijitTreeL
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
top: -0.5px;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .dijitTreeLabel.Unread {
font-weight: bold;
@ -615,8 +616,6 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow i.icon.icon
color: #69C671;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow i.icon.icon-restore {
position: relative;
top: -1px;
font-weight: bold;
color: #257aa7;
}
@ -1921,6 +1920,14 @@ body.ttrss_utility.share_popup .content {
flex-direction: row;
align-items: center;
}
.flat .dijitTree .dijitTreeRowFlex .dijitTreeIcon {
font-size: inherit;
height: auto;
}
.flat .dijitTree .dijitTreeRowFlex .dijitTreeExpando {
height: auto;
line-height: 0;
}
.flat .dijitTree .dijitFolderClosed,
.flat .dijitTree .dijitFolderOpened {
display: none;

2
themes/light/defines.less
View File

@ -1,3 +1,5 @@
@cache-version: `( new Date() ).getTime()`;
@fonts-ui-bold: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
@fonts-ui: "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;

11
themes/light/dijit_basic.less
View File

@ -111,6 +111,17 @@
display : flex;
flex-direction : row;
align-items : center;
// AAAAAA (pushes element down)
.dijitTreeIcon {
font-size : inherit;
height : auto;
}
.dijitTreeExpando {
height : auto;
line-height : 0;
}
}
.dijitFolderClosed,

37
themes/light/tt-rss.less
View File

@ -593,20 +593,16 @@ body.ttrss_main {
.dijitTreeRow {
border : 1px solid transparent;
.loadingNode {
display : none;
&.visible {
display : inline;
}
}
&.Is_Feed {
.loadingNode {
left : -2px;
height : 14px;
width : 14px;
position : relative;
&.visible {
content: url('../images/oval.svg?@{cache-version}');
}
}
}
@ -615,6 +611,13 @@ body.ttrss_main {
height : 11px;
width : 18px;
margin-left : 4px;
position : relative;
top : 2px;
&.visible {
display : inline;
content: url('../images/three-dots.svg?@{cache-version}');
}
}
}
@ -628,12 +631,12 @@ body.ttrss_main {
color : white;
background : lighten(@color-accent, 5%);
border-radius : 4px;
vertical-align : middle;
float : right;
position : relative;
//vertical-align : middle;
//float : right;
//position : relative;
line-height : 14px;
margin-right : 8px;
margin-top : 2px;
//margin-top : 2px;
min-width : 23px;
height : 14px;
@ -666,7 +669,11 @@ body.ttrss_main {
cursor : pointer;
min-width : 0;
overflow : hidden;
text-overflow: ellipsis;
text-overflow : ellipsis;
position : relative;
// Segoe UI (@fonts-ui) seems to have wrong baseline set
top : -0.5px;
&.Unread {
font-weight : bold;
@ -712,8 +719,8 @@ body.ttrss_main {
}
i.icon.icon-restore {
position : relative;
top : -1px;
//position : relative;
//top : -1px;
font-weight : bold;
color : @color-accent;
}

31
themes/night.css
View File

@ -520,22 +520,25 @@ body.ttrss_main #feeds-holder #feedTree {
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow {
border: 1px solid transparent;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .loadingNode {
display: none;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .loadingNode.visible {
display: inline;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Feed .loadingNode {
left: -2px;
height: 14px;
width: 14px;
position: relative;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Feed .loadingNode.visible {
content: url('../images/oval.svg?1616419112860');
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Cat .loadingNode {
height: 11px;
width: 18px;
margin-left: 4px;
position: relative;
top: 2px;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Cat .loadingNode.visible {
display: inline;
content: url('../images/three-dots.svg?1616419112860');
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .counterNode {
order: 2;
@ -547,12 +550,8 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .counterNod
color: white;
background: #cd8b31;
border-radius: 4px;
vertical-align: middle;
float: right;
position: relative;
line-height: 14px;
margin-right: 8px;
margin-top: 2px;
min-width: 23px;
height: 14px;
}
@ -581,6 +580,8 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .dijitTreeL
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
top: -0.5px;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .dijitTreeLabel.Unread {
font-weight: bold;
@ -616,8 +617,6 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow i.icon.icon
color: #69C671;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow i.icon.icon-restore {
position: relative;
top: -1px;
font-weight: bold;
color: #b87d2c;
}
@ -1824,6 +1823,14 @@ body.ttrss_utility fieldset > label.checkbox {
flex-direction: row;
align-items: center;
}
.flat .dijitTree .dijitTreeRowFlex .dijitTreeIcon {
font-size: inherit;
height: auto;
}
.flat .dijitTree .dijitTreeRowFlex .dijitTreeExpando {
height: auto;
line-height: 0;
}
.flat .dijitTree .dijitFolderClosed,
.flat .dijitTree .dijitFolderOpened {
display: none;

31
themes/night_blue.css
View File

@ -520,22 +520,25 @@ body.ttrss_main #feeds-holder #feedTree {
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow {
border: 1px solid transparent;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .loadingNode {
display: none;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .loadingNode.visible {
display: inline;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Feed .loadingNode {
left: -2px;
height: 14px;
width: 14px;
position: relative;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Feed .loadingNode.visible {
content: url('../images/oval.svg?1616419112800');
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Cat .loadingNode {
height: 11px;
width: 18px;
margin-left: 4px;
position: relative;
top: 2px;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Cat .loadingNode.visible {
display: inline;
content: url('../images/three-dots.svg?1616419112800');
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .counterNode {
order: 2;
@ -547,12 +550,8 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .counterNod
color: white;
background: #2a89bc;
border-radius: 4px;
vertical-align: middle;
float: right;
position: relative;
line-height: 14px;
margin-right: 8px;
margin-top: 2px;
min-width: 23px;
height: 14px;
}
@ -581,6 +580,8 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .dijitTreeL
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
top: -0.5px;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .dijitTreeLabel.Unread {
font-weight: bold;
@ -616,8 +617,6 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow i.icon.icon
color: #69C671;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow i.icon.icon-restore {
position: relative;
top: -1px;
font-weight: bold;
color: #257aa7;
}
@ -1824,6 +1823,14 @@ body.ttrss_utility fieldset > label.checkbox {
flex-direction: row;
align-items: center;
}
.flat .dijitTree .dijitTreeRowFlex .dijitTreeIcon {
font-size: inherit;
height: auto;
}
.flat .dijitTree .dijitTreeRowFlex .dijitTreeExpando {
height: auto;
line-height: 0;
}
.flat .dijitTree .dijitFolderClosed,
.flat .dijitTree .dijitFolderOpened {
display: none;