Web:Files:VersionHistory: add support dark-theme
This commit is contained in:
parent
8b72068bc9
commit
12e392f174
@ -2155,6 +2155,27 @@ const Base = {
|
||||
linkColor: "#116d9d",
|
||||
textColor: "#83888D",
|
||||
},
|
||||
|
||||
filesVersionHistory: {
|
||||
row: {
|
||||
color: "#A3A9AE",
|
||||
fill: "#333333",
|
||||
},
|
||||
|
||||
badge: {
|
||||
color: "#FFFFFF",
|
||||
stroke: "#A3A9AE",
|
||||
fill: "#A3A9AE",
|
||||
defaultFill: "#ffffff",
|
||||
badgeFill: "#ED7309",
|
||||
},
|
||||
|
||||
versionList: {
|
||||
fill: "#d0d5da",
|
||||
stroke: "#d0d5da",
|
||||
color: "#d0d5da",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default Base;
|
||||
|
||||
@ -2156,6 +2156,27 @@ const Dark = {
|
||||
linkColor: "#116d9d",
|
||||
textColor: "#83888D",
|
||||
},
|
||||
|
||||
filesVersionHistory: {
|
||||
row: {
|
||||
color: "#eeeeee",
|
||||
fill: "#eeeeee",
|
||||
},
|
||||
|
||||
badge: {
|
||||
color: "#333333",
|
||||
stroke: "#474747",
|
||||
fill: "#858585",
|
||||
defaultFill: "#333333",
|
||||
badgeFill: "#F58D31",
|
||||
},
|
||||
|
||||
versionList: {
|
||||
fill: "#eeeeee",
|
||||
stroke: "#eeeeee",
|
||||
color: "#eeeeee",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default Dark;
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import styled from "styled-components";
|
||||
import Row from "@appserver/components/row";
|
||||
import { tablet } from "@appserver/components/utils/device";
|
||||
import styled from 'styled-components';
|
||||
import Row from '@appserver/components/row';
|
||||
import { tablet } from '@appserver/components/utils/device';
|
||||
import { Base } from '@appserver/components/themes';
|
||||
|
||||
const StyledBody = styled.div`
|
||||
height: 100%;
|
||||
@ -30,7 +31,7 @@ const StyledVersionList = styled.div`
|
||||
${(props) =>
|
||||
props.isRestoreProcess &&
|
||||
`
|
||||
fill: #d0d5da;
|
||||
fill: ${(props) => props.theme.filesVersionHistory.versionList.fill};
|
||||
`};
|
||||
}
|
||||
}
|
||||
@ -49,7 +50,7 @@ const StyledVersionList = styled.div`
|
||||
${(props) =>
|
||||
props.isRestoreProcess &&
|
||||
`
|
||||
color: #d0d5da;
|
||||
color:${(props) => props.theme.filesVersionHistory.versionList.color};
|
||||
touch-action: none;
|
||||
pointer-events: none;
|
||||
`}
|
||||
@ -70,7 +71,7 @@ const StyledVersionList = styled.div`
|
||||
${(props) =>
|
||||
props.isRestoreProcess &&
|
||||
`
|
||||
fill: #d0d5da;
|
||||
fill: ${(props) => props.theme.filesVersionHistory.versionList.fill};
|
||||
`};
|
||||
}
|
||||
}
|
||||
@ -83,7 +84,7 @@ const StyledVersionList = styled.div`
|
||||
${(props) =>
|
||||
props.isRestoreProcess &&
|
||||
`
|
||||
stroke: #d0d5da;
|
||||
stroke: ${(props) => props.theme.filesVersionHistory.versionList.stroke};
|
||||
`};
|
||||
}
|
||||
}
|
||||
@ -99,13 +100,17 @@ const StyledVersionList = styled.div`
|
||||
`}
|
||||
svg {
|
||||
path {
|
||||
${(props) => props.isRestoreProcess && " fill: #d0d5da"}
|
||||
${(props) =>
|
||||
props.isRestoreProcess &&
|
||||
`fill: ${(props) => props.theme.filesVersionHistory.versionList.fill}`}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
StyledVersionList.defaultProps = { theme: Base };
|
||||
|
||||
const StyledVersionRow = styled(Row)`
|
||||
@media ${tablet} {
|
||||
box-sizing: border-box;
|
||||
@ -117,12 +122,12 @@ const StyledVersionRow = styled(Row)`
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
|
||||
${(props) => props.isTabletView && "height: auto"};
|
||||
${(props) => !props.isTabletView && "padding-right:16px"};
|
||||
${(props) => props.isTabletView && 'height: auto'};
|
||||
${(props) => !props.isTabletView && 'padding-right:16px'};
|
||||
}
|
||||
|
||||
.version_badge {
|
||||
cursor: ${(props) => (props.canEdit ? "pointer" : "default")};
|
||||
cursor: ${(props) => (props.canEdit ? 'pointer' : 'default')};
|
||||
margin-right: 16px;
|
||||
margin-left: 0px;
|
||||
|
||||
@ -183,8 +188,7 @@ const StyledVersionRow = styled(Row)`
|
||||
}
|
||||
|
||||
.version_link {
|
||||
display: ${(props) =>
|
||||
props.showEditPanel ? "none" : props.canEdit ? "block" : "none"};
|
||||
display: ${(props) => (props.showEditPanel ? 'none' : props.canEdit ? 'block' : 'none')};
|
||||
text-decoration: underline dashed;
|
||||
white-space: break-spaces;
|
||||
margin-left: -7px;
|
||||
@ -197,7 +201,7 @@ const StyledVersionRow = styled(Row)`
|
||||
}
|
||||
|
||||
.version_text {
|
||||
display: ${(props) => (props.canEdit ? "none" : "block")};
|
||||
display: ${(props) => (props.canEdit ? 'none' : 'block')};
|
||||
margin-left: -7px;
|
||||
margin-top: 5px;
|
||||
|
||||
@ -252,7 +256,7 @@ const StyledVersionRow = styled(Row)`
|
||||
${(props) =>
|
||||
props.isSavingComment &&
|
||||
`
|
||||
fill: #d0d5da;
|
||||
fill: ${(props) => props.theme.filesVersionHistory.versionList.fill};
|
||||
`};
|
||||
}
|
||||
}
|
||||
@ -273,7 +277,7 @@ const StyledVersionRow = styled(Row)`
|
||||
${(props) =>
|
||||
props.isSavingComment &&
|
||||
`
|
||||
color: #d0d5da;
|
||||
color: ${(props) => props.theme.filesVersionHistory.versionList.color};
|
||||
touch-action: none;
|
||||
pointer-events: none;
|
||||
`}
|
||||
@ -303,4 +307,6 @@ const StyledVersionRow = styled(Row)`
|
||||
}
|
||||
`;
|
||||
|
||||
StyledVersionRow.defaultProps = { theme: Base };
|
||||
|
||||
export { StyledBody, StyledVersionRow, StyledVersionList };
|
||||
|
||||
@ -1,14 +1,7 @@
|
||||
import React from "react";
|
||||
import Text from "@appserver/components/text";
|
||||
import Box from "@appserver/components/box";
|
||||
const VersionBadge = ({
|
||||
className,
|
||||
isVersion,
|
||||
versionGroup,
|
||||
index,
|
||||
t,
|
||||
...rest
|
||||
}) => (
|
||||
import React from 'react';
|
||||
import Text from '@appserver/components/text';
|
||||
import Box from '@appserver/components/box';
|
||||
const VersionBadge = ({ className, isVersion, versionGroup, index, t, theme, ...rest }) => (
|
||||
<Box className={className} marginProp="0 8px" displayProp="flex" {...rest}>
|
||||
<svg
|
||||
width="55"
|
||||
@ -16,19 +9,28 @@ const VersionBadge = ({
|
||||
viewBox="0 0 55 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
stroke={isVersion ? "none" : "#A3A9AE"}
|
||||
strokeDasharray={isVersion ? "none" : "2px"}
|
||||
strokeWidth={isVersion ? "none" : "2px"}
|
||||
>
|
||||
stroke={isVersion ? 'none' : theme.filesVersionHistory.badge.stroke}
|
||||
strokeDasharray={isVersion ? 'none' : '2px'}
|
||||
strokeWidth={isVersion ? 'none' : '2px'}>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M0 1C0 0.447716 0.447715 0 1 0L53.9994 0C54.6787 0 55.1603 0.662806 54.9505 1.3089L52.5529 8.6911C52.4877 8.89187 52.4877 9.10813 52.5529 9.3089L54.9505 16.6911C55.1603 17.3372 54.6787 18 53.9994 18H0.999999C0.447714 18 0 17.5523 0 17V1Z"
|
||||
fill={!isVersion ? "#FFF" : index === 0 ? "#A3A9AE" : "#ED7309"}
|
||||
fill={
|
||||
!isVersion
|
||||
? theme.filesVersionHistory.badge.defaultFill
|
||||
: index === 0
|
||||
? theme.filesVersionHistory.badge.fill
|
||||
: theme.filesVersionHistory.badge.badgeFill
|
||||
}
|
||||
/>
|
||||
</svg>
|
||||
<Text className="version_badge-text" color="#FFF" isBold fontSize="12px">
|
||||
{isVersion && t("Version", { version: versionGroup })}
|
||||
<Text
|
||||
className="version_badge-text"
|
||||
color={theme.filesVersionHistory.badge.color}
|
||||
isBold
|
||||
fontSize="12px">
|
||||
{isVersion && t('Version', { version: versionGroup })}
|
||||
</Text>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@ -1,26 +1,29 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import styled from "styled-components";
|
||||
import Link from "@appserver/components/link";
|
||||
import Text from "@appserver/components/text";
|
||||
import Box from "@appserver/components/box";
|
||||
import Textarea from "@appserver/components/textarea";
|
||||
import Button from "@appserver/components/button";
|
||||
import ModalDialog from "@appserver/components/modal-dialog";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import { withRouter } from "react-router";
|
||||
import VersionBadge from "./VersionBadge";
|
||||
import { StyledVersionRow } from "./StyledVersionHistory";
|
||||
import ExternalLinkIcon from "../../../../../public/images/external.link.react.svg";
|
||||
import commonIconsStyles from "@appserver/components/utils/common-icons-style";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import toastr from "studio/toastr";
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import Link from '@appserver/components/link';
|
||||
import Text from '@appserver/components/text';
|
||||
import Box from '@appserver/components/box';
|
||||
import Textarea from '@appserver/components/textarea';
|
||||
import Button from '@appserver/components/button';
|
||||
import ModalDialog from '@appserver/components/modal-dialog';
|
||||
import { withTranslation } from 'react-i18next';
|
||||
import { withRouter } from 'react-router';
|
||||
import VersionBadge from './VersionBadge';
|
||||
import { StyledVersionRow } from './StyledVersionHistory';
|
||||
import ExternalLinkIcon from '../../../../../public/images/external.link.react.svg';
|
||||
import commonIconsStyles from '@appserver/components/utils/common-icons-style';
|
||||
import { inject, observer } from 'mobx-react';
|
||||
import toastr from 'studio/toastr';
|
||||
import { Base } from '@appserver/components/themes';
|
||||
|
||||
const StyledExternalLinkIcon = styled(ExternalLinkIcon)`
|
||||
${commonIconsStyles}
|
||||
path {
|
||||
fill: "#333333";
|
||||
fill: ${(props) => props.theme.filesVersionHistory.fill};
|
||||
}
|
||||
`;
|
||||
|
||||
StyledExternalLinkIcon.defaultProps = { theme: Base };
|
||||
const VersionRow = (props) => {
|
||||
const {
|
||||
info,
|
||||
@ -35,6 +38,7 @@ const VersionRow = (props) => {
|
||||
isTabletView,
|
||||
onUpdateHeight,
|
||||
versionsListLength,
|
||||
theme,
|
||||
} = props;
|
||||
const [showEditPanel, setShowEditPanel] = useState(false);
|
||||
const [commentValue, setCommentValue] = useState(info.comment);
|
||||
@ -42,14 +46,11 @@ const VersionRow = (props) => {
|
||||
|
||||
const canEdit = info.access === 1 || info.access === 0;
|
||||
|
||||
const title = `${new Date(info.updated).toLocaleString(culture)} ${
|
||||
info.updatedBy.displayName
|
||||
}`;
|
||||
const title = `${new Date(info.updated).toLocaleString(culture)} ${info.updatedBy.displayName}`;
|
||||
|
||||
const linkStyles = { isHovered: true, type: "action" };
|
||||
const linkStyles = { isHovered: true, type: 'action' };
|
||||
|
||||
const onDownloadAction = () =>
|
||||
window.open(`${info.viewUrl}&version=${info.version}`, "_self");
|
||||
const onDownloadAction = () => window.open(`${info.viewUrl}&version=${info.version}`, '_self');
|
||||
const onEditComment = () => setShowEditPanel(!showEditPanel);
|
||||
|
||||
const onChange = (e) => setCommentValue(e.target.value);
|
||||
@ -80,21 +81,19 @@ const VersionRow = (props) => {
|
||||
};
|
||||
|
||||
const onVersionClick = () => {
|
||||
markAsVersion(info.id, isVersion, info.version).catch((err) =>
|
||||
toastr.error(err)
|
||||
);
|
||||
markAsVersion(info.id, isVersion, info.version).catch((err) => toastr.error(err));
|
||||
};
|
||||
|
||||
const contextOptions = [
|
||||
canEdit && { key: "edit", label: t("EditComment"), onClick: onEditComment },
|
||||
canEdit && { key: 'edit', label: t('EditComment'), onClick: onEditComment },
|
||||
canEdit && {
|
||||
key: "restore",
|
||||
label: t("Translations:Restore"),
|
||||
key: 'restore',
|
||||
label: t('Translations:Restore'),
|
||||
onClick: onRestoreClick,
|
||||
},
|
||||
{
|
||||
key: "download",
|
||||
label: `${t("Common:Download")} (${info.contentLength})`,
|
||||
key: 'download',
|
||||
label: `${t('Common:Download')} (${info.contentLength})`,
|
||||
onClick: onDownloadAction,
|
||||
},
|
||||
];
|
||||
@ -102,9 +101,7 @@ const VersionRow = (props) => {
|
||||
const onClickProp = canEdit ? { onClick: onVersionClick } : {};
|
||||
|
||||
useEffect(() => {
|
||||
const newRowHeight = document.getElementsByClassName(
|
||||
`version-row_${index}`
|
||||
)[0]?.clientHeight;
|
||||
const newRowHeight = document.getElementsByClassName(`version-row_${index}`)[0]?.clientHeight;
|
||||
|
||||
newRowHeight && onUpdateHeight(index, newRowHeight);
|
||||
}, [showEditPanel, versionsListLength]);
|
||||
@ -115,14 +112,12 @@ const VersionRow = (props) => {
|
||||
contextOptions={contextOptions}
|
||||
canEdit={canEdit}
|
||||
isTabletView={isTabletView}
|
||||
isSavingComment={isSavingComment}
|
||||
>
|
||||
isSavingComment={isSavingComment}>
|
||||
<div className={`version-row_${index}`}>
|
||||
<Box displayProp="flex">
|
||||
<VersionBadge
|
||||
className={`version_badge ${
|
||||
isVersion ? "versioned" : "not-versioned"
|
||||
}`}
|
||||
theme={theme}
|
||||
className={`version_badge ${isVersion ? 'versioned' : 'not-versioned'}`}
|
||||
isVersion={isVersion}
|
||||
index={index}
|
||||
versionGroup={info.versionGroup}
|
||||
@ -135,8 +130,7 @@ const VersionRow = (props) => {
|
||||
fontSize="14px"
|
||||
title={title}
|
||||
isTextOverflow={true}
|
||||
className="version-link-file"
|
||||
>
|
||||
className="version-link-file">
|
||||
{title}
|
||||
</Link>
|
||||
<Link className="icon-link" onClick={onOpenFile}>
|
||||
@ -145,17 +139,12 @@ const VersionRow = (props) => {
|
||||
<Text
|
||||
className="version_content-length"
|
||||
fontWeight={600}
|
||||
color="#A3A9AE"
|
||||
fontSize="14px"
|
||||
>
|
||||
color={theme.filesVersionHistory.color}
|
||||
fontSize="14px">
|
||||
{info.contentLength}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box
|
||||
className="version-comment-wrapper"
|
||||
marginProp="0 0 0 70px"
|
||||
displayProp="flex"
|
||||
>
|
||||
<Box className="version-comment-wrapper" marginProp="0 0 0 70px" displayProp="flex">
|
||||
<>
|
||||
{showEditPanel && (
|
||||
<>
|
||||
@ -168,18 +157,14 @@ const VersionRow = (props) => {
|
||||
isDisabled={isSavingComment}
|
||||
/>
|
||||
<Box className="version_modal-dialog">
|
||||
<ModalDialog
|
||||
displayType="aside"
|
||||
visible={showEditPanel}
|
||||
onClose={onEditComment}
|
||||
>
|
||||
<ModalDialog displayType="aside" visible={showEditPanel} onClose={onEditComment}>
|
||||
<ModalDialog.Header className="header-version-modal-dialog">
|
||||
{t("EditComment")}
|
||||
{t('EditComment')}
|
||||
</ModalDialog.Header>
|
||||
<ModalDialog.Body>
|
||||
<Textarea
|
||||
className="text-area-mobile-edit-comment"
|
||||
style={{ margin: "8px 24px 8px 0" }}
|
||||
style={{ margin: '8px 24px 8px 0' }}
|
||||
//placeholder="Add comment"
|
||||
onChange={onChange}
|
||||
heightTextArea={298}
|
||||
@ -191,7 +176,7 @@ const VersionRow = (props) => {
|
||||
<Button
|
||||
isDisabled={isSavingComment}
|
||||
className="version_save-button"
|
||||
label={t("Common:SaveButton")}
|
||||
label={t('Common:SaveButton')}
|
||||
size="big"
|
||||
primary
|
||||
onClick={onSaveClick}
|
||||
@ -202,12 +187,7 @@ const VersionRow = (props) => {
|
||||
</>
|
||||
)}
|
||||
|
||||
<Link
|
||||
type="action"
|
||||
isHovered
|
||||
onClick={onEditComment}
|
||||
className="version_link"
|
||||
>
|
||||
<Link type="action" isHovered onClick={onEditComment} className="version_link">
|
||||
{info.comment}
|
||||
</Link>
|
||||
<Text className="version_text">{info.comment}</Text>
|
||||
@ -215,48 +195,34 @@ const VersionRow = (props) => {
|
||||
|
||||
<div className="version_links-container">
|
||||
{canEdit && (
|
||||
<Link
|
||||
onClick={onRestoreClick}
|
||||
{...linkStyles}
|
||||
className="version_link-action"
|
||||
>
|
||||
{t("Translations:Restore")}
|
||||
<Link onClick={onRestoreClick} {...linkStyles} className="version_link-action">
|
||||
{t('Translations:Restore')}
|
||||
</Link>
|
||||
)}
|
||||
<Link
|
||||
onClick={onDownloadAction}
|
||||
{...linkStyles}
|
||||
className="version_link-action"
|
||||
>
|
||||
{t("Common:Download")}
|
||||
<Link onClick={onDownloadAction} {...linkStyles} className="version_link-action">
|
||||
{t('Common:Download')}
|
||||
</Link>
|
||||
</div>
|
||||
</Box>
|
||||
{showEditPanel && (
|
||||
<Box className="version_edit-comment" marginProp="8px 0 2px 70px">
|
||||
<Box
|
||||
className="version_edit-comment-button-primary"
|
||||
displayProp="inline-block"
|
||||
>
|
||||
<Box className="version_edit-comment-button-primary" displayProp="inline-block">
|
||||
<Button
|
||||
isDisabled={isSavingComment}
|
||||
size="base"
|
||||
scale={true}
|
||||
primary
|
||||
onClick={onSaveClick}
|
||||
label={t("Common:SaveButton")}
|
||||
label={t('Common:SaveButton')}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
className="version_edit-comment-button-second"
|
||||
displayProp="inline-block"
|
||||
>
|
||||
<Box className="version_edit-comment-button-second" displayProp="inline-block">
|
||||
<Button
|
||||
isDisabled={isSavingComment}
|
||||
size="base"
|
||||
scale={true}
|
||||
onClick={onCancelClick}
|
||||
label={t("Common:CancelButton")}
|
||||
label={t('Common:CancelButton')}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
@ -269,25 +235,16 @@ const VersionRow = (props) => {
|
||||
export default inject(({ auth, versionHistoryStore }) => {
|
||||
const { user } = auth.userStore;
|
||||
const { culture, isTabletView } = auth.settingsStore;
|
||||
const language = (user && user.cultureName) || culture || "en-US";
|
||||
const language = (user && user.cultureName) || culture || 'en-US';
|
||||
|
||||
const {
|
||||
markAsVersion,
|
||||
restoreVersion,
|
||||
updateCommentVersion,
|
||||
} = versionHistoryStore;
|
||||
const { markAsVersion, restoreVersion, updateCommentVersion } = versionHistoryStore;
|
||||
|
||||
return {
|
||||
theme: auth.settingsStore.theme,
|
||||
culture: language,
|
||||
isTabletView,
|
||||
markAsVersion,
|
||||
restoreVersion,
|
||||
updateCommentVersion,
|
||||
};
|
||||
})(
|
||||
withRouter(
|
||||
withTranslation(["VersionHistory", "Common", "Translations"])(
|
||||
observer(VersionRow)
|
||||
)
|
||||
)
|
||||
);
|
||||
})(withRouter(withTranslation(['VersionHistory', 'Common', 'Translations'])(observer(VersionRow))));
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import React from "react";
|
||||
import styled, { css } from "styled-components";
|
||||
import { withRouter } from "react-router";
|
||||
import Headline from "@appserver/common/components/Headline";
|
||||
import IconButton from "@appserver/components/icon-button";
|
||||
import { desktop } from "@appserver/components/utils/device";
|
||||
import React from 'react';
|
||||
import styled, { css } from 'styled-components';
|
||||
import { withRouter } from 'react-router';
|
||||
import Headline from '@appserver/common/components/Headline';
|
||||
import IconButton from '@appserver/components/icon-button';
|
||||
import { desktop } from '@appserver/components/utils/device';
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
display: grid;
|
||||
@ -36,8 +36,8 @@ const SectionHeaderContent = (props) => {
|
||||
<IconButton
|
||||
iconName="/static/images/arrow.path.react.svg"
|
||||
size="17"
|
||||
color="#A3A9AE"
|
||||
hoverColor="#657077"
|
||||
// color="#A3A9AE"
|
||||
// hoverColor="#657077"
|
||||
isFill={true}
|
||||
onClick={onClickBack}
|
||||
className="arrow-button"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user