Project

General

Profile

Actions

Patch #31204

closed

Add hover styles to buttons

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

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

0%

Estimated time:

Description

Related to #31147.

Before:

On hover there is no effect.

After:

On hover:

Any feedback is welcome.


Files

after.png (13.2 KB) after.png Marius BĂLTEANU, 2019-04-15 21:43
after-hover.png (13.6 KB) after-hover.png Marius BĂLTEANU, 2019-04-15 21:43
before.png (12.2 KB) before.png Marius BĂLTEANU, 2019-04-15 21:44
buttons-vs-input-fields.png (61.2 KB) buttons-vs-input-fields.png Bernhard Rohloff, 2019-04-16 09:18
0001-Styles-for-buttons.patch (1.21 KB) 0001-Styles-for-buttons.patch Marius BĂLTEANU, 2019-04-17 19:27

Related issues

Related to Redmine - Patch #31147: Add custom styles for all fieldsClosedGo MAEDA

Actions
Actions #1

Updated by Marius BĂLTEANU over 5 years ago

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

Updated by Bernhard Rohloff over 5 years 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. :-)

Actions #3

Updated by Marius BĂLTEANU over 5 years 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.

Actions #4

Updated by Marius BĂLTEANU over 5 years ago

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

Updated by Marius BĂLTEANU over 5 years 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.

Actions #6

Updated by Bernhard Rohloff over 5 years ago

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

Actions #7

Updated by Go MAEDA over 5 years ago

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

Updated by Marius BĂLTEANU over 5 years ago

  • Subject changed from Add custom styles to buttons to Add hover styles to buttons
Actions #9

Updated by Go MAEDA over 5 years ago

  • Assignee set to Marius BĂLTEANU

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>
Actions #10

Updated by Marius BĂLTEANU over 5 years ago

I'm ok with any option.

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

Actions #11

Updated by Go MAEDA over 5 years ago

  • Assignee deleted (Marius BĂLTEANU)

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.

Actions #12

Updated by Go MAEDA over 5 years ago

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

Committed the patch. Thanks.

Actions

Also available in: Atom PDF