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
html: extend {}, Annotator::html,
adder: '''
<div class="annotator-adder">
<button class="h-icon-insert-comment" data-action="comment" title="New Note"></button>
<button class="h-icon-border-color" data-action="highlight" title="Highlight"></button>
<div class="annotator-adder-actions">
<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>
'''
......@@ -343,6 +349,11 @@ module.exports = class Guest extends Annotator
@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?
if immediate
# Create an annotation
......@@ -359,6 +370,11 @@ module.exports = class Guest extends Annotator
@adder.hide()
@selectedRanges = []
Annotator.$('.annotator-toolbar .h-icon-annotate')
.attr('title', 'New Page Note')
.removeClass('h-icon-annotate')
.addClass('h-icon-note');
selectAnnotations: (annotations, toggle) ->
if toggle
this.toggleAnnotationSelection annotations
......
h/static/scripts/annotator/plugin/textselection.coffee
View file @ 9f1eb5ef
......@@ -30,14 +30,19 @@ module.exports = class TextSelection extends Annotator.Plugin
#
# Returns nothing.
checkForEndSelection: (event = {}) =>
# Get the currently selected ranges.
selection = Annotator.Util.getGlobal().getSelection()
ranges = for i in [0...selection.rangeCount]
r = selection.getRangeAt(0)
if r.collapsed then continue else r
if ranges.length
event.ranges = ranges
@annotator.onSuccessfulSelection event
else
@annotator.onFailedSelection event
callback = ->
# Get the currently selected ranges.
selection = Annotator.Util.getGlobal().getSelection()
ranges = for i in [0...selection.rangeCount]
r = selection.getRangeAt(0)
if r.collapsed then continue else r
if ranges.length
event.ranges = ranges
@annotator.onSuccessfulSelection 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
state = not @annotator.visibleHighlights
@annotator.setVisibleHighlights state
,
"title": "New Note"
"class": "h-icon-insert-comment"
"title": "New Page Note"
"class": "h-icon-note"
"name": "insert-comment"
"on":
"click": (event) =>
event.preventDefault()
event.stopPropagation()
@annotator.createComment()
@annotator.createAnnotation()
@annotator.show()
]
@buttons = $(makeButton(item) for item in items)
......
h/static/styles/annotator/inject.scss
View file @ 9f1eb5ef
......@@ -7,59 +7,75 @@ $base-font-size: 14px;
.annotator-adder {
box-sizing: border-box;
direction: ltr;
height: 35px;
margin-left: -20px;
margin-top: -50px;
padding: 0;
margin-top: -60px;
margin-left: -65px;
position: absolute;
background: $white;
border: 3px solid $gray;
border: 1px solid rgba(0,0,0,0.20);
border-radius: 4px;
box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.15);
z-index: 999;
}
&:before {
@include rotate(45deg);
background: $white;
bottom: -8px;
border-bottom: 4px solid $gray;
border-right: 4px solid $gray;
content: "";
display: block;
height: 6px;
left: 0;
margin-left: auto;
margin-right: auto;
position: absolute;
right: 0;
width: 6px;
}
.annotator-adder:before {
@include rotate(45deg);
background: $white;
bottom: -5px;
border-bottom: 1px solid rgba(0,0,0,0.20);
border-right: 1px solid rgba(0,0,0,0.20);
content: "";
display: block;
height: 6px;
left: 0;
margin-left: auto;
margin-right: auto;
position: absolute;
right: 0;
width: 6px;
}
button {
@include box-shadow(none);
display: inline-block;
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;
.annotator-adder-actions {
display: flex;
flex-direction: row;
}
&:active {
transition: background-color .25s;
background-color: $gray-light !important;
}
.annotator-adder-actions:hover .annotator-adder-actions__button {
color: $gray-light !important;
}
&:hover {
color: $gray-dark !important;
}
.annotator-adder-actions__button {
@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////////////////////////////////
.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-family: 'h';
src: url('../fonts/h.woff') format('woff');
font-weight: normal;
font-style: normal;
font-family: 'h';
src: url('../fonts/h.woff') format('woff');
font-weight: normal;
font-style: normal;
}
[class^="h-icon-"], [class*=" h-icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'h' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
font-family: 'h' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-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 {
content: "\e800";
content: "\e800";
}
.h-icon-sort:before {
content: "\e801";
content: "\e801";
}
.h-icon-group:before {
content: "\e61e";
content: "\e61e";
}
.h-icon-cancel-outline:before {
content: "\e619";
content: "\e619";
}
.h-icon-google-plus:before {
content: "\ea88";
content: "\ea88";
}
.h-icon-facebook:before {
content: "\ea8d";
content: "\ea8d";
}
.h-icon-twitter:before {
content: "\ea91";
content: "\ea91";
}
.h-icon-github:before {
content: "\e900";
content: "\e900";
}
.h-icon-feed:before {
content: "\e901";
content: "\e901";
}
.h-icon-cc-by:before {
content: "\e61f";
content: "\e61f";
}
.h-icon-cc-logo:before {
content: "\e620";
content: "\e620";
}
.h-icon-cc-zero:before {
content: "\e621";
content: "\e621";
}
.h-icon-markdown:before {
content: "\e60b";
content: "\e60b";
}
.h-icon-move:before {
content: "\e902";
content: "\e902";
}
.h-icon-arrow-right:before {
content: "\e61d";
content: "\e61d";
}
.h-icon-arrow-drop-down:before {
content: "\e629";
content: "\e629";
}
.h-icon-link:before {
content: "\e628";
content: "\e628";
}
.h-icon-create:before {
content: "\e627";
content: "\e627";
}
.h-icon-delete:before {
content: "\e624";
content: "\e624";
}
.h-icon-remove:before {
content: "\e625";
content: "\e625";
}
.h-icon-edit:before {
content: "\e626";
content: "\e626";
}
.h-icon-bookmark:before {
content: "\e600";
content: "\e600";
}
.h-icon-done:before {
content: "\e601";
content: "\e601";
}
.h-icon-lock:before {
content: "\e602";
content: "\e602";
}
.h-icon-search:before {
content: "\e603";
content: "\e603";
}
.h-icon-settings:before {
content: "\e604";
content: "\e604";
}
.h-icon-visibility:before {
content: "\e605";
content: "\e605";
}
.h-icon-visibility-off:before {
content: "\e606";
content: "\e606";
}
.h-icon-add:before {
content: "\e608";
content: "\e608";
}
.h-icon-clear:before {
content: "\e609";
content: "\e609";
}
.h-icon-content-copy:before {
content: "\e60a";
content: "\e60a";
}
.h-icon-flag:before {
content: "\e60c";
content: "\e60c";
}
.h-icon-reply:before {
content: "\e60d";
content: "\e60d";
}
.h-icon-border-color:before {
content: "\e60e";
content: "\e60e";
}
.h-icon-format-bold:before {
content: "\e60f";
content: "\e60f";
}
.h-icon-format-italic:before {
content: "\e610";
content: "\e610";
}
.h-icon-format-list-bulleted:before {
content: "\e611";
content: "\e611";
}
.h-icon-format-list-numbered:before {
content: "\e612";
content: "\e612";
}
.h-icon-format-quote:before {
content: "\e613";
content: "\e613";
}
.h-icon-functions:before {
content: "\e614";
content: "\e614";
}
.h-icon-insert-comment:before {
content: "\e617";
content: "\e617";
}
.h-icon-insert-link:before {
content: "\e615";
content: "\e615";
}
.h-icon-insert-photo:before {
content: "\e616";
content: "\e616";
}
.h-icon-cancel:before {
content: "\e61a";
content: "\e61a";
}
.h-icon-check:before {
content: "\e61b";
content: "\e61b";
}
.h-icon-chevron-left:before {
content: "\e607";
content: "\e607";
}
.h-icon-chevron-right:before {
content: "\e618";
content: "\e618";
}
.h-icon-close:before {
content: "\e61c";
content: "\e61c";
}
.h-icon-public:before {
content: "\e622";
content: "\e622";
}
.h-icon-share:before {
content: "\e623";
content: "\e623";
}
.h-icon-mail:before {
content: "\e62a";
content: "\e62a";
}
scripts/update-icon-font.py
View file @ 9f1eb5ef
......@@ -2,10 +2,10 @@
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')
......@@ -23,18 +23,8 @@ def main():
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))
# Rewrite the H font URL
css_output_file.write(" src: url('../fonts/h.woff') format('woff');\n")
elif "url(" in line:
# skip non-WOFF format fonts
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