Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve Option Panel Header "On Hover" Color #117

Closed
raamdev opened this issue Jul 14, 2015 · 6 comments
Closed

Improve Option Panel Header "On Hover" Color #117

raamdev opened this issue Jul 14, 2015 · 6 comments
Assignees
Milestone

Comments

@raamdev
Copy link
Contributor

@raamdev raamdev commented Jul 14, 2015

When hovering over the option panels in Comment Mail, the header changes to a bright green color, which is so totally different than the default blue color that it creates a lot of distraction and emotional stress when moving the mouse over many option panels at once.

2015-07-14_17-44-55

I suggest we change it to something that goes better with the default blue color, but is enough of a contrast that it stands out when you hover over it, something like #142D4D:

2015-07-14_17-46-20

@jaswrks
Copy link

@jaswrks jaswrks commented Jul 21, 2015

Next Actions

Prerequisites

  • Install the YUI Compressor

    $ brew install yuicompressor

Start a New Feature Branch

Assuming you have already cloned the repos locally.

$ cd ~/projects/websharks/comment-mail-pro
$ git checkout 000000-dev # Start from the dev branch.
$ git pull # Pull the latest changes into your 000000-dev branch.
$ git checkout -b feature/117 # Start a new feature branch.

Make Changes

See: https://github.com/websharks/comment-mail-pro/blob/000000-dev/comment-mail-pro/client-s/css/menu-pages.css#L825-L830

What we have now...

.comment-mail-menu-page .pmp-panel-heading:hover,
.comment-mail-menu-page .pmp-panel-heading.open
{
    background : #307D27;
    color            : #FFFFFF !important;
}

What we need to do ...

Separate this into two different selectors and set a different color for the hover state.

.comment-mail-menu-page .pmp-panel-heading:hover
{
    background : #2D5587;
    color            : #FFFFFF !important;
}
.comment-mail-menu-page .pmp-panel-heading.open
{
    background : #307D27;
    color            : #FFFFFF !important;
}

Note: Don't feel the need to follow my instructions exactly here. If you feel that you can improve anything else in the CSS or in the UI, go right ahead and do your own thing! It might help to read over Raam's details above and then build upon his ideas :-)

See also: The IMPORTANT NOTE in the next step.


Compress Into menu-pages.min.css

Notice there are two CSS files for the menu pages listed here:
https://github.com/websharks/comment-mail/tree/150709/comment-mail/client-s/css

This is actually the same file. One is the development copy, and the other is a compressed version of the CSS; i.e., menu-pages.min.css. What you need to do is take the development copy that you are working from: menu-pages.css and compile this into menu-pages.min.css

IMPORTANT NOTE: You will need to do this even during your own testing, because it's the minified file that Comment Mail loads into the dashboard. Thus, changing menu-pages.css without minifying the file doesn't really do anything. Make a change, minify, then test. Make a change, minify, then test again. Or, rename the file to menu-pages.min.css temporarily while you are working on things.

Run YUI Compressor from the command line:

$ yuicompressor ~/projects/websharks/comment-mail-pro/comment-mail-pro/client-s/css/menu-pages.css -o ~/projects/websharks/comment-mail-pro/comment-mail-pro/client-s/css/menu-pages.min.css --charset utf-8 --type css

Commit and Push Changes

$ cd ~/projects/websharks/comment-mail-pro
$ git add --all && git commit -m 'UI enhancement; updating menu page colors. See: websharks/comment-mail#117'
$ git push -u origin feature/117

Open Pull Request On GitHub

Open a pull request on GitHub and ask for your enhancements to be merged into the dev branch.


Repeat for Lite version of Comment Mail

Repeat the same steps and bring the Comment Mail lite copy up-to-date.

@kristineds
Copy link
Contributor

@kristineds kristineds commented Jul 21, 2015

@jaswsinc @raamdev Submitted PRs for this:
CM Pro: wpsharks/comment-mail-pro/pull/4
CM Lite: /pull/121

@jaswrks jaswrks removed the in progress label Jul 21, 2015
jaswrks pushed a commit to wpsharks/comment-mail-pro that referenced this issue Jul 21, 2015
Improve Option Panel Header "On Hover" Color. See: wpsharks/comment-mail#117
jaswrks pushed a commit that referenced this issue Jul 21, 2015
Improve Option Panel Header "On Hover" Color. See #117
@jaswrks
Copy link

@jaswrks jaswrks commented Jul 21, 2015

Merged. Thank you.

@kristineds kristineds added this to the Next Release milestone Jul 27, 2015
@raamdev
Copy link
Contributor Author

@raamdev raamdev commented Oct 8, 2015

Next Lite Release Changelog:

  • Enhancement: Improved the on-hover color when hovering the mouse over Option Panels in the Comment Mail Options by changing it from green to dark blue. Props @kristineds. See Issue #117.
@raamdev
Copy link
Contributor Author

@raamdev raamdev commented Oct 8, 2015

Next Pro Release Changelog:

  • Enhancement: Improved the on-hover color when hovering the mouse over Option Panels in the Comment Mail Options by changing it from green to dark blue. Props @kristineds. See Issue #117.
@wpsharks wpsharks locked and limited conversation to collaborators Dec 24, 2015
@raamdev
Copy link
Contributor Author

@raamdev raamdev commented Dec 24, 2015

Comment Mail v151224 has been released and includes changes from this GitHub Issue: See the v151224 announcement for further details.


This issue will now be locked to further updates. If you have something to add related to this GitHub Issue, please open a new GitHub Issue and reference this one (#117).

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants
You can’t perform that action at this time.