diff --git a/src/plugins/navigation/components/BookmarksSidebar.tsx b/src/plugins/navigation/components/BookmarksSidebar.tsx index 2e8d0e5fe..1b05dabb3 100644 --- a/src/plugins/navigation/components/BookmarksSidebar.tsx +++ b/src/plugins/navigation/components/BookmarksSidebar.tsx @@ -7,11 +7,13 @@ import {DetailSidebar, FlexCenter, styled, colors} from 'flipper'; import {Bookmark, URI} from '../types'; +import {IconButton} from './'; import React from 'react'; type Props = { bookmarks: Map; onNavigate: (uri: URI) => void; + onRemove: (uri: URI) => void; }; const NoData = styled(FlexCenter)({ @@ -20,21 +22,25 @@ const NoData = styled(FlexCenter)({ }); const BookmarksList = styled('div')({ - color: colors.macOSTitleBarIcon, overflowY: 'scroll', overflowX: 'hidden', height: '100%', + backgroundColor: colors.white, '.bookmark-container': { width: '100%', - padding: '5px 10px', + padding: '10px', cursor: 'pointer', - }, - '.bookmark-container:hover': { - backgroundColor: 'rgba(155, 155, 155, 0.2)', + borderBottom: `1px ${colors.greyTint} solid`, }, '.bookmark-container:active': { - backgroundColor: '#4d84f5', - color: '#FFF', + backgroundColor: colors.highlight, + color: colors.white, + }, + '.bookmarks-title': { + backgroundColor: colors.light02, + padding: '10px', + borderBottom: `1px ${colors.greyTint} solid`, + fontWeight: 'bold', }, '.bookmark-common-name': { fontSize: 14, @@ -42,6 +48,10 @@ const BookmarksList = styled('div')({ whiteSpace: 'nowrap', textOverflow: 'ellipsis', lineHeight: 1.2, + fontWeight: 'bold', + }, + '.bookmark-container:active>.bookmark-uri': { + color: colors.white, }, '.bookmark-uri': { fontSize: 10, @@ -49,37 +59,55 @@ const BookmarksList = styled('div')({ whiteSpace: 'nowrap', textOverflow: 'ellipsis', lineHeight: 1.2, + color: colors.greyTint3, }, }); +const DeleteButton = styled('div')({ + padding: 10, + float: 'right', +}); + const alphabetizeBookmarkCompare = (b1: Bookmark, b2: Bookmark) => { return b1.uri < b2.uri ? -1 : b1.uri > b2.uri ? 1 : 0; }; export default (props: Props) => { - const {bookmarks, onNavigate} = props; + const {bookmarks, onNavigate, onRemove} = props; return ( {bookmarks.size === 0 ? ( No Bookmarks ) : ( +
Bookmarks
{[...bookmarks.values()] .sort(alphabetizeBookmarkCompare) .map((bookmark, idx) => ( -
{ - onNavigate(bookmark.uri); - }}> -
- {bookmark.commonName} + <> + + onRemove(bookmark.uri)} + /> + +
{ + onNavigate(bookmark.uri); + }}> +
+ {bookmark.commonName} +
+
{bookmark.uri}
-
{bookmark.uri}
-
+ ))} )} diff --git a/src/plugins/navigation/index.js b/src/plugins/navigation/index.js index e123a85e5..96c4ca07d 100644 --- a/src/plugins/navigation/index.js +++ b/src/plugins/navigation/index.js @@ -206,7 +206,11 @@ export default class extends FlipperPlugin { onNavigate={this.navigateTo} onFavorite={this.onFavorite} /> - +