Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(ui): Added theming support #150

Merged
merged 11 commits into from
Jul 14, 2023
Merged

feat(ui): Added theming support #150

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
7f43436
Commited first draft to theming in kopia.
lupusA Mar 30, 2023
f89430f
Minor changes.
lupusA Apr 10, 2023
a3c3c67
Updated bootstrap to 5.2.3.
lupusA May 3, 2023
f7b80d7
Added some minor code refactorings.
lupusA May 7, 2023
7f0cba6
- Fixed byte representation
lupusA May 8, 2023
58b3ec7
- Fixed empty constructor in PreferencesView
lupusA May 8, 2023
61d41af
Fixed some colors and the policy editor.
lupusA Jul 8, 2023
4045a85
Resolved merge conflict
lupusA Jul 8, 2023
912b92b
Changed method redirect back to its original state
lupusA Jul 8, 2023
2114eb5
Minor fixes to the color settings.
lupusA Jul 10, 2023
c655822
Merge branch 'main' into add-theme-support
lupusA Jul 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
508 changes: 373 additions & 135 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,14 @@
"@fortawesome/free-regular-svg-icons": "^6.2.0",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@fortawesome/react-fontawesome": "^0.2.0",
"bootstrap-dark-5": "^1.1.3",
"bootstrap": "^5.2.3",
"http-proxy-middleware": "^2.0.6",
"moment": "^2.29.3",
"react": "^18.2.0",
"react-bootstrap": "^2.5.0",
"react-dom": "^18.2.0",
"react-router-dom": "^5.3.0",
"react-select": "^5.7.2",
"react-table": "^7.8.0"
},
"scripts": {
Expand Down
215 changes: 0 additions & 215 deletions src/App.css
View file
Open in desktop

This file was deleted.

25 changes: 11 additions & 14 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import 'bootstrap/dist/css/bootstrap.min.css';
import './css/Theme.css';
import './css/App.css';
import axios from 'axios';
import 'bootstrap-dark-5/dist/css/bootstrap-nightshade.min.css';
import React, { Component } from 'react';
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import { React, Component } from 'react';
import { Navbar, Nav, Container } from 'react-bootstrap';
import { BrowserRouter as Router, NavLink, Redirect, Route, Switch } from 'react-router-dom';
import './App.css';
import { BeginRestore } from './BeginRestore';
import { DirectoryObject } from "./DirectoryObject";
import { PoliciesTable } from "./PoliciesTable";
Expand All @@ -16,8 +15,8 @@ import { TaskDetails } from './TaskDetails';
import { TasksTable } from './TasksTable';
import { NewSnapshot } from './NewSnapshot';
import { PolicyEditorPage } from './PolicyEditorPage';
import { ToggleDarkModeButton } from './ToggleDarkModeButton';
import { AppContext } from './AppContext';
import { PreferencesView } from './PreferencesView';
import { AppContext } from './contexts/AppContext';
import { UIPreferenceProvider } from './contexts/UIPreferencesContext';

export default class App extends Component {
Expand Down Expand Up @@ -51,7 +50,6 @@ export default class App extends Component {
}

this.fetchInitialRepositoryDescription();

this.taskSummaryInterval = window.setInterval(this.fetchTaskSummary, 5000);
}

Expand All @@ -62,7 +60,7 @@ export default class App extends Component {
repoDescription: result.data.description,
});
}
}).catch(error => { /* ignore */});
}).catch(error => { /* ignore */ });
}

