Clip cards and reduce the amount of text taht can be displayed in the…

… card list - Add a see more button to card items - Text 'Edit', 'Focus' and 'Discard' changes to card items while clipped
mdyna · Feb 25, 2020 · e687b17 · e687b17
1 parent e502a93
commit e687b17
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 24 deletions.
diff --git a/app/components/Cards/CardItem.jsx b/app/components/Cards/CardItem.jsx
@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Labels from 'UI/Labels';
 import Editor from 'Components/MarkdownEditor';
+import FocusIcon from 'UI/FocusIcon';
 import BoardsIcon from 'UI/BoardsIcon';
 import BoardPicker from 'UI/BoardPicker';
 import Button from 'UI/Button';
@@ -141,7 +142,12 @@ class MdynaCard extends PureComponent {
             cardActions.editCard(card, isFocused);
           }
         }}
-        className={classnames(className, COLOR_LABELS[color], 'card-item', isFocused && 'focused')}
+        className={classnames(
+          className,
+          COLOR_LABELS[color],
+          'card-item',
+          isFocused && 'focused',
+        )}
         style={{
           backgroundColor: color,
           transition: 'all 0.5s ease-in',
@@ -210,17 +216,15 @@ class MdynaCard extends PureComponent {
               color={color}
             />
             {cardBoardName !== 'INBOX' && activeBoardId !== card.board && (
-            <Box
-              className="board-indicator"
-              onClick={() => changeActiveBoard(card.board)}
-            >
-              <Text color={color} className="board-indicator-text">
-                <BoardsIcon />
-                <Text>
-                  {cardBoardName}
+              <Box
+                className="board-indicator"
+                onClick={() => changeActiveBoard(card.board)}
+              >
+                <Text color={color} className="board-indicator-text">
+                  <BoardsIcon />
+                  <Text>{cardBoardName}</Text>
                 </Text>
-              </Text>
-            </Box>
+              </Box>
             )}
           </Box>
           {this.renderCardDate()}
@@ -266,6 +270,14 @@ class MdynaCard extends PureComponent {
               backgroundColor: 'transparent',
             }}
           />
+          {card.seeMore && !isFocused && (
+            <div className="see-more-btn">
+              <Button onClick={() => focusCard({ ...card, text: card.fullText })}>
+              See More
+                <FocusIcon color={color} />
+              </Button>
+            </div>
+          )}
         </KeyboardEventHandler>
       </Box>
     );

diff --git a/app/components/Cards/CardList.scss b/app/components/Cards/CardList.scss
@@ -29,6 +29,20 @@
       margin: 5px;
     }
   }
+  .see-more-btn {
+    background-color: #333;
+    padding: 5px;
+    border-radius: 10px;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: flex-start;
+    width: fit-content;
+    margin: 15px auto;
+    button svg {
+      margin: 0 15px;
+    }
+  }
   .no-notes-box {
     margin-top: 20%;
   }

diff --git a/app/store/reducers/cards.js b/app/store/reducers/cards.js
@@ -101,7 +101,7 @@ export default function cards(state = [], action) {
             ...action.card,
             id: cardId,
             isEditing: false,
-            text: action.card.text,
+            text: action.card.fullText || action.card.text,
             title: action.card.title,
             labels: action.card.labels,
             color: action.card.color,
@@ -163,10 +163,11 @@ export default function cards(state = [], action) {
           return {
             ...action.card,
             id: cardId,
+            text: card.fullText || card.text,
             isEditing: true,
             editingLabels: card.labels,
             editingColor: card.color,
-            editingText: card.text,
+            editingText: card.fullText || card.text,
             editingTitle: card.title,
           };
         }

diff --git a/app/store/selectors.js b/app/store/selectors.js
@@ -57,15 +57,24 @@ const filtersSelector = state => state.filters;
 const cardListSelector = createSelector(
   cardsSelector,
   filtersSelector,
-  (cards, filters) => (filters.isFocused
-    ? [filters.focusedCard]
-    : sortCards(
-      cards,
-      filters.sorting || SORTING_BY_DATE,
-      filters.order || DESCENDING_ORDER,
-      filters.archivedFilterOn || false,
-      filters.activeBoard || false,
-    )),
+  (cards, filters) => {
+    const cardList = filters.isFocused
+      ? [filters.focusedCard]
+      : sortCards(
+        cards,
+        filters.sorting || SORTING_BY_DATE,
+        filters.order || DESCENDING_ORDER,
+        filters.archivedFilterOn || false,
+        filters.activeBoard || false,
+      );
+    const hideText = c => !filters.isFocused && !c.isEditing && (c.text.length > 500);
+    return cardList.map(c => ({
+      ...c,
+      text: hideText(c) ? c.text.slice(0, 500) : c.text,
+      fullText: hideText(c) ? c.text : '',
+      seeMore: hideText(c),
+    }));
+  },
 );
 
 const boardLabelsSelector = createSelector(
@@ -80,7 +89,9 @@ const boardLabelsSelector = createSelector(
         labels.push(...card.labels);
       }
     }
-    return [...new Set(labels.map(l => l.title))].map(uniqL => ({ title: uniqL }));
+    return [...new Set(labels.map(l => l.title))].map(uniqL => ({
+      title: uniqL,
+    }));
   },
 );
 
@@ -109,7 +120,10 @@ const titlesSelector = createSelector(
 );
 
 const labelsSelector = state => state.labels;
-const globalLabelsSelector = createSelector(labelsSelector, labels => labels.map(l => l.title));
+const globalLabelsSelector = createSelector(
+  labelsSelector,
+  labels => labels.map(l => l.title),
+);
 
 const SELECTORS = {
   cardListSelector,