Project

General

Profile

Actions

Patch #31147

closed

Add custom styles for all fields

Added by Marius BĂLTEANU almost 5 years ago. Updated over 4 years ago.

Status:
Closed
Priority:
Normal
Assignee:
Category:
UI
Target version:
Start date:
Due date:
% Done:

0%

Estimated time:

Description

Currently, most of the fields (input, textarea, select) don't have any style and the browser renders those fields using its own style (which is different for each browser/OS). The only fields which have a custom style are the fields from login and the custom "Jump to a project" select.

Because of this, it's hard to match some custom styles with the native styles. A good example is the Edit/Preview tabs which have a different border colour from textarea.

I propose to apply the existing custom style to all fields and I'm attaching 2 screenshots with the results and a patch for testing.


Files

border.png (62.7 KB) border.png Marius BĂLTEANU, 2019-04-04 21:24
redmine.local_issues_new.png (281 KB) redmine.local_issues_new.png Marius BĂLTEANU, 2019-04-04 21:41
redmine.local_issues.png (552 KB) redmine.local_issues.png Marius BĂLTEANU, 2019-04-04 21:41
variant_distance_of_caret.png (66.7 KB) variant_distance_of_caret.png Bernhard Rohloff, 2019-04-05 15:10
trackers-table@2x.png (36.6 KB) trackers-table@2x.png Go MAEDA, 2019-04-06 03:29
issues-table@2x.png (59.4 KB) issues-table@2x.png Go MAEDA, 2019-04-06 03:29
issues-before@2x.png (57.5 KB) issues-before@2x.png Go MAEDA, 2019-04-06 03:37
button-color-in-firefox@2x.png (20 KB) button-color-in-firefox@2x.png Go MAEDA, 2019-04-06 03:42
0001-Styles-for-fields.patch (4.54 KB) 0001-Styles-for-fields.patch Marius BĂLTEANU, 2019-04-10 01:59
overlapping_caret.png (11.4 KB) overlapping_caret.png Bernhard Rohloff, 2019-04-11 11:36
form_elements_on_dark_GTK_themes.png (48.1 KB) form_elements_on_dark_GTK_themes.png Bernhard Rohloff, 2019-05-15 13:33
note-27@2x.png (11.3 KB) note-27@2x.png Go MAEDA, 2019-05-21 17:10
after.png (161 KB) after.png Marius BĂLTEANU, 2019-09-28 19:15
current.png (167 KB) current.png Marius BĂLTEANU, 2019-09-28 19:15

Related issues

Related to Redmine - Defect #28339: Some parts are unseen with dark theme.Closed

Actions
Related to Redmine - Patch #31204: Add hover styles to buttonsClosedGo MAEDA

Actions
Related to Redmine - Defect #31216: Multiselect elements don't expand anymoreClosedMarius BĂLTEANU

Actions
Related to Redmine - Defect #31238: The input field of the Gantt chart page is narrowClosedGo MAEDA

Actions
Related to Redmine - Patch #31971: Change the color of the input field frame when in focusClosedGo MAEDA

Actions
Related to Redmine - Defect #32206: Options in a drop-down overlap the down arrow when Alternate theme is usedClosedGo MAEDA

Actions
Related to Redmine - Defect #32981: Unable to distinguish disabled input fieldsClosedGo MAEDA

Actions
Related to Redmine - Defect #24829: Dropdown Mobile view menu partially unreadableClosed

Actions
Blocked by Redmine - Defect #31358: No triangle to open dropdowns in Internet Explorer and EdgeClosedGo MAEDA

Actions
Blocked by Redmine - Defect #31371: "Stay logged in" checkbox in Sign in page is misaligned after r18056ClosedGo MAEDA

Actions
Actions #1

Updated by Bernhard Rohloff almost 5 years ago

  • Related to Defect #28339: Some parts are unseen with dark theme. added
Actions #2

Updated by Bernhard Rohloff almost 5 years ago

I've tested the patch and it looks really great with all the fields having the same style. Very professional.
I've also found a flaw on big screens. Because the caret image is percenutally positioned its distance to the right border varies between fields of different length.

This issue is easy to fix with the calc function of CSS. Perhaps the same style should be applied to the jumpbox, too.

select {
  background: #fff url(../images/arrow_down.png) no-repeat calc( 100% - 7px) 50%;
}
Actions #3

Updated by Go MAEDA almost 5 years ago

  • Target version set to Candidate for next major release
Actions #4

Updated by Go MAEDA almost 5 years ago

The styles look clean and modern. It would be great if the change is delivered in 4.1.0.

But I found some small issues.

1. The hight of the rows is too tall if the row has a checkbox

The height of rows in the issues table and the spent time table will be taller than other tables. I think the height of the issues and spent time table should be the same with other tables for the consistency of UI.

[Issues table without the patch]

[Issues table with the patch]

[Trackers table with the patch]

2. The button color is gray in Firefox

Actions #5

Updated by Bernhard Rohloff almost 5 years ago

IMHO the extra space between the lines helps my eyes to keep track on a specific row. It would be great to keep the extra space and style the missing tables the same way. But I think, that should be a topic of another issue, right. :)

Actions #6

Updated by Marius BĂLTEANU almost 5 years ago

Bernhard Rohloff wrote:

This issue is easy to fix with the calc function of CSS. Perhaps the same style should be applied to the jumpbox, too.

Go MAEDA wrote:

1. The hight of the rows is too tall if the row has a checkbox

2. The button color is gray in Firefox

Thank you for testing the patch. I've fixed all 3 in the attached patch.

Actions #7

Updated by Marius BĂLTEANU almost 5 years ago

  • File deleted (0001-Styles-for-fields.patch)
Actions #8

Updated by Go MAEDA almost 5 years ago

  • Target version changed from Candidate for next major release to 4.1.0

Thank you for updating the patch. It looks REALLY good to me.
Setting the target version to 4.1.0.

Actions #9

Updated by Go MAEDA almost 5 years ago

  • Status changed from New to Closed
  • Assignee set to Go MAEDA

Committed the patch. Thank you for improving Redmine.

Actions #10

Updated by Bernhard Rohloff almost 5 years ago

I found another flaw in the implementation.
Head over to administration > settings and look for protocol and wiki history compression.
The select fields are too small and there is not enough padding on the right hand side to show the caret icon correctly.

Actions #11

Updated by Bernhard Rohloff almost 5 years ago

  • Status changed from Reopened to Closed

Hold on! Everything's fine. My testing environment was using the alternate theme so it's not related to Marius' patch.

Actions #12

Updated by Marius BĂLTEANU almost 5 years ago

  • Related to Patch #31204: Add hover styles to buttons added
Actions #13

Updated by Bernhard Rohloff almost 5 years ago

  • Related to Defect #31216: Multiselect elements don't expand anymore added
Actions #14

Updated by Go MAEDA almost 5 years ago

  • Related to Defect #31238: The input field of the Gantt chart page is narrow added
Actions #15

Updated by Marius BĂLTEANU almost 5 years ago

  • Status changed from Closed to Reopened

Please commit the below small change in order to remove some unnecessary padding.

diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index dbafe14..e347f64 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -460,7 +460,7 @@ select {
   background: #fff url(../images/arrow_down.png) no-repeat calc( 100% - 7px) 50%;
   padding-right: 20px;
 }
