Skip to content

Commit

Permalink
fix(ui): Refactoring of themes (#193)
Browse files Browse the repository at this point in the history 
* - Fixed the badge colors
- Badge colors are now dependend on the theme

* fix(ui): Fix missing badges in policy table (#194)

* Fix missing badges in policies

* Childs now have unique key in list

* Added isEmptyObject()

---------

Co-authored-by: Christoph Anderson <[email protected]>

* Started to refactor css

* Further refactoring of the css file

* Deleted obsolet css statements

* Adjusting colors and refactor css

* Dummy commit

* Further refactoring. Properly overriding bootstrap

* Minor refactoring

---------

Co-authored-by: Christoph Anderson <[email protected]>
  • Loading branch information
@lupusA
lupusA and lupusA committed Oct 10, 2023
1 parent bde9f34 commit 3e8967c
Show file tree
Hide file tree
Showing 9 changed files with 257 additions and 193 deletions.
2 changes: 1 addition & 1 deletion public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<title>KopiaUI</title>
</head>

<body>
<body id="kopia">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<div id="appVersion" style="display: none">
Expand Down
14 changes: 7 additions & 7 deletions src/DirectoryBreadcrumbs.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,15 @@ export function DirectoryBreadcrumbs() {
breadcrumbs.map((state, i) => {
const index = breadcrumbs.length - i - 1 // revert index
return <Breadcrumb.Item key={index} size="sm" variant="outline-secondary"
onClick={() => {
if (index) history.go(-index);
}}
active={!index}>
onClick={() => {
if (index) history.go(-index);
}}
active={!index}>
{state.label}
{state.oid && !index && <>&nbsp;<OverlayTrigger placement="top"
trigger="click"
overlay={<Tooltip
className={"wide-tooltip"}>OID: {state.oid}</Tooltip>}
trigger="click"
overlay={<Tooltip
className={"wide-tooltip"}>OID: {state.oid}</Tooltip>}
>
<FontAwesomeIcon icon={faInfoCircle} />
</OverlayTrigger></>}
Expand Down
17 changes: 7 additions & 10 deletions src/DirectoryObject.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ export class DirectoryObject extends Component {
}

copyPath() {
const el = document.querySelector("#mountedPath");
const el = document.querySelector(".mounted-path");
if (!el) {
return
}
Expand All @@ -125,24 +125,21 @@ export class DirectoryObject extends Component {
{this.state.mountInfo.path ? <>
<Button size="sm" variant="secondary" onClick={this.unmount}>Unmount</Button>
{window.kopiaUI && <>
&nbsp;
<Button size="sm" variant="secondary" onClick={this.browseMounted}>Browse</Button>
</>}
&nbsp;<input id="mountedPath" value={this.state.mountInfo.path} />
<Button size="sm" variant="primary" onClick={this.copyPath}><FontAwesomeIcon
icon={faCopy} /></Button>
<input readOnly={true} className='form-control form-control-sm mounted-path' value={this.state.mountInfo.path} />
<Button size="sm" variant="success" onClick={this.copyPath}><FontAwesomeIcon icon={faCopy} /></Button>
</> : <>
<Button size="sm" variant="primary" onClick={this.mount}>Mount as Local Filesystem</Button>
<Button size="sm" variant="secondary" onClick={this.mount}>Mount as Local Filesystem</Button>
</>}
&nbsp;
<Button size="sm" variant="secondary"
href={"/snapshots/dir/" + this.props.match.params.oid + "/restore"}>Restore
<Button size="sm" variant="primary"
href={"/snapshots/dir/" + this.props.match.params.oid + "/restore"}>Restore
Files & Directories</Button>
&nbsp;
</Col>
<Col xs={12} md={6}>
You can mount/restore all the files & directories that you see below or restore files
individually.
You can mount/restore all the files & directories that you see below or restore files individually.
</Col>
</Row>
<Row><Col>&nbsp;</Col>
Expand Down
2 changes: 1 addition & 1 deletion src/PoliciesTable.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ export class PoliciesTable extends Component {
}
for (let pol in policies.policy) {
if (!isEmpty(policies.policy[pol])) {
bits.push(<Badge className="policy-badge" key={pol}>{pol}</Badge>);
bits.push(<Badge bg="policy-badge" key={pol}>{pol}</Badge>);
}
}
return bits;
Expand Down
2 changes: 1 addition & 1 deletion src/PreferencesView.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export class PreferencesView extends Component {
<form>
<div className='form-group'>
<label className='label-description' id='themeLabel'>Theme</label>
<select className="select_theme, form-select form-select-sm" title='Select theme' value={theme} onChange={e => setTheme(e.target.value)}>
<select className="form-select form-select-sm" title='Select theme' value={theme} onChange={e => setTheme(e.target.value)}>
<option value="light">light</option>
<option value="dark">dark</option>
<option value="pastel">pastel</option>
Expand Down
28 changes: 14 additions & 14 deletions src/SnapshotsTable.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -249,8 +249,8 @@ export class SnapshotsTable extends Component {
originalSnapshotDescription: x.description,
})
}}
title={x.description + " - Click to update snapshot description."}
className={x.description ? "text-warning" : "text-muted"}><b><FontAwesomeIcon icon={faFileAlt} /></b></a>;
title={x.description + " - Click to update snapshot description."}
className={x.description ? "snapshot-description-set" : "snapshot-description"}><b><FontAwesomeIcon icon={faFileAlt} /></b></a>;
}

newPinFor(x) {
Expand Down Expand Up @@ -353,16 +353,16 @@ export class SnapshotsTable extends Component {
Header: 'Root',
width: "",
accessor: x => x.rootID,
Cell: x => <><span className="hash-value">{x.cell.value}</span>
{x.row.original.description && <div className='text-muted'><small>{x.row.original.description}</small></div>}</>,
Cell: x => <><span className="snapshot-hash">{x.cell.value}</span>
{x.row.original.description && <div className='snapshot-description'><small>{x.row.original.description}</small></div>}</>,
}, {
Header: 'Retention',
accessor: 'retention',
width: "",
Cell: x => <span>
{x.cell.value.map(l => <React.Fragment key={l}><Badge bg={pillVariant(l)}>{l}</Badge>{' '}</React.Fragment>)}
{x.cell.value.map(l => <React.Fragment key={l}><Badge bg={"retention-badge-"+pillVariant(l)}>{l}</Badge>{' '}</React.Fragment>)}
{x.row.original.pins.map(l => <React.Fragment key={l}>
<Badge bg="dark" text="warning" onClick={() => this.editPin(x.row.original, l)}><FontAwesomeIcon icon={faThumbtack} /> {l}</Badge>{' '}
<Badge bg="snapshot-pin" onClick={() => this.editPin(x.row.original, l)}><FontAwesomeIcon icon={faThumbtack} /> {l}</Badge>{' '}
</React.Fragment>)}
{this.newPinFor(x.row.original)}
</span>
Expand Down Expand Up @@ -457,7 +457,7 @@ export class SnapshotsTable extends Component {
</Modal.Body>

<Modal.Footer>
<Button size="sm" variant="danger" onClick={this.deleteSelectedSnapshots}>Delete</Button>
<Button size="sm" variant="primary" onClick={this.deleteSelectedSnapshots}>Delete</Button>
<Button size="sm" variant="warning" onClick={this.cancelDelete}>Cancel</Button>
</Modal.Footer>
</Modal>
Expand All @@ -471,16 +471,16 @@ export class SnapshotsTable extends Component {
<Form.Group>
<Form.Label>Enter new description</Form.Label>
<Form.Control as="textarea"
size="sm"
value={this.state.updatedSnapshotDescription}
onChange={e => this.setState({ updatedSnapshotDescription: e.target.value })} />
size="sm"
value={this.state.updatedSnapshotDescription}
onChange={e => this.setState({ updatedSnapshotDescription: e.target.value })} />
</Form.Group>
</Modal.Body>

<Modal.Footer>
{this.state.savingSnapshot && <Spinner animation="border" size="sm" variant="primary" />}
<Button size="sm" variant="success" disabled={this.state.originalSnapshotDescription === this.state.updatedSnapshotDescription} onClick={this.saveSnapshotDescription}>Update Description</Button>
{this.state.originalSnapshotDescription && <Button size="sm" variant="danger" onClick={this.removeSnapshotDescription}>Remove Description</Button>}
<Button size="sm" variant="primary" disabled={this.state.originalSnapshotDescription === this.state.updatedSnapshotDescription} onClick={this.saveSnapshotDescription}>Update Description</Button>
{this.state.originalSnapshotDescription && <Button size="sm" variant="secondary" onClick={this.removeSnapshotDescription}>Remove Description</Button>}
<Button size="sm" variant="warning" onClick={this.cancelSnapshotDescription}>Cancel</Button>
</Modal.Footer>
</Modal>
Expand All @@ -502,8 +502,8 @@ export class SnapshotsTable extends Component {

<Modal.Footer>
{this.state.savingSnapshot && <Spinner animation="border" size="sm" variant="primary" />}
<Button size="sm" variant="success" onClick={this.savePin} disabled={this.state.newPinName === this.state.originalPinName || !this.state.newPinName}>{this.state.originalPinName ? "Update Pin" : "Add Pin"}</Button>
{this.state.originalPinName && <Button size="sm" variant="danger" onClick={() => this.removePin(this.state.originalPinName)}>Remove Pin</Button>}
<Button size="sm" variant="primary" onClick={this.savePin} disabled={this.state.newPinName === this.state.originalPinName || !this.state.newPinName}>{this.state.originalPinName ? "Update Pin" : "Add Pin"}</Button>
{this.state.originalPinName && <Button size="sm" variant="secondary" onClick={() => this.removePin(this.state.originalPinName)}>Remove Pin</Button>}
<Button size="sm" variant="warning" onClick={this.cancelPin}>Cancel</Button>
</Modal.Footer>
</Modal>
Expand Down
7 changes: 4 additions & 3 deletions src/Table.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,14 +128,15 @@ export default function MyTable({ columns, data }) {
</thead>
<tbody {...getTableBodyProps()}>
{page.map((row, i) => {
prepareRow(row);
return (
prepareRow(row);
return (
<tr {...row.getRowProps()} key={i}>
{row.cells.map(cell => {
return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
})}
</tr>
)}
)
}
)}
</tbody>
</Table>
Expand Down
Loading

0 comments on commit 3e8967c

Please sign in to comment.