Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
C
coopwire-hypothesis
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
孙灵跃 Leon Sun
coopwire-hypothesis
Commits
6f9dc330
Commit
6f9dc330
authored
Jul 02, 2015
by
Randall Leeds
Browse files
Options
Browse Files
Download
Plain Diff
Merge pull request #2337 from hypothesis/thread-collapsing
Improve thread collapsing UX.
parents
bd643cd8
755585c1
Changes
9
Expand all
Hide whitespace changes
Inline
Side-by-side
Showing
9 changed files
with
204 additions
and
256 deletions
+204
-256
thread-test.coffee
h/static/scripts/directive/test/thread-test.coffee
+5
-4
thread.coffee
h/static/scripts/directive/thread.coffee
+5
-5
annotations.scss
h/static/styles/annotations.scss
+25
-1
threads.scss
h/static/styles/threads.scss
+9
-22
h.eot
h/static/styles/vendor/fonts/h.eot
+0
-0
selection.json
h/static/styles/vendor/fonts/selection.json
+142
-166
icomoon.css
h/static/styles/vendor/icomoon.css
+7
-54
annotation.html
h/templates/client/annotation.html
+8
-1
thread.html
h/templates/client/thread.html
+3
-3
No files found.
h/static/scripts/directive/test/thread-test.coffee
View file @
6f9dc330
...
...
@@ -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
.
is
Tru
e
(
controller
.
collapsed
)
assert
.
is
Fals
e
(
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 @
6f9dc330
...
...
@@ -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 @
6f9dc330
...
...
@@ -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,24 @@ privacy {
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
;
$threadexp-width
:
1em
;
.stream-list
{
&
>
*
{
...
...
@@ -16,14 +15,11 @@ $threadexp-width: 1em;
}
}
.thread-replies
{
.thread
:first-child
{
margin-top
:
0
.5em
;
}
.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/h.eot
View file @
6f9dc330
No preview for this file type
h/static/styles/vendor/fonts/selection.json
View file @
6f9dc330
{
"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"
:
1
0
"setId"
:
1
,
"iconIdx"
:
1
4
},
{
"icon"
:
{
...
...
@@ -310,8 +358,8 @@
"code"
:
58888
},
"setIdx"
:
2
,
"setId"
:
4
,
"iconIdx"
:
1
1
"setId"
:
1
,
"iconIdx"
:
1
5
},
{
"icon"
:
{
...
...
@@ -334,8 +382,8 @@
"code"
:
58889
},
"setIdx"
:
2
,
"setId"
:
4
,
"iconIdx"
:
1
2
"setId"
:
1
,
"iconIdx"
:
1
6
},
{
"icon"
:
{
...
...
@@ -358,8 +406,8 @@
"code"
:
58890
},
"setIdx"
:
2
,
"setId"
:
4
,
"iconIdx"
:
1
3
"setId"
:
1
,
"iconIdx"
:
1
7
},
{
"icon"
:
{
...
...
@@ -382,8 +430,8 @@
"code"
:
58892
},
"setIdx"
:
2
,
"setId"
:
4
,
"iconIdx"
:
1
4
"setId"
:
1
,
"iconIdx"
:
1
8
},
{
"icon"
:
{
...
...
@@ -406,8 +454,8 @@
"code"
:
58893
},
"setIdx"
:
2
,
"setId"
:
4
,
"iconIdx"
:
1
5
"setId"
:
1
,
"iconIdx"
:
1
9
},
{
"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"
:
2
0
"setId"
:
1
,
"iconIdx"
:
2
4
},
{
"icon"
:
{
...
...
@@ -551,8 +599,8 @@
"code"
:
58899
},
"setIdx"
:
2
,
"setId"
:
4
,
"iconIdx"
:
2
1
"setId"
:
1
,
"iconIdx"
:
2
5
},
{
"icon"
:
{
...
...
@@ -575,8 +623,8 @@
"code"
:
58900
},
"setIdx"
:
2
,
"setId"
:
4
,
"iconIdx"
:
2
2
"setId"
:
1
,
"iconIdx"
:
2
6
},
{
"icon"
:
{
...
...
@@ -599,8 +647,8 @@
"name"
:
"insert-comment"
},
"setIdx"
:
2
,
"setId"
:
4
,
"iconIdx"
:
2
3
"setId"
:
1
,
"iconIdx"
:
2
7
},
{
"icon"
:
{
...
...
@@ -623,8 +671,8 @@
"code"
:
58901
},
"setIdx"
:
2
,
"setId"
:
4
,
"iconIdx"
:
2
4
"setId"
:
1
,
"iconIdx"
:
2
8
},
{
"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"
:
3
0
"setId"
:
1
,
"iconIdx"
:
3
4
},
{
"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"
:
3
4
"setId"
:
1
,
"iconIdx"
:
3
8
},
{
"icon"
:
{
...
...
@@ -887,8 +863,8 @@
"code"
:
58915
},
"setIdx"
:
2
,
"setId"
:
4
,
"iconIdx"
:
3
5
"setId"
:
1
,
"iconIdx"
:
3
9
},
{
"icon"
:
{
...
...
@@ -914,9 +890,9 @@
"code"
:
58922
,
"name"
:
"mail"
},
"setIdx"
:
4
,
"setId"
:
2
,
"iconIdx"
:
0
"setIdx"
:
2
,
"setId"
:
1
,
"iconIdx"
:
4
0
},
{
"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"
:
4
01
"setIdx"
:
2
,
"setId"
:
1
,
"iconIdx"
:
4
3
},
{
"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 @
6f9dc330
This diff is collapsed.
Click to expand it.
h/templates/client/annotation.html
View file @
6f9dc330
...
...
@@ -35,8 +35,15 @@
<!-- / Editing controls -->
</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"
...
...
h/templates/client/thread.html
View file @
6f9dc330
...
...
@@ -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}}"
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment