External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-13 11:00:03 -03:30
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #8 from jlmitch5/navUpdates

Browse Source 
update navigation
This commit is contained in:
John Mitchell 2018-10-29 12:29:07 -07:00 committed by GitHub
commit 3ccfc5905e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 429 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
package-lock.json generated
View File

@ -254,25 +254,33 @@
"integrity": "sha512-rLu3wcBWH4P5q1CGoSSH/i9hrXs7SlbRLkoq9IGuoPYNGQvDJ3pt/wmOM+XgYjIDRMVIdkUWt0RsfzF50JfnCw=="
},
"@patternfly/patternfly-next": {
"version": "1.0.62",
"resolved": "https://registry.npmjs.org/@patternfly/patternfly-next/-/patternfly-next-1.0.62.tgz",
"integrity": "sha512-w6j0RrzXRpsnwGCgDXIW7Q3p+cOoYb8XKnLqAWIjvoA3AQ1Mh7LVqGeY/7/vyrjg5q1kEZbSN3KWceWhggd9MQ=="
"version": "1.0.64",
"resolved": "https://registry.npmjs.org/@patternfly/patternfly-next/-/patternfly-next-1.0.64.tgz",
"integrity": "sha512-Pxug4QU6r5kB1/dSSJJgn8h5tDmzPennJgL9s52ls4TDuDStxgbY4N8ADWEVRuAEh1w9vRo2TdAvJNpUVVoC7w=="
},
"@patternfly/react-core": {
"version": "1.23.0",
"resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-1.23.0.tgz",
"integrity": "sha512-1AAYdNo2EYdjv6oIglPSde9BWwRXOFw8uL8o9owxCOIhynnMybA/8T0ZvPdbO5DysDsGKHyYHiWvETaEpzUlbg==",
"version": "1.28.1",
"resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-1.28.1.tgz",
"integrity": "sha512-dx5rI1zaaovN0HS6ttxbGdnvthd3KAr+6Wsn0h2M8bA+sNshTLDIqKErGoFWTCMZAyaxtwhSaute8nD2YbGYrQ==",
"requires": {
"@patternfly/react-icons": "^2.5.1",
"@patternfly/react-icons": "^2.6.0",
"@patternfly/react-styles": "^2.3.0",
"@patternfly/react-tokens": "^1.0.0",
"exenv": "^1.2.2"
"exenv": "^1.2.2",
"focus-trap-react": "^4.0.1"
},
"dependencies": {
"@patternfly/react-icons": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-2.6.0.tgz",
"integrity": "sha512-r731Huakc4bm5RdrFGX1SWN10vXFaSBSyuDfa6lva6njqe3ZxAf9Q0NLBw3b2l8oe6Rpqw0Ru6PCyzuzqkXlcQ=="
}
}
},
"@patternfly/react-icons": {
"version": "2.5.2",
"resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-2.5.2.tgz",
"integrity": "sha512-xcjvCtd/RmGyc4ZxfyV0C8uI9qAYJ1kJjlR5SU3C2c3/zQDP7V52KWYAUkzaYSLok/sIFyfwwVrOhFc5pZJMBg=="
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-2.6.0.tgz",
"integrity": "sha512-r731Huakc4bm5RdrFGX1SWN10vXFaSBSyuDfa6lva6njqe3ZxAf9Q0NLBw3b2l8oe6Rpqw0Ru6PCyzuzqkXlcQ=="
},
"@patternfly/react-styles": {
"version": "2.3.0",
@ -294,10 +302,9 @@
}
},
"@patternfly/react-tokens": {
"version": "1.5.4",
"resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-1.5.4.tgz",
"integrity": "sha512-a2jhVLQXsSRx8CzK45EsziRqiDjdExn7aNJ+nStn5XOHpS9Yry4KFVELAu3ciVu5S8hM76LHuKSudYJQS0aNmA==",
"optional": true
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-1.6.0.tgz",
"integrity": "sha512-2JSfarzg/OV04SBrEpD7NKvJ27z8gpBcQXoXgdf0VpnvGKceVKOnTm2NLbG4Gm6WJNMtyKGuUw1afTdFoHPl3w=="
},
"@types/node": {
"version": "10.12.0",
@ -5021,6 +5028,30 @@
}
}
},
"focus-trap": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-3.0.0.tgz",
"integrity": "sha512-jTFblf0tLWbleGjj2JZsAKbgtZTdL1uC48L8FcmSDl4c2vDoU4NycN1kgV5vJhuq1mxNFkw7uWZ1JAGlINWvyw==",
"requires": {
"tabbable": "^3.1.0",
"xtend": "^4.0.1"
},
"dependencies": {
"xtend": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",
"integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68="
}
}
},
"focus-trap-react": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/focus-trap-react/-/focus-trap-react-4.0.1.tgz",
"integrity": "sha512-UUZKVEn5cFbF6yUnW7lbXNW0iqN617ShSqYKgxctUvWw1wuylLtyVmC0RmPQNnJ/U+zoKc/djb0tZMs0uN/0QQ==",
"requires": {
"focus-trap": "^3.0.0"
}
},
"follow-redirects": {
"version": "1.5.9",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.9.tgz",
@ -12497,6 +12528,11 @@
"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.2.tgz",
"integrity": "sha1-rifbOPZgp64uHDt9G8KQgZuFGeY="
},
"tabbable": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/tabbable/-/tabbable-3.1.1.tgz",
"integrity": "sha512-583MHIOwictf7+zbxqO/L5fBqMN6Li4SJ1XTKQA9WzHRA7c2BB+D+Ny7Y6kGqU2u+rHK59+oRzrBvMU53aZz+A=="
},
"table": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/table/-/table-5.1.0.tgz",

7
package.json
View File

@ -37,8 +37,11 @@
"webpack-dev-server": "^3.1.4"
},
"dependencies": {
"@patternfly/patternfly-next": "^1.0.58",
"@patternfly/react-core": "1.23.0",
"@patternfly/patternfly-next": "^1.0.64",
"@patternfly/react-core": "^1.28.1",
"@patternfly/react-icons": "^2.6.0",
"@patternfly/react-styles": "^2.3.0",
"@patternfly/react-tokens": "^1.6.0",
"axios": "^0.18.0",
"babel-preset-env": "^1.7.0",
"react": "^16.4.1",

323
src/App.jsx
View File

@ -1,8 +1,6 @@
import React, { Fragment } from 'react';
import {
HashRouter as Router,
Route,
Link,
Redirect,
Switch,
} from 'react-router-dom';
@ -10,30 +8,22 @@ import {
import {
BackgroundImage,
BackgroundImageSrc,
Brand,
Button,
ButtonVariant,
Nav,
NavExpandable,
NavGroup,
NavList,
NavItem,
Page,
PageHeader,
PageSection,
PageSectionVariants,
PageSidebar,
TextContent,
Text,
Toolbar,
ToolbarGroup,
ToolbarItem
PageSidebar
} from '@patternfly/react-core';
import { UserIcon } from '@patternfly/react-icons';
import { global_breakpoint_md as breakpointMd } from '@patternfly/react-tokens';
import { css } from '@patternfly/react-styles';
import api from './api';
import About from './components/About';
// import About from './components/About';
import TowerLogo from './components/TowerLogo';
import ConditionalRedirect from './components/ConditionalRedirect';
@ -52,63 +42,69 @@ import Organizations from './pages/Organizations';
import Portal from './pages/Portal';
import Projects from './pages/Projects';
import Schedules from './pages/Schedules';
import Settings from './pages/Settings';
import AuthSettings from './pages/AuthSettings';
import JobsSettings from './pages/JobsSettings';
import SystemSettings from './pages/SystemSettings';
import UISettings from './pages/UISettings';
import License from './pages/License';
import Teams from './pages/Teams';
import Templates from './pages/Templates';
import Users from './pages/Users';
class App extends React.Component {
constructor(props) {
constructor (props) {
super(props);
const isNavOpen = typeof window !== 'undefined' && window.innerWidth >= parseInt(breakpointMd.value, 10);
this.state = {
activeItem: window.location.hash.split("#/").pop().split("/").shift(),
isNavOpen: (typeof window !== 'undefined' &&
window.innerWidth >= parseInt(breakpointMd.value, 10)),
isNavOpen,
activeGroup: 'views_group',
activeItem: 'views_group_dashboard'
};
this.state.activeGroup = this.state.activeItem.startsWith("settings_group_") ? "settings": "";
}
onNavSelect = result => {
this.setState({
activeItem: result.itemId,
activeGroup: result.groupId
});
};
onNavToggle = () => {
const { isNavOpen } = this.state;
this.setState({ isNavOpen: !isNavOpen });
}
onNavSelect = ({ groupId, itemId }) => {
this.setState({ activeGroup: groupId || "", activeItem: itemId });
this.setState(({ isNavOpen }) => ({ isNavOpen: !isNavOpen }));
};
onLogoClick = () => {
this.setState({ activeItem: "dashboard" });
this.setState({ activeGroup: 'views_group', activeItem: 'views_group_dashboard' });
}
onDevLogout = () => {
api.logout()
.then(() => {
this.setState({ activeItem: "dashboard" });
})
this.setState({ activeGroup: 'views_group', activeItem: 'views_group_dashboard' });
});
}
render() {
render () {
const { activeItem, activeGroup, isNavOpen } = this.state;
const { logo, loginInfo } = this.props;
return (
<Router>
<Fragment>
<BackgroundImage src={{
[BackgroundImageSrc.lg]: '/assets/images/pfbg_1200.jpg',
[BackgroundImageSrc.md]: '/assets/images/pfbg_992.jpg',
[BackgroundImageSrc.md2x]: '/assets/images/pfbg_992@2x.jpg',
[BackgroundImageSrc.sm]: '/assets/images/pfbg_768.jpg',
[BackgroundImageSrc.sm2x]: '/assets/images/pfbg_768@2x.jpg',
[BackgroundImageSrc.xl]: '/assets/images/pfbg_2000.jpg',
[BackgroundImageSrc.xs]: '/assets/images/pfbg_576.jpg',
[BackgroundImageSrc.xs2x]: '/assets/images/pfbg_576@2x.jpg',
[BackgroundImageSrc.filter]: '/assets/images/background-filter.svg'
}} />
<BackgroundImage
src={{
[BackgroundImageSrc.lg]: '/assets/images/pfbg_1200.jpg',
[BackgroundImageSrc.md]: '/assets/images/pfbg_992.jpg',
[BackgroundImageSrc.md2x]: '/assets/images/pfbg_992@2x.jpg',
[BackgroundImageSrc.sm]: '/assets/images/pfbg_768.jpg',
[BackgroundImageSrc.sm2x]: '/assets/images/pfbg_768@2x.jpg',
[BackgroundImageSrc.xl]: '/assets/images/pfbg_2000.jpg',
[BackgroundImageSrc.xs]: '/assets/images/pfbg_576.jpg',
[BackgroundImageSrc.xs2x]: '/assets/images/pfbg_576@2x.jpg',
[BackgroundImageSrc.filter]: '/assets/images/background-filter.svg'
}}
/>
<Switch>
<ConditionalRedirect shouldRedirect={() => api.isAuthenticated()} redirectPath="/" path="/login" component={() => <Login logo={logo} loginInfo={loginInfo} />} />
<Fragment>
@ -116,7 +112,7 @@ class App extends React.Component {
header={(
<PageHeader
logo={<TowerLogo onClick={this.onLogoClick} />}
avatar={<i className="fas fa-user" onClick={this.onDevLogout}></i>}
avatar={<Button id="button-logout" aria-label="Logout" variant={ButtonVariant.plain} onClick={this.onDevLogout} onKeyDown={event => { if (event.keycode === 13) { this.onDevLogout(); } }}><UserIcon /></Button>}
showNavToggle
onNavToggle={this.onNavToggle}
/>
@ -125,50 +121,217 @@ class App extends React.Component {
<PageSidebar
isNavOpen={isNavOpen}
nav={(
<Nav aria-label="Primary Navigation">
<NavGroup title="Views">
<NavItem to="#/home" itemId="dashboard" isActive={activeItem ==='home'}>Dashboard</NavItem>
<NavItem to="#/jobs" itemId="jobs" isActive={activeItem === 'jobs'}>Jobs</NavItem>
<NavItem to="#/schedules" itemId="schedules" isActive={activeItem === 'schedules'}>Schedules</NavItem>
<NavItem to="#/portal" itemId="portal" isActive={activeItem === 'portal'}>My View</NavItem>
</NavGroup>
<NavGroup title="Resources">
<NavItem to="#/templates" itemId="templates" isActive={activeItem === 'templates'}>Templates</NavItem>
<NavItem to="#/credentials" itemId="credentials" isActive={activeItem === 'credentials'}>Credentials</NavItem>
<NavItem to="#/projects" itemId="projects" isActive={activeItem === 'projects'}>Projects</NavItem>
<NavItem to="#/inventories" itemId="inventories" isActive={activeItem === 'inventories'}>Inventories</NavItem>
<NavItem to="#/inventory_scripts" itemId="inventory_scripts" isActive={activeItem === 'inventory_scripts'}>Inventory Scripts</NavItem>
</NavGroup>
<NavGroup title="Access">
<NavItem to="#/organizations" itemId="organizations" isActive={activeItem === 'organizations'}>Organizations</NavItem>
<NavItem to="#/users" itemId="users" isActive={activeItem === 'users'}>Users</NavItem>
<NavItem to="#/teams" itemId="teams" isActive={activeItem === 'teams'}>Teams</NavItem>
</NavGroup>
<NavGroup title="Administration">
<NavItem to="#/credential_types" itemId="credential_types" isActive={activeItem === 'credential_types'}>Credential Types</NavItem>
<NavItem to="#/notification_templates" itemId="notification_templates" isActive={activeItem === 'notification_templates'}>Notifications</NavItem>
<NavItem to="#/management_jobs" itemId="management_jobs" isActive={activeItem === 'management_jobs'}>Management Jobs</NavItem>
<NavItem to="#/instance_groups" itemId="instance_groups" isActive={activeItem === 'instance_groups'}>Instance Groups</NavItem>
<NavItem to="#/applications" itemId="applications" isActive={activeItem === 'applications'}>Applications</NavItem>
<NavExpandable title="Settings" groupId="settings_group" isActive={activeGroup === 'settings_group'}>
<NavItem to="#/settings/auth" groupId="settings_group" itemId="settings_group_auth" isActive={activeItem === 'settings_group_auth'}>
Authentication
<Nav onSelect={this.onNavSelect} aria-label="Primary Navigation">
<NavList>
<NavExpandable
title="Views"
groupId="views_group"
isActive={activeGroup === 'views_group'}
isExpanded={activeGroup === 'views_group'}
>
<NavItem
to="#/home"
groupId="views_group"
itemId="views_group_dashboard"
isActive={activeItem === 'views_group_dashboard'}
>
Dashboard
</NavItem>
<NavItem to="#/settings/jobs" groupId="settings_group" itemId="settings_group_jobs" isActive={activeItem === 'settings_group_jobs'}>
<NavItem
to="#/jobs"
groupId="views_group"
itemId="views_group_jobs"
isActive={activeItem === 'views_group_jobs'}
>
Jobs
</NavItem>
<NavItem to="#/settings/system" groupId="settings_group" itemId="settings_group_system" isActive={activeItem === 'settings_group_system'}>
<NavItem
to="#/schedules"
groupId="views_group"
itemId="views_group_schedules"
isActive={activeItem === 'views_group_schedules'}
>
Schedules
</NavItem>
<NavItem
to="#/portal"
groupId="views_group"
itemId="views_group_portal"
isActive={activeItem === 'views_group_portal'}
>
My View
</NavItem>
</NavExpandable>
<NavExpandable
title="Resources"
groupId="resources_group"
isActive={activeGroup === 'resources_group'}
isExpanded={activeGroup === 'resources_group'}
>
<NavItem
to="#/templates"
groupId="resources_group"
itemId="resources_group_templates"
isActive={activeItem === 'resources_group_templates'}
>
Templates
</NavItem>
<NavItem
to="#/credentials"
groupId="resources_group"
itemId="resources_group_credentials"
isActive={activeItem === 'resources_group_credentials'}
>
Credentials
</NavItem>
<NavItem
to="#/projects"
groupId="resources_group"
itemId="resources_group_projects"
isActive={activeItem === 'resources_group_projects'}
>
Projects
</NavItem>
<NavItem
to="#/inventories"
groupId="resources_group"
itemId="resources_group_inventories"
isActive={activeItem === 'resources_group_inventories'}
>
Inventories
</NavItem>
<NavItem
to="#/inventory_scripts"
groupId="resources_group"
itemId="resources_group_inventory_scripts"
isActive={activeItem === 'resources_group_inventory_scripts'}
>
Inventory Scripts
</NavItem>
</NavExpandable>
<NavExpandable
title="Access"
groupId="access_group"
isActive={activeGroup === 'access_group'}
isExpanded={activeGroup === 'access_group'}
>
<NavItem
to="#/organizations"
groupId="access_group"
itemId="access_group_organizations"
isActive={activeItem === 'access_group_organizations'}
>
Organizations
</NavItem>
<NavItem
to="#/users"
groupId="access_group"
itemId="access_group_users"
isActive={activeItem === 'access_group_users'}
>
Users
</NavItem>
<NavItem
to="#/teams"
groupId="access_group"
itemId="access_group_teams"
isActive={activeItem === 'access_group_teams'}
>
Teams
</NavItem>
</NavExpandable>
<NavExpandable
title="Administration"
groupId="administration_group"
isActive={activeGroup === 'administration_group'}
isExpanded={activeGroup === 'administration_group'}
>
<NavItem
to="#/credential_types"
groupId="administration_group"
itemId="administration_group_credential_types"
isActive={activeItem === 'administration_group_credential_types'}
>
Credential Types
</NavItem>
<NavItem
to="#/notification_templates"
groupId="administration_group"
itemId="administration_group_notification_templates"
isActive={activeItem === 'administration_group_notification_templates'}
>
Notification Templates
</NavItem>
<NavItem
to="#/management_jobs"
groupId="administration_group"
itemId="administration_group_management_jobs"
isActive={activeItem === 'administration_group_management_jobs'}
>
Management Jobs
</NavItem>
<NavItem
to="#/instance_groups"
groupId="administration_group"
itemId="administration_group_instance_groups"
isActive={activeItem === 'administration_group_instance_groups'}
>
Instance Groups
</NavItem>
<NavItem
to="#/applications"
groupId="administration_group"
itemId="administration_group_applications"
isActive={activeItem === 'administration_group_applications'}
>
Applications
</NavItem>
</NavExpandable>
<NavExpandable
title="Settings"
groupId="settings_group"
isActive={activeGroup === 'settings_group'}
isExpanded={activeGroup === 'settings_group'}
>
<NavItem
to="#/auth_settings"
groupId="settings_group"
itemId="settings_group_auth"
isActive={activeItem === 'settings_group_auth'}
>
Authentication
</NavItem>
<NavItem
to="#/jobs_settings"
groupId="settings_group"
itemId="settings_group_jobs"
isActive={activeItem === 'settings_group_jobs'}
>
Jobs
</NavItem>
<NavItem
to="#/system_settings"
groupId="settings_group"
itemId="settings_group_system"
isActive={activeItem === 'settings_group_system'}
>
System
</NavItem>
<NavItem to="#/settings/ui" groupId="settings_group" itemId="settings_group_ui" isActive={activeItem === 'settings_group_ui'}>
<NavItem
to="#/ui_settings"
groupId="settings_group"
itemId="settings_group_ui"
isActive={activeItem === 'settings_group_ui'}
>
User Interface
</NavItem>
</NavExpandable>
</NavGroup>
</NavList>
</Nav>
)}
/>
)}>
)}
>
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" exact path="/" component={() => (<Redirect to="/home" />)} />
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/home" component={Dashboard} />
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/jobs" component={Jobs} />
@ -187,7 +350,11 @@ class App extends React.Component {
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/management_jobs" component={ManagementJobs} />
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/instance_groups" component={InstanceGroups} />
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/applications" component={Applications} />
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/settings" component={Settings} />
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/auth_settings" component={AuthSettings} />
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/jobs_settings" component={JobsSettings} />
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/system_settings" component={SystemSettings} />
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/ui_settings" component={UISettings} />
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/license" component={License} />
</Page>
</Fragment>
</Switch>

78
src/app.scss
View File

@ -1,5 +1,5 @@
//
// Header
// page layout
//
.pf-l-page__header {
@ -10,9 +10,10 @@
}
.pf-l-page__header-brand {
display: flex;
align-self: center;
height: 60px;
max-width: 190px;
max-width: 255px;
padding: 0px;
margin: 0px;
}
@ -20,7 +21,7 @@
.pf-l-page__header-tools {
align-self: center;
height: 60px;
padding-left: 190px;
padding-left: 255px;
.fa-user:hover {
// temporary dev logout
@ -28,12 +29,8 @@
}
}
.pf-l-toolbar {
align-self: center;
height: 60px;
}
.pf-l-page__header-brand-link {
max-width: 85px;
align-self: center;
}
@ -55,41 +52,48 @@
}
}
//
// Side Navigation
//
.pf-c-nav {
overflow-y: auto;
}
.pf-c-nav__section {
--pf-c-nav__section--MarginTop: 8px;
}
.pf-l-page__sidebar{
--pf-l-page__sidebar--Width--lg: 190px;
}
--pf-l-page__sidebar--Width--lg: 255px;
.pf-c-nav__section + .pf-c-nav__section {
--pf-c-nav__section--MarginTop: 8px;
}
.pf-c-nav {
overflow-y: auto;
.pf-c-nav__section {
--pf-c-nav__section--MarginTop: 8px;
}
.pf-c-nav__section + .pf-c-nav__section {
--pf-c-nav__section--MarginTop: 8px;
}
.pf-c-nav__simple-list .pf-c-nav__link {
--pf-c-nav__simple-list-link--PaddingLeft: 24px;
--pf-c-nav__simple-list-link--PaddingBottom: 6px;
--pf-c-nav__simple-list-link--PaddingTop: 6px;
}
.pf-c-nav__section-title {
--pf-c-nav__section-title--PaddingLeft: 24px;
}
.pf-c-nav__simple-list .pf-c-nav__link {
--pf-c-nav__simple-list-link--PaddingLeft: 24px;
--pf-c-nav__simple-list-link--PaddingBottom: 6px;
--pf-c-nav__simple-list-link--PaddingTop: 6px;
.pf-c-nav__link {
display: flex;
align-items: center;
padding-right: 64px;
}
}
}
.pf-c-nav__section-title {
--pf-c-nav__section-title--PaddingLeft: 24px;
}
//
// Page
//
.pf-l-page__main-section {
--pf-l-page__main-section--PaddingTop: 11px;
--pf-l-page__main-section--PaddingLeft: 11px;
}
//
// toolbar layout
//
.pf-l-toolbar {
align-self: center;
height: 60px;
}

21
src/pages/AuthSettings.jsx Normal file
View File

@ -0,0 +1,21 @@
import React, { Component, Fragment } from 'react';
import {
PageSection,
PageSectionVariants,
Title,
} from '@patternfly/react-core';
class AuthSettings extends Component {
render () {
const { light, medium } = PageSectionVariants;
return (
<Fragment>
<PageSection variant={light}><Title size="2xl">Authentication Settings</Title></PageSection>
<PageSection variant={medium} />
</Fragment>
);
}
}
export default AuthSettings;

21
src/pages/JobsSettings.jsx Normal file
View File

@ -0,0 +1,21 @@
import React, { Component, Fragment } from 'react';
import {
PageSection,
PageSectionVariants,
Title,
} from '@patternfly/react-core';
class JobsSettings extends Component {
render () {
const { light, medium } = PageSectionVariants;
return (
<Fragment>
<PageSection variant={light}><Title size="2xl">Jobs Settings</Title></PageSection>
<PageSection variant={medium} />
</Fragment>
);
}
}
export default JobsSettings;

6
src/pages/Settings.jsx → src/pages/License.jsx
View File

@ -5,17 +5,17 @@ import {
Title,
} from '@patternfly/react-core';
class Settings extends Component {
class License extends Component {
render () {
const { light, medium } = PageSectionVariants;
return (
<Fragment>
<PageSection variant={light}><Title size="2xl">Settings</Title></PageSection>
<PageSection variant={light}><Title size="2xl">License</Title></PageSection>
<PageSection variant={medium} />
</Fragment>
);
}
}
export default Settings;
export default License;

21
src/pages/SystemSettings.jsx Normal file
View File

@ -0,0 +1,21 @@
import React, { Component, Fragment } from 'react';
import {
PageSection,
PageSectionVariants,
Title,
} from '@patternfly/react-core';
class SystemSettings extends Component {
render () {
const { light, medium } = PageSectionVariants;
return (
<Fragment>
<PageSection variant={light}><Title size="2xl">System Settings</Title></PageSection>
<PageSection variant={medium} />
</Fragment>
);
}
}
export default SystemSettings;

21
src/pages/UISettings.jsx Normal file
View File

@ -0,0 +1,21 @@
import React, { Component, Fragment } from 'react';
import {
PageSection,
PageSectionVariants,
Title,
} from '@patternfly/react-core';
class UISettings extends Component {
render () {
const { light, medium } = PageSectionVariants;
return (
<Fragment>
<PageSection variant={light}><Title size="2xl">User Interface Settings</Title></PageSection>
<PageSection variant={medium} />
</Fragment>
);
}
}
export default UISettings;