Finishing color picker functionality.

ehrishirajsharma · Apr 12, 2019 · 9f8d248 · 9f8d248
1 parent 6281a56
commit 9f8d248
Show file tree

Hide file tree

Showing 18 changed files with 266 additions and 85 deletions.
diff --git a/app/actions/targets.js b/app/actions/targets.js
@@ -24,10 +24,12 @@ export const EDIT_TARGET_CHECKITEM_TITLE = 'EDIT_TARGET_CHECKITEM_TITLE';
 export const EDIT_TARGET_CHECKITEM_CONTENT = 'EDIT_TARGET_CHECKITEM_CONTENT';
 export const EDIT_TARGET_CHECKITEM_ORDER = 'EDIT_TARGET_CHECKITEM_ORDER';
 export const EDIT_TARGET_CHECKITEM_CHECKBOX = 'EDIT_TARGET_CHECKITEM_CHECKBOX';
+export const EDIT_TARGET_CHECKITEM_COLOR = 'EDIT_TARGET_CHECKITEM_COLOR';
 
 export const EDIT_TARGET_NOTE_TITLE = 'EDIT_TARGET_NOTE_TITLE';
 export const EDIT_TARGET_NOTE_CONTENT = 'EDIT_TARGET_NOTE_CONTENT';
 export const EDIT_TARGET_NOTE_ORDER = 'EDIT_TARGET_NOTE_ORDER';
+export const EDIT_TARGET_NOTE_COLOR = 'EDIT_TARGET_NOTE_COLOR';
 
 export const REMOVE_TARGET = 'REMOVE_TARGET';
 export const REMOVE_TARGET_FOLDER = 'REMOVE_TARGET_FOLDER';
@@ -257,6 +259,23 @@ export function editTargetCheckitemCheckbox(
   };
 }
 
+export function editTargetCheckitemColor(
+  id: string,
+  folderId: string,
+  itemId: string,
+  color: string
+) {
+  return {
+    type: EDIT_TARGET_CHECKITEM_COLOR,
+    payload: {
+      id,
+      folderId,
+      itemId,
+      color
+    }
+  };
+}
+
 export function editTargetNoteTitle(
   id: string,
   folderId: string,
@@ -308,6 +327,23 @@ export function editTargetNoteOrder(
   };
 }
 
