Library improvements (#1925)

Co-authored-by: David Luzar <luzar.david@gmail.com>

src/components/Actions.tsx

@@ -109,6 +109,7 @@ export const ShapesSwitcher = ({
       }`;
       return (
         <ToolButton
+          className="Shape"
           key={value}
           type="radio"
           icon={icon}
@@ -132,6 +133,7 @@ export const ShapesSwitcher = ({
       );
     })}
     <ToolButton
+      className="Shape"
       type="button"
       icon={LIBRARY_ICON}
       name="editor-library"

src/components/LayerUI.tsx

@@ -103,8 +103,9 @@ const LibraryMenuItems = ({
   onInsertShape: (elements: readonly NonDeleted<ExcalidrawElement>[]) => void;
   onAddToLibrary: (elements: NonDeleted<ExcalidrawElement>[]) => void;
 }) => {
+  const isMobile = useIsMobile();
   const numCells = library.length + (pendingElements.length > 0 ? 1 : 0);
-  const CELLS_PER_ROW = 3;
+  const CELLS_PER_ROW = isMobile ? 4 : 6;
   const numRows = Math.max(1, Math.ceil(numCells / CELLS_PER_ROW));
   const rows = [];
   let addedPendingElements = false;
@@ -112,7 +113,7 @@ const LibraryMenuItems = ({
   for (let row = 0; row < numRows; row++) {
     const i = CELLS_PER_ROW * row;
     const children = [];
-    for (let j = 0; j < 3; j++) {
+    for (let j = 0; j < CELLS_PER_ROW; j++) {
       const shouldAddPendingElements: boolean =
         pendingElements.length > 0 &&
         !addedPendingElements &&
@@ -365,19 +366,21 @@ const LayerUI = ({
     });
   }, [setAppState]);
 
+  const libraryMenu = appState.isLibraryOpen ? (
+    <LibraryMenu
+      pendingElements={getSelectedElements(elements, appState)}
+      onClickOutside={closeLibrary}
+      onInsertShape={onInsertShape}
+      onAddToLibrary={deselectItems}
+    />
+  ) : null;
+
   const renderFixedSideContainer = () => {
     const shouldRenderSelectedShapeActions = showSelectedShapeActions(
       appState,
       elements,
     );
-    const libraryMenu = appState.isLibraryOpen ? (
+
-      <LibraryMenu
-        pendingElements={getSelectedElements(elements, appState)}
-        onClickOutside={closeLibrary}
-        onInsertShape={onInsertShape}
-        onAddToLibrary={deselectItems}
-      />
-    ) : null;
     return (
       <FixedSideContainer side="top">
         <HintViewer appState={appState} elements={elements} />
@@ -503,6 +506,7 @@ const LayerUI = ({
       appState={appState}
       elements={elements}
       actionManager={actionManager}
+      libraryMenu={libraryMenu}
       exportButton={renderExportDialog()}
       setAppState={setAppState}
       onUsernameChange={onUsernameChange}

src/components/LibraryUnit.scss

@@ -2,10 +2,10 @@
   align-items: center;
   border: 1px solid #ccc;
   display: flex;
-  height: 126px; // match width
   justify-content: center;
   position: relative;
-  width: 126px; // exactly match the toolbar width when 3 are lined up + padding
+  width: 63px;
+  height: 63px; // match width
 }
 
 .library-unit__dragger {

src/components/LibraryUnit.tsx

@@ -5,6 +5,7 @@ import { close } from "../components/icons";
 
 import "./LibraryUnit.scss";
 import { t } from "../i18n";
+import useIsMobile from "../is-mobile";
 
 // fa-plus
 const PLUS_ICON = (
@@ -50,8 +51,9 @@ export const LibraryUnit = ({
   }, [elements, pendingElements]);
 
   const [isHovered, setIsHovered] = useState(false);
+  const isMobile = useIsMobile();
 
-  const adder = isHovered && pendingElements && (
+  const adder = (isHovered || isMobile) && pendingElements && (
     <div className="library-unit__adder">{PLUS_ICON}</div>
   );
 
@@ -79,7 +81,7 @@ export const LibraryUnit = ({
         }}
       />
       {adder}
-      {elements && isHovered && (
+      {elements && (isHovered || isMobile) && (
         <button
           className="library-unit__removeFromLibrary"
           aria-label={t("labels.removeFromLibrary")}

src/components/LockIcon.tsx

@@ -46,7 +46,7 @@ export const LockIcon = (props: LockIconProps) => {
   return (
     <label
       className={`ToolIcon ToolIcon__lock ToolIcon_type_floating ${sizeCn} zen-mode-visibility ${
-        props.zenModeEnabled && "zen-mode-visibility--hidden"
+        props.zenModeEnabled ? "zen-mode-visibility--hidden" : ""
       }`}
       title={`${props.title} — Q`}
     >

src/components/MobileMenu.tsx

@@ -24,6 +24,7 @@ type MobileMenuProps = {
   exportButton: React.ReactNode;
   setAppState: any;
   elements: readonly NonDeletedExcalidrawElement[];
+  libraryMenu: JSX.Element | null;
   onRoomCreate: () => void;
   onUsernameChange: (username: string) => void;
   onRoomDestroy: () => void;
@@ -34,6 +35,7 @@ type MobileMenuProps = {
 export const MobileMenu = ({
   appState,
   elements,
+  libraryMenu,
   actionManager,
   exportButton,
   setAppState,
@@ -66,6 +68,7 @@ export const MobileMenu = ({
                 title={t("toolBar.lock")}
               />
             </Stack.Row>
+            {libraryMenu}
           </Stack.Col>
         )}
       </Section>

src/components/ToolButton.tsx

@@ -78,7 +78,7 @@ export const ToolButton = React.forwardRef((props: ToolButtonProps, ref) => {
   }
 
   return (
-    <label className="ToolIcon" title={props.title}>
+    <label className={`ToolIcon ${props.className ?? ""}`} title={props.title}>
       <input
         className={`ToolIcon_type_radio ${sizeCn}`}
         type="radio"

src/components/ToolIcon.scss

@@ -130,6 +130,17 @@
   user-select: none;
 }
 
+@media (max-width: 425px) {
+  .Shape .ToolIcon__icon {
+    width: 2rem;
+    height: 2rem;
+
+    svg {
+      height: 0.8em;
+    }
+  }
+}
+
 @media (max-width: 360px) {
   .ToolIcon.ToolIcon__lock {
     display: inline-block;
@@ -149,8 +160,6 @@
     }
 
     .ToolIcon__icon {
-      width: 2.5rem;
-      height: 2.5rem;
       border-radius: inherit;
     }
     svg {