CLAN6-259 Widget Expanded Content Improvements

cogboard-webapp/src/components/Widget/helpers.js

@@ -10,6 +10,13 @@ export const mapStatusToColor = (status, theme) => theme.palette.status[status];
 export const getWidgetOverflow = type =>
   type !== 'TextWidget' ? 'visible' : 'hidden';
 
+export const dispatchEvent = (customEvent, data) => {
+  if (customEvent) {
+    const Event = new CustomEvent(customEvent, { detail: data });
+    document.dispatchEvent(Event);
+  }
+};
+
 export const renderCardContent = (
   content,
   updateTimestamp,
@@ -19,7 +26,8 @@ export const renderCardContent = (
   status,
   expandContent,
   expanded,
-  handleToggle
+  handleToggle,
+  closeWidgets
 ) => {
   return (
     <StyledCardContent>
@@ -42,6 +50,8 @@ export const renderCardContent = (
         handleToggle={handleToggle}
         content={content}
         expandContent={expandContent}
+        closeWidgets={closeWidgets}
+        id={id}
       />
     </StyledCardContent>
   );

cogboard-webapp/src/components/Widget/index.js

@@ -13,7 +13,7 @@ import {
 import widgetTypes from '../widgets';
 import { ItemTypes } from '../../constants';
 import { getIsAuthenticated } from '../../selectors';
-import { renderCardContent } from './helpers';
+import { renderCardContent, dispatchEvent } from './helpers';
 
 import { MenuItem } from '@material-ui/core';
 import { StyledCard, StyledCardHeader, StyledCollapse } from './styled';
@@ -25,6 +25,10 @@ import ConfirmationDialog from '../ConfirmationDialog';
 import StatusIcon from '../StatusIcon';
 import { getWidgetStatus, getWidgetUpdateTime } from '../../utils/components';
 
+const selectors = {
+  collapse: '[class*="-StyledCollapse"]'
+};
+
 const Widget = ({ id, index }) => {
   const widgetData = useSelector(
     ({ widgets }) => widgets.widgetsById[id],
@@ -99,6 +103,20 @@ const Widget = ({ id, index }) => {
 
   drag(drop(ref));
 
+  document.addEventListener('CloseAllWidgets', event => {
+    if (event.detail === id) {
+      return;
+    }
+    if (!expanded) {
+      return;
+    }
+    handleToggle();
+  });
+
+  const closeWidgets = widgetId => {
+    dispatchEvent('CloseAllWidgets', widgetId);
+  };
+
   const handleEditClick = closeMenu => () => {
     dispatch(loadSettings());
     openDialog();
@@ -115,6 +133,20 @@ const Widget = ({ id, index }) => {
     closeConfirmationDialog();
   };
 
+  const handleCollapseScrollIntoView = () => {
+    const { top, height } = ref.current
+      .querySelectorAll(selectors.collapse)[0]
+      .getBoundingClientRect();
+    const collapseVerticalOffset = top + height;
+
+    if (collapseVerticalOffset > window.innerHeight) {
+      window.scrollTo({
+        top: collapseVerticalOffset,
+        behavior: 'smooth'
+      });
+    }
+  };
+
   return (
     <>
       <StyledCard
@@ -178,7 +210,8 @@ const Widget = ({ id, index }) => {
           widgetStatus,
           expandContent,
           expanded,
-          handleToggle
+          handleToggle,
+          closeWidgets
         )}
         {expandContent && (
           <StyledCollapse
@@ -188,6 +221,7 @@ const Widget = ({ id, index }) => {
             isDragging={isDragging}
             in={expanded}
             timeout="auto"
+            onEntered={() => handleCollapseScrollIntoView()}
             unmountOnExit
           >
             <WidgetContent id={id} type={type} content={content} />

cogboard-webapp/src/components/Widget/styled.js

@@ -99,7 +99,7 @@ export const StyledCardContent = styled(CardContent)`
   justify-content: space-between;
 
   &:last-child {
-    padding-bottom: 16px;
+    padding-bottom: 8px;
   }
 
   .cardFootWrapper {
@@ -113,13 +113,13 @@ export const StyledCollapse = styled(
     <Collapse {...props} />
   )
 )`
-  bottom: 1px;
+  bottom: 2px;
   background-color: ${({ isDragging, status, theme }) =>
     !isDragging
       ? mapStatusToColor(status, theme)
       : theme.palette.background.paper};
   box-shadow: ${({ isExpanded }) =>
-    isExpanded ? '2px 4px 4px 2px rgba(0,0,0,0.3)' : 'none'};
+    isExpanded ? '4px 4px 4px rgba(0,0,0,0.3)' : 'none'};
   height: auto;
   opacity: ${({ isExpanded }) => (isExpanded ? 1 : 0)};
   padding: 0 16px 16px;

cogboard-webapp/src/components/WidgetFooter.js

@@ -8,7 +8,9 @@ const WidgetFooter = ({
   content,
   expanded,
   handleToggle,
-  expandContent
+  expandContent,
+  closeWidgets,
+  id
 }) => {
   return (
     <div className="cardFootWrapper">
@@ -20,7 +22,10 @@ const WidgetFooter = ({
       {expandContent && !content.errorMessage && (
         <StyledIconButton
           isExpanded={expanded}
-          onClick={handleToggle}
+          onClick={() => {
+            handleToggle();
+            closeWidgets(id);
+          }}
           aria-expanded={expandContent}
           aria-label="show more"
         >