Added table icons (#383)

alineacms · Apr 30, 2024 · fd71dd4 · fd71dd4
1 parent 13defd3
commit fd71dd4
Show file tree

Hide file tree

Showing 10 changed files with 178 additions and 18 deletions.
diff --git a/src/field/richtext/RichTextToolbar.tsx b/src/field/richtext/RichTextToolbar.tsx
@@ -23,6 +23,15 @@ import {FieldToolbar} from 'alinea/dashboard/view/entry/FieldToolbar'
 import {IconButton} from 'alinea/dashboard/view/IconButton'
 import {IcRoundSubscript} from 'alinea/ui/icons/IcRoundSubscript'
 import {IcRoundSuperscript} from 'alinea/ui/icons/IcRoundSuperscript'
+import {TableDelete} from 'alinea/ui/icons/TableDelete'
+import {TableDeleteColumn} from 'alinea/ui/icons/TableDeleteColumn'
+import {TableDeleteRow} from 'alinea/ui/icons/TableDeleteRow'
+import {TableHeaderRow} from 'alinea/ui/icons/TableHeaderRow'
+import {TableInsert} from 'alinea/ui/icons/TableInsert'
+import {TableInsertColumnAfter} from 'alinea/ui/icons/TableInsertColumnAfter'
+import {TableInsertColumnBefore} from 'alinea/ui/icons/TableInsertColumnBefore'
+import {TableInsertRowAfter} from 'alinea/ui/icons/TableInsertRowAfter'
+import {TableInsertRowBefore} from 'alinea/ui/icons/TableInsertRowBefore'
 import {forwardRef, Ref} from 'react'
 import {PickTextLinkFunc} from './PickTextLink.js'
 import {attributesToReference, referenceToAttributes} from './ReferenceLink.js'
@@ -39,6 +48,16 @@ enum Styles {
   h5 = 'Heading 5'
 }
 
+const HrDivider = () => (
+  <hr
+    style={{
+      border: 'none',
+      marginBlock: '2px',
+      borderTop: '1px solid var(--alinea-outline)'
+    }}
+  />
+)
+
 export type RichTextToolbarProps = {
   editor: Editor
   focusToggle: (target: EventTarget | null) => void
@@ -182,42 +201,68 @@ export const RichTextToolbar = forwardRef(function RichTextToolbar(
                 {selectedTable ? (
                   <>
                     <DropdownMenu.Item
-                      onClick={() => exec().addColumnBefore().run()}
+                      onClick={() => exec().addRowBefore().run()}
                     >
-                      <Typo.P>Insert column before</Typo.P>
+                      <HStack gap={8} center>
+                        <Icon icon={TableInsertRowBefore} size={20} />
+                        Insert row before
+                      </HStack>
                     </DropdownMenu.Item>
                     <DropdownMenu.Item
-                      onClick={() => exec().addColumnAfter().run()}
+                      onClick={() => exec().addRowAfter().run()}
                     >
-                      <Typo.P>Insert column after</Typo.P>
+                      <HStack gap={8} center>
+                        <Icon icon={TableInsertRowAfter} size={20} />
+                        Insert row after
+                      </HStack>
+                    </DropdownMenu.Item>
+                    <DropdownMenu.Item onClick={() => exec().deleteRow().run()}>
+                      <HStack gap={8} center>
+                        <Icon icon={TableDeleteRow} size={20} />
+                        Delete row
+                      </HStack>
                     </DropdownMenu.Item>
                     <DropdownMenu.Item
-                      onClick={() => exec().deleteColumn().run()}
+                      onClick={() => exec().toggleHeaderRow().run()}
                     >
-                      <Typo.P>Delete column</Typo.P>
+                      <HStack gap={8} center>
+                        <Icon icon={TableHeaderRow} size={20} />
+                        Toggle header row
+                      </HStack>
                     </DropdownMenu.Item>
+                    <HrDivider />
                     <DropdownMenu.Item
-                      onClick={() => exec().addRowBefore().run()}
+                      onClick={() => exec().addColumnBefore().run()}
                     >
-                      <Typo.P>Insert row before</Typo.P>
+                      <HStack gap={8} center>
+                        <Icon icon={TableInsertColumnBefore} size={20} />
+                        Insert column before
+                      </HStack>
                     </DropdownMenu.Item>
                     <DropdownMenu.Item
-                      onClick={() => exec().addRowAfter().run()}
+                      onClick={() => exec().addColumnAfter().run()}
                     >
-                      <Typo.P>Insert row after</Typo.P>
-                    </DropdownMenu.Item>
-                    <DropdownMenu.Item onClick={() => exec().deleteRow().run()}>
-                      <Typo.P>Delete row</Typo.P>
+                      <HStack gap={8} center>
+                        <Icon icon={TableInsertColumnAfter} size={20} />
+                        Insert column after
+                      </HStack>
                     </DropdownMenu.Item>
                     <DropdownMenu.Item
-                      onClick={() => exec().deleteTable().run()}
+                      onClick={() => exec().deleteColumn().run()}
                     >
-                      <Typo.P>Delete table</Typo.P>
+                      <HStack gap={8} center>
+                        <Icon icon={TableDeleteColumn} size={20} />
+                        Delete column
+                      </HStack>
                     </DropdownMenu.Item>
+                    <HrDivider />
                     <DropdownMenu.Item
-                      onClick={() => exec().toggleHeaderRow().run()}
+                      onClick={() => exec().deleteTable().run()}
                     >
-                      <Typo.P>Toggle header row</Typo.P>
+                      <HStack gap={8} center>
+                        <Icon icon={TableDelete} size={20} />
+                        Delete table
+                      </HStack>
                     </DropdownMenu.Item>
                   </>
                 ) : (
@@ -228,7 +273,10 @@ export const RichTextToolbar = forwardRef(function RichTextToolbar(
                         .run()
                     }
                   >
-                    <Typo.P>Insert table</Typo.P>
+                    <HStack gap={8} center>
+                      <Icon icon={TableInsert} size={20} />
+                      Insert table
+                    </HStack>
                   </DropdownMenu.Item>
                 )}
               </DropdownMenu.Items>

diff --git a/src/ui/icons/TableDelete.tsx b/src/ui/icons/TableDelete.tsx
@@ -0,0 +1,16 @@
+import {SVGProps} from 'react'
+
+export function TableDelete(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        d="M19 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6c0-1.1.9-2 2-2h14ZM5 6v12h14V6H5Z"
+      ></path>
+      <path
+        fill="currentColor"
+        d="m14.4 8.6 1.1 1-2.4 2.4 2.4 2.4-1.1 1.1-2.4-2.4-2.4 2.4-1-1.1 2.3-2.4-2.3-2.4 1-1 2.4 2.3z"
+      ></path>
+    </svg>
+  )
+}
diff --git a/src/ui/icons/TableDeleteColumn.tsx b/src/ui/icons/TableDeleteColumn.tsx
@@ -0,0 +1,12 @@
+import {SVGProps} from 'react'
+
+export function TableDeleteColumn(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        d="M19 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6c0-1.1.9-2 2-2h14Zm-4 4h-2V6h-2v2H9V6H5v12h4v-2h2v2h2v-2h2v2h4V6h-4v2Zm.3.5 1 1.2-3 2.3 3 2.3-1 1.2L12 13l-3.3 2.6-1-1.2 3-2.3-3-2.3 1-1.2L12 11l3.3-2.5Z"
+      ></path>
+    </svg>
+  )
+}
diff --git a/src/ui/icons/TableDeleteRow.tsx b/src/ui/icons/TableDeleteRow.tsx
@@ -0,0 +1,12 @@
+import {SVGProps} from 'react'
+
+export function TableDeleteRow(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        d="M19 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6c0-1.1.9-2 2-2h14Zm0 2H5v3h2.5v2H5v2h2.5v2H5v3h14v-3h-2.5v-2H19v-2h-2.5V9H19V6Zm-4.7 1.8 1.2 1L13 12l2.6 3.3-1.2 1-2.3-3-2.3 3-1.2-1L11 12 8.5 8.7l1.2-1 2.3 3 2.3-3Z"
+      ></path>
+    </svg>
+  )
+}
diff --git a/src/ui/icons/TableHeaderRow.tsx b/src/ui/icons/TableHeaderRow.tsx
@@ -0,0 +1,12 @@
+import {SVGProps} from 'react'
+
+export function TableHeaderRow(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        d="M19 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6c0-1.1.9-2 2-2h14ZM5 15v3h6v-3H5Zm14 0h-6v3h6v-3Zm0-9h-6v3h6V6ZM5 9h6V6H5v3Z"
+      ></path>
+    </svg>
+  )
+}
diff --git a/src/ui/icons/TableInsert.tsx b/src/ui/icons/TableInsert.tsx
@@ -0,0 +1,12 @@
+import {SVGProps} from 'react'
+
+export function TableInsert(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        d="M19 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6c0-1.1.9-2 2-2h14ZM5 14v4h6v-4H5Zm14 0h-6v4h6v-4Zm0-6h-6v4h6V8ZM5 12h6V8H5v4Z"
+      ></path>
+    </svg>
+  )
+}
diff --git a/src/ui/icons/TableInsertColumnAfter.tsx b/src/ui/icons/TableInsertColumnAfter.tsx
@@ -0,0 +1,12 @@
+import {SVGProps} from 'react'
+
+export function TableInsertColumnAfter(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        d="M20 4c.6 0 1 .4 1 1v2a1 1 0 0 1-2 0V6h-8v12h8v-1a1 1 0 0 1 2 0v2c0 .5-.4 1-.9 1H5a2 2 0 0 1-2-2V6c0-1.1.9-2 2-2h15ZM9 13H5v5h4v-5Zm7-5c.5 0 1 .4 1 .9V11h2a1 1 0 0 1 .1 2H17v2a1 1 0 0 1-2 .1V13h-2a1 1 0 0 1-.1-2H15V9c0-.6.4-1 1-1ZM9 6H5v5h4V6Z"
+      ></path>
+    </svg>
+  )
+}
diff --git a/src/ui/icons/TableInsertColumnBefore.tsx b/src/ui/icons/TableInsertColumnBefore.tsx
@@ -0,0 +1,12 @@
+import {SVGProps} from 'react'
+
+export function TableInsertColumnBefore(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        d="M19 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a1 1 0 0 1-1-1v-2a1 1 0 0 1 2 0v1h8V6H5v1a1 1 0 1 1-2 0V5c0-.6.4-1 1-1h15Zm0 9h-4v5h4v-5ZM8 8c.5 0 1 .4 1 .9V11h2a1 1 0 0 1 .1 2H9v2a1 1 0 0 1-2 .1V13H5a1 1 0 0 1-.1-2H7V9c0-.6.4-1 1-1Zm11-2h-4v5h4V6Z"
+      ></path>
+    </svg>
+  )
+}
diff --git a/src/ui/icons/TableInsertRowAfter.tsx b/src/ui/icons/TableInsertRowAfter.tsx
@@ -0,0 +1,12 @@
+import {SVGProps} from 'react'
+
+export function TableInsertRowAfter(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        d="M12 13c.5 0 1 .4 1 .9V16h2a1 1 0 0 1 .1 2H13v2a1 1 0 0 1-2 .1V18H9a1 1 0 0 1-.1-2H11v-2c0-.6.4-1 1-1Zm6 7a1 1 0 0 1 0-2h1v-6H5v6h1a1 1 0 0 1 0 2H4a1 1 0 0 1-1-1V6c0-1.1.9-2 2-2h14a2 2 0 0 1 2 2v13c0 .5-.4 1-.9 1H18ZM11 6H5v4h6V6Zm8 0h-6v4h6V6Z"
+      ></path>
+    </svg>
+  )
+}
diff --git a/src/ui/icons/TableInsertRowBefore.tsx b/src/ui/icons/TableInsertRowBefore.tsx
@@ -0,0 +1,12 @@
+import {SVGProps} from 'react'
+
+export function TableInsertRowBefore(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        d="M6 4a1 1 0 1 1 0 2H5v6h14V6h-1a1 1 0 0 1 0-2h2c.6 0 1 .4 1 1v13a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5c0-.6.4-1 1-1h2Zm5 10H5v4h6v-4Zm8 0h-6v4h6v-4ZM12 3c.5 0 1 .4 1 .9V6h2a1 1 0 0 1 0 2h-2v2a1 1 0 0 1-2 .1V8H9a1 1 0 0 1 0-2h2V4c0-.6.4-1 1-1Z"
+      ></path>
+    </svg>
+  )
+}