Merge pull request #223 from manojVivek/improvement/bookmarks

Bookmarks UX improvement
responsively-org · Jun 24, 2020 · 143c4aa · 143c4aa
2 parents 7dfbd4f + bc76c2c
commit 143c4aa
Show file tree

Hide file tree

Showing 15 changed files with 444 additions and 83 deletions.
diff --git a/desktop-app/app/actions/bookmarks.js b/desktop-app/app/actions/bookmarks.js
@@ -2,11 +2,11 @@ export const TOGGLE_BOOKMARK = 'TOGGLE_BOOKMARK';
 export const EDIT_BOOKMARK = 'EDIT_BOOKMARK';
 
 // Add or Remove an URL from the bookmark list
-export function toggleBookmarkUrl(url, title = null) {
+export function toggleBookmarkUrl(url, pageMeta = {}) {
   return {
     type: TOGGLE_BOOKMARK,
     url,
-    title
+    title: pageMeta.title,
   };
 }
 
@@ -16,6 +16,6 @@ export function editBookmark(bookmark, {title, url}) {
     type: EDIT_BOOKMARK,
     title,
     url,
-    bookmark
-  }
+    bookmark,
+  };
 }
diff --git a/desktop-app/app/actions/browser.js b/desktop-app/app/actions/browser.js
@@ -22,6 +22,7 @@ import {DEVTOOLS_MODES} from '../constants/previewerLayouts';
 import console from 'electron-timber';
 
 export const NEW_ADDRESS = 'NEW_ADDRESS';
+export const NEW_PAGE_META_FIELD = 'NEW_PAGE_META_FIELD';
 export const NEW_DEV_TOOLS_CONFIG = 'NEW_DEV_TOOLS_CONFIG';
 export const NEW_HOMEPAGE = 'NEW_HOMEPAGE';
 export const NEW_ZOOM_LEVEL = 'NEW_ZOOM_LEVEL';
@@ -46,6 +47,14 @@ export function newAddress(address) {
   };
 }
 
