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

another attempt at flex-based feed tree

This commit is contained in:
Andrew Dolgov 2021-03-21 17:14:45 +03:00
parent 68299c914b
commit e12a6ca540
8 changed files with 168 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/FeedTree.js
View File

@ -202,7 +202,7 @@ define(["dojo/_base/declare", "dojo/dom-construct", "dojo/_base/array", "dojo/co
return (item.unread <= 0) ? "dijitTreeLabel" : "dijitTreeLabel Unread";
},
getRowClass: function (item/*, opened */) {
let rc = "dijitTreeRow";
let rc = "dijitTreeRow dijitTreeRowFlex";
const is_cat = String(item.id).indexOf('CAT:') != -1;

38
themes/compact.css
View File

@ -526,11 +526,10 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .loadingNod
display: inline;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Feed .loadingNode {
left: 2px;
left: -2px;
height: 14px;
width: 14px;
position: relative;
top: -1px;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Cat .loadingNode {
height: 11px;
@ -538,6 +537,7 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Cat .loa
margin-left: 4px;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .counterNode {
order: 2;
font-weight: bold;
display: none;
font-size: 9px;
@ -569,8 +569,17 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow[data-feed-i
background-color: #3ea447;
border-color: #307f37;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .dijitTreeContent {
display: flex;
align-items: center;
flex-grow: 2;
min-width: 0;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .dijitTreeLabel {
cursor: pointer;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .dijitTreeLabel.Unread {
font-weight: bold;
@ -1820,12 +1829,16 @@ body.ttrss_utility.share_popup .content {
border-width: 0;
box-shadow: none;
}
.flat {
/*#feedTree {
.dijitTreeContent .dijitInline {
vertical-align : baseline;
}
}*/
}
.flat li {
padding: 2px;
}
.flat #feedTree .dijitTreeContent .dijitInline {
vertical-align: baseline;
}
.flat .dijitButton i.material-icons {
position: relative;
top: -1px;
@ -1897,6 +1910,17 @@ body.ttrss_utility.share_popup .content {
.flat .dijitAccordionInnerContainer:not(.dijitSelected) i.material-icons {
color: #257aa7;
}
.flat .dijitTree {
/*.dijitTreeRow .dijitTreeExpando {
position : relative;
top : -2px;
}*/
}
.flat .dijitTree .dijitTreeRowFlex {
display: flex;
flex-direction: row;
align-items: center;
}
.flat .dijitTree .dijitFolderClosed,
.flat .dijitTree .dijitFolderOpened {
display: none;
@ -1910,10 +1934,6 @@ body.ttrss_utility.share_popup .content {
.flat .dijitTree .dijitTreeNode .dijitTreeRow.dijitTreeRowSelected {
color: white;
}
.flat .dijitTree .dijitTreeRow .dijitTreeExpando {
position: relative;
top: -2px;
}
.flat .dijitTree .labelParam {
float: right;
margin-right: 16px;

38
themes/compact_night.css
View File

@ -526,11 +526,10 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .loadingNod
display: inline;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Feed .loadingNode {
left: 2px;
left: -2px;
height: 14px;
width: 14px;
position: relative;
top: -1px;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Cat .loadingNode {
height: 11px;
@ -538,6 +537,7 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Cat .loa
margin-left: 4px;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .counterNode {
order: 2;
font-weight: bold;
display: none;
font-size: 9px;
@ -569,8 +569,17 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow[data-feed-i
background-color: #3ea447;
border-color: #307f37;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .dijitTreeContent {
display: flex;
align-items: center;
flex-grow: 2;
min-width: 0;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .dijitTreeLabel {
cursor: pointer;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .dijitTreeLabel.Unread {
font-weight: bold;
@ -1722,12 +1731,16 @@ body.ttrss_utility fieldset > label.checkbox {
display: inline;
font-weight: normal;
}
.flat {
/*#feedTree {
.dijitTreeContent .dijitInline {
vertical-align : baseline;
}
}*/
}
.flat li {
padding: 2px;
}
.flat #feedTree .dijitTreeContent .dijitInline {
vertical-align: baseline;
}
.flat .dijitButton i.material-icons {
position: relative;
top: -1px;
@ -1799,6 +1812,17 @@ body.ttrss_utility fieldset > label.checkbox {
.flat .dijitAccordionInnerContainer:not(.dijitSelected) i.material-icons {
color: #b87d2c;
}
.flat .dijitTree {
/*.dijitTreeRow .dijitTreeExpando {
position : relative;
top : -2px;
}*/
}
.flat .dijitTree .dijitTreeRowFlex {
display: flex;
flex-direction: row;
align-items: center;
}
.flat .dijitTree .dijitFolderClosed,
.flat .dijitTree .dijitFolderOpened {
display: none;
@ -1812,10 +1836,6 @@ body.ttrss_utility fieldset > label.checkbox {
.flat .dijitTree .dijitTreeNode .dijitTreeRow.dijitTreeRowSelected {
color: white;
}
.flat .dijitTree .dijitTreeRow .dijitTreeExpando {
position: relative;
top: -2px;
}
.flat .dijitTree .labelParam {
float: right;
margin-right: 16px;

38
themes/light.css
View File

@ -526,11 +526,10 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .loadingNod
display: inline;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Feed .loadingNode {
left: 2px;
left: -2px;
height: 14px;
width: 14px;
position: relative;
top: -1px;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Cat .loadingNode {
height: 11px;
@ -538,6 +537,7 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Cat .loa
margin-left: 4px;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .counterNode {
order: 2;
font-weight: bold;
display: none;
font-size: 9px;
@ -569,8 +569,17 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow[data-feed-i
background-color: #3ea447;
border-color: #307f37;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .dijitTreeContent {
display: flex;
align-items: center;
flex-grow: 2;
min-width: 0;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .dijitTreeLabel {
cursor: pointer;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .dijitTreeLabel.Unread {
font-weight: bold;
@ -1820,12 +1829,16 @@ body.ttrss_utility.share_popup .content {
border-width: 0;
box-shadow: none;
}
.flat {
/*#feedTree {
.dijitTreeContent .dijitInline {
vertical-align : baseline;
}
}*/
}
.flat li {
padding: 2px;
}
.flat #feedTree .dijitTreeContent .dijitInline {
vertical-align: baseline;
}
.flat .dijitButton i.material-icons {
position: relative;
top: -1px;
@ -1897,6 +1910,17 @@ body.ttrss_utility.share_popup .content {
.flat .dijitAccordionInnerContainer:not(.dijitSelected) i.material-icons {
color: #257aa7;
}
.flat .dijitTree {
/*.dijitTreeRow .dijitTreeExpando {
position : relative;
top : -2px;
}*/
}
.flat .dijitTree .dijitTreeRowFlex {
display: flex;
flex-direction: row;
align-items: center;
}
.flat .dijitTree .dijitFolderClosed,
.flat .dijitTree .dijitFolderOpened {
display: none;
@ -1910,10 +1934,6 @@ body.ttrss_utility.share_popup .content {
.flat .dijitTree .dijitTreeNode .dijitTreeRow.dijitTreeRowSelected {
color: white;
}
.flat .dijitTree .dijitTreeRow .dijitTreeExpando {
position: relative;
top: -2px;
}
.flat .dijitTree .labelParam {
float: right;
margin-right: 16px;

14
themes/light/dijit_basic.less
View File

@ -4,11 +4,11 @@
padding: 2px;
}
#feedTree {
/*#feedTree {
.dijitTreeContent .dijitInline {
vertical-align : baseline;
}
}
}*/
.dijitButton i.material-icons {
position: relative;
@ -107,6 +107,12 @@
}
.dijitTree {
.dijitTreeRowFlex {
display : flex;
flex-direction : row;
align-items : center;
}
.dijitFolderClosed,
.dijitFolderOpened {
display : none;
@ -126,10 +132,10 @@
color : white;
}
.dijitTreeRow .dijitTreeExpando {
/*.dijitTreeRow .dijitTreeExpando {
position : relative;
top : -2px;
}
}*/
.labelParam {
float: right;

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

@ -603,11 +603,10 @@ body.ttrss_main {
&.Is_Feed {
.loadingNode {
left : 2px;
left : -2px;
height : 14px;
width : 14px;
position : relative;
top : -1px;
}
}
@ -620,6 +619,7 @@ body.ttrss_main {
}
.counterNode {
order : 2;
font-weight : bold;
display : none;
font-size : @font-size-tiny;
@ -655,8 +655,18 @@ body.ttrss_main {
border-color: darken(@color-checked, 25%);
}
.dijitTreeContent {
display : flex;
align-items : center;
flex-grow : 2;
min-width : 0;
}
.dijitTreeLabel {
cursor : pointer;
min-width : 0;
overflow : hidden;
text-overflow: ellipsis;
&.Unread {
font-weight : bold;

38
themes/night.css
View File

@ -527,11 +527,10 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .loadingNod
display: inline;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Feed .loadingNode {
left: 2px;
left: -2px;
height: 14px;
width: 14px;
position: relative;
top: -1px;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Cat .loadingNode {
height: 11px;
@ -539,6 +538,7 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Cat .loa
margin-left: 4px;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .counterNode {
order: 2;
font-weight: bold;
display: none;
font-size: 9px;
@ -570,8 +570,17 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow[data-feed-i
background-color: #3ea447;
border-color: #307f37;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .dijitTreeContent {
display: flex;
align-items: center;
flex-grow: 2;
min-width: 0;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .dijitTreeLabel {
cursor: pointer;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .dijitTreeLabel.Unread {
font-weight: bold;
@ -1723,12 +1732,16 @@ body.ttrss_utility fieldset > label.checkbox {
display: inline;
font-weight: normal;
}
.flat {
/*#feedTree {
.dijitTreeContent .dijitInline {
vertical-align : baseline;
}
}*/
}
.flat li {
padding: 2px;
}
.flat #feedTree .dijitTreeContent .dijitInline {
vertical-align: baseline;
}
.flat .dijitButton i.material-icons {
position: relative;
top: -1px;
@ -1800,6 +1813,17 @@ body.ttrss_utility fieldset > label.checkbox {
.flat .dijitAccordionInnerContainer:not(.dijitSelected) i.material-icons {
color: #b87d2c;
}
.flat .dijitTree {
/*.dijitTreeRow .dijitTreeExpando {
position : relative;
top : -2px;
}*/
}
.flat .dijitTree .dijitTreeRowFlex {
display: flex;
flex-direction: row;
align-items: center;
}
.flat .dijitTree .dijitFolderClosed,
.flat .dijitTree .dijitFolderOpened {
display: none;
@ -1813,10 +1837,6 @@ body.ttrss_utility fieldset > label.checkbox {
.flat .dijitTree .dijitTreeNode .dijitTreeRow.dijitTreeRowSelected {
color: white;
}
.flat .dijitTree .dijitTreeRow .dijitTreeExpando {
position: relative;
top: -2px;
}
.flat .dijitTree .labelParam {
float: right;
margin-right: 16px;

38
themes/night_blue.css
View File

@ -527,11 +527,10 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .loadingNod
display: inline;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Feed .loadingNode {
left: 2px;
left: -2px;
height: 14px;
width: 14px;
position: relative;
top: -1px;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Cat .loadingNode {
height: 11px;
@ -539,6 +538,7 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Cat .loa
margin-left: 4px;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .counterNode {
order: 2;
font-weight: bold;
display: none;
font-size: 9px;
@ -570,8 +570,17 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow[data-feed-i
background-color: #3ea447;
border-color: #307f37;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .dijitTreeContent {
display: flex;
align-items: center;
flex-grow: 2;
min-width: 0;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .dijitTreeLabel {
cursor: pointer;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .dijitTreeLabel.Unread {
font-weight: bold;
@ -1723,12 +1732,16 @@ body.ttrss_utility fieldset > label.checkbox {
display: inline;
font-weight: normal;
}
.flat {
/*#feedTree {
.dijitTreeContent .dijitInline {
vertical-align : baseline;
}
}*/
}
.flat li {
padding: 2px;
}
.flat #feedTree .dijitTreeContent .dijitInline {
vertical-align: baseline;
}
.flat .dijitButton i.material-icons {
position: relative;
top: -1px;
@ -1800,6 +1813,17 @@ body.ttrss_utility fieldset > label.checkbox {
.flat .dijitAccordionInnerContainer:not(.dijitSelected) i.material-icons {
color: #257aa7;
}
.flat .dijitTree {
/*.dijitTreeRow .dijitTreeExpando {
position : relative;
top : -2px;
}*/
}
.flat .dijitTree .dijitTreeRowFlex {
display: flex;
flex-direction: row;
align-items: center;
}
.flat .dijitTree .dijitFolderClosed,
.flat .dijitTree .dijitFolderOpened {
display: none;
@ -1813,10 +1837,6 @@ body.ttrss_utility fieldset > label.checkbox {
.flat .dijitTree .dijitTreeNode .dijitTreeRow.dijitTreeRowSelected {
color: white;
}
.flat .dijitTree .dijitTreeRow .dijitTreeExpando {
position: relative;
top: -2px;
}
.flat .dijitTree .labelParam {
float: right;
margin-right: 16px;