Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add CSS variables - prerequisite for Dark mode #4752

Merged
merged 31 commits into from
May 31, 2020
Merged

Add CSS variables - prerequisite for Dark mode #4752

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
7606a10
JENKINS-60924 Add PostCSS pre-processor
95jonpet May 26, 2020
611f6ad
Add alpha support for CSS variables
timja May 26, 2020
a7934a7
Yui theming and side panel fixes
timja May 27, 2020
a9b9310
More overrides
timja May 27, 2020
7b04563
Revert "More overrides"
timja May 27, 2020
94b9311
Add manage styles
timja May 27, 2020
cb37c39
Tweak buttons
timja May 27, 2020
f824f3a
Fix IE 11
timja May 27, 2020
670b907
Review comments
timja May 27, 2020
78928fa
Standardize dark link variables
fqueiruga May 28, 2020
19f931d
Rename variables to BEM-like status
fqueiruga May 28, 2020
48610d5
Renames background variables to bg
fqueiruga May 28, 2020
330b6f3
Merge remote-tracking branch 'fqueiruga/rename-background-variables' …
timja May 28, 2020
d0fbb44
Rename last bg variable
fqueiruga May 28, 2020
86c0bd0
Update war/src/main/less/abstracts/colors.less
timja May 28, 2020
daf9cd3
Mostly complete add job screen
timja May 28, 2020
4b5b72d
Merge branch 'dark-mode' of github.com:timja/jenkins into dark-mode
timja May 29, 2020
999c71f
Fix configure job, help, preview text
timja May 29, 2020
d5398ee
Merge pull request #6 from fqueiruga/rename-bg-variable
timja May 29, 2020
23fdc52
Merge branch 'master' into dark-mode
timja May 29, 2020
461805f
Merge branch 'dark-mode' of github.com:timja/jenkins into dark-mode
timja May 29, 2020
37d2e15
Fix typo
timja May 29, 2020
fb31dd1
Rename to border-radius
timja May 29, 2020
6627e85
Update core/src/main/resources/lib/layout/breadcrumbs.css
timja May 29, 2020
f9df961
Plugin manager fixes
timja May 29, 2020
07abb84
Typo fix
timja May 29, 2020
2faf971
Fix secretTextarea
timja May 29, 2020
c12b42c
Fix admin monitor pop out
timja May 29, 2020
49e501f
Fix autocomplete on addJob
timja May 29, 2020
cbfc042
Fix CLI dark mode
timja May 29, 2020
fbdd4d7
Plugin manager categories themeable
timja May 29, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions core/src/main/resources/lib/form/password/password.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,9 @@
}

.hidden-password-legend {
border: 1px solid #ccc;
border: 1px solid var(--input-border);
timja marked this conversation as resolved.
Show resolved Hide resolved
border-radius: 3px;
background: #f9f9f9;
background: var(--input-hidden-password-background-color);
flex-grow: 1;
align-items: center;
display: inline-flex;
Expand All @@ -41,8 +41,8 @@
}

.hidden-password input[type='button'] {
background: #4b99d0;
color: #fff;
background: var(--btn-primary-bg);
color: var(--btn-text-color);
border-radius: 4px;
border: none;
padding: 7px;
Expand Down
10 changes: 5 additions & 5 deletions core/src/main/resources/lib/layout/breadcrumbs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
font-size: 1rem;
line-height: 1.5;
padding: 0 1.25rem;
background-color: #F8F8F8;
background-color: var(--breadcrumbs-bg);
timja marked this conversation as resolved.
Show resolved Hide resolved
}

#breadcrumbs {
Expand Down Expand Up @@ -49,7 +49,7 @@
}

#breadcrumbs LI:hover, A.breadcrumbBarAnchor.mouseIsOverMenuSelector {
background-color: #e0e4dc;
background-color: var(--breadcrumbs-background-color--hover);
}


Expand All @@ -65,7 +65,7 @@

display: inline-block;
display: inline-flex;
color: #4d545d;
color: var(--breadcrumbs-color--visited);
timja marked this conversation as resolved.
Show resolved Hide resolved
}

#breadcrumbs LI A:hover, #breadcrumbs LI A:focus {
Expand Down Expand Up @@ -100,7 +100,7 @@
}

#breadcrumbs LI.children:hover {
background-image: url(menu_right_arrow.png);
background-image: var(--menu-selector-right-background-image--hover);
}

#breadcrumbs LI.separator:last-child {/* separators are for in-between only */
Expand All @@ -109,7 +109,7 @@

#menuSelector {/* used for showing 'v' on the right of the anchor */
background-color:transparent;
background-image: url(menu_down_arrow.png);
background-image: var(--menu-selector-down-background-image);
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

anyone able to check if this works on IE 11?

image

I suspect that it needs a manual fallback, looks like the postcss processor isn't adding the fallback for it

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems to work on i.e but the entire dark theme doesn't

Here is a side by side with ie11 on the left and edge on the right

image

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems to work on i.e but the entire dark theme doesn't

It's not expected to work on IE 11 at all for the theme

Here is a side by side with ie11 on the left and edge on the right

That's not working, at least for fonts, the preprocessor isn't picking them up 😢,

Two options I guess,

  1. this work doesn't really require the fonts to be changeable at runtime, so it could go back to less variables
  2. try out the other postcss plugin and see if that handles fonts, this one only seems to handle colours

cc @fqueiruga

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some more observations I made:

  • The administrative monitor (The bell thing in the top right) still shows white background on the dark theme
  • CLI page has black text with dark theme.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks I’d forgotten about the admin monitor issue, and I hadn’t checked the CLI page

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

BTW I would not bother converting the arrow to a CSS variables. It should be either an icon or a CSS triangle, not an image anyway.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://issues.jenkins-ci.org/browse/JENKINS-62496

background-position: center center;
background-repeat: no-repeat;
width: 15px;
Expand Down
4 changes: 4 additions & 0 deletions war/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"@babel/cli": "^7.7.4",
"@babel/core": "^7.7.4",
"@jenkins-cd/js-test": "^1.2.3",
"autoprefixer": "^9.8.0",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.1.1",
"css-loader": "^3.2.0",
Expand All @@ -37,6 +38,9 @@
"less": "^3.10.3",
"less-loader": "^5.0.0",
"mini-css-extract-plugin": "^0.8.0",
"postcss-custom-properties": "^9.1.1",
"postcss-loader": "^3.0.0",
"style-loader": "^1.2.1",
"stylelint-config-standard": "^19.0.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
Expand Down
7 changes: 7 additions & 0 deletions war/postcss.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
module.exports = {
parser: "postcss-less",
plugins: [
require('autoprefixer'),
require('postcss-custom-properties')
timja marked this conversation as resolved.
Show resolved Hide resolved
timja marked this conversation as resolved.
Show resolved Hide resolved
]
};
8 changes: 4 additions & 4 deletions war/src/main/js/widgets/add/addform.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@
background-color: #f9f9f9;

p.description {
font-size: @font-size-base;
font-size: var(--font-size-base);
margin-top: 0;
}

Expand All @@ -68,7 +68,7 @@
padding-left: 58px;

/* This is needed because <s:textbox /> included YUI styles and we need to override this one */
font-family: @font-family-sans !important;
font-family: var(--font-family-sans) !important;

input[type=radio] {
display: none;
Expand All @@ -94,7 +94,7 @@
.input-help {
color: #666;
font-style: italic;
font-size: @font-size-sm;
font-size: var(--font-size-sm);
padding-top: 2px;
}

Expand Down Expand Up @@ -318,7 +318,7 @@

label {
display: block;
font-size: @font-size-base;
font-size: var(--font-size-base);
font-weight: bold;
color: #000;
padding-bottom: 5px;
Expand Down
10 changes: 5 additions & 5 deletions war/src/main/js/widgets/config/tabbar.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,13 +37,13 @@
.showTabs,
.noTabs {
position: absolute;
border-radius: @radius;
border-radius: var(--radius);
timja marked this conversation as resolved.
Show resolved Hide resolved
right: 5px;
top: 5px;
cursor: pointer;
color: @solid-border;
text-shadow: @brightest 0 1px 2px;
font-size: @font-size-sm;
font-size: var(--font-size-sm);
padding: 3px 7px;
display:none;
}
Expand Down Expand Up @@ -208,7 +208,7 @@
p,
.help,
.setting-description {
font-size: @font-size-base;
font-size: var(--font-size-base);
}
}
td[colspan="4"]:empty{
Expand Down Expand Up @@ -282,8 +282,8 @@
padding: 0 !important;
margin: 0 !important;
.border-radius-top(0) !important;
background-color: @danger;
color: @light-background;
background-color: var(--danger);
color: var(--light-background);
border: 1px solid @danger-line;
line-height: 12px !important;
display: inline-block;
Expand Down
2 changes: 1 addition & 1 deletion war/src/main/js/widgets/form/form-mixins.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,4 +48,4 @@
opacity: 1.0;
}
}
}
}
2 changes: 1 addition & 1 deletion war/src/main/js/widgets/layout-mixins.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,4 +66,4 @@

.hidden {
display: none;
}
}
Loading