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

UI related fixes here and there, towards using more PF4 #178

Merged
merged 7 commits into from
Apr 12, 2021
Merged

UI related fixes here and there, towards using more PF4 #178

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d9c6910
Some alignment and padding related UI improvements
KKoukiou Mar 25, 2021
a715b9e
Use medium modal variant and make it top aligned
KKoukiou Mar 25, 2021
a57a3cc
Remove some CSS that is not applied any more
KKoukiou Mar 25, 2021
5d6de2e
Remove padding from the expandable content of the data list by using …
KKoukiou Mar 25, 2021
4f72161
Use description list component instead of ct-form
KKoukiou Mar 25, 2021
5da4280
Fix padding of toolbar in the header
KKoukiou Apr 12, 2021
707ee07
Adjust margin of the navigation in the expanded list content to match…
KKoukiou Apr 12, 2021
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
64 changes: 45 additions & 19 deletions src/app.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,8 @@ import './lib/patternfly/patternfly-4-cockpit.scss';
import {
Title, Button, Alert,
EmptyState, EmptyStateVariant, EmptyStateIcon, EmptyStateBody,
DataList, DataListItem, DataListItemRow, DataListItemCells, DataListCell, DataListContent, /* DataListAction, */
DataList, DataListItem, DataListItemRow, DataListItemCells, DataListCell, DataListContent,
DescriptionList, DescriptionListGroup, DescriptionListTerm, DescriptionListDescription,
Page, PageSection, PageSectionVariants,
Select, SelectOption,
Spinner,
Expand All @@ -46,7 +47,6 @@ import * as remotes from './remotes';
import { ChangeRemoteModal } from './changeRemoteModal.jsx';

import './ostree.scss';
import './lib/form-layout.scss';

const _ = cockpit.gettext;

Expand Down Expand Up @@ -163,10 +163,10 @@ const OriginSelector = ({ os, remotes, branches, branchLoadError, currentRemote,

return (
<>
<Toolbar id="repo-remote-toolbar">
<Toolbar id="repo-remote-toolbar" className="pf-m-page-insets">
<ToolbarContent>
<ToolbarItem variant="label">{ _("Repository") }</ToolbarItem>
<ToolbarItem><Button id="change-repo" variant="link" onClick={() => setChangeRemoteModal(true)}>{currentRemote}</Button></ToolbarItem>
<ToolbarItem><Button id="change-repo" variant="link" isInline onClick={() => setChangeRemoteModal(true)}>{currentRemote}</Button></ToolbarItem>

<ToolbarItem variant="label" id="branch-select-label">{ _("Branch")}</ToolbarItem>
<ToolbarItem>
Expand Down Expand Up @@ -318,13 +318,25 @@ const DeploymentVersion = ({ info, packages }) => {
state = _("Available");

const treeTab = (
<div className="ct-form">
<label className="control-label" htmlFor="osname">{ _("Operating System") }</label> <div className="os" id="osname">{info.osname.v}</div>
<label className="control-label" htmlFor="osversion">{ _("Version") }</label> <div className="version" id="osversion">{info.version.v}</div>
<label className="control-label" htmlFor="osrelease">{ _("Released") }</label> <div className="timestamp" id="osrelease">{moment.unix(info.timestamp.v).fromNow()}</div>
<label className="control-label" htmlFor="osorigin">{ _("Origin") }</label> <div className="origin" id="osorigin">{info.origin.v}</div>

</div>);
<DescriptionList isHorizontal>
<DescriptionListGroup>
<DescriptionListTerm>{ _("Operating System") }</DescriptionListTerm>
<DescriptionListDescription className="os" id="osname">{info.osname.v}</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>{ _("Version") }</DescriptionListTerm>
<DescriptionListDescription className="version" id="osversion">{info.version.v}</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>{ _("Released") }</DescriptionListTerm>
<DescriptionListDescription className="timestamp" id="osrelease">{moment.unix(info.timestamp.v).fromNow()}</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>{ _("Origin") }</DescriptionListTerm>
<DescriptionListDescription className="origin" id="osorigin">{info.origin.v}</DescriptionListDescription>
</DescriptionListGroup>
</DescriptionList>
);

let signaturesTab;
if (info.signatures && info.signatures.v.length > 0) {
Expand All @@ -334,12 +346,25 @@ const DeploymentVersion = ({ info, packages }) => {
const validity = sig.valid ? _("Good Signature") : (sig.expired ? _("Expired Signature") : _("Invalid Signature"));

return (
<div className="ct-form .signatures" key={index}>
<label className="control-label" htmlFor="signature-signed-by">{ _("Signed by") }</label> <span id="signature-signed-by">{sig.by}</span>
<label className="control-label" htmlFor="signature-when">{ _("When") }</label> <span id="signature-when">{when}</span>
<label className="control-label" htmlFor="signature-name">{ sig.fp_name }</label> <span id="signature-name">{sig.fp}</span>
<label className="control-label" htmlFor="signature-valid">{ _("Validity") }</label> <span id="signature-valid">{validity}</span>
</div>);
<DescriptionList isHorizontal key={index}>
<DescriptionListGroup>
<DescriptionListTerm>{ _("Signed by") }</DescriptionListTerm>
<DescriptionListDescription id="signature-signed-by">{sig.by}</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>{ _("When") }</DescriptionListTerm>
<DescriptionListDescription id="signature-when">{when}</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>{ sig.fp_name }</DescriptionListTerm>
<DescriptionListDescription id="signature-name">{sig.fp}</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>{ _("Validity") }</DescriptionListTerm>
<DescriptionListDescription id="signature-valid">{validity}</DescriptionListDescription>
</DescriptionListGroup>
</DescriptionList>
);
})];
} else {
signaturesTab = <p>{ _("No signature available") }</p>;
Expand All @@ -364,7 +389,7 @@ const DeploymentVersion = ({ info, packages }) => {
</DataListCell>,
]} />
</DataListItemRow>
<DataListContent aria-label={cockpit.format("$0 Details", name)} id="available-deployments-expanded-content">
<DataListContent aria-label={cockpit.format("$0 Details", name)} hasNoPadding id="available-deployments-expanded-content">
<Nav variant="tertiary" onSelect={result => setActiveTabKey(result.itemId)}>
<NavList>
<NavItem isActive={activeTabKey === "tree"} itemId="tree">{ _("Tree") }</NavItem>
Expand Down Expand Up @@ -564,7 +589,8 @@ class Application extends React.Component {
refreshRemotes={this.refreshRemotes}
onChangeRemoteOrigin={this.onChangeRemoteOrigin}
remotesList={this.state.remotes} />
<PageSection variant={PageSectionVariants.light} type='nav'>
<PageSection variant={PageSectionVariants.light}
padding={{ default: 'noPadding' }}>
<OriginSelector os={this.state.os} remotes={this.state.remotes}
branches={this.state.branches} branchLoadError={this.state.branchLoadError}
currentRemote={this.state.origin.remote} currentBranch={this.state.origin.branch}
Expand Down
4 changes: 2 additions & 2 deletions src/changeRemoteModal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,11 +60,11 @@ export const ChangeRemoteModal = ({ setIsModalOpen, isModalOpen, remotesList, cu

return (
<Modal title={_("Change Repository")}
width='50%'
position="top"
variant="medium"
appendTo={document.body}
isOpen={isModalOpen}
onClose={() => setIsModalOpen(false)}
isFooterLeftAligned
footer={footer}>
<>
{error && <Alert variant="danger" isInline title={error} />}
Expand Down
33 changes: 10 additions & 23 deletions src/ostree.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,26 +21,20 @@

@import "./lib/patternfly/patternfly-4-overrides.scss";

// Rely on the padding between the toolbar items
#change-repo {
padding: 0;
}

#check-for-updates-btn {
min-width: 10rem;
}

.pf-c-data-list__expandable-content div.pf-c-data-list__expandable-content-body {
padding: 0;
}
.available-deployments-nav-content {
padding: var(--pf-c-data-list__expandable-content-body--PaddingTop);
}

.available-deployments {
// Remove data-list border - items are seperated by margin
border: none;
// Set up max width for the data list
max-width: 60rem;
}

// Data list items should not expand horizontally to the whole page
.available-deployments li.pf-c-data-list__item {
margin: 2rem;
max-width: 60rem;
margin-bottom: 2rem;
}

// PF4 modals have a max height and scroll on overflow - unset the maximum height to avoid getting a scrollbar
Expand Down Expand Up @@ -73,15 +67,8 @@
.available-deployments .pf-c-nav {
background: linear-gradient(0deg,var(--pf-global--BorderColor--100) 0,var(--pf-global--BorderColor--100) 1px,transparent 0);

.pf-c-nav__tertiary-list {
.pf-c-nav__item {
margin: 0;
padding: 0;
}

.pf-c-nav__link {
padding: 0.5rem 1rem;
}
.pf-c-nav__list {
margin-left: var(--pf-global--spacer--sm);
}
}

Expand Down