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

Remove PF style overrides from card, breadcrumb, sidenav, tooltip, and modal components

Browse Source
This commit is contained in:
Marliana Lara 2020-02-11 11:53:22 -05:00
parent 6df00e1e4c
commit 5d2912605f
No known key found for this signature in database
GPG Key ID: 38C73B40DFA809EE
26 changed files with 45 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
awx/ui_next/src/app.scss
View File

@ -3,41 +3,6 @@
height: 100%;
}
//
// sidebar overrides
//
.pf-c-page__sidebar {
--pf-c-page__sidebar--md--Width: 255px;
.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--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__link {
display: flex;
align-items: center;
padding-right: 64px;
}
}
}
//
// data list overrides
//
@ -87,102 +52,6 @@
}
}
//
// pf modal overrides
//
.awx-c-modal.pf-c-modal-box {
margin: 0;
padding: 24px;
width: 600px;
.pf-c-modal-box__body {
overflow: auto;
}
.pf-c-modal-box__footer > .pf-c-button:not(:last-child) {
margin-right: 20px;
}
}
.pf-c-modal-box__footer {
--pf-c-modal-box__footer--PaddingTop: 20px;
--pf-c-modal-box__footer--PaddingRight: 20px;
--pf-c-modal-box__footer--PaddingBottom: 20px;
--pf-c-modal-box__footer--PaddingLeft: 20px;
--pf-c-modal-box__footer--MarginTop: 24px;
justify-content: flex-end;
}
.pf-c-modal-box__header {
--pf-c-modal-box__header--PaddingTop: 10px;
--pf-c-modal-box__header--PaddingRight: 0;
--pf-c-modal-box__header--PaddingBottom: 0;
--pf-c-modal-box__header--PaddingLeft: 20px;
}
.pf-c-modal-box__body {
--pf-c-modal-box__body--PaddingLeft: 20px;
--pf-c-modal-box__body--PaddingRight: 20px;
--pf-c-modal-box__body--PaddingBottom: 5px;
}
//
// pf tooltip overrides
//
.pf-c-tooltip__content {
--pf-c-tooltip__content--PaddingTop: 0.71rem;
--pf-c-tooltip__content--PaddingRight: 0.71rem;
--pf-c-tooltip__content--PaddingBottom: 0.71rem;
--pf-c-tooltip__content--PaddingLeft: 0.71rem;
}
// higher specificity needed to override PF styles added dynamically to page
.pf-c-tooltip .pf-c-tooltip__content {
text-align: left;
}
//
// pf empty state overrides
//
.pf-c-empty-state {
align-self: center;
}
//
// assorted custom component styles
// note that these should be given a consistent prefix
// and bem style, as well as moved into component-based scss files
//
.awx-c-card {
position: relative;
}
//
// PF Alert notification component overrides
//
.pf-c-alert__title {
--pf-c-alert__title--PaddingTop: 20px;
--pf-c-alert__title--PaddingRight: 20px;
--pf-c-alert__title--PaddingBottom: 20px;
--pf-c-alert__title--PaddingLeft: 20px;
}
.pf-c-alert__description {
--pf-c-alert__description--PaddingRight: 20px;
--pf-c-alert__description--PaddingBottom: 20px;
--pf-c-alert__description--PaddingLeft: 20px;
}
.pf-c-alert {
position: absolute;
width: 100%;
z-index: 20;
}
//
// AlertModal styles
//
@ -246,11 +115,3 @@
color: var(--pf-global--success-color--200);
}
}
//
// LoginModal overrides
//
.pf-m-error p.pf-c-form__helper-text {
color: var(--pf-global--danger-color--100);
}

1
awx/ui_next/src/components/AlertModal/AlertModal.jsx
View File

