Summary

Add icons for search, jump-to, start to use them in the new review request page.

Review Request #4470 — Created Aug. 21, 2013 and submitted Aug. 21, 2013, 3:52 p.m.

Information

Owner

david

Repository

Review Board

Branch

master

Bugs

Depends On

Reviewers

Groups

reviewboard

People

Description

Add icons for search, jump-to, start to use them in the new review request page.

This change adds new icons to our spritesheet for searching the repository
list, and a sort of jump-to icon to denote revisions which already have an
existing review request. The jump-to icon is used as part of this change.
Search will be used in a later change.

For the screenshot attached to this, the search icon shown was hacked in using
the chrome devtools, and is not yet used. Adding in a live-filter search for
repositories is a future change (for when there are hundreds, like at certain
big infrastructure companies that start with a V).

Testing Done

- Created a few review requests for committed revisions, then went back to the
  new review request page. Saw the jump-to icon in the right spot.
- Added a div for the search icon using the chrome devtools and saw that it
  looked nice in context.

Files

This is a review from Review Bot.
  Tool: PEP8 Style Checker
  Processed Files:
  Ignored Files:
    reviewboard/static/rb/css/newReviewRequest.less
    reviewboard/static/rb/css/icons.less
    reviewboard/static/rb/images/icons.svg
    reviewboard/static/rb/js/newReviewRequest/views/commitView.js
    reviewboard/static/rb/images/icons.png
    reviewboard/static/rb/images/icons@2x.png

This is a review from Review Bot.
  Tool: Pyflakes
  Processed Files:
  Ignored Files:
    reviewboard/static/rb/css/newReviewRequest.less
    reviewboard/static/rb/css/icons.less
    reviewboard/static/rb/images/icons.svg
    reviewboard/static/rb/js/newReviewRequest/views/commitView.js
    reviewboard/static/rb/images/icons.png
    reviewboard/static/rb/images/icons@2x.png

icons-in-context.png

Have you tried this with it vertically aligned in the box? Wondering if that would look nicer.

david Aug. 21, 2013, 12:45 p.m.

Unfortunately there's no way to do that without resorting to javascript, because CSS.

chipx86 Aug. 21, 2013, 12:55 p.m.

There is. If you know the height of the element you want to align, you can vertically align in a couple different ways, depending on the situation. In this particular case, you can add the following for the style on that icon:

    position: absolute;
    top: 50%;
    margin-top: -10px;

It looks nasty, but that's basically *the* way to do this :)

Another thing to try that I did in my testing and kind of liked was to align the icon to the right of the page. It's less staggered that way, and I can kind of move my mouse down over the icon as I read the commits.

chipx86 Aug. 21, 2013, 12:58 p.m.

I didn't really explain that CSS, but the idea is that you're changing the point for absolute positioning to be the center of the element, by doing the margin-top: -(element_height / 2)px. You can then say that that center point is going to be set at the 50% mark of the parent element (or whatever nearest parent is position: relative or position: absolute), vertically.

Change Summary:

Align right, vertically center.

Diff:

Revision 2 (+77 -38)

Show changes

	reviewboard/static/rb/css/icons.less
	reviewboard/static/rb/css/newReviewRequest.less
	reviewboard/static/rb/images/icons.svg
	reviewboard/static/rb/images/icons.png
	reviewboard/static/rb/images/icons@2x.png
	reviewboard/static/rb/js/newReviewRequest/views/commitView.js

Added Files:

This is a review from Review Bot.
  Tool: PEP8 Style Checker
  Processed Files:
  Ignored Files:
    reviewboard/static/rb/css/newReviewRequest.less
    reviewboard/static/rb/css/icons.less
    reviewboard/static/rb/images/icons.svg
    reviewboard/static/rb/js/newReviewRequest/views/commitView.js
    reviewboard/static/rb/images/icons.png
    reviewboard/static/rb/images/icons@2x.png

This is a review from Review Bot.
  Tool: Pyflakes
  Processed Files:
  Ignored Files:
    reviewboard/static/rb/css/newReviewRequest.less
    reviewboard/static/rb/css/icons.less
    reviewboard/static/rb/images/icons.svg
    reviewboard/static/rb/js/newReviewRequest/views/commitView.js
    reviewboard/static/rb/images/icons.png
    reviewboard/static/rb/images/icons@2x.png

Ship it!

```
Ship It!
```

Status:: Completed
Change Summary:: Pushed to master (c35ee3f).