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

Merge branch 'feature/workspaces' of github.com:ONLYOFFICE/AppServer into feature/workspaces

Browse Source
This commit is contained in:
Artem Tarasov 2021-02-16 13:31:41 +03:00
commit acd417fc9b
22 changed files with 1639 additions and 599 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/asc-web-components/src/components/ThemeProvider/index.js
View File

@ -1 +0,0 @@
export default from "./ThemeProvider";

74
packages/asc-web-components/src/components/field-container/index.js
View File

@ -1,80 +1,10 @@
import React from "react";
import PropTypes from "prop-types";
import styled, { css } from "styled-components";
import { tablet } from "../../utils/device";
import Label from "../label";
import HelpButton from "../help-button";
import Text from "../text";
function getHorizontalCss(labelWidth) {
return css`
display: flex;
flex-direction: row;
align-items: start;
margin: 0 0 16px 0;
.field-label {
line-height: 32px;
margin: 0;
position: relative;
}
.field-label-icon {
display: inline-flex;
min-width: ${labelWidth};
width: ${labelWidth};
}
.field-body {
flex-grow: 1;
}
.icon-button {
position: relative;
margin-top: 10px;
margin-left: 8px;
}
`;
}
function getVerticalCss() {
return css`
display: flex;
flex-direction: column;
align-items: start;
margin: 0 0 16px 0;
.field-label {
line-height: 13px;
height: 15px;
display: inline-block;
}
.field-label-icon {
display: inline-flex;
width: 100%;
margin: 0 0 8px 0;
}
.field-body {
width: 100%;
}
.icon-button {
position: relative;
margin: 0;
padding: 0px 8px;
width: 13px;
height: 13px;
}
`;
}
const Container = styled.div`
.error-label {
max-width: ${(props) => (props.maxwidth ? props.maxwidth : "293px")};
}
${(props) =>
props.vertical ? getVerticalCss() : getHorizontalCss(props.maxLabelWidth)}
@media ${tablet} {
${getVerticalCss()}
}
`;
import Container from "./styled-field-container";
class FieldContainer extends React.Component {
constructor(props) {

83
packages/asc-web-components/src/components/field-container/styled-field-container.js Normal file
View File

@ -0,0 +1,83 @@
import styled, { css } from "styled-components";
import { tablet } from "../../utils/device";
import { Base } from "../../themes";
function getHorizontalCss(labelWidth) {
return css`
display: flex;
flex-direction: row;
align-items: start;
margin: ${(props) => props.theme.fieldContainer.horizontal.margin};
.field-label {
line-height: ${(props) =>
props.theme.fieldContainer.horizontal.label.lineHeight};
margin: ${(props) => props.theme.fieldContainer.horizontal.label.margin};
position: relative;
}
.field-label-icon {
display: inline-flex;
min-width: ${labelWidth};
width: ${labelWidth};
}
.field-body {
flex-grow: ${(props) => props.theme.fieldContainer.horizontal.body.width};
}
.icon-button {
position: relative;
margin-top: ${(props) =>
props.theme.fieldContainer.horizontal.iconButton.marginTop};
margin-left: ${(props) =>
props.theme.fieldContainer.horizontal.iconButton.marginLeft};
}
`;
}
function getVerticalCss() {
return css`
display: flex;
flex-direction: column;
align-items: start;
margin: ${(props) => props.theme.fieldContainer.vertical.margin};
.field-label {
line-height: ${(props) =>
props.theme.fieldContainer.vertical.label.lineHeight};
height: ${(props) => props.theme.fieldContainer.vertical.label.height};
display: inline-block;
}
.field-label-icon {
display: inline-flex;
width: ${(props) => props.theme.fieldContainer.vertical.labelIcon.width};
margin: ${(props) =>
props.theme.fieldContainer.vertical.labelIcon.margin};
}
.field-body {
width: ${(props) => props.theme.fieldContainer.vertical.body.width};
}
.icon-button {
position: relative;
margin: ${(props) =>
props.theme.fieldContainer.vertical.iconButton.margin};
padding: ${(props) =>
props.theme.fieldContainer.vertical.iconButton.padding};
width: ${(props) => props.theme.fieldContainer.vertical.iconButton.width};
height: ${(props) =>
props.theme.fieldContainer.vertical.iconButton.height};
}
`;
}
const Container = styled.div`
.error-label {
max-width: ${(props) => (props.maxwidth ? props.maxwidth : "293px")};
}
${(props) =>
props.vertical ? getVerticalCss() : getHorizontalCss(props.maxLabelWidth)}
@media ${tablet} {
${getVerticalCss()}
}
`;
Container.defaultProps = { theme: Base };
export default Container;

10
packages/asc-web-components/src/components/icons/svg/index.js
View File

@ -101,7 +101,6 @@ import OrigMyspaceIcon from "./myspace.react.svg";
import OrigBloggerIcon from "./blogger.react.svg";
import OrigYahooIcon from "./yahoo.react.svg";
import OrigCalendarEmptyIcon from "./calendar.empty.react.svg";
import OrigRefreshIcon from "./refresh.react.svg";
import OrigForwardIcon from "./forward.react.svg";
import OrigFileActionsLockedIcon from "./file.actions.locked.react.svg";
import OrigReplyAllIcon from "./reply.all.react.svg";
@ -142,15 +141,11 @@ import OrigNavLogoOpenedIcon from "./nav.logo.opened.react.svg";
import OrigCheckIcon from "./check.react.svg";
import OrigDangerIcon from "./danger.react.svg";
import OrigInfoIcon from "./info.react.svg";
import OrigArrowPathIcon from "./arrow.path.react.svg";
import OrigQuestionIcon from "./question.react.svg";
import OrigShareGoogleIcon from "./share.google.react.svg";
@ -631,7 +626,7 @@ export const RectangleFilterClickIcon = createStyledIcon(
OrigRectangleFilterClickIcon,
"RectangleFilterClickIcon"
);
export const RefreshIcon = createStyledIcon(OrigRefreshIcon, "RefreshIcon");
export const RemoveIcon = createStyledIcon(OrigRemoveIcon, "RemoveIcon");
export const ReplyAllIcon = createStyledIcon(OrigReplyAllIcon, "ReplyAllIcon");
export const ReplyIcon = createStyledIcon(OrigReplyIcon, "ReplyIcon");
@ -688,9 +683,6 @@ export const ArrowPathIcon = createStyledIcon(
"ArrowPathIcon"
);
export const QuestionIcon = createStyledIcon(
OrigQuestionIcon,
"ToggleButtonIcon",

135
packages/asc-web-components/src/components/password-input/index.js
View File

@ -1,127 +1,20 @@
import React from "react";
import styled from "styled-components";
import PropTypes from "prop-types";
import equal from "fast-deep-equal/react";
import { tablet, mobile } from "../../utils/device";
import InputBlock from "../input-block";
import { Icons } from "../icons";
import { RefreshIcon } from "./svg";
import Link from "../link";
import Text from "../text";
import Tooltip from "../tooltip";
import { Base } from "../../themes";
// eslint-disable-next-line no-unused-vars
const SimpleInput = ({ onValidateInput, onCopyToClipboard, ...props }) => (
<div {...props}></div>
);
SimpleInput.propTypes = {
onValidateInput: PropTypes.func,
onCopyToClipboard: PropTypes.func,
};
const StyledInput = styled(SimpleInput)`
display: flex;
align-items: center;
line-height: 32px;
flex-direction: row;
flex-wrap: wrap;
@media ${tablet} {
flex-wrap: wrap;
}
.append {
padding-right: 8px;
}
.prepend-children {
padding: 0;
}
.break {
flex-basis: 100%;
height: 0;
}
.text-tooltip {
line-height: 14px;
margin-top: -2px;
}
.password-field-wrapper {
display: flex;
width: auto;
@media ${mobile} {
width: 100%;
}
}
`;
const PasswordProgress = styled.div`
${(props) =>
props.inputWidth ? `width: ${props.inputWidth};` : `flex: auto;`}
.input-relative {
position: relative;
svg {
overflow: hidden;
vertical-align: middle;
}
}
*,
*::before,
*::after {
box-sizing: border-box;
}
`;
const NewPasswordButton = styled.div`
margin: 0 16px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
svg {
overflow: hidden;
vertical-align: middle;
margin-bottom: 4px;
}
:hover {
cursor: pointer;
}
`;
const CopyLink = styled.div`
margin-top: -6px;
@media ${tablet} {
width: 100%;
margin-left: 0px;
margin-top: -1px;
}
`;
const TooltipStyle = styled.div`
.__react_component_tooltip {
}
`;
const Progress = styled.div`
border: 1.5px solid
${(props) =>
!props.isDisabled && props.progressColor
? props.progressColor
: "transparent"};
border-radius: 2px;
margin-top: -1px;
width: ${(props) => (props.progressWidth ? props.progressWidth + "%" : "0%")};
`;
const StyledTooltipContainer = styled(Text)`
//margin: 8px 16px 16px 16px;
`;
const StyledTooltipItem = styled(Text)`
margin-left: 8px;
height: 24px;
color: ${(props) => (props.valid ? "#44bb00" : "#B40404")};
`;
import {
Progress,
CopyLink,
NewPasswordButton,
PasswordProgress,
StyledInput,
} from "./styled-password-input";
class PasswordInput extends React.Component {
constructor(props) {
@ -441,7 +334,6 @@ class PasswordInput extends React.Component {
} = this.props;
const { type, progressColor, progressWidth, inputValue } = this.state;
const iconsColor = isDisabled ? "#D0D5DA" : "#A3A9AE";
const iconName = type === "password" ? "EyeOffIcon" : "EyeIcon";
return (
@ -459,7 +351,6 @@ class PasswordInput extends React.Component {
scale={scale}
size={size}
type={type}
iconColor={`${iconsColor} !important`}
iconSize={16}
hoverColor={"#A3A9AE"}
isIconFill={true}
@ -500,6 +391,7 @@ class PasswordInput extends React.Component {
style,
simpleView,
hideNewPasswordButton,
isDisabled,
} = this.props;
const { copyLabel, disableCopyAction } = this.state;
@ -523,15 +415,14 @@ class PasswordInput extends React.Component {
data-tip=""
data-event="click"
ref={this.ref}
isDisabled={isDisabled}
>
{this.renderInputGroup()}
</PasswordProgress>
{!hideNewPasswordButton ? (
<NewPasswordButton>
<Icons.RefreshIcon
<NewPasswordButton isDisabled={isDisabled}>
<RefreshIcon
size="medium"
color={iconsColor}
isfill={true}
onClick={this.onGeneratePassword}
/>
</NewPasswordButton>
@ -543,7 +434,7 @@ class PasswordInput extends React.Component {
type="action"
isHovered={true}
fontSize="13px"
color={iconsColor}
className="password-input_link"
isSemitransparent={disableCopyAction}
onClick={this.copyToClipboard.bind(this, emailInputName)}
>

151
packages/asc-web-components/src/components/password-input/styled-password-input.js Normal file
View File

@ -0,0 +1,151 @@
import React from "react";
import styled from "styled-components";
import PropTypes from "prop-types";
import { tablet, mobile } from "../../utils/device";
import { Base } from "../../themes";
// eslint-disable-next-line no-unused-vars
const SimpleInput = ({ onValidateInput, onCopyToClipboard, ...props }) => (
<div {...props}></div>
);
SimpleInput.propTypes = {
onValidateInput: PropTypes.func,
onCopyToClipboard: PropTypes.func,
};
const StyledInput = styled(SimpleInput)`
display: flex;
align-items: center;
line-height: ${(props) => props.theme.passwordInput.lineHeight};
flex-direction: row;
flex-wrap: wrap;
.input-relative {
svg {
path {
fill: ${(props) =>
props.isDisabled
? props.theme.passwordInput.disableColor
: props.theme.passwordInput.color} !important;
}
}
}
@media ${tablet} {
flex-wrap: wrap;
}
.append {
padding-right: 8px;
}
.prepend-children {
padding: 0;
}
.break {
flex-basis: 100%;
height: 0;
}
.text-tooltip {
line-height: ${(props) => props.theme.passwordInput.text.lineHeight};
margin-top: ${(props) => props.theme.passwordInput.text.marginTop};
}
.password-field-wrapper {
display: flex;
width: auto;
@media ${mobile} {
width: 100%;
}
}
`;
StyledInput.defaultProps = { theme: Base };
const PasswordProgress = styled.div`
${(props) =>
props.inputWidth ? `width: ${props.inputWidth};` : `flex: auto;`}
.input-relative {
position: relative;
svg {
overflow: hidden;
vertical-align: middle;
}
}
*,
*::before,
*::after {
box-sizing: border-box;
}
`;
PasswordProgress.defaultProps = { theme: Base };
const NewPasswordButton = styled.div`
margin: ${(props) => props.theme.passwordInput.newPassword.margin};
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
svg {
overflow: ${(props) => props.theme.passwordInput.newPassword.svg.overflow};
vertical-align: middle;
margin-bottom: ${(props) =>
props.theme.passwordInput.newPassword.svg.marginBottom};
path {
fill: ${(props) =>
props.isDisabled
? props.theme.passwordInput.disableColor
: props.theme.passwordInput.color};
}
}
:hover {
cursor: pointer;
}
`;
NewPasswordButton.defaultProps = { theme: Base };
const CopyLink = styled.div`
margin-top: ${(props) => props.theme.passwordInput.link.marginTop};
.password-input_link {
color: ${(props) =>
props.isDisabled
? props.theme.passwordInput.disableColor
: props.theme.passwordInput.color};
}
@media ${tablet} {
width: ${(props) => props.theme.passwordInput.link.tablet.width};
margin-left: ${(props) => props.theme.passwordInput.link.tablet.marginLeft};
margin-top: ${(props) => props.theme.passwordInput.link.tablet.marginTop};
}
`;
CopyLink.defaultProps = { theme: Base };
const Progress = styled.div`
border: 1.5px solid
${(props) =>
!props.isDisabled && props.progressColor
? props.progressColor
: "transparent"};
border-radius: ${(props) => props.theme.passwordInput.progress.borderRadius};
margin-top: ${(props) => props.theme.passwordInput.progress.marginTop};
width: ${(props) => (props.progressWidth ? props.progressWidth + "%" : "0%")};
`;
Progress.defaultProps = { theme: Base };
// const TooltipStyle = styled.div`
// .__react_component_tooltip {
// }
// `;
// const StyledTooltipContainer = styled(Text)`
// //margin: 8px 16px 16px 16px;
// `;
// const StyledTooltipItem = styled(Text)`
// margin-left: 8px;
// height: 24px;
// color: ${(props) => (props.valid ? "#44bb00" : "#B40404")};
// `;
export { Progress, CopyLink, NewPasswordButton, PasswordProgress, StyledInput };

1
packages/asc-web-components/src/components/password-input/svg/index.js Normal file
View File

@ -0,0 +1 @@
export { default as RefreshIcon } from "./refresh.react.svg";

0
packages/asc-web-components/src/components/icons/svg/refresh.react.svg → packages/asc-web-components/src/components/password-input/svg/refresh.react.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

163
packages/asc-web-components/src/components/row-content/index.js
View File

@ -1,161 +1,14 @@
import React from "react";
import styled, { css } from "styled-components";
import PropTypes from "prop-types";
import { tablet, size } from "../../utils/device";
const truncateCss = css`
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
`;
const commonCss = css`
margin: 0 6px;
font-family: "Open Sans";
font-size: 12px;
font-style: normal;
font-weight: 600;
`;
const containerTabletStyle = css`
display: block;
height: 56px;
`;
const mainWrapperTabletStyle = css`
min-width: 140px;
margin-right: 8px;
margin-top: 8px;
width: 95%;
`;
const mainContainerTabletStyle = css`
${truncateCss};
max-width: 100%;
`;
const sideInfoTabletStyle = css`
display: block;
min-width: 160px;
margin: 0 6px;
${commonCss};
color: ${(props) => props.color && props.color};
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
`;
const StyledRowContent = styled.div`
width: 100%;
display: inline-flex;
${(props) =>
(!props.disableSideInfo &&
props.widthProp &&
props.widthProp < size.tablet) ||
props.isMobile
? `${containerTabletStyle}`
: `
@media ${tablet} {
${containerTabletStyle}
}
`}
`;
const MainContainerWrapper = styled.div`
${commonCss};
display: flex;
align-self: center;
margin-right: auto;
width: ${(props) =>
props.mainContainerWidth ? props.mainContainerWidth : "140px"};
min-width: 140px;
${(props) =>
(!props.disableSideInfo &&
props.widthProp &&
props.widthProp < size.tablet) ||
props.isMobile
? `${mainWrapperTabletStyle}`
: `
@media ${tablet} {
${mainWrapperTabletStyle}
}
`}
`;
const MainContainer = styled.div`
height: 20px;
margin-right: 8px;
max-width: 86%;
${(props) =>
(props.widthProp && props.widthProp < size.tablet) || props.isMobile
? `${mainContainerTabletStyle}`
: `
@media ${tablet} {
${mainContainerTabletStyle}
}
`}
`;
const MainIcons = styled.div`
height: 19px;
align-self: center;
white-space: nowrap;
`;
const SideContainerWrapper = styled.div`
${commonCss};
${(props) =>
(props.widthProp && props.widthProp < size.tablet) || props.isMobile
? `${truncateCss}`
: `
@media ${tablet} {
${truncateCss}
}
`}
align-self: center;
align-items: center;
> a {
vertical-align: middle;
}
width: ${(props) => (props.containerWidth ? props.containerWidth : "40px")};
min-width: ${(props) =>
props.containerMinWidth ? props.containerMinWidth : "40px"};
color: ${(props) => props.color && props.color};
${(props) =>
(!props.disableSideInfo &&
props.widthProp &&
props.widthProp < size.tablet) ||
props.isMobile
? `display: none;`
: `
@media ${tablet} {
display: none;
}
`}
`;
const TabletSideInfo = styled.div`
display: none;
${(props) => (props.color ? `color: ${props.color};` : null)}
${(props) =>
(props.widthProp && props.widthProp < size.tablet) || props.isMobile
? `${sideInfoTabletStyle}`
: `
@media ${tablet} {
${sideInfoTabletStyle}
}
`}
`;
import {
TabletSideInfo,
SideContainerWrapper,
MainContainer,
MainIcons,
MainContainerWrapper,
StyledRowContent,
} from "./styled-row-content";
const getSideInfo = (content, convert) => {
let info = "";

172
packages/asc-web-components/src/components/row-content/styled-row-content.js Normal file
View File

@ -0,0 +1,172 @@
import styled, { css } from "styled-components";
import { Base } from "../../themes";
import { tablet, size } from "../../utils/device";
const truncateCss = css`
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
`;
const commonCss = css`
margin: ${(props) => props.theme.rowContent.margin};
font-family: "Open Sans";
font-size: ${(props) => props.theme.rowContent.fontSize};
font-style: ${(props) => props.theme.rowContent.fontStyle};
font-weight: ${(props) => props.theme.rowContent.fontWeight};
`;
const containerTabletStyle = css`
display: block;
height: ${(props) => props.theme.rowContent.height};
`;
const mainWrapperTabletStyle = css`
min-width: ${(props) => props.theme.rowContent.mainWrapper.minWidth};
margin-right: ${(props) => props.theme.rowContent.mainWrapper.marginRight};
margin-top: ${(props) => props.theme.rowContent.mainWrapper.marginTop};
width: ${(props) => props.theme.rowContent.mainWrapper.width};
`;
const mainContainerTabletStyle = css`
${truncateCss};
max-width: ${(props) => props.theme.rowContent.maxWidth};
`;
const sideInfoTabletStyle = css`
display: block;
min-width: ${(props) => props.theme.rowContent.sideInfo.minWidth};
margin: ${(props) => props.theme.rowContent.sideInfo.margin};
${commonCss};
color: ${(props) => props.color && props.color};
white-space: nowrap;
overflow: ${(props) => props.theme.rowContent.sideInfo.overflow};
text-overflow: ${(props) => props.theme.rowContent.sideInfo.textOverflow};
`;
const StyledRowContent = styled.div`
width: 100%;
display: inline-flex;
${(props) =>
(!props.disableSideInfo &&
props.widthProp &&
props.widthProp < size.tablet) ||
props.isMobile
? `${containerTabletStyle}`
: `
@media ${tablet} {
${containerTabletStyle}
}
`}
`;
StyledRowContent.defaultProps = { theme: Base };
const MainContainerWrapper = styled.div`
${commonCss};
display: flex;
align-self: center;
margin-right: auto;
width: ${(props) =>
props.mainContainerWidth ? props.mainContainerWidth : "140px"};
min-width: 140px;
${(props) =>
(!props.disableSideInfo &&
props.widthProp &&
props.widthProp < size.tablet) ||
props.isMobile
? `${mainWrapperTabletStyle}`
: `
@media ${tablet} {
${mainWrapperTabletStyle}
}
`}
`;
MainContainerWrapper.defaultProps = { theme: Base };
const MainContainer = styled.div`
height: 20px;
margin-right: 8px;
max-width: 86%;
${(props) =>
(props.widthProp && props.widthProp < size.tablet) || props.isMobile
? `${mainContainerTabletStyle}`
: `
@media ${tablet} {
${mainContainerTabletStyle}
}
`}
`;
MainContainer.defaultProps = { theme: Base };
const MainIcons = styled.div`
height: ${(props) => props.theme.rowContent.icons.height};
align-self: center;
white-space: nowrap;
`;
MainIcons.defaultProps = { theme: Base };
const SideContainerWrapper = styled.div`
${commonCss};
${(props) =>
(props.widthProp && props.widthProp < size.tablet) || props.isMobile
? `${truncateCss}`
: `
@media ${tablet} {
${truncateCss}
}
`}
align-self: center;
align-items: center;
> a {
vertical-align: middle;
}
width: ${(props) => (props.containerWidth ? props.containerWidth : "40px")};
min-width: ${(props) =>
props.containerMinWidth ? props.containerMinWidth : "40px"};
color: ${(props) => props.color && props.color};
${(props) =>
(!props.disableSideInfo &&
props.widthProp &&
props.widthProp < size.tablet) ||
props.isMobile
? `display: none;`
: `
@media ${tablet} {
display: none;
}
`}
`;
SideContainerWrapper.defaultProps = { theme: Base };
const TabletSideInfo = styled.div`
display: none;
${(props) => (props.color ? `color: ${props.color};` : null)}
${(props) =>
(props.widthProp && props.widthProp < size.tablet) || props.isMobile
? `${sideInfoTabletStyle}`
: `
@media ${tablet} {
${sideInfoTabletStyle}
}
`}
`;
TabletSideInfo.defaultProps = { theme: Base };
export {
TabletSideInfo,
SideContainerWrapper,
MainContainer,
MainIcons,
MainContainerWrapper,
StyledRowContent,
};

3
packages/asc-web-components/src/components/text/common-text-styles.js
View File

@ -3,7 +3,8 @@ import { css } from "styled-components";
const commonTextStyles = css`
font-family: ${(props) => props.theme.fontFamily};
text-align: ${(props) => props.textAlign};
color: ${(props) => props.colorProp};
color: ${(props) =>
props.colorProp ? props.colorProp : props.theme.text.color};
${(props) =>
props.truncate &&
css`

1
packages/asc-web-components/src/components/text/index.js
View File

@ -45,7 +45,6 @@ Text.propTypes = {
Text.defaultProps = {
title: null,
color: "#333333",
textAlign: "left",
fontSize: "13px",
truncate: false,

0
packages/asc-web-components/src/components/ThemeProvider/README.md → packages/asc-web-components/src/components/theme-provider/README.md
View File

1
packages/asc-web-components/src/components/theme-provider/index.js Normal file
View File

@ -0,0 +1 @@
export default from "./theme-provider";

0
packages/asc-web-components/src/components/ThemeProvider/ThemeProvider.js → packages/asc-web-components/src/components/theme-provider/theme-provider.js
View File

2
packages/asc-web-components/src/components/ThemeProvider/ThemeProvider.stories.js → packages/asc-web-components/src/components/theme-provider/theme-provider.stories.js
View File

@ -4,7 +4,7 @@ import ThemeProvider from ".";
import withReadme from "storybook-readme/with-readme";
import Readme from "./README.md";
import { BooleanValue } from "react-values";
import Box from "../Box/";
import Box from "../Box";
import Text from "../Text";
import JSONPretty from "react-json-pretty";
import { Base, Dark } from "../../themes";

0
packages/asc-web-components/src/components/ThemeProvider/ThemeProvider.test.js → packages/asc-web-components/src/components/theme-provider/theme-provider.test.js
View File

52
packages/asc-web-components/src/components/tree-menu/sub-components/tree-node.js
View File

@ -5,6 +5,8 @@ import { getCssFromSvg } from "../../icons/get-css-from-svg";
import { TreeNode } from "rc-tree";
import ReactDOMServer from "react-dom/server";
import PropTypes from "prop-types";
import NoUserSelect from "../../../utils/commonStyles";
import { Base } from "../../../themes";
var checkboxIcon,
checkboxСheckedIcon,
@ -101,18 +103,16 @@ const TreeNodeMenu = styled(TreeNode)`
position: relative;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
${NoUserSelect}
${(props) =>
props.dragging &&
css`
.draggable {
background: #f8f7bf;
border-radius: 3px;
background: ${(props) =>
props.theme.treeNode.dragging.draggable.background};
border-radius: ${(props) =>
props.theme.treeNode.dragging.draggable.borderRadius};
${(props) =>
!props.isFullFillSelection &&
`
@ -122,33 +122,37 @@ const TreeNodeMenu = styled(TreeNode)`
`}
:hover {
background: #efefb2;
background: ${(props) =>
props.theme.treeNode.dragging.draggable.hoverBackgroundColor};
}
.rc-tree-title {
width: 85% !important;
width: ${(props) =>
props.theme.treeNode.dragging.title.width} !important;
}
}
`}
.draggable {
color: #555F65;
color: ${(props) => props.theme.treeNode.draggable.color};
/* Required to make elements draggable in old WebKit */
-khtml-user-drag: none;
-webkit-user-drag: none;
}
&.drag-over > .draggable {
background-color: #316ac5;
color: white;
border: 1px #316ac5 solid;
background-color: ${(props) =>
props.theme.treeNode.draggable.dragOverBackgroundColor};
color: ${(props) => props.theme.treeNode.draggable.dragOverColor};
border: ${(props) => props.theme.treeNode.draggable.border};
opacity: 0.8;
}
&.drag-over-gap-top > .draggable {
border-top: 2px blue solid;
border-top: ${(props) => props.theme.treeNode.draggable.gapTop.borderTop};
}
&.drag-over-gap-bottom > .draggable {
border-bottom: 2px blue solid;
border-bottom: ${(props) =>
props.theme.treeNode.draggable.gapBottom.borderBottom};
}
&.filter-node > .rc-tree-node-content-wrapper {
color: #a60000 !important;
color: ${(props) => props.theme.treeNode.contentWrapper.color} !important;
font-weight: bold !important;
}
ul {
@ -276,9 +280,9 @@ const TreeNodeMenu = styled(TreeNode)`
top: 5px;
width: 5px;
height: 0;
border: 2px solid #fff;
border-top: 0;
border-left: 0;
border: ${(props) => props.theme.treeNode.checkbox.border};
border-top: ${(props) => props.theme.treeNode.checkbox.borderTop};
border-left: ${(props) => props.theme.treeNode.checkbox.borderLeft};
}
span.rc-tree-title {
display: inline-block;
@ -291,7 +295,7 @@ const TreeNodeMenu = styled(TreeNode)`
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #555F65;
color: ${(props) => props.theme.treeNode.title.color};
padding-left: ${(props) =>
props.icon || props.disableSwitch ? "0" : "20px"};
}
@ -304,9 +308,9 @@ const TreeNodeMenu = styled(TreeNode)`
top: 2px;
}
.rc-tree-node-selected {
background: #dfe2e3;
background: ${(props) => props.theme.treeNode.selected.background};
mix-blend-mode: normal;
border-radius: 3px;
border-radius: ${(props) => props.theme.treeNode.selected.borderRadius};
z-index: 0;
${(props) =>
props.disableSwitch &&
@ -315,7 +319,8 @@ const TreeNodeMenu = styled(TreeNode)`
width: auto;
`}
:hover {
background: #dfe2e3;
background: ${(props) =>
props.theme.treeNode.selected.hoverBackgroundColor};
}
overflow: visible;
}
@ -343,5 +348,6 @@ TreeNodeMenu.propTypes = {
showBadge: PropTypes.bool,
onBadgeClick: PropTypes.func,
};
TreeNodeMenu.defaultProps = { theme: Base };
export default TreeNodeMenu;

184
packages/asc-web-components/src/themes/base.js
View File

@ -42,11 +42,14 @@ const {
hoverWarning,
darkBlack,
silver,
strongBlue,
lightGrayishStrongBlue,
darkRed,
} = globalColors;
const Base = {
// color: black,
// backgroundColor: white,
color: black,
backgroundColor: white,
fontFamily: "Open Sans, sans-serif, Arial",
fontSize: "30px",
@ -159,7 +162,7 @@ const Base = {
margin: "0",
lineHeight: "56px",
fontWeight: "700",
borderBottom: `1px solid ${globalColors.pattensBlue}`,
borderBottom: `1px solid ${globalColors.lightGrayishBlue}`,
padding: "0 16px 16px",
bodyPadding: "16px 0",
},
@ -298,6 +301,7 @@ const Base = {
},
},
iconButton: {},
selectorAddButton: {
background: grayLight,
activeBackground: grayLightMid,
@ -435,6 +439,33 @@ const Base = {
},
},
rowContent: {
icons: {
height: "19px",
},
margin: "0 6px",
fontSize: "12px",
fontStyle: "normal",
fontWeight: "600",
height: "56px",
maxWidth: " 100%",
sideInfo: {
minWidth: "160px",
margin: "0 6px",
overflow: "hidden",
textOverflow: "ellipsis",
},
mainWrapper: {
minWidth: "140px",
marginRight: "8px",
marginTop: "8px",
width: "95%",
},
},
badge: {
border: "1px solid transparent",
padding: "1px",
@ -466,7 +497,7 @@ const Base = {
},
header: {
borderBottom: `1px solid ${globalColors.pattensBlue}`,
borderBottom: `1px solid ${globalColors.lightGrayishBlue}`,
},
closeButton: {
@ -500,8 +531,8 @@ const Base = {
},
input: {
color: "#333333",
disableColor: "#A3A9AE",
color: black,
disableColor: grayMid,
backgroundColor: white,
disableBackgroundColor: grayLight,
@ -574,6 +605,44 @@ const Base = {
},
},
passwordInput: {
disableColor: grayMid,
color: gray,
hoverColor: gray,
lineHeight: "32px",
text: {
lineHeight: "14px",
marginTop: "-2px",
},
link: {
marginTop: "-6px",
tablet: {
width: "100%",
marginLeft: "0px",
marginTop: "-1px",
},
},
progress: {
borderRadius: "2px",
marginTop: "-1px",
},
newPassword: {
margin: "0 16px",
svg: {
overflow: "hidden",
marginBottom: "4px",
},
},
},
searchInput: {
fontSize: "14px",
fontWeight: "600",
@ -740,6 +809,51 @@ const Base = {
},
},
fieldContainer: {
horizontal: {
margin: "0 0 16px 0",
label: {
lineHeight: "32px",
margin: "0",
},
body: {
flexGrow: "1",
},
iconButton: {
marginTop: "10px",
marginLeft: "8px",
},
},
vertical: {
margin: "0 0 16px 0",
label: {
lineHeight: "13px",
height: "15px",
},
labelIcon: {
width: "100%",
margin: "0 0 8px 0",
},
body: {
width: "100%",
},
iconButton: {
margin: "0",
padding: "0px 8px",
width: "13px",
height: "13px",
},
},
},
avatar: {
initialsContainer: {
color: white,
@ -973,6 +1087,55 @@ const Base = {
unsetBackgroundColor: "unset",
},
treeNode: {
dragging: {
draggable: {
background: lightCumulus,
hoverBackgroundColor: lightMediumGoldenrod,
borderRadius: "3px",
},
title: {
width: "85%",
},
},
draggable: {
color: cyanBlueDarkShade,
dragOverBackgroundColor: strongBlue,
border: `1px ${strongBlue} solid`,
dragOverColor: white,
gapTop: {
borderTop: `2px blue solid`,
},
gapBottom: {
borderBottom: `2px blue solid`,
},
},
contentWrapper: {
color: darkRed,
},
title: {
color: cyanBlueDarkShade,
},
selected: {
background: lightGrayishStrongBlue,
hoverBackgroundColor: lightGrayishStrongBlue,
borderRadius: "3px",
},
checkbox: {
border: `2px solid ${white}`,
borderTop: 0,
borderLeft: 0,
},
},
progressBar: {
height: "22px",
backgroundColor: grayLight,
@ -1017,6 +1180,7 @@ const Base = {
borderRadius: "6px",
boxShadow: "0px 5px 20px rgba(0, 0, 0, 0.13)",
},
dropDownItem: {
color: black,
disableColor: gray,
@ -1289,7 +1453,7 @@ const Base = {
margin: "0",
lineHeight: "56px",
fontWeight: "700",
borderBottom: `1px solid ${globalColors.pattensBlue}`,
borderBottom: `1px solid ${globalColors.lightGrayishBlue}`,
},
bodyContent: {
@ -1319,6 +1483,7 @@ const Base = {
bigMarginTop: "7.5px",
lineHeight: "33px",
},
weekdays: {
color: black,
disabledColor: gray,
@ -1326,6 +1491,7 @@ const Base = {
bigWidth: "295px",
marginBottom: "-5px",
},
month: {
baseWidth: "267px",
bigWidth: "295px",
@ -1335,12 +1501,14 @@ const Base = {
neighboringHoverColor: black,
neighboringColor: grayLightMid,
},
selectedDay: {
backgroundColor: orangeMain,
borderRadius: "16px",
cursor: "pointer",
color: white,
},
comboBox: {
color: black,
minWidth: "80px",
@ -1370,7 +1538,7 @@ const Base = {
contentLineHeight: "56px",
contentFontWeight: "700",
borderBottom: `1px solid ${globalColors.pattensBlue}`,
borderBottom: `1px solid ${globalColors.lightGrayishBlue}`,
},
aside: {

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

File diff suppressed because it is too large Load Diff

6
packages/asc-web-components/src/utils/globalColors.js
View File

@ -21,8 +21,10 @@ const globalColors = {
blueDisabled: "#A6DCF2",
blueCharcoal: "#1F2933",
blueLightMid: "#265A8F",
strongBlue: "#316AC5",
pattensBlue: "#DEE2E6",
lightGrayishBlue: "#DEE2E6",
lightGrayishStrongBlue: "#DFE2E3",
cyanBlueDarkShade: "#555F65",
orangeMain: "#ED7309",
@ -37,7 +39,7 @@ const globalColors = {
warningColor: "#f1ca92",
red: "#c30",
darkRed: "#A60000",
activeSuccess: "#CAE796",
activeError: "#FFBFAA",
activeInfo: "#F1DA92",

13
packages/asc-web-components/src/utils/globalStyles.js Normal file
View File

@ -0,0 +1,13 @@
import { createGlobalStyle } from "styled-components";
const GlobalStyle = createGlobalStyle`
html, body {
margin: 0;
background-color: ${props => props.theme.backgroundColor};
color: ${props => props.theme.color};
font-family: ${props => props.theme.fontFamily};
}
`;
export default GlobalStyle;