From 0f6644880a8ced1ab1e0860c585742b338382ce9 Mon Sep 17 00:00:00 2001 From: Andrew Dolgov Date: Mon, 22 Mar 2021 16:18:59 +0300 Subject: [PATCH] yet another flex feedtree attempt --- classes/rpc.php | 1 + gulpfile.js | 2 +- js/FeedTree.js | 4 ++-- themes/compact.css | 31 +++++++++++++++++------------ themes/compact_night.css | 31 +++++++++++++++++------------ themes/light.css | 31 +++++++++++++++++------------ themes/light/defines.less | 2 ++ themes/light/dijit_basic.less | 11 +++++++++++ themes/light/tt-rss.less | 37 +++++++++++++++++++++-------------- themes/night.css | 31 +++++++++++++++++------------ themes/night_blue.css | 31 +++++++++++++++++------------ 11 files changed, 134 insertions(+), 78 deletions(-) diff --git a/classes/rpc.php b/classes/rpc.php index 7c248f75d..94b29ec44 100755 --- a/classes/rpc.php +++ b/classes/rpc.php @@ -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; diff --git a/gulpfile.js b/gulpfile.js index ca766dcce..eed6c2282 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -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) { diff --git a/js/FeedTree.js b/js/FeedTree.js index 02b2f36e8..bb9bd2b2e 100755 --- a/js/FeedTree.js +++ b/js/FeedTree.js @@ -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'); } 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;