@ -30,6 +30,7 @@ export default ({ variant, children, ...props }) => {
props.isOpen = Boolean(isOpen);
return (
<Modal
isLarge
className={`awx-c-modal${variant &&
` at-c-alertModal at-c-alertModal--${variant}`}`}
{...props}

8
awx/ui_next/src/components/Breadcrumbs/Breadcrumbs.jsx
View File

@ -5,7 +5,7 @@ import {
PageSectionVariants,
Breadcrumb,
BreadcrumbItem,
BreadcrumbHeading as PFBreadcrumbHeading,
BreadcrumbHeading,
} from '@patternfly/react-core';
import { Link, Route, withRouter } from 'react-router-dom';
import styled from 'styled-components';
@ -15,12 +15,6 @@ const PageSection = styled(PFPageSection)`
padding-bottom: 10px;
`;
const BreadcrumbHeading = styled(PFBreadcrumbHeading)`
--pf-c-breadcrumb__heading--FontSize: 20px;
line-height: 24px;
flex: 100%;
`;
const Breadcrumbs = ({ breadcrumbConfig }) => {
const { light } = PageSectionVariants;

2
awx/ui_next/src/components/ContentEmpty/ContentEmpty.jsx
View File

@ -10,7 +10,7 @@ import {
import { CubesIcon } from '@patternfly/react-icons';
const ContentEmpty = ({ i18n, title = '', message = '' }) => (
<EmptyState>
<EmptyState variant="full">
<EmptyStateIcon icon={CubesIcon} />
<Title size="lg">{title || i18n._(t`No items found.`)}</Title>
<EmptyStateBody>{message}</EmptyStateBody>

2
awx/ui_next/src/components/ContentError/ContentError.jsx
View File

@ -39,7 +39,7 @@ function ContentError({ error, children, isNotFound, i18n }) {
{is401 ? (
<Redirect to="/login" />
) : (
<EmptyState>
<EmptyState variant="full">
<EmptyStateIcon icon={ExclamationTriangleIcon} />
<Title size="lg">
{is404 ? i18n._(t`Not Found`) : i18n._(t`Something went wrong...`)}

2
awx/ui_next/src/components/ContentLoading/ContentLoading.jsx
View File

@ -5,7 +5,7 @@ import { EmptyState, EmptyStateBody } from '@patternfly/react-core';
// TODO: Better loading state - skeleton lines / spinner, etc.
const ContentLoading = ({ className, i18n }) => (
<EmptyState className={className}>
<EmptyState variant="full" className={className}>
<EmptyStateBody>{i18n._(t`Loading...`)}</EmptyStateBody>
</EmptyState>
);

6
awx/ui_next/src/components/Lookup/Lookup.jsx
View File

@ -139,7 +139,7 @@ function Lookup(props) {
</ChipHolder>
</InputGroup>
<Modal
className="awx-c-modal"
isLarge
title={i18n._(t`Select ${header || i18n._(t`Items`)}`)}
isOpen={isModalOpen}
onClose={closeModal}
@ -148,9 +148,7 @@ function Lookup(props) {
key="select"
variant="primary"
onClick={save}
style={
required && selectedItems.length === 0 ? { display: 'none' } : {}
}
isDisabled={required && selectedItems.length === 0}
>
{i18n._(t`Select`)}
</Button>,

2
awx/ui_next/src/components/PaginatedDataList/PaginatedDataListItem.jsx
View File

@ -27,7 +27,7 @@ export default function PaginatedDataListItem({ item }) {
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key="team-name">
<DataListCell key="name">
<DetailWrapper>
<Link to={{ pathname: item.url }}>
<b id={`items-list-item-${item.id}`}>{item.name}</b>

12
awx/ui_next/src/components/ResourceAccessList/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap
View File

@ -73,7 +73,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
aria-describedby="pf-modal-0"
aria-label="Remove {0} Access"
aria-modal="true"
class="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger"
class="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger pf-m-lg"
role="dialog"
>
<button
@ -154,7 +154,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
className="awx-c-modal at-c-alertModal at-c-alertModal--danger"
hideTitle={false}
isFooterLeftAligned={false}
isLarge={false}
isLarge={true}
isOpen={true}
isSmall={false}
onClose={[Function]}
@ -174,7 +174,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
aria-describedby="pf-modal-0"
aria-label="Remove {0} Access"
aria-modal="true"
class="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger"
class="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger pf-m-lg"
role="dialog"
>
<button
@ -274,7 +274,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
hideTitle={false}
id="pf-modal-0"
isFooterLeftAligned={false}
isLarge={false}
isLarge={true}
isOpen={true}
isSmall={false}
onClose={[Function]}
@ -303,7 +303,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
<ModalBox
className="awx-c-modal at-c-alertModal at-c-alertModal--danger"
id="pf-modal-0"
isLarge={false}
isLarge={true}
isSmall={false}
style={Object {}}
title="Remove {0} Access"
@ -312,7 +312,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
aria-describedby="pf-modal-0"
aria-label="Remove {0} Access"
aria-modal="true"
className="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger"
className="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger pf-m-lg"
role="dialog"
style={Object {}}
>

2
awx/ui_next/src/components/Sparkline/StatusIcon.jsx
View File

@ -75,7 +75,7 @@ const SkippedBottom = styled.div`
const StatusIcon = ({ status, ...props }) => {
return (
<div className="at-c-statusIcon" {...props}>
<div {...props}>
{status === 'running' && <RunningJob />}
{(status === 'new' ||
status === 'pending' ||

4
awx/ui_next/src/screens/Credential/Credential.jsx
View File

@ -63,7 +63,7 @@ function Credential({ i18n, setBreadcrumb }) {
if (!hasContentLoading && contentError) {
return (
<PageSection>
<Card className="awx-c-card">
<Card>
<ContentError error={contentError}>
{contentError.response && contentError.response.status === 404 && (
<span>
@ -79,7 +79,7 @@ function Credential({ i18n, setBreadcrumb }) {
return (
<PageSection>
<Card className="awx-c-card">
<Card>
{cardHeader}
<Switch>
<Redirect

4
awx/ui_next/src/screens/Host/Host.jsx
View File

@ -117,7 +117,7 @@ function Host({ inventory, i18n, setBreadcrumb }) {
if (!hasContentLoading && contentError) {
return (
<Card className="awx-c-card">
<Card>
<ContentError error={contentError}>
{contentError.response && contentError.response.status === 404 && (
<span>
@ -141,7 +141,7 @@ function Host({ inventory, i18n, setBreadcrumb }) {
);
return (
<Card className="awx-c-card">
<Card>
{cardHeader}
<Switch>
{redirect}

4
awx/ui_next/src/screens/Inventory/Inventory.jsx
View File

@ -92,7 +92,7 @@ function Inventory({ i18n, setBreadcrumb }) {
if (!hasContentLoading && contentError) {
return (
<PageSection>
<Card className="awx-c-card">
<Card>
<ContentError error={contentError}>
{contentError.response.status === 404 && (
<span>
@ -108,7 +108,7 @@ function Inventory({ i18n, setBreadcrumb }) {
return (
<PageSection>
<Card className="awx-c-card">
<Card>
{cardHeader}
<Switch>
<Redirect

4
awx/ui_next/src/screens/Inventory/SmartInventory.jsx
View File

@ -88,7 +88,7 @@ class SmartInventory extends Component {
if (!hasContentLoading && contentError) {
return (
<PageSection>
<Card className="awx-c-card">
<Card>
<ContentError error={contentError}>
{contentError.response.status === 404 && (
<span>
@ -105,7 +105,7 @@ class SmartInventory extends Component {
}
return (
<PageSection>
<Card className="awx-c-card">
<Card>
{cardHeader}
<Switch>
<Redirect

2
awx/ui_next/src/screens/Inventory/shared/InventoryGroupForm.jsx
View File

@ -26,7 +26,7 @@ function InventoryGroupForm({
};
return (
<Card className="awx-c-card">
<Card>
<CardBody>
<Formik initialValues={initialValues} onSubmit={handleSubmit}>
{formik => (

2
awx/ui_next/src/screens/Job/Job.jsx
View File

@ -83,7 +83,7 @@ class Job extends Component {
if (!hasContentLoading && contentError) {
return (
<PageSection>
<Card className="awx-c-card">
<Card>
<ContentError error={contentError}>
{contentError.response.status === 404 && (
<span>

7
awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
View File

@ -34,10 +34,9 @@ const VariablesInput = styled(_VariablesInput)`
const StatusDetailValue = styled.div`
align-items: center;
display: inline-flex;
.at-c-statusIcon {
margin-right: 10px;
}
display: inline-grid;
grid-gap: 10px;
grid-template-columns: auto auto;
`;
const VERBOSITY = {

7
awx/ui_next/src/screens/Job/JobOutput/HostEventModal.jsx
View File

@ -26,10 +26,9 @@ const Modal = styled(PFModal)`
const HostNameDetailValue = styled.div`
align-items: center;
display: inline-flex;
.at-c-statusIcon {
margin-right: 10px;
}
display: inline-grid;
grid-gap: 10px;
grid-template-columns: auto auto;
`;
const Tabs = styled(PFTabs)`

2
awx/ui_next/src/screens/Job/JobTypeRedirect.jsx
View File

@ -54,7 +54,7 @@ class JobTypeRedirect extends Component {
if (error) {
return (
<PageSection>
<Card className="awx-c-card">
<Card>
{error === NOT_FOUND ? (
<ContentError isNotFound>
<Link to="/jobs">{i18n._(`View all Jobs`)}</Link>

2
awx/ui_next/src/screens/NotFound.jsx
View File

@ -5,7 +5,7 @@ import ContentError from '@components/ContentError';
function NotFound() {
return (
<PageSection>
<Card className="awx-c-card">
<Card>
<ContentError isNotFound />
</Card>
</PageSection>

4
awx/ui_next/src/screens/Organization/Organization.jsx
View File

@ -147,7 +147,7 @@ class Organization extends Component {
if (!hasContentLoading && contentError) {
return (
<PageSection>
<Card className="awx-c-card">
<Card>
<ContentError error={contentError}>
{contentError.response.status === 404 && (
<span>
@ -165,7 +165,7 @@ class Organization extends Component {
return (
<PageSection>
<Card className="awx-c-card">
<Card>
{cardHeader}
<Switch>
<Redirect

4
awx/ui_next/src/screens/Project/Project.jsx
View File

@ -167,7 +167,7 @@ class Project extends Component {
if (!hasContentLoading && contentError) {
return (
<PageSection>
<Card className="awx-c-card">
<Card>
<ContentError error={contentError}>
{contentError.response.status === 404 && (
<span>
@ -183,7 +183,7 @@ class Project extends Component {
return (
<PageSection>
<Card className="awx-c-card">
<Card>
{cardHeader}
<Switch>
<Redirect from="/projects/:id" to="/projects/:id/details" exact />

4
awx/ui_next/src/screens/Team/Team.jsx
View File

@ -59,7 +59,7 @@ function Team({ i18n, setBreadcrumb }) {
if (!hasContentLoading && contentError) {
return (
<PageSection>
<Card className="awx-c-card">
<Card>
<ContentError error={contentError}>
{contentError.response.status === 404 && (
<span>
@ -75,7 +75,7 @@ function Team({ i18n, setBreadcrumb }) {
return (
<PageSection>
<Card className="awx-c-card">
<Card>
{cardHeader}
<Switch>
<Redirect from="/teams/:id" to="/teams/:id/details" exact />

4
awx/ui_next/src/screens/Template/Template.jsx
View File

@ -135,7 +135,7 @@ class Template extends Component {
if (!hasContentLoading && contentError) {
return (
<PageSection>
<Card className="awx-c-card">
<Card>
<ContentError error={contentError}>
{contentError.response.status === 404 && (
<span>
@ -150,7 +150,7 @@ class Template extends Component {
}
return (
<Card className="awx-c-card">
<Card>
{cardHeader}
<Switch>
<Redirect

4
awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
View File

@ -79,7 +79,7 @@ class WorkflowJobTemplate extends Component {
if (!hasContentLoading && contentError) {
return (
<PageSection>
<Card className="awx-c-card">
<Card>
<ContentError error={contentError}>
{contentError.response.status === 404 && (
<span>
@ -94,7 +94,7 @@ class WorkflowJobTemplate extends Component {
}
return (
<Card className="awx-c-card">
<Card>
{cardHeader}
<Switch>
<Redirect

4
awx/ui_next/src/screens/User/User.jsx
View File

@ -96,7 +96,7 @@ class User extends Component {
if (!hasContentLoading && contentError) {
return (
<PageSection>
<Card className="awx-c-card">
<Card>
<ContentError error={contentError}>
{contentError.response.status === 404 && (
<span>
@ -112,7 +112,7 @@ class User extends Component {
return (
<PageSection>
<Card className="awx-c-card">
<Card>
{cardHeader}
<Switch>
<Redirect from="/users/:id" to="/users/:id/details" exact />