EntryTree archived vs unpublished icon and layout changes (#384)

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

Hide file tree

Showing 3 changed files with 43 additions and 23 deletions.
diff --git a/src/dashboard/view/EntryTree.module.scss b/src/dashboard/view/EntryTree.module.scss
@@ -133,8 +133,10 @@
       font-weight: 600;
     }
 
+    &.is-archived &-label-itemname,
+    &.is-unpublished &-label-itemName,
     &.is-untranslated &-label-itemName {
-      opacity: 0.7;
+      opacity: 0.5;
     }
 
     &-arrow {

diff --git a/src/dashboard/view/EntryTree.tsx b/src/dashboard/view/EntryTree.tsx
@@ -9,11 +9,10 @@ import {EntryPhase} from 'alinea/core/EntryRow'
 import {Type} from 'alinea/core/Type'
 import {Icon, fromModule, px} from 'alinea/ui'
 import {IcOutlineDescription} from 'alinea/ui/icons/IcOutlineDescription'
-import {IcRoundArchive} from 'alinea/ui/icons/IcRoundArchive'
-import {IcRoundEdit} from 'alinea/ui/icons/IcRoundEdit'
 import {IcRoundKeyboardArrowDown} from 'alinea/ui/icons/IcRoundKeyboardArrowDown'
 import {IcRoundKeyboardArrowRight} from 'alinea/ui/icons/IcRoundKeyboardArrowRight'
 import {IcRoundTranslate} from 'alinea/ui/icons/IcRoundTranslate'
+import {IcRoundVisibilityOff} from 'alinea/ui/icons/IcRoundVisibilityOff'
 import {useAtomValue} from 'jotai'
 import {useEffect, useRef} from 'react'
 import {changedEntriesAtom} from '../atoms/DbAtoms.js'
@@ -55,14 +54,17 @@ function EntryTreeItem({item, data}: EntryTreeItemProps) {
   const isDraft = selected.phase === EntryPhase.Draft
   const isUntranslated = locale && selected.locale !== locale
   const isArchived = selected.phase === EntryPhase.Archived
+  const isUnpublished = selected.phase === EntryPhase.Archived
   const isSelected = entryId && itemData.id === entryId
+
   return (
     <div
       {...item.getProps()}
       ref={item.registerElement}
       className={styles.tree.item({
-        untranslated: isUntranslated,
         selected: isSelected,
+        unpublished: isUnpublished,
+        untranslated: isUntranslated,
         drop: item.isDropTarget() && item.isDraggingOver(),
         dropAbove: item.isDropTargetAbove() && item.isDraggingOver(),
         dropBelow: item.isDropTargetBelow() && item.isDraggingOver()
@@ -78,7 +80,11 @@ function EntryTreeItem({item, data}: EntryTreeItemProps) {
         <span className={styles.tree.item.icon()}>
           <Icon
             icon={
-              isUntranslated ? IcRoundTranslate : icon ?? IcOutlineDescription
+              isUntranslated
+                ? IcRoundTranslate
+                : isUnpublished
+                ? IcRoundVisibilityOff
+                : icon ?? IcOutlineDescription
             }
           />
         </span>
@@ -87,6 +93,24 @@ function EntryTreeItem({item, data}: EntryTreeItemProps) {
           {selectedEntry(locale, itemData).title}
         </span>
 
+        {/* {isUntranslated && (
+          <span className={styles.tree.status({untranslated: true})}>
+            <Icon icon={IcRoundTranslate} size={16} />
+          </span>
+        )} */}
+
+        {/* {!isUntranslated && isDraft && (
+          <span className={styles.tree.status({draft: true})}>
+            <Icon icon={IcRoundEdit} size={16} />
+          </span>
+        )} */}
+
+        {/* {!isUntranslated && isArchived && (
+          <span className={styles.tree.status({archived: true})}>
+            <Icon icon={IcRoundArchive} size={16} />
+          </span>
+        )} */}
+
         {item.isFolder() && (
           <span className={styles.tree.item.arrow()}>
             {item.isExpanded() ? (
@@ -96,24 +120,6 @@ function EntryTreeItem({item, data}: EntryTreeItemProps) {
             )}
           </span>
         )}
-
-        {/*isUntranslated && (
-            <span className={styles.tree.status()}>
-              <Icon icon={IcRoundTranslate} />
-            </span>
-          )*/}
-
-        {!isUntranslated && isDraft && (
-          <span className={styles.tree.status({draft: true})}>
-            <Icon icon={IcRoundEdit} />
-          </span>
-        )}
-
-        {!isUntranslated && isArchived && (
-          <span className={styles.tree.status({archived: true})}>
-            <Icon icon={IcRoundArchive} size={18} />
-          </span>
-        )}
       </button>
     </div>
   )

diff --git a/src/ui/icons/IcRoundVisibilityOff.tsx b/src/ui/icons/IcRoundVisibilityOff.tsx
@@ -0,0 +1,12 @@
+import {SVGProps} from 'react'
+
+export function IcRoundVisibilityOff(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        d="M12 6.5c2.76 0 5 2.24 5 5c0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24M2.71 3.16a.996.996 0 0 0 0 1.41l1.97 1.97A11.892 11.892 0 0 0 1 11.5C2.73 15.89 7 19 12 19c1.52 0 2.97-.3 4.31-.82l2.72 2.72a.996.996 0 1 0 1.41-1.41L4.13 3.16c-.39-.39-1.03-.39-1.42 0M12 16.5c-2.76 0-5-2.24-5-5c0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57c0 1.66 1.34 3 3 3c.2 0 .38-.03.57-.07L14.14 16c-.65.32-1.37.5-2.14.5m2.97-5.33a2.97 2.97 0 0 0-2.64-2.64z"
+      ></path>
+    </svg>
+  )
+}