+export function newPageMetaField(name, value) {
+  return {
+    type: NEW_PAGE_META_FIELD,
+    name,
+    value,
+  };
+}
+
 export function newWindowSize(size) {
   return {
     type: NEW_WINDOW_SIZE,
@@ -175,6 +184,12 @@ export function onAddressChange(newURL, force) {
   };
 }
 
+export function onPageMetaFieldUpdate(name, value) {
+  return (dispatch: Dispatch, getState: RootStateType) => {
+    dispatch(newPageMetaField(name, value));
+  };
+}
+
 function isHashOnlyChange(newURL, oldURL) {
   if (!newURL || !oldURL) {
     return false;

diff --git a/desktop-app/app/app.global.css b/desktop-app/app/app.global.css
@@ -47,6 +47,10 @@ body {
   overflow: hidden;
 }
 
+svg {
+  pointer-events: none;
+}
+
 /*h2 {
   margin: 0;
   font-size: 2.25rem;

diff --git a/desktop-app/app/components/Addressinput/index.js b/desktop-app/app/components/Addressinput/index.js
@@ -6,11 +6,12 @@ import DeleteCookieIcon from '../icons/DeleteCookie';
 import DeleteStorageIcon from '../icons/DeleteStorage';
 import FavIconOff from '@material-ui/icons/StarBorder';
 import FavIconOn from '@material-ui/icons/Star';
-import {iconsColor} from '../../constants/colors';
+import {iconsColor, lightIconsColor} from '../../constants/colors';
 
 import commonStyles from '../common.styles.css';
 import styles from './style.css';
 import {Tooltip} from '@material-ui/core';
+import {Icon} from 'flwww';
 
 type Props = {
   address: string,
@@ -45,7 +46,6 @@ class AddressBar extends React.Component<Props> {
   }
 
   render() {
-    const FavIcon = this.props.isBookmarked ? FavIconOn : FavIconOff;
     return (
       <div className={styles.addressBarContainer}>
         <input
@@ -65,12 +65,23 @@ class AddressBar extends React.Component<Props> {
               [commonStyles.enabled]: true,
             })}
           >
-            <Tooltip title="Bookmark">
+            <Tooltip
+              title={
+                this.props.isBookmarked
+                  ? 'Remove from Bookmarks'
+                  : 'Add to Bookmarks'
+              }
+            >
               <div
                 className={cx(commonStyles.flexAlignVerticalMiddle)}
-                onClick={() => this.props.toggleBookmark(this.state.userTypedAddress)}
+                onClick={() =>
+                  this.props.toggleBookmark(this.state.userTypedAddress)
+                }
               >
-                <FavIcon fontSize="small"/>
+                <Icon
+                  type={this.props.isBookmarked ? 'starFull' : 'star'}
+                  color={lightIconsColor}
+                />
               </div>
             </Tooltip>
           </div>

diff --git a/desktop-app/app/components/BookmarksBar/index.js b/desktop-app/app/components/BookmarksBar/index.js
@@ -1,74 +1,112 @@
 // @flow
-import React, { useState } from 'react';
+import React, {useState} from 'react';
 import Grid from '@material-ui/core/Grid';
 import Button from '@material-ui/core/Button';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
-import BookmarkEditDialog from './BookmarkEditDialog'
-import styles from './style.css';
+import BookmarkEditDialog from './BookmarkEditDialog';
+import styles from './style.module.css';
+import Globe from '../icons/Globe';
 
-export const BookmarksBar = function ({bookmarks, onBookmarkClick, onBookmarkDelete, onBookmarkEdit}) {
-  return <Grid container direction="row" justify="flex-start" alignItems="center" className={styles.bookmarks} spacing={1}>
-    {bookmarks.map((bookmark, k) => (
-      <BookmarkItem bookmark={bookmark} onClick={onBookmarkClick} key={'bookmark' + k} onDelete={onBookmarkDelete} onEdit={onBookmarkEdit}/>
-    ))}
-    </Grid>
+export const BookmarksBar = function({
+  bookmarks,
+  onBookmarkClick,
+  onBookmarkDelete,
+  onBookmarkEdit,
+}) {
+  return (
+    <div className={styles.bookmarks}>
+      {bookmarks.map((bookmark, k) => (
+        <BookmarkItem
+          bookmark={bookmark}
+          onClick={onBookmarkClick}
+          key={'bookmark' + k}
+          onDelete={onBookmarkDelete}
+          onEdit={onBookmarkEdit}
+        />
+      ))}
+    </div>
+  );
 };
 
-const useToggle = function () {
-  const [value, setValue] = useState(false)
+const useToggle = function() {
+  const [value, setValue] = useState(false);
   return [
     value,
-    function () { setValue(true) },
-    function () { setValue(false) }
-  ]
-}
+    function() {
+      setValue(true);
+    },
+    function() {
+      setValue(false);
+    },
+  ];
+};
 
-function BookmarkItem ({bookmark, onClick, onDelete, onEdit}) {
+function BookmarkItem({bookmark, onClick, onDelete, onEdit}) {
   const [anchorEl, setAnchorEl] = useState(null);
-  const [renameDialog, openRenameDialog, closeRenameDialog] = useToggle(null)
+  const [renameDialog, openRenameDialog, closeRenameDialog] = useToggle(null);
 
-  const handleContextMenu = function (event) {
+  const handleContextMenu = function(event) {
     event.preventDefault();
     setAnchorEl(event.currentTarget);
   };
 
-  const handleClose = function () {
+  const handleClose = function() {
     setAnchorEl(null);
   };
 
-  const handleClick = function () {
-    onClick(bookmark)
+  const handleClick = function() {
+    onClick(bookmark);
   };
 
-  const handleDelete = function () {
-    onDelete(bookmark)
+  const handleDelete = function() {
+    setAnchorEl(null);
+    onDelete(bookmark);
   };
 
-  const handleRename = function (title, url) {
-    onEdit(bookmark, {title, url})
-    setAnchorEl(null)
-  }
+  const handleRename = function(title, url) {
+    onEdit(bookmark, {title, url});
+    setAnchorEl(null);
+  };
 
-  const closeDialog = function () {
-    closeRenameDialog()
-    setAnchorEl(null)
-  }
+  const closeDialog = function() {
+    closeRenameDialog();
+    setAnchorEl(null);
+  };
 
-  return <Grid item key={bookmark.url}>
-    <Button aria-controls="bookmark-menu" aria-haspopup="true" onClick={handleClick} onContextMenu={handleContextMenu}>
-      {bookmark.title}
-    </Button>
-    <Menu
-      id="bookmark-menu"
-      anchorEl={anchorEl}
-      keepMounted
-      open={Boolean(anchorEl)}
-      onClose={handleClose}
-    >
-      <MenuItem onClick={openRenameDialog}>Rename</MenuItem>
-      <MenuItem onClick={handleDelete}>Delete</MenuItem>
-    </Menu>
-    <BookmarkEditDialog open={renameDialog} onSubmit={handleRename} onClose={closeDialog} bookmark={bookmark}/>
-  </Grid>
+  return (
+    <>
+      <div
+        className={styles.bookmarkItem}
+        key={bookmark.url}
+        onClick={handleClick}
+        onContextMenu={handleContextMenu}
+      >
+        <Globe height={10} className={styles.icon} />
+        <span>{bookmark.title}</span>
+      </div>
+      <Menu
+        id="bookmark-menu"
+        anchorEl={anchorEl}
+        keepMounted
+        open={Boolean(anchorEl)}
+        onClose={handleClose}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'center',
+        }}
+        getContentAnchorEl={null}
+        onContextMenu={handleClose}
+      >
+        <MenuItem onClick={openRenameDialog}>Edit</MenuItem>
+        <MenuItem onClick={handleDelete}>Delete</MenuItem>
+      </Menu>
+      <BookmarkEditDialog
+        open={renameDialog}
+        onSubmit={handleRename}
+        onClose={closeDialog}
+        bookmark={bookmark}
+      />
+    </>
+  );
 }
diff --git a/desktop-app/app/components/BookmarksBar/style.css b/desktop-app/app/components/BookmarksBar/style.css
diff --git a/desktop-app/app/components/BookmarksBar/style.module.css b/desktop-app/app/components/BookmarksBar/style.module.css
@@ -0,0 +1,28 @@
+.bookmarks {
+  padding: 0 10px;
+  display: flex;
+  margin-top: 4px;
+}
+
+.bookmarkItem {
+  color: #ffffffcc;
+  fill: #ffffffcc;
+  cursor: default;
+  padding: 2px 10px;
+  border-radius: 15px;
+  font-size: 13px;
+  min-width: 100px;
+  max-width: 150px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bookmarkItem:hover {
+  background-color: #6075ef;
+  fill: #fff;
+}
+
+.icon {
+  margin-right: 5px;
+}
diff --git a/desktop-app/app/components/Header/style.module.css b/desktop-app/app/components/Header/style.module.css
@@ -1,6 +1,6 @@
 .header {
   width: calc(100vw - 50px);
-  padding: 20px 0 10px;
+  padding: 20px 0 5px;
   background: #252526;
   box-shadow: 0 3px 5px rgba(0, 0, 0, 0.35);
   z-index: 2;

diff --git a/desktop-app/app/components/NavigationControls/index.js b/desktop-app/app/components/NavigationControls/index.js
@@ -18,6 +18,13 @@ class NavigationControls extends Component {
     ipcRenderer.on('reload-url', this.props.triggerNavigationReload);
     ipcRenderer.on('reload-css', this.props.reloadCSS);
   }
+  componentWillUnmount() {
+    ipcRenderer.removeListener(
+      'reload-url',
+      this.props.triggerNavigationReload
+    );
+    ipcRenderer.removeListener('reload-css', this.props.reloadCSS);
+  }
 
   render() {
     const iconProps = {

diff --git a/desktop-app/app/components/WebView/index.js b/desktop-app/app/components/WebView/index.js
@@ -124,6 +124,18 @@ class WebView extends Component {
       this.initEventTriggers(this.webviewRef.current);
     });
 
+    if (this.props.transmitNavigatorStatus) {
+      this.webviewRef.current.addEventListener(
+        'page-favicon-updated',
+        ({favicons}) => this.props.onPageMetaFieldUpdate('favicons', favicons)
+      );
+
+      this.webviewRef.current.addEventListener(
+        'page-title-updated',
+        ({title}) => this.props.onPageMetaFieldUpdate('title', title)
+      );
+    }
+
     this.webviewRef.current.addEventListener('did-start-loading', () => {
       this.setState({errorCode: null, errorDesc: null});
       this.props.onLoadingStateChange(true);