Revert "Revert "another attempt at flex-based feed tree""

This reverts commit 43744412f46d04cf2920264b4f9cc09b43d79924.

7 files changed, 167 insertions, 51 deletions

diff --git a/themes/compact.css b/themes/compact.css
index 62cdd0839..e9bdbd143 100644
--- a/themes/compact.css
+++ b/themes/compact.css
@@ -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;
diff --git a/themes/compact_night.css b/themes/compact_night.css
index 64e19c99c..5510f9498 100644
--- a/themes/compact_night.css
+++ b/themes/compact_night.css
@@ -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;
diff --git a/themes/light.css b/themes/light.css
index dbe31763a..419a3fe8d 100644
--- a/themes/light.css
+++ b/themes/light.css
@@ -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;
diff --git a/themes/light/dijit_basic.less b/themes/light/dijit_basic.less
index 4f2faadcb..7e93975ba 100644
--- a/themes/light/dijit_basic.less
+++ b/themes/light/dijit_basic.less
@@ -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;
diff --git a/themes/light/tt-rss.less b/themes/light/tt-rss.less
index 53ad04d5b..2d4a6f772 100644
--- a/themes/light/tt-rss.less
+++ b/themes/light/tt-rss.less
@@ -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;
diff --git a/themes/night.css b/themes/night.css
index 663a49811..a7e8db4c9 100644
--- a/themes/night.css
+++ b/themes/night.css
@@ -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;
diff --git a/themes/night_blue.css b/themes/night_blue.css
index f8d0096f3..bce609ef4 100644
--- a/themes/night_blue.css
+++ b/themes/night_blue.css
@@ -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;