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) ->
.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
View file @ f00cd272
......@@ -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
View file @ f00cd272
......@@ -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,22 +133,16 @@ $base-font-size: 14px;
@include icons {
font-family: 'h';
}
}
.annotator-no-transition {
@include transition(none !important);
}
// the vertical toolbar at the left-edge of the sidebar
// which provides controls for toggling the sidebar,
// toggling highlights etc.
.annotator-placeholder {
opacity: 0;
position: absolute;
top: 50%;
z-index: -1;
}
//CONTROLBAR STUFF////////////////////////////////
.annotator-frame .annotator-toolbar {
// 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;
......@@ -155,21 +157,9 @@ $base-font-size: 14px;
@include reset-box-model;
@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 smallshadow;
background: $white;
......@@ -180,17 +170,45 @@ $base-font-size: 14px;
height: 30px;
width: 30px;
padding: 0;
}
font-size: 18px;
margin-bottom: 5px;
button:active {
&:active {
@include single-transition(background-color, .25s);
background-color: $gray-light;
}
button:focus, button:hover {
&:focus, &: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);
}
/*
......
h/static/styles/app.scss
View file @ f00cd272
......@@ -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
View file @ f00cd272
......@@ -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
View file @ f00cd272
......@@ -17,17 +17,32 @@
color: $gray-light;
}
input.simple-search-input {
@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: 0;
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
View file @ f00cd272
@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
View file @ f00cd272
......@@ -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
View file @ f00cd272
{
"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
View file @ f00cd272
This diff is collapsed.
h/templates/client/group_list.html
View file @ f00cd272
......@@ -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
View file @ f00cd272
<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
View file @ f00cd272
......@@ -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 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