base1: Drop legacy PF3 and cockpit.css

We will replace this with committing patternfly.css (aka cockpit.css) to
RHEL 8's dist-git instead. There is little sense in rebuilding the same
file over and over again, PF3 does not change any more, and we don't
even test this. So it's actually safer to ship a known-good version in
dist-git. If needed, we can rebuild it from an old rhel-8.y branch.
This commit is contained in:
Martin Pitt 2022-06-23 09:09:16 +02:00 committed by Martin Pitt
parent ac9ad17ce7
commit e4b963b158
9 changed files with 1 additions and 734 deletions

@ -1 +1 @@
Subproject commit 303d3a3c0c9a774ad187e41d307e97a6009b000e
Subproject commit 328e35e5ab8ac2af608323e9c635143943383d7f

View File

@ -12,7 +12,6 @@
"js-sha1": "0.6.0",
"js-sha256": "0.9.0",
"json-stable-stringify-without-jsonify": "1.0.1",
"patternfly": "3.59.5",
"prop-types": "15.8.1",
"qunit": "2.18.2",
"qunit-tap": "1.5.1",

View File

@ -26,7 +26,6 @@ EXTRA_DIST += \
pkg/users/mock \
pkg/lib/qunit-template.html \
pkg/lib/cockpit-po-plugin.js \
pkg/lib/patternfly/patternfly-overrides-variables.scss \
$(pkg_TESTS) \
$(metainfo_DATA) \
$(pixmaps_DATA) \

View File

@ -17,14 +17,5 @@
* along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
*/
/*
* WARNING: This is a legacy part of cockpit to produce cockpit.css (aka patternfly.css); retained for backwards compatibility
* Newer code should not include cockpit.css, but let's not break API on RHEL 8
*/
import "../lib/patternfly/patternfly-cockpit.scss";
import "../lib/page.scss";
import "@patternfly/patternfly/components/Button/button.css";
import "../lib/table.css";
// this registers itself as global on window.cockpit
import cockpit from "cockpit"; // eslint-disable-line no-unused-vars

View File

@ -1,7 +0,0 @@
$icon-font-path: 'patternfly-icons-fake-path/';
$font-path: 'patternfly-fonts-fake-path/';
@import "./patternfly-overrides-variables";
@import "patternfly/dist/sass/patternfly";
@import "./patternfly-4-cockpit.scss";
@import "./patternfly-overrides.scss";

View File

@ -1,80 +0,0 @@
//
// Variables
// --------------------------------------------------
//== Colors
//
//## Gray and brand colors for use across Bootstrap.
$gray-base: #000;
$gray-darker: lighten($gray-base, 13.5%); // #222
$gray-dark: lighten($gray-base, 20%); // #333
$gray: lighten($gray-base, 33.5%); // #555
$gray-light: lighten($gray-base, 46.7%); // #777
$gray-lighter: lighten($gray-base, 93.5%); // #eee
$brand-primary: #06c;
$brand-success: #92d400;
$brand-info: #73bcf7;
$brand-warning: #f0ab00;
$brand-danger: #c9190b;
//== Scaffolding
//
//## Settings for some of the most global styles.
//** Background color for `<body>`.
$body-bg: #fafafa;
//** Global text color on `<body>`.
$text-color: #151515;
$navbar-pf-vertical-bg-color: $text-color;
//** Global textual link color.
$link-color: #06c;
$link-hover-color: #004080;
//** Link hover decoration.
$link-hover-decoration: underline;
//** Global color for active items (e.g., navs or dropdowns).
$component-active-color: var(--pf-global--active-color--100);
//** Global background color for active items (e.g., navs or dropdowns).
$component-active-bg: $brand-primary;
//== Buttons
//
//## For each of Bootstrap's buttons, define text, background and border color.
$btn-font-weight: normal;
$btn-default-color: $brand-primary;
$btn-default-bg: #fff;
$btn-default-border: $brand-primary;
$btn-primary-color: #fff;
$btn-primary-bg: $brand-primary;
$btn-primary-border: $brand-primary;
$btn-success-color: #fff;
$btn-success-bg: $brand-success;
$btn-success-border: $btn-success-bg;
$btn-info-color: #fff;
$btn-info-bg: $brand-info;
$btn-info-border: $btn-info-bg;
$btn-warning-color: #fff;
$btn-warning-bg: $brand-warning;
$btn-warning-border: $btn-warning-bg;
$btn-danger-color: #fff;
$btn-danger-bg: $brand-danger;
$btn-danger-border: $btn-danger-bg;
$btn-link-disabled-color: $gray-light;
$line-height-base: 1.5;
$font-size-base : 16px;

