summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--plugins/shorten_expanded/init.css3
-rw-r--r--plugins/shorten_expanded/init.js94
-rw-r--r--themes/compact.css18
-rw-r--r--themes/compact_night.css22
-rw-r--r--themes/light.css18
-rw-r--r--themes/light/cdm.less8
-rw-r--r--themes/light/defines.less1
-rw-r--r--themes/light/tt-rss.less7
-rw-r--r--themes/night.css22
-rw-r--r--themes/night_base.less2
-rw-r--r--themes/night_blue.css22
11 files changed, 148 insertions, 69 deletions
diff --git a/plugins/shorten_expanded/init.css b/plugins/shorten_expanded/init.css
index 0966aa1f9..e0a209903 100644
--- a/plugins/shorten_expanded/init.css
+++ b/plugins/shorten_expanded/init.css
@@ -1,7 +1,8 @@
.content-shrink-wrap {
overflow : hidden;
text-overflow: ellipsis;
- height : 800px;
+ height : 80vh;
+ margin-bottom : 8px;
}
.expand-prompt {
diff --git a/plugins/shorten_expanded/init.js b/plugins/shorten_expanded/init.js
index 0abc8c129..40bb80790 100644
--- a/plugins/shorten_expanded/init.js
+++ b/plugins/shorten_expanded/init.js
@@ -1,10 +1,68 @@
-/* global Plugins, __, require, PluginHost */
-
-const _shorten_expanded_threshold = 1.5; //window heights
+/* global Plugins, __, require, PluginHost, App, dojo */
Plugins.Shorten_Expanded = {
+ threshold: 1.5, // of window height
+ shorten_if_needed: function(row) {
+
+ const content = row.querySelector(".content");
+ const content_inner = row.querySelector(".content-inner");
+
+ console.log('shorten_expanded', row.id, content.offsetHeight, 'vs', this.threshold * window.innerHeight);
+
+ if (content && content_inner && content.offsetHeight >= this.threshold * window.innerHeight) {
+
+ const attachments = row.querySelector(".attachments-inline"); // optional
+
+ content_inner.innerHTML = `
+ <div class="content-shrink-wrap">
+ ${content_inner.innerHTML}
+ ${attachments ? attachments.innerHTML : ''}
+ </div>
+ <button dojoType="dijit.form.Button" class="alt-info expand-prompt" onclick="return Plugins.Shorten_Expanded.expand('${row.id}')" href="#">
+ ${App.FormFields.icon('add')}
+ ${__("Expand article")}
+ </button>`;
+
+ if (attachments)
+ attachments.innerHTML = "";
+
+ dojo.parser.parse(content_inner);
+
+ return true;
+ }
+ return false;
+ },
+ process_row: function(row) {
+
+ if (this.shorten_if_needed(row))
+ return;
+
+ const promises = [];
+
+ [...row.querySelectorAll("img, video")].forEach((img) => {
+ const promise = new Promise((resolve, reject) => {
+ img.onload = () => resolve(img);
+ img.onloadeddata = () => resolve(img);
+ img.error = () => reject(new Error("unable to load video"));
+ img.onerror = () => reject(new Error("unable to load image"));
+ });
+
+ const timeout = new Promise((resolve, reject) => {
+ const id = setTimeout(() => {
+ clearTimeout(id);
+ reject(new Error("timed out"));
+ }, 250)
+ })
+
+ promises.push(Promise.race([promise, timeout]));
+ });
+
+ Promise.allSettled(promises).then(() => {
+ this.shorten_if_needed(row);
+ });
+ },
expand: function(id) {
- const row = $(id);
+ const row = App.byId(id);
if (row) {
const content = row.querySelector(".content-shrink-wrap");
@@ -21,33 +79,7 @@ Plugins.Shorten_Expanded = {
require(['dojo/_base/kernel', 'dojo/ready'], function (dojo, ready) {
ready(function() {
PluginHost.register(PluginHost.HOOK_ARTICLE_RENDERED_CDM, function(row) {
- window.setTimeout(function() {
- if (row) {
-
- const content = row.querySelector(".content-inner");
-
- //console.log('shorten', row.offsetHeight, 'vs', _shorten_expanded_threshold * window.innerHeight);
-
- if (content && row.offsetHeight >= _shorten_expanded_threshold * window.innerHeight) {
-
- const attachments = row.querySelector(".attachments-inline"); // optional
-
- content.innerHTML = `
- <div class="content-shrink-wrap">
- ${content.innerHTML}
- ${attachments ? attachments.innerHTML : ''}
- </div>
- <button dojoType="dijit.form.Button" class="alt-info expand-prompt" onclick="return Plugins.Shorten_Expanded.expand('${row.id}')" href="#">
- ${__("Click to expand article")}</button>`;
-
- if (attachments)
- attachments.innerHTML = "";
-
- dojo.parser.parse(content);
- }
- }
- }, 150);
-
+ Plugins.Shorten_Expanded.process_row(row);
return true;
});
});
diff --git a/themes/compact.css b/themes/compact.css
index e484323e1..ddaf8c4de 100644
--- a/themes/compact.css
+++ b/themes/compact.css
@@ -982,6 +982,11 @@ body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-show
body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-shows-special="false"] #feeds-holder #feedTree .dijitTreeRow:not(.Unread):not(.AlwaysVisible) {
display: none;
}
+body.ttrss_main {
+ /*.score-neutral i.icon-score {
+ opacity : 0.5;
+ }*/
+}
body.ttrss_main #toolbar-headlines i.icon-syndicate {
color: #ff7c4b;
margin-right: 8px;
@@ -1018,11 +1023,9 @@ body.ttrss_main .score-high i.icon-score {
body.ttrss_main .score-low i.icon-score {
color: #500;
}
-body.ttrss_main .score-neutral i.icon-score {
- opacity: 0.5;
-}
body.ttrss_main i.icon-score {
cursor: pointer;
+ color: #777;
}
body.ttrss_main .panel {
border: 1px solid #ddd;
@@ -1206,8 +1209,10 @@ body.ttrss_utility div.autocomplete ul li {
video::-webkit-media-controls-overlay-play-button {
display: none;
}
-.cdm i.material-icons {
- color: #777;
+.cdm {
+ /*i.material-icons {
+ color : @color-icon;
+ }*/
}
.cdm .header {
position: sticky;
@@ -1269,6 +1274,9 @@ video::-webkit-media-controls-overlay-play-button {
clear: both;
align-items: center;
}
+.cdm .footer i.material-icons {
+ color: #777;
+}
.cdm .footer .left {
flex-grow: 2;
}
diff --git a/themes/compact_night.css b/themes/compact_night.css
index d086a4bd4..54dcb9b04 100644
--- a/themes/compact_night.css
+++ b/themes/compact_night.css
@@ -51,7 +51,7 @@ body.ttrss_main div.post div.header img,
body.ttrss_main div.post div.header i.material-icons {
margin: 0px 4px;
vertical-align: middle;
- color: #777;
+ color: #999;
}
body.ttrss_main div.post div.header .title {
flex-grow: 2;
@@ -226,7 +226,7 @@ body.ttrss_main .hl .right i.material-icons {
font-size: 21px;
}
body.ttrss_main .hl .right i.material-icons {
- color: #777;
+ color: #999;
}
body.ttrss_main .hl div.title {
cursor: pointer;
@@ -982,6 +982,11 @@ body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-show
body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-shows-special="false"] #feeds-holder #feedTree .dijitTreeRow:not(.Unread):not(.AlwaysVisible) {
display: none;
}
+body.ttrss_main {
+ /*.score-neutral i.icon-score {
+ opacity : 0.5;
+ }*/
+}
body.ttrss_main #toolbar-headlines i.icon-syndicate {
color: #ff7c4b;
margin-right: 8px;
@@ -1018,11 +1023,9 @@ body.ttrss_main .score-high i.icon-score {
body.ttrss_main .score-low i.icon-score {
color: #500;
}
-body.ttrss_main .score-neutral i.icon-score {
- opacity: 0.5;
-}
body.ttrss_main i.icon-score {
cursor: pointer;
+ color: #999;
}
body.ttrss_main .panel {
border: 1px solid #222;
@@ -1206,8 +1209,10 @@ body.ttrss_utility div.autocomplete ul li {
video::-webkit-media-controls-overlay-play-button {
display: none;
}
-.cdm i.material-icons {
- color: #777;
+.cdm {
+ /*i.material-icons {
+ color : @color-icon;
+ }*/
}
.cdm .header {
position: sticky;
@@ -1269,6 +1274,9 @@ video::-webkit-media-controls-overlay-play-button {
clear: both;
align-items: center;
}
+.cdm .footer i.material-icons {
+ color: #999;
+}
.cdm .footer .left {
flex-grow: 2;
}
diff --git a/themes/light.css b/themes/light.css
index 93acc0f1e..4b2baa286 100644
--- a/themes/light.css
+++ b/themes/light.css
@@ -982,6 +982,11 @@ body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-show
body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-shows-special="false"] #feeds-holder #feedTree .dijitTreeRow:not(.Unread):not(.AlwaysVisible) {
display: none;
}
+body.ttrss_main {
+ /*.score-neutral i.icon-score {
+ opacity : 0.5;
+ }*/
+}
body.ttrss_main #toolbar-headlines i.icon-syndicate {
color: #ff7c4b;
margin-right: 8px;
@@ -1018,11 +1023,9 @@ body.ttrss_main .score-high i.icon-score {
body.ttrss_main .score-low i.icon-score {
color: #500;
}
-body.ttrss_main .score-neutral i.icon-score {
- opacity: 0.5;
-}
body.ttrss_main i.icon-score {
cursor: pointer;
+ color: #777;
}
body.ttrss_main .panel {
border: 1px solid #ddd;
@@ -1206,8 +1209,10 @@ body.ttrss_utility div.autocomplete ul li {
video::-webkit-media-controls-overlay-play-button {
display: none;
}
-.cdm i.material-icons {
- color: #777;
+.cdm {
+ /*i.material-icons {
+ color : @color-icon;
+ }*/
}
.cdm .header {
position: sticky;
@@ -1269,6 +1274,9 @@ video::-webkit-media-controls-overlay-play-button {
clear: both;
align-items: center;
}
+.cdm .footer i.material-icons {
+ color: #777;
+}
.cdm .footer .left {
flex-grow: 2;
}
diff --git a/themes/light/cdm.less b/themes/light/cdm.less
index 91e07e3f4..760fa44c7 100644
--- a/themes/light/cdm.less
+++ b/themes/light/cdm.less
@@ -1,7 +1,7 @@
.cdm {
- i.material-icons {
+ /*i.material-icons {
color : @color-icon;
- }
+ }*/
.header {
position: sticky;
@@ -70,6 +70,10 @@
clear : both;
align-items : center;
+ i.material-icons {
+ color : @color-icon;
+ }
+
.left {
flex-grow : 2;
}
diff --git a/themes/light/defines.less b/themes/light/defines.less
index dd3f62251..0786775ad 100644
--- a/themes/light/defines.less
+++ b/themes/light/defines.less
@@ -14,6 +14,7 @@
@border-default : #ddd;
@default-text: #555;
@color-icon: #777;
+@color-hl-icon: #ccc;
@color-tooltip-fg: @color-panel-bg;
@color-tooltip-bg: darken(@color-accent, 10%);
diff --git a/themes/light/tt-rss.less b/themes/light/tt-rss.less
index fa7e3e2a1..38593a8a5 100644
--- a/themes/light/tt-rss.less
+++ b/themes/light/tt-rss.less
@@ -423,7 +423,7 @@ body.ttrss_main {
i.marked-pic, i.pub-pic {
cursor : pointer;
- color : #ccc;
+ color : @color-hl-icon;
}
div.errorExplained {
@@ -1208,12 +1208,13 @@ body.ttrss_main {
color : #500;
}
- .score-neutral i.icon-score {
+ /*.score-neutral i.icon-score {
opacity : 0.5;
- }
+ }*/
i.icon-score {
cursor : pointer;
+ color : @color-icon;
}
.panel {
diff --git a/themes/night.css b/themes/night.css
index 7bc8e10e3..59cde9826 100644
--- a/themes/night.css
+++ b/themes/night.css
@@ -52,7 +52,7 @@ body.ttrss_main div.post div.header img,
body.ttrss_main div.post div.header i.material-icons {
margin: 0px 4px;
vertical-align: middle;
- color: #777;
+ color: #999;
}
body.ttrss_main div.post div.header .title {
flex-grow: 2;
@@ -227,7 +227,7 @@ body.ttrss_main .hl .right i.material-icons {
font-size: 21px;
}
body.ttrss_main .hl .right i.material-icons {
- color: #777;
+ color: #999;
}
body.ttrss_main .hl div.title {
cursor: pointer;
@@ -983,6 +983,11 @@ body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-show
body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-shows-special="false"] #feeds-holder #feedTree .dijitTreeRow:not(.Unread):not(.AlwaysVisible) {
display: none;
}
+body.ttrss_main {
+ /*.score-neutral i.icon-score {
+ opacity : 0.5;
+ }*/
+}
body.ttrss_main #toolbar-headlines i.icon-syndicate {
color: #ff7c4b;
margin-right: 8px;
@@ -1019,11 +1024,9 @@ body.ttrss_main .score-high i.icon-score {
body.ttrss_main .score-low i.icon-score {
color: #500;
}
-body.ttrss_main .score-neutral i.icon-score {
- opacity: 0.5;
-}
body.ttrss_main i.icon-score {
cursor: pointer;
+ color: #999;
}
body.ttrss_main .panel {
border: 1px solid #222;
@@ -1207,8 +1210,10 @@ body.ttrss_utility div.autocomplete ul li {
video::-webkit-media-controls-overlay-play-button {
display: none;
}
-.cdm i.material-icons {
- color: #777;
+.cdm {
+ /*i.material-icons {
+ color : @color-icon;
+ }*/
}
.cdm .header {
position: sticky;
@@ -1270,6 +1275,9 @@ video::-webkit-media-controls-overlay-play-button {
clear: both;
align-items: center;
}
+.cdm .footer i.material-icons {
+ color: #999;
+}
.cdm .footer .left {
flex-grow: 2;
}
diff --git a/themes/night_base.less b/themes/night_base.less
index 6c7ba9964..78056d710 100644
--- a/themes/night_base.less
+++ b/themes/night_base.less
@@ -9,7 +9,7 @@
@default-fg: @default-text;
@border-default: #222;
@default-bg : #333;
-
+@color-icon: #999;
@border-light : #666;
@default-text: #ccc;
diff --git a/themes/night_blue.css b/themes/night_blue.css
index 052ebf5ae..dd3308cb0 100644
--- a/themes/night_blue.css
+++ b/themes/night_blue.css
@@ -52,7 +52,7 @@ body.ttrss_main div.post div.header img,
body.ttrss_main div.post div.header i.material-icons {
margin: 0px 4px;
vertical-align: middle;
- color: #777;
+ color: #999;
}
body.ttrss_main div.post div.header .title {
flex-grow: 2;
@@ -227,7 +227,7 @@ body.ttrss_main .hl .right i.material-icons {
font-size: 21px;
}
body.ttrss_main .hl .right i.material-icons {
- color: #777;
+ color: #999;
}
body.ttrss_main .hl div.title {
cursor: pointer;
@@ -983,6 +983,11 @@ body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-show
body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-shows-special="false"] #feeds-holder #feedTree .dijitTreeRow:not(.Unread):not(.AlwaysVisible) {
display: none;
}
+body.ttrss_main {
+ /*.score-neutral i.icon-score {
+ opacity : 0.5;
+ }*/
+}
body.ttrss_main #toolbar-headlines i.icon-syndicate {
color: #ff7c4b;
margin-right: 8px;
@@ -1019,11 +1024,9 @@ body.ttrss_main .score-high i.icon-score {
body.ttrss_main .score-low i.icon-score {
color: #500;
}
-body.ttrss_main .score-neutral i.icon-score {
- opacity: 0.5;
-}
body.ttrss_main i.icon-score {
cursor: pointer;
+ color: #999;
}
body.ttrss_main .panel {
border: 1px solid #222;
@@ -1207,8 +1210,10 @@ body.ttrss_utility div.autocomplete ul li {
video::-webkit-media-controls-overlay-play-button {
display: none;
}
-.cdm i.material-icons {
- color: #777;
+.cdm {
+ /*i.material-icons {
+ color : @color-icon;
+ }*/
}
.cdm .header {
position: sticky;
@@ -1270,6 +1275,9 @@ video::-webkit-media-controls-overlay-play-button {
clear: both;
align-items: center;
}
+.cdm .footer i.material-icons {
+ color: #999;
+}
.cdm .footer .left {
flex-grow: 2;
}
generated by cgit v1.2.3 (git 2.25.1) at 2024-06-30 21:53:43 +0000