Merge pull request #106 from kjmatsuda/topic/add-controls-plain-lists

DanielDe · Oct 6, 2021 · f53652f · f53652f
2 parents ea39a52 + e64b9f9
commit f53652f
Show file tree

Hide file tree

Showing 11 changed files with 1,032 additions and 47 deletions.
diff --git a/src/actions/org.js b/src/actions/org.js
@@ -131,6 +131,7 @@ export const selectHeader = headerId => dispatch => {
 
   if (!!headerId) {
     dispatch(setSelectedTableCellId(null));
+    dispatch(setSelectedListItemId(null));
   }
 };
 
@@ -264,6 +265,7 @@ export const setSelectedTableCellId = cellId => dispatch => {
 
   if (!!cellId) {
     dispatch(selectHeader(null));
+    dispatch(setSelectedListItemId(null));
   }
 };
 
@@ -391,6 +393,79 @@ export const advanceCheckboxState = listItemId => ({
   dirtying: true,
 });
 
+export const setSelectedListItemId = listItemId => dispatch => {
+  dispatch({ type: 'SET_SELECTED_LIST_ITEM_ID', listItemId });
+
+  if (!!listItemId) {
+    dispatch(selectHeader(null));
+    dispatch(setSelectedTableCellId(null));
+  }
+};
+
+export const updateListTitleValue = (listItemId, newValue) => ({
+  type: 'UPDATE_LIST_TITLE_VALUE',
+  listItemId,
+  newValue,
+  dirtying: true,
+});
+
+export const updateListContentsValue = (listItemId, newValue) => ({
+  type: 'UPDATE_LIST_CONTENTS_VALUE',
+  listItemId,
+  newValue,
+  dirtying: true,
+});
+
+export const addNewListItem = () => ({
+  type: 'ADD_NEW_LIST_ITEM',
+  dirtying: true,
+});
+
+export const selectNextSiblingListItem = () => ({
+  type: 'SELECT_NEXT_SIBLING_LIST_ITEM',
+});
+
+export const addNewListItemAndEdit = () => dispatch => {
+  dispatch(addNewListItem());
+  dispatch(selectNextSiblingListItem());
+  dispatch(enterEditMode('list-title'));
+};
+
+export const removeListItem = () => ({
+  type: 'REMOVE_LIST_ITEM',
+  dirtying: true,
+});
+
+export const moveListItemUp = () => ({
+  type: 'MOVE_LIST_ITEM_UP',
+  dirtying: true,
+});
+
+export const moveListItemDown = () => ({
+  type: 'MOVE_LIST_ITEM_DOWN',
+  dirtying: true,
+});
+
+export const moveListItemLeft = () => ({
+  type: 'MOVE_LIST_ITEM_LEFT',
+  dirtying: true,
+});
+
+export const moveListItemRight = () => ({
+  type: 'MOVE_LIST_ITEM_RIGHT',
+  dirtying: true,
+});
+
+export const moveListSubtreeLeft = () => ({
+  type: 'MOVE_LIST_SUBTREE_LEFT',
+  dirtying: true,
+});
+
+export const moveListSubtreeRight = () => ({
+  type: 'MOVE_LIST_SUBTREE_RIGHT',
+  dirtying: true,
+});
+
 export const setHeaderTags = (headerId, tags) => ({
   type: 'SET_HEADER_TAGS',
   headerId,

diff --git a/src/components/OrgFile/components/ActionDrawer/index.js b/src/components/OrgFile/components/ActionDrawer/index.js
@@ -24,6 +24,7 @@ const ActionDrawer = ({
   captureTemplates,
   path,
   selectedTableCellId,
+  selectedListItemId,
   inEditMode,
   isLoading,
   shouldDisableSyncButtons,
@@ -51,20 +52,38 @@ const ActionDrawer = ({
   );
 
   const handleUpClick = () =>
-    !!selectedHeaderId ? org.moveHeaderUp(selectedHeaderId) : org.moveTableRowUp();
+    !!selectedHeaderId
+      ? org.moveHeaderUp(selectedHeaderId)
+      : !!selectedTableCellId
+      ? org.moveTableRowUp()
+      : org.moveListItemUp();
 
   const handleDownClick = () =>
-    !!selectedHeaderId ? org.moveHeaderDown(selectedHeaderId) : org.moveTableRowDown();
+    !!selectedHeaderId
+      ? org.moveHeaderDown(selectedHeaderId)
+      : !!selectedTableCellId
+      ? org.moveTableRowDown()
+      : org.moveListItemDown();
 
   const handleLeftClick = () =>
-    !!selectedHeaderId ? org.moveHeaderLeft(selectedHeaderId) : org.moveTableColumnLeft();
+    !!selectedHeaderId
+      ? org.moveHeaderLeft(selectedHeaderId)
+      : !!selectedTableCellId
+      ? org.moveTableColumnLeft()
+      : org.moveListItemLeft();
 
   const handleRightClick = () =>
-    !!selectedHeaderId ? org.moveHeaderRight(selectedHeaderId) : org.moveTableColumnRight();
+    !!selectedHeaderId
+      ? org.moveHeaderRight(selectedHeaderId)
+      : !!selectedTableCellId
+      ? org.moveTableColumnRight()
+      : org.moveListItemRight();
 
-  const handleMoveSubtreeLeftClick = () => org.moveSubtreeLeft(selectedHeaderId);
+  const handleMoveSubtreeLeftClick = () =>
+    !!selectedHeaderId ? org.moveSubtreeLeft(selectedHeaderId) : org.moveListSubtreeLeft();
 
-  const handleMoveSubtreeRightClick = () => org.moveSubtreeRight(selectedHeaderId);
+  const handleMoveSubtreeRightClick = () =>
+    !!selectedHeaderId ? org.moveSubtreeRight(selectedHeaderId) : org.moveListSubtreeRight();
 
   const handleDoneClick = () => org.exitEditMode();
 
@@ -83,11 +102,10 @@ const ActionDrawer = ({
             template.get('isAvailableInAllOrgFiles') ||
             template
               .get('orgFilesWhereAvailable')
-              .map(
-                availablePath =>
-                  availablePath.trim().startsWith('/')
-                    ? availablePath.trim()
-                    : '/' + availablePath.trim()
+              .map(availablePath =>
+                availablePath.trim().startsWith('/')
+                  ? availablePath.trim()
+                  : '/' + availablePath.trim()
               )
               .includes((path || '').trim())
         );
@@ -188,6 +206,25 @@ const ActionDrawer = ({
       }),
     };
 
+    let subIconNameStr = null;
+    let tooltipUpStr = 'Move header up';
+    let tooltipDownStr = 'Move header down';
+    let tooltipLeftStr = 'Move header left';
+    let tooltipRightStr = 'Move header right';
+    if (!!selectedTableCellId) {
+      subIconNameStr = 'table';
+      tooltipUpStr = 'Move row up';
+      tooltipDownStr = 'Move row down';
+      tooltipLeftStr = 'Move column left';
+      tooltipRightStr = 'Move column right';
+    } else if (!!selectedListItemId) {
+      subIconNameStr = 'list';
+      tooltipUpStr = 'Move list up';
+      tooltipDownStr = 'Move list down';
+      tooltipLeftStr = 'Move list left';
+      tooltipRightStr = 'Move list right';
+    }
+
     return (
       <Motion style={animatedStyles}>
         {style => (
@@ -198,52 +235,53 @@ const ActionDrawer = ({
             <ActionButton
               additionalClassName="action-drawer__arrow-button"
               iconName="arrow-up"
-              subIconName={!!selectedTableCellId ? 'table' : null}
+              subIconName={subIconNameStr}
               isDisabled={false}
               onClick={handleUpClick}
               style={{ ...baseArrowButtonStyle, bottom: style.topRowYOffset }}
-              tooltip={!!selectedTableCellId ? 'Move row up' : 'Move header up'}
+              tooltip={tooltipUpStr}
             />
             <ActionButton
               additionalClassName="action-drawer__arrow-button"
               iconName="arrow-down"
-              subIconName={!!selectedTableCellId ? 'table' : null}
+              subIconName={subIconNameStr}
               isDisabled={false}
               onClick={handleDownClick}
               style={{ ...baseArrowButtonStyle, bottom: style.bottomRowYOffset }}
-              tooltip={!!selectedTableCellId ? 'Move row down' : 'Move header down'}
+              tooltip={tooltipDownStr}
             />
             <ActionButton
               additionalClassName="action-drawer__arrow-button"
               iconName="arrow-left"
-              subIconName={!!selectedTableCellId ? 'table' : null}
+              subIconName={subIconNameStr}
               isDisabled={false}
               onClick={handleLeftClick}
               style={{
                 ...baseArrowButtonStyle,
                 bottom: style.bottomRowYOffset,
                 right: style.firstColumnXOffset,
               }}
-              tooltip={!!selectedTableCellId ? 'Move column left' : 'Move header left'}
+              tooltip={tooltipLeftStr}
             />
             <ActionButton
               additionalClassName="action-drawer__arrow-button"
               iconName="arrow-right"
-              subIconName={!!selectedTableCellId ? 'table' : null}
+              subIconName={subIconNameStr}
               isDisabled={false}
               onClick={handleRightClick}
               style={{
                 ...baseArrowButtonStyle,
                 bottom: style.bottomRowYOffset,
                 left: style.firstColumnXOffset,
               }}
-              tooltip={!!selectedTableCellId ? 'Move column right' : 'Move header right'}
+              tooltip={tooltipRightStr}
             />
             {!selectedTableCellId && (
               <Fragment>
                 <ActionButton
                   additionalClassName="action-drawer__arrow-button"
                   iconName="chevron-left"
+                  subIconName={subIconNameStr}
                   isDisabled={false}
                   onClick={handleMoveSubtreeLeftClick}
                   style={{
@@ -256,6 +294,7 @@ const ActionDrawer = ({
                 <ActionButton
                   additionalClassName="action-drawer__arrow-button"
                   iconName="chevron-right"
+                  subIconName={subIconNameStr}
                   isDisabled={false}
                   onClick={handleMoveSubtreeRightClick}
                   style={{
@@ -270,7 +309,7 @@ const ActionDrawer = ({
 
             <ActionButton
               iconName={isDisplayingArrowButtons ? 'times' : 'arrows-alt'}
-              subIconName={!!selectedTableCellId ? 'table' : null}
+              subIconName={subIconNameStr}
               additionalClassName="action-drawer__main-arrow-button"
               isDisabled={false}
               onClick={handleMainArrowButtonClick}
@@ -329,6 +368,7 @@ const mapStateToProps = (state, props) => {
     isDirty: state.org.present.get('isDirty'),
     isFocusedHeaderActive: !!state.org.present.get('focusedHeaderId'),
     selectedTableCellId: state.org.present.get('selectedTableCellId'),
+    selectedListItemId: state.org.present.get('selectedListItemId'),
     captureTemplates: state.capture.get('captureTemplates', new List()),
     path: state.org.present.get('path'),
     isLoading: state.base.get('isLoading'),

diff --git a/...ponents/OrgFile/components/AttributedString/components/ListPart/ListActionDrawer/index.js b/...ponents/OrgFile/components/AttributedString/components/ListPart/ListActionDrawer/index.js
@@ -0,0 +1,43 @@
+import React from 'react';
+
+import './stylesheet.css';
+
+export default ({
+  subPartDataAndHandlers: {
+    onEnterListTitleEditMode,
+    onEnterListContentsEditMode,
+    onAddNewListItem,
+    onRemoveListItem,
+  },
+}) => {
+  return (
+    <div className="list-action-drawer-container">
+      <div className="list-action-drawer__row">
+        <div className="list-action-drawer__edit-icon-container" onClick={onEnterListTitleEditMode}>
+          <i className="fas fa-pencil-alt fa-lg" />
+        </div>
+
+        <span className="list-action-drawer__separator" />
+
+        <div
+          className="list-action-drawer__edit-icon-container"
+          onClick={onEnterListContentsEditMode}
+        >
+          <i className="fas fa-edit fa-lg" />
+        </div>
+
+        <span className="list-action-drawer__separator" />
+
+        <div className="list-action-drawer__edit-icon-container" onClick={onAddNewListItem}>
+          <i className="fas fa-plus fa-lg" />
+        </div>
+
+        <span className="list-action-drawer__separator" />
+
+        <div className="list-action-drawer__edit-icon-container" onClick={onRemoveListItem}>
+          <i className="fas fa-times fa-lg" />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/...s/OrgFile/components/AttributedString/components/ListPart/ListActionDrawer/stylesheet.css b/...s/OrgFile/components/AttributedString/components/ListPart/ListActionDrawer/stylesheet.css
@@ -0,0 +1,29 @@
+.list-action-drawer-container {
+  color: lightgray;
+
+  padding-bottom: 10px;
+
+  padding-right: 20px;
+}
+
+.list-action-drawer__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+
+  padding-top: 10px;
+}
+
+.list-action-drawer__edit-icon-container {
+  position: relative;
+}
+
+.list-action-drawer__separator {
+  background-color: lightgray;
+
+  height: 15px;
+  width: 1px;
+
+  margin-left: 10px;
+  margin-right: 10px;
+}