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

style(ui): Polish the UI #245

Open
wants to merge 21 commits into
base: main
Choose a base branch
from
Open

style(ui): Polish the UI #245

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
580467a
Define width of provider selectors to be 20% of the screen, consisten…
jasoryeh Mar 29, 2024
e064d3f
Forms should be spaced to look nice
jasoryeh Mar 29, 2024
7fc0091
Move connected repository to navbar
jasoryeh Mar 29, 2024
946923e
Don't stripe tables, remove dark constraint on table making the table…
jasoryeh Mar 29, 2024
3c88635
Hide dividers on some dropdowns when no options under them
jasoryeh Mar 29, 2024
4870dbf
consistency in status display for task statuses
jasoryeh Mar 29, 2024
d31b783
Remove link for viewing task details from the time, and add a dedicat…
jasoryeh Mar 29, 2024
ee87b13
Make policyeditor have accordions in columns for groups of settings, …
jasoryeh Mar 29, 2024
9dc1bb5
unshorten some words (Config -> Configuration), and add margins to sp…
jasoryeh Mar 29, 2024
fd114ad
perhaps a more clearer name for the policy headers (Defined -> This P…
jasoryeh Mar 29, 2024
5204eb0
Remove unnecessary special titles for certain providers, and make eve…
jasoryeh Mar 29, 2024
e062a89
stylistic spacings here and there to make things les crammed in certa…
jasoryeh Mar 29, 2024
a0bcffc
badgification of some statuses to distinguish them from regular data
jasoryeh Mar 29, 2024
da88127
Move task start and finish date to the top, keeping less detailed dat…
jasoryeh Mar 29, 2024
7076bb8
change snapshot list to say "in progress" when snapshots are running
jasoryeh Mar 29, 2024
ca97bbc
Make the new snapshot button look different from the other buttons of…
jasoryeh Mar 29, 2024
95ccb02
Make the current page purpose clear when editing policy by putting th…
jasoryeh Mar 29, 2024
ea6f164
make repository selector BOLD
jasoryeh Mar 29, 2024
ff8883c
Adjust repository in navbar size
jasoryeh Mar 30, 2024
8ca76b3
Dock KopiaUI version number to bottom right
jasoryeh Mar 30, 2024
c4bf2fe
fix error correction experimental warning, and use a badge to emphasi…
jasoryeh Jun 27, 2024
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
15 changes: 12 additions & 3 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,18 @@
<body id="kopia">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<div id="appVersion" style="display: none">
<hr />
<p class="version-info">Version %REACT_APP_FULL_VERSION_INFO%</p>
<div id="appVersion"
style="display: none;
padding: 5px 5px 5px 10px;
margin: 0;
width: fit-content;
z-index: 1;
position: fixed; right: 0; bottom: 0;
border: solid 1px var(--background-color); border-radius: 5px 0px 0px 0px;
box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.1);
color: var(--color-text);
background-color: var(--background-color);">
<small class="version-info m-0 p-0">v%REACT_APP_FULL_VERSION_INFO%</small>
</div>
</body>

Expand Down
18 changes: 14 additions & 4 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,14 +122,24 @@ export default class App extends Component {
<NavLink data-testid="tab-repo" data-title="Repository" className="nav-link" to="/repo">Repository</NavLink>
<NavLink data-testid="tab-preferences" data-title="Preferences" className="nav-link" to="/preferences">Preferences</NavLink>
</Nav>
<Nav>
<NavLink to="/repo" className="nav-link" style={{textAlign: "right"}}>
<p className="mb-0 text-sm"
style={{
fontSize: "50%",
}}>{this.state.isRepositoryConnected ? "Connected Repository" : "Repository Disconnected"}</p>
<h5 className="mb-0 fw-light text-sm"
style={{
color: "#7a7a7a",
fontSize: "50%",
}}
><i>{this.state.isRepositoryConnected ? this.state.repoDescription : "Please connect to a repository first!"}</i></h5>
</NavLink>
</Nav>
</Navbar.Collapse>
</Navbar>

<Container fluid>
<NavLink to="/repo" style={{ color: "inherit", textDecoration: "inherit" }}>
<h5 className="mb-4">{this.state.repoDescription}</h5>
</NavLink>

<Switch>
<Route path="/snapshots/new" component={SnapshotCreate} />
<Route path="/snapshots/single-source/" component={SnapshotHistory} />
Expand Down
30 changes: 15 additions & 15 deletions src/components/SetupRepository.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import { SetupRepositorySFTP } from './SetupRepositorySFTP';
import { SetupRepositoryToken } from './SetupRepositoryToken';
import { SetupRepositoryWebDAV } from './SetupRepositoryWebDAV';
import { toAlgorithmOption } from '../utils/uiutil';
import Badge from "react-bootstrap/Badge";

const supportedProviders = [
{ provider: "filesystem", description: "Local Directory or NAS", component: SetupRepositoryFilesystem },
Expand Down Expand Up @@ -230,7 +231,7 @@ export class SetupRepository extends Component {
data-testid={'provider-' + x.provider}
onClick={() => this.setState({ provider: x.provider, providerSettings: {} })}
variant={x.provider.startsWith("_") ? "secondary" : "primary"}
className="providerIcon" >{x.description}</Button>
className="providerIcon" ><b>{x.description}</b></Button>
)}
</Row>
</>;
Expand Down Expand Up @@ -304,9 +305,9 @@ export class SetupRepository extends Component {
}

return <Form onSubmit={this.verifyStorage}>
{!this.state.provider.startsWith("_") && <h3>Storage Configuration</h3>}
{this.state.provider === "_token" && <h3>Enter Repository Token</h3>}
{this.state.provider === "_server" && <h3>Kopia Server Parameters</h3>}
<h3>{supportedProviders.find(x => x.provider == this.state.provider).description}</h3>
<h6><b>Configuring a Storage Repository</b></h6>
<h6>To configure a storage repository, please fill out the following.</h6>

<SelectedProvider ref={this.optionsEditor} initial={this.state.providerSettings} />

Expand All @@ -325,7 +326,7 @@ export class SetupRepository extends Component {
const icon = this.state.showAdvanced ? faAngleDoubleUp : faAngleDoubleDown;
const text = this.state.showAdvanced ? "Hide Advanced Options" : "Show Advanced Options";

return <Button data-testid='advanced-options' onClick={this.toggleAdvanced}
return <Button data-testid='advanced-options' className="mt-2" onClick={this.toggleAdvanced}
variant="primary"
aria-controls="advanced-options-div"
aria-expanded={this.state.showAdvanced}
Expand Down Expand Up @@ -406,6 +407,12 @@ export class SetupRepository extends Component {
<option value="5">5%</option>
<option value="10">10%</option>
</Form.Control>
<Form.Text sm={8} className="text-muted form-text">
<Badge>Experimental</Badge>&nbsp;Error correction can help protect from certain
kinds of data corruption due to spontaneous bit flips in the storage
media. <a href="https://kopia.io/docs/advanced/ecc/" target="_blank" rel="noreferrer">Click here to
learn more.</a>
</Form.Text>
</Form.Group>
<Form.Group as={Col}>
<Form.Label className="required">Error Correction Algorithm</Form.Label>
Expand All @@ -421,15 +428,6 @@ export class SetupRepository extends Component {
</Form.Control>
</Form.Group>
</Row>
<Row>
<Col></Col>
<Col sm={8} className="text-muted">
[EXPERIMENTAL] Error correction can help protect from certain
kinds of data corruption due to spontaneous bit flips in the storage
media. <a href="https://kopia.io/docs/advanced/ecc/" target="_blank" rel="noreferrer">Click here to
learn more.</a>
</Col>
</Row>
{this.overrideUsernameHostnameRow()}
<Row style={{ marginTop: "1rem" }}>
<Form.Group as={Col}>
Expand Down Expand Up @@ -465,6 +463,7 @@ export class SetupRepository extends Component {
renderConfirmConnect() {
return <Form onSubmit={this.connectToRepository}>
<h3>Connect To Repository</h3>
<h6>Finish connecting to this repository by configuring these options.</h6>
<Row>
<Form.Group as={Col}>
<Form.Label className="required">Connect As</Form.Label>
Expand All @@ -477,13 +476,14 @@ export class SetupRepository extends Component {
</Row>
<Row>
{(this.state.provider !== "_token" && this.state.provider !== "_server") && RequiredField(this, "Repository Password", "password", { autoFocus: true, type: "password", placeholder: "enter repository password" }, "Used to encrypt the repository's contents")}
<br/>
{this.state.provider === "_server" && RequiredField(this, "Server Password", "password", { autoFocus: true, type: "password", placeholder: "enter password to connect to server" })}
</Row>
<Row>
{RequiredField(this, "Repository Description", "description", { autoFocus: this.state.provider === "_token", placeholder: "enter repository description" }, "Helps to distinguish between multiple connected repositories")}
</Row>
{this.toggleAdvancedButton()}
<Collapse in={this.state.showAdvanced}>
<Collapse className="m-2" in={this.state.showAdvanced}>
<div id="advanced-options-div" className="advancedOptions">
<Row>
{RequiredBoolean(this, "Connect in read-only mode", "readonly", "Read-only mode prevents any changes to the repository.")}
Expand Down
2 changes: 1 addition & 1 deletion src/components/policy-editor/LabelColumn.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@ import Col from 'react-bootstrap/Col';
export function LabelColumn(props) {
return <Col xs={12} sm={4} className="policyFieldColumn">
<span className="policyField">{props.name}</span>
{props.help && <><p className="label-help">{props.help}</p></>}
{props.help && <><p className="label-help pt-1"><small>{props.help}</small></p></>}
</Col>;
}
Loading