From bcc8a0858c7ce1d6a2ac228e4f6944bc2d49c86f Mon Sep 17 00:00:00 2001 From: Markos Gogoulos Date: Sat, 10 Jan 2026 15:58:16 +0200 Subject: [PATCH] droplist for actions --- .../js/components/media-page/MediaPage.scss | 72 ++++++++++++ .../media-page/ViewerInfoContent.js | 104 ++++++++++++++++-- templates/cms/media_nav.html | 12 +- templates/config/installation/features.html | 1 + 4 files changed, 174 insertions(+), 15 deletions(-) diff --git a/frontend/src/static/js/components/media-page/MediaPage.scss b/frontend/src/static/js/components/media-page/MediaPage.scss index 60160a89..397e1f92 100755 --- 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); diff --git a/frontend/src/static/js/components/media-page/ViewerInfoContent.js b/frontend/src/static/js/components/media-page/ViewerInfoContent.js index 66c397d7..6936b62e 100755 --- 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: ( +
+ + + +
+ ), + }; + return ( - - edit - +
+ + + + + + +
); } @@ -219,7 +305,7 @@ export default function ViewerInfoContent(props) { {userCan.editMedia ? (
- {userCan.editMedia ? : null} + {userCan.editMedia ? : null} {userCan.deleteMedia ? ( diff --git a/templates/cms/media_nav.html b/templates/cms/media_nav.html index 4f0a8e52..bdc8626e 100644 --- a/templates/cms/media_nav.html +++ b/templates/cms/media_nav.html @@ -43,6 +43,12 @@ {% endcomment %} {% endif %} +
  • + + {{ "Publish" | custom_translate:LANGUAGE_CODE}} + +
    • {% if ALLOW_MEDIA_REPLACEMENT %}
    • {% endif %} -
  • - - {{ "Publish" | custom_translate:LANGUAGE_CODE}} - -
    • diff --git a/templates/config/installation/features.html b/templates/config/installation/features.html index ea135ca5..56534a60 100644 --- 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' ], },