Commit 4ea6496a authored by Lyza Danger Gardner's avatar Lyza Danger Gardner

Rename `AnnotationOmega` -> `Annotation`

parent 68485e27
...@@ -19,9 +19,9 @@ import TagEditor from './tag-editor'; ...@@ -19,9 +19,9 @@ import TagEditor from './tag-editor';
import TagList from './tag-list'; import TagList from './tag-list';
/** /**
* The "new", migrated-to-preact annotation component. * A single annotation.
*/ */
function AnnotationOmega({ function Annotation({
annotation, annotation,
annotationsService, annotationsService,
flash, flash,
...@@ -147,7 +147,7 @@ function AnnotationOmega({ ...@@ -147,7 +147,7 @@ function AnnotationOmega({
); );
} }
AnnotationOmega.propTypes = { Annotation.propTypes = {
annotation: propTypes.object.isRequired, annotation: propTypes.object.isRequired,
/** Callback for reply-count clicks */ /** Callback for reply-count clicks */
...@@ -164,6 +164,6 @@ AnnotationOmega.propTypes = { ...@@ -164,6 +164,6 @@ AnnotationOmega.propTypes = {
flash: propTypes.object.isRequired, flash: propTypes.object.isRequired,
}; };
AnnotationOmega.injectedProps = ['annotationsService', 'flash']; Annotation.injectedProps = ['annotationsService', 'flash'];
export default withServices(AnnotationOmega); export default withServices(Annotation);
...@@ -10,10 +10,10 @@ import { waitFor } from '../../../test-util/wait'; ...@@ -10,10 +10,10 @@ import { waitFor } from '../../../test-util/wait';
// @TODO Note this import as `Annotation` for easier updating later // @TODO Note this import as `Annotation` for easier updating later
import Annotation from '../annotation-omega'; import Annotation from '../annotation';
import { $imports } from '../annotation-omega'; import { $imports } from '../annotation';
describe('AnnotationOmega', () => { describe('Annotation', () => {
let fakeOnReplyCountClick; let fakeOnReplyCountClick;
// Dependency Mocks // Dependency Mocks
......
...@@ -7,7 +7,7 @@ import moderationBanner from '../moderation-banner'; ...@@ -7,7 +7,7 @@ import moderationBanner from '../moderation-banner';
function PageObject(element) { function PageObject(element) {
this.annotations = function() { this.annotations = function() {
return Array.from(element[0].querySelectorAll('annotation-omega')); return Array.from(element[0].querySelectorAll('annotation'));
}; };
this.visibleReplies = function() { this.visibleReplies = function() {
return Array.from( return Array.from(
...@@ -255,27 +255,4 @@ describe('annotationThread', function() { ...@@ -255,27 +255,4 @@ describe('annotationThread', function() {
assert.notOk(element[0].querySelector('moderation-banner')); assert.notOk(element[0].querySelector('moderation-banner'));
assert.notOk(element[0].querySelector('annotation')); assert.notOk(element[0].querySelector('annotation'));
}); });
describe('preact-migrated Annotation component', () => {
it('renders `AnnotationOmega`', () => {
const element = util.createDirective(document, 'annotationThread', {
thread: {
id: '1',
annotation: { id: '1', text: 'text' },
children: [
{
id: '2',
annotation: { id: '2', text: 'areply' },
children: [],
visible: true,
},
],
visible: true,
},
});
assert.notOk(element[0].querySelector('annotation'));
assert.ok(element[0].querySelector('annotation-omega'));
});
});
}); });
...@@ -133,11 +133,11 @@ function autosave(autosaveService) { ...@@ -133,11 +133,11 @@ function autosave(autosaveService) {
// Preact UI components that are wrapped for use within Angular templates. // Preact UI components that are wrapped for use within Angular templates.
import Annotation from './components/annotation';
import AnnotationActionBar from './components/annotation-action-bar'; import AnnotationActionBar from './components/annotation-action-bar';
import AnnotationBody from './components/annotation-body'; import AnnotationBody from './components/annotation-body';
import AnnotationHeader from './components/annotation-header'; import AnnotationHeader from './components/annotation-header';
import AnnotationLicense from './components/annotation-license'; import AnnotationLicense from './components/annotation-license';
import AnnotationOmega from './components/annotation-omega';
import AnnotationPublishControl from './components/annotation-publish-control'; import AnnotationPublishControl from './components/annotation-publish-control';
import AnnotationQuote from './components/annotation-quote'; import AnnotationQuote from './components/annotation-quote';
import FocusedModeHeader from './components/focused-mode-header'; import FocusedModeHeader from './components/focused-mode-header';
...@@ -265,11 +265,11 @@ function startAngularApp(config) { ...@@ -265,11 +265,11 @@ function startAngularApp(config) {
.component('hypothesisApp', hypothesisApp) .component('hypothesisApp', hypothesisApp)
// UI components // UI components
.component('annotation', wrapComponent(Annotation))
.component('annotationBody', wrapComponent(AnnotationBody)) .component('annotationBody', wrapComponent(AnnotationBody))
.component('annotationHeader', wrapComponent(AnnotationHeader)) .component('annotationHeader', wrapComponent(AnnotationHeader))
.component('annotationActionBar', wrapComponent(AnnotationActionBar)) .component('annotationActionBar', wrapComponent(AnnotationActionBar))
.component('annotationLicense', wrapComponent(AnnotationLicense)) .component('annotationLicense', wrapComponent(AnnotationLicense))
.component('annotationOmega', wrapComponent(AnnotationOmega))
.component( .component(
'annotationPublishControl', 'annotationPublishControl',
wrapComponent(AnnotationPublishControl) wrapComponent(AnnotationPublishControl)
......
...@@ -14,13 +14,13 @@ ...@@ -14,13 +14,13 @@
annotation="vm.thread.annotation" annotation="vm.thread.annotation"
ng-if="vm.thread.annotation"> ng-if="vm.thread.annotation">
</moderation-banner> </moderation-banner>
<annotation-omega ng-if="vm.thread.annotation && vm.thread.visible" <annotation ng-if="vm.thread.annotation && vm.thread.visible"
annotation="vm.thread.annotation" annotation="vm.thread.annotation"
reply-count="vm.thread.replyCount" reply-count="vm.thread.replyCount"
on-reply-count-click="vm.toggleCollapsed()" on-reply-count-click="vm.toggleCollapsed()"
show-document-info="vm.showDocumentInfo" show-document-info="vm.showDocumentInfo"
thread-is-collapsed="vm.thread.collapsed"> thread-is-collapsed="vm.thread.collapsed">
</annotation-omega> </annotation>
<div ng-if="!vm.thread.annotation" class="thread-deleted"> <div ng-if="!vm.thread.annotation" class="thread-deleted">
<p><em>Message not available.</em></p> <p><em>Message not available.</em></p>
......
@use "../../variables" as var;
.annotation-omega {
&__reply-toggle.button {
background-color: transparent;
padding: 0;
font-weight: 400;
&:hover {
background-color: transparent;
text-decoration: underline;
}
}
&__controls {
display: flex;
}
&__actions {
margin-left: auto;
}
&__form-actions {
display: flex;
flex-direction: row;
margin-bottom: 10px;
}
&__footer {
@include var.font-normal;
color: var.$grey-5;
margin-top: var.$layout-h-margin;
}
&--reply &__footer {
margin-top: var.$layout-h-margin - 8px;
}
}
// FIXME vertical rhythm here should be refactored
.annotation-omega--reply {
.annotation-header {
// Margin between bottom of ascent of annotation card footer labels
// and top of ascent of username should be ~20px
margin-top: 0px;
}
.annotation-body {
// Margin between top of ascent of annotation body and
// bottom of ascent of username should be ~15px
margin-top: var.$layout-h-margin - 8px;
// Margin between bottom of ascent of annotation body and
// top of annotation footer labels should be ~15px
margin-bottom: var.$layout-h-margin - 3px;
}
}
.annotation-omega--reply.is-collapsed {
margin-bottom: 0;
.annotation-header {
margin: 0;
}
.annotation-body,
.annotation-footer {
display: none;
}
}
...@@ -30,7 +30,6 @@ ...@@ -30,7 +30,6 @@
@use './components/annotation-document-info'; @use './components/annotation-document-info';
@use './components/annotation-header'; @use './components/annotation-header';
@use './components/annotation-license'; @use './components/annotation-license';
@use './components/annotation-omega';
@use './components/annotation-publish-control'; @use './components/annotation-publish-control';
@use './components/annotation-quote'; @use './components/annotation-quote';
@use './components/annotation-share-control'; @use './components/annotation-share-control';
......
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