Update the tag panel UI

Automattic · Sep 21, 2020 · 0eaee15 · 0eaee15
1 parent fc89212
commit 0eaee15
Show file tree

Hide file tree

Showing 8 changed files with 160 additions and 102 deletions.
diff --git a/lib/icons/cross-outline.tsx b/lib/icons/cross-outline.tsx
@@ -1,9 +1,16 @@
 import React from 'react';
 
-export default function CrossOutlineIcon() {
+type OwnProps = {
+  onClick: (event: React.MouseEvent<SVGSVGElement>) => any;
+};
+
+type Props = OwnProps;
+
+export default function CrossOutlineIcon({ onClick }: Props) {
   return (
     <svg
       className="icon-cross-outline"
+      onClick={onClick}
       xmlns="http://www.w3.org/2000/svg"
       width="22"
       height="22"

diff --git a/lib/navigation-bar/index.tsx b/lib/navigation-bar/index.tsx
@@ -69,17 +69,22 @@ export class NavigationBar extends Component<Props> {
       <div className="navigation-bar theme-color-bg theme-color-fg theme-color-border">
         <div className="navigation-bar__folders">
           <NavigationBarItem
-            icon={<NotesIcon />}
-            isSelected={this.isSelected({ isTrashRow: false })}
-            label="All Notes"
-            onClick={onShowAllNotes}
+            icon={<SettingsIcon />}
+            label="Settings"
+            onClick={onSettings}
           />
           <NavigationBarItem
             icon={<TrashIcon />}
             isSelected={this.isSelected({ isTrashRow: true })}
             label="Trash"
             onClick={this.onSelectTrash}
           />
+          <NavigationBarItem
+            icon={<NotesIcon />}
+            isSelected={this.isSelected({ isTrashRow: false })}
+            label="All Notes"
+            onClick={onShowAllNotes}
+          />
         </div>
         <div className="navigation-bar__tags theme-color-border">
           <TagList />
@@ -89,14 +94,6 @@ export class NavigationBar extends Component<Props> {
             <ConnectionStatus />
           </div>
         </div>
-
-        <div className="navigation-bar__tools theme-color-border">
-          <NavigationBarItem
-            icon={<SettingsIcon />}
-            label="Settings"
-            onClick={onSettings}
-          />
-        </div>
         <div className="navigation-bar__footer">
           <button
             type="button"

diff --git a/lib/navigation-bar/item/style.scss b/lib/navigation-bar/item/style.scss
@@ -1,36 +1,40 @@
 .navigation-bar-item {
-  width: 100%;
-  padding: 4px 8px;
+  height: 44px;
+  padding-left: 16px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   text-align: left;
 
+  .button {
+    border-bottom: 1px solid $studio-gray-5;
+    border-radius: 0;
+    font-size: 16px;
+    font-weight: 400;
+    height: 44px;
+    padding: 0;
+    text-align: left;
+    width: 100%;
+  }
+
   .button:active {
-    color: $studio-white;
+    background: none;
+  }
+
+  &.is-selected button {
+    border-bottom: none;
   }
 
   &.is-selected {
-    .button {
-      color: $studio-simplenote-blue-50;
-
-      svg[class^='icon-'] {
-        fill: $studio-simplenote-blue-50;
-      }
-
-      &:active {
-        color: $studio-white;
-        svg[class^='icon-'] {
-          fill: $studio-white;
-        }
-      }
-    }
+    background-color: $studio-blue-5;
   }
 }
 
 .navigation-bar-item__icon {
+  color: $studio-blue-50;
   display: inline-block;
-  margin-right: 0.5em;
+
+  margin-right: 18px;
   vertical-align: middle;
 
   svg {
@@ -39,3 +43,35 @@
     top: -0.2em;
   }
 }
+
+.theme-dark {
+  .navigation-bar-item {
+    .button {
+      border-bottom: 1px solid $studio-gray-70;
+    }
+
+    &.is-selected button {
+      border-bottom: none;
+    }
+
+    button {
+      color: $studio-white;
+    }
+    svg {
+      fill: $studio-white;
+    }
+  }
+
+  .navigation-bar-item.is-selected {
+    button {
+      color: $studio-simplenote-blue-30;
+    }
+    svg[class^='icon-'] {
+      fill: $studio-simplenote-blue-30;
+    }
+  }
+}
+
+.navigation-bar-item.is-selected + .navigation-bar-item .button {
+  border-bottom: none;
+}
diff --git a/lib/navigation-bar/style.scss b/lib/navigation-bar/style.scss
@@ -4,6 +4,7 @@
   position: absolute;
   top: 0;
   left: -$navigation-bar-width;
+  padding-top: 55px;
   width: $navigation-bar-width;
   height: 100%;
   overflow: hidden;
@@ -12,8 +13,8 @@
 }
 
 .navigation-bar__folders {
-  flex: none;
-  padding: 10px 0;
+  display: flex;
+  flex-direction: column-reverse;
 }
 
 .navigation-bar__tags {
@@ -24,15 +25,6 @@
   overflow: hidden;
   min-height: 9em;
   padding: 12px 0 0;
-  border-top: 1px solid $studio-gray-5;
-
-  .tag-list-title {
-    padding: 8px 20px 0;
-  }
-
-  .editable-list-item {
-    padding: 0 5px 0 20px;
-  }
 }
 
 .navigation-bar__tools {

diff --git a/lib/tag-list/index.tsx b/lib/tag-list/index.tsx
@@ -10,17 +10,20 @@ import {
 import isEmailTag from '../utils/is-email-tag';
 import PanelTitle from '../components/panel-title';
 import ReorderIcon from '../icons/reorder';
-import TrashIcon from '../icons/trash';
+import CrossOutlineIcon from '../icons/cross-outline';
 import TagListInput from './input';
 import { openTag, toggleTagEditing } from '../state/ui/actions';
 
+import * as selectors from './../state/selectors';
+
 import type * as S from '../state';
 import type * as T from '../types';
 
 type StateProps = {
   editingTags: boolean;
   openedTag: T.TagHash | null;
   sortTagsAlpha: boolean;
+  theme: 'light' | 'dark';
   tags: Map<T.TagHash, T.Tag>;
 };
 
@@ -43,6 +46,7 @@ const SortableTag = SortableElement(
     isSelected,
     renameTag,
     selectTag,
+    theme,
     trashTag,
     value: [tagHash, tag],
   }: {
@@ -51,11 +55,16 @@ const SortableTag = SortableElement(
     isSelected: boolean;
     renameTag: (oldTagName: T.TagName, newTagName: T.TagName) => any;
     selectTag: (tagName: T.TagName) => any;
+    theme: 'light' | 'dark';
     trashTag: (tagName: T.TagName) => any;
     value: [T.TagHash, T.Tag];
   }) => (
-    <li key={tagHash} className="tag-list-item" data-tag-name={tag.name}>
-      {editingActive && <TrashIcon onClick={() => trashTag(tag.name)} />}
+    <li
+      key={tagHash}
+      className={classNames(`tag-list-item`, `theme-${theme}`)}
+      data-tag-name={tag.name}
+    >
+      {editingActive && <CrossOutlineIcon onClick={() => trashTag(tag.name)} />}
       <TagListInput
         editable={editingActive}
         isSelected={isSelected}
@@ -82,6 +91,7 @@ const SortableTagList = SortableContainer(
     openTag,
     renameTheTag,
     sortTagsAlpha,
+    theme,
     trashTheTag,
   }: {
     editingTags: boolean;
@@ -90,6 +100,7 @@ const SortableTagList = SortableContainer(
     openTag: (tagName: T.TagName) => any;
     renameTheTag: (oldTagName: T.TagName, newTagName: T.TagName) => any;
     sortTagsAlpha: boolean;
+    theme: 'light' | 'dark';
     trashTheTag: (tagName: T.TagName) => any;
   }) => (
     <ul className="tag-list-items">
@@ -102,6 +113,7 @@ const SortableTagList = SortableContainer(
           isSelected={openedTag === value[0]}
           renameTag={renameTheTag}
           selectTag={openTag}
+          theme={theme}
           trashTag={trashTheTag}
           value={value}
         />
@@ -116,7 +128,7 @@ export class TagList extends Component<Props> {
   reorderTag: SortEndHandler = ({ newIndex, nodes, oldIndex }) => {
     const tagName = nodes[oldIndex].node.dataset.tagName;
 
-    this.props.reorderTag(tagName, newIndex);
+    this.props.reorderTag(tagName, newIndex + 1);
   };
 
   render() {
@@ -128,6 +140,7 @@ export class TagList extends Component<Props> {
       renameTag,
       sortTagsAlpha,
       tags,
+      theme,
       trashTag,
     } = this.props;
 
@@ -170,6 +183,7 @@ export class TagList extends Component<Props> {
           items={sortedTags}
           renameTheTag={renameTag}
           sortTagsAlpha={sortTagsAlpha}
+          theme={theme}
           onSortEnd={this.reorderTag}
           useDragHandle={true}
           trashTheTag={trashTag}
@@ -179,16 +193,20 @@ export class TagList extends Component<Props> {
   }
 }
 
-const mapStateToProps: S.MapState<StateProps> = ({
-  data,
-  settings: { sortTagsAlpha },
-  ui: { editingTags, openedTag },
-}) => ({
-  editingTags,
-  sortTagsAlpha,
-  tags: data.tags,
-  openedTag,
-});
+const mapStateToProps: S.MapState<StateProps> = (state) => {
+  const {
+    data,
+    settings: { sortTagsAlpha },
+    ui: { editingTags, openedTag },
+  } = state;
+  return {
+    editingTags,
+    sortTagsAlpha,
+    tags: data.tags,
+    openedTag,
+    theme: selectors.getTheme(state),
+  };
+};
 
 const mapDispatchToProps: S.MapDispatch<DispatchProps> = {
   onEditTags: toggleTagEditing,