Merge pull request #353 from lightningrodlabs/canvas-pan

adding panning for edge of screen

Author: Connoropolous

web/src/components/ContextMenu/ContextMenu.scss

@@ -3,7 +3,7 @@
   color: var(--text-color-dark-bg);
   font: 0.825rem var(--font-family-primary-medium);
   box-shadow: 0rem 0rem 0.75rem var(--shadow-color);
-  padding: 0.5rem;
+  padding: 0.75rem 0.625rem;
   box-sizing: border-box;
   border-radius: 0.75rem;
   cursor: pointer;
@@ -18,17 +18,18 @@
       display: flex;
       flex-direction: row;
       align-items: center;
-      padding: 0.325rem 0.25rem;
+      padding: 0.325rem 0.5rem;
       border-radius: 0.625rem;
       transition: 0.075s all ease;
+      line-height: 1.5;
 
       &:hover {
         background-color: var(--bg-color-hover-dark);
         box-shadow: 0px 0rem 0.5rem var(--bg-color-hover-dark);
       }
 
       .context-menu-action-icon {
-        margin-right: 0.375rem;
+        margin-right: 0.5rem;
 
         .icon {
           height: 0.875rem;

web/src/components/ContextMenu/ContextMenu.tsx

@@ -1,28 +1,52 @@
-import React from 'react'
+import React, { useEffect, useRef } from 'react'
 import { ActionHashB64 } from '../../types/shared'
 import Icon from '../Icon/Icon'
 import './ContextMenu.scss'
 
 export type ContextMenuProps = {
   // proptypes
-  menuWidth?: string
+  menuWidth: string
   outcomeActionHash: ActionHashB64
   actions: {
     key: string
     icon?: string
     text: string
     onClick?: (outcomeActionHash: ActionHashB64) => void
   }[]
+  setMenuHeight: (height: number) => void
 }
 
 const ContextMenu: React.FC<ContextMenuProps> = ({
-  // prop declarations
-  menuWidth = '11rem',
+  menuWidth,
   actions,
   outcomeActionHash,
+  setMenuHeight,
 }) => {
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (ref.current) {
+      const height = ref.current.offsetHeight
+      // send the height back to the parent
+      setMenuHeight(height)
+    }
+  }, [ref.current])
+
+  // adjust height when number of actions changes
+  useEffect(() => {
+    if (ref.current) {
+      const height = ref.current.offsetHeight
+      // send the height back to the parent
+      setMenuHeight(height)
+    }
+  }, [actions.length])
+
   return (
-    <div className="context-menu-wrapper" style={{ width: menuWidth }}>
+    <div
+      className="context-menu-wrapper"
+      style={{ width: menuWidth }}
+      ref={ref}
+    >
       <div className="context-menu-actions">
         {actions.map((action) => (
           <div

web/src/components/ExpandedViewMode/EVMiddleColumn/TabContent/EvComments/EvComments.component.tsx

@@ -112,6 +112,13 @@ const EvComments: React.FC<EvCommentsProps> = ({
         }`}
       />
       <div className="comments-posted-wrapper" ref={commentHistoryRef}>
+        {comments.length === 0 && (
+          <div className="comments-posted-list-item">
+            <div className="comments-posted-list-item-empty">
+              There are no comments on this outcome yet.
+            </div>
+          </div>
+        )}
         {comments
           // just in case we don't have someones profile, don't show them for now
           // so only keep ones whose profiles we have

web/src/components/ExpandedViewMode/EVMiddleColumn/TabContent/EvComments/EvComments.scss

@@ -9,6 +9,10 @@
     margin-bottom: 0.5rem;
     transition: 0.2s background-color ease;
 
+    .comments-posted-list-item-empty {
+      color: var(--text-color-tertiary);
+    }
+
     &:first-child {
       margin-top: 1rem;
     }

web/src/components/ExpandedViewMode/ExpandedViewMode.scss

@@ -12,7 +12,7 @@
   left: 50%;
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
-  z-index: 3;
+  z-index: 4;
 
   .button-close-wrapper {
     position: absolute;
@@ -30,14 +30,14 @@
   overflow-y: hidden;
   position: fixed;
   top: 0;
-  z-index: 2;
+  z-index: 4;
 }
 
 .breadcrumbs-overlay {
   position: fixed;
   top: 0.5rem;
   left: 1rem;
-  z-index: 3;
+  z-index: 5;
 }
 
 // breadcrumbs css transitions (animation)

web/src/components/Footer/Footer.scss

@@ -1,43 +1,19 @@
 .footer {
   max-height: 48px;
-  z-index: 3;
+
 }
 
 /* Buttom Left Panel */
 
-.bottom-panel {
+.bottom-left-panel {
   position: fixed;
   bottom: 10px;
   left: 10px;
   display: flex;
   align-items: center;
   flex-direction: row;
   height: 48px;
-}
-
-.bottom-panel-entry-points {
-  background: rgba(255, 255, 255, 0.9) 0% 0% no-repeat padding-box;
-  border-radius: 10px;
-  height: 46px;
-  width: 46px;
-  margin-left: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: space-evenly;
-}
-
-.bottom-panel-entry-points .icon {
-  height: 26px;
-  width: 26px;
-  padding: 2px;
-  display: inline-block;
-  position: relative;
-}
-
-/* when Entry Point Icon is open: */
-
-.bottom-panel-entry-points .icon.active .inner-icon {
-  background-color: var(--text-color-link);
+  z-index: 4;
 }
 
 /* Buttom Right Panel */
@@ -54,6 +30,7 @@
   align-items: center;
   flex-direction: row;
   height: 48px;
+  z-index: 3;
 
   .map-viewing-options-button-wrapper {
     position: relative;

web/src/components/Footer/Footer.tsx

@@ -104,7 +104,7 @@ const Footer: React.FC<FooterProps> = ({
   return (
     <div className="footer" ref={ref}>
       {/* Report Issue Button */}
-      <div className="bottom-panel">
+      <div className="bottom-left-panel">
         <a
           href="https://github.com/lightningrodlabs/acorn/issues/new"
           target="_blank"

web/src/components/MapViewContextMenu/MapViewContextMenu.tsx

@@ -1,17 +1,18 @@
-import React, { useContext } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import { ActionHashB64, CellIdString } from '../../types/shared'
 
 import './MapViewContextMenu.scss'
 import ContextMenu from '../ContextMenu/ContextMenu'
 import ToastContext, { ShowToast } from '../../context/ToastContext'
+import useContainWithinScreen from '../../hooks/useContainWithinScreen'
 
-export type CheckboxProps = {
+export type MapViewContextMenuProps = {
   projectCellId: CellIdString
   outcomeActionHash: ActionHashB64
   outcomeStatement: string
   isCollapsed: boolean
   hasChildren: boolean
-  contextMenuCoordinate: {
+  contextMenuClickCoordinate: {
     x: number
     y: number
   }
@@ -26,20 +27,19 @@ export type CheckboxProps = {
   unsetContextMenu: () => void
 }
 
-const Checkbox: React.FC<CheckboxProps> = ({
+const MapViewContextMenu: React.FC<MapViewContextMenuProps> = ({
   projectCellId,
   outcomeActionHash,
   outcomeStatement,
   isCollapsed,
   hasChildren,
-  contextMenuCoordinate,
+  contextMenuClickCoordinate,
   expandOutcome,
   collapseOutcome,
   unsetContextMenu,
 }) => {
-
-// pull in the toast context
-const { setToastState } = useContext(ToastContext)
+  // pull in the toast context
+  const { setToastState } = useContext(ToastContext)
 
   const wrappedCollapseOutcome = () => {
     collapseOutcome(projectCellId, outcomeActionHash)
@@ -60,42 +60,94 @@ const { setToastState } = useContext(ToastContext)
   }
 
   const actions = []
+
+  actions.push({
+    key: 'copy-outcome',
+    icon: 'file-copy.svg',
+    text: 'Copy Outcome',
+    onClick: copyOutcomeStatement,
+  })
+
   actions.push({
     key: 'copy-statement',
     icon: 'text-align-left.svg',
     text: 'Copy Statement',
     onClick: copyOutcomeStatement,
   })
 
+  // only show this if the outcome has children
+  if (hasChildren) {
+    actions.push({
+      key: 'copy-subtree',
+      icon: 'file-copy.svg',
+      text: 'Copy Subtree',
+      onClick: copyOutcomeStatement,
+    })
+  }
+
+  // only show this if the outcome has children
+  if (hasChildren) {
+    actions.push({
+      key: 'export-subtree',
+      icon: 'export.svg',
+      text: 'Export Subtree',
+      onClick: copyOutcomeStatement,
+    })
+  }
+
+  // only enable if the outcome is has children BUT
+  // children should not have multiple parents
   if (hasChildren && isCollapsed) {
     actions.push({
       key: 'expand',
-      icon: 'leaf.svg',
-      text: 'Expand Outcome',
+      icon: 'expand2.svg',
+      text: 'Expand Subtree',
       onClick: wrappedExpandOutcome,
     })
   }
-  // DISABLED: collapsing outcomes
-  // else if (hasChildren) {
-  // actions.push({
-  //   key: 'collapse',
-  //   icon: 'leaf.svg',
-  //   text: 'Collapse Outcome',
-  //   onClick: wrappedCollapseOutcome,
-  // })
-  // }
+  // only enable if the outcome is has children BUT
+  // TODO: if only children do not have multiple parents
+  else if (hasChildren) {
+    actions.push({
+      key: 'collapse',
+      icon: 'collapse.svg',
+      text: 'Collapse Subtree',
+      onClick: wrappedCollapseOutcome,
+    })
+  }
+
+  // set menu width in pixels
+  const menuWidth = 176
+
+  // use this hook to make sure the menu is contained within the screen
+  const {
+    initialized,
+    setItemHeight: setMenuHeight,
+    renderCoordinate,
+  } = useContainWithinScreen({
+    initialWidth: menuWidth,
+    initialHeight: 0,
+    cursorCoordinate: contextMenuClickCoordinate,
+  })
 
   return (
     <div
       className="map-view-context-menu"
       style={{
-        top: `${contextMenuCoordinate.y}px`,
-        left: `${contextMenuCoordinate.x}px`,
+        top: `${renderCoordinate.y}px`,
+        left: `${renderCoordinate.x}px`,
+        // make sure the menu is not visible until the height is calculated
+        visibility: initialized ? 'visible' : 'hidden',
       }}
     >
-      <ContextMenu outcomeActionHash={outcomeActionHash} actions={actions} />
+      <ContextMenu
+        menuWidth={`${menuWidth}px`}
+        setMenuHeight={setMenuHeight}
+        outcomeActionHash={outcomeActionHash}
+        actions={actions}
+      />
     </div>
   )
 }
 
-export default Checkbox
+export default MapViewContextMenu