-input[type="file"] {border: 0;}
+input[type="file"] {border: 0; padding-left: 0; padding-right: 0;}
 input[type="submit"] {-webkit-appearance: button; cursor: pointer; background-color: #fff;}
 select[multiple=multiple] {background: #fff; padding-right: initial; height: auto;}
 fieldset {border: 1px solid #e4e4e4; margin:0; min-width: inherit;}
Actions #16

Updated by Go MAEDA almost 5 years ago

  • Status changed from Reopened to Closed

Marius BALTEANU wrote:

Please commit the below small change in order to remove some unnecessary padding.

[...]

Confirmed and committed the fix. Thank you.

Actions #17

Updated by Go MAEDA almost 5 years ago

  • Status changed from Closed to Reopened
Actions #18

Updated by Go MAEDA almost 5 years ago

  • Blocked by Defect #31358: No triangle to open dropdowns in Internet Explorer and Edge added
Actions #19

Updated by Go MAEDA almost 5 years ago

  • Status changed from Reopened to Closed

Committed the fix for issue #31358.

Actions #20

Updated by Go MAEDA almost 5 years ago

  • Status changed from Closed to Reopened

I have reported an issue regarding this change as #31371.

Actions #21

Updated by Go MAEDA almost 5 years ago

  • Blocked by Defect #31371: "Stay logged in" checkbox in Sign in page is misaligned after r18056 added
Actions #22

Updated by Bernhard Rohloff almost 5 years ago

We also should set the color of the fields background and font to provide a consistent style on dark themed desktops, too.

If you edit an issue on a GTK desktop with Advaita-dark theme for example it looks like this:

Index: public/stylesheets/application.css
===================================================================
--- public/stylesheets/application.css  (Revision 18164)
+++ public/stylesheets/application.css  (Arbeitskopie)
@@ -450,7 +450,7 @@

 form {display: inline;}
 input, select {vertical-align: middle; margin-top: 1px; margin-bottom: 1px; height: 24px; padding: 0 7px;}
-input, select, textarea {border:1px solid #ccc; border-radius:3px; box-sizing: border-box;}
+input, select, textarea { color: #333; background-color: #fff; border:1px solid #ccc; border-radius:3px; box-sizing: border-box;}
 select {
   -webkit-appearance: none;
   -moz-appearance: none;


Actions #23

Updated by Marius BĂLTEANU almost 5 years ago

Go Maeda, just to know, you have committed the change proposed above by Bernhard as part of the #31391.

Please see http://www.redmine.org/projects/redmine/repository/revisions/18175/diff/trunk/public/stylesheets/application.css

Actions #24

Updated by Go MAEDA almost 5 years ago

Marius BALTEANU wrote:

Go Maeda, just to know, you have committed the change proposed above by Bernhard as part of the #31391.

Sorry, I didn't know the mistake. Do you think if I should revert r18175 and commit #31391 again?

Actions #25

Updated by Marius BĂLTEANU almost 5 years ago

Go MAEDA wrote:

Marius BALTEANU wrote:

Go Maeda, just to know, you have committed the change proposed above by Bernhard as part of the #31391.

Sorry, I didn't know the mistake. Do you think if I should revert r18175 and commit #31391 again?

Not really, I think it is enough to revert only the CSS change and committed it again as part of this ticket.

Actions #26

Updated by Go MAEDA almost 5 years ago

  • Status changed from Reopened to Closed

Committed the patch in #31147#note-22. Thanks.

Actions #27

Updated by Marius BĂLTEANU almost 5 years ago

  • Status changed from Closed to Reopened

One more fix for an issue introduced by r18177:

vagrant@jessie:/vagrant/project/redmine$ git diff
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index 03fd814..c4b138f 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -464,7 +464,7 @@ select {
   background-position: calc(100% - 7px) 50%;
   padding-right: 20px;
 }
-input[type="file"] {border: 0; padding-left: 0; padding-right: 0;}
+input[type="file"] {border: 0; padding-left: 0; padding-right: 0; background-color: initial; }
 input[type="submit"] {
   -webkit-appearance: button;
   cursor: pointer;

Actions #28

Updated by Go MAEDA almost 5 years ago

Marius BALTEANU wrote:

One more fix for an issue introduced by r18177:

[...]

Confirmed.

Actions #29

Updated by Go MAEDA almost 5 years ago

  • Status changed from Reopened to Closed

Committed the fix #31147#note-27 in r18186.

Actions #30

Updated by Go MAEDA over 4 years ago

  • Related to Patch #31971: Change the color of the input field frame when in focus added
Actions #31

Updated by Marius BĂLTEANU over 4 years ago

We should make the disabled fields more obvious using the below patch:

Mariuss-MacBook-Pro:redmine mariusbalteanu$ git diff
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index 95f857074..026e30013 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -522,6 +522,11 @@ textarea:focus, textarea:active {
   outline: none;
 }

+input:disabled, select:disabled, textarea:disabled {
+  cursor: not-allowed;
+  color: graytext;
+}
+

1. Current:

2. After:

Actions #32

Updated by Go MAEDA over 4 years ago

  • Status changed from Reopened to Closed

Marius BALTEANU wrote:

We should make the disabled fields more obvious using the below patch:

Committed the fix in r18548. Thank you.

Actions #33

Updated by Go MAEDA over 4 years ago

  • Related to Defect #32206: Options in a drop-down overlap the down arrow when Alternate theme is used added
Actions #34

Updated by Bernhard Rohloff about 4 years ago

  • Related to Defect #32981: Unable to distinguish disabled input fields added
Actions #35

Updated by Bernhard Rohloff about 3 years ago

  • Related to Defect #24829: Dropdown Mobile view menu partially unreadable added
Actions

Also available in: Atom PDF