Patch #31204

Add hover styles to buttons

Added by Marius BALTEANU 8 months ago. Updated 7 months ago.

Status:ClosedStart date:
Priority:NormalDue date:
Assignee:Go MAEDA% Done:

0%

Category:UI
Target version:4.1.0

Description

Related to #31147.

Before:

On hover there is no effect.

After:

On hover:

Any feedback is welcome.

after.png (13.2 KB) Marius BALTEANU, 2019-04-15 21:43

after-hover.png (13.6 KB) Marius BALTEANU, 2019-04-15 21:43

before.png (12.2 KB) Marius BALTEANU, 2019-04-15 21:44

buttons-vs-input-fields.png (61.2 KB) Bernhard Rohloff, 2019-04-16 09:18

0001-Styles-for-buttons.patch Magnifier (1.21 KB) Marius BALTEANU, 2019-04-17 19:27


Related issues

Related to Redmine - Patch #31147: Add custom styles for all fields Closed

Associated revisions

Revision 18110
Added by Go MAEDA 7 months ago

Add hover styles to buttons (#31204).

Patch by Marius BALTEANU.

History

#1 Updated by Marius BALTEANU 8 months ago

  • Related to Patch #31147: Add custom styles for all fields added

#2 Updated by Bernhard Rohloff 8 months ago

The patch looks a bit odd in my case, because it sets the font size only for the buttons but not for the other input fields.
I think it would be better to set the font-size either for all input fields or for none.
Adding a transition to the hover effect would be a nice icing on the cake. :-)

#3 Updated by Marius BALTEANU 8 months ago

Bernhard Rohloff wrote:

The patch looks a bit odd in my case, because it sets the font size only for the buttons but not for the other input fields.
I think it would be better to set the font-size either for all input fields or for none.
Adding a transition to the hover effect would be a nice icing on the cake. :-)

My bad, sorry for adding the font-size rule.
I've updated the patch:
- removed the font-size rule
- included a basic transition

Bernhard, please feel free to propose improvements to my patch.

#4 Updated by Marius BALTEANU 8 months ago

  • File deleted (0001-Styles-for-buttons.patch)

#5 Updated by Marius BALTEANU 8 months ago

Bernhard Rohloff wrote:

I think it would be better to set the font-size either for all input fields or for none.

I think it is a good idea to add the font-size to all input elements and remove the hardcoded height added by my patches, but I'll try to do it in the near future.

#6 Updated by Bernhard Rohloff 8 months ago

I've tested you changes and I think it looks really great now. LGTM!

#7 Updated by Go MAEDA 8 months ago

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

#8 Updated by Marius BALTEANU 8 months ago

  • Subject changed from Add custom styles to buttons to Add hover styles to buttons

#9 Updated by Go MAEDA 7 months ago

  • Assignee set to Marius BALTEANU

Thank you for the nice improvement. For me, the background color #ddd is a bit too dark. What do you think if the color is changed to #e4e4e4? This is the same color with the border color of some objects such as div.box, table.list, and fieldset.

Index: public/stylesheets/application.css
===================================================================
--- public/stylesheets/application.css    (リビジョン 18106)
+++ public/stylesheets/application.css    (作業コピー)
@@ -461,7 +461,19 @@
   padding-right: 20px;
 }
 input[type="file"] {border: 0; padding-left: 0; padding-right: 0;}
-input[type="submit"] {-webkit-appearance: button; cursor: pointer; background-color: #fff;}
+input[type="submit"] {
+  -webkit-appearance: button;
+  cursor: pointer;
+  background-color: #fff;
+  height: 28px;
+  -webkit-transition: background-color 100ms linear;
+  -moz-transition: background-color 100ms linear;
+  -o-transition: background-color 100ms linear;
+  transition: background-color 100ms linear;
+}
+input[type="submit"]:hover {
+  background-color: #e4e4e4;
+}
 select[multiple=multiple] {background: #fff; padding-right: initial; height: auto;}
 fieldset {border: 1px solid #e4e4e4; margin:0; min-width: inherit;}
 legend {color: #333;}

</diff>

#10 Updated by Marius BALTEANU 7 months ago

I'm ok with any option.

I took the '#ddd' from pagination buttons, maybe we should merge the styles in another ticket.

#11 Updated by Go MAEDA 7 months ago

  • Assignee deleted (Marius BALTEANU)

Marius BALTEANU wrote:

I'm ok with any option.

I took the '#ddd' from pagination buttons, maybe we should merge the styles in another ticket.

Thank you for the clarification. Knowing the reason, I think #ddd is appropriate now.

#12 Updated by Go MAEDA 7 months ago

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

Committed the patch. Thanks.

Also available in: Atom PDF