Brandon Sprint 5 Compare Feature UI changes (#318)

### Summary Resolves Brandon Sprint 5 tickets  ### Checklist - [x] Right Panel Checkboxes - [x] New Design for big share back button - [x] Right Panel Scroll Feature improvements - [x] On-hover tooltips for right panel friends - In progress - [ ] Email Styling ### How to Test Share Schedule Feature --------- Co-authored-by: Yatharth Bhargava <[email protected]>
gt-scheduler · Apr 1, 2024 · 9921ed0 · 9921ed0
1 parent 1cfafc4
commit 9921ed0
Show file tree

Hide file tree

Showing 8 changed files with 222 additions and 114 deletions.
diff --git a/src/components/CombinationContainer/index.tsx b/src/components/CombinationContainer/index.tsx
@@ -58,64 +58,80 @@ export default function CombinationContainer({
   return (
     <>
       <div className="CombinationContainer">
-        <Select
-          onChange={(newSortingOptionIndex): void =>
-            patchSchedule({ sortingOptionIndex: newSortingOptionIndex })
-          }
-          current={sortingOptionIndex}
-          options={oscar.sortingOptions.map((sortingOption, i) => ({
-            id: i,
-            label: sortingOption.label,
-          }))}
-        />
-        <Button
-          className="reset"
-          onClick={handleResetPinnedCrns}
-          disabled={pinnedCrns.length === 0}
-        >
-          Reset Sections
-        </Button>
-        <div className="scroller">
-          <AutoSizer>
-            {({ width, height }): React.ReactElement => (
-              <List
-                width={width}
-                height={height}
-                style={{ outline: 'none' }}
-                rowCount={sortedCombinations.length}
-                rowHeight={108}
-                // List.rowRenderer is a normal render prop, not a component.
-                // eslint-disable-next-line react/no-unstable-nested-components
-                rowRenderer={({ index, key, style }): React.ReactElement => {
-                  const { crns } = sortedCombinations[index] as Combination;
-                  return (
-                    <div className="list-item" style={style} key={key}>
-                      <div
-                        className="combination"
-                        onMouseEnter={(): void => setOverlayCrns(crns)}
-                        onMouseLeave={(): void => setOverlayCrns([])}
-                        onClick={(): void =>
-                          patchSchedule({
-                            pinnedCrns: [...pinnedCrns, ...crns],
-                          })
-                        }
-                      >
-                        <div className="number">{index + 1}</div>
-                        <Calendar
-                          className="calendar-preview"
-                          overlayCrns={crns}
-                          isAutosized
-                          compare={compare}
-                          preview
-                        />
-                      </div>
-                    </div>
-                  );
-                }}
-              />
-            )}
-          </AutoSizer>
-        </div>
+        {compare ? (
+          <div className="turn-off-compare-text">
+            Turn compare schedules off to view section combinations!
+          </div>
+        ) : (
+          <>
+            <Select
+              onChange={(newSortingOptionIndex): void =>
+                patchSchedule({ sortingOptionIndex: newSortingOptionIndex })
+              }
+              current={sortingOptionIndex}
+              options={oscar.sortingOptions.map((sortingOption, i) => ({
+                id: i,
+                label: sortingOption.label,
+              }))}
+            />
+            <Button
+              className="reset"
+              onClick={handleResetPinnedCrns}
+              disabled={pinnedCrns.length === 0}
+            >
+              Reset Sections
+            </Button>
+            <div className="scroller">
+              <AutoSizer>
+                {({ width, height }): React.ReactElement => (
+                  <List
+                    width={width}
+                    height={height}
+                    style={{ outline: 'none' }}
+                    rowCount={sortedCombinations.length}
+                    rowHeight={108}
+                    /*
+                    List.rowRenderer is a normal render prop,
+                    not a component.
+                    */
+                    // eslint-disable-next-line max-len
+                    // eslint-disable-next-line react/no-unstable-nested-components
+                    rowRenderer={({
+                      index,
+                      key,
+                      style,
+                    }): React.ReactElement => {
+                      const { crns } = sortedCombinations[index] as Combination;
+                      return (
+                        <div className="list-item" style={style} key={key}>
+                          <div
+                            className="combination"
+                            onMouseEnter={(): void => setOverlayCrns(crns)}
+                            onMouseLeave={(): void => setOverlayCrns([])}
+                            onClick={(): void =>
+                              patchSchedule({
+                                pinnedCrns: [...pinnedCrns, ...crns],
+                              })
+                            }
+                          >
+                            <div className="number">{index + 1}</div>
+                            <Calendar
+                              className="calendar-preview"
+                              overlayCrns={crns}
+                              isAutosized
+                              compare={compare}
+                              preview
+                            />
+                          </div>
+                        </div>
+                      );
+                    }}
+                  />
+                )}
+              </AutoSizer>
+            </div>
+          </>
+        )}
       </div>
 
       <Modal

diff --git a/src/components/CombinationContainer/stylesheet.scss b/src/components/CombinationContainer/stylesheet.scss
@@ -6,6 +6,10 @@
   align-items: stretch;
   border-right: 1px solid $color-border;
 
+  .turn-off-compare-text {
+    margin: 0px 12px 0px 12px;
+    font-size: 14px;
+  }
   .scroller {
     flex: 1;
     overflow-y: auto;

diff --git a/src/components/ComparisonContainer/index.tsx b/src/components/ComparisonContainer/index.tsx
@@ -287,7 +287,7 @@ export default function ComparisonContainer({
       <div className="comparison-body">
         <div className="comparison-content">
           <div className="my-schedule">
-            <p className="content-title">My Schedule</p>
+            <p className="my-schedule-title">My Schedule</p>
             {allVersionNames
               // .filter((version) => version.id === currentVersion)
               .map((version) => {
@@ -563,6 +563,10 @@ function ScheduleRow({
   const tooltipId = useId();
   const [tooltipHover, setTooltipHover] = useState(false);
   const [divHover, setDivHover] = useState(false);
+  const [showPaletteTooltip, setShowPaletteTooltip] = useState(false);
+  const [showShareTooltip, setShowShareTooltip] = useState(false);
+  const [showEditTooltip, setShowEditTooltip] = useState(false);
+  const [showRemoveTooltip, setShowRemoveTooltip] = useState(false);
 
   const edit =
     hasEdit &&
@@ -620,11 +624,13 @@ function ScheduleRow({
               className={classes('name', hasCheck && 'check')}
               onMouseEnter={(): void => setTooltipHover(true)}
               onMouseLeave={(): void => setTooltipHover(false)}
+              onClick={onClick}
             >
               <div
                 className={classes(
                   type === 'User' && 'friend-name',
-                  type !== 'User' && checkboxColor !== '' && 'checked'
+                  type !== 'User' && checkboxColor !== '' && 'checked',
+                  type !== 'User' && 'schedule-name'
                 )}
               >
                 <p>{name}</p>
@@ -650,47 +656,117 @@ function ScheduleRow({
           </>
         )}
         {(divHover || edit) && hasPalette && setPaletteInfo && (
-          <Button
-            className="icon"
-            onClick={(): void => setPaletteInfo(palette ? '' : id)}
-            key={`${id}-palette`}
+          <div
+            onMouseEnter={(): void => setShowPaletteTooltip(true)}
+            onMouseLeave={(): void => setShowPaletteTooltip(false)}
+            id={`${tooltipId}-palette`}
           >
-            <FontAwesomeIcon icon={faPalette} size="xs" />
-          </Button>
+            <Button
+              className="icon"
+              onClick={(): void => setPaletteInfo(palette ? '' : id)}
+              key={`${id}-palette`}
+            >
+              <FontAwesomeIcon icon={faPalette} size="xs" />
+            </Button>
+            <ReactTooltip
+              key={`palette-tooltip-${id}`}
+              anchorId={`${tooltipId}-palette`}
+              place="top"
+              isOpen={showPaletteTooltip}
+              setIsOpen={setShowPaletteTooltip}
+              className="tooltip"
+              variant="dark"
+            >
+              Edit Color
+            </ReactTooltip>
+          </div>
         )}
         {(divHover || edit) &&
           hasEdit &&
           setInvitationModalOpen !== undefined &&
           setInvitationModalEmail !== undefined &&
           email && (
-            <Button
-              className="icon"
-              onClick={(): void => {
-                setInvitationModalEmail(email);
-                setInvitationModalOpen(true);
-              }}
-              key={`${id}-share`}
+            <div
+              onMouseEnter={(): void => setShowShareTooltip(true)}
+              onMouseLeave={(): void => setShowShareTooltip(false)}
+              id={`${tooltipId}-share`}
             >
-              <FontAwesomeIcon icon={faShareFromSquare} size="xs" />
-            </Button>
+              <Button
+                className="icon"
+                onClick={(): void => {
+                  setInvitationModalEmail(email);
+                  setInvitationModalOpen(true);
+                }}
+                key={`${id}-share`}
+                data-for={`share-tooltip-${id}`}
+                data-tip="Share"
+              >
+                <FontAwesomeIcon icon={faShareFromSquare} size="xs" />
+              </Button>
+              <ReactTooltip
+                key={`share-tooltip-${id}`}
+                anchorId={`${tooltipId}-share`}
+                place="top"
+                isOpen={showShareTooltip}
+                setIsOpen={setShowShareTooltip}
+                className="tooltip"
+                variant="dark"
+              >
+                Share Back
+              </ReactTooltip>
+            </div>
           )}
         {(divHover || edit) && hasEdit && (
-          <Button
-            className="icon"
-            onClick={handleEditSchedule}
-            key={`${id}-edit`}
+          <div
+            onMouseEnter={(): void => setShowEditTooltip(true)}
+            onMouseLeave={(): void => setShowEditTooltip(false)}
+            id={`${tooltipId}-edit`}
           >
-            <FontAwesomeIcon icon={faPencil} size="xs" />
-          </Button>
+            <Button
+              className="icon"
+              onClick={handleEditSchedule}
+              key={`${id}-edit`}
+            >
+              <FontAwesomeIcon icon={faPencil} size="xs" />
+            </Button>
+            <ReactTooltip
+              key={`edit-tooltip-${id}`}
+              anchorId={`${tooltipId}-edit`}
+              place="top"
+              isOpen={showEditTooltip}
+              setIsOpen={setShowEditTooltip}
+              className="tooltip"
+              variant="dark"
+            >
+              Edit
+            </ReactTooltip>
+          </div>
         )}
         {(divHover || edit) && hasDelete && (
-          <Button
-            className="icon"
-            onClick={handleRemoveSchedule}
-            key={`${id}-delete`}
+          <div
+            onMouseEnter={(): void => setShowRemoveTooltip(true)}
+            onMouseLeave={(): void => setShowRemoveTooltip(false)}
+            id={`${tooltipId}-delete`}
           >
-            <FontAwesomeIcon icon={faCircleXmark} size="xs" />
-          </Button>
+            <Button
+              className="icon"
+              onClick={handleRemoveSchedule}
+              key={`${id}-delete`}
+            >
+              <FontAwesomeIcon icon={faCircleXmark} size="xs" />
+            </Button>
+            <ReactTooltip
+              key={`delete-tooltip-${id}`}
+              anchorId={`${tooltipId}-delete`}
+              place="top"
+              isOpen={showRemoveTooltip}
+              setIsOpen={setShowRemoveTooltip}
+              className="tooltip"
+              variant="dark"
+            >
+              Remove
+            </ReactTooltip>
+          </div>
         )}
       </div>
       {hasPalette && palette && setFriendScheduleColor && setPaletteInfo && (