fetchTaskSummary() {
Expand Down Expand Up @@ -115,9 +113,7 @@ export default class App extends Component {
</>
</NavLink>
<NavLink data-testid="tab-repo" className="nav-link" activeClassName="active" to="/repo">Repository</NavLink>
</Nav>
<Nav>
<ToggleDarkModeButton />
<NavLink data-testid="tab-preferences" className="nav-link" activeClassName="active" to="/preferences">Preferences</NavLink>
</Nav>
</Navbar.Collapse>
</Navbar>
Expand All @@ -138,8 +134,9 @@ export default class App extends Component {
<Route path="/tasks/:tid" component={TaskDetails} />
<Route path="/tasks" component={TasksTable} />
<Route path="/repo" component={RepoStatus} />
<Route path="/preferences" component={PreferencesView} />
<Route exact path="/">
<Redirect to="/snapshots" />
<Redirect to="/repo" />
</Route>
</Switch>
</Container>
Expand Down
5 changes: 4 additions & 1 deletion src/DirectoryItems.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { Component } from 'react';
import { Link } from "react-router-dom";
import MyTable from './Table';
import { objectLink, rfc3339TimestampForDisplay, sizeWithFailures } from './uiutil';
import { UIPreferencesContext } from './contexts/UIPreferencesContext';

function objectName(name, typeID) {
if (typeID === "d") {
Expand Down Expand Up @@ -33,6 +34,7 @@ function directoryLinkOrDownload(x) {

export class DirectoryItems extends Component {
render() {
const { bytesStringBase2 } = this.context;
const columns = [{
id: "name",
Header: 'Name',
Expand All @@ -49,7 +51,7 @@ export class DirectoryItems extends Component {
accessor: x => sizeInfo(x),
Header: "Size",
width: 100,
Cell: x => sizeWithFailures(x.cell.value, x.row.original.summ),
Cell: x => sizeWithFailures(x.cell.value, x.row.original.summ, bytesStringBase2),
}, {
id: "files",
accessor: "summ.files",
Expand All @@ -65,3 +67,4 @@ export class DirectoryItems extends Component {
return <MyTable data={this.props.items} columns={columns} />;
}
}
DirectoryItems.contextType = UIPreferencesContext
25 changes: 14 additions & 11 deletions src/EstimateResults.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ import Button from 'react-bootstrap/Button';
import Spinner from 'react-bootstrap/esm/Spinner';
import Form from 'react-bootstrap/Form';
import { TaskLogs } from './TaskLogs';
import { cancelTask, redirectIfNotConnected, sizeDisplayName } from './uiutil';
import { cancelTask, redirect, sizeDisplayName } from './uiutil';
import { UIPreferencesContext } from './contexts/UIPreferencesContext';

export class EstimateResults extends Component {
constructor() {
Expand Down Expand Up @@ -55,7 +56,7 @@ export class EstimateResults extends Component {
this.interval = null;
}
}).catch(error => {
redirectIfNotConnected(error);
redirect(error);
this.setState({
error,
isLoading: false
Expand Down Expand Up @@ -87,6 +88,7 @@ export class EstimateResults extends Component {

render() {
const { task, isLoading, error } = this.state;
const { bytesStringBase2 } = this.context
if (error) {
return <p>{error.message}</p>;
}
Expand All @@ -97,20 +99,21 @@ export class EstimateResults extends Component {

return <>
{task.counters && <Form.Text className="estimateResults">
{this.taskStatusDescription(task)} Bytes: <b>{sizeDisplayName(task.counters["Bytes"]?.value)}</b> (<b>{sizeDisplayName(task.counters["Excluded Bytes"]?.value)}</b> excluded)
{this.taskStatusDescription(task)} Bytes: <b>{sizeDisplayName(task.counters["Bytes"]?.value, bytesStringBase2)}</b> (<b>{sizeDisplayName(task.counters["Excluded Bytes"]?.value, bytesStringBase2)}</b> excluded)
Files: <b>{task.counters["Files"]?.value}</b> (<b>{task.counters["Excluded Files"]?.value}</b> excluded)
Directories: <b>{task.counters["Directories"]?.value}</b> (<b>{task.counters["Excluded Directories"]?.value}</b> excluded)
Errors: <b>{task.counters["Errors"]?.value}</b> (<b>{task.counters["Ignored Errors"]?.value}</b> ignored)
</Form.Text>
</Form.Text>
}
{task.status === "RUNNING" && <>
&nbsp;<Button size="sm" variant="light" onClick={() => cancelTask(task.id)} ><FontAwesomeIcon icon={faStopCircle} color="red" /> Cancel </Button>
</>}
{this.state.showLog ? <>
<Button size="sm" variant="light" onClick={() => this.setState({ showLog: false })}><FontAwesomeIcon icon={faChevronCircleUp} /> Hide Log</Button>
<TaskLogs taskID={this.taskID(this.props)} />
</> : <Button size="sm" variant="light" onClick={() => this.setState({ showLog: true })}><FontAwesomeIcon icon={faChevronCircleDown} /> Show Log</Button>}
{task.status === "RUNNING" && <>
&nbsp;<Button size="sm" variant="light" onClick={() => cancelTask(task.id)} ><FontAwesomeIcon icon={faStopCircle} color="red" /> Cancel </Button>
</>}
{this.state.showLog ? <>
<Button size="sm" variant="light" onClick={() => this.setState({ showLog: false })}><FontAwesomeIcon icon={faChevronCircleUp} /> Hide Log</Button>
<TaskLogs taskID={this.taskID(this.props)} />
</> : <Button size="sm" variant="light" onClick={() => this.setState({ showLog: true })}><FontAwesomeIcon icon={faChevronCircleDown} /> Show Log</Button>}
</>
;
}
}
EstimateResults.contextType = UIPreferencesContext
Loading
Loading