diff --git a/wagtail_localize/static_src/common/components/ActionMenu/index.tsx b/wagtail_localize/static_src/common/components/ActionMenu/index.tsx index 2d6c6133f..f087fdb69 100644 --- a/wagtail_localize/static_src/common/components/ActionMenu/index.tsx +++ b/wagtail_localize/static_src/common/components/ActionMenu/index.tsx @@ -78,96 +78,137 @@ const ActionMenu: FunctionComponent = ({ actions, previewModes, }) => { - const wrappedActions = actions.map((action) =>
  • {action}
    • ); - return ( - ); }; diff --git a/wagtail_localize/static_src/common/components/LegacyActionMenu/index.tsx b/wagtail_localize/static_src/common/components/LegacyActionMenu/index.tsx new file mode 100644 index 000000000..938ec7f86 --- /dev/null +++ b/wagtail_localize/static_src/common/components/LegacyActionMenu/index.tsx @@ -0,0 +1,175 @@ +import React, { FunctionComponent } from 'react'; +import gettext from 'gettext'; + +import Icon from '../Icon'; + +interface ActionMenuButtonActionProps { + label: string; + onClick: () => void; + title?: string; + classes?: string[]; + icon?: string; +} + +export const ActionMenuButtonAction: FunctionComponent< + ActionMenuButtonActionProps +> = ({ label, onClick, title, classes, icon }) => { + let classNames = ['button']; + + if (classes) { + classNames = classNames.concat(classes); + } + + return ( + + ); +}; + +interface ActionMenuLinkActionProps { + label: string; + href: string; + title?: string; + classes?: string[]; + icon?: string; +} + +export const ActionMenuLinkAction: FunctionComponent< + ActionMenuLinkActionProps +> = ({ label, href, title, classes, icon }) => { + let classNames = ['button']; + + if (classes) { + classNames = classNames.concat(classes); + } + + return ( + + {icon && } {label} + + ); +}; + +export interface PreviewMode { + mode: string; + label: string; + url: string; +} + +interface ActionMenuProps { + defaultAction: React.ReactNode; + actions: React.ReactNode[]; + previewModes?: PreviewMode[]; +} + +const LeagcyActionMenu: FunctionComponent = ({ + defaultAction, + actions, + previewModes, +}) => { + const wrappedActions = actions.map((action) =>
  • {action}
    • ); + + return ( + + ); +}; + +export default LeagcyActionMenu; diff --git a/wagtail_localize/static_src/editor/components/TranslationEditor/footer.tsx b/wagtail_localize/static_src/editor/components/TranslationEditor/footer.tsx index f92e56da5..868226c4d 100644 --- a/wagtail_localize/static_src/editor/components/TranslationEditor/footer.tsx +++ b/wagtail_localize/static_src/editor/components/TranslationEditor/footer.tsx @@ -21,8 +21,12 @@ const EditorFooter: FunctionComponent = ({ + , + ]; + + if (links.convertToAliasUrl) { + actions.push( +
    + + + +
    + ); + } + + if (perms.canDelete) { + actions.push( + + + {gettext('Delete')} + + ); + } + + if (perms.canLock && !isLocked) { + actions.push( +
    + + + + +
    + ); + } + + if (perms.canUnlock && isLocked) { + actions.push( +
    + + + + +
    + ); + } + + if (perms.canUnpublish) { + actions.push( + + + {gettext('Unpublish')} + + ); + } + + if (perms.canPublish) { + actions.push( +
    + + + + +
    + ); + } + + // Make last action the default + const defaultAction = actions.pop(); + + return ( +
    +
      +
    • + +
      • +
    +
    + ); +}; + +export default EditorFooter; diff --git a/wagtail_localize/static_src/editor/main.css b/wagtail_localize/static_src/editor/main.css new file mode 100644 index 000000000..34adc3cff --- /dev/null +++ b/wagtail_localize/static_src/editor/main.css @@ -0,0 +1,42 @@ +.w-dropdown__content form .button { + width: 100%; +} + +.js-translation-editor + .footer + .actions--primary + .w-dropdown-button:first-child { + min-width: 210px; +} + +.js-translation-editor + .footer + .actions--primary + .w-dropdown-button + + .w-dropdown-button { + margin-top: 0.5em; +} + +@media screen and (min-width: 50em) { + .js-translation-editor .footer .actions--primary { + display: flex; + min-width: 310px; + width: auto; + } + + .js-translation-editor + .footer + .actions--primary + .w-dropdown-button:first-child { + min-width: 310px; + } + + .js-translation-editor + .footer + .actions--primary + .w-dropdown-button + + .w-dropdown-button { + margin-top: 0; + margin-left: 1em; + } +} diff --git a/wagtail_localize/templates/wagtail_localize/admin/edit_translation.html b/wagtail_localize/templates/wagtail_localize/admin/edit_translation.html index cbff4f82d..af82284b0 100644 --- a/wagtail_localize/templates/wagtail_localize/admin/edit_translation.html +++ b/wagtail_localize/templates/wagtail_localize/admin/edit_translation.html @@ -60,3 +60,9 @@ {% endblock %} + +{% block extra_css %} + {% if not has_legacy_action_menu %} + + {% endif %} +{% endblock %} diff --git a/wagtail_localize/views/edit_translation.py b/wagtail_localize/views/edit_translation.py index d2695edab..64d1ffed1 100644 --- a/wagtail_localize/views/edit_translation.py +++ b/wagtail_localize/views/edit_translation.py @@ -29,6 +29,7 @@ ) from rest_framework.permissions import IsAuthenticated from rest_framework.response import Response +from wagtail import VERSION as WAGTAIL_VERSION from wagtail import blocks from wagtail.admin import messages from wagtail.admin.panels import FieldPanel, InlinePanel, ObjectList, TabbedInterface @@ -897,6 +898,8 @@ def get_translation_progress(segment, locale): } for translated_instance in translations ] + + has_legacy_action_menu = WAGTAIL_VERSION < (6, 0) context = { "translation": translation, "instance": instance, @@ -1013,9 +1016,11 @@ def get_translation_progress(segment, locale): many=True, context={"translation_source": translation.source}, ).data, + "hasLegacyActionMenu": has_legacy_action_menu, }, cls=DjangoJSONEncoder, ), + "has_legacy_action_menu": has_legacy_action_menu, } side_panels = [] diff --git a/webpack.config.js b/webpack.config.js index df861f47d..6836e02ac 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -47,6 +47,18 @@ module.exports = { 'wagtail-localize-component-form.css' ), }, + { + from: path.resolve( + __dirname, + 'wagtail_localize/static_src/editor', + 'main.css' + ), + to: path.resolve( + __dirname, + 'wagtail_localize/static/wagtail_localize/css', + 'wagtail-localize-editor-form.css' + ), + }, ], }), ],