Skip to content

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

Drop heatmap comment tab and convert tabs to css 

Kicking off work on revamping the heatmap a little bit. This change
removes the comment tab. Clearly, something needs to be done to restore
discoverability to comments, but there seemed to be some consensus that
the comment tab was not comprehensible enough.

Additionally, I got pretty sick of the tabs bouncing around. I removed
the transitions, slimmed the tabs down a litle bit, and remade them in
pure CSS. The pure CSS has the advantage of avoiding extra network
requests to fetch the tab SVGs. Also, the SVGs contained some padding
and borders that is easier to account for if its all in the CSS.
parent 79d2cdd8
Show whitespace changes
Inline Side-by-side
Showing with 81 additions and 125 deletions
h/static/images/svg/comment_tab.svg deleted 100644 → 0
View file @ 79d2cdd8
<svg baseProfile="full" class="svg" contentScriptType="text/ecmascript" contentStyleType="text/css" preserveAspectRatio="none" version="1.2" viewBox="0 0 100 100" xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" zoomAndPan="disable">
<polygon class="tab" fill="#fffffa" points="20.0,95.0 15.0,85.0 15.0,15.0 20.0,5.0 90.0,5.0 95.0,15.0 95.0,85.0 90.0,95.0" stroke-linejoin="bevel" stroke-width="1px" stroke="#d1d1d1" vector-effect="non-scaling-stroke"></polygon>
</svg>
\ No newline at end of file
h/static/images/svg/down_tab.svg deleted 100644 → 0
View file @ 79d2cdd8
<svg baseProfile="full" class="svg" contentStyleType="text/css" preserveAspectRatio="none" version="1.2" viewBox="0 0 100 100" xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" zoomAndPan="magnify">
<polygon class="tab" fill="#fffffa" points="5.0,10.0 10.0,5.0 90.0,5.0 95.0,10.0 95.0,70.0 50.0,95.0 5.0,70.0" stroke-linejoin="bevel" stroke-width="1px" stroke="#d1d1d1" vector-effect="non-scaling-stroke"></polygon>
<polygon class="insert" fill="#FFEA00" points="95.0,65.0 50.0,90.0 5.0,65.0" stroke-linejoin="bevel" stroke-width=".5px" stroke="black" vector-effect="non-scaling-stroke" visibility="hidden"></polygon>
</svg>
h/static/images/svg/side_tab.svg deleted 100644 → 0
View file @ 79d2cdd8
<svg baseProfile="full" class="svg" contentScriptType="text/ecmascript" contentStyleType="text/css" preserveAspectRatio="none" version="1.2" viewBox="0 0 100 100" xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" zoomAndPan="disable">
<polygon class="tab" fill="#fffffa" points="20.0,95.0 5.0,50.0 20.0,5.0 90.0,5.0 95.0,15.0 95.0,85.0 90.0,95.0" stroke-linejoin="bevel" stroke-width="1px" stroke="#d1d1d1" vector-effect="non-scaling-stroke"></polygon>
<polygon class="insert" fill="#FFEA00" points="25.0,95.0 10.0,50.0 25.0,5.0" stroke-linejoin="bevel" stroke-width=".5px" stroke="black" vector-effect="non-scaling-stroke" visibility="hidden"></polygon>
</svg>
h/static/images/svg/up_tab.svg deleted 100644 → 0
View file @ 79d2cdd8
<svg baseProfile="full" class="svg" contentStyleType="text/css" preserveAspectRatio="none" version="1.2" viewBox="0 0 100 100" xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" zoomAndPan="magnify">
<polygon class="tab" fill="#fffffa" points="5.0,90.0 10.0,95.0 90.0,95.0 95.0,90.0 95.0,30.0 50.0,5.0 5.0,30.0" stroke-linejoin="bevel" stroke="#d1d1d1" stroke-width="1px" vector-effect="non-scaling-stroke"></polygon>
<polygon class="insert" fill="#FFEA00" points="95.0,35.0 50.0,10.0 5.0,35.0" stroke-linejoin="bevel" stroke-width=".5px" stroke="black" vector-effect="non-scaling-stroke" visibility="hidden"></polygon>
</svg>
h/static/scripts/plugin/heatmap.coffee
View file @ 05e53783
......@@ -3,9 +3,7 @@ $ = Annotator.$
class Annotator.Plugin.Heatmap extends Annotator.Plugin
# prototype constants
BUCKET_THRESHOLD_PAD: 30
BUCKET_SIZE: 50
BOTTOM_CORRECTION: 14
BUCKET_SIZE: 16
# heatmap svg skeleton
html: """
......@@ -253,8 +251,6 @@ class Annotator.Plugin.Heatmap extends Annotator.Plugin
$.merge above, this._collectVirtualAnnotations 0, currentPage-1
$.merge below, this._collectVirtualAnnotations currentPage+1, lastPage
comments = @annotator.comments.slice()
# Construct control points for the heatmap
points = highlights.reduce (points, hl, i) =>
d = hl.annotation
......@@ -334,26 +330,16 @@ class Annotator.Plugin.Heatmap extends Annotator.Plugin
counts: []
latest: 0
# Add the scroll buckets
# Scroll up
@buckets.unshift [], above, []
@buckets.push below
# Add comment bucket
@buckets.push comments, []
@index.unshift 0, @BUCKET_THRESHOLD_PAD + 6,
(@BUCKET_THRESHOLD_PAD + @BUCKET_SIZE) + 6
# Scroll up
@index.unshift 0, @BUCKET_THRESHOLD_PAD,
(@BUCKET_THRESHOLD_PAD + @BUCKET_SIZE)
# Scroll down
@index.push $(window).height() - @BUCKET_SIZE
# If there are items in the comment bucket then it has be in the bottom
# and possible lower bucket has to be slightly above it
# if there are no comments, than the lower bucket has to travel lower to the page
if comments.length
@index.push $(window).height() - @BUCKET_SIZE + @BOTTOM_CORRECTION*2
@index.push $(window).height() + @BUCKET_SIZE - @BOTTOM_CORRECTION*3
else
@index.push $(window).height() + @BOTTOM_CORRECTION
@index.push $(window).height() + @BOTTOM_CORRECTION
@buckets.push [], below, []
@index.push $(window).height() - @BUCKET_SIZE - 12,
$(window).height() - @BUCKET_SIZE - 11,
$(window).height()
# Calculate the total count for each bucket (without replies) and the
# maximum count.
......@@ -446,8 +432,6 @@ class Annotator.Plugin.Heatmap extends Annotator.Plugin
else if (@isLower bucket)
@dynamicBucket = true
@_jumpMinMax @buckets[bucket], "down"
else if (@isComment bucket)
@commentClick()
else
d3.event.stopPropagation()
annotations = @buckets[bucket].slice()
......@@ -458,15 +442,17 @@ class Annotator.Plugin.Heatmap extends Annotator.Plugin
tabs.exit().remove()
tabs
.style 'margin-top', (d) =>
if @isUpper(d) or @isLower(d) then '-9px' else '-8px'
.style 'top', (d) =>
"#{(@index[d] + @index[d+1]) / 2}px"
.html (d) =>
"<div class='label'>#{@buckets[d].length}</div><div class='svg'></div>"
"<div class='label'>#{@buckets[d].length}</div>"
.classed('upper', @isUpper)
.classed('lower', @isLower)
.classed('commenter', @isComment)
.style 'display', (d) =>
if (@buckets[d].length is 0) then 'none' else ''
......@@ -487,13 +473,5 @@ class Annotator.Plugin.Heatmap extends Annotator.Plugin
acc
, []
_getCommentBucket: => @index.length - 2
isUpper: (i) => i == 1
isLower: (i) => i == @index.length - 3
isComment: (i) => i is @_getCommentBucket()
# Simulate clicking on the comments tab
commentClick: =>
@dynamicBucket = false
annotator.showViewer "Comments", @buckets[@_getCommentBucket()]
isLower: (i) => i == @index.length - 2
h/static/styles/inject.scss
View file @ 05e53783
......@@ -87,27 +87,19 @@ $base-font-size: 14px;
}
.annotator-frame .heatmap-pointer {
@include transition-property(left);
@include transition-duration(.2s);
color: #666;
left: 0;
@include border-radius(2px 4px 4px 2px);
@include box-sizing(border-box);
background: $white;
border: solid 1px $gray-lighter;
right: 0;
position: absolute;
height: 20px;
width: $heatmap-width + 18px;
margin-top: -10px;
margin-top: -8px;
height: 16px;
width: 26px;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
text-align: center;
cursor: pointer;
.svg {
width: 100%;
height: 100%;
background-image: url("../images/svg/side_tab.svg");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.label {
@include reset-box-model;
@include reset-font;
......@@ -115,86 +107,84 @@ $base-font-size: 14px;
color: $text-color;
font-weight: bold;
font-family: $sans-font-family;
font-size: 11px;
line-height: 20px;
left: 5px;
right: 2px;
position: absolute;
font-size: 10px;
line-height: 14px;
margin: 0 auto;
}
&:hover {
left: 2px;
&:before, &:after {
content: '';
right: 100%;
top: 50%;
position: absolute;
// NB: use of 'inset' here fixes jagged diagonals in FF
// https://github.com/zurb/foundation/issues/2230
border: inset transparent;
height: 0;
width: 0;
}
&.lower, &.upper, &.commenter {
left: 7px;
width: 33px;
&:hover {
left: 7px;
&:before {
border-width: 8px;
border-right: 5px solid $gray-lighter;
margin-top: -8px;
}
.label {
left: 0;
right: 0;
}
&:after {
border-width: 7px;
border-right: 4px solid $white;
margin-top: -7px;
}
&.lower, &.upper {
@include single-transition(margin-top, .2s);
height: 30px;
&:before, &:after {
left: 50%;
bottom: 100%;
right: auto;
border-right: solid transparent;
margin-top: 0;
}
}
&.upper {
margin-top: -26px;
@include border-radius(2px 2px 4px 4px);
.svg {
background-image: url("../images/svg/up_tab.svg");
&:before, &:after {
top: auto;
bottom: 100%;
}
.label {
bottom: 1px;
&:before {
border-width: 13px;
border-bottom: 6px solid $gray-lighter;
margin-left: -13px;
}
&:hover {
margin-top: -20px;
&:after {
border-width: 12px;
border-bottom: 5px solid $white;
margin-left: -12px;
}
}
&.lower {
margin-top: -20px;
.svg {
background-image: url("../images/svg/down_tab.svg");
}
.label {
top: 1px;
}
&:hover {
margin-top: -18px;
}
}
@include border-radius(4px 4px 2px 2px);
&.flip {
@include rotateY(180deg);
.label {
@include rotateY(180deg);
}
&:before, &:after {
bottom: auto;
top: 100%;
}
&.commenter {
@include single-transition(margin-top, .2s);
margin-top: -18px;
.svg {
background-image: url("../images/svg/comment_tab.svg");
&:before {
border-width: 13px;
border-top: 6px solid $gray-lighter;
margin-left: -13px;
}
&:hover {
margin-top: -18px;
&:after {
border-width: 12px;
border-top: 5px solid $white;
margin-left: -12px;
}
}
}
......@@ -314,12 +304,14 @@ $base-font-size: 14px;
@include transition-timing-function(cubic-bezier(1, .1, .55, 0));
height: 0;
left: 34px;
margin-bottom: 0;
margin-top: -2px;
&:first-child, &.pushed {
@include transition-delay(0);
left: 3px;
height: 30px;
margin-bottom: 5px;
}
&.pushed {
margin-top: 5px;
}
}
}
......@@ -327,14 +319,14 @@ $base-font-size: 14px;
.annotator-frame .annotator-toolbar li {
@include border-radius(4px);
@include smallshadow;
@include transition-property(left, height, margin-bottom);
@include transition-property(left, height, margin-top);
@include transition-duration(.25s);
@include transition-delay(0);
@include transition-timing-function(cubic-bezier(0, .55, .1, 1));
background: $white;
border: solid 1px $gray-lighter;
left: 0;
margin-bottom: 5px;
margin-top: 5px;
overflow: hidden;
position: relative;
height: 30px;
......@@ -344,6 +336,7 @@ $base-font-size: 14px;
@include border-radius(4px 0 0 4px);
@include box-shadow(none);
border-right-style: none;
margin-top: 0;
width: 36px;
z-index: 1;
}
......
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