Merge pull request #2622 from robertknight/t90-top_bar_new_design

New design for top bar

h/static/images/icons/account.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.3.3 (12072) - http://www.bohemiancoding.com/sketch -->
+    <title>Artboard 1 Copy</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="Artboard-1-Copy" sketch:type="MSArtboardGroup" fill="#000000">
+            <circle id="Oval-1" sketch:type="MSShapeGroup" cx="8" cy="4" r="3"></circle>
+            <path d="M8,15 C11,15 14,14.4329966 14,12 C14,10.5670034 10,8 8,8 C6,8 2,10.5670034 2,12 C2,14.4329966 5,15 8,15 Z" id="Oval-1-Copy" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

h/static/images/icons/filter.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.3.3 (12072) - http://www.bohemiancoding.com/sketch -->
+    <title>Artboard 1 Copy 3</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="Artboard-1-Copy-3" sketch:type="MSArtboardGroup">
+            <rect id="Rectangle-2" fill="#000000" sketch:type="MSShapeGroup" x="0" y="3" width="4" height="2"></rect>
+            <circle id="Oval-3" stroke="#000000" stroke-width="2" sketch:type="MSShapeGroup" cx="6" cy="4" r="4"></circle>
+            <rect id="Rectangle-2-Copy" fill="#000000" sketch:type="MSShapeGroup" x="12" y="11" width="4" height="2"></rect>
+            <circle id="Oval-3-Copy" stroke="#000000" stroke-width="2" sketch:type="MSShapeGroup" cx="10" cy="12" r="4"></circle>
+            <rect id="Rectangle-2-Copy-2" fill="#000000" sketch:type="MSShapeGroup" x="9" y="3" width="7" height="2"></rect>
+            <rect id="Rectangle-2-Copy-3" fill="#000000" sketch:type="MSShapeGroup" x="0" y="11" width="7" height="2"></rect>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

h/static/images/icons/search.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.3.3 (12072) - http://www.bohemiancoding.com/sketch -->
+    <title>Artboard 1 Copy 2</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="Artboard-1-Copy-2" sketch:type="MSArtboardGroup" fill="#000000">
+            <g id="Shape-+-Shape-Copy-28" sketch:type="MSLayerGroup">
+                <path d="M6,10 L6,10 C8.209139,10 10,8.209139 10,6 C10,3.790861 8.209139,2 6,2 C3.790861,2 2,3.790861 2,6 C2,8.209139 3.790861,10 6,10 L6,10 Z M6,12 L6,12 C2.6862915,12 0,9.3137085 0,6 C0,2.6862915 2.6862915,0 6,0 C9.3137085,0 12,2.6862915 12,6 C12,9.3137085 9.3137085,12 6,12 L6,12 Z" id="Shape" sketch:type="MSShapeGroup"></path>
+            </g>
+            <path d="M9.29289322,10.7071068 L14.2426407,15.6568542 L15.6568542,14.2426407 L10.7071068,9.29289322 L9.29289322,10.7071068 L9.29289322,10.7071068 Z" id="Shape" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

h/static/scripts/annotator/plugin/toolbar.coffee

@@ -7,6 +7,7 @@ makeButton = (item) ->
   .attr('title', item.title)
   .attr('name', item.name)
   .on(item.on)
+  .addClass('annotator-frame-button')
   .addClass(item.class)
   button = $('<li></li>').append(anchor)
   return button[0]
