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 6bbe5e9..0ce4806 100644
--- a/FileServer/SPA/src/React/Controls/FileExplorer/FileExplorerControl.jsx
+++ b/FileServer/SPA/src/React/Controls/FileExplorer/FileExplorerControl.jsx
@@ -154,7 +154,7 @@ export default class FileExplorerControl extends BaseControl {
<p>{data.LogicPath}</p>
- <ButtonGroup>
+ <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>
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 c24d17e..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'
@@ -36,22 +37,29 @@ export default class MenuControl extends BaseControl {
return (
<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 d31c39c..fcafa53 100644
--- a/FileServer/SPA/src/React/Controls/User/UserControl.jsx
+++ b/FileServer/SPA/src/React/Controls/User/UserControl.jsx
@@ -1,5 +1,6 @@
import React from 'react';
+import { Link } from 'react-router-dom';
import { Form, Button, Alert } from 'react-bootstrap'
import Notification from '../../../Tools/Notification'
@@ -104,27 +105,24 @@ export default class UserControl extends BaseControl {
{this.state.IsAuth
?
<div>
- <Alert variant="success">Вы авторизованы. Пользователь: {this.state.CurrentUser.Login}.</Alert>
- {this.state.CurrentUser.IsAdmin
- ? <Alert variant="success">Вы администратор.</Alert>
+ <Alert variant="success" style={{ margin: 0, marginBottom: 10, padding: 0 }}>Пользователь: {this.state.CurrentUser.Login}.</Alert>
+ {this.state.CurrentUser.IsAdmin
+ ? <Alert variant="success" style={{ margin: 0, marginBottom: 10, padding: 0 }}>Вы администратор.</Alert>
: null
}
- <Button onClick={this.LogoutClick} variant="danger">Выход</Button>
+ <Button href="/User" variant="outline-secondary" style={{ marginBottom: 10 }}>Изменить пароль</Button>
+ <Button onClick={this.LogoutClick} variant="danger">Выход</Button>
</div>
:
<div>
- <Alert variant="warning">Вы не авторизованы. <b>Вход:</b></Alert>
+ <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 />
+ <Form.Control ref="Password" type="password" placeholder="Password" style={{ marginBottom: 10 }}/>
<Button onClick={this.AuthClick} variant="success">Авторизация</Button>
</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
}