IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Bug 57753 - badge Revision is not visible clearly on dark theme

Browse Source
This commit is contained in:
Alexey Safronov 2022-06-24 10:44:53 +03:00
parent a5650bcf48
commit d445b9e05d
3 changed files with 35 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/asc-web-components/themes/dark.js
View File

@ -2517,7 +2517,7 @@ const Dark = {
badge: {
color: black,
stroke: "#474747",
stroke: "#858585",
fill: "#858585",
defaultFill: black,
badgeFill: "#F58D31",

3
products/ASC.Files/Client/public/images/versionrevision_active.react.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="56" height="18" viewBox="0 0 56 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 17.5C0.908082 17.5 0.823367 17.4757 0.750323 17.4334L0.499921 17.8662C0.348169 17.7784 0.221631 17.6518 0.133829 17.5001L0.566608 17.2497C0.524346 17.1766 0.5 17.0919 0.5 17V15.9333H0V14.8667H0.5V12.7333H0V11.6667H0.5V9.53333H0V8.46667H0.5V6.33333H0V5.26667H0.5V3.13333H0V2.06667H0.5V1C0.5 0.908082 0.524346 0.823367 0.566608 0.750323L0.133828 0.499921C0.221631 0.348169 0.348168 0.221631 0.49992 0.133829L0.750323 0.566608C0.823366 0.524346 0.908081 0.5 1 0.5H1.98156V0H2.96313V0.5H4.92625V0H5.90782V0.5H7.87094V0H8.85251V0.5H10.8156V0H11.7972V0.5H13.7603V0H14.7419V0.5H16.705V0H17.6866V0.5H19.6497V0H20.6313V0.5H22.5944V0H23.576V0.5H25.5391V0H26.5207V0.5H28.4838V0H29.4653V0.5H31.4285V0H32.41V0.5H34.3732V0H35.3547V0.5H37.3178V0H38.2994V0.5H40.2625V0H41.2441V0.5H43.2072V0H44.1888V0.5H46.1519V0H47.1335V0.5H49.0966V0H50.0782V0.5H52.0413V0H53.0229V0.5H54.0044C54.1157 0.5 54.2134 0.534414 54.2931 0.591202L54.5833 0.184012C54.7517 0.304053 54.88 0.474401 54.9487 0.66949L54.4771 0.83568C54.5097 0.927971 54.5157 1.03144 54.4849 1.13833L54.2467 1.96574L54.7272 2.10407L54.489 2.93148L54.0085 2.79315L53.5321 4.44797L54.0126 4.5863L53.7744 5.4137L53.2939 5.27538L52.8175 6.9302L53.298 7.06852L53.0598 7.89593L52.5793 7.75761L52.3411 8.58502C52.3151 8.67527 52.2977 8.76735 52.2891 8.86005L52.7869 8.9067C52.7811 8.96876 52.7811 9.03124 52.7869 9.0933L52.2891 9.13995C52.2977 9.23265 52.3151 9.32473 52.3411 9.41498L52.5793 10.2424L53.0598 10.1041L53.298 10.9315L52.8175 11.0698L53.2939 12.7246L53.7744 12.5863L54.0126 13.4137L53.5321 13.552L54.0085 15.2069L54.489 15.0685L54.7272 15.8959L54.2467 16.0343L54.4849 16.8617C54.5157 16.9686 54.5097 17.072 54.4771 17.1643L54.9487 17.3305C54.88 17.5256 54.7517 17.6959 54.5833 17.816L54.2931 17.4088C54.2134 17.4656 54.1157 17.5 54.0044 17.5H53.0229V18H52.0413V17.5H50.0782V18H49.0966V17.5H47.1335V18H46.1519V17.5H44.1888V18H43.2072V17.5H41.2441V18H40.2625V17.5H38.2994V18H37.3179V17.5H35.3547V18H34.3732V17.5H32.41V18H31.4285V17.5H29.4653V18H28.4838V17.5H26.5207V18H25.5391V17.5H23.576V18H22.5944V17.5H20.6313V18H19.6497V17.5H17.6866V18H16.705V17.5H14.7419V18H13.7603V17.5H11.7972V18H10.8156V17.5H8.85251V18H7.87094V17.5H5.90782V18H4.92626V17.5H2.96313V18H1.98156V17.5H1Z" stroke="#A3A9AE" stroke-linejoin="round" stroke-dasharray="2 1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

54
products/ASC.Files/Client/src/pages/VersionHistory/Section/Body/VersionBadge.js
View File

@ -1,6 +1,36 @@
import React from "react";
import styled, { css } from "styled-components";
import Text from "@appserver/components/text";
import Box from "@appserver/components/box";
import VersionSvg from "../../../../../public/images/versionrevision_active.react.svg";
const StyledVersionSvg = styled(VersionSvg)`
path {
fill: ${(props) =>
!props.isVersion
? props.theme.filesVersionHistory.badge.defaultFill
: props.index === 0
? props.theme.filesVersionHistory.badge.fill
: props.theme.filesVersionHistory.badge.badgeFill};
stroke: ${(props) =>
!props.isVersion
? props.theme.filesVersionHistory.badge.stroke
: props.index === 0
? props.theme.filesVersionHistory.badge.fill
: props.theme.filesVersionHistory.badge.badgeFill};
stroke-dasharray: ${(props) => (props.isVersion ? "2 0" : "3 1")};
stroke-linejoin: ${(props) => (props.isVersion ? "unset" : "round")};
${(props) =>
props.isVersion &&
css`
stroke-width: 2;
`}
}
`;
const VersionBadge = ({
className,
isVersion,
@ -11,29 +41,7 @@ const VersionBadge = ({
...rest
}) => (
<Box className={className} marginProp="0 8px" displayProp="flex" {...rest}>
<svg
width="55"
height="18"
viewBox="0 0 55 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
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
? theme.filesVersionHistory.badge.defaultFill
: index === 0
? theme.filesVersionHistory.badge.fill
: theme.filesVersionHistory.badge.badgeFill
}
/>
</svg>
<StyledVersionSvg isVersion={isVersion} theme={theme} index={index} />
<Text
className="version_badge-text"
color={theme.filesVersionHistory.badge.color}