Skip to content

C
coopwire-hypothesis
Commit ccc8003d authored by Randall Leeds's avatar Randall Leeds
Browse files
Options

Move the full toolbar outside; restore drag 

Several benefits:
- Custom open/close sidebar toggle is now possible for publishers
- The frame div holds the background image now, which means publishers
  can customize the background behind the annotation sidebar

Also, the heatmap is now the drag handle and it's finally possible to
open the sidebar via a drag action.

Closes #685
parent 22501ba0
Hide whitespace changes
Inline Side-by-side
Showing with 144 additions and 176 deletions
h/css/base.scss
View file @ ccc8003d
......@@ -206,4 +206,15 @@ $input-border-radius: 2px;
}
}
}
}
\ No newline at end of file
}
//NOISE///////////
//Provides the noise background
.noise {
background: url("../images/noise_1.png");
}
.dark-noise {
background: url("../images/dark_noise_1.png");
}
h/css/common.scss
View file @ ccc8003d
......@@ -591,17 +591,6 @@ blockquote {
}
//NOISE///////////
//Provides the noise background
.noise {
background: url("../images/noise_1.png");
}
.dark-noise {
background: url("../images/dark_noise_1.png");
}
//KNOCKOUT///////////
//Provides a knockout background
.knockout {
......@@ -625,13 +614,14 @@ blockquote {
//TOOL BAR////////////////////////////////
.topbar {
@include smallshadow;
@include smallshadow(0);
background: $white;
border: solid 1px $grayLighter;
border-style: solid none;
height: 2em;
position: fixed;
left: -1px;
right: -1px;
left: 0;
right: 0;
top: .5em;
z-index: 5;
......@@ -1249,19 +1239,11 @@ h3.stream {
}
}
.visual-container {
margin-left: 3em;
}
.magnify-glass {
width: 2.25em;
min-height: 22px;
}
.magnify-glass .VS-icon {
margin-left: 3.5em;
}
.magnify-glass .VS-icon-search:hover {
width:12px;
height:12px;
......
h/css/inject.scss
View file @ ccc8003d
......@@ -3,7 +3,7 @@
@import 'compass/layout/stretching';
@import 'compass/reset/utilities';
$baseFontSize: 14px;
//ADDER////////////////////////////////
.annotator-adder {
......@@ -68,22 +68,14 @@
//HEATMAP STUFF////////////////////////////////
.annotator-heatmap {
font-size: $baseFontSize;
line-height: $baseLineHeight;
margin-top: 2px;
cursor: ew-resize;
position: absolute;
z-index: 2;
overflow: hidden;
height: 100%;
width: $heatmap-width + 17px;
top: 2em;
left: 0;
& > * {
margin-top: -2em;
}
left: -($heatmap-width + 17px);
svg {
@include stretch-y;
......@@ -98,9 +90,7 @@
.heatmap-pointer {
@include transition-property(left);
@include transition-duration(.2s);
font-size: $baseFontSize;
line-height: $baseLineHeight;
margin-top: -3em; // TODO: Less janking v-align
margin-top: -1em; // TODO: Less janking v-align
// color: rgb(238, 238, 238);
color: #666;
left: 0;
......@@ -158,7 +148,7 @@
bottom: 1px;
}
&:hover {
margin-top: -3.2em;
margin-top: -1.2em;
}
}
......@@ -170,7 +160,7 @@
top: 1px;
}
&:hover {
margin-top: -2.8em;
margin-top: -.8em;
}
}
&.flip {
......@@ -191,7 +181,7 @@
bottom: 1px;
}
&:hover {
margin-top: -3.2em;
margin-top: -1.2em;
}
}
}
......@@ -233,6 +223,9 @@
.annotator-frame {
@include reset-box-model;
@include user-select(none);
@extend .noise;
font-size: $baseFontSize / 16px * 1em;
line-height: $baseLineHeight / 16px * 1em;
height: 100%;
position: fixed;
top: 0;
......@@ -241,14 +234,15 @@
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
&.annotator-collapsed {
margin-left: -$heatmap-width - 17px;
margin-left: 0;
}
& > iframe {
@include reset-box-model;
height: 100%;
width: 100%;
position: absolute;
z-index: 3;
position: relative;
}
}
......@@ -265,52 +259,73 @@
line-height: $baseLineHeight;
position: absolute;
overflow: hidden;
width: 40px;
height: 100px;
z-index: 1;
left: 7px;
top: 2em;
z-index: 3;
height: 200px;
left: -($heatmap-width + 17px - 7px);
top: .5em;
width: 2.5em;
z-index: 2;
a, a:hover, a:active, a:visited {
color: $grayLighter;
text-decoration: none;
&.tri-icon {
color: rgba(200, 200, 200, .3);
text-shadow:
1px .8px 1.5px $white,
0 0 0 #000;
&:hover {
color: rgba(235, 235, 230, .1);
}
}
}
ul, li {
@include box-sizing(border-box);
@include reset-box-model;
@include reset-list-style;
font-size: $baseFontSize;
line-height: $baseLineHeight;
}
}
.annotator-toolbar.annotator-hide {
height: 0px;
height: 2.2em;
&:hover {
height: 100px;
height: 200px;
}
}
.annotator-toolbar li {
@include border-radius(4px);
@include smallshadow(0);
background: $white;
border: solid 1px $grayLighter;
position: relative;
left: 1px;
width: 25px;
height: 25px;
padding: 5px;
margin-top: 5px;
box-shadow: 1px 1px 1px 1px;
background-color: white;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
&:active {
top:1px;
box-shadow: 1px 1px 1px 0px;
left: 2px;
height: 2em;
width: 2em;
&:first-child {
@include border-radius(4px 0 0 4px);
border-right-style: none;
left: 0;
width: 2.3em;
}
& + li {
margin-top: 5px;
}
a {
font-size: $baseFontSize * 1.3;
line-height: $baseLineHeight * 1.3;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
position: absolute;
left: .2em;
}
a.pushed {
......@@ -322,32 +337,18 @@
// Toolbar Icons
.alwaysonhighlights-icon {
@include fonticon("\e01b", left);
color: rgb(211, 211, 211);
font-size: 18px;
bottom: 1px;
left: 3px;
position: absolute;
// text-shadow: -0.1em -0.1em #999;
}
.highlighter-icon {
@include fonticon("\e01a", left);
color: rgb(211, 211, 211);
font-size: 18px;
bottom: 1px;
left: 3px;
position: absolute;
// text-shadow: -0.1em -0.1em #999;
}
.commenter-icon {
@include fonticon("\e01e", left);
color: rgb(211, 211, 211);
font-size: 18px;
bottom: 1px;
left: 3px;
position: absolute;
// text-shadow: -0.1em -0.1em #999;
}
.tri-icon {
@include fonticon("\e00b", left);
}
......@@ -361,8 +362,8 @@
@media screen and (min-width: 15em) {
.annotator-frame {
width: 99%;
margin-left: -99%;
width: 90%;
margin-left: -90%;
}
}
......@@ -388,8 +389,8 @@
@media screen and (min-width: 37.5em) {
.annotator-frame {
@include single-transition(margin-left, .4s);
width: 428px + $heatmap-width + 17px;
margin-left: -428px - $heatmap-width - 17px;
width: 428px;// + $heatmap-width + 17px;
margin-left: -428px;// - $heatmap-width - 17px;
}
}
......
h/css/sidebar.scss
View file @ ccc8003d
......@@ -35,7 +35,6 @@ svg { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
.sliding-panels > li {
@extend .content;
@extend .noise;
@include smallshadow(-2px);
@include stretch-y;
@include transition(transform .4s);
......@@ -63,42 +62,15 @@ svg { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
//SIDEBAR LAYOUT////////////////////////////////
#wrapper {
@extend .noise;
height: 100%;
margin-left: $heatmap-width + 17px;
position: relative;
}
.topbar {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
left: 7px;
top: .5em;
.inner {
margin: 0 .5em 0 3.1em;
}
.tri {
@include fonticon("\e00b", left);
color: rgba( 200, 200, 200, .3);
text-shadow:
1px .8px 1.5px $white,
0 0 0 #000;
position: absolute;
z-index: 1;
top: .3em;
left: .3em;
line-height: $baseLineHeight * .9;
font-size: $baseLineHeight * .9;
cursor: w-resize;
&:before {
vertical-align: 0;
}
&:hover {
color: rgba( 235, 235, 230, .1);
}
margin: 0 .5em 0 .5em;
}
.notification-counter {
......@@ -113,11 +85,6 @@ svg { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
}
&.shown {
.tri {
@include fonticon("\e010", left);
cursor: ew-resize;
}
.notification-counter {
cursor: ew-resize;
}
......@@ -127,12 +94,12 @@ svg { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
.bottombar {
position: fixed;
bottom: 0px;
left: 39px; //17 + $heatmap_width
left: 0;
height: 3.7em;
width: 100%;
.notif-list {
margin-right: 3.85em;
margin-right: 1em;
box-shadow: 1px 1px 9px #b5d4ff;
}
......@@ -159,7 +126,7 @@ svg { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
max-height: 30em;
overflow: hidden;
position: absolute;
left: $heatmap-width + 8px;
left: 0;
right: 0;
top: 2px;
......@@ -169,10 +136,6 @@ svg { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
top: .25em;
}
.nav-tabs {
padding-left: 1em;
}
&.collapsed {
max-height: 0;
}
......
h/js/host.coffee
View file @ ccc8003d
......@@ -19,6 +19,7 @@ class Annotator.Host extends Annotator.Guest
hostOrigin ?= window.location.protocol + "//" + window.location.host
app = $('<iframe></iframe>')
.attr('seamless', '')
.attr('src', "#{options.app}#/?xdm=#{encodeURIComponent(hostOrigin)}")
super
......@@ -31,13 +32,17 @@ class Annotator.Host extends Annotator.Guest
.on('mouseenter', => @toolbar.show())
.on('mouseleave', => @toolbar.hide())
if @plugins.Heatmap?
this._setupDragEvents()
_setupXDM: (options) ->
channel = super
channel
.bind('showFrame', =>
@frame.css 'margin-left': "#{-1 * @frame.width()}px"
unless @drag.enabled
@frame.css 'margin-left': "#{-1 * @frame.width()}px"
@frame.removeClass 'annotator-no-transition'
@frame.removeClass 'annotator-collapsed'
)
......@@ -48,15 +53,7 @@ class Annotator.Host extends Annotator.Guest
@frame.addClass 'annotator-collapsed'
)
.bind('dragFrame', (ctx, screenX) =>
if screenX > 0
if @drag.last?
@drag.delta += screenX - @drag.last
@drag.last = screenX
unless @drag.tick
@drag.tick = true
window.requestAnimationFrame this._dragRefresh
)
.bind('dragFrame', (ctx, screenX) => this._dragUpdate screenX)
.bind('getMaxBottom', =>
sel = '*' + (":not(.annotator-#{x})" for x in [
......@@ -79,22 +76,42 @@ class Annotator.Host extends Annotator.Guest
Math.max.apply(Math, all)
)
.bind('setDrag', (ctx, drag) =>
@drag.enabled = drag
_setupDragEvents: ->
el = document.createElementNS 'http://www.w3.org/1999/xhtml', 'canvas'
el.width = el.height = 1
@element.append el
handle = @plugins.Heatmap.element[0]
handle.draggable = true
handle.addEventListener 'dragstart', (event) =>
event.dataTransfer.dropEffect = 'none'
event.dataTransfer.effectAllowed = 'none'
event.dataTransfer.setData 'text/plain', ''
event.dataTransfer.setDragImage el, 0, 0
@drag.enabled = true
@drag.last = event.screenX
m = parseInt (getComputedStyle @frame[0]).marginLeft
@frame.css
'margin-left': "#{m}px"
this.showFrame()
handle.addEventListener 'dragend', (event) =>
@drag.enabled = false
@drag.last = null
)
_setupDocumentEvents: ->
document.addEventListener 'dragover', (event) =>
unless @drag.enabled then return
if @drag.last?
@drag.delta += event.screenX - @drag.last
@drag.last = event.screenX
unless @drag.tick
@drag.tick = true
window.requestAnimationFrame this._dragRefresh
this._dragUpdate event.screenX
super
_dragUpdate: (screenX) =>
unless @drag.enabled then return
if @drag.last?
@drag.delta += screenX - @drag.last
@drag.last = screenX
unless @drag.tick
@drag.tick = true
window.requestAnimationFrame this._dragRefresh
_dragRefresh: =>
d = @drag.delta
......@@ -158,4 +175,4 @@ class Annotator.Host extends Annotator.Guest
this.subscribe('annotationEditorSubmit', save)
# Display the editor.
this.showEditor(annotation, position)
\ No newline at end of file
this.showEditor(annotation, position)
h/js/plugin/heatmap.coffee
View file @ ccc8003d
......@@ -2,7 +2,7 @@ $ = Annotator.$
class Annotator.Plugin.Heatmap extends Annotator.Plugin
# prototype constants
BUCKET_THRESHOLD_PAD: 40
BUCKET_THRESHOLD_PAD: 25
BUCKET_SIZE: 50
BOTTOM_CORRECTION: 14
......
h/js/services.coffee
View file @ ccc8003d
......@@ -43,7 +43,6 @@ class Hypothesis extends Annotator
Threading: {}
# Internal state
dragging: false # * To enable dragging only when we really want to
ongoing_edit: false # * Is there an interrupted edit by login
providers: null
......@@ -246,27 +245,11 @@ class Hypothesis extends Annotator
this
_setupDocumentEvents: ->
el = document.createElementNS 'http://www.w3.org/1999/xhtml', 'canvas'
el.width = el.height = 1
@element.append el
handle = @element.find('.topbar .tri')[0]
handle.addEventListener 'dragstart', (event) =>
event.dataTransfer.setData 'text/plain', ''
event.dataTransfer.setDragImage el, 0, 0
@dragging = true
@host.notify method: 'setDrag', params: true
@host.notify method: 'dragFrame', params: event.screenX
handle.addEventListener 'dragend', (event) =>
@dragging = false
@host.notify method: 'setDrag', params: false
@host.notify method: 'dragFrame', params: event.screenX
@element[0].addEventListener 'dragover', (event) =>
if @dragging then @host.notify method: 'dragFrame', params: event.screenX
@element[0].addEventListener 'dragleave', (event) =>
if @dragging then @host.notify method: 'dragFrame', params: event.screenX
this
document.addEventListener 'dragover', (event) =>
for p in @providers
p.channel.notify
method: 'dragFrame'
params: event.screenX
# Override things not used in the angular version.
_setupDynamicStyle: -> this
......
h/js/toolbar.coffee
View file @ ccc8003d
......@@ -5,6 +5,17 @@ class Annotator.Toolbar extends Annotator.Widget
options:
items: [
"title": "Toggle Sidebar"
"class": "tri-icon"
"click": (event) ->
event.preventDefault()
event.stopPropagation()
collapsed = window.annotator.frame.hasClass('annotator-collapsed')
if collapsed
window.annotator.showFrame()
else
window.annotator.hideFrame()
,
"title": "Show Annotations"
"class": "alwaysonhighlights-icon"
"click": (event) ->
......
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