yet another flex feedtree attemptexp-flex-feedtree

8 files changed, 130 insertions, 75 deletions

diff --git a/themes/compact.css b/themes/compact.css
index e9bdbd143..9547c02e6 100644
--- a/themes/compact.css
+++ b/themes/compact.css
@@ -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;
diff --git a/themes/compact_night.css b/themes/compact_night.css
index 5510f9498..675cb21af 100644
--- a/themes/compact_night.css
+++ b/themes/compact_night.css
@@ -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;
diff --git a/themes/light.css b/themes/light.css
index 419a3fe8d..2beb5673b 100644
--- a/themes/light.css
+++ b/themes/light.css
@@ -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;
diff --git a/themes/light/defines.less b/themes/light/defines.less
index db86ee0c0..d591eedd9 100644
--- a/themes/light/defines.less
+++ b/themes/light/defines.less
@@ -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;
 
diff --git a/themes/light/dijit_basic.less b/themes/light/dijit_basic.less
index 7e93975ba..f29461530 100644
--- a/themes/light/dijit_basic.less
+++ b/themes/light/dijit_basic.less
@@ -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,
diff --git a/themes/light/tt-rss.less b/themes/light/tt-rss.less
index 2d4a6f772..795b9589e 100644
--- a/themes/light/tt-rss.less
+++ b/themes/light/tt-rss.less
@@ -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;
 					}
diff --git a/themes/night.css b/themes/night.css
index a7e8db4c9..52024ca33 100644
--- a/themes/night.css
+++ b/themes/night.css
@@ -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;
diff --git a/themes/night_blue.css b/themes/night_blue.css
index bce609ef4..95d83b5e9 100644
--- a/themes/night_blue.css
+++ b/themes/night_blue.css
@@ -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;