library fixes

src/components-shared/Dropdowns/ActionDropdown.scss

@@ -27,6 +27,7 @@ $y: 38px;
 }
 
 .item-btn {
+  height: 30px;
   width: 100%;
   margin: 0;
   padding: 0;

src/components/Card/LibraryCard.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { useLibraryCardHooks } from './hooks';
 
-import Title from './Title';
+import LibraryTitle from './LibraryTitle';
 import LibraryContent from './LibraryContent';
 
 import './LibraryCard.scss';
@@ -35,7 +35,7 @@ const LibraryCard = ({ cardId }) => {
       style={cardAnimation}
     >
       {/* <div className="library-border"> */}
-        <Title
+        <LibraryTitle
           cardId={cardId}
           setEditingCard={setIsEditing}
         />

src/components/Card/LibraryTitle.jsx

@@ -0,0 +1,105 @@
+import React from 'react';
+
+import { useTitleHooks, useColorDropdownHooks, useOptionsDropdownLibraryHooks } from './hooks';
+
+import ColorDropdown from '../../components-shared/Dropdowns/ColorDropdown';
+import ActionDropdown from '../../components-shared/Dropdowns/ActionDropdown';
+
+import './Card.scss';
+import '../../styles/colors.scss';
+import OpenColorBlackIcon from '../../assets/icons/rounded-square.svg';
+import OpenColorWhiteIcon from '../../assets/icons/rounded-square-white.svg';
+import DropdownArrowBlackIcon from '../../assets/icons/dropdown-arrow.svg';
+import DropdownArrowWhiteIcon from '../../assets/icons/dropdown-arrow-white.svg';
+
+const LibraryTitle = ({
+  cardId,
+  setEditingCard,
+}) => {
+
+  const {
+    inputClassName,
+    readOnly,
+    titleRef,
+    titleValue,
+    changeTitleValue,
+    beginTitleEdit,
+    endTitleEdit,
+    handleTitleKeyPress,
+  } = useTitleHooks({
+    cardId,
+    setEditingCard,
+  });
+
+  const {
+    color,
+    colorDropdownBtnRef,
+    isColorDropdownOpen,
+    isLightColor,
+    closeColorDropdown,
+    openColorDropdown,
+    updateColor,
+  } = useColorDropdownHooks({ cardId });
+
+  const {
+    isOptionDropdownOpen,
+    options,
+    optionDropdownBtnRef,
+    closeOptionsDropdown,
+    openOptionsDropdown,
+  } = useOptionsDropdownLibraryHooks({
+    beginTitleEdit,
+    cardId,
+  });
+
+  return (
+    <div className={'title ' + color}>
+      <div className={'input-div' + (isLightColor ? ' dark' : ' light')}>
+        <input
+          className={inputClassName}
+          maxLength='50'
+          onBlur={endTitleEdit}
+          onChange={(e) => changeTitleValue(e.target.value)}
+          onDoubleClick={beginTitleEdit}
+          onDragOver={(e) => e.preventDefault()}
+          onKeyDown={handleTitleKeyPress}
+          readOnly={readOnly}
+          ref={titleRef}
+          title={titleValue}
+          type='text'
+          value={titleValue}
+        />
+      </div>
+      <button
+        className='color-btn'
+        onClick={openColorDropdown}
+        ref={colorDropdownBtnRef}
+      >
+        <img src={isLightColor ? OpenColorBlackIcon : OpenColorWhiteIcon} />
+      </button>
+      <ColorDropdown
+        cardId={cardId}
+        btnRef={colorDropdownBtnRef}
+        cardColor={color}
+        isOpen={isColorDropdownOpen}
+        onClose={closeColorDropdown}
+        onUpdateColor={updateColor}
+      />
+      <button
+        className='dropdown-btn'
+        ref={optionDropdownBtnRef}
+        onClick={openOptionsDropdown}
+      >
+        <img src={isLightColor ? DropdownArrowBlackIcon : DropdownArrowWhiteIcon} />
+      </button>
+      <ActionDropdown
+        btnRef={optionDropdownBtnRef}
+        isOpen={isOptionDropdownOpen}
+        onClose={closeOptionsDropdown}
+        items={options}
+      />
+    </div>
+  );
+};
+
+export default LibraryTitle;

src/components/Card/hooks.js

@@ -9,6 +9,7 @@ import { ACTION_TYPE } from '../../components-shared/Dropdowns/ActionDropdown';
 
 import LibraryIcon from '../../assets/icons/library-icon.png';
 import RedTrashIcon from '../../assets/icons/red-trash.png';
+import { DEFAULT_CARD_POSITION } from '../../data/redux/project/constants';
 
 export const ANIMATION = {
   cardBlink: 'card-blink .25s step-end 4 alternate',
@@ -120,6 +121,7 @@ export const useLibraryCardHooks = ({
   const [isSelected, setIsSelected] = useState(false);
   const [isEditing, setIsEditing] = useState(false);
   const [cardAnimation, setCardAnimation] = useState({});
+  const [useAnimation, setUseAnimation] = useState(false);
 
   const libraryCardRef = useRef();
 
@@ -139,13 +141,19 @@ export const useLibraryCardHooks = ({
     isEditing,
     cardAnimation: { animation: cardAnimation[cardId] },
     setIsEditing,
-    onDragStart: (event) => event.dataTransfer.setData('text', cardId),
-    onDragEnd: () => {
+    onDragStart: (event) => {
+      event.dataTransfer.setData('text', cardId);
       if (cardTabs[activeTab]) {
+        setUseAnimation(true);
+      }
+    },
+    onDragEnd: () => {
+      if (useAnimation)  {
         setCardAnimation({
           ...cardAnimation,
           [cardId]: ANIMATION.libraryCardBlink,
         });
+        setUseAnimation(false);
       }
     },
     onAnimationEnd: () => setCardAnimation({
@@ -253,10 +261,6 @@ export const useOptionsDropdownHooks = ({
   const optionDropdownBtnRef = useRef();
 
   const options = [
-    // {
-    //   title: 'Insert image',
-    //   callback: () => {},
-    // },
     {
       title: 'Duplicate card',
       callback: () => dispatch(actions.project.copyCard({ id: cardId })),
@@ -276,7 +280,7 @@ export const useOptionsDropdownHooks = ({
     //   callback: () => {},
     // },
     {
-      title: 'Move to unsorted',
+      title: 'Remove from tab',
       callback: () => dispatch(actions.project.unlinkCardFromView({ id: cardId })),
       icon: LibraryIcon,
     },
@@ -301,6 +305,58 @@ export const useOptionsDropdownHooks = ({
   };
 };
 
+export const useOptionsDropdownLibraryHooks = ({
+  beginTitleEdit,
+  cardId,
+}) => {
+  const dispatch = useDispatch();
+
+  const activeTab = useSelector(state => state.project.present.activeViewId);
+  const cardTabs = useSelector(state => state.project.present.cards[cardId].views);
+  const [ isOptionDropdownOpen, setIsOptionDropdownOpen ] = useState(false);
+  const optionDropdownBtnRef = useRef();
+
+  const options = [
+    {
+      title: 'Add to tab',
+      type: cardTabs[activeTab] ? ACTION_TYPE.disabled : null,
+      callback: () => dispatch(actions.project.linkCardToView({ id: cardId, position: DEFAULT_CARD_POSITION })),
+    },
+    {
+      title: 'Remove from tab',
+      type: cardTabs[activeTab] ? null : ACTION_TYPE.disabled,
+      callback: () => dispatch(actions.project.unlinkCardFromView({ id: cardId })),
+    },
+    // {
+    //   title: 'Duplicate card',
+    //   callback: () => dispatch(actions.project.copyCard({ id: cardId })),
+    // },
+    {},
+    {
+      title: 'Rename',
+      callback: () => beginTitleEdit(),
+    },
+    {},
+    {
+      title: 'Delete',
+      type: ACTION_TYPE.danger,
+      icon: RedTrashIcon,
+      callback: () => dispatch(actions.session.setPopup({
+        type: POPUP_KEYS.confirmCardDelete,
+        id: cardId,
+      })),
+    },
+  ];
+
+  return {
+    optionDropdownBtnRef,
+    isOptionDropdownOpen,
+    options,
+    openOptionsDropdown: () => setIsOptionDropdownOpen(!isOptionDropdownOpen),
+    closeOptionsDropdown: () => setIsOptionDropdownOpen(false),
+  };
+};
+
 export const useContentHooks = ({
   cardId,
   setEditingCard,

src/styles/colors.scss

@@ -1,5 +1,5 @@
 .cloud { background-color: #F4F4F4; }
-.gray { background-color: #DBE2EB; }
+.gray { background-color: #CCD6E3; }
 .pink { background-color: #FFD8E1; }
 .lichen_green { background-color: #B8DAB6; }
 .cotton_blue { background-color: #C1E9FF; }