Web: Files: rename download panel
This commit is contained in:
parent
565bf9949e
commit
544adbbf0b
@ -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)),
|
||||
};
|
||||
};
|
||||
|
||||
|
@ -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),
|
||||
};
|
||||
};
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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)}
|
@ -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));
|
@ -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,
|
||||
};
|
||||
|
@ -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,
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -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, {
|
||||
|
@ -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) => {
|
||||
|
Loading…
Reference in New Issue
Block a user