Skip to content

Commit dc10e9b

Browse files
negative0negative0
committed
Add panes in explorer.
1 parent 972fe14 commit dc10e9b

File tree

7 files changed

+204
-191
lines changed

7 files changed

+204
-191
lines changed

‎src/actions/explorerActions.js‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -121,9 +121,9 @@ export const changeNumCols = (numCols, mode) => (dispatch) => {
121121
if (!numCols || numCols < 0) throw new Error(`Invalid number of cols:${numCols}`);
122122

123123

124-
for (let i = 0; i < numCols; i++) {
125-
dispatch(createPath(i.toString()))
126-
}
124+
// for (let i = 0; i < numCols; i++) {
125+
// dispatch(createPath(i.toString()))
126+
// }
127127

128128
dispatch({
129129
type: CHANGE_LAYOUT_COLS,
@@ -135,16 +135,18 @@ export const changeNumCols = (numCols, mode) => (dispatch) => {
135135

136136
/**
137137
* Adds a new remote container.
138+
* @param paneID {int} pane ID
138139
* @returns {Function}
139140
*/
140-
export const addRemoteContainer = () => (dispatch) => {
141+
export const addRemoteContainer = (paneID) => (dispatch) => {
141142
const uniqueID = makeUniqueID(3);
142143
dispatch(createPath(uniqueID));
143-
dispatch(changeActiveRemoteContainer(uniqueID));
144+
dispatch(changeActiveRemoteContainer(uniqueID, paneID));
144145
dispatch({
145146
type: ADD_LAYOUT_CONTAINER,
146147
payload: {
147-
containerID: uniqueID
148+
containerID: uniqueID,
149+
paneID
148150
}
149151
})
150152
};
@@ -153,29 +155,32 @@ export const addRemoteContainer = () => (dispatch) => {
153155
/**
154156
* Remove a new remote container.
155157
* @param containerID {string} Container ID to remove
158+
* @param paneID {int} pane ID
156159
* @returns {Function}
157160
*/
158-
export const removeRemoteContainer = (containerID) => (dispatch) => {
161+
export const removeRemoteContainer = (containerID, paneID) => (dispatch) => {
159162
// dispatch(removePath(containerID));
160163
// console.log("Removing : " + containerID);
161164
dispatch({
162165
type: REMOVE_LAYOUT_CONTAINER,
163166
payload: {
164-
containerID
167+
containerID, paneID
165168
}
166169
})
167170
};
168171

169172
/**
170173
* Change active remote container.
171174
* @param containerID {string} Container ID to remove
175+
* @param paneID {int} pane ID
172176
* @returns {Function}
173177
*/
174-
export const changeActiveRemoteContainer = (containerID) => (dispatch) => {
178+
export const changeActiveRemoteContainer = (containerID, paneID) => (dispatch) => {
175179
dispatch({
176180
type: CHANGE_ACTIVE_REMOTE_CONTAINER,
177181
payload: {
178-
containerID
182+
containerID,
183+
paneID
179184
}
180185
})
181186
};

‎src/reducers/explorerReducer.js‎

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import {
22
ADD_LAYOUT_CONTAINER,
33
CHANGE_ACTIVE_REMOTE_CONTAINER,
44
CHANGE_DISTRACTION_FREE_MODE,
5+
CHANGE_LAYOUT_COLS,
56
GET_CONFIG_FOR_REMOTE,
67
GET_FILES_LIST,
78
GET_REMOTE_LIST,
@@ -17,8 +18,9 @@ const initialState = {
1718
hasError: false,
1819
numContainers: 0,
1920
containers: [],
20-
activeRemoteContainerID: "",
21-
distractionFreeMode: false
21+
activeRemoteContainerID: {},
22+
distractionFreeMode: false,
23+
numCols: 1
2224
};
2325
/**
2426
* Specifies the explorer specific reducers for the redux actions.
@@ -80,22 +82,36 @@ export default function (state = initialState, action) {
8082
break;
8183

8284
case ADD_LAYOUT_CONTAINER:
83-
state.containers.push(action.payload.containerID);
85+
state.containers.push({ID: action.payload.containerID, paneID: action.payload.paneID});
8486
state.numContainers = state.containers.length;
85-
state.activeRemoteContainerID = action.payload.containerID;
87+
state.activeRemoteContainerID = {
88+
...state.activeRemoteContainerID,
89+
[action.payload.paneID]: action.payload.containerID
90+
};
8691
return {...state};
8792
case REMOVE_LAYOUT_CONTAINER:
8893
// Remove the specified containerID from containers
89-
state.containers = state.containers.filter(item => item !== action.payload.containerID);
94+
state.containers = state.containers.filter(item => item.ID !== action.payload.containerID);
9095
state.numContainers = state.containers.length;
91-
const lastItem = state.containers.slice(-1).pop();
92-
console.log("Last Item:" + lastItem);
93-
state.activeRemoteContainerID = lastItem ? lastItem : "";
96+
const lastItem = state.containers.filter(item => item.paneID === action.payload.paneID).slice(-1).pop();
97+
state.activeRemoteContainerID = {
98+
...state.activeRemoteContainerID,
99+
[action.payload.paneID]: (lastItem ? lastItem.ID : undefined)
100+
};
101+
102+
// state.activeRemoteContainerID = lastItem ? lastItem : "";
94103
return {...state};
95104
case CHANGE_ACTIVE_REMOTE_CONTAINER:
96-
state.activeRemoteContainerID = action.payload.containerID;
105+
state.activeRemoteContainerID = {
106+
...state.activeRemoteContainerID,
107+
[action.payload.paneID]: action.payload.containerID
108+
};
97109
return {...state};
98-
110+
case CHANGE_LAYOUT_COLS:
111+
return {
112+
...state,
113+
numCols: action.payload.numCols
114+
};
99115
case CHANGE_DISTRACTION_FREE_MODE:
100116
return {
101117
...state,

‎src/scss/_custom.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -205,6 +205,7 @@ body{
205205
border-right: 1px solid #c8ced3;
206206
background-color: #ffffff;
207207
color: #000000;
208+
overflow-x: hidden;
208209

209210
i {
210211
color: #000;

‎src/views/Base/FileOperations/FileOperations.js‎

Lines changed: 52 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,34 @@
11
import React from 'react';
22
import {
3-
Button,
4-
ButtonDropdown,
5-
ButtonGroup,
6-
Col,
7-
DropdownItem,
8-
DropdownMenu,
9-
DropdownToggle,
10-
Form,
11-
FormGroup,
12-
Input,
13-
Modal,
14-
ModalBody,
15-
ModalFooter,
16-
ModalHeader,
17-
Row,
18-
Spinner,
19-
UncontrolledTooltip
3+
Button,
4+
ButtonDropdown,
5+
ButtonGroup,
6+
Col,
7+
DropdownItem,
8+
DropdownMenu,
9+
DropdownToggle,
10+
Form,
11+
FormGroup,
12+
Input,
13+
Modal,
14+
ModalBody,
15+
ModalFooter,
16+
ModalHeader,
17+
Row,
18+
Spinner,
19+
UncontrolledTooltip
2020
} from "reactstrap";
2121
import NewFolder from "../NewFolder/NewFolder";
2222
import PropTypes from "prop-types";
2323
import {connect} from "react-redux";
2424
import {
25-
changeGridMode,
26-
changeVisibilityFilter,
27-
getFilesForContainerID,
28-
navigateBack,
29-
navigateFwd,
30-
setLoadImages,
31-
setSearchQuery
25+
changeGridMode,
26+
changeVisibilityFilter,
27+
getFilesForContainerID,
28+
navigateBack,
29+
navigateFwd,
30+
setLoadImages,
31+
setSearchQuery
3232
} from "../../../actions/explorerStateActions";
3333
import {visibilityFilteringOptions} from "../../../utils/Constants";
3434
import {getAbout} from "../../../actions/providerStatusActions";
@@ -161,11 +161,10 @@ class FileOperations extends React.Component {
161161
handleSearchOpen = () =>{
162162
const {containerID} = this.props;
163163
this.setState((prevState) => {
164-
if(prevState.searchOpen)
165-
{
166-
// Clear Search Query if the search is about to close
167-
this.props.setSearchQuery(containerID, "");
168-
}
164+
if (prevState.searchOpen) {
165+
// Clear Search Query if the search is about to close
166+
this.props.setSearchQuery(containerID, "");
167+
}
169168

170169
return {searchOpen: !prevState.searchOpen}
171170
}
@@ -180,34 +179,33 @@ class FileOperations extends React.Component {
180179
const {remoteName, remotePath} = currentPath;
181180

182181
return (
183-
<nav aria-label="breadcrumb" className="row mt-3 mb-1">
184-
185-
186-
<Col sm={4} md={2} lg={1}>
187-
<Button color="light" className={"mr-1 btn-explorer-action"}
188-
onClick={() => navigateBack(containerID)}><i
189-
className={"fa fa-lg fa-arrow-left"}/></Button>
190-
<Button color="light" className={"mr-1 btn-explorer-action"}
191-
onClick={() => navigateFwd(containerID)}><i
192-
className={"fa fa-lg fa-arrow-right"}/></Button>
193-
</Col>
194-
<Col sm={8} md={searchOpen ? 6 : 6} lg={searchOpen ? 7 : 9}>
195-
<ol className="breadcrumb float-center" style={{padding: "6px 12px"}}>
196-
<li className="breadcrumb-item active">{remoteName}:/</li>
197-
{remotePath}
198-
</ol>
199-
</Col>
200-
<Col sm={12} md={searchOpen ? 4 : 4} lg={searchOpen ? 4 : 2}>
182+
<nav aria-label="breadcrumb" className="row mt-3 mb-1">
183+
<Col sm={4} md={2} lg={1} className="pl-0">
184+
<Button color="light" className={"mr-1 btn-explorer-action"}
185+
onClick={() => navigateBack(containerID)}><i
186+
className={"fa fa-lg fa-arrow-left"}/></Button>
187+
<Button color="light" className={"mr-1 btn-explorer-action"}
188+
onClick={() => navigateFwd(containerID)}><i
189+
className={"fa fa-lg fa-arrow-right"}/></Button>
190+
</Col>
191+
<Col sm={8} md={searchOpen ? 6 : 6} lg={searchOpen ? 7 : 9}>
192+
<ol className="breadcrumb float-center" style={{padding: "6px 12px"}}>
193+
<li className="breadcrumb-item active">{remoteName}:/</li>
194+
{remotePath}
195+
</ol>
196+
</Col>
197+
<Col sm={12} md={searchOpen ? 4 : 4} lg={searchOpen ? 4 : 2} className="pr-0">
201198
<div className="float-right form-inline">
202199

203200
<ButtonGroup>
204201
<Form inline>
205202
<FormGroup>
206-
{searchOpen && <Input type="text" placeholder="Search" value={searchQuery} className="animate-fade-in"
207-
onChange={this.changeSearch}/>
203+
{searchOpen && <Input type="text" placeholder="Search" value={searchQuery}
204+
className="animate-fade-in"
205+
onChange={this.changeSearch}/>
208206
}
209207
<Button className="mr-1 btn-explorer-action" onClick={this.handleSearchOpen}>
210-
<i className={"fa fa-lg " + (searchOpen ? "fa-close" : "fa-search")} />
208+
<i className={"fa fa-lg " + (searchOpen ? "fa-close" : "fa-search")}/>
211209
</Button>
212210
</FormGroup>
213211
</Form>
@@ -237,17 +235,17 @@ class FileOperations extends React.Component {
237235
</ButtonDropdown>
238236

239237
<Button className="btn-explorer-action" id="ListViewButton"
240-
onClick={this.handleChangeGridMode}>
241-
<i className={"fa fa-lg " + (gridMode === "card" ? "fa-list": "fa-th-large")}/>
238+
onClick={this.handleChangeGridMode}>
239+
<i className={"fa fa-lg " + (gridMode === "card" ? "fa-list" : "fa-th-large")}/>
242240
</Button>
243241
<UncontrolledTooltip placement="right" target="ListViewButton">
244-
{(gridMode === "card" ? "List View": "Card View")}
242+
{(gridMode === "card" ? "List View" : "Card View")}
245243
</UncontrolledTooltip>
246244
</ButtonGroup>
247245

248246

249247
<NewFolder containerID={containerID} isVisible={newFolderModalIsVisible}
250-
closeModal={this.closeNewFolderModal}/>
248+
closeModal={this.closeNewFolderModal}/>
251249

252250
<Modal isOpen={isAboutModalOpen} toggle={this.toggleAboutModal}>
253251
<ModalHeader>

0 commit comments

Comments
 (0)