@@ -28,7 +29,7 @@ module.exports = class Toolbar extends Annotator.Plugin
 
     items = [
       "title": "Toggle Sidebar"
-      "class": "h-icon-chevron-left"
+      "class": "annotator-frame-button--sidebar_toggle h-icon-chevron-left"
       "name": "sidebar-toggle"
       "on":
         "click": (event) =>

h/static/scripts/directive/simple-search.coffee

@@ -27,6 +27,11 @@ module.exports = ['$http', '$parse', ($http, $parse) ->
 
   restrict: 'E'
   scope:
+    # Specifies whether the search input field should always be expanded,
+    # regardless of whether the it is focused or has an active query.
+    #
+    # If false, it is only expanded when focused or when 'query' is non-empty
+    alwaysExpanded: '='
     query: '='
     onSearch: '&'
     onClear: '&'
@@ -34,9 +39,10 @@ module.exports = ['$http', '$parse', ($http, $parse) ->
             <form class="simple-search-form" ng-class="!searchtext && 'simple-search-inactive'" name="searchBox" ng-submit="search($event)">
               <input class="simple-search-input" type="text" ng-model="searchtext" name="searchText"
                      placeholder="{{loading && 'Loading' || 'Search'}}…"
-                     ng-disabled="loading" />
-              <button class="simple-search-icon btn btn-clean" ng-hide="loading">
-                <i class="h-icon-search btn-icon"></i>
+                     ng-disabled="loading"
+                     ng-class="(alwaysExpanded || searchtext.length > 0) ? 'is-expanded' : ''"/>
+              <button class="simple-search-icon top-bar__btn" ng-hide="loading">
+                <i class="h-icon-search"></i>
               </button>
               <button class="simple-search-icon btn btn-clean" ng-show="loading" disabled>
                 <span class="btn-icon"><span class="spinner"></span></span>

h/static/styles/annotator/inject.scss

@@ -86,10 +86,18 @@ $base-font-size: 14px;
 
 // Sidebar
 .annotator-frame {
+  // a CSS reset which attempts to prevent the host page's styles
+  // from affecting the styles of the sidebar.
+  //
+  // FIXME - This component and other annotator components which currently
+  // live on the page could be isolated from the host page's CSS/JS via
+  // transparent same-origin iframes
   @import '../reset';
-  @import './bucket-bar';
   @include nested-reset;
   @include reset-box-model;
+
+  // frame styles
+  @import './bucket-bar';
   @include user-select(none);
   @extend .noise;
   direction: ltr;
@@ -125,51 +133,33 @@ $base-font-size: 14px;
   @include icons {
     font-family: 'h';
   }
-}
-
-.annotator-no-transition {
-  @include transition(none !important);
-}
-
-.annotator-placeholder {
-  opacity: 0;
-  position: absolute;
-  top: 50%;
-  z-index: -1;
-}
 
+  // the vertical toolbar at the left-edge of the sidebar
+  // which provides controls for toggling the sidebar,
+  // toggling highlights etc.
 
-//CONTROLBAR STUFF////////////////////////////////
-.annotator-frame .annotator-toolbar {
-  position: absolute;
-  left: -($bucket-bar-width + 18px - 7px);
-  width: 37px;
-  z-index: 2;
-
-  ul {
-    height: 100%;
-  }
-
-  ul, li {
-    box-sizing: border-box;
-    @include reset-box-model;
-    @include reset-list-style;
-  }
-}
+  // note: These components CSS classes are nested inside
+  // .annotator-frame to avoid being overridden by the
+  // CSS reset styles applied to .annotator-frame, which would otherwise
+  // have higher specificity
+  .annotator-toolbar {
+    position: absolute;
+    left: -($bucket-bar-width + 18px - 7px);
+    width: 37px;
+    z-index: 2;
 
-.annotator-frame .annotator-toolbar li {
-  font-size: 18px;
-  margin-bottom: 5px;
+    ul {
+      height: 100%;
+    }
 
-  &:first-child button {
-    @include box-shadow(none);
-    border-radius: 4px 0 0 4px;
-    border-right-style: none;
-    padding-right: 6px;
-    width: 36px;
+    ul, li {
+      box-sizing: border-box;
+      @include reset-box-model;
+      @include reset-list-style;
+    }
   }
 
-  button {
+  .annotator-frame-button {
     @include single-transition(background-color, .25s, .25s);
     @include smallshadow;
     background: $white;
@@ -180,19 +170,47 @@ $base-font-size: 14px;
     height: 30px;
     width: 30px;
     padding: 0;
-  }
+    font-size: 18px;
+    margin-bottom: 5px;
 
-  button:active {
-    @include single-transition(background-color, .25s);
-    background-color: $gray-light;
+    &:active {
+      @include single-transition(background-color, .25s);
+      background-color: $gray-light;
+    }
+
+    &:focus, &:hover {
+      outline: 0;
+      color: $text-color;
+    }
   }
 
-  button:focus, button:hover {
-    outline: 0;
-    color: $text-color;
+  .annotator-frame-button--sidebar_toggle {
+    @include box-shadow(none);
+    border-radius: 0px;
+    border-style: none none solid solid;
+    padding-right: 6px;
+    width: 36px;
+    margin-bottom: 10px;
+
+    // the height of the sidebar toggle is set
+    // to match the height of the top bar
+    height: 40px;
   }
 }
 
+.annotator-placeholder {
+  opacity: 0;
+  position: absolute;
+  top: 50%;
+  z-index: -1;
+}
+
+// this disables the width transition for the sidebar when
+// it is manually resized by dragging
+.annotator-no-transition {
+  @include transition(none !important);
+}
+
 /*
   Mobile layout
   240-479 px

h/static/styles/app.scss

@@ -18,11 +18,13 @@ $base-line-height: 20px;
 @import './top-bar';
 
 body {
+  $sidebar-h-padding: 9px;
+
   @extend .noise;
   font-family: $sans-font-family;
   font-weight: 300;
-  padding: .72rem;
-  padding-top: calc(.72em + 30px);
+  padding: $sidebar-h-padding;
+  padding-top: $sidebar-h-padding + $top-bar-height;
   -webkit-overflow-scrolling: touch;
 
   @include respond-to(tablets desktops) {
@@ -156,10 +158,30 @@ $group-list-width: 270px;
   }
 }
 
+// the icon indicating the type of group currently selected at
+// the top of the groups list
+.group-list-label__icon {
+  color: $color-gray;
+  display: inline-block;
+  margin-right: 4px;
+  vertical-align: baseline;
+
+  // align the base of the chat-heads icon for groups
+  // with the baseline of the group name label
+  transform: translateY(1px);
+}
+
+// the label showing the currently selected group which opens
+// the drop-down list when clicked
+.group-list-label__label {
+  font-weight:bold;
+}
+
 // the name of a group in the groups drop-down list
 // and 'Post to <Group>' button for saving annotations
 .group-name-link {
   white-space: nowrap;
+  color: inherit;
 }
 
 /* The user account dropdown menu */

h/static/styles/common.scss

@@ -172,7 +172,7 @@ html {
   visibility: hidden;
   background: $white;
   border: solid 1px $gray-lighter;
-  margin-top: .8em;
+  margin-top: 6px;
   top: 100%;
   float: left;
   position: absolute;
@@ -181,17 +181,6 @@ html {
   li:not(.ng-hide) {
     text-align: left;
 
-    & > a {
-      display: block;
-      line-height: 1;
-      padding: 1em;
-      white-space: nowrap;
-
-      :hover {
-        color: $brand-color;
-      }
-    }
-
     &.inactive {
       font-weight: 400;
       color: $gray-lighter;
@@ -209,8 +198,21 @@ html {
     }
   }
 
-  a {
+  &__link {
     color: inherit;
+
+    display: block;
+    line-height: 1;
+    padding: 1em;
+    white-space: nowrap;
+
+    &:hover {
+      color: $brand-color;
+    }
+  }
+
+  &__link--subtle {
+    color: $color-gray;
   }
 
   // These psuedo-elements add the speech bubble tail / triangle.
@@ -261,6 +263,15 @@ html {
       right: 50%;
     }
   }
+
+  // Hides the dropdown menu's default ▲ indicator.
+  // This is used for cases where a separate element is used
+  // as the indicator
+  &.pull-none {
+    &:before, &:after {
+      display: none;
+    }
+  }
 }
 
 .open {
@@ -270,6 +281,53 @@ html {
   }
 }
 
+// A 'standalone' arrow for the top of a dropdown menu.
+// .dropdown-menu has a "built-in" arrow using CSS :before,:after.
+//
+// The standalone arrow is used when the dropdown menu arrow needs
+// to be positioned relative to the item which opens the menu rather
+// than relative to the dropdown menu content.
+//
+// When using the standalone arrow, the built-in arrow is hidden using
+// the .pull-none class
+.dropdown-menu__top-arrow {
+  // the element itself forms the outer border of the arrow
+  $arrow-size: 7px;
+  $bottom-offset: $arrow-size - 1px;
+  visibility: hidden;
+
+  width: 0px;
+  height: 0px;
+  border-top: none;
+  border-left: $arrow-size solid transparent;
+  border-right: $arrow-size solid transparent;
+  border-bottom: $arrow-size solid $gray-lighter;
+  position: absolute;
+  right: 0px;
+  bottom: - $bottom-offset;
+
+  z-index: 3;
+
+  // :after is used to create another arrow of the same size at a 1px
+  // vertical offset, forming the fill and base of the arrow
+  &:after {
+    width: 0px;
+    height: 0px;
+    border-top: none;
+    border-left: $arrow-size solid transparent;
+    border-right: $arrow-size solid transparent;
+    border-bottom: $arrow-size solid white;
+    content: "";
+    position: absolute;
+    left: 0 - $arrow-size;
+    top: 1px;
+  }
+}
+
+.open > .dropdown-menu__top-arrow {
+  visibility: visible;
+}
+
 .masthead {
   margin-bottom: 1em;
 

h/static/styles/simple-search.scss

@@ -17,17 +17,32 @@
   color: $gray-light;
 }
 
-input.simple-search-input {
-  flex-grow: 1;
-  order: 1;
-
-  color: $text-color;
-  border: none;
-  outline: none;
-  padding: 0;
-
-  &:disabled {
-    background: none;
-    color: $gray-light;
+@at-root {
+  $expanded-max-width: 150px;
+
+  .simple-search-input {
+    flex-grow: 1;
+    order: 1;
+
+    color: $text-color;
+
+    // disable the default browser styling for the input
+    border: none;
+    outline: none;
+    padding: 0px;
+    width: 100%;
+
+    max-width: 0px;
+    transition: max-width .3s ease-out, padding-left .3s ease-out;
+
+    &:disabled {
+      background: none;
+      color: $gray-light;
+    }
+
+    &:focus,&.is-expanded {
+      max-width: $expanded-max-width;
+      padding-left: 6px;
+    }
   }
 }

h/static/styles/top-bar.scss

 @import 'base';
 @import 'mixins/responsive';
 
-.topbar {
+$top-bar-height: 40px;
+
+.top-bar {
   background: $white;
-  border: solid 1px $gray-lighter;
-  border-style: solid none;
-  height: 30px;
+  border-bottom: solid 1px $gray-lighter;
+  height: $top-bar-height;
   font-size: 15px;
   position: fixed;
   left: 0;
@@ -14,39 +15,54 @@
   z-index: 5;
 }
 
-.topbar .inner {
+.top-bar__inner {
+  // the edges of the top-bar's contents should be aligned
+  // with the edges of annotation cards displayed below
+  $h-padding: 9px;
+
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-end;
+
+  padding-left: $h-padding;
+  padding-right: $h-padding;
 
-  height: 28px;
+  height: 100%;
 }
 
-.topbar .inner .simple-search {
-  flex-grow: 1;
+.top-bar__inner .group-list {
   margin-right: .75em;
-  overflow: hidden;
 }
 
-.topbar .inner .group-list {
-  margin-right: .75em;
+// an expander which adds spacing between the groups list
+// and the toolbar icons (in the new top-bar design)
+.top-bar__expander {
+  flex-grow: 1;
 }
 
-.topbar .btn {
-  color: $gray-light;
-  min-width: 28px;
-  height: 28px;
+// Removes the native styling from a <button> element
+@mixin reset-native-btn-styles {
+  padding: 0px;
+  margin: 0px;
+  background-color: transparent;
+  border-style: none;
+  outline: none;
+}
 
-  border: 0;
-  padding: 0;
+.top-bar__btn {
+  @include reset-native-btn-styles;
 
-  &:active, .js-active {
-    @include single-transition(background-color, .25s);
-    background-color: $gray-light;
-  }
+  color: $gray-light;
+  display: inline-block;
+  cursor: pointer;
+  padding-left: 6px;
 
-  &:focus, .js-focus, &:hover, .js-hover {
+  &:hover {
     color: $gray-dark;
   }
 }
+
+.top-bar__dropdown-arrow {
+  color: $color-dove-gray;
+}

h/static/styles/vendor/ICOMOON.md

@@ -17,9 +17,5 @@ add the relevant icons and then use the app's _Generate Font_ facility.
     `h-icon-<name>` class name.
  4. Ensure all icons in the 'h' set are selected, then go to the 'Generate Font' tab in icomoon
     and click the 'Download' button which appears _within_ the tab.
- 5. From the downloaded archive:
-  * Extract `fonts/h.woff` -> `./fonts/h.woff`
-  * Extract `style.css` -> `./icomoon.css`.
-  * Edit `icomoon.css` to keep only the _WOFF_ format font as that is [supported](http://caniuse.com/#feat=woff) by our target browsers (IE >= 10).
-    The WOFF URL needs to be an inlined data URL until #2571 is resolved.
- 6. Commit the updated `selection.json`, `fonts/h.woff` and `icomoon.css` files to the repository.
+ 5. Run `scripts/update-icon-font.py <icomoon zip archive>` to update the icon font
+ 6. Commit the updated files to the repository.

h/static/styles/vendor/fonts/selection.json

 {
 	"IcoMoonType": "selection",
 	"icons": [
+		{
+			"icon": {
+				"paths": [
+					"M704 256c0 106.039-85.961 192-192 192s-192-85.961-192-192c0-106.039 85.961-192 192-192s192 85.961 192 192z",
+					"M512 960c192 0 384-36.288 384-192 0-91.712-256-256-384-256s-384 164.288-384 256c0 155.712 192 192 384 192z"
+				],
+				"attrs": [],
+				"isMulticolor": false,
+				"width": 896,
+				"grid": 16,
+				"tags": [
+					"account"
+				]
+			},
+			"attrs": [],
+			"properties": {
+				"order": 49,
+				"id": 1309,
+				"name": "account",
+				"prevSize": 24,
+				"code": 59392
+			},
+			"setIdx": 0,
+			"setId": 1,
+			"iconIdx": 0
+		},
+		{
+			"icon": {
+				"paths": [
+					"M0 192h256v128h-256v-128z",
+					"M768 704h256v128h-256v-128z",
+					"M576 192h448v128h-448v-128z",
+					"M0 704h448v128h-448v-128z"
+				],
+				"attrs": [],
+				"isMulticolor": false,
+				"width": 964,
+				"grid": 16,
+				"tags": [
+					"filter"
+				]
+			},
+			"attrs": [],
+			"properties": {
+				"order": 51,
+				"id": 1308,
+				"name": "sort",
+				"prevSize": 24,
+				"code": 59393
+			},
+			"setIdx": 0,
+			"setId": 1,
+			"iconIdx": 1
+		},
 		{
 			"icon": {
 				"paths": [
@@ -18,7 +72,7 @@
 			},
 			"attrs": [],
 			"properties": {
-				"order": 48,
+				"order": 52,
 				"id": 1307,
 				"name": "group",
 				"prevSize": 24,
@@ -26,7 +80,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 0
+			"iconIdx": 2
 		},
 		{
 			"icon": {
@@ -54,7 +108,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 31
+			"iconIdx": 3
 		},
 		{
 			"icon": {
@@ -82,7 +136,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 39
+			"iconIdx": 4
 		},
 		{
 			"icon": {
@@ -110,7 +164,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 40
+			"iconIdx": 5
 		},
 		{
 			"icon": {
@@ -139,7 +193,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 41
+			"iconIdx": 6
 		},
 		{
 			"icon": {
@@ -172,7 +226,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 42
+			"iconIdx": 7
 		},
 		{
 			"icon": {
@@ -205,7 +259,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 43
+			"iconIdx": 8
 		},
 		{
 			"icon": {
@@ -245,7 +299,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 44
+			"iconIdx": 9
 		},
 		{
 			"icon": {
@@ -279,7 +333,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 45
+			"iconIdx": 10
 		},
 		{
 			"icon": {
@@ -304,7 +358,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 1
+			"iconIdx": 11
 		},
 		{
 			"icon": {
@@ -329,7 +383,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 2
+			"iconIdx": 12
 		},
 		{
 			"icon": {
@@ -354,7 +408,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 3
+			"iconIdx": 13
 		},
 		{
 			"icon": {
@@ -379,7 +433,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 4
+			"iconIdx": 14
 		},
 		{
 			"icon": {
@@ -404,7 +458,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 5
+			"iconIdx": 15
 		},
 		{
 			"icon": {
@@ -429,7 +483,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 6
+			"iconIdx": 16
 		},
 		{
 			"icon": {
@@ -454,7 +508,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 7
+			"iconIdx": 17
 		},
 		{
 			"icon": {
@@ -479,7 +533,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 8
+			"iconIdx": 18
 		},
 		{
 			"icon": {
@@ -504,7 +558,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 9
+			"iconIdx": 19
 		},
 		{
 			"icon": {
@@ -529,12 +583,13 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 10
+			"iconIdx": 20
 		},
 		{
 			"icon": {
 				"paths": [
-					"M661.333 597.333h-33.92l-11.733-11.733c41.813-48.427 66.987-111.36 66.987-180.267 0-153.173-124.16-277.333-277.333-277.333s-277.333 124.16-277.333 277.333 124.16 277.333 277.333 277.333c68.907 0 131.84-25.173 180.267-66.773l11.733 11.733v33.707l213.333 212.907 63.573-63.573-212.907-213.333zM405.333 597.333c-106.027 0-192-85.973-192-192s85.973-192 192-192 192 85.973 192 192-85.973 192-192 192z"
+					"M384 640v0c141.385 0 256-114.615 256-256s-114.615-256-256-256c-141.385 0-256 114.615-256 256s114.615 256 256 256v0zM384 768v0c-212.077 0-384-171.923-384-384s171.923-384 384-384c212.077 0 384 171.923 384 384s-171.923 384-384 384v0z",
+					"M594.745 685.255l316.784 316.784 90.51-90.51-316.784-316.784-90.51 90.51z"
 				],
 				"attrs": [],
 				"isMulticolor": false,
@@ -547,14 +602,14 @@
 			"attrs": [],
 			"properties": {
 				"id": 96,
-				"order": 12,
+				"order": 53,
 				"prevSize": 24,
 				"name": "search",
 				"code": 58883
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 11
+			"iconIdx": 21
 		},
 		{
 			"icon": {
@@ -579,7 +634,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 12
+			"iconIdx": 22
 		},
 		{
 			"icon": {
@@ -604,7 +659,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 13
+			"iconIdx": 23
 		},
 		{
 			"icon": {
@@ -629,7 +684,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 14
+			"iconIdx": 24
 		},
 		{
 			"icon": {
@@ -654,7 +709,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 15
+			"iconIdx": 25
 		},
 		{
 			"icon": {
@@ -679,7 +734,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 16
+			"iconIdx": 26
 		},
 		{
 			"icon": {
@@ -704,7 +759,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 17
+			"iconIdx": 27
 		},
 		{
 			"icon": {
@@ -729,7 +784,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 18
+			"iconIdx": 28
 		},
 		{
 			"icon": {
@@ -754,7 +809,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 19
+			"iconIdx": 29
 		},
 		{
 			"icon": {
@@ -780,7 +835,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 20
+			"iconIdx": 30
 		},
 		{
 			"icon": {
@@ -805,7 +860,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 21
+			"iconIdx": 31
 		},
 		{
 			"icon": {
@@ -830,7 +885,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 22
+			"iconIdx": 32
 		},
 		{
 			"icon": {
@@ -855,7 +910,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 23
+			"iconIdx": 33
 		},
 		{
 			"icon": {
@@ -880,7 +935,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 24
+			"iconIdx": 34
 		},
 		{
 			"icon": {
@@ -905,7 +960,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 25
+			"iconIdx": 35
 		},
 		{
 			"icon": {
@@ -930,7 +985,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 26
+			"iconIdx": 36
 		},
 		{
 			"icon": {
@@ -955,7 +1010,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 27
+			"iconIdx": 37
 		},
 		{
 			"icon": {
@@ -980,7 +1035,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 28
+			"iconIdx": 38
 		},
 		{
 			"icon": {
@@ -1005,7 +1060,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 29
+			"iconIdx": 39
 		},
 		{
 			"icon": {
@@ -1030,7 +1085,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 30
+			"iconIdx": 40
 		},
 		{
 			"icon": {
@@ -1055,7 +1110,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 32
+			"iconIdx": 41
 		},
 		{
 			"icon": {
@@ -1080,7 +1135,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 33
+			"iconIdx": 42
 		},
 		{
 			"icon": {
@@ -1105,7 +1160,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 34
+			"iconIdx": 43
 		},
 		{
 			"icon": {
@@ -1130,7 +1185,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 35
+			"iconIdx": 44
 		},
 		{
 			"icon": {
@@ -1155,7 +1210,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 36
+			"iconIdx": 45
 		},
 		{
 			"icon": {
@@ -1180,7 +1235,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 37
+			"iconIdx": 46
 		},
 		{
 			"icon": {
@@ -1209,7 +1264,7 @@
 			},
 			"setIdx": 0,
 			"setId": 1,
-			"iconIdx": 38
+			"iconIdx": 47
 		}
 	],
 	"height": 1024,

h/static/styles/vendor/icomoon.css

 @font-face {
 	font-family: 'h';
-	/* WARNING - the URL below is inlined
-	 * because the CSS asset pipeline is not correctly rebasing
-	 * URLs when concatenating files together.
-	 *
-	 * See issue #2571
-	 */
-	src: url('data:application/font-woff;base64,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')
-	     format('woff');
+
+    /* WARNING - the URL below is inlined
+     * because the CSS asset pipeline is not correctly rebasing
+     * URLs when concatenating files together.
+     *
+     * See issue #2571
+     */
+    src:url('data:application/font-woff;base64,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') format('woff');
 	font-weight: normal;
 	font-style: normal;
 }
@@ -26,6 +26,12 @@
 	-moz-osx-font-smoothing: grayscale;
 }
 
+.h-icon-account:before {
+	content: "\e800";
+}
+.h-icon-sort:before {
+	content: "\e801";
+}
 .h-icon-group:before {
 	content: "\e61e";
 }
@@ -164,3 +170,4 @@
 .h-icon-mail:before {
 	content: "\e62a";
 }
+

h/templates/client/group_list.html

@@ -4,13 +4,15 @@
         data-toggle="dropdown"
         role="button"
         ng-switch on="groups.focused().public"
-        ng-click="toggleShareLink(undefined)">
-    <i class="h-icon-public" ng-switch-when="true"></i>
-    <i class="h-icon-group" ng-switch-default></i>
-    {{groups.focused().name}}
-    <i class="h-icon-arrow-drop-down"></i>
+        ng-click="toggleShareLink(undefined)"
+        title="Change the selected group">
+    <i class="group-list-label__icon h-icon-public" ng-switch-when="true"></i><!-- nospace
+    !--><i class="group-list-label__icon h-icon-group" ng-switch-default></i>
+    <span class="group-list-label__label">{{groups.focused().name}}</span><!-- nospace
+    !--><i class="h-icon-arrow-drop-down"></i>
   </span>
-  <ul class="dropdown-menu pull-right" role="menu">
+  <div class="dropdown-menu__top-arrow"></div>
+  <ul class="dropdown-menu pull-none" role="menu">
     <li ng-repeat="group in groups.all()">
       <div ng-class="{'group-item': true, selected: group.id == groups.focused().id}"
            ng-click="groups.focus(group.id)">
@@ -59,7 +61,7 @@
       <div class="group-item" ng-click="createNewGroup()">
         <div class="group-icon-container"><i class="h-icon-add"></i></div>
         <div class="group-details">
-          <a href="" title="Create a new group to share annotations">
+          <a href="" class="group-name-link" title="Create a new group to share annotations">
             New group
           </a>
         </div>

h/templates/client/top_bar.html

-<div class="topbar" ng-class="frame.visible && 'shown'" ng-cloak>
-  <div class="inner content">
-    <button class="btn btn-clean"
+<!-- top bar for the sidebar and the stream.
+!-->
+<div class="top-bar" ng-class="frame.visible && 'shown'" ng-cloak>
+  <!-- Legacy design for top bar !-->
+  <div class="top-bar__inner content" ng-if="!groupsEnabled">
+    <button class="top-bar__btn"
             ng-click="shareDialog.visible = !shareDialog.visible"
             ng-if="isSidebar"
             title="Share this page">
-      <i class="h-icon-share btn-icon"></i>
+      <i class="h-icon-share"></i>
     </button>
 
     <simple-search class="simple-search"
          query="searchController.query"
          on-search="searchController.update(query)"
-         on-clear="searchController.clear()"></simple-search>
+         on-clear="searchController.clear()"
+         always-expanded="true"></simple-search>
+
+    <div class="top-bar__expander"></div>
 
     <group-list class="group-list" ng-if="groupsEnabled">
     </group-list>
@@ -24,12 +30,61 @@
           {{account.username}}<span class="provider" ng-show="authUser">/{{account.provider}}</span><i class="h-icon-arrow-drop-down"></i>
         </span>
         <ul class="dropdown-menu pull-right" role="menu">
-          <li ng-show="authUser"><a href="" ng-click="accountDialog.visible = true">Account</a></li>
-          <li><a href="mailto:support@hypothes.is">Feedback</a></li>
-          <li><a href="/docs/help" target="_blank">Help</a></li>
-          <li ng-show="authUser"><a href="/stream?q=user:{{account.username}}"
+          <li ng-show="authUser"><a class="dropdown-menu__link" href="" ng-click="accountDialog.visible = true">Account</a></li>
+          <li><a class="dropdown-menu__link" href="mailto:support@hypothes.is">Feedback</a></li>
+          <li><a class="dropdown-menu__link" href="/docs/help" target="_blank">Help</a></li>
+          <li ng-show="authUser"><a class="dropdown-menu__link" href="/stream?q=user:{{account.username}}"
                                      target="_blank">My Annotations</a></li>
-          <li ng-show="authUser"><a href="" ng-click="onLogout()">Sign out</a></li>
+          <li ng-show="authUser"><a class="dropdown-menu__link" href="" ng-click="onLogout()">Sign out</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <!-- New design for the top bar.
+       This is part of the groups roll-out
+
+       The inner div is styled with 'content' to center it in
+       the stream view.
+  !-->
+  <div class="top-bar__inner content" ng-if="groupsEnabled">
+    <group-list class="group-list">
+    </group-list>
+    <div class="top-bar__expander"></div>
+    <simple-search class="simple-search"
+         query="searchController.query"
+         on-search="searchController.update(query)"
+         on-clear="searchController.clear()"
+         title="Filter the annotation list"></simple-search>
+    <a class="top-bar__btn"
+            ng-click="shareDialog.visible = !shareDialog.visible"
+            ng-if="isSidebar"
+            title="Share this page">
+      <i class="h-icon-share"></i>
+    </a>
+    <div ng-switch="authUser">
+      <span ng-switch-when="undefined">⋯</span>
+      <a href="" ng-click="onLogin()" ng-switch-when="null">Sign in</a>
+      <div class="pull-right user-picker" dropdown keyboard-nav>
+        <a role="button"
+           class="top-bar__btn"
+           data-toggle="dropdown" dropdown-toggle
+           title="{{account.username}}">
+          <i class="h-icon-account"></i><!-- nospace
+          !--><i class="h-icon-arrow-drop-down top-bar__dropdown-arrow"></i>
+        </a>
+        <ul class="dropdown-menu pull-right" role="menu">
+          <li ng-show="authUser"><a href="/stream?q=user:{{account.username}}"
+                                    class="dropdown-menu__link"
+                                    title="View all your annotations"
+                                     target="_blank">{{account.username}}</a></li>
+          <li ng-show="authUser"><a href=""
+                                    class="dropdown-menu__link"
+                                    ng-click="accountDialog.visible = true"><!-- nospace
+            !-->Account settings</a></li>
+          <li><a class="dropdown-menu__link" href="/docs/help" target="_blank">Help</a></li>
+          <li><a class="dropdown-menu__link" href="mailto:support@hypothes.is">Feedback</a></li>
+          <li ng-show="authUser"><a class="dropdown-menu__link dropdown-menu__link--subtle"
+                                    href="" ng-click="onLogout()">Sign out</a></li>
         </ul>
       </div>
     </div>

h/templates/client/viewer.html

@@ -22,7 +22,7 @@
         <li ng-click="sort.name = option"
             ng-hide="option == 'Location' && !isSidebar"
             ng-repeat="option in ['Newest', 'Oldest', 'Location']"
-            ><a href="">{{option}}</a></li>
+            ><a class="dropdown-menu__link" href="">{{option}}</a></li>
       </ul>
     </span>
   </li>

scripts/update-icon-font.py

+#!/usr/bin/env python
+
+import argparse
+import os
+
+from base64 import b64encode
+from zipfile import ZipFile
+
+def main():
+    parser = argparse.ArgumentParser('Update the icomoon icon font from the provided archive')
+    parser.add_argument('archive', help='Path to .zip file generated by icomoon')
+    args = parser.parse_args()
+
+    script_dir = os.path.dirname(os.path.abspath(__file__))
+    vendor_style_dir = script_dir + '/../h/static/styles/vendor'
+
+    icon_font_archive = ZipFile(args.archive)
+    icon_font_archive.extract('selection.json', vendor_style_dir + '/fonts')
+    icon_font_archive.extract('fonts/h.woff', vendor_style_dir)
+    css_input_file = icon_font_archive.open('style.css')
+
+    css_output_file = open(vendor_style_dir + '/icomoon.css', 'w')
+
+    for line in css_input_file:
+        if "format('woff')" in line:
+            # inline the WOFF format file
+            woff_content = icon_font_archive.open('fonts/h.woff').read()
+            woff_src_line = """
+    /* WARNING - the URL below is inlined
+     * because the CSS asset pipeline is not correctly rebasing
+     * URLs when concatenating files together.
+     *
+     * See issue #2571
+     */
+    src:url('data:application/font-woff;base64,%s') format('woff');
+"""
+            css_output_file.write(woff_src_line % b64encode(woff_content))
+        elif "url(" in line:
+            # skip non-WOFF format fonts
+            pass
+        else:
+            css_output_file.write(line)
+
+
+if __name__ == '__main__':
+    main()