Merge pull request #143 from ONLYOFFICE/bugfix/new-files-panel-fix

Bugfix/new files panel fix
This commit is contained in:
Ilya Oleshko 2020-12-04 11:06:34 +03:00 committed by GitHub
commit 0f1c50a765
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 51 additions and 47 deletions

View File

@ -1686,7 +1686,11 @@ class SectionBodyContent extends React.Component {
) : (
<Consumer>
{(context) => (
<RowContainer draggable useReactWindow={false}>
<RowContainer
className="files-row-container"
draggable
useReactWindow={false}
>
{items.map((item) => {
const { checked, isFolder, value, contextOptions } = item;
const sectionWidth = context.sectionWidth;

View File

@ -236,13 +236,17 @@ class NewFilesPanelComponent extends React.Component {
<Backdrop onClick={onClose} visible={visible} zIndex={zIndex} />
<Aside className="header_aside-panel" visible={visible}>
<StyledContent>
<StyledHeaderContent className="files-operations-panel">
<Heading size="medium" truncate>
<StyledHeaderContent>
<Heading
className="files-operations-header"
size="medium"
truncate
>
{t("NewFiles")}
</Heading>
</StyledHeaderContent>
<StyledBody className="files-operations-body">
<RowContainer useReactWindow manualHeight="83vh">
<RowContainer useReactWindow manualHeight="87vh">
{files.map((file) => {
const element = this.getItemIcon(file);
return (

View File

@ -23,7 +23,7 @@ import {
StyledAsidePanel,
StyledContent,
StyledFooter,
StyledSharingHeaderContent,
StyledHeaderContent,
StyledSharingBody,
} from "../StyledPanels";
import { AddUsersPanel, AddGroupsPanel, EmbeddingPanel } from "../index";
@ -593,7 +593,7 @@ class SharingPanelComponent extends React.Component {
<Backdrop onClick={this.onClose} visible={visible} zIndex={zIndex} />
<Aside className="header_aside-panel" visible={visible}>
<StyledContent>
<StyledSharingHeaderContent>
<StyledHeaderContent>
<Heading className="sharing_panel-header" size="medium" truncate>
{t("SharingSettingsTitle")}
</Heading>
@ -631,12 +631,8 @@ class SharingPanelComponent extends React.Component {
onClick={this.onKeyClick}
/>*/}
</div>
</StyledSharingHeaderContent>
<StyledSharingBody
ref={this.scrollRef}
stype="mediumBlack"
style={{ height: `calc(100vh - 157px)` }}
>
</StyledHeaderContent>
<StyledSharingBody ref={this.scrollRef} stype="mediumBlack">
{shareDataItems.map((item, index) => (
<SharingRow
key={index}

View File

@ -29,10 +29,7 @@ const PanelStyles = css`
const StyledAsidePanel = styled.div`
z-index: 310;
.sharing_panel-header {
font-weight: 700;
margin: 14px 0;
}
.modal-dialog-aside {
padding: 0;
transform: translateX(${(props) => (props.visible ? "0" : "500px")});
@ -110,10 +107,6 @@ const StyledContent = styled.div`
background-color: #fff;
padding: 0 16px;
.files-operations-panel {
border-bottom: 1px solid #dee2e6;
}
.header_aside-panel-header {
max-width: 500px;
margin: 0 0 0 16px;
@ -129,6 +122,28 @@ const StyledContent = styled.div`
const StyledHeaderContent = styled.div`
display: flex;
align-items: center;
.sharing_panel-icons-container {
display: flex;
margin-left: auto;
.sharing_panel-drop-down-wrapper {
position: relative;
.sharing_panel-drop-down {
padding: 4px 0;
}
.sharing_panel-plus-icon {
//margin-right: 12px;
}
}
}
.files-operations-header,
.sharing_panel-header {
font-weight: 700;
margin: 14px 0;
}
`;
const StyledBody = styled.div`
@ -212,31 +227,10 @@ const StyledBody = styled.div`
}
`;
const StyledSharingHeaderContent = styled.div`
display: flex;
align-items: center;
border-bottom: 1px solid #dee2e6;
.sharing_panel-icons-container {
display: flex;
margin-left: auto;
.sharing_panel-drop-down-wrapper {
position: relative;
.sharing_panel-drop-down {
padding: 4px 0;
}
.sharing_panel-plus-icon {
//margin-right: 12px;
}
}
}
`;
const StyledSharingBody = styled(Scrollbar)`
position: relative;
padding: 16px 0;
height: calc(100vh - 157px) !important;
.row_content {
overflow: visible;
@ -366,7 +360,6 @@ export {
StyledContent,
StyledHeaderContent,
StyledBody,
StyledSharingHeaderContent,
StyledSharingBody,
StyledFooter,
};

View File

@ -392,7 +392,10 @@ class SectionBodyContent extends React.PureComponent {
<>
<Consumer>
{(context) => (
<RowContainer className="people-row" useReactWindow={false}>
<RowContainer
className="people-row-container"
useReactWindow={false}
>
{peopleList.map((man) => {
const {
checked,

View File

@ -1,6 +1,6 @@
{
"name": "asc-web-common",
"version": "1.0.281",
"version": "1.0.282",
"description": "Ascensio System SIA common components and solutions library",
"license": "AGPL-3.0",
"files": [

View File

@ -26,6 +26,11 @@ const commonStyles = css`
flex-direction: column;
min-height: 100%;
}
.people-row-container,
.files-row-container {
margin-top: -22px;
}
}
`;

View File

@ -1,6 +1,6 @@
{
"name": "asc-web-components",
"version": "1.0.488",
"version": "1.0.489",
"description": "Ascensio System SIA component library",
"license": "AGPL-3.0",
"main": "dist/asc-web-components.js",

View File

@ -15,7 +15,6 @@ const StyledRowContainer = styled.div`
: "100%"
: "auto"};
position: relative;
margin-top:-18px;
`;
class RowContainer extends React.PureComponent {