プロジェクト

全般

プロフィール

Vote #80280

完了

Change the color of the input field frame when in focus

Admin Redmine さんが約4年前に追加. 約4年前に更新.

ステータス:
Closed
優先度:
通常
担当者:
-
カテゴリ:
UI_10
対象バージョン:
開始日:
2022/05/09
期日:
進捗率:

0%

予定工数:
category_id:
10
version_id:
127
issue_org_id:
31971
author_id:
259873
assigned_to_id:
332
comments:
11
status_id:
5
tracker_id:
3
plus1:
0
affected_version:
closed_on:
affected_version_id:
ステータス-->[Closed]

説明

In Redmine 4.0, the frame color changed when the input field was focused.
When the trunk Redmine is run on a browser such as Firefox, the frame color no changes.

I attached a patch to change the frame color.
Screenshot after patching:
!{width: 500px; border: 1px solid #ccc}ScreenShot-2019-08-29-9.33.14.png!


journals

--------------------------------------------------------------------------------
Subjectの部分を一回目クリックした場合は、
Hoverしたデータのリストが表示されますが、
他のText Areaをクリックした後、再度Subjectをクリックしても、
Hoverしたデータのリストが表示されないです。

Sorry. English is no good. use Japanese.
--------------------------------------------------------------------------------
kim kk wrote:
> Sorry. English is no good. use Japanese.

Thank you for your feedback. I will add English translation to #31971#note-2 later.

--------------------------------------------------------------------------------
kim kk wrote:
> Subjectの部分を一回目クリックした場合は、
> Hoverしたデータのリストが表示されますが、
> 他のText Areaをクリックした後、再度Subjectをクリックしても、
> Hoverしたデータのリストが表示されないです。

Do you mean that the patch breaks the auto-complete feature? I could not reproduce the problem. The patch changes only the appearance of elements, so I think it does not affect auto-complete.

Could you describe the detailed steps to reproduce and attach screenshots?
--------------------------------------------------------------------------------
I tried out the patch with Firefox. It made the appearance nicer but I round a problem. Input fields have rounded corners, but the corners of the outline are not rounded.

!{border: 1px solid #ccc;}.corners-not-rounded.png!

How about updating the patch as follows? I think it makes the appearance much nicer.

<pre><code class="diff">
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index b66a07e7d..7c5eb5838 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -484,6 +484,16 @@ input[type="submit"] {
input[type="submit"]:hover {
background-color: #ddd;
}
+
+input[type="text"]:focus, input[type="text"]:active,
+input[type="password"]:focus, input[type="password"]:active,
+input[type="date"]:focus, input[type="date"]:active,
+select:focus, select:active,
+textarea:focus, textarea:active {
+ border: 1.5px solid #5ad;
+ outline: none;
+}
+
select[multiple=multiple] {background: #fff; padding-right: initial; height: auto;}
fieldset {border: 1px solid #e4e4e4; margin:0; min-width: inherit;}
legend {color: #333;}
</code></pre>

!{border: 1px solid #ccc;}.rounded-outline.png!
--------------------------------------------------------------------------------
Setting the target version to 4.1.0.
--------------------------------------------------------------------------------
Go MAEDA wrote:
> I tried out the patch with Firefox. It made the appearance nicer but I round a problem. Input fields have rounded corners, but the corners of the outline are not rounded.
> How about updating the patch as follows? I think it makes the appearance much nicer.
>
> [...]

The change looks better!
I think it would be better to change "border: 1.5px" to “border: 1px” to match the existing border style.

<pre><code class="diff">
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index 04fc3ae12..edf96d4fe 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -484,6 +484,16 @@ input[type="submit"] {
input[type="submit"]:hover {
background-color: #ddd;
}
+
+input[type="text"]:focus, input[type="text"]:active,
+input[type="password"]:focus, input[type="password"]:active,
+input[type="date"]:focus, input[type="date"]:active,
+select:focus, select:active,
+textarea:focus, textarea:active {
+ border: 1px solid #5ad;
+ outline: none;
+}
+
select[multiple=multiple] {background: #fff; padding-right: initial; height: auto;}
fieldset {border: 1px solid #e4e4e4; margin:0; min-width: inherit;}
legend {color: #333;}

</code></pre>
--------------------------------------------------------------------------------
Mizuki ISHIKAWA wrote:
> The change looks better!
> I think it would be better to change "border: 1.5px" to “border: 1px” to match the existing border style.

Thank you for your feedback. I think the patch in #31971#note-7 is ready to commit.

--------------------------------------------------------------------------------
Committed the patch. Thank you.
--------------------------------------------------------------------------------
Go Maeda, Mizuki, is there any reason for why you chose to target each type of @input@ instead of using @input@?

<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..169b1ef48 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -512,10 +512,7 @@ input[type="submit"]:hover {
background-color: #ddd;
}

-input[type="text"]:focus, input[type="text"]:active,
-input[type="password"]:focus, input[type="password"]:active,
-input[type="date"]:focus, input[type="date"]:active,
-input[type="number"]:focus, input[type="number"]:active,
+input:focus, input:active,
select:focus, select:active,
textarea:focus, textarea:active {
border: 1px solid #5ad;
</code></pre>
--------------------------------------------------------------------------------

--------------------------------------------------------------------------------


related_issues

relates,Closed,31147,Add custom styles for all fields

Admin Redmine さんが約4年前に更新

  • カテゴリUI_10 にセット
  • 対象バージョン4.1.0_127 にセット

他の形式にエクスポート: Atom PDF

いいね!0
いいね!0