droplist for actions

2026-01-20 07:12:58 -05:00 · 2026-01-10 15:58:16 +02:00
parent 549b672d48
commit bcc8a0858c
4 changed files with 174 additions and 15 deletions
--- a/frontend/src/static/js/components/media-page/MediaPage.scss
+++ b/frontend/src/static/js/components/media-page/MediaPage.scss
@@ -785,6 +785,78 @@
    }
  }

+  .edit-media-dropdown {
+    position: relative;
+    display: inline-block;
+
+    .popup-fullscreen-overlay {
+      display: none;
+    }
+
+    .popup-main {
+      position: absolute;
+      top: calc(100% + 8px);
+      right: 0;
+      background: #fff;
+      border-radius: 8px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      min-width: 200px;
+      z-index: 1000;
+
+      .dark_theme & {
+        background: #2d2d2d;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+      }
+    }
+
+    .edit-options {
+      .navigation-menu-list {
+        padding: 8px 0;
+
+        li {
+          list-style: none;
+          margin: 0;
+
+          a {
+            display: flex;
+            align-items: center;
+            padding: 12px 16px;
+            text-decoration: none;
+            color: #333;
+            transition: background-color 0.2s ease;
+
+            .dark_theme & {
+              color: #e0e0e0;
+            }
+
+            &:hover {
+              background-color: rgba(0, 153, 51, 0.1);
+
+              .dark_theme & {
+                background-color: rgba(102, 187, 102, 0.2);
+              }
+            }
+
+            .material-icons {
+              margin-right: 12px;
+              font-size: 20px;
+              color: rgba(0, 153, 51, 0.9);
+
+              .dark_theme & {
+                color: rgba(102, 187, 102, 0.9);
+              }
+            }
+
+            span {
+              font-size: 14px;
+              font-weight: 500;
+            }
+          }
+        }
+      }
+    }
+  }
+
  .remove-media-icon {
    background-color: rgba(220, 53, 69, 0.9);

--- a/frontend/src/static/js/components/media-page/ViewerInfoContent.js
+++ b/frontend/src/static/js/components/media-page/ViewerInfoContent.js
@@ -4,7 +4,7 @@ import { useUser, usePopup } from '../../utils/hooks/';
 import { PageStore, MediaPageStore } from '../../utils/stores/';
 import { PageActions, MediaPageActions } from '../../utils/actions/';
 import { formatInnerLink, publishedOnDate } from '../../utils/helpers/';
-import { PopupMain } from '../_shared/';
+import { PopupMain, CircleIconButton, MaterialIcon, NavigationMenuList, NavigationContentApp } from '../_shared/';
 import CommentsList from '../comments/Comments';
 import { replaceString } from '../../utils/helpers/';
 import { translateString } from '../../utils/helpers/';
@@ -72,17 +72,103 @@ function MediaMetaField(props) {
  );
 }

-function EditMediaButton(props) {
-  let link = props.link;
+function getEditMenuItems() {
+  const items = [];
+  const friendlyToken = window.MediaCMS.mediaId;
+  const mediaData = MediaPageStore.get('media-data');
+  const mediaType = mediaData ? mediaData.media_type : null;
+  const isVideoOrAudio = mediaType === 'video' || mediaType === 'audio';
+  const allowMediaReplacement = window.MediaCMS.features.media.actions.allowMediaReplacement;

-  if (window.MediaCMS.site.devEnv) {
-    link = '/edit-media.html';
+  // Edit metadata - always available
+  items.push({
+    itemType: 'link',
+    link: `/edit?m=${friendlyToken}`,
+    text: translateString('Edit metadata'),
+    icon: 'edit',
+  });
+
+  // Trim - only for video/audio
+  if (isVideoOrAudio) {
+    items.push({
+      itemType: 'link',
+      link: `/edit_video?m=${friendlyToken}`,
+      text: translateString('Trim'),
+      icon: 'content_cut',
+    });
  }

+  // Captions - only for video/audio
+  if (isVideoOrAudio) {
+    items.push({
+      itemType: 'link',
+      link: `/add_subtitle?m=${friendlyToken}`,
+      text: translateString('Captions'),
+      icon: 'closed_caption',
+    });
+  }
+
+  // Chapters - only for video/audio
+  if (isVideoOrAudio) {
+    items.push({
+      itemType: 'link',
+      link: `/edit_chapters?m=${friendlyToken}`,
+      text: 'Chapters',
+      icon: 'menu_book',
+    });
+  }
+
+  // Publish - always available
+  items.push({
+    itemType: 'link',
+    link: `/publish?m=${friendlyToken}`,
+    text: translateString('Publish'),
+    icon: 'publish',
+  });
+
+  // Replace - only if enabled
+  if (allowMediaReplacement) {
+    items.push({
+      itemType: 'link',
+      link: `/replace_media?m=${friendlyToken}`,
+      text: translateString('Replace'),
+      icon: 'swap_horiz',
+    });
+  }
+
+  return items;
+}
+
+function EditMediaButton(props) {
+  const [popupContentRef, PopupContent, PopupTrigger] = usePopup();
+
+  const menuItems = getEditMenuItems();
+
+  const popupPages = {
+    main: (
+      <div className="edit-options">
+        <PopupMain>
+          <NavigationMenuList items={menuItems} />
+        </PopupMain>
+      </div>
+    ),
+  };
+
  return (
-    <a href={link} rel="nofollow" title={translateString('Edit media')} className="edit-media-icon">
-      <i className="material-icons">edit</i>
-    </a>
+    <div className="edit-media-dropdown">
+      <PopupTrigger contentRef={popupContentRef}>
+        <button className="edit-media-icon" title={translateString('Edit media')}>
+          <i className="material-icons">edit</i>
+        </button>
+      </PopupTrigger>
+      <PopupContent contentRef={popupContentRef}>
+        <NavigationContentApp
+          initPage="main"
+          focusFirstItemOnPageChange={false}
+          pages={popupPages}
+        />
+      </PopupContent>
+    </div>
  );
 }

@@ -219,7 +305,7 @@ export default function ViewerInfoContent(props) {

          {userCan.editMedia ? (
            <div className="media-author-actions">
-              {userCan.editMedia ? <EditMediaButton link={MediaPageStore.get('media-data').edit_url} /> : null}
+              {userCan.editMedia ? <EditMediaButton /> : null}

              {userCan.deleteMedia ? (
                <PopupTrigger contentRef={popupContentRef}>
--- a/templates/cms/media_nav.html
+++ b/templates/cms/media_nav.html
@@ -43,6 +43,12 @@
                </li>
            {% endcomment %}
        {% endif %}
+        <li style="display: inline-block;">
+            <a href="{% url 'publish_media' %}?m={{media_object.friendly_token}}"
+               style="text-decoration: none; {% if active_tab == 'publish' %}font-weight: bold; color: #333; padding-bottom: 3px; border-bottom: 2px solid #333;{% else %}color: #666;{% endif %}">
+                {{ "Publish" | custom_translate:LANGUAGE_CODE}}
+            </a>
+        </li>
        {% if ALLOW_MEDIA_REPLACEMENT %}
            <li style="display: inline-block;">
                <a href="{% url 'replace_media' %}?m={{media_object.friendly_token}}"
@@ -51,11 +57,5 @@
                </a>
            </li>
        {% endif %}
-        <li style="display: inline-block;">
-            <a href="{% url 'publish_media' %}?m={{media_object.friendly_token}}"
-               style="text-decoration: none; {% if active_tab == 'publish' %}font-weight: bold; color: #333; padding-bottom: 3px; border-bottom: 2px solid #333;{% else %}color: #666;{% endif %}">
-                {{ "Publish" | custom_translate:LANGUAGE_CODE}}
-            </a>
-        </li>
    </ul>
 </div>
--- a/templates/config/installation/features.html
+++ b/templates/config/installation/features.html
@@ -25,6 +25,7 @@ MediaCMS.features = {
 			timestampTimebar: {% if TIMESTAMP_IN_TIMEBAR %}true{% else %}false{% endif %},
 			comment_mention: {% if CAN_MENTION_IN_COMMENTS %}true{% else %}false{% endif %},
 			save: true,
+			allowMediaReplacement: {% if ALLOW_MEDIA_REPLACEMENT %}true{% else %}false{% endif %},
 		},
 		shareOptions: [ 'embed', 'fb', 'tw', 'whatsapp', 'telegram', 'reddit', 'tumblr', 'vk', 'pinterest', 'mix', 'linkedin', 'email' ],
 	},