First step in introducing actions bar

cheeaun · Jan 13, 2024 · 0ebc0fa · 0ebc0fa
1 parent 35974cc
commit 0ebc0fa
Show file tree

Hide file tree

Showing 3 changed files with 118 additions and 3 deletions.
diff --git a/src/components/status.css b/src/components/status.css
@@ -1766,6 +1766,64 @@ a.card:is(:hover, :focus):visited {
   color: var(--green-color);
 }
 
+/* ACTIONS */
+
+.status-actions {
+  display: flex;
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  background-color: var(--bg-color);
+  border-radius: 8px;
+  z-index: 1;
+  border: 1px solid var(--outline-color);
+  box-shadow: 0 2px 6px -3px var(--drop-shadow-color);
+  overflow: clip;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(8px);
+  transform-origin: right center;
+  transition: all 0.1s ease-out 0.3s, border-color 0.3s ease-out;
+
+  button.plain {
+    color: var(--text-insignificant-color);
+    backdrop-filter: none;
+    padding: 10px;
+    border-radius: 8px;
+
+    &:is(:hover, :focus) {
+      color: var(--text-color);
+      background-color: var(--bg-faded-color);
+      filter: none !important;
+      box-shadow: inset 0 0 0 2px var(--bg-color);
+    }
+
+    &.reblog-button.checked {
+      color: var(--reblog-color);
+    }
+
+    &.favourite-button.checked {
+      color: var(--favourite-color);
+    }
+
+    &.bookmark-button.checked {
+      color: var(--link-color);
+    }
+  }
+
+  &:hover {
+    border-color: var(--outline-hover-color);
+  }
+
+  &:hover,
+  .status:hover &:not(:hover),
+  &.open {
+    opacity: 1;
+    pointer-events: auto;
+    transform: scale(1);
+  }
+}
+
 /* BADGE */
 
 .status-badge {

diff --git a/src/components/status.jsx b/src/components/status.jsx
@@ -125,6 +125,7 @@ function Status({
   onStatusLinkClick = () => {},
   showFollowedTags,
   allowContextMenu,
+  showActionsBar,
 }) {
   if (skeleton) {
     return (
@@ -640,7 +641,7 @@ function Status({
     };
   }
 
-  const menuInstanceRef = useRef();
+  const actionsRef = useRef();
   const StatusMenuItems = (
     <>
       {!isSizeLarge && (
@@ -1317,6 +1318,56 @@ function Status({
           {StatusMenuItems}
         </ControlledMenu>
       )}
+      {showActionsBar && size !== 'l' && !previewMode && !readOnly && (
+        <div class="status-actions" ref={actionsRef}>
+          <StatusButton
+            size="s"
+            title="Reply"
+            alt="Reply"
+            class="reply-button"
+            icon="comment"
+            iconSize="m"
+            onClick={replyStatus}
+          />
+          <StatusButton
+            size="s"
+            checked={favourited}
+            title={['Like', 'Unlike']}
+            alt={['Like', 'Liked']}
+            class="favourite-button"
+            icon="heart"
+            iconSize="m"
+            count={favouritesCount}
+            onClick={favouriteStatus}
+          />
+          <Menu2
+            portal={{
+              target: document.querySelector('.status-deck') || document.body,
+            }}
+            align="end"
+            gap={4}
+            overflow="auto"
+            viewScroll="close"
+            menuButton={({ open }) => {
+              if (actionsRef.current) {
+                actionsRef.current.classList.toggle('open', open);
+              }
+              return (
+                <button
+                  type="button"
+                  title="More"
+                  class="plain more-button"
+                  onClick={(e) => e.preventDefault()}
+                >
+                  <Icon icon="more2" size="m" alt="More" />
+                </button>
+              );
+            }}
+          >
+            {StatusMenuItems}
+          </Menu2>
+        </div>
+      )}
       {size !== 'l' && (
         <div class="status-badge">
           {reblogged && <Icon class="reblog" icon="rocket" size="s" />}
@@ -2212,7 +2263,9 @@ function StatusButton({
   class: className,
   title,
   alt,
+  size,
   icon,
+  iconSize = 'l',
   onClick,
   ...props
 }) {
@@ -2240,7 +2293,9 @@ function StatusButton({
     <button
       type="button"
       title={buttonTitle}
-      class={`plain ${className} ${checked ? 'checked' : ''}`}
+      class={`plain ${size ? 'small' : ''} ${className} ${
+        checked ? 'checked' : ''
+      }`}
       onClick={(e) => {
         if (!onClick) return;
         e.preventDefault();
@@ -2249,7 +2304,7 @@ function StatusButton({
       }}
       {...props}
     >
-      <Icon icon={icon} size="l" alt={iconAlt} />
+      <Icon icon={icon} size={iconSize} alt={iconAlt} />
       {!!count && (
         <>
           {' '}

diff --git a/src/pages/status.jsx b/src/pages/status.jsx
@@ -845,6 +845,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
                   enableTranslate
                   onMediaClick={handleMediaClick}
                   onStatusLinkClick={handleStatusLinkClick}
+                  showActionsBar={!!descendant}
                 />
               )}
               {ancestor && repliesCount > 1 && (
@@ -1400,6 +1401,7 @@ function SubComments({
                 size="s"
                 enableTranslate
                 onMediaClick={handleMediaClick}
+                showActionsBar
               />
               {!r.replies?.length && r.repliesCount > 0 && (
                 <div class="replies-link">