Skip to content

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

Merge pull request #2337 from hypothesis/thread-collapsing 

Improve thread collapsing UX.
parents bd643cd8 755585c1
Expand all Show whitespace changes
Inline Side-by-side
Showing with 204 additions and 256 deletions
h/static/scripts/directive/test/thread-test.coffee
View file @ 6f9dc330
...@@ -84,6 +84,9 @@ describe 'thread', -> ...@@ -84,6 +84,9 @@ describe 'thread', ->
after = controller.collapsed after = controller.collapsed
assert.equal(before, !after) assert.equal(before, !after)
it 'defaults to collapsed if it is a top level annotation', ->
assert.isTrue(controller.collapsed)
it 'can accept an argument to force a particular state', -> it 'can accept an argument to force a particular state', ->
controller.toggleCollapsed(true) controller.toggleCollapsed(true)
assert.isTrue(controller.collapsed) assert.isTrue(controller.collapsed)
...@@ -94,14 +97,12 @@ describe 'thread', -> ...@@ -94,14 +97,12 @@ describe 'thread', ->
controller.toggleCollapsed(false) controller.toggleCollapsed(false)
assert.isFalse(controller.collapsed) assert.isFalse(controller.collapsed)
it 'does not allow uncollapsing the thread if there are no replies', -> it 'allows collapsing the thread even if there are no replies', ->
count.withArgs('message').returns(1) count.withArgs('message').returns(1)
controller.toggleCollapsed() controller.toggleCollapsed()
assert.isTrue(controller.collapsed) assert.isFalse(controller.collapsed)
controller.toggleCollapsed() controller.toggleCollapsed()
assert.isTrue(controller.collapsed) assert.isTrue(controller.collapsed)
controller.toggleCollapsed(false)
assert.isTrue(controller.collapsed)
describe '#shouldShowAsReply', -> describe '#shouldShowAsReply', ->
count = null count = null
......
h/static/scripts/directive/thread.coffee
View file @ 6f9dc330
...@@ -33,11 +33,6 @@ ThreadController = [ ...@@ -33,11 +33,6 @@ ThreadController = [
!!value !!value
else else
not @collapsed not @collapsed
# We only allow uncollapsing of the thread if there are some replies to
# display.
if newval == false and this.numReplies() <= 0
return
@collapsed = newval @collapsed = newval
###* ###*
...@@ -199,6 +194,11 @@ module.exports = [ ...@@ -199,6 +194,11 @@ module.exports = [
ctrl.counter = counter ctrl.counter = counter
ctrl.filter = filter ctrl.filter = filter
# If annotation is a reply, it should be uncollapsed so that when
# shown, replies don't have to be individually expanded.
if ctrl.parent?
ctrl.collapsed = false
# Track the number of messages in the thread # Track the number of messages in the thread
if counter? if counter?
counter.count 'message', 1 counter.count 'message', 1
......
h/static/styles/annotations.scss
View file @ 6f9dc330
...@@ -18,7 +18,10 @@ ...@@ -18,7 +18,10 @@
} }
.annotation-timestamp { .annotation-timestamp {
line-height: 2; float: right;
font-size: .8em;
line-height: 1;
margin-top: (1 / (1 - .8)) * .1em; // scale up .1em offset to align baseline
color: $text-color; color: $text-color;
&:hover { color: $link-color-hover; } &:hover { color: $link-color-hover; }
&:focus { outline: 0; } &:focus { outline: 0; }
...@@ -162,3 +165,24 @@ privacy { ...@@ -162,3 +165,24 @@ privacy {
color: $text-color; color: $text-color;
} }
} }
.annotation-collapsed-replies {
display: none;
}
.annotation.collapsed {
margin-bottom: 0;
.annotation-header {
margin: 0;
}
.annotation-body, .tags, .annotation-actions, .annotation-footer {
display: none;
}
.annotation-collapsed-replies {
display: inline;
}
}
h/static/styles/threads.scss
View file @ 6f9dc330
$thread-padding: 1em; $thread-padding: 1em;
$threadexp-width: 1em;
.stream-list { .stream-list {
& > * { & > * {
...@@ -16,14 +15,11 @@ $threadexp-width: 1em; ...@@ -16,14 +15,11 @@ $threadexp-width: 1em;
} }
} }
.thread-replies { .thread-replies .thread:first-child {
.thread:first-child {
margin-top: 0.5em; margin-top: 0.5em;
}
} }
.thread { .thread {
@include pie-clearfix;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
...@@ -51,27 +47,18 @@ $threadexp-width: 1em; ...@@ -51,27 +47,18 @@ $threadexp-width: 1em;
} }
.threadexp { .threadexp {
background: $white;
color: $gray-light;
position: absolute; position: absolute;
left: -.7em;
width: 1.4em; width: 1.4em;
height: 1.4em; height: 1.4em;
top: 0; font-size: 1.1em;
left: -.7em;
span { span {
position: absolute; background: $white;
top: (1.4 - $threadexp-width) / 2; color: $gray-light;
left: (1.4 - $threadexp-width) / 2; display: block;
width: $threadexp-width; line-height: inherit;
height: $threadexp-width; text-align: center;
&:before {
font-size: $threadexp-width;
position: absolute;
top: 0;
left: 0;
}
} }
} }
} }
......
h/static/styles/vendor/fonts/selection.json
View file @ 6f9dc330
{ {
"IcoMoonType": "selection", "IcoMoonType": "selection",
"icons": [ "icons": [
{
"icon": {
"paths": [
"M426.667 725.333l213.333-213.333-213.333-213.333z"
],
"attrs": [],
"isMulticolor": false,
"tags": [
"arrow-right"
],
"grid": 24
},
"attrs": [],
"properties": {
"order": 65,
"id": 1305,
"prevSize": 24,
"code": 58909,
"name": "arrow-right"
},
"setIdx": 2,
"setId": 1,
"iconIdx": 0
},
{
"icon": {
"paths": [
"M298.667 426.667l213.333 213.333 213.333-213.333z"
],
"attrs": [],
"isMulticolor": false,
"tags": [
"arrow-drop-down"
],
"grid": 24
},
"attrs": [],
"properties": {
"order": 68,
"id": 1303,
"prevSize": 24,
"code": 58921,
"name": "arrow-drop-down"
},
"setIdx": 2,
"setId": 1,
"iconIdx": 2
},
{ {
"icon": { "icon": {
"paths": [ "paths": [
...@@ -21,9 +69,9 @@ ...@@ -21,9 +69,9 @@
"code": 58920, "code": 58920,
"name": "link" "name": "link"
}, },
"setIdx": 0, "setIdx": 2,
"setId": 6, "setId": 1,
"iconIdx": 271 "iconIdx": 3
}, },
{ {
"icon": { "icon": {
...@@ -46,8 +94,8 @@ ...@@ -46,8 +94,8 @@
"code": 58919 "code": 58919
}, },
"setIdx": 2, "setIdx": 2,
"setId": 4, "setId": 1,
"iconIdx": 0 "iconIdx": 4
}, },
{ {
"icon": { "icon": {
...@@ -70,8 +118,8 @@ ...@@ -70,8 +118,8 @@
"name": "delete" "name": "delete"
}, },
"setIdx": 2, "setIdx": 2,
"setId": 4, "setId": 1,
"iconIdx": 1 "iconIdx": 5
}, },
{ {
"icon": { "icon": {
...@@ -94,8 +142,8 @@ ...@@ -94,8 +142,8 @@
"name": "remove" "name": "remove"
}, },
"setIdx": 2, "setIdx": 2,
"setId": 4, "setId": 1,
"iconIdx": 2 "iconIdx": 6
}, },
{ {
"icon": { "icon": {
...@@ -118,8 +166,8 @@ ...@@ -118,8 +166,8 @@
"name": "edit" "name": "edit"
}, },
"setIdx": 2, "setIdx": 2,
"setId": 4, "setId": 1,
"iconIdx": 3 "iconIdx": 7
}, },
{ {
"icon": { "icon": {
...@@ -142,8 +190,8 @@ ...@@ -142,8 +190,8 @@
"code": 58880 "code": 58880
}, },
"setIdx": 2, "setIdx": 2,
"setId": 4, "setId": 1,
"iconIdx": 4 "iconIdx": 8
}, },
{ {
"icon": { "icon": {
...@@ -166,8 +214,8 @@ ...@@ -166,8 +214,8 @@
"code": 58881 "code": 58881
}, },
"setIdx": 2, "setIdx": 2,
"setId": 4, "setId": 1,
"iconIdx": 5 "iconIdx": 9
}, },
{ {
"icon": { "icon": {
...@@ -190,8 +238,8 @@ ...@@ -190,8 +238,8 @@
"code": 58882 "code": 58882
}, },
"setIdx": 2, "setIdx": 2,
"setId": 4, "setId": 1,
"iconIdx": 6 "iconIdx": 10
}, },
{ {
"icon": { "icon": {
...@@ -214,8 +262,8 @@ ...@@ -214,8 +262,8 @@
"code": 58883 "code": 58883
}, },
"setIdx": 2, "setIdx": 2,
"setId": 4, "setId": 1,
"iconIdx": 7 "iconIdx": 11
}, },
{ {
"icon": { "icon": {
...@@ -238,8 +286,8 @@ ...@@ -238,8 +286,8 @@
"code": 58884 "code": 58884
}, },
"setIdx": 2, "setIdx": 2,
"setId": 4, "setId": 1,
"iconIdx": 8 "iconIdx": 12
}, },
{ {
"icon": { "icon": {
...@@ -262,8 +310,8 @@ ...@@ -262,8 +310,8 @@
"code": 58885 "code": 58885
}, },
"setIdx": 2, "setIdx": 2,
"setId": 4, "setId": 1,
"iconIdx": 9 "iconIdx": 13
}, },
{ {
"icon": { "icon": {
...@@ -286,8 +334,8 @@ ...@@ -286,8 +334,8 @@
"code": 58886 "code": 58886
}, },
"setIdx": 2, "setIdx": 2,
"setId": 4, "setId": 1,
"iconIdx": 10 "iconIdx": 14
}, },
{ {
"icon": { "icon": {
...@@ -310,8 +358,8 @@ ...@@ -310,8 +358,8 @@
"code": 58888 "code": 58888
}, },
"setIdx": 2, "setIdx": 2,
"setId": 4, "setId": 1,
"iconIdx": 11 "iconIdx": 15
}, },
{ {
"icon": { "icon": {
...@@ -334,8 +382,8 @@ ...@@ -334,8 +382,8 @@
"code": 58889 "code": 58889
}, },
"setIdx": 2, "setIdx": 2,
"setId": 4, "setId": 1,
"iconIdx": 12 "iconIdx": 16
}, },
{ {
"icon": { "icon": {
...@@ -358,8 +406,8 @@ ...@@ -358,8 +406,8 @@
"code": 58890 "code": 58890
}, },
"setIdx": 2, "setIdx": 2,
"setId": 4, "setId": 1,
"iconIdx": 13 "iconIdx": 17
}, },
{ {
"icon": { "icon": {
...@@ -382,8 +430,8 @@ ...@@ -382,8 +430,8 @@
"code": 58892 "code": 58892
}, },
"setIdx": 2, "setIdx": 2,
"setId": 4, "setId": 1,
"iconIdx": 14 "iconIdx": 18
}, },
{ {
"icon": { "icon": {
...@@ -406,8 +454,8 @@ ...@@ -406,8 +454,8 @@
"code": 58893 "code": 58893
}, },
"setIdx": 2, "setIdx": 2,
"setId": 4, "setId": 1,
"iconIdx": 15 "iconIdx": 19
}, },
{ {
"icon": { "icon": {
...@@ -431,8 +479,8 @@ ...@@ -431,8 +479,8 @@
"code": 58894 "code": 58894
}, },
"setIdx": 2, "setIdx": 2,
"setId": 4, "setId": 1,
"iconIdx": 16 "iconIdx": 20
}, },
{ {
"icon": { "icon": {
...@@ -455,8 +503,8 @@ ...@@ -455,8 +503,8 @@
"code": 58895 "code": 58895
}, },
"setIdx": 2, "setIdx": 2,
"setId": 4, "setId": 1,
"iconIdx": 17 "iconIdx": 21
}, },
{ {
"icon": { "icon": {
...@@ -479,8 +527,8 @@ ...@@ -479,8 +527,8 @@
"code": 58896 "code": 58896
}, },
"setIdx": 2, "setIdx": 2,
"setId": 4, "setId": 1,
"iconIdx": 18 "iconIdx": 22
}, },
{ {
"icon": { "icon": {
...@@ -503,8 +551,8 @@ ...@@ -503,8 +551,8 @@
"code": 58897 "code": 58897
}, },
"setIdx": 2, "setIdx": 2,
"setId": 4, "setId": 1,
"iconIdx": 19 "iconIdx": 23
}, },
{ {
"icon": { "icon": {
...@@ -527,8 +575,8 @@ ...@@ -527,8 +575,8 @@
"code": 58898 "code": 58898
}, },
"setIdx": 2, "setIdx": 2,
"setId": 4, "setId": 1,
"iconIdx": 20 "iconIdx": 24
}, },
{ {
"icon": { "icon": {
...@@ -551,8 +599,8 @@ ...@@ -551,8 +599,8 @@
"code": 58899 "code": 58899
}, },
"setIdx": 2, "setIdx": 2,
"setId": 4, "setId": 1,
"iconIdx": 21 "iconIdx": 25
}, },
{ {
"icon": { "icon": {
...@@ -575,8 +623,8 @@ ...@@ -575,8 +623,8 @@
"code": 58900 "code": 58900
}, },
"setIdx": 2, "setIdx": 2,
"setId": 4, "setId": 1,
"iconIdx": 22 "iconIdx": 26
}, },
{ {
"icon": { "icon": {
...@@ -599,8 +647,8 @@ ...@@ -599,8 +647,8 @@
"name": "insert-comment" "name": "insert-comment"
}, },
"setIdx": 2, "setIdx": 2,
"setId": 4, "setId": 1,
"iconIdx": 23 "iconIdx": 27
}, },
{ {
"icon": { "icon": {
...@@ -623,8 +671,8 @@ ...@@ -623,8 +671,8 @@
"code": 58901 "code": 58901
}, },
"setIdx": 2, "setIdx": 2,
"setId": 4, "setId": 1,
"iconIdx": 24 "iconIdx": 28
}, },
{ {
"icon": { "icon": {
...@@ -647,32 +695,8 @@ ...@@ -647,32 +695,8 @@
"code": 58902 "code": 58902
}, },
"setIdx": 2, "setIdx": 2,
"setId": 4, "setId": 1,
"iconIdx": 25 "iconIdx": 29
},
{
"icon": {
"paths": [
"M298.667 426.667l213.333 213.333 213.333-213.333z"
],
"attrs": [],
"isMulticolor": false,
"tags": [
"arrow-drop-down"
],
"grid": 24
},
"attrs": [],
"properties": {
"id": 673,
"order": 43,
"prevSize": 24,
"name": "arrow-drop-down",
"code": 58905
},
"setIdx": 2,
"setId": 4,
"iconIdx": 26
}, },
{ {
"icon": { "icon": {
...@@ -695,8 +719,8 @@ ...@@ -695,8 +719,8 @@
"code": 58906 "code": 58906
}, },
"setIdx": 2, "setIdx": 2,
"setId": 4, "setId": 1,
"iconIdx": 27 "iconIdx": 31
}, },
{ {
"icon": { "icon": {
...@@ -719,8 +743,8 @@ ...@@ -719,8 +743,8 @@
"code": 58907 "code": 58907
}, },
"setIdx": 2, "setIdx": 2,
"setId": 4, "setId": 1,
"iconIdx": 28 "iconIdx": 32
}, },
{ {
"icon": { "icon": {
...@@ -743,8 +767,8 @@ ...@@ -743,8 +767,8 @@
"name": "chevron-left" "name": "chevron-left"
}, },
"setIdx": 2, "setIdx": 2,
"setId": 4, "setId": 1,
"iconIdx": 29 "iconIdx": 33
}, },
{ {
"icon": { "icon": {
...@@ -760,15 +784,15 @@ ...@@ -760,15 +784,15 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"order": 33, "order": 61,
"id": 750, "id": 750,
"prevSize": 24, "prevSize": 24,
"code": 58904, "code": 58904,
"name": "chevron-right" "name": "chevron-right"
}, },
"setIdx": 2, "setIdx": 2,
"setId": 4, "setId": 1,
"iconIdx": 30 "iconIdx": 34
}, },
{ {
"icon": { "icon": {
...@@ -791,56 +815,8 @@ ...@@ -791,56 +815,8 @@
"code": 58908 "code": 58908
}, },
"setIdx": 2, "setIdx": 2,
"setId": 4, "setId": 1,
"iconIdx": 31 "iconIdx": 35
},
{
"icon": {
"paths": [
"M512 341.333l-256 256 60.373 60.373 195.627-195.627 195.627 195.627 60.373-60.373z"
],
"attrs": [],
"isMulticolor": false,
"tags": [
"expand-less"
],
"grid": 24
},
"attrs": [],
"properties": {
"id": 682,
"order": 35,
"prevSize": 24,
"name": "expand-less",
"code": 58909
},
"setIdx": 2,
"setId": 4,
"iconIdx": 32
},
{
"icon": {
"paths": [
"M707.627 366.293l-195.627 195.627-195.627-195.627-60.373 60.373 256 256 256-256z"
],
"attrs": [],
"isMulticolor": false,
"tags": [
"expand-more"
],
"grid": 24
},
"attrs": [],
"properties": {
"id": 683,
"order": 36,
"name": "expand-more",
"prevSize": 24,
"code": 58910
},
"setIdx": 2,
"setId": 4,
"iconIdx": 33
}, },
{ {
"icon": { "icon": {
...@@ -863,8 +839,8 @@ ...@@ -863,8 +839,8 @@
"code": 58914 "code": 58914
}, },
"setIdx": 2, "setIdx": 2,
"setId": 4, "setId": 1,
"iconIdx": 34 "iconIdx": 38
}, },
{ {
"icon": { "icon": {
...@@ -887,8 +863,8 @@ ...@@ -887,8 +863,8 @@
"code": 58915 "code": 58915
}, },
"setIdx": 2, "setIdx": 2,
"setId": 4, "setId": 1,
"iconIdx": 35 "iconIdx": 39
}, },
{ {
"icon": { "icon": {
...@@ -914,9 +890,9 @@ ...@@ -914,9 +890,9 @@
"code": 58922, "code": 58922,
"name": "mail" "name": "mail"
}, },
"setIdx": 4, "setIdx": 2,
"setId": 2, "setId": 1,
"iconIdx": 0 "iconIdx": 40
}, },
{ {
"icon": { "icon": {
...@@ -942,9 +918,9 @@ ...@@ -942,9 +918,9 @@
"ligatures": "google-plus, brand2", "ligatures": "google-plus, brand2",
"name": "google-plus" "name": "google-plus"
}, },
"setIdx": 1, "setIdx": 2,
"setId": 5, "setId": 1,
"iconIdx": 392 "iconIdx": 41
}, },
{ {
"icon": { "icon": {
...@@ -970,9 +946,9 @@ ...@@ -970,9 +946,9 @@
"ligatures": "facebook2, brand7", "ligatures": "facebook2, brand7",
"name": "facebook" "name": "facebook"
}, },
"setIdx": 1, "setIdx": 2,
"setId": 5, "setId": 1,
"iconIdx": 397 "iconIdx": 42
}, },
{ {
"icon": { "icon": {
...@@ -999,9 +975,9 @@ ...@@ -999,9 +975,9 @@
"ligatures": "twitter, brand11", "ligatures": "twitter, brand11",
"name": "twitter" "name": "twitter"
}, },
"setIdx": 1, "setIdx": 2,
"setId": 5, "setId": 1,
"iconIdx": 401 "iconIdx": 43
}, },
{ {
"icon": { "icon": {
...@@ -1031,9 +1007,9 @@ ...@@ -1031,9 +1007,9 @@
"code": 58911, "code": 58911,
"name": "cc-by" "name": "cc-by"
}, },
"setIdx": 3, "setIdx": 2,
"setId": 3, "setId": 1,
"iconIdx": 0 "iconIdx": 44
}, },
{ {
"icon": { "icon": {
...@@ -1063,9 +1039,9 @@ ...@@ -1063,9 +1039,9 @@
"code": 58912, "code": 58912,
"name": "cc-logo" "name": "cc-logo"
}, },
"setIdx": 3, "setIdx": 2,
"setId": 3, "setId": 1,
"iconIdx": 1 "iconIdx": 45
}, },
{ {
"icon": { "icon": {
...@@ -1102,9 +1078,9 @@ ...@@ -1102,9 +1078,9 @@
"code": 58913, "code": 58913,
"name": "cc-zero" "name": "cc-zero"
}, },
"setIdx": 3, "setIdx": 2,
"setId": 3, "setId": 1,
"iconIdx": 2 "iconIdx": 46
}, },
{ {
"icon": { "icon": {
...@@ -1135,9 +1111,9 @@ ...@@ -1135,9 +1111,9 @@
"name": "markdown", "name": "markdown",
"code": 58891 "code": 58891
}, },
"setIdx": 3, "setIdx": 2,
"setId": 3, "setId": 1,
"iconIdx": 3 "iconIdx": 47
} }
], ],
"height": 1024, "height": 1024,
......
h/static/styles/vendor/icomoon.css
View file @ 6f9dc330
This diff is collapsed.
h/templates/client/annotation.html
View file @ 6f9dc330
...@@ -35,8 +35,15 @@ ...@@ -35,8 +35,15 @@
<!-- / Editing controls --> <!-- / Editing controls -->
</span> </span>
<span class="annotation-collapsed-replies">
<a class="reply-count small" href=""
ng-click="replyCountClick()"
ng-pluralize count="replyCount"
when="{'0': '', 'one': '1 reply', 'other': '{} replies'}"></a>
</span>
<!-- Timestamp --> <!-- Timestamp -->
<a class="annotation-timestamp small pull-right" <a class="annotation-timestamp"
target="_blank" target="_blank"
title="{{vm.annotation.updated | moment:'LLLL'}}" title="{{vm.annotation.updated | moment:'LLLL'}}"
ng-if="!vm.editing && vm.annotation.updated" ng-if="!vm.editing && vm.annotation.updated"
......
h/templates/client/thread.html
View file @ 6f9dc330
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
class="threadexp" class="threadexp"
title="{{vm.collapsed && 'Expand' || 'Collapse'}}" title="{{vm.collapsed && 'Expand' || 'Collapse'}}"
ng-click="vm.toggleCollapsed()"> ng-click="vm.toggleCollapsed()">
<span ng-class="{'h-icon-expand-more': !!vm.collapsed, <span ng-class="{'h-icon-arrow-right': !!vm.collapsed,
'h-icon-expand-less': !vm.collapsed}"></span> 'h-icon-arrow-drop-down': !vm.collapsed}"></span>
</a> </a>
<!-- Annotation --> <!-- Annotation -->
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<p><em>Message not available.</em></p> <p><em>Message not available.</em></p>
</div> </div>
<article class="annotation thread-message" <article class="annotation thread-message {{vm.collapsed && 'collapsed'}}"
name="annotation" name="annotation"
annotation="vm.container.message" annotation="vm.container.message"
annotation-embedded="{{isEmbedded}}" annotation-embedded="{{isEmbedded}}"
......
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