Web: Common: fixed image viewer mobile toolbar

This commit is contained in:
Dmitry Sychugov 2022-11-02 20:04:59 +05:00
parent e69075d11b
commit 2a5f4fc2bf
2 changed files with 34 additions and 16 deletions

View File

@ -494,24 +494,19 @@ class MediaViewer extends React.Component {
const ext = this.getFileExtension(title);
const onFavorite = (e) => onClickFavorite(e, currentFileId, t);
const getContextModel = () => {
return [
{
key: isFavorite ? "remove-from-favorites" : "mark-as-favorite",
label: isFavorite ? t("RemoveFromFavorites") : t("MarkAsFavorite"),
icon: "images/favorites.react.svg",
onClick: (e) => onClickFavorite(e, currentFileId, t),
onClick: (e) => onFavorite(e),
disabled: false,
"data-action": isFavorite ? "remove" : "mark",
action: isFavorite ? "remove" : "mark",
},
{
key: "show-info",
label: t("InfoPanel:ViewDetails"),
icon: "/static/images/info.outline.react.svg",
onClick: () => onShowInfoPanel(currentFile),
disabled: false,
},
{
key: "download",
label: t("Common:Download"),
@ -530,7 +525,7 @@ class MediaViewer extends React.Component {
key: "rename",
label: t("Rename"),
icon: "images/rename.react.svg",
onClick: () => onClickRename(currentFile),
onClick: () => onClickRename(targetFile),
disabled: false,
},
{
@ -579,6 +574,7 @@ class MediaViewer extends React.Component {
contextModel={getContextModel}
onPrevClick={this.prevMedia}
onDeleteClick={this.onDelete}
onFavorite={onFavorite}
isImage={isImage}
onDownloadClick={this.onDownload}
// isFavoritesFolder={isFavoritesFolder}

View File

@ -10,6 +10,8 @@ import MediaResetIcon from "../../../../../public/images/media.reset.react.svg";
import MediaDeleteIcon from "../../../../../public/images/media.delete.react.svg";
import MediaDownloadIcon from "../../../../../public/images/download.react.svg";
import commonIconsStyles from "@docspace/components/utils/common-icons-style";
import MediaFavoriteIcon from "../../../../../public/images/favorite.react.svg";
import ViewerSeparator from "../../../../../public/images/viewer.separator.react.svg";
import MediaShare from "../../../../../public/images/share.react.svg";
import MediaContextMenu from "../../../../../public/images/vertical-dots.react.svg";
@ -32,12 +34,12 @@ const StyledMediaRotateLeftIcon = styled(MediaRotateLeftIcon)`
const StyledMediaRotateRightIcon = styled(MediaRotateRightIcon)`
${commonIconsStyles}
`;
// const StyledMediaResetIcon = styled(MediaResetIcon)`
// ${commonIconsStyles}
// `;
// const StyledMediaDeleteIcon = styled(MediaDeleteIcon)`
// ${commonIconsStyles}
// `;
const StyledMediaFavoriteIcon = styled(MediaFavoriteIcon)`
${commonIconsStyles}
`;
const StyledMediaDeleteIcon = styled(MediaDeleteIcon)`
${commonIconsStyles}
`;
// const StyledMediaDownloadIcon = styled(MediaDownloadIcon)`
// ${commonIconsStyles}
// `;
@ -183,6 +185,7 @@ class ImageViewer extends React.Component {
playlistPos,
isImage,
contextModel,
onFavorite,
} = this.props;
const generateContextMenu = (isOpen) => {
@ -304,7 +307,24 @@ class ImageViewer extends React.Component {
{
key: "context-menu",
actionType: -1,
onClick: this.onMenuHandlerClick,
},
{
key: "delete",
actionType: 103,
render: (
<div className="iconContainer rotateLeft">
<StyledMediaDeleteIcon size="scale" />
</div>
),
},
{
key: "favorite",
actionType: 104,
render: (
<div className="iconContainer rotateLeft">
<StyledMediaFavoriteIcon size="scale" />
</div>
),
},
];
@ -322,6 +342,8 @@ class ImageViewer extends React.Component {
case "customDownload":
button.onClick = this.props.onDownloadClick;
break;
case "favorite":
button.onClick = onFavorite;
default:
break;
}