Usability tweak

jarr/api/cluster.py

@@ -26,6 +26,7 @@
     'date': fields.DateTime()})
 content_model = cluster_ns.model('ComplexContent', {
     'type': fields.String(required=True),
+    'title': fields.String(),
     'content': fields.String(),
     'comments': fields.String(),
     'link': fields.String(),

jarr/bootstrap.py

@@ -4,7 +4,6 @@
 # required imports and code exection for basic functionning
 
 import logging
-import random
 from redis import Redis
 
 from sqlalchemy import create_engine

jarr/controllers/user.py

@@ -1,10 +1,7 @@
 import logging
-from datetime import timedelta
 
 from werkzeug.security import check_password_hash, generate_password_hash
 
-from jarr.bootstrap import conf
-from jarr.lib.utils import utc_now
 from jarr.models import User
 
 from .abstract import AbstractController

jarr/lib/content_generator.py

@@ -3,6 +3,7 @@
 import re
 from functools import lru_cache
 
+import requests
 from goose3 import Goose
 from lxml import etree
 import urllib.parse
@@ -82,6 +83,7 @@ def generate(self):
         text = self.article.title or self.article.content
         content = {'type': self.article.article_type.value,
                    'alt': html.escape(text[:IMG_ALT_MAX_LENGTH]),
+                   'title': self.article.title,
                    'src': self.article.link}
         return True, content
 
@@ -99,6 +101,7 @@ def generate(self):
                         'from article', self.article)
             try:
                 return True, {'type': self.article.article_type.value,
+                              'title': self.article.title,
                               'player': 'youtube',
                               'videoId': yt_match.group(5)}
             except IndexError:
@@ -118,6 +121,7 @@ def generate(self):
         try:
             content['content'] = self._from_goose_to_html()
             content['link'] = self._page.final_url
+            content['title'] = getattr(self._page, 'title', self.article.title)
             success = True
         except Exception:
             logger.exception("Could not rebuild parsed content for %r",

jarr/lib/html_parsing.py

@@ -6,7 +6,7 @@
 
 from jarr.bootstrap import conf
 from jarr.lib.const import FEED_MIMETYPES
-from jarr.lib.utils import clean_lang, jarr_get, rebuild_url
+from jarr.lib.utils import jarr_get, rebuild_url
 
 logger = logging.getLogger(__name__)
 CHARSET_TAG = b'<meta charset='

jsclient/src/Jarr.theme.js

@@ -10,7 +10,7 @@ export const jarrColors = {
     contrastText: "#ffffff"
   },
   background: {
-    default: "rgb(95,158,160, 0.6)"
+    default: "rgb(95, 158, 160, 0.6)"
   },
   danger: {
     main: "#F08080",

jsclient/src/const.js

@@ -2,3 +2,4 @@ export const apiUrl = process.env.REACT_APP_API_URL ? process.env.REACT_APP_API_
 export const feedListWidth = 300;
 export const editPanelWidth = 500;
 export const pageLength = 30;
+export const headerHeight = 64;

jsclient/src/features/clusterlist/components/Article.js

@@ -1,13 +1,24 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import PropTypes from "prop-types";
 import Typography from "@material-ui/core/Typography";
 import Link from "@material-ui/core/Link";
 import Divider from "@material-ui/core/Divider";
+import { headerHeight } from "../../../const";
 
 import makeStyles from "./style";
 
-function Article({ article, hidden }) {
+function Article({ article, hidden, showTitle }) {
   const classes = makeStyles();
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current && ref.current.offsetTop && ref.current.offsetParent) {
+      window.scrollTo({ left: 0,
+                        top: ref.current.offsetTop
+                            + ref.current.offsetParent.offsetTop
+                            - headerHeight * 2.3,
+                        behavior: "smooth" });
+    }
+  }, [ref]);
   let comments;
   if (article.comments) {
     comments = (<p><span>Comments</span>
@@ -17,7 +28,8 @@ function Article({ article, hidden }) {
                   </Link></p>);
   }
   return (
-    <div hidden={hidden} className={classes.article}>
+    <div hidden={hidden} className={classes.article} ref={ref}>
+      <h3 hidden={!showTitle}>{article.title}</h3>
       <p>
         <span>Link</span>
         <Link color="secondary" target="_blank"
@@ -38,10 +50,12 @@ function Article({ article, hidden }) {
 
 Article.propTypes = {
   article: PropTypes.shape({
+    title: PropTypes.string.isRequired,
     link: PropTypes.string.isRequired,
     content: PropTypes.string.isRequired,
     comments: PropTypes.string,
   }),
+  showTitle: PropTypes.bool.isRequired,
   hidden: PropTypes.bool.isRequired,
 };
 

jsclient/src/features/clusterlist/components/Articles.js

@@ -25,43 +25,40 @@ function Articles({ articles, icons, content }) {
 
   let contentTitle, contentTab;
   if (articles.length === 1 && !content) {
-    return <Article article={articles[0]} hidden={false} />;
+    return <Article article={articles[0]} hidden={false} showTitle={false} />;
   } else if (content) {
     contentTitle = (
-      <Tab key="t-0"
+      <Tab key="t-0" label=""
         className={classes.tabs}
-      //
         icon={<img src={jarrIcon} alt={proccessedContentTitle}
                    title={proccessedContentTitle} />}
-        label={proccessedContentTitle}
         value={0} aria-controls="a-0"
       />
     );
     contentTab = <Content content={content} hidden={0 !== currentIndex} />;
   }
-  const isOnlyOneTitle = [...new Set(articles.map((a) => a.title))].length === 1;
   return (
     <>
       <Tabs indicatorColor="primary" textColor="primary"
+        variant="scrollable" scrollButtons="auto"
         value={currentIndex}
         onChange={(e, v) => setCurrentIndex(v)}>
         {contentTitle}
         {articles.map((article, index) => {
           index = content ? index + 1 : index;
-          return (<Tab key={`t-${index}`}
-            className={classes.tabs}
-            icon={<ClusterIcon iconUrl={icons[article["feed_id"]]} />}
-            label={isOnlyOneTitle ? null : article.title}
-            value={index}
-            aria-controls={`a-${index}`}
-          />);
+          return (<Tab key={`t-${index}`} label=""
+                       className={classes.tabs}
+                       icon={<ClusterIcon iconUrl={icons[article["feed_id"]]} />}
+                       value={index}
+                       aria-controls={`a-${index}`}
+                  />);
         })}
       </Tabs>
       {contentTab}
       {articles.map((article, index) => {
         index = content ? index + 1 : index;
         return (
-          <Article
+          <Article showTitle
             key={`a-${index}-${index !== currentIndex ? "h" : ""}`}
             id={`a-${index}`}
             article={article}

jsclient/src/features/clusterlist/components/Cluster.js

@@ -45,7 +45,7 @@ const makeMapStateToProps = () => {
 }
 
 const mapDispatchToProps = (dispatch) => ({
-  handleClickOnPanel(e, cluster, unreadOnClose, expanded) {
+  handleClickOnPanel(cluster, unreadOnClose, expanded) {
     if (!expanded) {
       // panel is folded, we fetch the cluster
       dispatch(doFetchCluster(cluster.id));
@@ -58,9 +58,8 @@ const mapDispatchToProps = (dispatch) => ({
       dispatch(removeClusterSelection());
       dispatch(doEditCluster(cluster.id,
                              { read: false, "read_reason": null }));
-      dispatch(changeReadCount(
-          { feedsId: cluster["feeds_id"],
-            action: "unread" }));
+      dispatch(changeReadCount({ feedsId: cluster["feeds_id"],
+                                 action: "unread" }));
     } else {
       // filters says everybody is displayed
       // so we"re not triggering changes in cluster list
@@ -118,8 +117,7 @@ const Cluster = ({ index, cluster, loadedCluster,
       content = <div className={classes.loadingWrap}><CircularProgress /></div>;
     }
     content = (
-      <ExpansionPanelDetails className={classes.content}
-                             key={`cl-${cluster.id}`}>
+      <ExpansionPanelDetails className={classes.content} key={`cl-${cluster.id}`}>
         {content}
       </ExpansionPanelDetails>
     );
@@ -130,13 +128,9 @@ const Cluster = ({ index, cluster, loadedCluster,
         expanded={expanded}
         elevation={expanded ? 10: 2}
         TransitionProps={{ unmountOnExit: true }}
-        key={"c"
-             + (expanded ? "e" : "")
-             + (cluster.read ? "r" : "")
-             + (cluster.liked ? "l" : "")
-             + cluster.id}
-        onChange={(e) => handleClickOnPanel(e, cluster,
-                                            unreadOnClose, expanded)}
+        key={`c${expanded ? "e" : ""}${cluster.read ? "r" : ""}${cluster.liked ? "l" : ""}${cluster.id}`}
+        onChange={() => handleClickOnPanel(cluster,
+                                           unreadOnClose, expanded)}
       >
         <ExpansionPanelSummary
           expandIcon={<ExpandMoreIcon />}
@@ -149,7 +143,7 @@ const Cluster = ({ index, cluster, loadedCluster,
             <Link href={cluster["main_link"]} target="_blank" color="secondary"
               onMouseUp={(e) => {
                 // only middle click
-                if(e.button === 1) {readOnRedirect(e, cluster)}
+                if(e.button === 1) {readOnRedirect(e, cluster)};
               }}
               onClick={(e) => readOnRedirect(e, cluster)}>
               {[ ...new Set(cluster["feeds_id"])].filter((feedId) => icons[feedId])

jsclient/src/features/clusterlist/components/Content.js

@@ -64,6 +64,7 @@ function Content({ content, hidden }) {
   }
   return (
     <div hidden={hidden} className={classes.article}>
+      <h3>{content.title}</h3>
       {head}
       {comments}
       <Divider />

jsclient/src/features/clusterlist/components/style.js

@@ -1,5 +1,5 @@
 import { makeStyles, Theme, createStyles } from "@material-ui/core/styles";
-import { feedListWidth, editPanelWidth } from "../../../const";
+import { feedListWidth, editPanelWidth, headerHeight } from "../../../const";
 
 export default makeStyles((theme: Theme) =>
   createStyles({
@@ -90,7 +90,7 @@ export default makeStyles((theme: Theme) =>
     },
     main: {
       flexGrow: 1,
-      paddingTop: 64+ theme.spacing(2),
+      paddingTop: headerHeight + theme.spacing(2),
       transition: theme.transitions.create("margin", {
         easing: theme.transitions.easing.sharp,
         duration: theme.transitions.duration.leavingScreen,
@@ -129,7 +129,7 @@ export default makeStyles((theme: Theme) =>
       width: "45%",
     },
     clusterListInner: {
-      maxHeight: "calc(100vh - (64px + 32px))",
+      maxHeight: `calc(100vh - (${headerHeight}px + 32px))`,
       maxWidth: "100%",
       overflowY: "auto",
       overflowX: "hidden",

jsclient/src/features/feedlist/FeedRow.js

@@ -31,14 +31,18 @@ const mapDispatchToProps = (dispatch) => ({
   },
   listClusters(e, filters, isDesktop, isFolded, selectedCategoryId) {
     e.stopPropagation();
+    // hide menu if in splitted mode and we're openning a un-opened category or feed
     if(!isDesktop && (filters.feedId || (filters.categoryId && isFolded))) {
       dispatch(toggleMenu(false));
     }
+    // toggling folding of category on selection
+    /*
     if(isFolded && filters.categoryId){
       dispatch(toggleFolding(filters.categoryId));
     } else if (!isFolded && filters.categoryId && filters.categoryId === selectedCategoryId) {
       dispatch(toggleFolding(filters.categoryId));
     }
+    */
     dispatch(doListClusters(filters));
   },
 });

migrations/versions/20200603_improving_main_listing.py

@@ -7,7 +7,6 @@
 """
 import logging
 from alembic import op
-import sqlalchemy as sa
 
 # revision identifiers, used by Alembic.
 revision = 'f5978c8a8740'