main: Stop importing patternfly.css
* Stop importing cockpit's base1/patternfly.css This is deprecated API and will be dropped at some point, in favor of projects shipping their own CSS. Install and import the styles from PF4 now. * Use webpack based string replacement for removing the font-face rules from PF4 Doing the seddery in Makefile breaks `npm run build`, webpack watching, and is generally brittle. Do the font replacement hacking with `string-replace-loader`, which fits into webpack much more nicely. There is still some potential simplification by not duplicating the entire scss loader chain. Co-authored-by: Martin Pitt <martin@piware.de> Closes #315
This commit is contained in:
Katerina Koukiou
GitHub
parent
8adad16874
commit
96514e279e
9 changed files with 178 additions and 19 deletions
20
src/app.jsx
20
src/app.jsx
|
|
@ -19,6 +19,7 @@
|
|||
|
||||
import cockpit from 'cockpit';
|
||||
import React from 'react';
|
||||
import { Alert, Card, CardHead, CardHeader, CardHeadMain, Title } from '@patternfly/react-core';
|
||||
import './app.scss';
|
||||
|
||||
const _ = cockpit.gettext;
|
||||
|
|
@ -35,12 +36,19 @@ export class Application extends React.Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="container-fluid">
|
||||
<h2>Starter Kit</h2>
|
||||
<p>
|
||||
{ cockpit.format(_("Running on $0"), this.state.hostname) }
|
||||
</p>
|
||||
</div>
|
||||
<Card>
|
||||
<CardHead>
|
||||
<CardHeadMain>
|
||||
<Title headingLevel="h2" size="3xl">Starter Kit</Title>
|
||||
</CardHeadMain>
|
||||
</CardHead>
|
||||
<CardHeader>
|
||||
<Alert
|
||||
variant="default"
|
||||
title={ cockpit.format(_("Running on $0"), this.state.hostname) }
|
||||
/>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@ along with this package; If not, see <http://www.gnu.org/licenses/>.
|
|||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link rel="stylesheet" href="../base1/patternfly.css">
|
||||
<link rel="stylesheet" href="index.css">
|
||||
|
||||
<script type="text/javascript" src="../base1/cockpit.js"></script>
|
||||
|
|
@ -30,7 +29,7 @@ along with this package; If not, see <http://www.gnu.org/licenses/>.
|
|||
<script type="text/javascript" src="index.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="pf-m-redhat-font">
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
10
src/index.js
10
src/index.js
|
|
@ -17,11 +17,21 @@
|
|||
* along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import "./lib/patternfly-4-cockpit.scss";
|
||||
|
||||
import "core-js/stable";
|
||||
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { Application } from './app.jsx';
|
||||
/*
|
||||
* PF4 overrides need to come after the JSX components imports because
|
||||
* these are importing CSS stylesheets that we are overriding
|
||||
* Having the overrides here will ensure that when mini-css-extract-plugin will extract the CSS
|
||||
* out of the dist/index.js and since it will maintain the order of the imported CSS,
|
||||
* the overrides will be correctly in the end of our stylesheet.
|
||||
*/
|
||||
import "./lib/patternfly-4-overrides.scss";
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
ReactDOM.render(React.createElement(Application, {}), document.getElementById('app'));
|
||||
|
|
|
|||
36
src/lib/_fonts.scss
Normal file
36
src/lib/_fonts.scss
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
/*
|
||||
* Keep in sync with https://github.com/cockpit-project/cockpit/tree/master/src/base1/_fonts.scss
|
||||
*/
|
||||
|
||||
@mixin printRedHatFont(
|
||||
$weightValue: 400,
|
||||
$weightName: "Regular",
|
||||
$familyName: "RedHatText",
|
||||
$style: "normal",
|
||||
$relative: true
|
||||
) {
|
||||
$filePath: "../../static/fonts" + "/" + $familyName + "-" + $weightName;
|
||||
@font-face {
|
||||
font-family: $familyName;
|
||||
src: url('#{$filePath}.woff2') format('woff2');
|
||||
font-style: #{$style};
|
||||
font-weight: $weightValue;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
}
|
||||
|
||||
@include printRedHatFont(700, "Bold", $familyName: "RedHatDisplay");
|
||||
@include printRedHatFont(700, "BoldItalic", $style: "italic", $familyName: "RedHatDisplay");
|
||||
@include printRedHatFont(300, "Black", $familyName: "RedHatDisplay");
|
||||
@include printRedHatFont(300, "BlackItalic", $style: "italic", $familyName: "RedHatDisplay");
|
||||
@include printRedHatFont(300, "Italic", $style: "italic", $familyName: "RedHatDisplay");
|
||||
@include printRedHatFont(400, "Medium", $familyName: "RedHatDisplay");
|
||||
@include printRedHatFont(400, "MediumItalic", $style: "italic", $familyName: "RedHatDisplay");
|
||||
@include printRedHatFont(300, "Regular", $familyName: "RedHatDisplay");
|
||||
|
||||
@include printRedHatFont(300, "Bold");
|
||||
@include printRedHatFont(300, "BoldItalic", $style: "italic");
|
||||
@include printRedHatFont(300, "Italic");
|
||||
@include printRedHatFont(700, "Medium");
|
||||
@include printRedHatFont(700, "MediumItalic", $style: "italic");
|
||||
@include printRedHatFont(400, "Regular");
|
||||
14
src/lib/patternfly-4-cockpit.scss
Normal file
14
src/lib/patternfly-4-cockpit.scss
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
/*
|
||||
* Keep in sync with https://github.com/cockpit-project/cockpit/tree/master/src/base1/patternfly-4-cockpit.scss
|
||||
*/
|
||||
|
||||
/* Set fake font and icon path variables - we are going to indentify these through
|
||||
* string replacement and remove the relevant font-face declarations
|
||||
*/
|
||||
$pf-global--font-path: 'patternfly-fonts-fake-path';
|
||||
$pf-global--fonticon-path: 'patternfly-icons-fake-path';
|
||||
$pf-global--disable-fontawesome: true !default; // Disable Font Awesome 5 Free
|
||||
@import '@patternfly/patternfly/patternfly-base.scss';
|
||||
|
||||
/* Import our own fonts since the PF4 font-face rules are filtered out with patternfly.sed */
|
||||
@import "./fonts";
|
||||
43
src/lib/patternfly-4-overrides.scss
Normal file
43
src/lib/patternfly-4-overrides.scss
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
/*
|
||||
* Keep in sync with https://github.com/cockpit-project/cockpit/tree/master/pkg/lib/patternfly-4-overrides.scss
|
||||
*/
|
||||
|
||||
/*** PF4 overrides ***/
|
||||
|
||||
/* WORKAROUND: Override word-break bug */
|
||||
/* See: https://github.com/patternfly/patternfly-next/issues/2325 */
|
||||
.pf-c-table td {
|
||||
word-break: normal;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
/* WORKAROUND: Dropdown (PF4): Caret is not properly aligned bug */
|
||||
/* See: https://github.com/patternfly/patternfly/issues/2715 */
|
||||
/* Align the icons inside of all dropdown toggles. */
|
||||
/* Part 1 of 2 */
|
||||
.pf-c-dropdown__toggle-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Make split button dropdowns the same height as their sibling. */
|
||||
/* Part 2 of 2 */
|
||||
.pf-m-split-button {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
/* WORKAROUND: Navigation problems with Tertiary Nav widget on mobile */
|
||||
/* See: https://github.com/patternfly/patternfly-design/issues/840 */
|
||||
/* Helper mod to wrap pf-c-nav__tertiary */
|
||||
.ct-m-nav__tertiary-wrap {
|
||||
flex-wrap: wrap;
|
||||
|
||||
.pf-c-nav__scroll-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Helper mod to center pf-c-nav__tertiary when it wraps */
|
||||
.ct-m-nav__tertiary-center {
|
||||
justify-content: center;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue