[55775] Follow-up issues for the Dark mode #16002

bsatarnejad · 2024-07-01T09:59:13Z

https://community.openproject.org/work_packages/55775/activity

HDinger

While testing the checked issues in the ticket, I found some things that are not working as expected:

On the overview page, the graph text is now readable. However, the grid itself is not visible:

The input on the repository page is still white

The table on the cost reports page is also white

Hovering over an attached file (e.g. in documents) still has the white hover effect

When trying to enable a project attribute in a new project I still don't see which projects are already selected and thus disabled in the dropdown (in the screen shot below, "Seeded project" is disabled)

HDinger · 2024-07-03T06:10:23Z

frontend/src/global_styles/common/select/select.sass

+select
+  -webkit-appearance: none !important
+  -moz-appearance: none !important
+  background: var(--body-background) !important
+  background-image: var(--select-arrow-bg-color-url) !important
+  background-repeat: no-repeat !important
+  background-position-x: 100% !important
+  background-position-y: 5px !important
+  margin-right: 2rem !important
+  padding-right: 2rem !important
+
+  &>option
+    background-color: var(--body-background)


Please double check whether all of this (and the new variable) is really needed. We already have a similar thing here. Ideally, you'd only have to change the $select-arrow-color.

Hi @HDinger,
thanks for the hints, image-triangle() function only receives colors like '#000', we can't pass a variable to it and $select-arrow-color is not a global variable, so I can't map it to another value in primer-mapping file.

HDinger

Hi @bsatarnejad

I have only some minor remarks left 👍

HDinger · 2024-07-04T06:42:02Z

frontend/src/global_styles/openproject/_forms.sass

@@ -157,6 +156,9 @@ select

  &:not(.FormControl-select)
    @if $select-arrow
-      background: transparent url(image-triangle($select-arrow-color)) right 10px center no-repeat


Please remove the image-triangle function as well as it is not used anywhere else

HDinger · 2024-07-04T06:42:50Z

frontend/src/global_styles/content/_autocomplete.sass

@@ -112,7 +112,7 @@ div.autocomplete
  border-color: var(--borderColor-default) !important

 .ng-select-container
-  background-color: transparent !important
+  background-color: var(--body-background) !important


Because of this change, the select fields are now again darker than the other input fields

HDinger · 2024-07-04T06:44:43Z

frontend/src/app/shared/components/work-package-graphs/embedded/wp-embedded-graph.component.ts

@@ -98,10 +98,32 @@ export class WorkPackageEmbeddedGraphComponent {
  }

  protected setChartOptions() {
+    const bodyFontColor= getComputedStyle(document.body).getPropertyValue('--body-font-color');
+    const gridLineColor= getComputedStyle(document.body).getPropertyValue('--borderColor-default');


I know that I brought this example of th doughnut chart up, but I just checked on edge and there, the grid and the scales are not visible at all for these kind of diagrams. There are only shown for some (like the bar chart)

HDinger

Hi @bsatarnejad

I have only one remark left 👍

HDinger · 2024-07-04T13:38:35Z

frontend/src/app/shared/components/work-package-graphs/embedded/wp-embedded-graph.component.ts

@@ -187,4 +187,8 @@ export class WorkPackageEmbeddedGraphComponent {
      this.chartHeight = '100%';
    }
  }
+
+  private isBarChart() {


I think that Bar charts are not the only ones in which we want to show the axis. I think we want to show them for all types except "pie" and "doughnut" (like it was before)

Hi @HDinger
I checked stage, we only show the grid line for bar, horizontal bar and line graphs.
There were no grid lines for pie, doughnut, polar area and radar graph types.

That is right. I confused the lines of the radar and polar area with the axes. My bad 🙈

Nevertheless, there are some issues with this. In dark mode, the lines fir polar area and radar graph typesare invisible:

and in the light mode, the pie and doughnut still display axes:

HDinger

There is still somthing wrong with the charts. In the light mode, I see a grid which helps me identifying the values. In dark mode, those lines are invisible

HDinger

Forget my previous comment, I was on the wrong commit 🤦‍♀️ Everything is looking good 👍

…costs report

github-actions · 2024-07-08T06:39:28Z

	1 Warning
⚠️	This PR has migration-related changes on a release branch. Ping @opf/operations

Generated by 🚫 Danger

bsatarnejad requested a review from HDinger July 2, 2024 14:50

HDinger requested changes Jul 3, 2024

View reviewed changes

bsatarnejad requested a review from HDinger July 3, 2024 12:01

HDinger requested changes Jul 4, 2024

View reviewed changes

bsatarnejad force-pushed the 55775-follow-up-issues-for-the-Dark-mode branch from 065a8b9 to 281363b Compare July 4, 2024 07:15

bsatarnejad changed the base branch from dev to release/14.3 July 4, 2024 07:16

bsatarnejad requested a review from HDinger July 4, 2024 12:21

HDinger reviewed Jul 4, 2024

View reviewed changes

bsatarnejad requested a review from HDinger July 5, 2024 09:22

HDinger requested changes Jul 8, 2024

View reviewed changes

HDinger approved these changes Jul 8, 2024

View reviewed changes

bsatarnejad added 19 commits July 8, 2024 08:38

change font color of charts

d4be7d0

fix color on Wp type form configuration page

9ecb4a1

remove underline text decoration for buttons while hovering

5b83b1d

fix color in cost report rows and background color in select boxes

a620c67

fix arrow color in select box na d use an image for it

a460d17

fix background color for select and ng-select

e3473ba

fix colors of file secotion button

d7418db

fix background color transparency when there is an error

c5ca3aa

fix modal bg color for saving cost report

474d6cc

fix color issues on backlogs module

5f9aad8

fix main menu font-color

a788ef9

fix gridline color for graphs

8b033e7

fix background color of input in repository and table colors in unit …

b56c65b

…costs report

fix arrow color in select native element and hover color over a file

7076de9

remove unused functions

2c87af1

fix bg color for select boxes

4e572ac

show grid lines and ticks only for bar charts

3125879

change border color of gantt chart

fc105d7

fix colors on different graphs

8f45700

bsatarnejad force-pushed the 55775-follow-up-issues-for-the-Dark-mode branch from b2f19ae to 8f45700 Compare July 8, 2024 06:39

bsatarnejad changed the base branch from release/14.3 to dev July 8, 2024 06:39

bsatarnejad merged commit b0fcd01 into dev Jul 8, 2024
13 checks passed

bsatarnejad deleted the 55775-follow-up-issues-for-the-Dark-mode branch July 8, 2024 07:06

oliverguenther restored the 55775-follow-up-issues-for-the-Dark-mode branch July 8, 2024 13:00

oliverguenther deleted the 55775-follow-up-issues-for-the-Dark-mode branch July 8, 2024 13:03

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[55775] Follow-up issues for the Dark mode #16002

[55775] Follow-up issues for the Dark mode #16002

bsatarnejad commented Jul 1, 2024

HDinger left a comment •

edited by bsatarnejad

Loading

HDinger Jul 3, 2024

bsatarnejad Jul 3, 2024

HDinger left a comment

HDinger Jul 4, 2024

HDinger Jul 4, 2024

HDinger Jul 4, 2024

HDinger left a comment

HDinger Jul 4, 2024

bsatarnejad Jul 4, 2024

HDinger Jul 5, 2024

HDinger left a comment

HDinger left a comment

github-actions bot commented Jul 8, 2024

[55775] Follow-up issues for the Dark mode #16002

[55775] Follow-up issues for the Dark mode #16002

Conversation

bsatarnejad commented Jul 1, 2024

HDinger left a comment • edited by bsatarnejad Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

HDinger left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

HDinger left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

HDinger left a comment

Choose a reason for hiding this comment

HDinger left a comment

Choose a reason for hiding this comment

github-actions bot commented Jul 8, 2024

HDinger left a comment •

edited by bsatarnejad

Loading