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

Web:Files:Dialogs: add support dark-theme

Browse Source
This commit is contained in:
Timofey Boyko 2021-12-25 01:08:23 +08:00
parent d46679e9bb
commit 39ec4f3e36
4 changed files with 53 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1994,6 +1994,14 @@ const Base = {
background: "rgba(200, 200, 200, 0.2)",
},
},
filesThirdPartyDialog: {
border: "1px solid #d1d1d1",
},
filesModalDialog: {
border: `1px solid lightgray`,
},
};
export default Base;

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

@ -1994,6 +1994,14 @@ const Dark = {
background: "rgba(200, 200, 200, 0.2)",
},
},
filesThirdPartyDialog: {
border: "1px solid #474747",
},
filesModalDialog: {
border: `1px solid #474747`,
},
};
export default Dark;

11
products/ASC.Files/Client/src/components/dialogs/ModalDialogContainer.js
View File

@ -1,6 +1,7 @@
import styled from "styled-components";
import { tablet } from "@appserver/components/utils/device";
import ModalDialog from "@appserver/components/modal-dialog";
import styled from 'styled-components';
import { tablet } from '@appserver/components/utils/device';
import ModalDialog from '@appserver/components/modal-dialog';
import { Base } from '@appserver/components/themes';
const ModalDialogContainer = styled(ModalDialog)`
.flex {
@ -68,7 +69,7 @@ const ModalDialogContainer = styled(ModalDialog)`
.modal-dialog-content {
padding: 8px 16px;
border: 1px solid lightgray;
border: ${(props) => props.theme.filesModelDialog.border};
@media ${tablet} {
padding: 0;
@ -144,4 +145,6 @@ const ModalDialogContainer = styled(ModalDialog)`
}
`;
ModalDialogContainer.defaultProps = { theme: Base };
export default ModalDialogContainer;

65
products/ASC.Files/Client/src/components/dialogs/ThirdPartyDialog/index.js
View File

@ -1,13 +1,14 @@
import React from "react";
import styled from "styled-components";
import { Trans } from "react-i18next";
import { inject, observer } from "mobx-react";
import { withTranslation } from "react-i18next";
import ModalDialog from "@appserver/components/modal-dialog";
import Text from "@appserver/components/text";
import Link from "@appserver/components/link";
import { connectedCloudsTitleTranslation } from "../../../helpers/utils";
import NoUserSelect from "@appserver/components/utils/commonStyles";
import React from 'react';
import styled from 'styled-components';
import { Trans } from 'react-i18next';
import { inject, observer } from 'mobx-react';
import { withTranslation } from 'react-i18next';
import ModalDialog from '@appserver/components/modal-dialog';
import Text from '@appserver/components/text';
import Link from '@appserver/components/link';
import { connectedCloudsTitleTranslation } from '../../../helpers/utils';
import NoUserSelect from '@appserver/components/utils/commonStyles';
import { Base } from '@appserver/components/themes';
const StyledServicesBlock = styled.div`
display: grid;
@ -19,7 +20,7 @@ const StyledServicesBlock = styled.div`
padding-top: 24px;
.service-item {
border: 1px solid #d1d1d1;
border: ${(props) => props.theme.filesThirdPartyDialog.border};
width: 158px;
height: 40px;
@ -30,7 +31,7 @@ const StyledServicesBlock = styled.div`
img {
${NoUserSelect}
border: 1px solid #d1d1d1;
border: ${(props) => props.theme.filesThirdPartyDialog.border};
width: 158px;
height: 40px;
@ -46,16 +47,18 @@ const StyledServicesBlock = styled.div`
}
`;
StyledServicesBlock.defaultProps = { theme: Base };
const ServiceItem = (props) => {
const { capability, t, ...rest } = props;
const capabilityName = capability[0];
const capabilityLink = capability.length > 1 ? capability[1] : "";
const capabilityLink = capability.length > 1 ? capability[1] : '';
const dataProps = {
"data-link": capabilityLink,
"data-title": capabilityName,
"data-key": capabilityName,
'data-link': capabilityLink,
'data-title': capabilityName,
'data-key': capabilityName,
};
return <img {...dataProps} {...rest} alt="" />;
@ -104,16 +107,12 @@ const ThirdPartyDialog = (props) => {
const item = e.currentTarget.dataset;
const showAccountSetting = !e.currentTarget.dataset.link;
if (!showAccountSetting) {
let authModal = window.open(
"",
"Authorization",
"height=600, width=1020"
);
let authModal = window.open('', 'Authorization', 'height=600, width=1020');
openConnectWindow(item.title, authModal).then((modal) =>
getOAuthToken(modal).then((token) => {
authModal.close();
showOAuthModal(token, item);
})
}),
);
} else {
item.title = connectedCloudsTitleTranslation(item.title, t);
@ -125,9 +124,9 @@ const ThirdPartyDialog = (props) => {
};
const yandexLogoUrl =
i18n && i18n.language === "ru-RU"
? "images/services/logo_yandex_ru.svg"
: "images/services/logo_yandex_en.svg";
i18n && i18n.language === 'ru-RU'
? 'images/services/logo_yandex_ru.svg'
: 'images/services/logo_yandex_en.svg';
return (
<ModalDialog
@ -136,14 +135,11 @@ const ThirdPartyDialog = (props) => {
scale={false}
displayType="auto"
zIndex={310}
onClose={onClose}
>
<ModalDialog.Header>
{t("Translations:ConnectingAccount")}
</ModalDialog.Header>
onClose={onClose}>
<ModalDialog.Header>{t('Translations:ConnectingAccount')}</ModalDialog.Header>
<ModalDialog.Body>
<Text as="div" noSelect>
{t("ConnectDescription")}
{t('ConnectDescription')}
{isAdmin && (
<Trans t={t} i18nKey="ConnectAdminDescription" ns="Settings">
For successful connection enter the necessary data at
@ -238,9 +234,8 @@ const ThirdPartyDialog = (props) => {
className="service-item service-text"
data-title={webDavConnectItem[0]}
data-key={webDavConnectItem[0]}
noSelect
>
{t("ConnextOtherAccount")}
noSelect>
{t('ConnextOtherAccount')}
</Text>
)}
</StyledServicesBlock>
@ -291,4 +286,4 @@ export default inject(({ auth, settingsStore, dialogsStore }) => {
getOAuthToken,
openConnectWindow,
};
})(withTranslation(["Settings", "Translations"])(observer(ThirdPartyDialog)));
})(withTranslation(['Settings', 'Translations'])(observer(ThirdPartyDialog)));