Skip to content

C
coopwire-hypothesis
Commit f00cd272 authored by Nick Stenning's avatar Nick Stenning
Browse files
Options

Merge pull request #2622 from robertknight/t90-top_bar_new_design 

New design for top bar
parents 6d450f08 e561ff3d
Expand all Show whitespace changes
Inline Side-by-side
Showing with 524 additions and 182 deletions
h/static/images/icons/account.svg 0 → 100644
View file @ f00cd272
<?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 0 → 100644
View file @ f00cd272
<?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 0 → 100644
View file @ f00cd272
<?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
View file @ f00cd272
...@@ -7,6 +7,7 @@ makeButton = (item) -> ...@@ -7,6 +7,7 @@ makeButton = (item) ->
.attr('title', item.title) .attr('title', item.title)
.attr('name', item.name) .attr('name', item.name)
.on(item.on) .on(item.on)
.addClass('annotator-frame-button')
.addClass(item.class) .addClass(item.class)
button = $('<li></li>').append(anchor) button = $('<li></li>').append(anchor)
return button[0] return button[0]
...@@ -28,7 +29,7 @@ module.exports = class Toolbar extends Annotator.Plugin ...@@ -28,7 +29,7 @@ module.exports = class Toolbar extends Annotator.Plugin
items = [ items = [
"title": "Toggle Sidebar" "title": "Toggle Sidebar"
"class": "h-icon-chevron-left" "class": "annotator-frame-button--sidebar_toggle h-icon-chevron-left"
"name": "sidebar-toggle" "name": "sidebar-toggle"
"on": "on":
"click": (event) => "click": (event) =>
......
h/static/scripts/directive/simple-search.coffee
View file @ f00cd272
...@@ -27,6 +27,11 @@ module.exports = ['$http', '$parse', ($http, $parse) -> ...@@ -27,6 +27,11 @@ module.exports = ['$http', '$parse', ($http, $parse) ->
restrict: 'E' restrict: 'E'
scope: 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: '=' query: '='
onSearch: '&' onSearch: '&'
onClear: '&' onClear: '&'
...@@ -34,9 +39,10 @@ module.exports = ['$http', '$parse', ($http, $parse) -> ...@@ -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)"> <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" <input class="simple-search-input" type="text" ng-model="searchtext" name="searchText"
placeholder="{{loading && 'Loading' || 'Search'}}…" placeholder="{{loading && 'Loading' || 'Search'}}…"
ng-disabled="loading" /> ng-disabled="loading"
<button class="simple-search-icon btn btn-clean" ng-hide="loading"> ng-class="(alwaysExpanded || searchtext.length > 0) ? 'is-expanded' : ''"/>
<i class="h-icon-search btn-icon"></i> <button class="simple-search-icon top-bar__btn" ng-hide="loading">
<i class="h-icon-search"></i>
</button> </button>
<button class="simple-search-icon btn btn-clean" ng-show="loading" disabled> <button class="simple-search-icon btn btn-clean" ng-show="loading" disabled>
<span class="btn-icon"><span class="spinner"></span></span> <span class="btn-icon"><span class="spinner"></span></span>
......
h/static/styles/annotator/inject.scss
View file @ f00cd272
...@@ -86,10 +86,18 @@ $base-font-size: 14px; ...@@ -86,10 +86,18 @@ $base-font-size: 14px;
// Sidebar // Sidebar
.annotator-frame { .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 '../reset';
@import './bucket-bar';
@include nested-reset; @include nested-reset;
@include reset-box-model; @include reset-box-model;
// frame styles
@import './bucket-bar';
@include user-select(none); @include user-select(none);
@extend .noise; @extend .noise;
direction: ltr; direction: ltr;
...@@ -125,22 +133,16 @@ $base-font-size: 14px; ...@@ -125,22 +133,16 @@ $base-font-size: 14px;
@include icons { @include icons {
font-family: 'h'; font-family: 'h';
} }
}
.annotator-no-transition { // the vertical toolbar at the left-edge of the sidebar
@include transition(none !important); // which provides controls for toggling the sidebar,
} // toggling highlights etc.
.annotator-placeholder { // note: These components CSS classes are nested inside
opacity: 0; // .annotator-frame to avoid being overridden by the
position: absolute; // CSS reset styles applied to .annotator-frame, which would otherwise
top: 50%; // have higher specificity
z-index: -1; .annotator-toolbar {
}
//CONTROLBAR STUFF////////////////////////////////
.annotator-frame .annotator-toolbar {
position: absolute; position: absolute;
left: -($bucket-bar-width + 18px - 7px); left: -($bucket-bar-width + 18px - 7px);
width: 37px; width: 37px;
...@@ -155,21 +157,9 @@ $base-font-size: 14px; ...@@ -155,21 +157,9 @@ $base-font-size: 14px;
@include reset-box-model; @include reset-box-model;
@include reset-list-style; @include reset-list-style;
} }
}
.annotator-frame .annotator-toolbar li {
font-size: 18px;
margin-bottom: 5px;
&:first-child button {
@include box-shadow(none);
border-radius: 4px 0 0 4px;
border-right-style: none;
padding-right: 6px;
width: 36px;
} }
button { .annotator-frame-button {
@include single-transition(background-color, .25s, .25s); @include single-transition(background-color, .25s, .25s);
@include smallshadow; @include smallshadow;
background: $white; background: $white;
...@@ -180,17 +170,45 @@ $base-font-size: 14px; ...@@ -180,17 +170,45 @@ $base-font-size: 14px;
height: 30px; height: 30px;
width: 30px; width: 30px;
padding: 0; padding: 0;
} font-size: 18px;
margin-bottom: 5px;
button:active { &:active {
@include single-transition(background-color, .25s); @include single-transition(background-color, .25s);
background-color: $gray-light; background-color: $gray-light;
} }
button:focus, button:hover { &:focus, &:hover {
outline: 0; outline: 0;
color: $text-color; 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);
} }
/* /*
......
h/static/styles/app.scss
View file @ f00cd272
...@@ -18,11 +18,13 @@ $base-line-height: 20px; ...@@ -18,11 +18,13 @@ $base-line-height: 20px;
@import './top-bar'; @import './top-bar';
body { body {
$sidebar-h-padding: 9px;
@extend .noise; @extend .noise;
font-family: $sans-font-family; font-family: $sans-font-family;
font-weight: 300; font-weight: 300;
padding: .72rem; padding: $sidebar-h-padding;
padding-top: calc(.72em + 30px); padding-top: $sidebar-h-padding + $top-bar-height;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
@include respond-to(tablets desktops) { @include respond-to(tablets desktops) {
...@@ -156,10 +158,30 @@ $group-list-width: 270px; ...@@ -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 // the name of a group in the groups drop-down list
// and 'Post to <Group>' button for saving annotations // and 'Post to <Group>' button for saving annotations
.group-name-link { .group-name-link {
white-space: nowrap; white-space: nowrap;
color: inherit;
} }
/* The user account dropdown menu */ /* The user account dropdown menu */
......
h/static/styles/common.scss
View file @ f00cd272
...@@ -172,7 +172,7 @@ html { ...@@ -172,7 +172,7 @@ html {
visibility: hidden; visibility: hidden;
background: $white; background: $white;
border: solid 1px $gray-lighter; border: solid 1px $gray-lighter;
margin-top: .8em; margin-top: 6px;
top: 100%; top: 100%;
float: left; float: left;
position: absolute; position: absolute;
...@@ -181,17 +181,6 @@ html { ...@@ -181,17 +181,6 @@ html {
li:not(.ng-hide) { li:not(.ng-hide) {
text-align: left; text-align: left;
& > a {
display: block;
line-height: 1;
padding: 1em;
white-space: nowrap;
:hover {
color: $brand-color;
}
}
&.inactive { &.inactive {
font-weight: 400; font-weight: 400;
color: $gray-lighter; color: $gray-lighter;
...@@ -209,8 +198,21 @@ html { ...@@ -209,8 +198,21 @@ html {
} }
} }
a { &__link {
color: inherit; 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. // These psuedo-elements add the speech bubble tail / triangle.
...@@ -261,6 +263,15 @@ html { ...@@ -261,6 +263,15 @@ html {
right: 50%; 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 { .open {
...@@ -270,6 +281,53 @@ html { ...@@ -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 { .masthead {
margin-bottom: 1em; margin-bottom: 1em;
......
h/static/styles/simple-search.scss
View file @ f00cd272
...@@ -17,17 +17,32 @@ ...@@ -17,17 +17,32 @@
color: $gray-light; color: $gray-light;
} }
input.simple-search-input { @at-root {
$expanded-max-width: 150px;
.simple-search-input {
flex-grow: 1; flex-grow: 1;
order: 1; order: 1;
color: $text-color; color: $text-color;
// disable the default browser styling for the input
border: none; border: none;
outline: none; outline: none;
padding: 0; padding: 0px;
width: 100%;
max-width: 0px;
transition: max-width .3s ease-out, padding-left .3s ease-out;
&:disabled { &:disabled {
background: none; background: none;
color: $gray-light; color: $gray-light;
} }
&:focus,&.is-expanded {
max-width: $expanded-max-width;
padding-left: 6px;
}
}
} }
h/static/styles/top-bar.scss
View file @ f00cd272
@import 'base'; @import 'base';
@import 'mixins/responsive'; @import 'mixins/responsive';
.topbar { $top-bar-height: 40px;
.top-bar {
background: $white; background: $white;
border: solid 1px $gray-lighter; border-bottom: solid 1px $gray-lighter;
border-style: solid none; height: $top-bar-height;
height: 30px;
font-size: 15px; font-size: 15px;
position: fixed; position: fixed;
left: 0; left: 0;
...@@ -14,39 +15,54 @@ ...@@ -14,39 +15,54 @@
z-index: 5; 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; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
align-items: center; 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 { .top-bar__inner .group-list {
flex-grow: 1;
margin-right: .75em; margin-right: .75em;
overflow: hidden;
} }
.topbar .inner .group-list { // an expander which adds spacing between the groups list
margin-right: .75em; // and the toolbar icons (in the new top-bar design)
.top-bar__expander {
flex-grow: 1;
} }
.topbar .btn { // Removes the native styling from a <button> element
color: $gray-light; @mixin reset-native-btn-styles {
min-width: 28px; padding: 0px;
height: 28px; margin: 0px;
background-color: transparent;
border-style: none;
outline: none;
}
border: 0; .top-bar__btn {
padding: 0; @include reset-native-btn-styles;
&:active, .js-active { color: $gray-light;
@include single-transition(background-color, .25s); display: inline-block;
background-color: $gray-light; cursor: pointer;
} padding-left: 6px;
&:focus, .js-focus, &:hover, .js-hover { &:hover {
color: $gray-dark; color: $gray-dark;
} }
} }
.top-bar__dropdown-arrow {
color: $color-dove-gray;
}
h/static/styles/vendor/ICOMOON.md
View file @ f00cd272
...@@ -17,9 +17,5 @@ add the relevant icons and then use the app's _Generate Font_ facility. ...@@ -17,9 +17,5 @@ add the relevant icons and then use the app's _Generate Font_ facility.
`h-icon-<name>` class name. `h-icon-<name>` class name.
4. Ensure all icons in the 'h' set are selected, then go to the 'Generate Font' tab in icomoon 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. and click the 'Download' button which appears _within_ the tab.
5. From the downloaded archive: 5. Run `scripts/update-icon-font.py <icomoon zip archive>` to update the icon font
* Extract `fonts/h.woff` -> `./fonts/h.woff` 6. Commit the updated files to the repository.
* 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.
h/static/styles/vendor/fonts/selection.json
View file @ f00cd272
{ {
"IcoMoonType": "selection", "IcoMoonType": "selection",
"icons": [ "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": { "icon": {
"paths": [ "paths": [
...@@ -18,7 +72,7 @@ ...@@ -18,7 +72,7 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"order": 48, "order": 52,
"id": 1307, "id": 1307,
"name": "group", "name": "group",
"prevSize": 24, "prevSize": 24,
...@@ -26,7 +80,7 @@ ...@@ -26,7 +80,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 0 "iconIdx": 2
}, },
{ {
"icon": { "icon": {
...@@ -54,7 +108,7 @@ ...@@ -54,7 +108,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 31 "iconIdx": 3
}, },
{ {
"icon": { "icon": {
...@@ -82,7 +136,7 @@ ...@@ -82,7 +136,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 39 "iconIdx": 4
}, },
{ {
"icon": { "icon": {
...@@ -110,7 +164,7 @@ ...@@ -110,7 +164,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 40 "iconIdx": 5
}, },
{ {
"icon": { "icon": {
...@@ -139,7 +193,7 @@ ...@@ -139,7 +193,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 41 "iconIdx": 6
}, },
{ {
"icon": { "icon": {
...@@ -172,7 +226,7 @@ ...@@ -172,7 +226,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 42 "iconIdx": 7
}, },
{ {
"icon": { "icon": {
...@@ -205,7 +259,7 @@ ...@@ -205,7 +259,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 43 "iconIdx": 8
}, },
{ {
"icon": { "icon": {
...@@ -245,7 +299,7 @@ ...@@ -245,7 +299,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 44 "iconIdx": 9
}, },
{ {
"icon": { "icon": {
...@@ -279,7 +333,7 @@ ...@@ -279,7 +333,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 45 "iconIdx": 10
}, },
{ {
"icon": { "icon": {
...@@ -304,7 +358,7 @@ ...@@ -304,7 +358,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 1 "iconIdx": 11
}, },
{ {
"icon": { "icon": {
...@@ -329,7 +383,7 @@ ...@@ -329,7 +383,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 2 "iconIdx": 12
}, },
{ {
"icon": { "icon": {
...@@ -354,7 +408,7 @@ ...@@ -354,7 +408,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 3 "iconIdx": 13
}, },
{ {
"icon": { "icon": {
...@@ -379,7 +433,7 @@ ...@@ -379,7 +433,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 4 "iconIdx": 14
}, },
{ {
"icon": { "icon": {
...@@ -404,7 +458,7 @@ ...@@ -404,7 +458,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 5 "iconIdx": 15
}, },
{ {
"icon": { "icon": {
...@@ -429,7 +483,7 @@ ...@@ -429,7 +483,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 6 "iconIdx": 16
}, },
{ {
"icon": { "icon": {
...@@ -454,7 +508,7 @@ ...@@ -454,7 +508,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 7 "iconIdx": 17
}, },
{ {
"icon": { "icon": {
...@@ -479,7 +533,7 @@ ...@@ -479,7 +533,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 8 "iconIdx": 18
}, },
{ {
"icon": { "icon": {
...@@ -504,7 +558,7 @@ ...@@ -504,7 +558,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 9 "iconIdx": 19
}, },
{ {
"icon": { "icon": {
...@@ -529,12 +583,13 @@ ...@@ -529,12 +583,13 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 10 "iconIdx": 20
}, },
{ {
"icon": { "icon": {
"paths": [ "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": [], "attrs": [],
"isMulticolor": false, "isMulticolor": false,
...@@ -547,14 +602,14 @@ ...@@ -547,14 +602,14 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 96, "id": 96,
"order": 12, "order": 53,
"prevSize": 24, "prevSize": 24,
"name": "search", "name": "search",
"code": 58883 "code": 58883
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 11 "iconIdx": 21
}, },
{ {
"icon": { "icon": {
...@@ -579,7 +634,7 @@ ...@@ -579,7 +634,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 12 "iconIdx": 22
}, },
{ {
"icon": { "icon": {
...@@ -604,7 +659,7 @@ ...@@ -604,7 +659,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 13 "iconIdx": 23
}, },
{ {
"icon": { "icon": {
...@@ -629,7 +684,7 @@ ...@@ -629,7 +684,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 14 "iconIdx": 24
}, },
{ {
"icon": { "icon": {
...@@ -654,7 +709,7 @@ ...@@ -654,7 +709,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 15 "iconIdx": 25
}, },
{ {
"icon": { "icon": {
...@@ -679,7 +734,7 @@ ...@@ -679,7 +734,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 16 "iconIdx": 26
}, },
{ {
"icon": { "icon": {
...@@ -704,7 +759,7 @@ ...@@ -704,7 +759,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 17 "iconIdx": 27
}, },
{ {
"icon": { "icon": {
...@@ -729,7 +784,7 @@ ...@@ -729,7 +784,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 18 "iconIdx": 28
}, },
{ {
"icon": { "icon": {
...@@ -754,7 +809,7 @@ ...@@ -754,7 +809,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 19 "iconIdx": 29
}, },
{ {
"icon": { "icon": {
...@@ -780,7 +835,7 @@ ...@@ -780,7 +835,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 20 "iconIdx": 30
}, },
{ {
"icon": { "icon": {
...@@ -805,7 +860,7 @@ ...@@ -805,7 +860,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 21 "iconIdx": 31
}, },
{ {
"icon": { "icon": {
...@@ -830,7 +885,7 @@ ...@@ -830,7 +885,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 22 "iconIdx": 32
}, },
{ {
"icon": { "icon": {
...@@ -855,7 +910,7 @@ ...@@ -855,7 +910,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 23 "iconIdx": 33
}, },
{ {
"icon": { "icon": {
...@@ -880,7 +935,7 @@ ...@@ -880,7 +935,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 24 "iconIdx": 34
}, },
{ {
"icon": { "icon": {
...@@ -905,7 +960,7 @@ ...@@ -905,7 +960,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 25 "iconIdx": 35
}, },
{ {
"icon": { "icon": {
...@@ -930,7 +985,7 @@ ...@@ -930,7 +985,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 26 "iconIdx": 36
}, },
{ {
"icon": { "icon": {
...@@ -955,7 +1010,7 @@ ...@@ -955,7 +1010,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 27 "iconIdx": 37
}, },
{ {
"icon": { "icon": {
...@@ -980,7 +1035,7 @@ ...@@ -980,7 +1035,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 28 "iconIdx": 38
}, },
{ {
"icon": { "icon": {
...@@ -1005,7 +1060,7 @@ ...@@ -1005,7 +1060,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 29 "iconIdx": 39
}, },
{ {
"icon": { "icon": {
...@@ -1030,7 +1085,7 @@ ...@@ -1030,7 +1085,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 30 "iconIdx": 40
}, },
{ {
"icon": { "icon": {
...@@ -1055,7 +1110,7 @@ ...@@ -1055,7 +1110,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 32 "iconIdx": 41
}, },
{ {
"icon": { "icon": {
...@@ -1080,7 +1135,7 @@ ...@@ -1080,7 +1135,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 33 "iconIdx": 42
}, },
{ {
"icon": { "icon": {
...@@ -1105,7 +1160,7 @@ ...@@ -1105,7 +1160,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 34 "iconIdx": 43
}, },
{ {
"icon": { "icon": {
...@@ -1130,7 +1185,7 @@ ...@@ -1130,7 +1185,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 35 "iconIdx": 44
}, },
{ {
"icon": { "icon": {
...@@ -1155,7 +1210,7 @@ ...@@ -1155,7 +1210,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 36 "iconIdx": 45
}, },
{ {
"icon": { "icon": {
...@@ -1180,7 +1235,7 @@ ...@@ -1180,7 +1235,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 37 "iconIdx": 46
}, },
{ {
"icon": { "icon": {
...@@ -1209,7 +1264,7 @@ ...@@ -1209,7 +1264,7 @@
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 38 "iconIdx": 47
} }
], ],
"height": 1024, "height": 1024,
......
h/static/styles/vendor/icomoon.css
View file @ f00cd272
This diff is collapsed.
h/templates/client/group_list.html
View file @ f00cd272
...@@ -4,13 +4,15 @@ ...@@ -4,13 +4,15 @@
data-toggle="dropdown" data-toggle="dropdown"
role="button" role="button"
ng-switch on="groups.focused().public" ng-switch on="groups.focused().public"
ng-click="toggleShareLink(undefined)"> ng-click="toggleShareLink(undefined)"
<i class="h-icon-public" ng-switch-when="true"></i> title="Change the selected group">
<i class="h-icon-group" ng-switch-default></i> <i class="group-list-label__icon h-icon-public" ng-switch-when="true"></i><!-- nospace
{{groups.focused().name}} !--><i class="group-list-label__icon h-icon-group" ng-switch-default></i>
<i class="h-icon-arrow-drop-down"></i> <span class="group-list-label__label">{{groups.focused().name}}</span><!-- nospace
!--><i class="h-icon-arrow-drop-down"></i>
</span> </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()"> <li ng-repeat="group in groups.all()">
<div ng-class="{'group-item': true, selected: group.id == groups.focused().id}" <div ng-class="{'group-item': true, selected: group.id == groups.focused().id}"
ng-click="groups.focus(group.id)"> ng-click="groups.focus(group.id)">
...@@ -59,7 +61,7 @@ ...@@ -59,7 +61,7 @@
<div class="group-item" ng-click="createNewGroup()"> <div class="group-item" ng-click="createNewGroup()">
<div class="group-icon-container"><i class="h-icon-add"></i></div> <div class="group-icon-container"><i class="h-icon-add"></i></div>
<div class="group-details"> <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 New group
</a> </a>
</div> </div>
......
h/templates/client/top_bar.html
View file @ f00cd272
<div class="topbar" ng-class="frame.visible && 'shown'" ng-cloak> <!-- top bar for the sidebar and the stream.
<div class="inner content"> !-->
<button class="btn btn-clean" <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-click="shareDialog.visible = !shareDialog.visible"
ng-if="isSidebar" ng-if="isSidebar"
title="Share this page"> title="Share this page">
<i class="h-icon-share btn-icon"></i> <i class="h-icon-share"></i>
</button> </button>
<simple-search class="simple-search" <simple-search class="simple-search"
query="searchController.query" query="searchController.query"
on-search="searchController.update(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 class="group-list" ng-if="groupsEnabled">
</group-list> </group-list>
...@@ -24,12 +30,61 @@ ...@@ -24,12 +30,61 @@
{{account.username}}<span class="provider" ng-show="authUser">/{{account.provider}}</span><i class="h-icon-arrow-drop-down"></i> {{account.username}}<span class="provider" ng-show="authUser">/{{account.provider}}</span><i class="h-icon-arrow-drop-down"></i>
</span> </span>
<ul class="dropdown-menu pull-right" role="menu"> <ul class="dropdown-menu pull-right" role="menu">
<li ng-show="authUser"><a href="" ng-click="accountDialog.visible = true">Account</a></li> <li ng-show="authUser"><a class="dropdown-menu__link" href="" ng-click="accountDialog.visible = true">Account</a></li>
<li><a href="mailto:support@hypothes.is">Feedback</a></li> <li><a class="dropdown-menu__link" href="mailto:support@hypothes.is">Feedback</a></li>
<li><a href="/docs/help" target="_blank">Help</a></li> <li><a class="dropdown-menu__link" 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="/stream?q=user:{{account.username}}"
target="_blank">My Annotations</a></li> 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> </ul>
</div> </div>
</div> </div>
......
h/templates/client/viewer.html
View file @ f00cd272
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
<li ng-click="sort.name = option" <li ng-click="sort.name = option"
ng-hide="option == 'Location' && !isSidebar" ng-hide="option == 'Location' && !isSidebar"
ng-repeat="option in ['Newest', 'Oldest', 'Location']" ng-repeat="option in ['Newest', 'Oldest', 'Location']"
><a href="">{{option}}</a></li> ><a class="dropdown-menu__link" href="">{{option}}</a></li>
</ul> </ul>
</span> </span>
</li> </li>
......
scripts/update-icon-font.py 0 → 100755
View file @ f00cd272
#!/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()
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment