Skip to content

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

Merge pull request #2349 from hypothesis/thread-collapsing-redux 

Thread collapsing redux
parents 1077fc90 8f6bd339
Expand all Show whitespace changes
Inline Side-by-side
Showing with 240 additions and 293 deletions
h/static/scripts/directive/test/thread-test.coffee
View file @ 2ae0d7ec
......@@ -84,6 +84,9 @@ describe 'thread', ->
after = controller.collapsed
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', ->
controller.toggleCollapsed(true)
assert.isTrue(controller.collapsed)
......@@ -94,14 +97,12 @@ describe 'thread', ->
controller.toggleCollapsed(false)
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)
controller.toggleCollapsed()
assert.isTrue(controller.collapsed)
assert.isFalse(controller.collapsed)
controller.toggleCollapsed()
assert.isTrue(controller.collapsed)
controller.toggleCollapsed(false)
assert.isTrue(controller.collapsed)
describe '#shouldShowAsReply', ->
count = null
......
h/static/scripts/directive/thread.coffee
View file @ 2ae0d7ec
......@@ -33,11 +33,6 @@ ThreadController = [
!!value
else
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
###*
......@@ -199,6 +194,11 @@ module.exports = [
ctrl.counter = counter
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
if counter?
counter.count 'message', 1
......
h/static/styles/annotations.scss
View file @ 2ae0d7ec
......@@ -18,7 +18,10 @@
}
.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;
&:hover { color: $link-color-hover; }
&:focus { outline: 0; }
......@@ -162,3 +165,25 @@ privacy {
color: $text-color;
}
}
.annotation-collapsed-replies {
display: none;
}
.thread-replies {
.annotation.collapsed {
margin-bottom: 0;
.annotation-header {
margin: 0;
}
.annotation-body, .annotation-footer {
display: none;
}
.annotation-collapsed-replies {
display: inline;
}
}
}
h/static/styles/threads.scss
View file @ 2ae0d7ec
$thread-padding: 1em;
$threadexp-width: 1em;
.stream-list {
& > * {
......@@ -16,14 +15,11 @@ $threadexp-width: 1em;
}
}
.thread-replies {
.thread:first-child {
.thread-replies .thread:first-child {
margin-top: 0.5em;
}
}
.thread {
@include pie-clearfix;
cursor: pointer;
position: relative;
......@@ -51,27 +47,18 @@ $threadexp-width: 1em;
}
.threadexp {
background: $white;
color: $gray-light;
position: absolute;
left: -.7em;
width: 1.4em;
height: 1.4em;
top: 0;
left: -.7em;
font-size: 1.1em;
span {
position: absolute;
top: (1.4 - $threadexp-width) / 2;
left: (1.4 - $threadexp-width) / 2;
width: $threadexp-width;
height: $threadexp-width;
&:before {
font-size: $threadexp-width;
position: absolute;
top: 0;
left: 0;
}
background: $white;
color: $gray-light;
display: block;
line-height: inherit;
text-align: center;
}
}
}
......
h/static/styles/vendor/fonts/selection.json
View file @ 2ae0d7ec
{
"IcoMoonType": "selection",
"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": {
"paths": [
......@@ -21,9 +69,9 @@
"code": 58920,
"name": "link"
},
"setIdx": 0,
"setId": 6,
"iconIdx": 271
"setIdx": 2,
"setId": 1,
"iconIdx": 3
},
{
"icon": {
......@@ -46,8 +94,8 @@
"code": 58919
},
"setIdx": 2,
"setId": 4,
"iconIdx": 0
"setId": 1,
"iconIdx": 4
},
{
"icon": {
......@@ -70,8 +118,8 @@
"name": "delete"
},
"setIdx": 2,
"setId": 4,
"iconIdx": 1
"setId": 1,
"iconIdx": 5
},
{
"icon": {
......@@ -94,8 +142,8 @@
"name": "remove"
},
"setIdx": 2,
"setId": 4,
"iconIdx": 2
"setId": 1,
"iconIdx": 6
},
{
"icon": {
......@@ -118,8 +166,8 @@
"name": "edit"
},
"setIdx": 2,
"setId": 4,
"iconIdx": 3
"setId": 1,
"iconIdx": 7
},
{
"icon": {
......@@ -142,8 +190,8 @@
"code": 58880
},
"setIdx": 2,
"setId": 4,
"iconIdx": 4
"setId": 1,
"iconIdx": 8
},
{
"icon": {
......@@ -166,8 +214,8 @@
"code": 58881
},
"setIdx": 2,
"setId": 4,
"iconIdx": 5
"setId": 1,
"iconIdx": 9
},
{
"icon": {
......@@ -190,8 +238,8 @@
"code": 58882
},
"setIdx": 2,
"setId": 4,
"iconIdx": 6
"setId": 1,
"iconIdx": 10
},
{
"icon": {
......@@ -214,8 +262,8 @@
"code": 58883
},
"setIdx": 2,
"setId": 4,
"iconIdx": 7
"setId": 1,
"iconIdx": 11
},
{
"icon": {
......@@ -238,8 +286,8 @@
"code": 58884
},
"setIdx": 2,
"setId": 4,
"iconIdx": 8
"setId": 1,
"iconIdx": 12
},
{
"icon": {
......@@ -262,8 +310,8 @@
"code": 58885
},
"setIdx": 2,
"setId": 4,
"iconIdx": 9
"setId": 1,
"iconIdx": 13
},
{
"icon": {
......@@ -286,8 +334,8 @@
"code": 58886
},
"setIdx": 2,
"setId": 4,
"iconIdx": 10
"setId": 1,
"iconIdx": 14
},
{
"icon": {
......@@ -310,8 +358,8 @@
"code": 58888
},
"setIdx": 2,
"setId": 4,
"iconIdx": 11
"setId": 1,
"iconIdx": 15
},
{
"icon": {
......@@ -334,8 +382,8 @@
"code": 58889
},
"setIdx": 2,
"setId": 4,
"iconIdx": 12
"setId": 1,
"iconIdx": 16
},
{
"icon": {
......@@ -358,8 +406,8 @@
"code": 58890
},
"setIdx": 2,
"setId": 4,
"iconIdx": 13
"setId": 1,
"iconIdx": 17
},
{
"icon": {
......@@ -382,8 +430,8 @@
"code": 58892
},
"setIdx": 2,
"setId": 4,
"iconIdx": 14
"setId": 1,
"iconIdx": 18
},
{
"icon": {
......@@ -406,8 +454,8 @@
"code": 58893
},
"setIdx": 2,
"setId": 4,
"iconIdx": 15
"setId": 1,
"iconIdx": 19
},
{
"icon": {
......@@ -431,8 +479,8 @@
"code": 58894
},
"setIdx": 2,
"setId": 4,
"iconIdx": 16
"setId": 1,
"iconIdx": 20
},
{
"icon": {
......@@ -455,8 +503,8 @@
"code": 58895
},
"setIdx": 2,
"setId": 4,
"iconIdx": 17
"setId": 1,
"iconIdx": 21
},
{
"icon": {
......@@ -479,8 +527,8 @@
"code": 58896
},
"setIdx": 2,
"setId": 4,
"iconIdx": 18
"setId": 1,
"iconIdx": 22
},
{
"icon": {
......@@ -503,8 +551,8 @@
"code": 58897
},
"setIdx": 2,
"setId": 4,
"iconIdx": 19
"setId": 1,
"iconIdx": 23
},
{
"icon": {
......@@ -527,8 +575,8 @@
"code": 58898
},
"setIdx": 2,
"setId": 4,
"iconIdx": 20
"setId": 1,
"iconIdx": 24
},
{
"icon": {
......@@ -551,8 +599,8 @@
"code": 58899
},
"setIdx": 2,
"setId": 4,
"iconIdx": 21
"setId": 1,
"iconIdx": 25
},
{
"icon": {
......@@ -575,8 +623,8 @@
"code": 58900
},
"setIdx": 2,
"setId": 4,
"iconIdx": 22
"setId": 1,
"iconIdx": 26
},
{
"icon": {
......@@ -599,8 +647,8 @@
"name": "insert-comment"
},
"setIdx": 2,
"setId": 4,
"iconIdx": 23
"setId": 1,
"iconIdx": 27
},
{
"icon": {
......@@ -623,8 +671,8 @@
"code": 58901
},
"setIdx": 2,
"setId": 4,
"iconIdx": 24
"setId": 1,
"iconIdx": 28
},
{
"icon": {
......@@ -647,32 +695,8 @@
"code": 58902
},
"setIdx": 2,
"setId": 4,
"iconIdx": 25
},
{
"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
"setId": 1,
"iconIdx": 29
},
{
"icon": {
......@@ -695,8 +719,8 @@
"code": 58906
},
"setIdx": 2,
"setId": 4,
"iconIdx": 27
"setId": 1,
"iconIdx": 31
},
{
"icon": {
......@@ -719,8 +743,8 @@
"code": 58907
},
"setIdx": 2,
"setId": 4,
"iconIdx": 28
"setId": 1,
"iconIdx": 32
},
{
"icon": {
......@@ -743,8 +767,8 @@
"name": "chevron-left"
},
"setIdx": 2,
"setId": 4,
"iconIdx": 29
"setId": 1,
"iconIdx": 33
},
{
"icon": {
......@@ -760,15 +784,15 @@
},
"attrs": [],
"properties": {
"order": 33,
"order": 61,
"id": 750,
"prevSize": 24,
"code": 58904,
"name": "chevron-right"
},
"setIdx": 2,
"setId": 4,
"iconIdx": 30
"setId": 1,
"iconIdx": 34
},
{
"icon": {
......@@ -791,56 +815,8 @@
"code": 58908
},
"setIdx": 2,
"setId": 4,
"iconIdx": 31
},
{
"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
"setId": 1,
"iconIdx": 35
},
{
"icon": {
......@@ -863,8 +839,8 @@
"code": 58914
},
"setIdx": 2,
"setId": 4,
"iconIdx": 34
"setId": 1,
"iconIdx": 38
},
{
"icon": {
......@@ -887,8 +863,8 @@
"code": 58915
},
"setIdx": 2,
"setId": 4,
"iconIdx": 35
"setId": 1,
"iconIdx": 39
},
{
"icon": {
......@@ -914,9 +890,9 @@
"code": 58922,
"name": "mail"
},
"setIdx": 4,
"setId": 2,
"iconIdx": 0
"setIdx": 2,
"setId": 1,
"iconIdx": 40
},
{
"icon": {
......@@ -942,9 +918,9 @@
"ligatures": "google-plus, brand2",
"name": "google-plus"
},
"setIdx": 1,
"setId": 5,
"iconIdx": 392
"setIdx": 2,
"setId": 1,
"iconIdx": 41
},
{
"icon": {
......@@ -970,9 +946,9 @@
"ligatures": "facebook2, brand7",
"name": "facebook"
},
"setIdx": 1,
"setId": 5,
"iconIdx": 397
"setIdx": 2,
"setId": 1,
"iconIdx": 42
},
{
"icon": {
......@@ -999,9 +975,9 @@
"ligatures": "twitter, brand11",
"name": "twitter"
},
"setIdx": 1,
"setId": 5,
"iconIdx": 401
"setIdx": 2,
"setId": 1,
"iconIdx": 43
},
{
"icon": {
......@@ -1031,9 +1007,9 @@
"code": 58911,
"name": "cc-by"
},
"setIdx": 3,
"setId": 3,
"iconIdx": 0
"setIdx": 2,
"setId": 1,
"iconIdx": 44
},
{
"icon": {
......@@ -1063,9 +1039,9 @@
"code": 58912,
"name": "cc-logo"
},
"setIdx": 3,
"setId": 3,
"iconIdx": 1
"setIdx": 2,
"setId": 1,
"iconIdx": 45
},
{
"icon": {
......@@ -1102,9 +1078,9 @@
"code": 58913,
"name": "cc-zero"
},
"setIdx": 3,
"setId": 3,
"iconIdx": 2
"setIdx": 2,
"setId": 1,
"iconIdx": 46
},
{
"icon": {
......@@ -1135,9 +1111,9 @@
"name": "markdown",
"code": 58891
},
"setIdx": 3,
"setId": 3,
"iconIdx": 3
"setIdx": 2,
"setId": 1,
"iconIdx": 47
}
],
"height": 1024,
......
h/static/styles/vendor/icomoon.css
View file @ 2ae0d7ec
This diff is collapsed.
h/templates/client/annotation.html
View file @ 2ae0d7ec
......@@ -35,8 +35,17 @@
<!-- / Editing controls -->
</span>
<span ng-if="!vm.annotation.user">Sign in to save this annotation.</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 -->
<a class="annotation-timestamp small pull-right"
<a class="annotation-timestamp"
target="_blank"
title="{{vm.annotation.updated | moment:'LLLL'}}"
ng-if="!vm.editing && vm.annotation.updated"
......@@ -76,7 +85,7 @@
<!-- / Body -->
<!-- Tags -->
<div class="annotation-section form-field" ng-if="vm.editing">
<div class="annotation-body form-field" ng-if="vm.editing">
<tags-input ng-model="vm.annotation.tags"
name="tags"
class="tags"
......@@ -100,16 +109,15 @@
</div>
<!-- / Tags -->
<div class="annotation-section small" ng-if="vm.editing">
<footer class="annotation-footer">
<div class="small" ng-if="vm.editing">
<p ng-show="vm.privacyLevel.text == 'Only Me'">
<i class="h-icon-lock"></i> This annotation is viewable only to you.</p>
<p ng-show="vm.privacyLevel.text == 'Public'">
<i class="h-icon-public"></i> This annotation is viewable to everyone.</p>
</div>
</div>
<div class="annotation-section form-actions"
ng-if="vm.editing"
ng-switch="vm.action">
<div class="form-actions" ng-if="vm.editing" ng-switch="vm.action">
<div class="form-actions-buttons form-actions-left">
<button ng-switch-when="edit"
ng-click="vm.save()"
......@@ -124,28 +132,25 @@
ng-click="vm.revert()"
><i class="h-icon-cancel btn-icon"></i> Cancel</button>
</div>
</div>
</div>
<div class="annotation-section annotation-license" ng-if="vm.editing">
<div class="annotation-section annotation-license" ng-if="vm.editing">
<a href="http://creativecommons.org/publicdomain/zero/1.0/"
title="View more information about the Creative Commons Public Domain license"
target="_blank">
<i class="h-icon-cc-logo"></i><i class="h-icon-cc-zero"></i>
Annotations can be freely reused by anyone for any purpose.
</a>
</div>
<footer class="annotation-footer"
ng-if="!vm.editing && vm.annotation.id">
</div>
<div class="annotation-replies">
<div class="annotation-replies" ng-if="replyCount > 0">
<a class="reply-count small" href=""
ng-click="replyCountClick()"
ng-pluralize count="replyCount"
when="{'0': '', 'one': '1 reply', 'other': '{} replies'}"></a>
</div>
<div class="annotation-actions">
<div class="annotation-actions" ng-if="!vm.editing && vm.annotation.id">
<button class="small btn-clean"
ng-click="vm.reply()"
><i class="h-icon-reply btn-icon"></i> Reply</button>
......
h/templates/client/thread.html
View file @ 2ae0d7ec
......@@ -2,8 +2,8 @@
class="threadexp"
title="{{vm.collapsed && 'Expand' || 'Collapse'}}"
ng-click="vm.toggleCollapsed()">
<span ng-class="{'h-icon-expand-more': !!vm.collapsed,
'h-icon-expand-less': !vm.collapsed}"></span>
<span ng-class="{'h-icon-arrow-right': !!vm.collapsed,
'h-icon-arrow-drop-down': !vm.collapsed}"></span>
</a>
<!-- Annotation -->
......@@ -11,7 +11,7 @@
<p><em>Message not available.</em></p>
</div>
<article class="annotation thread-message"
<article class="annotation thread-message {{vm.collapsed && 'collapsed'}}"
name="annotation"
annotation="vm.container.message"
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