Web: Files: rename download panel

This commit is contained in:
Viktor Fomin 2021-01-19 15:26:52 +03:00
parent 565bf9949e
commit 544adbbf0b
12 changed files with 56 additions and 58 deletions

View File

@ -24,7 +24,7 @@ import {
setFirstLoad,
startUpload,
setSelections,
setDownloadPanelVisible,
setUploadPanelVisible,
} from "../../../store/files/actions";
import {
getConvertDialogVisible,
@ -38,7 +38,7 @@ import {
getIsLoading,
getDragging,
getSharePanelVisible,
getDownloadPanelVisible,
getUploadPanelVisible,
getFirstLoad,
isSecondaryProgressFinished,
getSelectionLength,
@ -47,7 +47,7 @@ import {
} from "../../../store/files/selectors";
import { ConvertDialog } from "../../dialogs";
import { SharingPanel, DownloadPanel, ChangeOwnerPanel } from "../../panels";
import { SharingPanel, UploadPanel, ChangeOwnerPanel } from "../../panels";
import { createI18N } from "../../../helpers/i18n";
import { getFilterByLocation } from "../../../helpers/converters";
const i18n = createI18N({
@ -198,8 +198,8 @@ class PureHome extends React.Component {
}
};
showDownloadPanel = () => {
this.props.setDownloadPanelVisible(!this.props.downloadPanelVisible);
showUploadPanel = () => {
this.props.setUploadPanelVisible(!this.props.uploadPanelVisible);
};
componentDidUpdate(prevProps) {
const {
@ -240,7 +240,7 @@ class PureHome extends React.Component {
fileActionId,
firstLoad,
showOwnerChangePanel,
downloadPanelVisible,
uploadPanelVisible,
} = this.props;
return (
@ -252,7 +252,7 @@ class PureHome extends React.Component {
{showOwnerChangePanel && <ChangeOwnerPanel />}
{sharingPanelVisible && <SharingPanel />}
{downloadPanelVisible && <DownloadPanel />}
{uploadPanelVisible && <UploadPanel />}
<PageLayout
withBodyScroll
withBodyAutoFocus={!isMobile}
@ -275,8 +275,8 @@ class PureHome extends React.Component {
secondaryProgressData.visible
}
isLoaded={!firstLoad}
downloadPanelVisible={downloadPanelVisible}
onOpenDownloadPanel={this.showDownloadPanel}
uploadPanelVisible={uploadPanelVisible}
onOpenUploadPanel={this.showUploadPanel}
>
<PageLayout.ArticleHeader>
<ArticleHeaderContent />
@ -350,7 +350,7 @@ function mapStateToProps(state) {
selectionLength: getSelectionLength(state),
selectionTitle: getSelectionTitle(state),
showOwnerChangePanel: getShowOwnerChangePanel(state),
downloadPanelVisible: getDownloadPanelVisible(state),
uploadPanelVisible: getUploadPanelVisible(state),
};
}
@ -363,8 +363,8 @@ const mapDispatchToProps = (dispatch) => {
setFirstLoad: (firstLoad) => dispatch(setFirstLoad(firstLoad)),
fetchFiles: (folderId, filter) => dispatch(fetchFiles(folderId, filter)),
setSelections: (items) => dispatch(setSelections(items)),
setDownloadPanelVisible: (downloadPanelVisible) =>
dispatch(setDownloadPanelVisible(downloadPanelVisible)),
setUploadPanelVisible: (uploadPanelVisible) =>
dispatch(setUploadPanelVisible(uploadPanelVisible)),
};
};

View File

@ -32,7 +32,7 @@ import {
getFiles,
getFolders,
getIsPrivacyFolder,
getDownloadPanelVisible,
getUploadPanelVisible,
} from "../../../store/files/selectors";
import {
StyledAsidePanel,
@ -416,7 +416,7 @@ class SharingPanelComponent extends React.Component {
groupsCaption,
canShareOwnerChange,
isLoading,
downloadPanelVisible,
uploadPanelVisible,
} = this.props;
const {
showActionPanel,
@ -449,7 +449,7 @@ class SharingPanelComponent extends React.Component {
<Aside className="header_aside-panel" visible={visible}>
<StyledContent isDisabled={isLoading}>
<StyledHeaderContent>
{downloadPanelVisible && (
{uploadPanelVisible && (
<IconButton
size="16"
iconName="ArrowPathIcon"
@ -623,7 +623,7 @@ const mapStateToProps = (state) => {
files: getFiles(state),
folders: getFolders(state),
settings: getSettings(state),
downloadPanelVisible: getDownloadPanelVisible(state),
uploadPanelVisible: getUploadPanelVisible(state),
};
};

View File

@ -42,7 +42,7 @@ const StyledAsidePanel = styled.div`
margin: 14px 0;
padding-right: 10px;
}
.download_panel-header {
.upload_panel-header {
font-weight: 700;
padding: 19px auto 19px 17px;
}
@ -199,12 +199,12 @@ const StyledHeaderContent = styled.div`
}
}
.download_panel-icons-container {
.upload_panel-icons-container {
display: flex;
margin-left: auto;
.download_panel-vertical-dots-icon {
.upload_panel-vertical-dots-icon {
}
.download_panel-remove-icon {
.upload_panel-remove-icon {
padding-right: 8px;
}
}

View File

@ -22,7 +22,7 @@ const StyledFileRow = styled(Row)`
box-sizing: border-box;
font-weight: 600;
.download_panel-icon {
.upload_panel-icon {
margin-left: auto;
line-height: 24px;
display: flex;
@ -185,7 +185,7 @@ const FileRow = (props) => {
{item.fileId ? (
<IconButton
iconName="CatalogSharedIcon"
className="download_panel-icon"
className="upload_panel-icon"
color={color}
isClickable={true}
onClick={() =>
@ -193,7 +193,7 @@ const FileRow = (props) => {
}
/>
) : item.error || (!item.fileId && uploaded) ? (
<div className="download_panel-icon">
<div className="upload_panel-icon">
{" "}
<Icons.LoadErrorIcon
size="medium"
@ -213,7 +213,7 @@ const FileRow = (props) => {
/>
</div>
) : (
<div className="download_panel-icon">
<div className="upload_panel-icon">
<LoadingButton
percent={currentFileUploadProgress}
onClick={() => cancelCurrentUpload(index)}

View File

@ -11,7 +11,7 @@ import { withRouter } from "react-router";
import { withTranslation } from "react-i18next";
import { utils as commonUtils, store } from "asc-web-common";
import {
setDownloadPanelVisible,
setUploadPanelVisible,
setSharingPanelVisible,
cancelUpload,
cancelCurrentUpload,
@ -20,7 +20,7 @@ import {
setSelected,
} from "../../../store/files/actions";
import {
getDownloadPanelVisible,
getUploadPanelVisible,
getUploadDataFiles,
getArchiveFormats,
getImageFormats,
@ -40,8 +40,8 @@ import {
import FileRow from "./FileRow";
import { createI18N } from "../../../helpers/i18n";
const i18n = createI18N({
page: "DownloadPanel",
localesPath: "panels/DownloadPanel",
page: "UploadPanel",
localesPath: "panels/UploadPanel",
});
const { changeLanguage } = commonUtils;
@ -49,7 +49,7 @@ const { getCurrentUserId } = store.auth.selectors;
const DownloadBodyStyle = { height: `calc(100vh - 156px)` };
class DownloadPanelComponent extends React.Component {
class UploadPanelComponent extends React.Component {
constructor(props) {
super(props);
@ -63,7 +63,7 @@ class DownloadPanelComponent extends React.Component {
}
onClose = () => {
this.props.setDownloadPanelVisible(!this.props.downloadPanelVisible);
this.props.setUploadPanelVisible(!this.props.uploadPanelVisible);
};
componentDidMount() {
document.addEventListener("keyup", this.onKeyPress);
@ -90,7 +90,7 @@ class DownloadPanelComponent extends React.Component {
}
};
clearDownloadPanel = () => {
clearUploadPanel = () => {
this.setState({
uploadData: [],
uploaded: false,
@ -126,7 +126,7 @@ class DownloadPanelComponent extends React.Component {
render() {
const {
t,
downloadPanelVisible,
uploadPanelVisible,
sharingPanelVisible,
uploadDataFiles,
archiveFormats,
@ -139,7 +139,7 @@ class DownloadPanelComponent extends React.Component {
const { uploadData } = this.state;
const uploaded = uploadDataFiles.length === 0;
const visible = downloadPanelVisible;
const visible = uploadPanelVisible;
const zIndex = 310;
return (
<StyledAsidePanel visible={visible}>
@ -152,18 +152,18 @@ class DownloadPanelComponent extends React.Component {
<Aside className="header_aside-panel" visible={visible}>
<StyledContent>
<StyledHeaderContent>
<Heading className="download_panel-header" size="medium" truncate>
<Heading className="upload_panel-header" size="medium" truncate>
{t("Uploads")}
</Heading>
<div className="download_panel-icons-container">
<div className="download_panel-remove-icon">
<div className="upload_panel-icons-container">
<div className="upload_panel-remove-icon">
{uploaded ? (
<IconButton
size="20"
iconName="ClearActiveIcon"
color="#A3A9AE"
isClickable={true}
onClick={this.clearDownloadPanel}
onClick={this.clearUploadPanel}
/>
) : (
<IconButton
@ -175,7 +175,7 @@ class DownloadPanelComponent extends React.Component {
/>
)}
</div>
{/*<div className="download_panel-vertical-dots-icon">
{/*<div className="upload_panel-vertical-dots-icon">
<IconButton
size="20"
iconName="VerticalDotsIcon"
@ -211,18 +211,16 @@ class DownloadPanelComponent extends React.Component {
}
}
const DownloadPanelContainerTranslated = withTranslation()(
DownloadPanelComponent
);
const UploadPanelContainerTranslated = withTranslation()(UploadPanelComponent);
const DownloadPanel = (props) => (
<DownloadPanelContainerTranslated i18n={i18n} {...props} />
const UploadPanel = (props) => (
<UploadPanelContainerTranslated i18n={i18n} {...props} />
);
const mapStateToProps = (state) => {
return {
isMyId: getCurrentUserId(state),
downloadPanelVisible: getDownloadPanelVisible(state),
uploadPanelVisible: getUploadPanelVisible(state),
uploadDataFiles: getUploadDataFiles(state),
archiveFormats: getArchiveFormats(state),
imageFormats: getImageFormats(state),
@ -235,11 +233,11 @@ const mapStateToProps = (state) => {
};
export default connect(mapStateToProps, {
setDownloadPanelVisible,
setUploadPanelVisible,
setSharingPanelVisible,
cancelUpload,
cancelCurrentUpload,
setMediaViewerData,
setSelection,
setSelected,
})(withRouter(DownloadPanel));
})(withRouter(UploadPanel));

View File

@ -6,7 +6,7 @@ import OperationsPanel from "./OperationsPanel";
import NewFilesPanel from "./NewFilesPanel";
import VersionHistoryPanel from "./VersionHistoryPanel";
import ChangeOwnerPanel from "./ChangeOwnerPanel";
import DownloadPanel from "./DownloadPanel";
import UploadPanel from "./UploadPanel";
export {
SharingPanel,
@ -17,5 +17,5 @@ export {
NewFilesPanel,
VersionHistoryPanel,
ChangeOwnerPanel,
DownloadPanel,
UploadPanel,
};

View File

@ -61,7 +61,7 @@ export const SET_SECONDARY_PROGRESS_BAR_DATA =
export const SET_VIEW_AS = "SET_VIEW_AS";
export const SET_CONVERT_DIALOG_VISIBLE = "SET_CONVERT_DIALOG_VISIBLE";
export const SET_SHARING_PANEL_VISIBLE = "SET_SHARING_PANEL_VISIBLE";
export const SET_DOWNLOAD_PANEL_VISIBLE = "SET_DOWNLOAD_PANEL_VISIBLE";
export const SET_UPLOAD_PANEL_VISIBLE = "SET_UPLOAD_PANEL_VISIBLE";
export const SET_UPDATE_TREE = "SET_UPDATE_TREE";
export const SET_NEW_ROW_ITEMS = "SET_NEW_ROW_ITEMS";
export const SET_SELECTED_NODE = "SET_SELECTED_NODE";
@ -229,10 +229,10 @@ export function setSharingPanelVisible(sharingPanelVisible) {
};
}
export function setDownloadPanelVisible(downloadPanelVisible) {
export function setUploadPanelVisible(uploadPanelVisible) {
return {
type: SET_DOWNLOAD_PANEL_VISIBLE,
downloadPanelVisible,
type: SET_UPLOAD_PANEL_VISIBLE,
uploadPanelVisible,
};
}

View File

@ -20,7 +20,7 @@ import {
SET_SECONDARY_PROGRESS_BAR_DATA,
SET_CONVERT_DIALOG_VISIBLE,
SET_SHARING_PANEL_VISIBLE,
SET_DOWNLOAD_PANEL_VISIBLE,
SET_UPLOAD_PANEL_VISIBLE,
SET_UPDATE_TREE,
SET_NEW_ROW_ITEMS,
SET_SELECTED_NODE,
@ -76,7 +76,7 @@ const initialState = {
},
convertDialogVisible: false,
sharingPanelVisible: false,
downloadPanelVisible: false,
uploadPanelVisible: false,
updateTree: false,
newRowItems: [],
selectedTreeNode: [],
@ -511,9 +511,9 @@ const filesReducer = (state = initialState, action) => {
return Object.assign({}, state, {
sharingPanelVisible: action.sharingPanelVisible,
});
case SET_DOWNLOAD_PANEL_VISIBLE:
case SET_UPLOAD_PANEL_VISIBLE:
return Object.assign({}, state, {
downloadPanelVisible: action.downloadPanelVisible,
uploadPanelVisible: action.uploadPanelVisible,
});
case SET_UPDATE_TREE:
return Object.assign({}, state, {

View File

@ -1593,8 +1593,8 @@ export const isCanShare = createSelector(
}
);
export const getDownloadPanelVisible = (state) => {
return state.files.downloadPanelVisible;
export const getUploadPanelVisible = (state) => {
return state.files.uploadPanelVisible;
};
export const getUploadDataFiles = (state) => {