View File

@ -1,554 +0,0 @@
// Global Cockpit overrides for PatternFly variables
$font-family-base: "RedHatText", "Open Sans", Helvetica, Arial, sans-serif;
$font-family-mono: SFMono-Regular, menlo, monaco, consolas, "Liberation Mono", Courier New, monospace;
// Resize headings
h1, h2, h3, h4, h5, h6 {
// Reset to default after PF3+Bootstrap; prepare for PF4
font: unset;
// Only adjust font properties for non-PF4 elements
&:not([class*=pf-]) {
line-height: var(--pf-global--LineHeight--sm);
font-family: var(--pf-global--FontFamily--redhatfont--heading--sans-serif);
}
.breadcrumb + & {
// Vertically align contents of headings directly following breadcrumbs
display: flex;
align-items: baseline;
}
}
// Restyle inputs & dropdowns
.input-group-addon,
.dropdown-toggle,
.form-control:not(.ct-select):not(.rbt-input):not(select) {
background-image: none !important;
}
.input-group-addon,
.dropdown-toggle,
.form-control:not(.ct-select) {
border-radius: 3px;
border-color: var(--pf-global--BorderColor--300);
border-bottom-color: var(--pf-global--Color--200);
color: var(--pf-global--Color--100);
box-shadow: none !important;
min-height: 2.25rem;
&:not(.dropdown-form-control) {
padding: 1px 0.5rem;
}
.fa-caret-down {
align-self: center;
&::before {
content: "\f0d7";
}
}
&::placeholder {
color: var(--pf-global--Color--dark-200);
font-style: normal;
}
&:active, &:focus, &:hover {
border-color: var(--pf-global--BorderColor--300);
border-bottom-color: var(--pf-global--primary-color--100);
color: var(--pf-global--Color--100);
}
&:focus {
// Take 1px from the padding and add it to the border
padding-bottom: 0;
border-bottom-width: 2px;
}
&[aria-disabled=true],
&:disabled {
background-color: var(--pf-global--disabled-color--300);
border-color: var(--pf-global--disabled-color--300);
color: var(--pf-global--disabled-color--100);
cursor: not-allowed;
}
.has-error &,
&.has-error {
position: relative;
&, &:hover, &:focus {
border-color: var(--pf-global--BorderColor--300);
border-bottom: 2px solid var(--pf-global--danger-color--100);
}
}
}
// Truncate text in Cockpit/PF3 dropdowns (when necessary)
.dropdown-toggle > span {
overflow: hidden;
text-overflow: ellipsis;
}
// Fix split dropdowns
.input-group:not(.combobox-with-reset){
display: inline-flex;
.combobox-container & {
width: 100%;
}
> .form-control {
display: flex;
flex: auto;
}
> .input-group-addon,
> .dropdown,
> .dropdown-toggle {
display: flex;
width: auto;
align-items: stretch;
}
> .input-group-btn {
width: auto;
> .btn {
min-width: 2.5rem;
}
}
}
// Select dropdowns in Composer & typeahead find
.rbt-input.form-control,
select.form-control {
--dropdown-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='8'%3E%3Cpath fill='%23151515' d='M18.804 1h8.392c.58 0 .87.701.46 1.112L23.46 6.31a.653.653 0 0 1-.922 0l-4.194-4.197A.651.651 0 0 1 18.805 1z'/%3E%3C/svg%3E");
--dropdown-background: var(--pf-global--BackgroundColor--100);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: var(--dropdown-image) no-repeat 100% 50%, var(--dropdown-background) !important;
padding-right: 2.5em !important;
}
// Restyle buttons
.pagination a[role=button],
.btn {
padding: 0.375rem 1rem;
transition: background 0.3s, border 0.3s, color 0.3s;
&:not(.dropdown-toggle):not(.dropdown):not(.ct-select) {
background-image: none !important;
border-radius: 3px;
&:not(:active):not(:focus):not(:hover) {
box-shadow: none !important;
}
&:not(:disabled):not([aria-disabled=true]):not(.btn-link) {
&:not(.btn-primary):not(.btn-success):not(.btn-info):not(.btn-warning):not(.btn-danger) {
&:active, &:focus, &:hover {
border-color: var(--pf-global--primary-color--100);
box-shadow: inset 0 0 0 1px var(--pf-global--primary-color--100);
}
}
}
&.btn-primary {
&:active, &:focus, &:hover {
background-color: var(--pf-global--primary-color--200);
border-color: var(--pf-global--primary-color--200);
}
}
&.btn-success {
&:active, &:focus, &:hover {
background-color: var(--pf-global--success-color--200);
border-color: var(--pf-global--success-color--200);
}
}
&.btn-info {
&:active, &:focus, &:hover {
background-color: var(--pf-global--info-color--200);
border-color: var(--pf-global--info-color--200);
}
}
&.btn-warning {
&:active, &:focus, &:hover {
background-color: var(--pf-global--warning-color--200);
border-color: var(--pf-global--warning-color--200);
}
}
&.btn-danger {
&:active, &:focus, &:hover {
background-color: var(--pf-global--danger-color--200);
border-color: var(--pf-global--danger-color--200);
}
}
&[aria-disabled=true],
&.disabled,
&:disabled {
&:not(.btn-link):not(a) {
&, &:hover {
background-color: var(--pf-global--disabled-color--200) !important;
border-color: var(--pf-global--disabled-color--200) !important;
color: var(--pf-global--disabled-color--100) !important;
cursor: default;
// Backgrounds are a bit too visually weighty in button groups
.btn-group > & {
background-color: var(--pf-global--disabled-color--300) !important;
}
}
}
}
}
@at-root .btn {
&-primary,
&-success,
&-info,
&-warning,
&-danger {
&:active, &:focus, &:hover {
box-shadow: none !important;
}
}
}
// Shrink embedded buttons
.content-filter &,
.action &,
.panel-heading &,
.panel tr & {
padding: 0.125rem 0.5rem;
}
// Restyle button dropdowns to have button borders
.btn-group > & + .dropdown-toggle {
border-color: var(--pf-global--primary-color--100);
&:hover, &:focus {
border-width: 1px;
}
}
// Center-align icon buttons
&.pficon,
&.fa {
display: inline-flex;
align-items: center;
justify-content: center;
}
// Fix up panel action buttons
.panel-actions & {
display: inline-flex;
align-items: center;
min-height: 2rem;
}
}
// Unround touching corners in button and input groups
.btn-group,
.input-group {
> :not(:first-of-type) {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
> :not(:last-of-type) {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
}
// Adjust height of inline edit buttons
.form-control-pf-editable > button {
max-height: 100%;
}
// Pagination buttons
.pagination {
ul, li {
margin: 0;
padding: 0;
}
li {
display: flex;
}
a[role=button] {
display: flex;
height: 2.25rem;
align-items: center;
&[aria-disabled=true],
&:disabled {
// Backgrounds are a bit too visually weighty in pagination
background-color: var(--pf-global--disabled-color--300) !important;
}
}
}
// Restyle modals
.modal {
&-header {
background: var(--pf-global--BackgroundColor--100);
padding: 0 0 1.5rem;
}
&-title {
font-size: 1.5rem;
font-weight: var(--pf-global--FontWeight--normal);
line-height: 1.3;
}
&-content {
padding: 2rem;
}
&-footer {
> .pf-c-button:not(:last-child) {
--pf-c-modal-box__footer--c-button--MarginRight: var(--pf-global--spacer--md);
margin-right: calc(var(--pf-c-modal-box__footer--c-button--MarginRight) / 2);
}
--pf-c-modal-box__footer--MarginTop: var(--pf-global--spacer--xl);
margin-top: var(--pf-c-modal-box__footer--MarginTop);
text-align: unset;
padding: 0;
> .pf-c-button:first-of-type {
--pf-c-modal-box__footer__c-button--first-of-type--MarginLeft: 0;
margin-left: var(--pf-c-modal-box__footer__c-button--first-of-type--MarginLeft);
}
}
&-body {
padding: 0;
}
}
// Standardize small font size to PF4 small font
small {
font-size: var(--pf-global--FontSize--sm);
}
// Bump content away from cards
.content,
.container {
--container-padding-x: var(--pf-global--spacer--md);
--container-padding-y: var(--pf-global--spacer--lg);
--container-padding: var(--container-padding-y) var(--container-padding-x);
padding: var(--container-padding);
.cards-pf + & {
padding-top: var(--pf-global--spacer--md);
}
}
@media screen and (min-width: 768px) {
// Add PF4 padding to desktop mode
.content,
.container {
--container-padding-x: var(--pf-global--spacer--lg);
--container-padding-y: var(--pf-global--spacer--xl);
.breadcrumb,
.breadcrumb + & {
padding-top: 0;
}
}
// Remove excess padding from dialogs
.modal-dialog .content {
padding: 0;
}
}
// Bump content away from cards
.content,
.container {
.cards-pf + & {
padding-top: 1rem;
}
}
// Change label size & weight to match PF4
label {
font-weight: normal;
}
.help-block,
.label,
.control-label,
th > label {
font-weight: normal;
font-size: var(--pf-global--FontSize-s);
}
// Adjust labels in tables
// (used in accounts & containers)
td > label,
th > label {
vertical-align: baseline;
// Fake spacing (not quite right, but close)
padding: 0.125rem 0.25rem 0 0.5rem;
}
// Adjust nav tab sizes
.nav-tabs {
font-size: var(--pf-global--FontSize-s);
> li {
> a {
padding: 0.75rem 1rem;
position: relative;
}
&.active > a {
&::before {
position: absolute;
height: 2px;
top: -1px;
left: -1px;
right: -1px;
content: "";
background: var(--pf-global--active-color--100);
pointer-events: none;
}
// PF table uses tertitiary nav, which has a bottom line
.pf-c-table__expandable-row &::before {
top: auto;
bottom: 0;
}
}
}
}
// Add a PF4 shadow to panels
.panel {
box-shadow: var(--pf-global--BoxShadow--sm);
}
// Change breadcrumb font size
.breadcrumb {
padding: 1rem 0;
font-size: var(--pf-global--FontSize--sm);
}
// Adjust modal dialog sizes
.modal {
&-dialog {
width: auto;
max-width: 45rem;
}
&-sm {
max-width: 35rem;
}
&-lg {
max-width: 60rem;
}
}
// Bump down graph text size
.server-graph {
font-size: var(--pf-global--FontSize--xs);
}
// Flatten the progress bar trough
.progress {
box-shadow: none;
}
// Adjust spacing of expand/collapse divider
.expand-collapse-pf .expand-collapse-pf-separator.bordered {
margin-top: 1rem;
}
/* Style tooltips to resemble PF4 */
.tooltip {
// Make it 100% opaque
&.in { opacity: 1; }
// Recolor the arrows
&.top &-arrow { border-top-color: var(--pf-global--BackgroundColor--dark-100); }
&.right &-arrow { border-right-color: var(--pf-global--BackgroundColor--dark-100); }
&.bottom &-arrow { border-bottom-color: var(--pf-global--BackgroundColor--dark-100); }
&.left &-arrow { border-left-color: var(--pf-global--BackgroundColor--dark-100); }
// Match content background, padding, fonts, etc. to PF4 tooltips
&-inner {
background: var(--pf-global--BackgroundColor--dark-100);
font-size: var(--pf-global--FontSize--sm);
line-height: var(--pf-global--LineHeight--md);
padding: var(--pf-global--spacer--sm) var(--pf-global--spacer--md);
text-align: center;
}
}
/* Round off badges, similar to PF4 */
.badge {
border-radius: 30em;
}
/* Fix PF3 carets */
.caret {
/* PF3 oddly uses borders and a dropdown triangle */
border: none;
&::before {
/* Use a solid triangle, like PF4, not the lined "v" icon */
content: "\f0d7";
}
}
// Fix small icon size (for Composer)
.pf-icon-small::before {
// PF3 uses (1.7em * 12px = 20.4px); PF4 1.25rem = 20px
font-size: 1.25rem;
}
// Fix small list icon size (for Composer)
.list-pf-icon-small::before {
// PF3 uses (1.4em * 12px = 16.8px); PF4 1rem = 16px
font-size: 1rem;
}
:root {
font-size: $font-size-base;
}
/* Reset PF3 margin for PF4; needs to be specificity of 2 to override PF3 and let PF4 set margins too */
input.pf-c-checkbox__input,
input.pf-c-radio__input {
margin: unset;
}
// Adjust non-classed number inputs, to fix stepper alignment.
// (PF4 always uses the pf-c-form-control class on number inputs.)
// Issue: https://github.com/patternfly/patternfly-3/issues/255
input[type=number]:not(.pf-c-form-control) {
padding: 0 0 0 5px;
}
p + p {
// The mix of PF3 and PF4 removes margin from paragraphs.
// We want successive paragraphs to have spaces between each other.
margin-top: var(--pf-global--spacer--md);
}
.blank-slate-pf .spinner-lg {
height: 58px;
width: 58px;
}

View File

@ -182,23 +182,10 @@ install -p -m 644 tools/cockpit.pam $RPM_BUILD_ROOT%{_sysconfdir}/pam.d/cockpit
rm -f %{buildroot}/%{_libdir}/cockpit/*.so
install -D -p -m 644 AUTHORS COPYING README.md %{buildroot}%{_docdir}/cockpit/
# only ship deprecated PatternFly API for stable releases
%if 0%{?rhel} == 8
if [ -f %{buildroot}/%{_datadir}/cockpit/base1/cockpit.css.gz ]; then
ln -s cockpit.css.gz %{buildroot}/%{_datadir}/cockpit/base1/patternfly.css.gz
elif [ -f %{buildroot}/%{_datadir}/cockpit/base1/cockpit.css ]; then
ln -s cockpit.css %{buildroot}/%{_datadir}/cockpit/base1/patternfly.css
else
echo >&2 Neither cockpit.css.gz nor cockpit.css exists.
exit 1
fi
%endif
# Build the package lists for resource packages
# cockpit-bridge is the basic dependency for all cockpit-* packages, so centrally own the page directory
echo '%dir %{_datadir}/cockpit' > base.list
echo '%dir %{_datadir}/cockpit/base1' >> base.list
echo '%dir %{_datadir}/cockpit/base1/fonts' >> base.list
find %{buildroot}%{_datadir}/cockpit/base1 -type f -o -type l >> base.list
echo '%{_sysconfdir}/cockpit/machines.d' >> base.list
echo %{buildroot}%{_datadir}/polkit-1/actions/org.cockpit-project.cockpit-bridge.policy >> base.list

View File

@ -311,13 +311,6 @@ if (section) {
}
info.files = files;
// base1 fonts for cockpit-bridge package
const base1_fonts = [
{ from: path.resolve(nodedir, 'patternfly/dist/fonts/fontawesome-webfont.woff'), to: 'base1/fonts/fontawesome.woff' },
{ from: path.resolve(nodedir, 'patternfly/dist/fonts/glyphicons-halflings-regular.woff'), to: 'base1/fonts/glyphicons.woff' },
{ from: path.resolve(nodedir, 'patternfly/dist/fonts/PatternFlyIcons-webfont.woff'), to: 'base1/fonts/patternfly.woff' },
];
// main font for all our pages
const redhat_fonts = [
"Text-Bold", "Text-BoldItalic", "Text-Italic", "Text-Medium", "Text-MediumItalic", "Text-Regular",
@ -373,9 +366,6 @@ if (stylelint) {
}));
}
if (section.startsWith('base1'))
plugins.push(new Copy({ patterns: base1_fonts }));
if (section.startsWith('static'))
plugins.push(new Copy({ patterns: redhat_fonts }));
@ -457,64 +447,6 @@ module.exports = {
exclude: /\/node_modules|\/test-/,
use: "babel-loader"
},
/* HACK: remove unwanted fonts from PatternFly's css */
{
test: /patternfly-cockpit.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: !production,
url: false,
},
},
{
loader: 'string-replace-loader',
options: {
multiple: [
{
search: /src: ?url[(]"patternfly-icons-fake-path\/glyphicons-halflings-regular[^}]*/g,
replace: 'font-display:block; src:url("../base1/fonts/glyphicons.woff") format("woff");',
},
{
search: /src: ?url[(]"patternfly-fonts-fake-path\/PatternFlyIcons[^}]*/g,
replace: 'src:url("../base1/fonts/patternfly.woff") format("woff");',
},
{
search: /src: ?url[(]"patternfly-fonts-fake-path\/fontawesome[^}]*/,
replace: 'font-display:block; src:url("../base1/fonts/fontawesome.woff?v=4.2.0") format("woff");',
},
{
search: /src: ?url\("patternfly-icons-fake-path\/pficon[^}]*/g,
replace: 'src:url("../base1/fonts/patternfly.woff") format("woff");',
},
{
search: /@font-face[^}]*patternfly-fonts-fake-path[^}]*}/g,
replace: '',
},
]
},
},
{
loader: 'sass-loader',
options: {
sourceMap: !production,
sassOptions: {
quietDeps: true,
outputStyle: production ? 'compressed' : undefined,
includePaths: [
// Teach webpack to resolve these references in order to build PF3 scss
path.resolve(nodedir),
path.resolve(nodedir, 'font-awesome-sass', 'assets', 'stylesheets'),
path.resolve(nodedir, 'patternfly', 'dist', 'sass'),
path.resolve(nodedir, 'bootstrap-sass', 'assets', 'stylesheets'),
],
},
},
},
]
},
{
test: /patternfly-4-cockpit.scss$/,
use: [