Vote #79967
完了Add custom styles for all fields
0%
説明
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.
!{width: 70%; border: 1px solid grey!}border.png!
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.
!{width: 70%; border: 1px solid grey!}.redmine.local_issues_new.png!
journals
--------------------------------------------------------------------------------
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.
<pre>
<code class="css">
select {
background: #fff url(../images/arrow_down.png) no-repeat calc( 100% - 7px) 50%;
}
</code></pre>
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
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]
!{border: 1px solid #ccc; width: 676px;}.issues-before@2x.png!
[Issues table with the patch]
!{border: 1px solid #ccc; width: 676px;}.issues-table@2x.png!
[Trackers table with the patch]
!{border: 1px solid #ccc; width: 676px;}.trackers-table@2x.png!
*2. The button color is gray in Firefox*
!{border: 1px solid #ccc; width: 313px;}.button-color-in-firefox@2x.png!
--------------------------------------------------------------------------------
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. :)
--------------------------------------------------------------------------------
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.
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
Thank you for updating the patch. It looks REALLY good to me.
Setting the target version to 4.1.0.
--------------------------------------------------------------------------------
Committed the patch. Thank you for improving Redmine.
--------------------------------------------------------------------------------
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.
!overlapping_caret.png!
--------------------------------------------------------------------------------
Hold on! Everything's fine. My testing environment was using the alternate theme so it's not related to Marius' patch.
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
Please commit the below small change in order to remove some unnecessary padding.
<pre><code class="diff">
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;}
</code></pre>
--------------------------------------------------------------------------------
Marius BALTEANU wrote:
> Please commit the below small change in order to remove some unnecessary padding.
>
> [...]
Confirmed and committed the fix. Thank you.
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
Committed the fix for issue #31358.
--------------------------------------------------------------------------------
I have reported an issue regarding this change as #31371.
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
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:
!{width: 800px;}.form_elements_on_dark_GTK_themes.png!
<pre>
<code class="diff">
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;
</code>
</pre>
--------------------------------------------------------------------------------
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
--------------------------------------------------------------------------------
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?
--------------------------------------------------------------------------------
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.
--------------------------------------------------------------------------------
Committed the patch in #31147#note-22. Thanks.
--------------------------------------------------------------------------------
One more fix for an issue introduced by r18177:
<pre><code class="diff">
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;
</pre></code>
--------------------------------------------------------------------------------
Marius BALTEANU wrote:
> One more fix for an issue introduced by r18177:
>
> [...]</code>
Confirmed.
!{width: 450px; border: 1px solid #ccc;}.note-27@2x.png!
--------------------------------------------------------------------------------
Committed the fix #31147#note-27 in r18186.
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
We should make the disabled fields more obvious using the below patch:
<pre><code class="diff">
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;
+}
+
</code></pre>
1. Current:
!{width:50%}.current.png!
2. After:
!{width:50%}.after.png!
--------------------------------------------------------------------------------
Marius BALTEANU wrote:
> We should make the disabled fields more obvious using the below patch:
Committed the fix in r18548. Thank you.
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
related_issues
relates,Closed,28339,Some parts are unseen with dark theme.
relates,Closed,31204,Add hover styles to buttons
relates,Closed,31216,Multiselect elements don't expand anymore
relates,Closed,31238,The input field of the Gantt chart page is narrow
relates,Closed,31971,Change the color of the input field frame when in focus
relates,Closed,32206,Options in a drop-down overlap the down arrow when Alternate theme is used
relates,Closed,32981,Unable to distinguish disabled input fields
relates,Closed,24829,Dropdown Mobile view menu partially unreadable
blocks,Closed,31358,No triangle to open dropdowns in Internet Explorer and Edge
blocks,Closed,31371,"Stay logged in" checkbox in Sign in page is misaligned after r18056