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
b495a4a0
Commit
b495a4a0
authored
Apr 14, 2022
by
Lyza Danger Gardner
Committed by
Lyza Gardner
Apr 20, 2022
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Transition `ThreadCard` to tailwind
Use shared `Card` component for styling
parent
931874fb
Changes
4
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
15 additions
and
21 deletions
+15
-21
ThreadCard.js
src/sidebar/components/ThreadCard.js
+7
-5
ThreadCard-test.js
src/sidebar/components/test/ThreadCard-test.js
+8
-6
ThreadCard.scss
src/styles/sidebar/components/ThreadCard.scss
+0
-9
_index.scss
src/styles/sidebar/components/_index.scss
+0
-1
No files found.
src/sidebar/components/ThreadCard.js
View file @
b495a4a0
import
{
Card
}
from
'@hypothesis/frontend-shared'
;
import
classnames
from
'classnames'
;
import
classnames
from
'classnames'
;
import
debounce
from
'lodash.debounce'
;
import
debounce
from
'lodash.debounce'
;
import
{
useCallback
,
useMemo
}
from
'preact/hooks'
;
import
{
useCallback
,
useMemo
}
from
'preact/hooks'
;
...
@@ -63,7 +64,11 @@ function ThreadCard({ frameSync, thread }) {
...
@@ -63,7 +64,11 @@ function ThreadCard({ frameSync, thread }) {
return
(
return
(
/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
<
div
<
Card
classes
=
{
classnames
(
'p-3 cursor-pointer'
,
{
'is-focused'
:
isFocused
,
})}
data
-
testid
=
"thread-card"
onClick
=
{
e
=>
{
onClick
=
{
e
=>
{
// Prevent click events intended for another action from
// Prevent click events intended for another action from
// triggering a page scroll.
// triggering a page scroll.
...
@@ -74,12 +79,9 @@ function ThreadCard({ frameSync, thread }) {
...
@@ -74,12 +79,9 @@ function ThreadCard({ frameSync, thread }) {
onMouseEnter
=
{()
=>
focusThreadAnnotation
(
threadTag
)}
onMouseEnter
=
{()
=>
focusThreadAnnotation
(
threadTag
)}
onMouseLeave
=
{()
=>
focusThreadAnnotation
(
null
)}
onMouseLeave
=
{()
=>
focusThreadAnnotation
(
null
)}
key
=
{
thread
.
id
}
key
=
{
thread
.
id
}
className
=
{
classnames
(
'ThreadCard p-3'
,
{
'is-focused'
:
isFocused
,
})}
>
>
{
threadContent
}
{
threadContent
}
<
/
div
>
<
/
Card
>
);
);
}
}
...
...
src/sidebar/components/test/ThreadCard-test.js
View file @
b495a4a0
...
@@ -11,6 +11,8 @@ describe('ThreadCard', () => {
...
@@ -11,6 +11,8 @@ describe('ThreadCard', () => {
let
fakeStore
;
let
fakeStore
;
let
fakeThread
;
let
fakeThread
;
const
threadCardSelector
=
'div[data-testid="thread-card"]'
;
function
createComponent
(
props
)
{
function
createComponent
(
props
)
{
return
mount
(
return
mount
(
<
ThreadCard
frameSync
=
{
fakeFrameSync
}
thread
=
{
fakeThread
}
{...
props
}
/
>
<
ThreadCard
frameSync
=
{
fakeFrameSync
}
thread
=
{
fakeThread
}
{...
props
}
/
>
...
@@ -54,14 +56,14 @@ describe('ThreadCard', () => {
...
@@ -54,14 +56,14 @@ describe('ThreadCard', () => {
const
wrapper
=
createComponent
();
const
wrapper
=
createComponent
();
assert
(
wrapper
.
find
(
'.ThreadCard'
).
hasClass
(
'is-focused'
));
assert
.
isTrue
(
wrapper
.
find
(
threadCardSelector
).
hasClass
(
'is-focused'
));
});
});
describe
(
'mouse and click events'
,
()
=>
{
describe
(
'mouse and click events'
,
()
=>
{
it
(
'scrolls to the annotation when the `ThreadCard` is clicked'
,
()
=>
{
it
(
'scrolls to the annotation when the `ThreadCard` is clicked'
,
()
=>
{
const
wrapper
=
createComponent
();
const
wrapper
=
createComponent
();
wrapper
.
find
(
'.ThreadCard'
).
simulate
(
'click'
);
wrapper
.
find
(
threadCardSelector
).
simulate
(
'click'
);
assert
.
calledWith
(
fakeFrameSync
.
scrollToAnnotation
,
'myTag'
);
assert
.
calledWith
(
fakeFrameSync
.
scrollToAnnotation
,
'myTag'
);
});
});
...
@@ -69,7 +71,7 @@ describe('ThreadCard', () => {
...
@@ -69,7 +71,7 @@ describe('ThreadCard', () => {
it
(
'focuses the annotation thread when mouse enters'
,
()
=>
{
it
(
'focuses the annotation thread when mouse enters'
,
()
=>
{
const
wrapper
=
createComponent
();
const
wrapper
=
createComponent
();
wrapper
.
find
(
'.ThreadCard'
).
simulate
(
'mouseenter'
);
wrapper
.
find
(
threadCardSelector
).
simulate
(
'mouseenter'
);
assert
.
calledWith
(
fakeFrameSync
.
focusAnnotations
,
sinon
.
match
([
'myTag'
]));
assert
.
calledWith
(
fakeFrameSync
.
focusAnnotations
,
sinon
.
match
([
'myTag'
]));
});
});
...
@@ -77,7 +79,7 @@ describe('ThreadCard', () => {
...
@@ -77,7 +79,7 @@ describe('ThreadCard', () => {
it
(
'unfocuses the annotation thread when mouse exits'
,
()
=>
{
it
(
'unfocuses the annotation thread when mouse exits'
,
()
=>
{
const
wrapper
=
createComponent
();
const
wrapper
=
createComponent
();
wrapper
.
find
(
'.ThreadCard'
).
simulate
(
'mouseleave'
);
wrapper
.
find
(
threadCardSelector
).
simulate
(
'mouseleave'
);
assert
.
calledWith
(
fakeFrameSync
.
focusAnnotations
,
sinon
.
match
([]));
assert
.
calledWith
(
fakeFrameSync
.
focusAnnotations
,
sinon
.
match
([]));
});
});
...
@@ -89,10 +91,10 @@ describe('ThreadCard', () => {
...
@@ -89,10 +91,10 @@ describe('ThreadCard', () => {
const
nodeChild
=
document
.
createElement
(
'div'
);
const
nodeChild
=
document
.
createElement
(
'div'
);
nodeTarget
.
appendChild
(
nodeChild
);
nodeTarget
.
appendChild
(
nodeChild
);
wrapper
.
find
(
'.ThreadCard'
).
props
().
onClick
({
wrapper
.
find
(
threadCardSelector
).
props
().
onClick
({
target
:
nodeTarget
,
target
:
nodeTarget
,
});
});
wrapper
.
find
(
'.ThreadCard'
).
props
().
onClick
({
wrapper
.
find
(
threadCardSelector
).
props
().
onClick
({
target
:
nodeChild
,
target
:
nodeChild
,
});
});
assert
.
notCalled
(
fakeFrameSync
.
scrollToAnnotation
);
assert
.
notCalled
(
fakeFrameSync
.
scrollToAnnotation
);
...
...
src/styles/sidebar/components/ThreadCard.scss
deleted
100644 → 0
View file @
931874fb
@use
'../../variables'
as
var
;
@use
'../../mixins/layout'
;
@use
'../../mixins/molecules'
;
@use
'../../mixins/utils'
;
.ThreadCard
{
@include
molecules
.
card
;
cursor
:
pointer
;
}
src/styles/sidebar/components/_index.scss
View file @
b495a4a0
...
@@ -24,7 +24,6 @@
...
@@ -24,7 +24,6 @@
@use
'./SelectionTabs'
;
@use
'./SelectionTabs'
;
@use
'./SearchInput'
;
@use
'./SearchInput'
;
@use
'./StyledText'
;
@use
'./StyledText'
;
@use
'./ThreadCard'
;
@use
'./ToastMessages'
;
@use
'./ToastMessages'
;
@use
'./VersionInfo'
;
@use
'./VersionInfo'
;
...
...
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