Details
diff --git a/FileServer/SPA/src/React/Controls/FileExplorer/FileExplorerControl.jsx b/FileServer/SPA/src/React/Controls/FileExplorer/FileExplorerControl.jsx
index b04663f..a9e92e9 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'
@@ -105,6 +106,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;
@@ -114,6 +122,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>
@@ -128,36 +142,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>
+ <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>
@@ -170,7 +185,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}
@@ -178,9 +193,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 80acb77..881c495 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/MenuControl.jsx b/FileServer/SPA/src/React/Controls/MenuControl.jsx
index 2cc2b98..6f744b0 100644
--- a/FileServer/SPA/src/React/Controls/MenuControl.jsx
+++ b/FileServer/SPA/src/React/Controls/MenuControl.jsx
@@ -25,7 +25,7 @@ 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>
<Nav>
diff --git a/FileServer/SPA/src/React/Controls/UserControl.jsx b/FileServer/SPA/src/React/Controls/UserControl.jsx
index feaf649..890d4ae 100644
--- a/FileServer/SPA/src/React/Controls/UserControl.jsx
+++ b/FileServer/SPA/src/React/Controls/UserControl.jsx
@@ -1,6 +1,6 @@
import React from 'react';
-import { Form } from 'react-bootstrap'
+import { Form, Button, Alert } from 'react-bootstrap'
import Notification from '../../Tools/Notification'
@@ -69,13 +69,13 @@ export default class UserControl extends BaseControl {
<div>
{this.authServices.IsAuth()
?
- <div>
- <p>Вы авторизованы. Пользователь: {state.UserName}.</p>
- <button onClick={this.LogoutClick}>Logout</button>
+ <div>
+ <Alert variant="success">Вы авторизованы. Пользователь: {state.UserName}.</Alert>
+ <Button onClick={this.LogoutClick} variant="danger">Выход</Button>
</div>
:
<div>
- <p>Вы не авторизованы {state.UserName}. Вход:</p>
+ <Alert variant="warning">Вы не авторизованы. <b>Вход:</b></Alert>
{/*{state.AuthResult != "" ? <p>{state.AuthResult}</p> : ""}*/}
{/*<Form.Label>Email address</Form.Label>*/}
@@ -87,7 +87,7 @@ export default class UserControl extends BaseControl {
{/*<Form.Label>Password</Form.Label>*/}
<Form.Control ref="Password" type="password" placeholder="Password" />
<br />
- <button onClick={this.AuthClick}>Auth</button>
+ <Button onClick={this.AuthClick} variant="success">Авторизация</Button>
</div>
}
</div>