Mod/library card textarea

src/components/Canvas/hooks.js

@@ -6,7 +6,8 @@ import * as actions from '../../store/actionIndex';
 import * as fireactions from '../../store/firestoreIndex';
 import { manageUser } from "../../store/firestoreAPI/authTransactions";
 
-import { GRID } from '../../shared/constants/grid';
+import { GRID } from '../../shared/constants';
+import { ANIMATION } from '../Card/hooks';
 
 // TODO separate out the network code into functions data/request or something
 //    link the authlistener and app status management to App.js
@@ -173,7 +174,7 @@ export const useCanvasHooks = () => {
         } else {
           setCardAnimation({
             ...cardAnimation,
-            [droppedCard]: 'card-blink .25s step-end 3 alternate',
+            [droppedCard]: ANIMATION.cardBlink,
           });
         }
       }

src/components/Canvas/index.jsx

@@ -2,9 +2,9 @@ import React from 'react';
 import { Rnd } from 'react-rnd';
 
 import { CANVAS_STATES, CANVAS_DIMENSIONS, useCanvasHooks } from './hooks';
-import Card from '../Card';
+import Card from '../Card/Card';
 
-import { GRID } from '../../shared/constants/grid';
+import { GRID } from '../../shared/constants';
 import './index.scss';
 import LibraryIcon from '../../assets/icons/library.svg';
 import PlusIcon from '../../assets/icons/plus.svg'

src/components/Card/index.jsx → src/components/Card/Card.jsx

@@ -6,8 +6,8 @@ import { useCardHooks } from './hooks';
 import Title from './Title';
 import Content from './Content';
 
