Details
diff --git a/FileServer/SPA/src/React/Controls/FileExplorer/ExplorerActionsControl.jsx b/FileServer/SPA/src/React/Controls/FileExplorer/ExplorerActionsControl.jsx
index b43a9bd..34a5450 100644
--- a/FileServer/SPA/src/React/Controls/FileExplorer/ExplorerActionsControl.jsx
+++ b/FileServer/SPA/src/React/Controls/FileExplorer/ExplorerActionsControl.jsx
@@ -1,7 +1,6 @@
import React from 'react';
-import { Modal, Button } from 'react-bootstrap'
-
+import { Modal, Button, InputGroup, FormControl, Row, Col, ButtonToolbar, ButtonGroup } from 'react-bootstrap'
import Notification from '../../../Tools/Notification'
import FileExplorerServices from '../../../Services/FileExplorerServices'
@@ -131,34 +130,44 @@ export default class ExplorerActionsControl extends BaseControl {
this.setState({ MoveWindowsShow: false });
}
+
render() {
return (
+
<div>
<p>ExplorerControlPanel</p>
- <p>
- <input ref="DirectoryName" />
- <button onClick={this.OnCreateDirectoryClick}>CreateDirectory</button>
- </p>
-
- <table>
- <thead>
- <tr>
- <th><button onClick={this.OnDownloadClick}>Скачать</button></th>
- <th><button onClick={this.OnDeleteClick}>Удалить</button></th>
- <th><button onClick={this.OnMoveClick}>Переместить</button></th>
- </tr>
- </thead>
- </table>
+ <Row>
+ <InputGroup className="mb-3">
+ <FormControl ref="DirectoryName" placeholder="Введите название"/>
+ <InputGroup.Append>
+ <Button onClick={this.OnCreateDirectoryClick} variant="secondary">Создать директорию</Button>
+ </InputGroup.Append>
+ </InputGroup>
+ </Row>
+ <Row variant="no-gutters">
+ <ButtonToolbar className="mb-3">
+ <ButtonGroup className="mr-2">
+ <Button onClick={this.OnDownloadClick} variant="success">Скачать</Button>
+ <Button onClick={this.OnMoveClick} variant="warning">Переместить</Button>
+ <Button onClick={this.OnDeleteClick} variant="danger">Удалить</Button>
+ </ButtonGroup>
+ <InputGroup>
+ <FormControl placeholder="Поиск по названию" />
+ <InputGroup.Append>
+ <Button variant="secondary">Найти</Button>
+ </InputGroup.Append>
+ </InputGroup>
+ </ButtonToolbar>
+ </Row>
<Modal ref="Modal"
show={this.state.MoveWindowsShow}
onHide={this.OnMoveWindowCloseClick}
size="lg"
- aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header closeButton>
diff --git a/FileServer/SPA/src/React/Controls/FileExplorer/FileExplorerControl.jsx b/FileServer/SPA/src/React/Controls/FileExplorer/FileExplorerControl.jsx
index 5f9c566..0ce4806 100644
--- a/FileServer/SPA/src/React/Controls/FileExplorer/FileExplorerControl.jsx
+++ b/FileServer/SPA/src/React/Controls/FileExplorer/FileExplorerControl.jsx
@@ -1,6 +1,7 @@
import React from 'react';
import { Link } from 'react-router-dom';
+import { Button, ButtonGroup, Breadcrumb, Table, Badge } from 'react-bootstrap';
import Configuration from '../../../Tools/Configuration'
import ArrayCompare from '../../../Tools/Sort'
@@ -117,6 +118,13 @@ export default class FileExplorerControl extends BaseControl {
// map(e => e.GetDataID());
//}
+ OnBeadcrumbClick(sender) {
+ this.Log("OnBeadcrumbClick : ");
+ // надо установить у sender'a active режим (active = true)
+ // перед этим удалить у прежнего элемента active (active = false)
+ // осуществить "переход" в выбранную директорию
+ }
+
render() {
let data = this.state.data;
@@ -126,6 +134,12 @@ export default class FileExplorerControl extends BaseControl {
return (
<div>
+ <Breadcrumb>
+ <Breadcrumb.Item onClick={this.OnBeadcrumbClick}>Home</Breadcrumb.Item>
+ <Breadcrumb.Item onClick={this.OnBeadcrumbClick}>Library</Breadcrumb.Item>
+ <Breadcrumb.Item active onClick={this.OnBeadcrumbClick}>Data</Breadcrumb.Item>
+ </Breadcrumb>
+
{this.GetDirectory().ID != Configuration.RooDirectoryID
?
<p>
@@ -140,36 +154,37 @@ export default class FileExplorerControl extends BaseControl {
<p>{data.LogicPath}</p>
- <p>
- <button onClick={this.LoadDirectory}>
- Update
- </button>
- <button onClick={this.OnScanDirClick}>
- Rescan
- </button>
- </p>
-
-
- <table>
-
+ <ButtonGroup style={{ marginBottom: '1rem' }}>
+ <Button onClick={this.LoadDirectory} variant="secondary">
+ <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Synchronized.svg/1094px-Synchronized.svg.png' width="20" height="20" /> Обновить
+ </Button>
+ <Button onClick={this.OnScanDirClick} variant="secondary">
+ <img src='https://icts.uiowa.edu/diversity/sites/icts.uiowa.edu/files/wysiwyg_uploads/communication%20%26%20teamwork.png' width="20" height="20" /> Сканировать
+ </Button>
+ </ButtonGroup>
+ <br />
+ <Table striped bordered hover variant="dark">
<thead>
<tr>
<th>
- <button property="ID" onClick={this.OnSortClick}>ID</button>
+ <Button property="ID" onClick={this.OnSortClick} variant="outline-light">ID</Button>
</th>
{
this.state.ShoSelectColumn
- ? <th>Select</th>
+ ? <th>
+ <Button disabled variant="outline-light">Select</Button>
+
+ </th>
: null
}
<th>
- <button property="Name" onClick={this.OnSortClick}>Name</button>
+ <Button property="Name" onClick={this.OnSortClick} variant="outline-light">Name</Button>
</th>
<th>
- <button property="Type" onClick={this.OnSortClick}>Type</button>
+ <Button property="Type" onClick={this.OnSortClick} variant="outline-light">Type</Button>
</th>
<th>
- <button property="Size" onClick={this.OnSortClick}>Size</button>
+ <Button property="Size" onClick={this.OnSortClick} variant="outline-light">Size</Button>
</th>
</tr>
</thead>
@@ -182,7 +197,7 @@ export default class FileExplorerControl extends BaseControl {
else this.ChildRows.splice(i, 1);
}}
ParentComponent={this}
- CurrentDirectoryName={this.props.CurrentDirectoryName}
+ CurrentDirectoryName={this.props.CurrentDirectoryName}
key={i}
ShoSelectColumn={this.state.ShoSelectColumn}
@@ -190,9 +205,10 @@ export default class FileExplorerControl extends BaseControl {
/>
];
}.bind(this))
- }
- </tbody>
- </table>
+ }
+ </tbody>
+ </Table>
+
</div>
);
}
diff --git a/FileServer/SPA/src/React/Controls/FileExplorer/FileExplorerRow.jsx b/FileServer/SPA/src/React/Controls/FileExplorer/FileExplorerRow.jsx
index 8e86cc7..680afc2 100644
--- a/FileServer/SPA/src/React/Controls/FileExplorer/FileExplorerRow.jsx
+++ b/FileServer/SPA/src/React/Controls/FileExplorer/FileExplorerRow.jsx
@@ -1,7 +1,7 @@
import React from 'react';
import { Link } from 'react-router-dom';
-import { Button } from 'react-bootstrap'
+import { Button, Form } from 'react-bootstrap'
import BaseControl from '../../BaseControl.jsx'
@@ -65,7 +65,7 @@ export default class FileExplorerRow extends BaseControl {
{state.ShoSelectColumn
?
<td>
- <input ref="Select" type="checkbox" />
+ <Form.Check ref="Select"/>
</td>
: null
}
@@ -75,7 +75,7 @@ export default class FileExplorerRow extends BaseControl {
?
<td>
<Link to={`/?ID=${elem.ID}`}>
- <Button id={elem.ID} onClick={this.OnDirectoryClick} variant="outline-dark">
+ <Button id={elem.ID} onClick={this.OnDirectoryClick} variant="light">
{elem.Name}
</Button>
</Link>
diff --git a/FileServer/SPA/src/React/Controls/FileExplorer/UploaderControl.jsx b/FileServer/SPA/src/React/Controls/FileExplorer/UploaderControl.jsx
index 6da0023..ea9b790 100644
--- a/FileServer/SPA/src/React/Controls/FileExplorer/UploaderControl.jsx
+++ b/FileServer/SPA/src/React/Controls/FileExplorer/UploaderControl.jsx
@@ -1,5 +1,6 @@
import React from 'react';
+import { Button, InputGroup, FormControl, ProgressBar, Card, Table } from 'react-bootstrap'
import Notification from '../../../Tools/Notification'
@@ -66,20 +67,40 @@ export default class UploaderControl extends BaseControl {
render() {
return (
<div>
- <h2>Upload</h2>
- <p>
- <input ref="file" type="file" disabled={!this.state.ButtonUploadEnable} />
- <button disabled={!this.state.ButtonUploadEnable} onClick={this.UploadClick}>Upload</button>
- <button disabled={this.state.ButtonUploadEnable} onClick={this.CancelClick}>Cancel</button>
- </p>
+ <h3>Загрузка файлов</h3>
+
+ <InputGroup>
+ <FormControl ref="file" type="file" disabled={!this.state.ButtonUploadEnable}/>
+ <InputGroup.Append>
+ <Button disabled={!this.state.ButtonUploadEnable} onClick={this.UploadClick} variant="outline-success">Загрузить</Button>
+ <Button disabled={this.state.ButtonUploadEnable} onClick={this.CancelClick} variant="outline-danger">Отмена</Button>
+ </InputGroup.Append>
+ </InputGroup>
{this.state._state == 1
?
<div>
- <p>Прогресс {this.state.progress} %</p>
- <p>Выполняется загрука файла:</p>
- <p>Имя файла: {this.state.FileInfo.name}</p>
- <p>Размеры файла: {this.state.FileInfo.size}</p>
+ <Card>
+ <Card.Body>
+ <Card.Title>Выполняется загрука файлов</Card.Title>
+ <Table bordered size="sm">
+ <thead>
+ <tr>
+ <th>Имя</th>
+ <th>Размер</th>
+ <th>Прогресс</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{this.state.FileInfo.name}</td>
+ <td>{this.state.FileInfo.size}</td>
+ <td><ProgressBar now={this.state.progress} label={`${this.state.progress}%`} /></td>
+ </tr>
+ </tbody>
+ </Table>
+ </Card.Body>
+ </Card>
</div>
: ""
}
diff --git a/FileServer/SPA/src/React/Controls/Layout/Header.jsx b/FileServer/SPA/src/React/Controls/Layout/Header.jsx
index 18ed394..d7d27ef 100644
--- a/FileServer/SPA/src/React/Controls/Layout/Header.jsx
+++ b/FileServer/SPA/src/React/Controls/Layout/Header.jsx
@@ -4,7 +4,6 @@ import { ButtonToolbar, Button } from 'react-bootstrap'
import BaseControl from '../../BaseControl.jsx'
import MenuControl from '../MenuControl.jsx'
-import UserControl from '../User/UserControl.jsx'
export default class Header extends BaseControl {
@@ -31,10 +30,7 @@ export default class Header extends BaseControl {
<button onClick={this.OnRegistersClick}>Registers</button>
- <MenuControl ref="MenuControl" />
- <hr />
- <UserControl ref="UserControl" />
- <hr />
+ <MenuControl ref="MenuControl" />
</div>
);
diff --git a/FileServer/SPA/src/React/Controls/MenuControl.jsx b/FileServer/SPA/src/React/Controls/MenuControl.jsx
index 187ecd4..24352e2 100644
--- a/FileServer/SPA/src/React/Controls/MenuControl.jsx
+++ b/FileServer/SPA/src/React/Controls/MenuControl.jsx
@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
import { Nav, Navbar, NavDropdown, MenuItem, NavItem } from 'react-bootstrap'
import AuthServices from '../../Services/AuthServices'
+import UserControl from '../Controls/User/UserControl.jsx'
import BaseControl from '../BaseControl.jsx'
@@ -34,24 +35,31 @@ export default class MenuControl extends BaseControl {
render() {
return (
- <Navbar>
+ <Navbar bg="dark" variant="dark">
{/* "Link" in brand component since just redirect is needed */}
- <Navbar.Brand>WebFileServer</Navbar.Brand>
+ <Navbar.Brand><img
+ alt=""
+ src="https://resize.yandex.net/imgs_touch?key=0bad711426e8ab708e400c111664d891&url=https%3A%2F%2Fi.ya-webdesign.com%2Fimages%2Ffolder-png-icons-3.png&width=1888&height=1562&typemap=png%3Apng%3B*%3Ajpg&quality=60&use-cache-headers=yes&crop=no&enlarge=no"
+ width="30"
+ height="30"
+ className="d-inline-block align-top"
+ />
+ {' WebFileServer'}</Navbar.Brand>
<Nav>
{/* "NavLink" here since "active" class styling is needed */}
- <Nav.Link as={Link} to='/'>App</Nav.Link>
-
- {this.state.IsAuth
- ?
- <Nav>
- <Nav.Link as={Link} to='/User'>User</Nav.Link>
-
- {this.state.IsAdmin
- ?
- <Nav.Link as={Link} to='/Admin'>Admin</Nav.Link>
- : null}
- </Nav>
- : null}
+ <Nav.Link as={Link} to='/'>Файлы</Nav.Link>
+
+ <NavDropdown title={this.state.IsAuth ? "Личный кабинет" : "Авторизация"}>
+ <UserControl ref="UserControl" />
+ </NavDropdown>
+
+ {this.state.IsAuth && this.state.IsAdmin
+ ?
+ <Nav.Link as={Link} to='/Admin'>Администрирование</Nav.Link>
+ : null
+ }
+
+ }
</Nav>
</Navbar>
);
diff --git a/FileServer/SPA/src/React/Controls/User/UserControl.jsx b/FileServer/SPA/src/React/Controls/User/UserControl.jsx
index d32996a..fcafa53 100644
--- a/FileServer/SPA/src/React/Controls/User/UserControl.jsx
+++ b/FileServer/SPA/src/React/Controls/User/UserControl.jsx
@@ -1,6 +1,7 @@
import React from 'react';
-import { Form } from 'react-bootstrap'
+import { Link } from 'react-router-dom';
+import { Form, Button, Alert } from 'react-bootstrap'
import Notification from '../../../Tools/Notification'
@@ -97,37 +98,35 @@ export default class UserControl extends BaseControl {
render() {
+ let state = this.state;
+
return (
<div>
{this.state.IsAuth
?
- <div>
- <p>Вы авторизованы. Пользователь: {this.state.CurrentUser.Login}.</p>
+ <div>
+ <Alert variant="success" style={{ margin: 0, marginBottom: 10, padding: 0 }}>Пользователь: {this.state.CurrentUser.Login}.</Alert>
{this.state.CurrentUser.IsAdmin
- ? <p>Вы администратор</p>
+ ? <Alert variant="success" style={{ margin: 0, marginBottom: 10, padding: 0 }}>Вы администратор.</Alert>
: null
}
-
- <button onClick={this.LogoutClick}>Logout</button>
+ <Button href="/User" variant="outline-secondary" style={{ marginBottom: 10 }}>Изменить пароль</Button>
+ <Button onClick={this.LogoutClick} variant="danger">Выход</Button>
</div>
:
<div>
- <p>Вы не авторизованы. Вход:</p>
+ <Alert variant="warning"><b>Вы не авторизованы.</b></Alert>
+ {/*{state.AuthResult != "" ? <p>{state.AuthResult}</p> : ""}*/}
{/*<Form.Label>Email address</Form.Label>*/}
- <Form.Control ref="Login" type="text" placeholder="Enter login" />
- <Form.Text className="text-muted">
- We'll never share your login with anyone else.
- </Form.Text>
- <br />
+ <Form.Control ref="Login" type="text" placeholder="Enter login" style={{ marginBottom: 10}}/>
+
{/*<Form.Label>Password</Form.Label>*/}
- <Form.Control ref="Password" type="password" placeholder="Password" />
- <br />
- <button onClick={this.AuthClick}>Auth</button>
+ <Form.Control ref="Password" type="password" placeholder="Password" style={{ marginBottom: 10 }}/>
+ <Button onClick={this.AuthClick} variant="success">Авторизация</Button>
</div>
}
</div>
);
}
}
-
diff --git a/FileServer/SPA/src/React/Pages/FileExplorerPage.jsx b/FileServer/SPA/src/React/Pages/FileExplorerPage.jsx
index 9504889..1141461 100644
--- a/FileServer/SPA/src/React/Pages/FileExplorerPage.jsx
+++ b/FileServer/SPA/src/React/Pages/FileExplorerPage.jsx
@@ -1,5 +1,6 @@
import React from 'react';
+import { Row, Col } from 'react-bootstrap'
import Configuration from '../../Tools/Configuration'
@@ -48,14 +49,18 @@ export default class FileExplorerPage extends BaseControl {
{(this.GlobalState.MainExplorer.ID != Configuration.RooDirectoryID)
?
<div>
- <ExplorerActionsControl ref="ExplorerActionsControl"
- ParentComponent={this}
- />
- <hr />
- <UploaderControl ref="UploaderControl"
- ParentComponent={this}
- />
- <hr />
+ <Row style={{ marginLeft: '1rem' }}>
+ <Col>
+ <ExplorerActionsControl ref="ExplorerActionsControl"
+ ParentComponent={this}
+ />
+ </Col>
+ <Col>
+ <UploaderControl ref="UploaderControl"
+ ParentComponent={this}
+ />
+ </Col>
+ </Row>
</div>
: null
}