Add button to post list to open post in new browser tab

[mrichtarsky]

I prefer going through list of new posts, opening anything interesting in new tabs, flagging all feeds as read in selfoss and then going through the tabs I have opened. In essence I don't want to open posts at all in selfoss, just have a button for each entry in the post list that opens the new tab in the background.

Perhaps showing such a button can be made configurable.

I'm not a frontend expert but will take a stab at adding it, would you be interested in merging should I succeed?

[jtojnar]

Nice issue number.

I prefer going through list of new posts, opening anything interesting in new tabs, flagging all feeds as read in selfoss and then going through the tabs I have opened.

That is also the mode of operation I sometimes employ. You can already open links in new tab by clicking the item date with middle mouse button. Then, when you finish, you can mark all items as read by the button in sidebar.

The main downside of this workflow is that it does not work well with auto_stream_more, which is enabled by default – as you scroll down the feed will continue loading more articles and clicking “Mark as read” would mark those as well, so you would need to finish the whole feed (or lose some items). That could be solved with #1086 but there are still some design and implementation question marks.

Perhaps showing such a button can be made configurable.

I am not too keen on adding new togglable functionality these days, as that produces a combinatorial explosion of user interface variants, which make considering future features and testing the interface even harder. Any new feature should probably be always available unless it is possible to make it isolated from other features.

have a button for each entry in the post list that opens the new tab in the background

As mentioned, that is already available through the date link, just like on most social networks.

will take a stab at adding it, would you be interested in merging should I succeed?

I definitely would not start implementing it before the design is hashed out. Adding any new feature requires careful consideration of how it will affect the style and usability and how it will interact with other features and mobile layout. Alternative approaches should also be considered. And in the end we might still decide that the feature does not fit into selfoss. Though selfoss is customizable in user.js file so one can always add the functionality locally.

[mrichtarsky]

You can already open links in new tab by clicking the item date with middle mouse button.

Thanks, did not know that!

The main downside of this workflow is that it does not work well with auto_stream_more, which is enabled by default – as you scroll down the feed will continue loading more articles and clicking “Mark as read” would mark those as well, so you would need to finish the whole feed (or lose some items).

That's ok normally I read by tags and manage to complete one tag at a time.

I definitely would not start implementing it before the design is hashed out. Adding any new feature requires careful consideration of how it will affect the style and usability and how it will interact with other features and mobile layout. Alternative approaches should also be considered. And in the end we might still decide that the feature does not fit into selfoss. Though selfoss is customizable in user.js file so one can always add the functionality locally.

Understood, thanks for the guidance!

Clicking on the item date is a bit cumbersome since it's quite small (especially on mobile) and always in a different place. Would it be an option to turn the article title, currently inside a <h3>, into a link? Something like that (this is just an example and will probably break a lot since I just copied it without understanding any context):

diff --git a/assets/js/templates/Item.jsx b/assets/js/templates/Item.jsx
index 9430a6aa..1a1c4d4e 100755
--- a/assets/js/templates/Item.jsx
+++ b/assets/js/templates/Item.jsx
@@ -408,6 +408,14 @@ export default function Item({ currentTime, item, selected, expanded, setNavExpa
             <h3
                 className="entry-title"
                 onClick={titleOnClick}
+            >
+            <a
+                href={anonymize(item.link)}
+                className="entry-icon"
+                tabIndex="-1"
+                rel="noreferrer"
+                aria-hidden="true"
+                onClick={preventDefaultOnSmartphone}
             >
                 <span
                     className="entry-title-link"
@@ -418,6 +426,7 @@ export default function Item({ currentTime, item, selected, expanded, setNavExpa
                     onKeyUp={handleKeyUp}
                     dangerouslySetInnerHTML={titleHtml}
                 />
+                </a>
             </h3>
 
             <span className="entry-tags">

[jtojnar]

The issue with that is that the item title is

Clicking on the item date is a bit cumbersome since it's quite small (especially on mobile)

That could be fixed by increasing the padding. Also note that on mobile, the whole row serves to expand the article to make it easier to tap (though you can still long press the link to open menu.

and always in a different place.

Yeah, that is annoying to me as well. As an alternative, you can click the favicon, which already has padding set so it has larger vertical target area. Though there might be an issue if the icon is not loaded for some reason, we might want to make it so an fallback icon is shown in that case.

Would it be an option to turn the article title, currently inside a <h3>, into a link?

The title is usually the largest part of the row so it is the prime spot for expanding the item to reveal the content. Changing into a link would interfere with it.

But if you never interact with it, changing selfoss locally might be a good choice. You could add the following to user.css file to expand the icon for a simple hack:

.entry-icon {
	z-index: 300;
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	border: 2px dotted rebeccapurple;
	top: 0;
	left: 0;
}

[mrichtarsky]

Thanks, the user.css helps!

[davidoskky]

Sorry if I intervene. Since you have this problem on the mobile only, you could instead use the mobile application which has a button to open the articles in the browser directly in the list of articles.

[mrichtarsky]

Thanks, unfortunately I can't install F-Droid apps ;(