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
Expand all 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
This diff is collapsed.
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