Restored Text widget expand functionality with display fixes

README.md

@@ -35,10 +35,11 @@ You can help make Cogboard more awesome by raising any encountered issues or fea
 [Contribution Guide](https://github.com/Cognifide/cogboard/blob/collaboration-info/CONTRIBUTING.md)
 
 [Code Of Conduct](https://github.com/Cognifide/cogboard/blob/master/CODE_OF_CONDUCT.md)
+
 ## Documentation
 
 See our [wiki](https://github.com/Cognifide/cogboard/wiki) for examples and documentation of all features.
 
 ## License
 
-**Cogboard** is licensed under [Apache License, Version 2.0 (the "License")](https://www.apache.org/licenses/LICENSE-2.0.txt)
+**Cogboard** is licensed under [Apache License, Version 2.0 (the "License")](https://www.apache.org/licenses/LICENSE-2.0.txt)

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

@@ -5,10 +5,12 @@ import ErrorMessage from '../ErrorMessage';
 import WidgetContent from '../WidgetContent';
 import WidgetTypeIcon from '../WidgetTypeIcon';
 import WidgetFooter from '../WidgetFooter';
+import TextWidget from '../widgets/types/TextWidget';
+
 export const mapStatusToColor = (status, theme) => theme.palette.status[status];
 
-export const getWidgetOverflow = type =>
-  type !== 'TextWidget' ? 'visible' : 'hidden';
+export const getWidgetOverflow = (type, expanded) =>
+  type !== 'TextWidget' || expanded ? 'visible' : 'hidden';
 
 export const dispatchEvent = (customEvent, data) => {
   if (customEvent) {
@@ -36,11 +38,12 @@ export const renderCardContent = (
       ) : !disabled && !expandContent ? (
         <WidgetContent id={id} type={type} content={content} />
       ) : expandContent ? (
-        <WidgetTypeIcon
+        <ExpandableContent
           type={type}
           status={status}
           content={content}
-        ></WidgetTypeIcon>
+          expanded={expanded}
+        />
       ) : (
         'Disabled'
       )}
@@ -56,3 +59,11 @@ export const renderCardContent = (
     </StyledCardContent>
   );
 };
+
+const ExpandableContent = ({ type, status, content, expanded }) => {
+  if (type !== 'TextWidget') {
+    return <WidgetTypeIcon type={type} status={status} content={content} />;
+  } else {
+    return !expanded ? <TextWidget {...content} singleLine={true} /> : null;
+  }
+};

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

@@ -165,7 +165,7 @@ const Widget = ({ id, index }) => {
         isOver={isOver}
         ref={ref}
         type={type}
-        expanded="true"
+        expanded={expanded}
       >
         {(isAuthenticated || widgetStatus !== 'NONE' || alwaysShowHeader) && (
           <StyledCardHeader
@@ -218,6 +218,7 @@ const Widget = ({ id, index }) => {
         {expandContent && (
           <StyledCollapse
             isExpanded={expanded}
+            type={type}
             status={widgetStatus}
             theme={theme}
             isDragging={isDragging}

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

@@ -13,6 +13,7 @@ export const StyledCard = styled(
     (
       {
         status,
+        expanded,
         showShadow,
         showBorder,
         columns,
@@ -44,7 +45,7 @@ export const StyledCard = styled(
   grid-column-end: span ${({ columns }) => columns * COLUMN_MULTIPLIER};
   grid-row-end: span ${({ rows }) => rows * ROW_MULTIPLIER};
   position: relative;
-  overflow: ${({ type }) => getWidgetOverflow(type)};
+  overflow: ${({ type, expanded }) => getWidgetOverflow(type, expanded)};
   .MuiCardContent-root {
     padding: 8px;
   }
@@ -110,11 +111,12 @@ export const StyledCardContent = styled(CardContent)`
 `;
 
 export const StyledCollapse = styled(
-  ({ isExpanded, isDragging, status, theme, ...props }) => (
+  ({ isExpanded, isDragging, status, type, theme, ...props }) => (
     <Collapse {...props} />
   )
 )`
-  bottom: 2px;
+  bottom: ${({ type }) =>
+    type === 'TextWidget' ? 'calc(100% - 96px)' : '2px'};
   background-color: ${({ isDragging, status, theme }) =>
     !isDragging
       ? mapStatusToColor(status, theme)

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

@@ -71,7 +71,7 @@ const widgetTypes = {
   TextWidget: {
     name: 'Text',
     component: TextWidget,
-    dialogFields: ['Text', 'TextSize', 'TextOrientation'],
+    dialogFields: ['Text', 'TextSize', 'TextOrientation', 'ExpandableContent'],
     validationConstraints: {
       Text: { max: 240 }
     },

cogboard-webapp/src/components/widgets/types/TextWidget/index.js

@@ -8,6 +8,7 @@ import {
   StyledPre,
   RotatedStyledPre,
   OverflowingText,
+  SingleLineText,
   SetWidth
 } from './styled';
 
@@ -19,21 +20,29 @@ export const ModifiedWidth = (component, height) => {
   return component;
 };
 
-const TruncatedText = ({ isVertical, parentDimensions, children }) => {
+const TruncatedText = ({
+  isVertical,
+  parentDimensions,
+  children,
+  singleLine
+}) => {
   let TruncatedPre = null;
 
   if (isVertical && parentDimensions !== null) {
     const { height } = parentDimensions;
     const ModifiedPre = ModifiedWidth(RotatedStyledPre, height);
+
     TruncatedPre = OverflowingText(ModifiedPre);
+  } else if (singleLine) {
+    TruncatedPre = SingleLineText(StyledPre);
   } else {
     TruncatedPre = OverflowingText(StyledPre);
   }
 
   return <TruncatedPre>{children}</TruncatedPre>;
 };
 
-const TextWidget = ({ text, textSize, isVertical }) => {
+const TextWidget = ({ text, textSize, isVertical, singleLine }) => {
   const targetRef = useRef();
   const centerWrapperDimensions = useSize(targetRef);
 
@@ -43,6 +52,7 @@ const TextWidget = ({ text, textSize, isVertical }) => {
         <TruncatedText
           isVertical={isVertical}
           parentDimensions={centerWrapperDimensions}
+          singleLine={singleLine}
         >
           {text}
         </TruncatedText>
@@ -54,7 +64,12 @@ const TextWidget = ({ text, textSize, isVertical }) => {
 TextWidget.propTypes = {
   text: string.isRequired,
   textSize: string.isRequired,
-  isVertical: bool.isRequired
+  isVertical: bool.isRequired,
+  singleLine: bool
+};
+
+TextWidget.defaultProps = {
+  singleLine: false
 };
 
 export default TextWidget;

cogboard-webapp/src/components/widgets/types/TextWidget/styled.js

@@ -33,6 +33,12 @@ export const OverflowingText = component => styled(component)`
   text-overflow: ellipsis;
 `;
 
+export const SingleLineText = component => styled(component)`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
 export const SetWidth = (component, componentWidth) => styled(component)`
   min-width: ${componentWidth}px;
   max-width: ${componentWidth}px;