Skip to content

C
coopwire-hypothesis
Commit 0717221f authored by Sheetal Umesh Kumar's avatar Sheetal Umesh Kumar
Browse files
Options

changing adder icons and note icon in toolbar. 

Addressing some PR comments.

Changed styling of the adder a bit.
Changed annotatoin icon click on the toolbar to create a new annotation instead of a new page note, when text has been selected.
Added a for attr for icon labels in the adder.

getting scripts/update-icon-font from branch: annotation-card-design-refresh

comitting new woff and icomoon css

showing adder in the middle top of selection rather than mousePosition.

Revert "showing adder in the middle top of selection rather than mousePosition."

This reverts commit 99491e42eb4103953f0cfa87afdd37e5ac8ece4d.

showing adder a little above the mouse position

check for end of text selection after current event loop tick

only show tooltip for toolbar and not adder

cursor pointer for adder labels

some styling

cleaning up css nesting.

more styling :/

Eliminate deadzone in adder buttons

 * Remove the margin between the adder buttons and the
   edge of the toolbar, and apply padding to the buttons instead.
   This removes the deadzone between the edge of the visible toolbar
   and the clickable area.

 * Add pointer cursor for the buttons

 * Use flexbox for laying out the toolbar for consistency
   with how the Adder is laid out

 * Use a transparent background for the individual buttons, so
   that their background does not obscure the rounded borders
   of the toolbar.

removing console.log
parent cba3f7f7
Hide whitespace changes
Inline Side-by-side
Showing with 436 additions and 289 deletions
h/static/scripts/annotator/guest.coffee
View file @ 0717221f
...@@ -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 @ 0717221f
...@@ -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 @ 0717221f
...@@ -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 @ 0717221f
...@@ -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 @ 0717221f
{ {
"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 @ 0717221f
@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 @ 0717221f
...@@ -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