Skip to content

C
coopwire-hypothesis
Commit fe597913 authored by Robert Knight's avatar Robert Knight
Browse files
Options

Merge pull request #3274 from hypothesis/sheetaluk/336-reply-threading 

Sheetaluk/336 reply threading
parents 1187d864 9af7d08a
Hide whitespace changes
Inline Side-by-side
Showing with 251 additions and 124 deletions
h/static/scripts/directive/annotation.js
View file @ fe597913
......@@ -793,6 +793,7 @@ function annotation() {
isSidebar: '<',
onReplyCountClick: '&',
replyCount: '<',
isCollapsed: '<'
},
template: require('../../../templates/client/annotation.html'),
};
......
h/static/scripts/directive/test/annotation-test.js
View file @ fe597913
......@@ -1525,7 +1525,7 @@ describe('annotation', function() {
describe('annotation metadata', function () {
function findLink(directive) {
var links = directive.element[0]
.querySelectorAll('header .annotation-link');
.querySelectorAll('header .annotation-header__timestamp');
return links[links.length-1];
}
......
h/static/scripts/directive/test/markdown-test.js
View file @ fe597913
......@@ -16,7 +16,7 @@ describe('markdown', function () {
}
function viewElement(editor) {
return editor[0].querySelector('.styled-text');
return editor[0].querySelector('.markdown-body');
}
function getRenderedHTML(editor) {
......
h/static/styles/annotation.scss
View file @ fe597913
......@@ -7,29 +7,56 @@
$annotation-card-left-padding: 10px;
.annotation-card {
background-color: white;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.10);
border-radius: 2px;
border: 1px solid $color-mercury;
padding-left: 12px;
padding-right: 12px;
padding-top: 12px;
padding-bottom: 15px;
padding: $layout-h-margin;
background: $white;
}
.annotation-card:hover {
box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.15);
.annotation-header__user {
color: $grey-7;
}
.annotation-quote {
border-left: $highlight 3px solid;
color: $grey-5;
}
}
// When hovering a top-level annotation, show the footer in a hovered state.
// When hovering a reply (at any level), show the reply's own footer in
// a hovered state and also the footer of the top-level annotation.
.annotation-card:hover > .annotation,
.annotation:hover {
.annotation-replies__link,
.annotation-replies__count,
.annotation-action-btn {
color: $grey-6;
}
.annotation-header__timestamp {
color: $grey-5;
}
}
.annotation {
display: block;
font-family: $sans-font-family;
font-weight: 300;
font-weight: 400;
position: relative;
}
.annotation-link {
font-size: $body1-font-size;
color: $color-gray;
&:focus { outline: 0; }
@include font-small;
color: $grey-4;
}
.annotation:hover & {
color: $link-color;
.annotation-replies:hover {
.annotation-replies__link {
text-decoration: underline;
}
}
......@@ -42,12 +69,15 @@ $annotation-card-left-padding: 10px;
.annotation-header {
display: flex;
flex-direction: row;
align-items: flex-start;
margin-bottom: 5px;
align-items: baseline;
// Margin between top of x-height of username and
// top of the annotation card should be ~15px
margin-top: -$layout-h-margin + 10px;
}
.annotation-header__share-info {
color: $color-gray;
color: $grey-5;
@include font-normal;
}
.annotation-header__group {
......@@ -60,10 +90,26 @@ $annotation-card-left-padding: 10px;
margin-left: 5px;
}
.annotation-body {
@include font-normal;
color: $grey-6;
// Margin between top of ascent of annotation body and
// bottom of ascent of annotation-quote should be ~15px.
margin-top: $layout-h-margin - 5px;
margin-bottom: $layout-h-margin;
margin-right: 0px;
margin-left: 0px;
}
// the footer at the bottom of an annotation displaying
// the annotation actions and reply counts
.annotation-footer {
margin-bottom: 0;
@include font-normal;
color: $grey-5;
// Margin between bottom of ascent of annotation footer labels
// and bottom of annotation card should be ~20px.
margin-bottom: $layout-h-margin - 13px;
margin-top: $layout-h-margin;
}
.u-flex-spacer {
......@@ -71,8 +117,12 @@ $annotation-card-left-padding: 10px;
}
.annotation-quote-list {
margin-top: 14px;
margin-bottom: 14px;
// Margin between top of ascent of annotation quote and
// bottom of ascent of username should be ~15px
margin-top: $layout-h-margin - 5px;
// Margin between bottom of ascent of annotation quote and
// top of ascent of annotation-body should be ~15px
margin-bottom: $layout-h-margin - 3px;
}
.annotation-media-embed {
......@@ -80,19 +130,26 @@ $annotation-card-left-padding: 10px;
height: 208px;
}
.annotation-user {
color: $text-color;
.annotation-header__user {
@include font-normal;
color: $grey-7;
font-weight: bold;
font-size: $body1-font-size;
&:hover {
color: $link-color-hover;
cursor: pointer;
text-decoration: underline;
}
}
.annotation-replies {
float: left;
margin-top: 2px;
}
.annotation-replies__link,
.annotation-replies__count {
@include font-normal;
color: $grey-5;
}
.annotation-header__timestamp {
@include font-small;
color: $grey-4;
}
.annotation-actions {
......@@ -101,18 +158,10 @@ $annotation-card-left-padding: 10px;
}
.annotation-action-btn {
color: $dg-4;
color: $grey-5;
font-weight: normal;
padding: 0;
margin: 0px 0px 0px 8px;
&:hover {
color: $dg-1;
}
&:focus, &:active {
color: $dg-1;
}
}
.annotation-action-btn__label {
......@@ -121,6 +170,10 @@ $annotation-card-left-padding: 10px;
.annotation-quote {
@include quote;
@include font-normal;
color: $grey-4;
font-family: sans-serif;
del {
background:#ffe6e6;
}
......@@ -140,18 +193,18 @@ $annotation-card-left-padding: 10px;
font-size: 0.8em;
padding-top: 0.583em;
a {
color: $gray-light;
display: block;
}
@include icons {
font-size: 13px;
font-size: $normal-font-size;
vertical-align: -2px;
margin-right: 1px;
}
}
.annotation-license__link {
color: $gray-light;
display: block;
}
.annotation-collapsed-replies {
display: none;
}
......
h/static/styles/annotator/bucket-bar.scss
View file @ fe597913
@import '../base';
.annotator-bucket-bar {
background: hsla(0, 0, 0, .1);
background: rgba(0, 0, 0, 0.08);
pointer-events: none;
position: absolute;
height: 100%;
......
h/static/styles/annotator/inject.scss
View file @ fe597913
......@@ -42,8 +42,8 @@ $base-font-size: 14px;
// frame styles
@import './bucket-bar';
@include noise-background;
user-select: none;
@include grey-background;
direction: ltr;
background: none;
font-size: $base-font-size;
......
h/static/styles/app.scss
View file @ fe597913
......@@ -34,7 +34,7 @@ $base-line-height: 20px;
body {
$sidebar-h-padding: 9px;
@include noise-background;
@include grey-background;
font-family: $sans-font-family;
font-weight: 300;
padding: $sidebar-h-padding;
......
h/static/styles/base.scss
View file @ fe597913
......@@ -17,14 +17,13 @@
color: $gray;
font-family: $serif-font-family;
font-style: italic;
padding: 0 .615em;
padding: 0 1em;
border-left: 3px solid $gray-lighter;
}
//NOISE///////////
//Provides the noise background
@mixin noise-background {
background: url("../images/noise_1.png");
//Provides the grey-background
@mixin grey-background {
background: $grey-2;
}
.annotator-hide {
......
h/static/styles/excerpt.scss
View file @ fe597913
......@@ -27,6 +27,7 @@
.excerpt__toggle-link {
padding-left: 15px;
background-image: linear-gradient(to right, transparent 0px, white 12px);
line-height: $normal-line-height;
}
.excerpt__toggle-link > a {
......
h/static/styles/markdown.scss
View file @ fe597913
......@@ -39,3 +39,11 @@
float: right;
}
}
.markdown-body {
@include styled-text;
p {
margin: 0;
}
}
h/static/styles/mixins/forms.scss
View file @ fe597913
......@@ -15,11 +15,11 @@
}
@mixin form-input {
@include font-normal;
border: 1px solid $gray-lighter;
border-radius: 2px;
padding: .5em .75em;
font-weight: normal;
font-size: 1.2em;
color: $gray;
background-color: #FAFAFA;
}
......
h/static/styles/site.scss
View file @ fe597913
......@@ -23,10 +23,10 @@
// pages
@import './home';
// body with grey noise background and Lato font used
// body with grey background and Lato font used
// in the sidebar and groups pages
.body--default {
@include noise-background;
@include grey-background;
font-family: $sans-font-family;
}
......
h/static/styles/styled-text.scss
View file @ fe597913
@import "base";
.styled-text {
@mixin styled-text() {
h1, h2, h3, h4, h5, h6, p, ol, ul, img, pre, blockquote {
margin: .618em 0;
}
......@@ -109,3 +109,7 @@
border-radius: 2px;
}
}
.styled-text {
@include styled-text;
}
\ No newline at end of file
h/static/styles/tags-input.scss
View file @ fe597913
......@@ -78,12 +78,16 @@ tags-input {
.tag-list {
@include pie-clearfix;
margin-top: -.4545em;
// Margin between bottom of ascent of annotation body and
// top of tags list should be ~15px
margin-top: -$layout-h-margin + 10px ;
// Margin between top of x-height of annotation footer
// labels and bottom of tags list should be ~15px
margin-bottom: $layout-h-margin - 10px ;
.tag-item {
float: left;
margin-right: .4545em;
margin-top: .4545em;
a {
text-decoration: none;
......
h/static/styles/thread.scss
View file @ fe597913
......@@ -5,11 +5,6 @@ $thread-padding: $annotation-card-left-padding;
margin-bottom: .72em;
}
& > li.thread:hover,
& > li.thread.js-hover {
border: 1px solid $highlight;
}
& > li.thread > .threadexp {
display: none;
}
......@@ -25,7 +20,6 @@ $thread-padding: $annotation-card-left-padding;
align-items: center;
&__label {
margin-top: 10px;
max-width: 160px;
text-align: center;
}
......@@ -38,8 +32,34 @@ $thread-padding: $annotation-card-left-padding;
}
}
.thread-replies .thread:first-child {
margin-top: 0.5em;
.thread-replies {
.annotation-action-btn {
color: $grey-4;
}
.annotation-footer {
// Margin between bottom of ascent of annotation body and
// top of annotation footer should be ~15px
margin-top: $layout-h-margin - 8px;
// Margin between bottom of ascent of annotation footer labels
// and top of ascent of username should be ~20px
margin-bottom: $layout-h-margin - 3px;
}
.annotation-header {
// Margin between bottom of ascent of annotation card footer labels
// and top of ascent of username should be ~20px
margin-top: $layout-h-margin - 2px;
}
.annotation-body {
// Margin between top of ascent of annotation body and
// bottom of ascent of username should be ~15px
margin-top: $layout-h-margin - 8px;
// Margin between bottom of ascent of annotation body and
// top of annotation footer labels should be ~15px
margin-bottom: $layout-h-margin - 3px;
}
}
.thread {
......@@ -48,15 +68,22 @@ $thread-padding: $annotation-card-left-padding;
& > ul {
padding-left: $thread-padding + 3px;
padding-right: $thread-padding + 3px;
margin-left: -$thread-padding;
margin-right: -$thread-padding;
}
// nested threads for annotation replies
.thread {
border-left: 1px dotted $gray-light;
border-left: 1px dotted $grey-3;
padding: 0;
padding-left: $thread-padding;
margin-top: 10px;
&:hover {
& > .threadexp > span {
color: $grey-7;
}
}
}
.threadexp {
......@@ -68,7 +95,7 @@ $thread-padding: $annotation-card-left-padding;
span {
background: $white;
color: $gray-light;
color: $grey-4;
display: block;
line-height: inherit;
text-align: center;
......
h/static/styles/variables.scss
View file @ fe597913
......@@ -42,6 +42,21 @@ $success-color: #1cbd41 !default;
$mask-start-color: rgba($white, 0) !default;
$mask-end-color: $white !default;
// Variables for the new color palette
// ------------------------------------
$grey-1: #F2F2F2;
$grey-2: #ECECEC;
$grey-3: #DBDBDB;
$grey-4: #A6A6A6;
$grey-5: #7A7A7A;
$grey-6: #3F3F3F;
$grey-7: #202020;
$brand: #BD1C2B;
$highlight: #58CEF4;
@function color-weight($c, $n: 500) {
@if $n == 50 {
@return tint($c, 85%);
......@@ -102,6 +117,11 @@ $body2-line-height: 1.4em;
$title-font-size: 20px;
$title-font-weight: bold;
$normal-font-size: 13px;
$normal-line-height: 17px;
$small-font-size: 11px;
$small-line-height: 12px;
// Front page typography
// -------------------------
......@@ -163,3 +183,15 @@ $lg-2: #ECECEC;
$lg-3: #F2F2F2;
$primary: #BD1C2B;
$highlight: #58CEF4;
// Mixins
// ------
@mixin font-small {
font-size: $small-font-size;
line-height: $small-line-height;
}
@mixin font-normal {
font-size: $normal-font-size;
line-height: $normal-line-height;
}
h/templates/client/annotation.html
View file @ fe597913
......@@ -6,38 +6,34 @@
<header class="annotation-header">
<!-- User -->
<span ng-if="vm.user()">
<span>
<a class="annotation-user"
target="_blank"
ng-href="{{::vm.serviceUrl}}u/{{vm.user()}}"
>{{vm.username()}}</a>
</span>
<a class="annotation-header__user"
target="_blank"
ng-href="{{::vm.serviceUrl}}u/{{vm.user()}}"
>{{vm.username()}}</a>
<span class="annotation-collapsed-replies">
<a class="annotation-link" href=""
ng-click="vm.onReplyCountClick()"
ng-pluralize count="vm.replyCount"
when="{'0': '', 'one': '1 reply', 'other': '{} replies'}"></a>
</span>
<br>
<span class="annotation-header__share-info">
<a class="annotation-header__group"
target="_blank" ng-if="vm.group() && vm.group().url" href="{{vm.group().url}}">
target="_blank" ng-if="vm.group() && vm.group().url" href="{{vm.group().url}}">
<i class="h-icon-group"></i><span class="annotation-header__group-name">{{vm.group().name}}</span>
</a>
<span ng-show="vm.isPrivate"
title="This annotation is visible only to you.">
title="This annotation is visible only to you.">
<i class="h-icon-lock"></i><span class="annotation-header__group-name" ng-show="!vm.group().url">Only me</span>
</span>
<i class="h-icon-border-color" ng-show="vm.isHighlight() && !vm.editing()" title="This is a highlight. Click 'edit' to add a note or tag."></i>
<span class="annotation-citation"
ng-bind-html="vm.documentTitle"
ng-if="::!vm.isSidebar">
ng-bind-html="vm.documentTitle"
ng-if="::!vm.isSidebar">
</span>
<span class="annotation-citation-domain"
ng-bind-html="vm.documentDomain"
ng-if="::!vm.isSidebar">
ng-bind-html="vm.documentDomain"
ng-if="::!vm.isSidebar">
</span>
</span>
</span>
......@@ -45,7 +41,7 @@
<span class="u-flex-spacer"></span>
<!-- Timestamp -->
<a class="annotation-link"
<a class="annotation-header__timestamp"
target="_blank"
title="{{vm.absoluteTimestamp}}"
ng-if="!vm.editing() && vm.updated()"
......@@ -55,17 +51,17 @@
<!-- Excerpts -->
<section class="annotation-quote-list"
ng-repeat="target in vm.target() track by $index"
ng-if="vm.hasQuotes()">
<excerpt collapsed-height="40"
inline-controls="true"
overflow-hysteresis="20"
content-data="selector.exact">
ng-repeat="target in vm.target() track by $index"
ng-if="vm.hasQuotes()">
<excerpt collapsed-height="35"
inline-controls="true"
overflow-hysteresis="20"
content-data="selector.exact">
<blockquote class="annotation-quote"
ng-bind-html="selector.exact"
ng-repeat="selector in target.selector
| filter : {'type': 'TextQuoteSelector'}
track by $index"></blockquote>
ng-bind-html="selector.exact"
ng-repeat="selector in target.selector
| filter : {'type': 'TextQuoteSelector'}
track by $index"></blockquote>
</excerpt>
</section>
......@@ -74,15 +70,15 @@
<!-- Body -->
<section name="text" class="annotation-body">
<excerpt enabled="!vm.editing()"
inline-controls="false"
on-collapsible-changed="vm.setBodyCollapsible(collapsible)"
collapse="vm.collapseBody"
collapsed-height="400"
overflow-hysteresis="20"
content-data="vm.form.text">
inline-controls="false"
on-collapsible-changed="vm.setBodyCollapsible(collapsible)"
collapse="vm.collapseBody"
collapsed-height="400"
overflow-hysteresis="20"
content-data="vm.form.text">
<markdown text="vm.form.text"
on-edit-text="vm.setText(text)"
read-only="!vm.editing()">
on-edit-text="vm.setText(text)"
read-only="!vm.editing()">
</markdown>
</excerpt>
</section>
......@@ -91,15 +87,15 @@
<!-- Tags -->
<div class="annotation-body form-field" ng-if="vm.editing()">
<tags-input ng-model="vm.form.tags"
name="tags"
class="tags"
placeholder="Add tags…"
min-length="1"
replace-spaces-with-dashes="false"
enable-editing-last-tag="true">
<auto-complete source="vm.tagsAutoComplete($query)"
min-length="1"
max-results-to-show="10"></auto-complete>
name="tags"
class="tags"
placeholder="Add tags…"
min-length="1"
replace-spaces-with-dashes="false"
enable-editing-last-tag="true">
<auto-complete source="vm.tagsAutoComplete($query)"
min-length="1"
max-results-to-show="10"></auto-complete>
</tags-input>
</div>
......@@ -112,17 +108,17 @@
</ul>
<div class="u-stretch"></div>
<a class="annotation-link u-strong" ng-show="vm.canCollapseBody"
ng-click="vm.toggleCollapseBody($event)"
ng-title="vm.collapseBody ? 'Show the full annotation text' : 'Show the first few lines only'"
ng-bind="vm.collapseBody ? 'More' : 'Less'"></a>
ng-click="vm.toggleCollapseBody($event)"
ng-title="vm.collapseBody ? 'Show the full annotation text' : 'Show the first few lines only'"
ng-bind="vm.collapseBody ? 'More' : 'Less'"></a>
</div>
<!-- / Tags -->
<footer class="annotation-footer">
<div class="annotation-form-actions" ng-if="vm.editing()" ng-switch="vm.action">
<button ng-switch-when="delete"
ng-click="vm.save()"
class="dropdown-menu-btn"><i class="h-icon-check btn-icon"></i> Delete</button>
ng-click="vm.save()"
class="dropdown-menu-btn"><i class="h-icon-check btn-icon"></i> Delete</button>
<publish-annotation-btn
class="publish-annotation-btn"
group="vm.group()"
......@@ -134,20 +130,21 @@
</div>
<div class="annotation-section annotation-license"
ng-show="vm.isShared() && vm.editing()">
<a href="http://creativecommons.org/publicdomain/zero/1.0/"
title="View more information about the Creative Commons Public Domain license"
target="_blank">
ng-show="vm.isShared() && vm.editing()">
<a class="annotation-license__link" 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>
<div class="annotation-replies" ng-if="vm.replyCount > 0">
<a class="annotation-link" href=""
ng-click="vm.onReplyCountClick()"
ng-pluralize count="vm.replyCount"
when="{'0': '', 'one': '1 reply', 'other': '{} replies'}"></a>
<a href=""
ng-click="vm.onReplyCountClick()">
<span class="annotation-replies__link">{{ vm.isCollapsed ? 'Show replies' : 'Hide replies' }}</span>
<span class="annotation-replies__count">({{ vm.replyCount }})</span>
</a>
</div>
<div class="annotation-actions" ng-if="vm.isSaving">
......
h/templates/client/markdown.html
View file @ fe597913
......@@ -16,7 +16,7 @@
<textarea class="form-input form-textarea js-markdown-input"
ng-show="showEditor()"
ng-click="$event.stopPropagation()"></textarea>
<div class="styled-text js-markdown-preview"
<div class="markdown-body js-markdown-preview"
ng-class="preview && 'markdown-preview'"
ng-dblclick="togglePreview()"
ng-show="!showEditor()"></div>
h/templates/client/thread.html
View file @ fe597913
......@@ -17,6 +17,7 @@
is-last-reply="$last"
is-sidebar="::isSidebar"
reply-count="vm.numReplies()"
is-collapsed="vm.collapsed"
on-reply-count-click="vm.toggleCollapsed()"
ng-if="vm.container.message"
ng-show="vm.matchesFilter()">
......
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