Skip to content

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

Merge pull request #3078 from... 

Merge pull request #3078 from hypothesis/sheetaluk/281-update-the-toolbar-s-note-icon-tooltip-and-update-the-adder-design

changing adder icons and note icon in toolbar.
parents cba3f7f7 0717221f
Hide whitespace changes
Inline Side-by-side
Showing with 436 additions and 289 deletions
h/static/scripts/annotator/guest.coffee
View file @ 9f1eb5ef
...@@ -44,8 +44,14 @@ module.exports = class Guest extends Annotator ...@@ -44,8 +44,14 @@ module.exports = class Guest extends Annotator
html: extend {}, Annotator::html, html: extend {}, Annotator::html,
adder: ''' adder: '''
<div class="annotator-adder"> <div class="annotator-adder">
<button class="h-icon-insert-comment" data-action="comment" title="New Note"></button> <div class="annotator-adder-actions">
<button class="h-icon-border-color" data-action="highlight" title="Highlight"></button> <button class="annotator-adder-actions__button h-icon-annotate" data-action="comment">
<span class="annotator-adder-actions__label" data-action="comment">Annotate</span>
</button>
<button class="annotator-adder-actions__button h-icon-highlight" data-action="highlight">
<span class="annotator-adder-actions__label" data-action="highlight">Highlight</span>
</button>
</div>
</div> </div>
''' '''
...@@ -343,6 +349,11 @@ module.exports = class Guest extends Annotator ...@@ -343,6 +349,11 @@ module.exports = class Guest extends Annotator
@selectedRanges = event.ranges @selectedRanges = event.ranges
Annotator.$('.annotator-toolbar .h-icon-note')
.attr('title', 'New Annotation')
.removeClass('h-icon-note')
.addClass('h-icon-annotate');
# Do we want immediate annotation? # Do we want immediate annotation?
if immediate if immediate
# Create an annotation # Create an annotation
...@@ -359,6 +370,11 @@ module.exports = class Guest extends Annotator ...@@ -359,6 +370,11 @@ module.exports = class Guest extends Annotator
@adder.hide() @adder.hide()
@selectedRanges = [] @selectedRanges = []
Annotator.$('.annotator-toolbar .h-icon-annotate')
.attr('title', 'New Page Note')
.removeClass('h-icon-annotate')
.addClass('h-icon-note');
selectAnnotations: (annotations, toggle) -> selectAnnotations: (annotations, toggle) ->
if toggle if toggle
this.toggleAnnotationSelection annotations this.toggleAnnotationSelection annotations
......
h/static/scripts/annotator/plugin/textselection.coffee
View file @ 9f1eb5ef
...@@ -30,14 +30,19 @@ module.exports = class TextSelection extends Annotator.Plugin ...@@ -30,14 +30,19 @@ module.exports = class TextSelection extends Annotator.Plugin
# #
# Returns nothing. # Returns nothing.
checkForEndSelection: (event = {}) => checkForEndSelection: (event = {}) =>
# Get the currently selected ranges. callback = ->
selection = Annotator.Util.getGlobal().getSelection() # Get the currently selected ranges.
ranges = for i in [0...selection.rangeCount] selection = Annotator.Util.getGlobal().getSelection()
r = selection.getRangeAt(0) ranges = for i in [0...selection.rangeCount]
if r.collapsed then continue else r r = selection.getRangeAt(0)
if r.collapsed then continue else r
if ranges.length
event.ranges = ranges if ranges.length
@annotator.onSuccessfulSelection event event.ranges = ranges
else @annotator.onSuccessfulSelection event
@annotator.onFailedSelection event else
@annotator.onFailedSelection event
# Run callback after the current event loop tick
# so that the mouseup event can update the document selection.
setTimeout callback, 0
h/static/scripts/annotator/plugin/toolbar.coffee
View file @ 9f1eb5ef
...@@ -51,14 +51,14 @@ module.exports = class Toolbar extends Annotator.Plugin ...@@ -51,14 +51,14 @@ module.exports = class Toolbar extends Annotator.Plugin
state = not @annotator.visibleHighlights state = not @annotator.visibleHighlights
@annotator.setVisibleHighlights state @annotator.setVisibleHighlights state
, ,
"title": "New Note" "title": "New Page Note"
"class": "h-icon-insert-comment" "class": "h-icon-note"
"name": "insert-comment" "name": "insert-comment"
"on": "on":
"click": (event) => "click": (event) =>
event.preventDefault() event.preventDefault()
event.stopPropagation() event.stopPropagation()
@annotator.createComment() @annotator.createAnnotation()
@annotator.show() @annotator.show()
] ]
@buttons = $(makeButton(item) for item in items) @buttons = $(makeButton(item) for item in items)
......
h/static/styles/annotator/inject.scss
View file @ 9f1eb5ef
...@@ -7,59 +7,75 @@ $base-font-size: 14px; ...@@ -7,59 +7,75 @@ $base-font-size: 14px;
.annotator-adder { .annotator-adder {
box-sizing: border-box; box-sizing: border-box;
direction: ltr; direction: ltr;
height: 35px; margin-top: -60px;
margin-left: -20px; margin-left: -65px;
margin-top: -50px;
padding: 0;
position: absolute; position: absolute;
background: $white; background: $white;
border: 3px solid $gray; border: 1px solid rgba(0,0,0,0.20);
border-radius: 4px; border-radius: 4px;
box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.15);
z-index: 999; z-index: 999;
}
&:before { .annotator-adder:before {
@include rotate(45deg); @include rotate(45deg);
background: $white; background: $white;
bottom: -8px; bottom: -5px;
border-bottom: 4px solid $gray; border-bottom: 1px solid rgba(0,0,0,0.20);
border-right: 4px solid $gray; border-right: 1px solid rgba(0,0,0,0.20);
content: ""; content: "";
display: block; display: block;
height: 6px; height: 6px;
left: 0; left: 0;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
position: absolute; position: absolute;
right: 0; right: 0;
width: 6px; width: 6px;
} }
button { .annotator-adder-actions {
@include box-shadow(none); display: flex;
display: inline-block; flex-direction: row;
font-family: h; }
border: none;
cursor: pointer;
height: 100%;
width: 35px;
font-size: 18px;
margin: 0;
padding: 0;
text-align: center;
background: $white !important;
color: $gray-light !important;
&:active { .annotator-adder-actions:hover .annotator-adder-actions__button {
transition: background-color .25s; color: $gray-light !important;
background-color: $gray-light !important; }
}
&:hover { .annotator-adder-actions__button {
color: $gray-dark !important; @include box-shadow(none);
} font-family: h;
font-size: 18px;
background: transparent !important;
color: $gray-dark !important;
display: flex;
flex-direction: column;
align-items: center;
border: none;
cursor: pointer;
padding-top: 7px;
padding-bottom: 6px;
padding-left: 10px;
padding-right: 10px;
}
.annotator-adder-actions .annotator-adder-actions__button:hover {
color: $gray-dark !important;
.annotator-adder-actions__label {
color: $gray-dark !important;
} }
} }
.annotator-adder-actions__label {
font-size: 11px;
margin: 2px 0px;
font-family: sans-serif;
color: $gray-light !important;
}
//HIGHLIGHTS//////////////////////////////// //HIGHLIGHTS////////////////////////////////
.annotator-highlights-always-on { .annotator-highlights-always-on {
......
h/static/styles/vendor/fonts/selection.json
View file @ 9f1eb5ef
{ {
"IcoMoonType": "selection", "IcoMoonType": "selection",
"icons": [ "icons": [
{
"icon": {
"paths": [
"M324.901 387.878c23.454-131.878 123.099-131.878 123.099-131.878v-64c0 0-192 0-192 256 0 5.664 0.501 10.826 1.415 15.487-0.93 5.365-1.415 10.882-1.415 16.513 0 53.019 42.981 96 96 96s96-42.981 96-96c0-53.019-42.981-96-96-96-9.411 0-18.505 1.354-27.099 3.878zM644.901 387.878c23.454-131.878 123.099-131.878 123.099-131.878v-64c0 0-192 0-192 256 0 5.664 0.501 10.826 1.415 15.487-0.93 5.365-1.415 10.882-1.415 16.513 0 53.019 42.981 96 96 96s96-42.981 96-96c0-53.019-42.981-96-96-96-9.411 0-18.505 1.354-27.099 3.878zM0 63.904c0-35.293 28.456-63.904 64.056-63.904h895.888c35.377 0 64.056 29.134 64.056 64.269v959.731l-256-192h-703.842c-35.434 0-64.158-28.639-64.158-63.904v-704.192z"
],
"attrs": [
{
"fill": "rgb(122, 122, 122)"
}
],
"isMulticolor": false,
"grid": 16,
"tags": [
"annotate"
]
},
"attrs": [
{
"fill": "rgb(122, 122, 122)"
}
],
"properties": {
"order": 52,
"id": 1315,
"name": "annotate",
"prevSize": 24,
"code": 59651
},
"setIdx": 0,
"setId": 1,
"iconIdx": 0
},
{
"icon": {
"paths": [
"M192 960h512v64h-512v-64z",
"M576 0h256l64 576h-384l64-576z",
"M768 768l64-64v-64h-256v64l64 64v128h64l64-64v-64z"
],
"attrs": [
{
"fill": "rgb(122, 122, 122)"
},
{
"fill": "rgb(122, 122, 122)"
},
{
"fill": "rgb(122, 122, 122)"
}
],
"isMulticolor": false,
"grid": 16,
"tags": [
"highlight"
]
},
"attrs": [
{
"fill": "rgb(122, 122, 122)"
},
{
"fill": "rgb(122, 122, 122)"
},
{
"fill": "rgb(122, 122, 122)"
}
],
"properties": {
"order": 53,
"id": 1314,
"name": "highlight",
"prevSize": 24,
"code": 59652
},
"setIdx": 0,
"setId": 1,
"iconIdx": 1
},
{
"icon": {
"paths": [
"M64 128.438v767.124c0 35.641 28.85 64.438 64.438 64.438h703.187c70.963 0 128.375-57.475 128.375-128.375v-703.187c0-35.641-28.85-64.438-64.438-64.438h-767.124c-35.641 0-64.438 28.85-64.438 64.438zM192 256h640v64h-640v-64zM192 448h576v64h-576v-64zM192 640h384v64h-384v-64zM768 704h192v64h-192v-64zM704 704h64v256h-64v-256z"
],
"attrs": [
{
"fill": "rgb(122, 122, 122)"
}
],
"isMulticolor": false,
"grid": 16,
"tags": [
"note"
]
},
"attrs": [
{
"fill": "rgb(122, 122, 122)"
}
],
"properties": {
"order": 54,
"id": 1313,
"name": "note",
"prevSize": 24,
"code": 59653
},
"setIdx": 0,
"setId": 1,
"iconIdx": 2
},
{ {
"icon": { "icon": {
"paths": [ "paths": [
...@@ -17,15 +127,15 @@ ...@@ -17,15 +127,15 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"order": 162, "order": 1,
"id": 1309, "id": 1309,
"name": "account", "name": "account",
"prevSize": 24, "prevSize": 24,
"code": 59392 "code": 59392
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 0 "iconIdx": 3
}, },
{ {
"icon": { "icon": {
...@@ -47,15 +157,15 @@ ...@@ -47,15 +157,15 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"order": 163, "order": 2,
"id": 1308, "id": 1308,
"name": "sort", "name": "sort",
"prevSize": 24, "prevSize": 24,
"code": 59393 "code": 59393
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 1 "iconIdx": 4
}, },
{ {
"icon": { "icon": {
...@@ -74,15 +184,15 @@ ...@@ -74,15 +184,15 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"order": 164, "order": 3,
"id": 1307, "id": 1307,
"name": "group", "name": "group",
"prevSize": 24, "prevSize": 24,
"code": 58910 "code": 58910
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 2 "iconIdx": 5
}, },
{ {
"icon": { "icon": {
...@@ -102,15 +212,15 @@ ...@@ -102,15 +212,15 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"order": 165, "order": 4,
"id": 1306, "id": 1306,
"prevSize": 24, "prevSize": 24,
"name": "cancel-outline", "name": "cancel-outline",
"code": 58905 "code": 58905
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 3 "iconIdx": 6
}, },
{ {
"icon": { "icon": {
...@@ -130,15 +240,15 @@ ...@@ -130,15 +240,15 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 1292, "id": 1292,
"order": 166, "order": 5,
"prevSize": 24, "prevSize": 24,
"code": 60040, "code": 60040,
"ligatures": "google-plus, brand2", "ligatures": "google-plus, brand2",
"name": "google-plus" "name": "google-plus"
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 4 "iconIdx": 7
}, },
{ {
"icon": { "icon": {
...@@ -158,15 +268,15 @@ ...@@ -158,15 +268,15 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 1298, "id": 1298,
"order": 167, "order": 6,
"prevSize": 24, "prevSize": 24,
"code": 60045, "code": 60045,
"ligatures": "facebook2, brand7", "ligatures": "facebook2, brand7",
"name": "facebook" "name": "facebook"
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 5 "iconIdx": 8
}, },
{ {
"icon": { "icon": {
...@@ -187,15 +297,15 @@ ...@@ -187,15 +297,15 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 1302, "id": 1302,
"order": 168, "order": 7,
"prevSize": 24, "prevSize": 24,
"code": 60049, "code": 60049,
"ligatures": "twitter, brand11", "ligatures": "twitter, brand11",
"name": "twitter" "name": "twitter"
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 6 "iconIdx": 9
}, },
{ {
"icon": { "icon": {
...@@ -214,16 +324,16 @@ ...@@ -214,16 +324,16 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"order": 169, "order": 8,
"id": 1310, "id": 1310,
"prevSize": 24, "prevSize": 24,
"ligatures": "github, brand40", "ligatures": "github, brand40",
"name": "github", "name": "github",
"code": 59648 "code": 59648
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 7 "iconIdx": 10
}, },
{ {
"icon": { "icon": {
...@@ -242,15 +352,15 @@ ...@@ -242,15 +352,15 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 1311, "id": 1311,
"order": 170, "order": 9,
"prevSize": 24, "prevSize": 24,
"ligatures": "feed2, rss", "ligatures": "feed2, rss",
"name": "feed", "name": "feed",
"code": 59649 "code": 59649
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 8 "iconIdx": 11
}, },
{ {
"icon": { "icon": {
...@@ -275,15 +385,15 @@ ...@@ -275,15 +385,15 @@
} }
], ],
"properties": { "properties": {
"order": 171, "order": 10,
"id": 199, "id": 199,
"prevSize": 24, "prevSize": 24,
"code": 58911, "code": 58911,
"name": "cc-by" "name": "cc-by"
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 9 "iconIdx": 12
}, },
{ {
"icon": { "icon": {
...@@ -308,15 +418,15 @@ ...@@ -308,15 +418,15 @@
} }
], ],
"properties": { "properties": {
"order": 172, "order": 11,
"id": 200, "id": 200,
"prevSize": 24, "prevSize": 24,
"code": 58912, "code": 58912,
"name": "cc-logo" "name": "cc-logo"
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 10 "iconIdx": 13
}, },
{ {
"icon": { "icon": {
...@@ -348,15 +458,15 @@ ...@@ -348,15 +458,15 @@
} }
], ],
"properties": { "properties": {
"order": 173, "order": 12,
"id": 201, "id": 201,
"prevSize": 24, "prevSize": 24,
"code": 58913, "code": 58913,
"name": "cc-zero" "name": "cc-zero"
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 11 "iconIdx": 14
}, },
{ {
"icon": { "icon": {
...@@ -382,15 +492,15 @@ ...@@ -382,15 +492,15 @@
{} {}
], ],
"properties": { "properties": {
"order": 174, "order": 13,
"id": 0, "id": 0,
"prevSize": 24, "prevSize": 24,
"name": "markdown", "name": "markdown",
"code": 58891 "code": 58891
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 12 "iconIdx": 15
}, },
{ {
"icon": { "icon": {
...@@ -407,14 +517,14 @@ ...@@ -407,14 +517,14 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 1312, "id": 1312,
"order": 212, "order": 51,
"prevSize": 24, "prevSize": 24,
"code": 59650, "code": 59650,
"name": "move" "name": "move"
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 50 "iconIdx": 16
}, },
{ {
"icon": { "icon": {
...@@ -431,15 +541,15 @@ ...@@ -431,15 +541,15 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"order": 175, "order": 14,
"id": 1305, "id": 1305,
"prevSize": 24, "prevSize": 24,
"code": 58909, "code": 58909,
"name": "arrow-right" "name": "arrow-right"
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 13 "iconIdx": 17
}, },
{ {
"icon": { "icon": {
...@@ -456,15 +566,15 @@ ...@@ -456,15 +566,15 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"order": 176, "order": 15,
"id": 1303, "id": 1303,
"prevSize": 24, "prevSize": 24,
"code": 58921, "code": 58921,
"name": "arrow-drop-down" "name": "arrow-drop-down"
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 14 "iconIdx": 18
}, },
{ {
"icon": { "icon": {
...@@ -482,14 +592,14 @@ ...@@ -482,14 +592,14 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 271, "id": 271,
"order": 177, "order": 16,
"prevSize": 24, "prevSize": 24,
"code": 58920, "code": 58920,
"name": "link" "name": "link"
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 15 "iconIdx": 19
}, },
{ {
"icon": { "icon": {
...@@ -507,14 +617,14 @@ ...@@ -507,14 +617,14 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 264, "id": 264,
"order": 178, "order": 17,
"prevSize": 24, "prevSize": 24,
"name": "create", "name": "create",
"code": 58919 "code": 58919
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 16 "iconIdx": 20
}, },
{ {
"icon": { "icon": {
...@@ -532,14 +642,14 @@ ...@@ -532,14 +642,14 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 32, "id": 32,
"order": 179, "order": 18,
"prevSize": 24, "prevSize": 24,
"code": 58916, "code": 58916,
"name": "delete" "name": "delete"
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 17 "iconIdx": 21
}, },
{ {
"icon": { "icon": {
...@@ -557,14 +667,14 @@ ...@@ -557,14 +667,14 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 275, "id": 275,
"order": 180, "order": 19,
"prevSize": 24, "prevSize": 24,
"code": 58917, "code": 58917,
"name": "remove" "name": "remove"
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 18 "iconIdx": 22
}, },
{ {
"icon": { "icon": {
...@@ -582,14 +692,14 @@ ...@@ -582,14 +692,14 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 521, "id": 521,
"order": 181, "order": 20,
"prevSize": 24, "prevSize": 24,
"code": 58918, "code": 58918,
"name": "edit" "name": "edit"
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 19 "iconIdx": 23
}, },
{ {
"icon": { "icon": {
...@@ -607,14 +717,14 @@ ...@@ -607,14 +717,14 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 25, "id": 25,
"order": 182, "order": 21,
"prevSize": 24, "prevSize": 24,
"name": "bookmark", "name": "bookmark",
"code": 58880 "code": 58880
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 20 "iconIdx": 24
}, },
{ {
"icon": { "icon": {
...@@ -632,14 +742,14 @@ ...@@ -632,14 +742,14 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 35, "id": 35,
"order": 183, "order": 22,
"name": "done", "name": "done",
"prevSize": 24, "prevSize": 24,
"code": 58881 "code": 58881
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 21 "iconIdx": 25
}, },
{ {
"icon": { "icon": {
...@@ -657,14 +767,14 @@ ...@@ -657,14 +767,14 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 65, "id": 65,
"order": 184, "order": 23,
"name": "lock", "name": "lock",
"prevSize": 24, "prevSize": 24,
"code": 58882 "code": 58882
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 22 "iconIdx": 26
}, },
{ {
"icon": { "icon": {
...@@ -683,14 +793,14 @@ ...@@ -683,14 +793,14 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 96, "id": 96,
"order": 185, "order": 24,
"prevSize": 24, "prevSize": 24,
"name": "search", "name": "search",
"code": 58883 "code": 58883
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 23 "iconIdx": 27
}, },
{ {
"icon": { "icon": {
...@@ -708,14 +818,14 @@ ...@@ -708,14 +818,14 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 97, "id": 97,
"order": 186, "order": 25,
"prevSize": 24, "prevSize": 24,
"name": "settings", "name": "settings",
"code": 58884 "code": 58884
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 24 "iconIdx": 28
}, },
{ {
"icon": { "icon": {
...@@ -733,14 +843,14 @@ ...@@ -733,14 +843,14 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 156, "id": 156,
"order": 187, "order": 26,
"name": "visibility", "name": "visibility",
"prevSize": 24, "prevSize": 24,
"code": 58885 "code": 58885
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 25 "iconIdx": 29
}, },
{ {
"icon": { "icon": {
...@@ -758,14 +868,14 @@ ...@@ -758,14 +868,14 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 157, "id": 157,
"order": 188, "order": 27,
"name": "visibility-off", "name": "visibility-off",
"prevSize": 24, "prevSize": 24,
"code": 58886 "code": 58886
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 26 "iconIdx": 30
}, },
{ {
"icon": { "icon": {
...@@ -783,14 +893,14 @@ ...@@ -783,14 +893,14 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 253, "id": 253,
"order": 189, "order": 28,
"name": "add", "name": "add",
"prevSize": 24, "prevSize": 24,
"code": 58888 "code": 58888
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 27 "iconIdx": 31
}, },
{ {
"icon": { "icon": {
...@@ -808,14 +918,14 @@ ...@@ -808,14 +918,14 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 260, "id": 260,
"order": 190, "order": 29,
"name": "clear", "name": "clear",
"prevSize": 24, "prevSize": 24,
"code": 58889 "code": 58889
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 28 "iconIdx": 32
}, },
{ {
"icon": { "icon": {
...@@ -833,14 +943,14 @@ ...@@ -833,14 +943,14 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 261, "id": 261,
"order": 191, "order": 30,
"name": "content-copy", "name": "content-copy",
"prevSize": 24, "prevSize": 24,
"code": 58890 "code": 58890
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 29 "iconIdx": 33
}, },
{ {
"icon": { "icon": {
...@@ -858,14 +968,14 @@ ...@@ -858,14 +968,14 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 267, "id": 267,
"order": 192, "order": 31,
"prevSize": 24, "prevSize": 24,
"name": "flag", "name": "flag",
"code": 58892 "code": 58892
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 30 "iconIdx": 34
}, },
{ {
"icon": { "icon": {
...@@ -883,14 +993,14 @@ ...@@ -883,14 +993,14 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 278, "id": 278,
"order": 193, "order": 32,
"prevSize": 24, "prevSize": 24,
"name": "reply", "name": "reply",
"code": 58893 "code": 58893
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 31 "iconIdx": 35
}, },
{ {
"icon": { "icon": {
...@@ -909,14 +1019,14 @@ ...@@ -909,14 +1019,14 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 378, "id": 378,
"order": 194, "order": 33,
"name": "border-color", "name": "border-color",
"prevSize": 24, "prevSize": 24,
"code": 58894 "code": 58894
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 32 "iconIdx": 36
}, },
{ {
"icon": { "icon": {
...@@ -934,14 +1044,14 @@ ...@@ -934,14 +1044,14 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 391, "id": 391,
"order": 195, "order": 34,
"prevSize": 24, "prevSize": 24,
"name": "format-bold", "name": "format-bold",
"code": 58895 "code": 58895
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 33 "iconIdx": 37
}, },
{ {
"icon": { "icon": {
...@@ -959,14 +1069,14 @@ ...@@ -959,14 +1069,14 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 398, "id": 398,
"order": 196, "order": 35,
"prevSize": 24, "prevSize": 24,
"name": "format-italic", "name": "format-italic",
"code": 58896 "code": 58896
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 34 "iconIdx": 38
}, },
{ {
"icon": { "icon": {
...@@ -984,14 +1094,14 @@ ...@@ -984,14 +1094,14 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 400, "id": 400,
"order": 197, "order": 36,
"prevSize": 24, "prevSize": 24,
"name": "format-list-bulleted", "name": "format-list-bulleted",
"code": 58897 "code": 58897
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 35 "iconIdx": 39
}, },
{ {
"icon": { "icon": {
...@@ -1009,14 +1119,14 @@ ...@@ -1009,14 +1119,14 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 401, "id": 401,
"order": 198, "order": 37,
"prevSize": 24, "prevSize": 24,
"name": "format-list-numbered", "name": "format-list-numbered",
"code": 58898 "code": 58898
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 36 "iconIdx": 40
}, },
{ {
"icon": { "icon": {
...@@ -1034,14 +1144,14 @@ ...@@ -1034,14 +1144,14 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 403, "id": 403,
"order": 199, "order": 38,
"prevSize": 24, "prevSize": 24,
"name": "format-quote", "name": "format-quote",
"code": 58899 "code": 58899
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 37 "iconIdx": 41
}, },
{ {
"icon": { "icon": {
...@@ -1059,14 +1169,14 @@ ...@@ -1059,14 +1169,14 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 406, "id": 406,
"order": 200, "order": 39,
"name": "functions", "name": "functions",
"prevSize": 24, "prevSize": 24,
"code": 58900 "code": 58900
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 38 "iconIdx": 42
}, },
{ {
"icon": { "icon": {
...@@ -1083,15 +1193,15 @@ ...@@ -1083,15 +1193,15 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"order": 201, "order": 40,
"id": 751, "id": 751,
"prevSize": 24, "prevSize": 24,
"code": 58903, "code": 58903,
"name": "insert-comment" "name": "insert-comment"
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 39 "iconIdx": 43
}, },
{ {
"icon": { "icon": {
...@@ -1109,14 +1219,14 @@ ...@@ -1109,14 +1219,14 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 415, "id": 415,
"order": 202, "order": 41,
"prevSize": 24, "prevSize": 24,
"name": "insert-link", "name": "insert-link",
"code": 58901 "code": 58901
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 40 "iconIdx": 44
}, },
{ {
"icon": { "icon": {
...@@ -1134,14 +1244,14 @@ ...@@ -1134,14 +1244,14 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 416, "id": 416,
"order": 203, "order": 42,
"prevSize": 24, "prevSize": 24,
"name": "insert-photo", "name": "insert-photo",
"code": 58902 "code": 58902
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 41 "iconIdx": 45
}, },
{ {
"icon": { "icon": {
...@@ -1159,14 +1269,14 @@ ...@@ -1159,14 +1269,14 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 677, "id": 677,
"order": 204, "order": 43,
"prevSize": 24, "prevSize": 24,
"name": "cancel", "name": "cancel",
"code": 58906 "code": 58906
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 42 "iconIdx": 46
}, },
{ {
"icon": { "icon": {
...@@ -1184,14 +1294,14 @@ ...@@ -1184,14 +1294,14 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 678, "id": 678,
"order": 205, "order": 44,
"name": "check", "name": "check",
"prevSize": 24, "prevSize": 24,
"code": 58907 "code": 58907
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 43 "iconIdx": 47
}, },
{ {
"icon": { "icon": {
...@@ -1208,15 +1318,15 @@ ...@@ -1208,15 +1318,15 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"order": 206, "order": 45,
"id": 749, "id": 749,
"prevSize": 24, "prevSize": 24,
"code": 58887, "code": 58887,
"name": "chevron-left" "name": "chevron-left"
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 44 "iconIdx": 48
}, },
{ {
"icon": { "icon": {
...@@ -1233,15 +1343,15 @@ ...@@ -1233,15 +1343,15 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"order": 207, "order": 46,
"id": 750, "id": 750,
"prevSize": 24, "prevSize": 24,
"code": 58904, "code": 58904,
"name": "chevron-right" "name": "chevron-right"
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 45 "iconIdx": 49
}, },
{ {
"icon": { "icon": {
...@@ -1259,14 +1369,14 @@ ...@@ -1259,14 +1369,14 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 681, "id": 681,
"order": 208, "order": 47,
"name": "close", "name": "close",
"prevSize": 24, "prevSize": 24,
"code": 58908 "code": 58908
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 46 "iconIdx": 50
}, },
{ {
"icon": { "icon": {
...@@ -1284,14 +1394,14 @@ ...@@ -1284,14 +1394,14 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 746, "id": 746,
"order": 209, "order": 48,
"prevSize": 24, "prevSize": 24,
"name": "public", "name": "public",
"code": 58914 "code": 58914
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 47 "iconIdx": 51
}, },
{ {
"icon": { "icon": {
...@@ -1309,14 +1419,14 @@ ...@@ -1309,14 +1419,14 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 748, "id": 748,
"order": 210, "order": 49,
"name": "share", "name": "share",
"prevSize": 24, "prevSize": 24,
"code": 58915 "code": 58915
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 48 "iconIdx": 52
}, },
{ {
"icon": { "icon": {
...@@ -1337,15 +1447,15 @@ ...@@ -1337,15 +1447,15 @@
{} {}
], ],
"properties": { "properties": {
"order": 211, "order": 50,
"id": 3, "id": 3,
"prevSize": 24, "prevSize": 24,
"code": 58922, "code": 58922,
"name": "mail" "name": "mail"
}, },
"setIdx": 4, "setIdx": 0,
"setId": 1, "setId": 1,
"iconIdx": 49 "iconIdx": 53
} }
], ],
"height": 1024, "height": 1024,
......
h/static/styles/vendor/icomoon.css
View file @ 9f1eb5ef
@font-face { @font-face {
font-family: 'h'; font-family: 'h';
src: url('../fonts/h.woff') format('woff'); src: url('../fonts/h.woff') format('woff');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
[class^="h-icon-"], [class*=" h-icon-"] { [class^="h-icon-"], [class*=" h-icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */ /* use !important to prevent issues with browser extensions that change fonts */
font-family: 'h' !important; font-family: 'h' !important;
speak: none; speak: none;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-variant: normal; font-variant: normal;
text-transform: none; text-transform: none;
line-height: 1; line-height: 1;
/* Better Font Rendering =========== */ /* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.h-icon-annotate:before {
content: "\e903";
}
.h-icon-highlight:before {
content: "\e904";
}
.h-icon-note:before {
content: "\e905";
}
.h-icon-account:before { .h-icon-account:before {
content: "\e800"; content: "\e800";
} }
.h-icon-sort:before { .h-icon-sort:before {
content: "\e801"; content: "\e801";
} }
.h-icon-group:before { .h-icon-group:before {
content: "\e61e"; content: "\e61e";
} }
.h-icon-cancel-outline:before { .h-icon-cancel-outline:before {
content: "\e619"; content: "\e619";
} }
.h-icon-google-plus:before { .h-icon-google-plus:before {
content: "\ea88"; content: "\ea88";
} }
.h-icon-facebook:before { .h-icon-facebook:before {
content: "\ea8d"; content: "\ea8d";
} }
.h-icon-twitter:before { .h-icon-twitter:before {
content: "\ea91"; content: "\ea91";
} }
.h-icon-github:before { .h-icon-github:before {
content: "\e900"; content: "\e900";
} }
.h-icon-feed:before { .h-icon-feed:before {
content: "\e901"; content: "\e901";
} }
.h-icon-cc-by:before { .h-icon-cc-by:before {
content: "\e61f"; content: "\e61f";
} }
.h-icon-cc-logo:before { .h-icon-cc-logo:before {
content: "\e620"; content: "\e620";
} }
.h-icon-cc-zero:before { .h-icon-cc-zero:before {
content: "\e621"; content: "\e621";
} }
.h-icon-markdown:before { .h-icon-markdown:before {
content: "\e60b"; content: "\e60b";
} }
.h-icon-move:before { .h-icon-move:before {
content: "\e902"; content: "\e902";
} }
.h-icon-arrow-right:before { .h-icon-arrow-right:before {
content: "\e61d"; content: "\e61d";
} }
.h-icon-arrow-drop-down:before { .h-icon-arrow-drop-down:before {
content: "\e629"; content: "\e629";
} }
.h-icon-link:before { .h-icon-link:before {
content: "\e628"; content: "\e628";
} }
.h-icon-create:before { .h-icon-create:before {
content: "\e627"; content: "\e627";
} }
.h-icon-delete:before { .h-icon-delete:before {
content: "\e624"; content: "\e624";
} }
.h-icon-remove:before { .h-icon-remove:before {
content: "\e625"; content: "\e625";
} }
.h-icon-edit:before { .h-icon-edit:before {
content: "\e626"; content: "\e626";
} }
.h-icon-bookmark:before { .h-icon-bookmark:before {
content: "\e600"; content: "\e600";
} }
.h-icon-done:before { .h-icon-done:before {
content: "\e601"; content: "\e601";
} }
.h-icon-lock:before { .h-icon-lock:before {
content: "\e602"; content: "\e602";
} }
.h-icon-search:before { .h-icon-search:before {
content: "\e603"; content: "\e603";
} }
.h-icon-settings:before { .h-icon-settings:before {
content: "\e604"; content: "\e604";
} }
.h-icon-visibility:before { .h-icon-visibility:before {
content: "\e605"; content: "\e605";
} }
.h-icon-visibility-off:before { .h-icon-visibility-off:before {
content: "\e606"; content: "\e606";
} }
.h-icon-add:before { .h-icon-add:before {
content: "\e608"; content: "\e608";
} }
.h-icon-clear:before { .h-icon-clear:before {
content: "\e609"; content: "\e609";
} }
.h-icon-content-copy:before { .h-icon-content-copy:before {
content: "\e60a"; content: "\e60a";
} }
.h-icon-flag:before { .h-icon-flag:before {
content: "\e60c"; content: "\e60c";
} }
.h-icon-reply:before { .h-icon-reply:before {
content: "\e60d"; content: "\e60d";
} }
.h-icon-border-color:before { .h-icon-border-color:before {
content: "\e60e"; content: "\e60e";
} }
.h-icon-format-bold:before { .h-icon-format-bold:before {
content: "\e60f"; content: "\e60f";
} }
.h-icon-format-italic:before { .h-icon-format-italic:before {
content: "\e610"; content: "\e610";
} }
.h-icon-format-list-bulleted:before { .h-icon-format-list-bulleted:before {
content: "\e611"; content: "\e611";
} }
.h-icon-format-list-numbered:before { .h-icon-format-list-numbered:before {
content: "\e612"; content: "\e612";
} }
.h-icon-format-quote:before { .h-icon-format-quote:before {
content: "\e613"; content: "\e613";
} }
.h-icon-functions:before { .h-icon-functions:before {
content: "\e614"; content: "\e614";
} }
.h-icon-insert-comment:before { .h-icon-insert-comment:before {
content: "\e617"; content: "\e617";
} }
.h-icon-insert-link:before { .h-icon-insert-link:before {
content: "\e615"; content: "\e615";
} }
.h-icon-insert-photo:before { .h-icon-insert-photo:before {
content: "\e616"; content: "\e616";
} }
.h-icon-cancel:before { .h-icon-cancel:before {
content: "\e61a"; content: "\e61a";
} }
.h-icon-check:before { .h-icon-check:before {
content: "\e61b"; content: "\e61b";
} }
.h-icon-chevron-left:before { .h-icon-chevron-left:before {
content: "\e607"; content: "\e607";
} }
.h-icon-chevron-right:before { .h-icon-chevron-right:before {
content: "\e618"; content: "\e618";
} }
.h-icon-close:before { .h-icon-close:before {
content: "\e61c"; content: "\e61c";
} }
.h-icon-public:before { .h-icon-public:before {
content: "\e622"; content: "\e622";
} }
.h-icon-share:before { .h-icon-share:before {
content: "\e623"; content: "\e623";
} }
.h-icon-mail:before { .h-icon-mail:before {
content: "\e62a"; content: "\e62a";
} }
scripts/update-icon-font.py
View file @ 9f1eb5ef
...@@ -2,10 +2,10 @@ ...@@ -2,10 +2,10 @@
import argparse import argparse
import os import os
from base64 import b64encode from base64 import b64encode
from zipfile import ZipFile from zipfile import ZipFile
def main(): def main():
parser = argparse.ArgumentParser('Update the icomoon icon font from the provided archive') parser = argparse.ArgumentParser('Update the icomoon icon font from the provided archive')
parser.add_argument('archive', help='Path to .zip file generated by icomoon') parser.add_argument('archive', help='Path to .zip file generated by icomoon')
...@@ -23,18 +23,8 @@ def main(): ...@@ -23,18 +23,8 @@ def main():
for line in css_input_file: for line in css_input_file:
if "format('woff')" in line: if "format('woff')" in line:
# inline the WOFF format file # Rewrite the H font URL
woff_content = icon_font_archive.open('fonts/h.woff').read() css_output_file.write(" src: url('../fonts/h.woff') format('woff');\n")
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: elif "url(" in line:
# skip non-WOFF format fonts # skip non-WOFF format fonts
pass pass
......
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