+export function editTargetNoteColor(
+  id: string,
+  folderId: string,
+  itemId: string,
+  color: string
+) {
+  return {
+    type: EDIT_TARGET_NOTE_COLOR,
+    payload: {
+      id,
+      folderId,
+      itemId,
+      color
+    }
+  };
+}
+
 export function removeTarget(id: string) {
   return {
     type: REMOVE_TARGET,

diff --git a/app/actions/uiState.js b/app/actions/uiState.js
@@ -15,6 +15,7 @@ export const CLOSE_ITEM_DATA = 'CLOSE_ITEM_DATA';
 export const SEARCH = 'SEARCH';
 
 export const TOGGLE_MENU_COLOR = 'TOGGLE_MENU_COLOR';
+export const TOGGLE_MAIN_COLOR = 'TOGGLE_MAIN_COLOR';
 
 export function openTarget(id: string, folderId: string) {
   return {
@@ -124,3 +125,12 @@ export function toggleMenuColor(color: string) {
     }
   };
 }
+
+export function toggleMainColor(color: string) {
+  return {
+    type: TOGGLE_MAIN_COLOR,
+    payload: {
+      color
+    }
+  };
+}
diff --git a/app/components/ColorFilter.js b/app/components/ColorFilter.js
@@ -6,7 +6,7 @@ import styles from './css/ColorFilter.css';
 
 type Props = {
   +toggleColor: (color: string) => void,
-  +colors: string[]
+  colors?: string[]
 };
 
 class ColorFilter extends React.PureComponent<Props> {
@@ -27,7 +27,6 @@ class ColorFilter extends React.PureComponent<Props> {
 
   toggleColor = (color: string) => {
     this.props.toggleColor(color);
-    this.setState({ open: false });
   };
 
   render() {
@@ -103,4 +102,8 @@ class ColorFilter extends React.PureComponent<Props> {
   }
 }
 
+ColorFilter.defaultProps = {
+  colors: []
+};
+
 export default onClickOutside(ColorFilter);
diff --git a/app/components/ColorPicker.js b/app/components/ColorPicker.js
@@ -6,7 +6,7 @@ import styles from './css/ColorPicker.css';
 
 type Props = {
   +editColor: (color: string) => void,
-  +color: string
+  +color: string | undefined
 };
 
 class ColorPicker extends React.PureComponent<Props> {

diff --git a/app/components/css/Item.css b/app/components/css/Item.css
@@ -1,33 +1,38 @@
 .draggable-list .list {
+  display: flex;
+  justify-content: space-between;
   font-family: 'nunito-regular';
   font-size: 1.4rem;
   color: #4A4A4A;
   padding: 1.5rem 2rem 1.5rem 2rem;
   cursor: pointer;
-  overflow: hidden;
+  justify-content: space-between;
+}
+
+.draggable-list .list .checkbox-text {
   white-space: nowrap;
   text-overflow: ellipsis;
+  overflow: hidden;
+  height: 2.2rem;
 }
 
-.draggable-list .list span {
-  margin-left: 1px;
+.draggable-list .list .checkbox-text > span {
+  margin-left: 3rem;
+  vertical-align: middle;
 }
 
 .draggable-list .list.selected {
   color: #000000;
   background-color: #FFFFFF;
 }
 
-.draggable-list .list div {
-  float: left;
+.draggable-list .list > div {
   position: relative;
-  padding-left: 3rem;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   cursor: pointer;
-  height: .1rem;
 }
 
 .draggable-list .list div input {
@@ -79,7 +84,6 @@
   left: 0;
   height: 2rem;
   width: 2rem;
-  margin-top: -.2rem;
   border-radius: 50%;
   border: .1rem solid #F97072;
   transition: .15s ease-out;

diff --git a/app/components/css/ItemList.css b/app/components/css/ItemList.css
@@ -5,12 +5,13 @@
 }
 
 .item-list .item-list-controls {
-  padding: 2.5rem 2rem 0 2rem;
+  padding: 2.5rem 0.5rem 0 1rem;
   width: 100%;
   height: auto;
   display: flex;
   margin-bottom: 4rem;
   box-sizing: border-box;
+  align-items: center;
 }
 
 .item-list .item-list-controls #search-item-list {
@@ -52,19 +53,20 @@
 
 .item-list .item-list-controls .new-item-list-button {
   height: 3.5rem;
-  width: 8rem;
+  width: 10rem;
   background-color: #F97072;
   border-radius: .6rem;
   padding: .85rem 1rem;
   font-family: 'nunito-regular';
   font-size: 1.3rem;
-  margin-left: 2rem;
+  margin-left: 1.5rem;
   box-sizing: border-box;
   float: right;
   cursor: pointer;
   overflow: hidden;
   white-space: nowrap;
   text-align: center;
+  margin-right: 0.5rem;
 }
 
 .item-list .item-list-controls .new-item-list-button:hover {
@@ -73,7 +75,7 @@
 }
 
 .item-list .item-list-body {
-  max-height: calc(100vh - 182px);
+  height: calc(100vh - 182px);
   overflow-y: auto;
 }
 

diff --git a/app/components/css/TargetMenu.css b/app/components/css/TargetMenu.css
@@ -36,6 +36,7 @@
   align-items: center;
   padding: 0.7rem;
   margin-top: 1.5rem;
+  margin-right: 1rem;
 }
 
 .menu-item-nav .menu-item-nav-list #search-item-list input {
@@ -84,5 +85,5 @@
   display: flex;
   align-items: baseline;
   justify-content: space-between;
-  padding: 0 2.5rem;
+  padding: 0 1rem 0 2.5rem;
 }
diff --git a/app/components/left/CategoryList.js b/app/components/left/CategoryList.js
@@ -30,7 +30,7 @@ type Props = {
   +removeFolder: (id: string, folderId: string) => void,
   +doNotShowDeleteConfirmation: () => void,
   +targetId: string,
-  +color: string,
+  +color: string | undefined,
   +activeFolderId: string | undefined,
   +folders: {
     +id: string,

diff --git a/app/components/left/LibraryMenu.js b/app/components/left/LibraryMenu.js
@@ -165,6 +165,7 @@ export default class LibraryMenu extends React.PureComponent<Props> {
         <SmoothCollapse
           expanded={this.state.sublistExpanded}
           className={styles.menuItemNavList}
+          allowOverflowWhenOpen
         >
           {sublistList}
         </SmoothCollapse>

diff --git a/app/components/left/LibraryMenuItem.js b/app/components/left/LibraryMenuItem.js
@@ -120,6 +120,7 @@ export default class LibraryMenuItem extends React.Component<Props> {
                   this.props.doNotShowDeleteConfirmation
                 }
                 targetId={item.id}
+                color={item.color}
                 folders={item.folders}
                 showDeleteConfirmation={this.props.showDeleteConfirmation}
               />

diff --git a/app/components/left/TargetMenu.js b/app/components/left/TargetMenu.js
@@ -51,7 +51,7 @@ export default class TargetMenu extends React.PureComponent<Props> {
     this.setState({ filter: e.target.value.toLowerCase() });
   };
 
-  applyFilter = items => {
+  applySearchFilter = items => {
     const { filter } = this.state;
 
     if (filter !== '') {
@@ -65,6 +65,16 @@ export default class TargetMenu extends React.PureComponent<Props> {
     return items;
   };
 
+  applyColorFilter = items => {
+    const { colors } = this.props.menu;
+
+    if (colors !== undefined && colors.length !== 0) {
+      return items.filter(item => colors.includes(item.color));
+    }
+
+    return items;
+  };
+
   setActiveList = id => {
     this.setState(prevState => ({
       expandedList: prevState.expandedList !== id ? id : undefined
@@ -144,31 +154,33 @@ export default class TargetMenu extends React.PureComponent<Props> {
           <Droppable droppableId="droppable">
             {provided => (
               <div ref={provided.innerRef} {...provided.droppableProps}>
-                {this.applyFilter(sublist).map((item, index) => (
-                  <TargetMenuItem
-                    key={item.id}
-                    item={item}
-                    menu={menu}
-                    expanded={this.state.expandedList === item.id}
-                    index={index}
-                    setActiveList={() => this.setActiveList(item.id)}
-                    onCategoryClick={folderId =>
-                      this.handleCategoryClick(item, folderId)
-                    }
-                    removeParent={removeParent}
-                    doNotShowDeleteConfirmation={
-                      this.props.doNotShowDeleteConfirmation
-                    }
-                    addFolder={addFolder}
-                    saveParent={this.props.saveParent}
-                    saveFolder={this.props.saveFolder}
-                    removeFolder={removeFolder}
-                    editTitle={this.props.editTitle}
-                    editFolderTitle={this.props.editFolderTitle}
-                    editFolderColor={this.props.editFolderColor}
-                    showDeleteConfirmation={this.props.showDeleteConfirmation}
-                  />
-                ))}
+                {this.applyColorFilter(this.applySearchFilter(sublist)).map(
+                  (item, index) => (
+                    <TargetMenuItem
+                      key={item.id}
+                      item={item}
+                      menu={menu}
+                      expanded={this.state.expandedList === item.id}
+                      index={index}
+                      setActiveList={() => this.setActiveList(item.id)}
+                      onCategoryClick={folderId =>
+                        this.handleCategoryClick(item, folderId)
+                      }
+                      removeParent={removeParent}
+                      doNotShowDeleteConfirmation={
+                        this.props.doNotShowDeleteConfirmation
+                      }
+                      addFolder={addFolder}
+                      saveParent={this.props.saveParent}
+                      saveFolder={this.props.saveFolder}
+                      removeFolder={removeFolder}
+                      editTitle={this.props.editTitle}
+                      editFolderTitle={this.props.editFolderTitle}
+                      editFolderColor={this.props.editFolderColor}
+                      showDeleteConfirmation={this.props.showDeleteConfirmation}
+                    />
+                  )
+                )}
               </div>
             )}
           </Droppable>
@@ -199,6 +211,7 @@ export default class TargetMenu extends React.PureComponent<Props> {
         <SmoothCollapse
           expanded={this.state.sublistExpanded}
           className={styles.menuItemNavList}
+          allowOverflowWhenOpen
         >
           <div className={styles.header}>
             <div id={styles.searchItemList}>

diff --git a/app/components/middle/InnerItemList.js b/app/components/middle/InnerItemList.js
@@ -5,6 +5,7 @@ type Props = {
   +saveItem: (id: string) => void,
   +openItem: (id: string) => void,
   +renameItem: (id: string, title: string) => void,
+  +editColor: (id: string, color: string) => void,
   +removeItem: (id: string) => void,
   +doNotShowDeleteConfirmation: () => void,
   +items: {
@@ -31,6 +32,7 @@ class InnerItemList extends React.PureComponent<Props> {
         key={item.id}
         item={item}
         index={index}
+        editColor={this.props.editColor}
         isSelected={item.id === selectedItem}
       />
     ));