-import './index.scss';
-import { GRID } from '../../shared/constants/grid';
+import './Card.scss';
+import { GRID } from '../../shared/constants';
 
 export const Card = ({
   cardId,
@@ -23,8 +23,8 @@ export const Card = ({
     position,
     rndStyle,
     animationStyle,
-    editingCard,
-    setEditingCard,
+    isEditing,
+    setIsEditing,
     onDragStart,
     onDragStop,
     onResizeStop,
@@ -43,7 +43,7 @@ export const Card = ({
       // position
       position={position}
       // drag
-      disableDragging={editingCard}
+      disableDragging={isEditing}
       dragHandleClassName="input-div"
       // dragGrid={[GRID.size, GRID.size]}
       onDragStart={onDragStart}
@@ -72,11 +72,11 @@ export const Card = ({
       >
         <Title
           cardId={cardId}
-          setEditingCard={setEditingCard}
+          setEditingCard={setIsEditing}
         />
         <Content
           cardId={cardId}
-          setEditingCard={setEditingCard}
+          setEditingCard={setIsEditing}
         />
       </div>
     </Rnd>

src/components/Card/Content.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { useContentHooks } from './hooks';
 
-import './index.scss';
+import './Card.scss';
 
 const Content = ({
   cardId,
@@ -38,4 +38,4 @@ const Content = ({
   );
 };
 
-export default Content;
+export default Content;

src/components/Card/LibraryCard.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import { useLibraryCardHooks } from './hooks';
+
+import Title from './Title';
+import LibraryContent from './LibraryContent';
+
+import './LibraryCard.scss';
+
+const LibraryCard = ({ cardId }) => {
+  const {
+    libraryCardRef,
+    isActive,
+    isSelected,
+    isEditing,
+    cardAnimation,
+    setIsEditing,
+    onDragStart,
+    onDragEnd,
+    onAnimationEnd,
+    onClick,
+  } = useLibraryCardHooks({
+    cardId
+  });
+
+  return (
+    <div
+      className={'library-card' + (isActive ? ' active-card' : ' inactive-card')}
+      draggable={!isEditing}
+      onAnimationEnd={onAnimationEnd}
+      onClick={onClick}
+      onDragStart={onDragStart}
+      onDragEnd={onDragEnd}
+      ref={libraryCardRef}
+      style={cardAnimation}
+    >
+      {/* <div className="library-border"> */}
+        <Title
+          cardId={cardId}
+          setEditingCard={setIsEditing}
+        />
+        <LibraryContent
+          cardId={cardId}
+          setEditingCard={setIsEditing}
+          isSelected={isSelected}
+        />
+      {/* </div> */}
+    </div>
+  );
+};
+
+export default LibraryCard;

src/components/Library/LibrarySearch/LibraryCard/LibraryCard.scss → src/components/Card/LibraryCard.scss

@@ -1,5 +1,4 @@
-// card config
-$title-bar-height: 2rem;
+// config
 $round-radius: 12px;
 
 .library-card {
@@ -9,66 +8,39 @@ $round-radius: 12px;
   height: auto;
   border-radius: $round-radius;
   box-shadow: 2px 8px 3px #d7d6d6;
-
-  .library-border {
-    border-radius: $round-radius;
-    box-shadow: 0 0 0 2px #f4f4f4;
-  }
-
-  &:hover .library-border {
-    box-shadow: 0 0 0 3px #c1e9ff;
-  }
-
-  .color-select {
-    position: absolute;
-    right: -1px;
-    top: 32px;
-    border-top: 1px solid black;
-    border-right: 1px solid black;
-    z-index: 100;
-
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-template-rows: repeat(3, 1fr);
-
-    button {
-      grid-column: span 1;
-      grid-row: span 1;
-      width: 31px;
-      height: 31px;
-      border: 0;
-      border-left: 1px solid black;
-      border-bottom: 1px solid black;
-      outline: none;
-    }
-  }
 }
+.active-card { box-shadow: 0 0 0 6px #DBE2EB, 2px 2px 8px -3px #D7D6D6; }
+.inactive-card { box-shadow: 0 0 0 1px #F0F0F0, 2px 2px 8px -3px #D7D6D6; }
+.library-card:hover { box-shadow: 0 0 0 6px #DBE2EB, 2px 2px 8px -3px #D7D6D6; }
+@keyframes library-card-blink { 50% { box-shadow: 0 0 0 6px #5BC5FF, 2px 2px 8px -3px #D7D6D6; } }
 
 .library-card-content-container {
+  border-radius: 0 0 $round-radius $round-radius;
   position: relative;
-
   -webkit-transition: 0.4s;
   transition: 0.4s;
 
   display: flex;
   flex-flow: column nowrap;
 
   .library-card-textarea {
-    flex: 1 1 auto;
-    box-sizing: border-box;
-    width: 100%;
-
+    display: block; /* Fallback for non-webkit */
+    display: -webkit-box;
+    max-width: 100%;
+    margin: 0 auto;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
     margin: 0;
-    padding: 15px 0px 15px 15px;
+    padding: 15px 8px 15px 15px;
     border: 0;
     border-radius: $round-radius;
-    overflow-y: auto;
     resize: none;
-
     background-color: white;
-
     font-family: "Roboto";
 
+    cursor: auto;
+
     &::-webkit-scrollbar {
       width: 19px;
     }
@@ -82,12 +54,10 @@ $round-radius: 12px;
       border-radius: $round-radius;
     }
   }
-}
 
-@keyframes library-card-blink {
-  50% {
-    border: 3px solid red;
-    margin: 0px;
-    margin-bottom: 8px;
+  .library-card-textarea.selected {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    -webkit-line-clamp: inherit;
   }
 }

src/components/Card/LibraryContent.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { useContentHooks } from './hooks';
+
+import './LibraryCard.scss';
+
+const LibraryContent = ({
+  cardId,
+  isSelected,
+  setEditingCard,
+}) => {
+  const {
+    readOnly,
+    contentRef,
+    contentValue,
+    changeContentValue,
+    beginContentEdit,
+    endContentEdit,
+  } = useContentHooks({
+    cardId,
+    setEditingCard,
+  });
+
+  const condensedStyle = {
+    minHeight: '60px',
+    maxHeight: '80px',
+    height: '80px',
+  };
+
+  const expandedStyle = {
+    minHeight: '80px',
+    maxHeight: '50vh',
+    height: '35vh',
+  };
+
+  return (
+    <div
+      className='library-card-content-container'
+      style={isSelected ? expandedStyle : condensedStyle}
+    >
+      <textarea
+        className={`library-card-textarea ${isSelected ? "selected" : ""}`}
+        onBlur={endContentEdit}
+        onChange={(e) => changeContentValue(e.target.value)}
+        onClick={beginContentEdit}
+        onDragOver={(e) => e.preventDefault()}
+        onWheel={(e) => e.stopPropagation()}
+        placeholder='Fill me in!'
+        readOnly={readOnly}
+        ref={contentRef}
+        value={contentValue}
+      />
+    </div>
+  );
+};
+
+export default LibraryContent;

src/components/Card/Title.jsx

@@ -5,7 +5,7 @@ import { useTitleHooks, useColorDropdownHooks, useOptionsDropdownHooks } from '.
 import ColorDropdown from '../../components-shared/Dropdowns/ColorDropdown';
 import ActionDropdown from '../../components-shared/Dropdowns/ActionDropdown';
 
-import './index.scss';
+import './Card.scss';
 import '../../styles/colors.scss';
 import OpenColorBlackIcon from '../../assets/icons/rounded-square.svg';
 import OpenColorWhiteIcon from '../../assets/icons/rounded-square-white.svg';