shaba/awx
1
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2024-11-01 08:21:15 +03:00
Code Releases Activity

Refactor styles and remove patternfly utility classes

Browse Source
This commit is contained in:
Marliana Lara 2019-02-17 22:58:08 -05:00
parent 09107aef1f
commit 240d07b6d4
No known key found for this signature in database
GPG Key ID: 38C73B40DFA809EE
9 changed files with 90 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/app.scss
View File

@ -1,3 +1,8 @@
// https://github.com/patternfly/patternfly-react/issues/1294
#app {
height: 100%;
}
//
// masthead overrides
//
@ -44,7 +49,6 @@
}
.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;
}
@ -70,16 +74,6 @@
padding-bottom: 10px;
}
//
// toolbar overrides
//
.pf-l-toolbar {
align-self: center;
height: 60px;
}
//
// data list overrides
//
@ -99,7 +93,7 @@
.pf-c-data-list__item {
--pf-c-data-list__item--PaddingLeft: 20px;
--pf-c-data-list__item--PaddingRight: 0px;
--pf-c-data-list__item--PaddingRight: 20px;
}
.pf-c-data-list__check {
@ -116,8 +110,24 @@
margin-right: 20px;
}
.pf-c-data-list__cell a {
margin-right: 8px;
.pf-c-data-list__cell {
--pf-c-data-list__cell--PaddingTop: 16px;
--pf-c-data-list__cell--PaddingBottom: 16px;
--pf-c-data-list__cell-cell--PaddingTop: 16px;
a {
margin-right: 8px;
}
}
//
// switch overrides
//
// https://github.com/patternfly/patternfly-next/issues/915
.pf-c-switch {
.pf-c-switch__label::before {
display: none;
}
}
//
@ -143,19 +153,15 @@
}
}
//
// data list overrides
//
.pf-c-data-list__item {
--pf-c-data-list__item--PaddingLeft: 20px;
--pf-c-data-list__item--PaddingRight: 20px;
}
//
// pf modal overrides
//
.pf-c-modal-box {
--pf-c-modal-box--Width: 550px;
--pf-c-modal-box--MaxWidth: 550px;
}
.pf-c-modal-box__footer {
--pf-c-modal-box__footer--PaddingTop: 20px;
--pf-c-modal-box__footer--PaddingRight: 20px;
@ -189,6 +195,10 @@
padding: 0;
}
.pf-c-card__body {
--pf-c-card__body--PaddingTop: 24px;
}
//
// pf empty state overrides
//
@ -205,11 +215,10 @@
.awx-lookup {
min-height: 36px;
}
.awx-c-modal {
width: 550px;
margin: 0;
.pf-c-form-control {
--pf-c-form-control--Height: auto;
}
}
.awx-c-icon--remove {

10
src/components/DataListToolbar/styles.scss
View File

@ -5,6 +5,7 @@
border-bottom: var(--awx-toolbar--BorderWidth) solid var(--awx-toolbar--BorderColor);
background-color: var(--awx-toolbar--BackgroundColor);
display: flex;
height: 70px;
padding-top: 5px;
@ -13,6 +14,10 @@
--pf-global--FontSize--md: 14px;
}
.awx-toolbar .pf-l-level {
flex: 1;
}
.awx-toolbar .pf-c-button.pf-m-plain {
--pf-c-button--m-plain--PaddingLeft: 0px;
--pf-c-button--m-plain--PaddingRight: 0px;
@ -43,6 +48,7 @@
height: 30px;
input {
height: 30px;
padding: 0 10px;
width: 300px;
}
@ -60,6 +66,10 @@
padding: 0 10px;
margin: 0px;
.pf-c-dropdown__toggle-text {
width: auto;
}
.pf-c-dropdown__toggle-icon {
margin: 0px;
padding-top: 3px;

1
src/components/Lookup/Lookup.jsx
View File

@ -136,7 +136,6 @@ class Lookup extends React.Component {
</Button>
<div className="pf-c-form-control">{this.wrapTags(value)}</div>
<Modal
className="awx-c-modal"
title={`Select ${lookupHeader}`}
isOpen={isModalOpen}
onClose={this.handleModalToggle}

24
src/components/NotificationsList/NotificationListItem.jsx
View File

@ -28,27 +28,23 @@ class NotificationListItem extends React.Component {
return (
<I18n>
{({ i18n }) => (
<li key={itemId} className="pf-c-data-list__item pf-u-flex-row pf-u-align-items-center">
<div className="pf-c-data-list__cell pf-u-flex-row">
<div className="pf-u-display-inline-flex">
<Link
to={{
pathname: detailUrl
}}
>
<b>{name}</b>
</Link>
</div>
<li key={itemId} className="pf-c-data-list__item">
<div className="pf-c-data-list__cell" style={{ display: 'flex' }}>
<Link
to={{
pathname: detailUrl
}}
>
<b>{name}</b>
</Link>
<Badge
style={capText}
className="pf-u-display-inline-flex"
isRead
>
{notificationType}
</Badge>
</div>
<div className="pf-c-data-list__cell" />
<div className="pf-c-data-list__cell pf-u-display-flex pf-u-justify-content-flex-end">
<div className="pf-c-data-list__cell" style={{ display: 'flex', justifyContent: 'flex-end' }}>
<Switch
label={i18n._(t`Successful`)}
isChecked={successTurnedOn}

16
src/components/PageHeaderToolbar.jsx
View File

@ -1,6 +1,5 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { t } from '@lingui/macro';
import { I18n } from '@lingui/react';
@ -55,6 +54,10 @@ class PageHeaderToolbar extends Component {
const { isHelpOpen, isUserOpen } = this.state;
const { isAboutDisabled, onAboutClick, onLogoutClick } = this.props;
const dropdownIconColor = {
color: 'white'
};
return (
<I18n>
{({ i18n }) => (
@ -68,6 +71,7 @@ class PageHeaderToolbar extends Component {
toggle={(
<DropdownToggle
onToggle={this.onHelpToggle}
style={dropdownIconColor}
>
<QuestionCircleIcon />
</DropdownToggle>
@ -99,15 +103,17 @@ class PageHeaderToolbar extends Component {
toggle={(
<DropdownToggle
onToggle={this.onUserToggle}
style={dropdownIconColor}
>
<UserIcon />
</DropdownToggle>
)}
dropdownItems={[
<DropdownItem key="user">
<Link to="/home">
{i18n._(t`User Details`)}
</Link>
<DropdownItem
key="user"
href="#/home"
>
{i18n._(t`User Details`)}
</DropdownItem>,
<DropdownItem
key="logout"

3
src/components/SelectedList/SelectedList.jsx
View File

@ -12,6 +12,7 @@ const selectedRowStyling = {
};
const selectedLabelStyling = {
alignSelf: 'center',
fontSize: '14px',
fontWeight: 'bold'
};
@ -37,7 +38,7 @@ class SelectedList extends Component {
return (
<div className="awx-selectedList">
<div className="pf-l-split" style={selectedRowStyling}>
<div className="pf-l-split__item pf-u-align-items-center" style={selectedLabelStyling}>
<div className="pf-l-split__item" style={selectedLabelStyling}>
{label}
</div>
<div className="pf-l-split__item">

30
src/components/Tabs/Tabs.jsx
View File

@ -9,28 +9,26 @@ import './tabs.scss';
const Tabs = ({ children, labelText, closeButton }) => (
<div
aria-label={labelText}
className="pf-c-tabs pf-u-flex-direction-row pf-u-justify-content-space-between"
className="pf-c-tabs"
>
<ul className="pf-c-tabs__list">
{children}
</ul>
{closeButton
&& (
<div className="pf-u-align-self-center">
<Tooltip
message={closeButton.text}
position="top"
>
<Link to={closeButton.link}>
<Button
variant="plain"
aria-label={closeButton.text}
>
<TimesIcon />
</Button>
</Link>
</Tooltip>
</div>
<Tooltip
message={closeButton.text}
position="top"
>
<Link to={closeButton.link}>
<Button
variant="plain"
aria-label={closeButton.text}
>
<TimesIcon />
</Button>
</Link>
</Tooltip>
)
}
</div>

6
src/components/Tabs/tabs.scss
View File

@ -10,7 +10,10 @@
--pf-global--link--Color: #484848;
--pf-global--link--Color--hover: #484848;
--pf-global--link--TextDecoration--hover: none;
--pf-global--FontWeight--normal: 700;
align-items: center;
flex-direction: row;
justify-content: space-between;
&:before {
border-bottom: 1px solid var(--pf-c-tabs__item--BorderColor);
@ -27,6 +30,7 @@
--pf-c-tabs__button--PaddingLeft: 20px;
--pf-c-tabs__button--PaddingRight: 20px;
display: block;
font-weight: 700;
&:after {
content: '';

4
src/pages/Organizations/screens/Organization/OrganizationDetail.jsx
View File

@ -94,7 +94,7 @@ class OrganizationDetail extends Component {
return (
<I18n>
{({ i18n }) => (
<CardBody className="pf-u-pt-lg">
<CardBody>
<div className="pf-l-grid pf-m-gutter pf-m-all-12-col-on-md pf-m-all-6-col-on-lg pf-m-all-4-col-on-xl">
<Detail
label={i18n._(t`Name`)}
@ -135,7 +135,7 @@ class OrganizationDetail extends Component {
value={modified}
/>
</div>
<div className="pf-u-display-flex pf-u-flex-direction-row-reverse pf-u-ml-auto pf-u-mt-md">
<div style={{ display: 'flex', flexDirection: 'row-reverse' }}>
<Link to={`/organizations/${match.params.id}/edit`}>
<Button><Trans>Edit</Trans></Button>
</Link>