Patch #31147
Add custom styles for all fields
Status: | Closed | Start date: | ||
---|---|---|---|---|
Priority: | Normal | Due date: | ||
Assignee: | % Done: | 0% | ||
Category: | UI | |||
Target version: | 4.1.0 |
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.
Related issues
Associated revisions
Add custom styles for all fields (#31147).
Patch by Marius BALTEANU.
Remove unnecessary padding (#31147).
Patch by Marius BALTEANU.
Set background color in order to provide a consistent style on GTK dark themes (#31147).
Patch by Bernhard Rohloff.
Fix unintended background color for fields input[type="file"]. (#31147).
Patch by Marius BALTEANU.
Make the disabled fields more obvious (#31147).
Patch by Marius BALTEANU.
History
#1
Updated by Bernhard Rohloff 8 months ago
- Related to Defect #28339: Some parts are unseen with dark theme. added
#2
Updated by Bernhard Rohloff 8 months ago
- File variant_distance_of_caret.png added
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%;
}
#4
Updated by Go MAEDA 8 months ago
- File issues-table@2x.png added
- File trackers-table@2x.png added
- File issues-before@2x.png added
- File button-color-in-firefox@2x.png added
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
#5
Updated by Bernhard Rohloff 8 months 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. :)
#6
Updated by Marius BALTEANU 8 months ago
- File 0001-Styles-for-fields.patch
added
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.
#7
Updated by Marius BALTEANU 8 months ago
- File deleted (
0001-Styles-for-fields.patch)
#10
Updated by Bernhard Rohloff 8 months ago
- File overlapping_caret.png added
- Status changed from Closed to Reopened
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.
#11
Updated by Bernhard Rohloff 8 months 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.
#12
Updated by Marius BALTEANU 8 months ago
- Related to Patch #31204: Add hover styles to buttons added
#13
Updated by Bernhard Rohloff 8 months ago
- Related to Defect #31216: Multiselect elements don't expand anymore added
#14
Updated by Go MAEDA 8 months ago
- Related to Defect #31238: The input field of the Gantt chart page is narrow added
#15
Updated by Marius BALTEANU 7 months 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;}
#18
Updated by Go MAEDA 7 months ago
- Blocked by Defect #31358: No triangle to open dropdowns in Internet Explorer and Edge added
#21
Updated by Go MAEDA 7 months ago
- Blocked by Defect #31371: "Stay logged in" checkbox in Sign in page is misaligned after r18056 added
#22
Updated by Bernhard Rohloff 7 months ago
- File form_elements_on_dark_GTK_themes.png added
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;
#23
Updated by Marius BALTEANU 7 months ago
Go Maeda, just to know, you have committed the change proposed above by Bernhard as part of the #31391.
#25
Updated by Marius BALTEANU 7 months 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.
#26
Updated by Go MAEDA 7 months ago
- Status changed from Reopened to Closed
Committed the patch in #31147#note-22. Thanks.
#27
Updated by Marius BALTEANU 7 months 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;
#28
Updated by Go MAEDA 7 months ago
- File note-27@2x.png added
#29
Updated by Go MAEDA 7 months ago
- Status changed from Reopened to Closed
Committed the fix #31147#note-27 in r18186.
#30
Updated by Go MAEDA 3 months ago
- Related to Patch #31971: Change the color of the input field frame when in focus added
#31
Updated by Marius BALTEANU 2 months ago
- File after.png added
- File current.png added
- Status changed from Closed to Reopened
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:
#33
Updated by Go MAEDA 2 months ago
- Related to Defect #32206: Options in a drop-down overlap the down arrow when Alternate theme is used added