New design for new Github layout

ProLoser commented 8 years ago

I'm playing around with something like this, would be interested in feedback:

@douglasduteil @blaenk @spalger what do you guys think? Would you prefer not to put these into a dropdown menu?

Unfortunately that dropdown style doesn't stretch out causing the extra long badges to shrink a little (tried making their height fixed). Could use the other dropdown style though:

Source code for later:

<span class="dropdown js-menu-container active" style="
    display: inline-block;
    margin-bottom: -5px;
"><a class="js-selected-navigation-item reponav-item select-menu-button selected" data-selected-links="repo_graphs repo_contributors /cybertk/abao/graphs" href="#">
    <svg height="16" width="12" xmlns="http://www.w3.org/2000/svg" class="octicon octicon-server">
  <path d="M11 6H1c-0.55 0-1 0.45-1 1v2c0 0.55 0.45 1 1 1h10c0.55 0 1-0.45 1-1V7c0-0.55-0.45-1-1-1zM2 9H1V7h1v2z m2 0h-1V7h1v2z m2 0h-1V7h1v2z m2 0h-1V7h1v2zM11 1H1C0.45 1 0 1.45 0 2v2c0 0.55 0.45 1 1 1h10c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1zM2 4H1V2h1v2z m2 0h-1V2h1v2z m2 0h-1V2h1v2z m2 0h-1V2h1v2z m3-1h-1v-1h1v1z m0 8H1c-0.55 0-1 0.45-1 1v2c0 0.55 0.45 1 1 1h10c0.55 0 1-0.45 1-1V12c0-0.55-0.45-1-1-1zM2 14H1V12h1v2z m2 0h-1V12h1v2z m2 0h-1V12h1v2z m2 0h-1V12h1v2z"></path>
</svg> Badges
  </a>
<div class="dropdown-menu-content js-menu-content" style="
    display: block;
">
      <ul class="dropdown-menu dropdown-menu-sw ">
  <div class="dropdown-header">
    Github Omnibox <a class="right" href="#"><svg aria-hidden="true" class="octicon octicon-gear" height="16" role="img" version="1.1" viewBox="0 0 14 16" width="14"><path d="M14 8.77V7.17l-1.94-0.64-0.45-1.09 0.88-1.84-1.13-1.13-1.81 0.91-1.09-0.45-0.69-1.92H6.17l-0.63 1.94-1.11 0.45-1.84-0.88-1.13 1.13 0.91 1.81-0.45 1.09L0 7.23v1.59l1.94 0.64 0.45 1.09-0.88 1.84 1.13 1.13 1.81-0.91 1.09 0.45 0.69 1.92h1.59l0.63-1.94 1.11-0.45 1.84 0.88 1.13-1.13-0.92-1.81 0.47-1.09 1.92-0.69zM7 11c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"></path></svg></a>
  </div>
    <div class="dropdown-divider"></div>
      <a href="http://waffle.io/cybertk/abao" class="dropdown-item "><img src="https://camo.githubusercontent.com/a4abf581b9e675ed9ba3a2c75fe7ff31b4a611d9/68747470733a2f2f62616467652e776166666c652e696f2f6379626572746b2f6162616f2e7376673f6c6162656c3d7265616479267469746c653d5265616479" alt="Stories in Ready" data-canonical-src="https://badge.waffle.io/cybertk/abao.svg?label=ready&amp;title=Ready" style="max-width:100%;"></a>
<a href="https://travis-ci.org/cybertk/abao" class="dropdown-item"><img src="https://camo.githubusercontent.com/58f021bc7c463f5dd3b822b061f73f7ad39735f3/687474703a2f2f696d672e736869656c64732e696f2f7472617669732f6379626572746b2f6162616f2e7376673f7374796c653d666c6174" alt="Build Status" data-canonical-src="http://img.shields.io/travis/cybertk/abao.svg?style=flat" style="max-width:100%;"></a><a href="https://david-dm.org/cybertk/abao" class="dropdown-item"><img src="https://camo.githubusercontent.com/724a14b503a42357c19d5d54980604fdfa346c94/68747470733a2f2f64617669642d646d2e6f72672f6379626572746b2f6162616f2e737667" alt="Dependency Status" data-canonical-src="https://david-dm.org/cybertk/abao.svg" style="max-width:100%;height: 20px;"></a>
<a href="https://david-dm.org/cybertk/abao#info=devDependencies" class="dropdown-item"><img src="https://camo.githubusercontent.com/1d09193df496ec10f873d7fa27ff9847fbf071e1/68747470733a2f2f64617669642d646d2e6f72672f6379626572746b2f6162616f2f6465762d7374617475732e737667" alt="devDependency Status" data-canonical-src="https://david-dm.org/cybertk/abao/dev-status.svg" style="max-width:100%;height: 20px;"></a>
<a href="https://coveralls.io/r/cybertk/abao" class="dropdown-item"><img src="https://camo.githubusercontent.com/42448ba298e2b404ff2b6a83342c34148e972027/68747470733a2f2f696d672e736869656c64732e696f2f636f766572616c6c732f6379626572746b2f6162616f2e737667" alt="Coverage Status" data-canonical-src="https://img.shields.io/coveralls/cybertk/abao.svg" style="max-width:100%;"></a>
</ul>
    </div></span>

