Web: Files/Editor: Fixed styles.

This commit is contained in:
Tatiana Lopaeva 2021-08-04 12:42:59 +03:00
parent 1e0952c20a
commit 89b79b8523
5 changed files with 44 additions and 25 deletions

View File

@ -121,14 +121,14 @@ const SelectFileDialogAsideView = ({
<Button
className="select-file-dialog-buttons-save"
primary
size="medium"
size="big"
label={t("Common:SaveButton")}
onClick={onClickSave}
isDisabled={selectedFile.length === 0}
/>
<Button
primary
size="medium"
size="big"
label={t("Common:CloseButton")}
onClick={onClose}
/>

View File

@ -193,7 +193,7 @@ class SelectFileDialogModalViewBody extends React.Component {
selectedFolder={selectedFolder}
loadingText={loadingText}
selectedFile={selectedFile}
listHeight={isHeaderChildren ? 280 : 300}
listHeight={isHeaderChildren ? 280 : 310}
/>
)}
</div>
@ -215,7 +215,7 @@ class SelectFileDialogModalViewBody extends React.Component {
<StyledSelectFilePanel isHeaderChildren={isHeaderChildren}>
<div className="select-file-dialog-modal_buttons">
<Button
className="select-file-dialog-buttons-save"
className="select-file-modal-dialog-buttons-save"
primary
size="medium"
label={t("Common:SaveButton")}

View File

@ -590,6 +590,7 @@ const StyledSelectFilePanel = styled.div`
.select-folder-dialog_aside-body_wrapper {
width: 320px;
padding: 0 16px;
box-sizing: border-box;
}
.select-folder-dialog_aside-body_wrapper {
height: 100%;
@ -667,7 +668,11 @@ const StyledSelectFilePanel = styled.div`
width: 100%;
}
.select-file-dialog-buttons-save {
margin: 0 8px;
margin-right: 8px;
margin-left: 16px;
}
.select-file-modal-dialog-buttons-save {
margin-right: 8px;
}
.select-folder-dialog-buttons-save {
margin-right: 8px;

View File

@ -45,7 +45,7 @@ import {
} from "files/utils";
import SelectFileDialog from "files/SelectFileDialog";
import SelectFolderDialog from "files/SelectFolderDialog";
import { StyledSelectorFolder } from "./StyledEditor";
import { StyledSelectFolder, StyledSelectFile } from "./StyledEditor";
import i18n from "./i18n";
import { FolderType } from "@appserver/common/constants";
import Text from "@appserver/components/text";
@ -463,7 +463,7 @@ const Editor = () => {
const [isVisible, setIsVisible] = useState(false);
const [isFileDialogVisible, setIsFileDialogVisible] = useState(false);
const [isFolderDialogVisible, setIsFolderDialogVisible] = useState(false);
const [filesType, setFilesType] = useState("");
const [filesType, setFilesType] = useState("");
const onSDKRequestSharingSettings = () => {
setIsVisible(true);
@ -617,11 +617,13 @@ const Editor = () => {
};
const SelectFileHeader = () => (
<Text>
{filesType === insertImageAction
? i18n.t("ImageFileType")
: i18n.t("MailMergeFileType")}
</Text>
<StyledSelectFile>
<Text className="editor-select-file_text">
{filesType === insertImageAction
? i18n.t("ImageFileType")
: i18n.t("MailMergeFileType")}
</Text>
</StyledSelectFile>
);
return (
@ -668,26 +670,29 @@ const Editor = () => {
foldersType="editor"
onSave={onClickSaveSelectFolder}
header={
<StyledSelectorFolder>
<Text className="editor-selector-folder_text">
<StyledSelectFolder>
<Text className="editor-select-folder_text">
{i18n.t("FileName")}
</Text>
<TextInput
className="editor-selector-folder_text-input"
className="editor-select-folder_text-input"
scale
onChange={onChangeInput}
value={titleSelectorFolder}
/>
</StyledSelectorFolder>
</StyledSelectFolder>
}
headerName={i18n.t("FolderForSave")}
{...(extension !== "fb2" && {
footer: (
<Checkbox
label={i18n.t("OpenSavedDocument")}
onChange={onClickCheckbox}
isChecked={openNewTab}
/>
<StyledSelectFolder>
<Checkbox
className="editor-select-folder_checkbox"
label={i18n.t("OpenSavedDocument")}
onChange={onClickCheckbox}
isChecked={openNewTab}
/>
</StyledSelectFolder>
),
})}
/>

View File

@ -1,12 +1,21 @@
import styled from "styled-components";
const StyledSelectorFolder = styled.div`
.editor-selector-folder_text {
const StyledSelectFolder = styled.div`
.editor-select-folder_text {
color: #555f65;
}
.editor-selector-folder_text-input {
.editor-select-folder_text-input {
margin-top: 8px;
}
.editor-select-folder_checkbox {
background-color: white;
word-break: break-word;
}
`;
export { StyledSelectorFolder };
const StyledSelectFile = styled.div`
.editor-select-file_text {
word-break: break-word;
}
`;
export { StyledSelectFolder, StyledSelectFile };