Skip to content

Commit

Permalink
Fix action menu styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@zerolab
zerolab committed Feb 10, 2024
1 parent 1dca2ac commit d128ceb
Show file tree
Hide file tree
Showing 9 changed files with 572 additions and 107 deletions.
205 changes: 123 additions & 82 deletions wagtail_localize/static_src/common/components/ActionMenu/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,96 +78,137 @@ const ActionMenu: FunctionComponent<ActionMenuProps> = ({
actions,
previewModes,
}) => {
const wrappedActions = actions.map((action) => <li>{action}</li>);

return (
<nav aria-label="Actions">
<ul>
<li className="actions actions--primary">
<div className="dropdown dropup dropdown-button match-width ">
{defaultAction}

<div className="dropdown-toggle">
<svg
className="icon icon-arrow-up icon"
aria-hidden="true"
focusable="false"
>
<use href="#icon-arrow-up"></use>
</svg>
</div>
<ul>{wrappedActions}</ul>
<nav
className="actions actions--primary footer__container"
aria-label={gettext('Actions')}
>
<div className="w-dropdown-button">
<button
type="submit"
className="button action-save button-longrunning "
data-controller="w-progress"
data-action="w-progress#activate"
data-w-progress-active-value="Saving…"
>
<svg
className="icon icon-draft button-longrunning__icon"
aria-hidden="true"
>
<use href="#icon-draft"></use>
</svg>
<svg className="icon icon-spinner icon" aria-hidden="true">
<use href="#icon-spinner"></use>
</svg>
<em data-w-progress-target="label">{defaultAction}</em>
</button>

<div
data-controller="w-dropdown"
className="w-dropdown w-dropdown--dropdown-button"
data-w-dropdown-theme-value="dropdown-button"
data-w-dropdown-offset-value="[0, 0]"
>
<button
type="button"
className="w-dropdown__toggle button"
data-w-dropdown-target="toggle"
>
<span className="w-sr-only">More actions</span>
<svg
className="icon icon-arrow-up w-dropdown__toggle-icon"
aria-hidden="true"
>
<use href="#icon-arrow-up"></use>
</svg>
</button>

<div
data-w-dropdown-target="content"
className="w-dropdown__content"
hidden
>
{actions}
</div>
</li>

{/* Single-mode preview */}
{previewModes && previewModes.length == 1 && (
<li className="preview dropdown">
<a
className="button button--icon"
href={previewModes[0].url}
target="_blank"
</div>
</div>

{/* Single-mode preview */}
{previewModes && previewModes.length == 1 && (
<div className="w-dropdown-button">
<a
className="button button--icon"
href={previewModes[0].url}
target="_blank"
>
<svg
className="icon icon-view"
aria-hidden="true"
focusable="false"
>
<use href="#icon-view"></use>
</svg>
{gettext('Preview')}
</a>
</div>
)}
{/* Multi-mode preview */}
{previewModes && previewModes.length > 1 && (
<div className="w-dropdown-button">
<a
className="button button--icon"
href={previewModes[0].url}
target="_blank"
>
<svg
className="icon icon-view"
aria-hidden="true"
focusable="false"
>
<use href="#icon-view"></use>
</svg>
{gettext('Preview')}
</a>
<div
data-controller="w-dropdown"
className="w-dropdown w-dropdown--dropdown-button"
data-w-dropdown-theme-value="dropdown-button"
data-w-dropdown-offset-value="[0, 0]"
>
<button
type="button"
className="w-dropdown__toggle button"
data-w-dropdown-target="toggle"
>
<span className="w-sr-only">More actions</span>
<svg
className="icon icon-view icon"
className="icon icon-arrow-up w-dropdown__toggle-icon"
aria-hidden="true"
focusable="false"
>
<use href="#icon-view"></use>
<use href="#icon-arrow-up"></use>
</svg>
{gettext('Preview')}
</a>
</li>
)}

{/* Multi-mode preview */}
{previewModes && previewModes.length > 1 && (
<li className="preview">
<div className="dropdown dropup dropdown-button match-width">
<a
className="button button--icon"
href={previewModes[0].url}
target="_blank"
>
<svg
className="icon icon-view icon"
aria-hidden="true"
focusable="false"
>
<use href="#icon-view"></use>
</svg>
{gettext('Preview')}
</a>

<div className="dropdown-toggle">
<svg
className="icon icon-arrow-up icon"
aria-hidden="true"
focusable="false"
>
<use href="#icon-arrow-up"></use>
</svg>
</div>

<ul>
{previewModes.map(({ label, url }) => {
return (
<li>
<a
className="button"
href={url}
target="_blank"
>
{label}
</a>
</li>
);
})}
</ul>
</button>

<div
data-w-dropdown-target="content"
className="w-dropdown__content"
hidden
>
{previewModes.map(({ label, url }) => {
return (
<a
className="button"
href={url}
target="_blank"
>
{label}
</a>
);
})}
</div>
</li>
)}
</ul>
</div>
</div>
)}
</nav>
);
};
Expand Down
175 changes: 175 additions & 0 deletions wagtail_localize/static_src/common/components/LegacyActionMenu/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<button
className={classNames.join(' ')}
title={title}
onClick={onClick}
>
{icon && <Icon name={icon} />} {label}
</button>
);
};

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 (
<a
href={href}
target="_blank"
rel="noopener noreferrer"
className={classNames.join(' ')}
title={title}
>
{icon && <Icon name={icon} />} {label}
</a>
);
};

export interface PreviewMode {
mode: string;
label: string;
url: string;
}

interface ActionMenuProps {
defaultAction: React.ReactNode;
actions: React.ReactNode[];
previewModes?: PreviewMode[];
}

const LeagcyActionMenu: FunctionComponent<ActionMenuProps> = ({
defaultAction,
actions,
previewModes,
}) => {
const wrappedActions = actions.map((action) => <li>{action}</li>);

return (
<nav aria-label="Actions">
<ul>
<li className="actions actions--primary">
<div className="dropdown dropup dropdown-button match-width ">
{defaultAction}

<div className="dropdown-toggle">
<svg
className="icon icon-arrow-up icon"
aria-hidden="true"
focusable="false"
>
<use href="#icon-arrow-up"></use>
</svg>
</div>
<ul>{wrappedActions}</ul>
</div>
</li>

{/* Single-mode preview */}
{previewModes && previewModes.length == 1 && (
<li className="preview dropdown">
<a
className="button button--icon"
href={previewModes[0].url}
target="_blank"
>
<svg
className="icon icon-view icon"
aria-hidden="true"
focusable="false"
>
<use href="#icon-view"></use>
</svg>
{gettext('Preview')}
</a>
</li>
)}

{/* Multi-mode preview */}
{previewModes && previewModes.length > 1 && (
<li className="preview">
<div className="dropdown dropup dropdown-button match-width">
<a
className="button button--icon"
href={previewModes[0].url}
target="_blank"
>
<svg
className="icon icon-view icon"
aria-hidden="true"
focusable="false"
>
<use href="#icon-view"></use>
</svg>
{gettext('Preview')}
</a>

<div className="dropdown-toggle">
<svg
className="icon icon-arrow-up icon"
aria-hidden="true"
focusable="false"
>
<use href="#icon-arrow-up"></use>
</svg>
</div>

<ul>
{previewModes.map(({ label, url }) => {
return (
<li>
<a
className="button"
href={url}
target="_blank"
>
{label}
</a>
</li>
);
})}
</ul>
</div>
</li>
)}
</ul>
</nav>
);
};

export default LeagcyActionMenu;
Loading

0 comments on commit d128ceb

Please sign in to comment.