Commit fe597913 authored by Robert Knight's avatar Robert Knight

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

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