Here are 3 alternative styles (the image that isn't loading would be the favicon for the respective website):

Source Code for later:

<span class="dropdown js-menu-container active" style="
    display: inline-block;
    margin-bottom: -5px;
"><a class="js-selected-navigation-item reponav-item select-menu-button selected" data-selected-links="repo_graphs repo_contributors /cybertk/abao/graphs" href="#">
    <svg height="16" width="12" xmlns="http://www.w3.org/2000/svg" class="octicon octicon-server">
  <path d="M11 6H1c-0.55 0-1 0.45-1 1v2c0 0.55 0.45 1 1 1h10c0.55 0 1-0.45 1-1V7c0-0.55-0.45-1-1-1zM2 9H1V7h1v2z m2 0h-1V7h1v2z m2 0h-1V7h1v2z m2 0h-1V7h1v2zM11 1H1C0.45 1 0 1.45 0 2v2c0 0.55 0.45 1 1 1h10c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1zM2 4H1V2h1v2z m2 0h-1V2h1v2z m2 0h-1V2h1v2z m2 0h-1V2h1v2z m3-1h-1v-1h1v1z m0 8H1c-0.55 0-1 0.45-1 1v2c0 0.55 0.45 1 1 1h10c0.55 0 1-0.45 1-1V12c0-0.55-0.45-1-1-1zM2 14H1V12h1v2z m2 0h-1V12h1v2z m2 0h-1V12h1v2z m2 0h-1V12h1v2z"></path>
</svg> Badges
  </a><div class="select-menu-modal-holder" style="
    display: block;
    top: 100%;
    right: 0;
">
          <div class="select-menu-modal  js-menu-content omnibox" aria-hidden="true" style="
    width: auto;
">
            <div class="select-menu-header">

              <svg aria-hidden="true" class="octicon octicon-gear" height="16" role="img" version="1.1" viewBox="0 0 14 16" width="14"><path d="M14 8.77V7.17l-1.94-0.64-0.45-1.09 0.88-1.84-1.13-1.13-1.81 0.91-1.09-0.45-0.69-1.92H6.17l-0.63 1.94-1.11 0.45-1.84-0.88-1.13 1.13 0.91 1.81-0.45 1.09L0 7.23v1.59l1.94 0.64 0.45 1.09-0.88 1.84 1.13 1.13 1.81-0.91 1.09 0.45 0.69 1.92h1.59l0.63-1.94 1.11-0.45 1.84 0.88 1.13-1.13-0.92-1.81 0.47-1.09 1.92-0.69zM7 11c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"></path></svg><span class="select-menu-title">Github Omnibox</span>
            </div>

              <div class="select-menu-list js-navigation-container" role="menu">

                <a class="select-menu-item js-navigation-item " role="menuitem" tabindex="0" href="#">

                <img src="https://david-dm.org/favicon.ico" alt="" class="octicon select-menu-item-icon"><div class="select-menu-item-text">

                    <span class="select-menu-item-heading">Waffle.io</span><span class="description"><img src="https://camo.githubusercontent.com/a4abf581b9e675ed9ba3a2c75fe7ff31b4a611d9/68747470733a2f2f62616467652e776166666c652e696f2f6379626572746b2f6162616f2e7376673f6c6162656c3d7265616479267469746c653d5265616479" alt="Stories in Ready" data-canonical-src="https://badge.waffle.io/cybertk/abao.svg?label=ready&amp;title=Ready"></span>

                  </div></a><a class="select-menu-item js-navigation-item" role="menuitem" tabindex="0" href="#">

                <img src="https://david-dm.org/favicon.ico" alt="" class="octicon select-menu-item-icon"><div class="select-menu-item-text">

                    <span class="select-menu-item-heading">Travis-CI</span><span class="description"><img src="https://camo.githubusercontent.com/58f021bc7c463f5dd3b822b061f73f7ad39735f3/687474703a2f2f696d672e736869656c64732e696f2f7472617669732f6379626572746b2f6162616f2e7376673f7374796c653d666c6174" alt="Build Status" data-canonical-src="http://img.shields.io/travis/cybertk/abao.svg?style=flat"></span>

                  </div></a><a class="select-menu-item js-navigation-item" role="menuitem" tabindex="0" href="#">
                  <img src="https://david-dm.org/favicon.ico" alt="" class="octicon select-menu-item-icon">

                <div class="select-menu-item-text">

                    <span class="select-menu-item-heading">David-DM</span><span class="description"><img src="https://camo.githubusercontent.com/724a14b503a42357c19d5d54980604fdfa346c94/68747470733a2f2f64617669642d646d2e6f72672f6379626572746b2f6162616f2e737667" alt="Dependency Status" data-canonical-src="https://david-dm.org/cybertk/abao.svg" class="octicon"></span>

                  </div></a>

                <a class="select-menu-item js-navigation-item " role="menuitem" tabindex="0" href="#">

                <img src="https://david-dm.org/favicon.ico" alt="" class="octicon select-menu-item-icon"><div class="select-menu-item-text">

                    <span class="select-menu-item-heading">David-DM Dev</span><span class="description"><img src="https://camo.githubusercontent.com/1d09193df496ec10f873d7fa27ff9847fbf071e1/68747470733a2f2f64617669642d646d2e6f72672f6379626572746b2f6162616f2f6465762d7374617475732e737667" alt="devDependency Status" data-canonical-src="https://david-dm.org/cybertk/abao/dev-status.svg"></span>

                  </div></a>

              <a class="select-menu-item js-navigation-item " role="menuitem" tabindex="0" href="#">

                <img src="https://david-dm.org/favicon.ico" alt="" class="octicon select-menu-item-icon" style="
"><div class="select-menu-item-text">

                    <span class="select-menu-item-heading">Coveralls.io</span><span class="description"><img src="https://camo.githubusercontent.com/42448ba298e2b404ff2b6a83342c34148e972027/68747470733a2f2f696d672e736869656c64732e696f2f636f766572616c6c732f6379626572746b2f6162616f2e737667" alt="Coverage Status" data-canonical-src="https://img.shields.io/coveralls/cybertk/abao.svg"></span>

                  </div></a></div>

            </div>
          </div></span>

.omnibox.select-menu-modal .select-menu-item {
    padding-left: 34px;
}
.omnibox.select-menu-modal .select-menu-item-icon {
    margin-left: -24px;
    width: 16px;
    overflow: hidden;
    height: 16px;
}

blaenk commented 8 years ago

I don't have much of an opinion on this because I currently deleted the little badges because where they were appearing was looking pretty bad for me. I think this is an improvement, to put them in its own section. It looks pretty cool, and I wouldn't have to outright delete them anymore.

I think I like them in the order you specified. The first one first, the second one, then the third I kind of dislike. I think adding the name of the site of the badge messes up the spacing IMO, makes it look bad. I can always recognize the badge and if not, just hover on it to see what it's from. You can add a tooltip no? And if not, it'll show it in the status bar what URL it'll go to. That way you can have the cleaner first option.

ProLoser commented 8 years ago

The appearance they have now was a temp hack due to Github's layout change until I had the time to do a proper ui cleanup (which is what this design is)

blaenk commented 8 years ago

Ah ok.

douglasduteil commented 8 years ago

@ProLoser Alright that's better :+1:

zbeekman commented 8 years ago

The mock ups look good. If you provide an easy means to install this branch to test-drive it, I'll do so, but am pretty busy at the moment, and don't have time to figure out how to build & install on Mac OS X

blaenk commented 8 years ago

On windows all I had to do was download a zip of the repo and go to the extensions page in chrome and click load unpacked extension at the top, then point it to the extracted folder.

zbeekman commented 8 years ago

@blaenk well that was easy, but it appears that the changes shown in the mock-ups/screen-shots haven't been pushed up yet, so installing from the main tracking branch (gh-pages?) doesn't get me very far.

blaenk commented 8 years ago

Nah I was just letting you know to try an extension. I haven't looked at these changes specifically.

ProLoser commented 8 years ago

I haven't committed the code for these screenshots yet. What you see is what I was able to yield from just fiddling around with the inspector. When I find time this week I'll make the relevant code changes to decorate.js (unless someone wants to give it a crack). That's why i've pasted the source code too (so I can use it later)

ProLoser commented 8 years ago

Okay guys, I pushed 1.8.0 which has the new dropdown layout. unfortunately, if you move around within a repo it erases the tab. I've tried to track down how Github handles in-repo ajax (they use github.com/defunkt/pjax) but for some reason I can't subscribe to the pjax events properly: https://github.com/ProLoser/Github-Omnibox/blob/43358dc8466ffce0454a6d84563ae9456fc365ff/decorate.js#L148

If this event could be triggered I could retain the badges dropdown during browsing. But since the old behavior has the same limitation I figure might as well push the streamlined layout.

Note:

You should probably remove the Github Omnibox badge/link from your badges list (click on the cog to do this) since the cog now serves as an alternative way to access the options page.

ProLoser commented 8 years ago

Fixed by 43358dc8466ffce0454a6d84563ae9456fc365ff

ProLoser / Github-Omnibox

New design for new Github layout #57

Note: