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
90a6adb8
Commit
90a6adb8
authored
Nov 06, 2023
by
Alejandro Celaya
Committed by
Alejandro Celaya
Nov 08, 2023
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Add rounded corners to all components
parent
1269a436
Changes
17
Hide whitespace changes
Inline
Side-by-side
Showing
17 changed files
with
46 additions
and
33 deletions
+46
-33
AdderToolbar.tsx
src/annotator/components/AdderToolbar.tsx
+3
-3
ClusterToolbar.tsx
src/annotator/components/ClusterToolbar.tsx
+3
-2
Toolbar.tsx
src/annotator/components/Toolbar.tsx
+2
-2
AnnotationPublishControl.tsx
...idebar/components/Annotation/AnnotationPublishControl.tsx
+1
-1
AnnotationShareControl.tsx
src/sidebar/components/Annotation/AnnotationShareControl.tsx
+2
-2
AutocompleteList.tsx
src/sidebar/components/AutocompleteList.tsx
+2
-2
MarkdownEditor.tsx
src/sidebar/components/MarkdownEditor.tsx
+1
-1
Menu.tsx
src/sidebar/components/Menu.tsx
+6
-4
MenuItem.tsx
src/sidebar/components/MenuItem.tsx
+2
-2
PaginationNavigation.tsx
src/sidebar/components/PaginationNavigation.tsx
+1
-1
ProfileView.tsx
src/sidebar/components/ProfileView.tsx
+4
-4
ShareDialog.tsx
src/sidebar/components/ShareDialog/ShareDialog.tsx
+6
-3
SidebarPanel.tsx
src/sidebar/components/SidebarPanel.tsx
+1
-0
SortMenu.tsx
src/sidebar/components/SortMenu.tsx
+1
-1
Menu-test.js
src/sidebar/components/test/Menu-test.js
+1
-1
tailwind-annotator.config.mjs
tailwind-annotator.config.mjs
+10
-0
tailwind.config.mjs
tailwind.config.mjs
+0
-4
No files found.
src/annotator/components/AdderToolbar.tsx
View file @
90a6adb8
...
...
@@ -19,7 +19,7 @@ function NumberIcon({ badgeCount }: { badgeCount: number }) {
return
(
<
span
className=
{
classnames
(
'rounded
-[4px]
px-1 py-0.5'
,
'rounded px-1 py-0.5'
,
// The background color is inherited from the current text color in
// the containing button and will vary depending on hover state.
'bg-current'
,
...
...
@@ -238,8 +238,8 @@ export default function AdderToolbar({
// default border values from Tailwind and have to be explicit about all
// border attributes.
'border border-solid border-grey-3'
,
'absolute select-none bg-white rounded
-[4px]
shadow-adder-toolbar'
,
// Start at a very low opacity as we're going to fade
in in the animation
'absolute select-none bg-white rounded shadow-adder-toolbar'
,
// Start at a very low opacity as we're going to fade
-
in in the animation
'opacity-5'
,
{
'animate-adder-pop-up'
:
arrowDirection
===
'up'
&&
isVisible
,
...
...
src/annotator/components/ClusterToolbar.tsx
View file @
90a6adb8
...
...
@@ -37,7 +37,7 @@ function ClusterStyleControl({
<
div
className=
"space-y-2"
>
<
div
className=
"flex items-center gap-x-2 text-annotator-base"
>
<
div
className=
"grow text-color-text px-2 py-1 rounded
-[4px]
"
className=
"grow text-color-text px-2 py-1 rounded"
style=
{
{
backgroundColor
:
highlightStyles
[
appliedStyleName
].
color
,
}
}
...
...
@@ -130,9 +130,10 @@ export default function ClusterToolbar({
}
return
(
<
Card
>
<
Card
classes=
"overflow-hidden"
>
<
div
className=
"flex flex-col text-annotator-base text-color-text"
>
<
Button
classes=
"rounded-none"
data
-
testid=
"control-toggle-button"
onClick=
{
()
=>
setOpen
(
!
isOpen
)
}
title=
{
isOpen
?
'Hide highlight settings'
:
'Show highlight settings'
}
...
...
src/annotator/components/Toolbar.tsx
View file @
90a6adb8
...
...
@@ -31,7 +31,7 @@ function ToolbarButton({ icon: Icon, ...buttonProps }: ToolbarButtonProps) {
return
(
<
Button
classes=
{
classnames
(
'justify-center rounded
-[4px]
'
,
'justify-center rounded'
,
'w-[30px] h-[30px]'
,
'shadow border bg-white text-grey-6 hover:text-grey-9'
,
)
}
...
...
@@ -162,7 +162,7 @@ export default function Toolbar({
classes=
{
classnames
(
'transition-colors focus-visible-ring ring-inset'
,
// Height and width to align with the sidebar's top bar
'h-[40px] w-[33px] pl-[6px]'
,
'h-[40px] w-[33px] pl-[6px]
rounded-bl
'
,
'bg-white text-grey-5 hover:text-grey-9'
,
// Turn on left and bottom borders to continue the
// border of the sidebar's top bar
...
...
src/sidebar/components/Annotation/AnnotationPublishControl.tsx
View file @
90a6adb8
...
...
@@ -93,7 +93,7 @@ function AnnotationPublishControl({
<
div
className=
{
classnames
(
// Round the right side of this menu-open button only
'flex flex-row rounded-r
-sm
bg-grey-7 hover:bg-grey-8'
,
'flex flex-row rounded-r bg-grey-7 hover:bg-grey-8'
,
)
}
style=
{
buttonStyle
}
>
...
...
src/sidebar/components/Annotation/AnnotationShareControl.tsx
View file @
90a6adb8
...
...
@@ -144,7 +144,7 @@ function AnnotationShareControl({
<
div
// Position this Card above its IconButton. Account for larger
// IconButtons in touch interfaces
className=
"absolute bottom-8 right-
1
touch:bottom-touch-minimum"
className=
"absolute bottom-8 right-
0
touch:bottom-touch-minimum"
>
<
Card
classes=
{
classnames
(
...
...
@@ -195,7 +195,7 @@ function AnnotationShareControl({
{
showShareLinks
&&
<
ShareLinks
shareURI=
{
shareUri
}
/>
}
<
MenuArrow
direction=
"down"
classes=
"bottom-[-8px] right-
1
touch:right-[9px]"
classes=
"bottom-[-8px] right-
2
touch:right-[9px]"
/>
</
Card
>
</
div
>
...
...
src/sidebar/components/AutocompleteList.tsx
View file @
90a6adb8
...
...
@@ -107,11 +107,11 @@ export default function AutocompleteList<Item>({
)
}
data
-
testid=
"autocomplete-list-container"
>
<
Card
width=
"auto"
>
<
Card
width=
"auto"
classes=
"overflow-hidden"
>
<
ul
tabIndex=
{
-
1
}
aria
-
label=
"Suggestions"
role=
"listbox"
{
...
props
}
>
{
items
}
</
ul
>
<
MenuArrow
direction=
"up"
classes=
"top-[-8px] left-
[3px]
"
/>
<
MenuArrow
direction=
"up"
classes=
"top-[-8px] left-
2
"
/>
</
Card
>
</
div
>
</
div
>
...
...
src/sidebar/components/MarkdownEditor.tsx
View file @
90a6adb8
...
...
@@ -225,7 +225,7 @@ function Toolbar({ isPreviewing, onCommand, onTogglePreview }: ToolbarProps) {
className=
{
classnames
(
// Allow buttons to wrap to second line if necessary.
'flex flex-wrap w-full items-center'
,
'p-1 border-x border-t rounded-t
-[4px]
bg-white'
,
'p-1 border-x border-t rounded-t bg-white'
,
// For touch interfaces, allow height to scale to larger button targets.
// Don't wrap buttons but instead scroll horizontally. Add bottom
// padding to provide some space for scrollbar.
...
...
src/sidebar/components/Menu.tsx
View file @
90a6adb8
...
...
@@ -232,7 +232,7 @@ export default function Menu({
direction=
"up"
classes=
{
classnames
(
// Position menu-arrow caret near bottom right of menu label/toggle control
'right-
0
top-[calc(100%-3px)] w-[15px]'
,
'right-
1
top-[calc(100%-3px)] w-[15px]'
,
arrowClass
,
)
}
/>
...
...
@@ -240,11 +240,13 @@ export default function Menu({
className=
{
classnames
(
'focus-visible-ring'
,
// Position menu content near bottom of menu label/toggle control
'absolute top-[calc(100%+5px)] z-1
border shadow
'
,
'bg-white text-md'
,
'absolute top-[calc(100%+5px)] z-1'
,
'b
order shadow rounded-lg overflow-hidden b
g-white text-md'
,
{
'left-0'
:
align
===
'left'
,
'right-0'
:
align
===
'right'
,
// Adding negative right distance so that the menu arrow does
// not overlap with the top-right corner when it's rounded
'-right-1'
:
align
===
'right'
,
},
contentClass
,
)
}
...
...
src/sidebar/components/MenuItem.tsx
View file @
90a6adb8
...
...
@@ -239,7 +239,7 @@ export default function MenuItem({
const
wrapperClasses
=
classnames
(
'focus-visible-ring ring-inset'
,
'w-full min-w-[150px] flex items-center select-none'
,
'border-b'
,
'border-b
rounded-none cursor-pointer
'
,
// Set this container as a "group" so that children may style based on its
// layout state.
// See https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state
...
...
@@ -263,7 +263,7 @@ export default function MenuItem({
'border-b-grey-3'
:
isExpanded
,
'border-b-transparent'
:
!
isExpanded
,
'text-color-text-light'
:
isDisabled
,
'text-color-text'
:
!
isDisabled
,
'text-color-text
hover:text-color-text
'
:
!
isDisabled
,
},
);
...
...
src/sidebar/components/PaginationNavigation.tsx
View file @
90a6adb8
...
...
@@ -19,7 +19,7 @@ function NavigationButton({ ...buttonProps }: NavigationButtonProps) {
<
Button
classes=
{
classnames
(
'px-3.5 py-2.5 gap-x-1'
,
'font-semibold'
,
'font-semibold
rounded
'
,
// These colors are the same as the "dark" variant of IconButton
'text-grey-7 bg-grey-2 enabled:hover:text-grey-9 enabled:hover:bg-grey-3'
,
'disabled:text-grey-5 aria-pressed:bg-grey-3 aria-expanded:bg-grey-3'
,
...
...
src/sidebar/components/ProfileView.tsx
View file @
90a6adb8
...
...
@@ -39,7 +39,7 @@ function ToastBadge({
return
(
<
div
className=
{
classnames
(
'flex items-center gap-x-1 py-1 px-2 rounded
-[4px]
'
,
'flex items-center gap-x-1 py-1 px-2 rounded'
,
'bg-green-success/10 animate-pulse-fade-out'
,
classes
,
)
}
...
...
@@ -97,13 +97,13 @@ export default function ProfileView() {
// Render save-success message after each successful save, but do not render
// it when a "request is in flight". This removal and re-adding across a
// sequence of saves ensures that the browser sees the message as newly-
added
// to the accessiblity DOM and screen readers should announce it at the
// sequence of saves ensures that the browser sees the message as newly-added
// to the accessib
i
lity DOM and screen readers should announce it at the
// appropriate times.
const
withSaveMessage
=
saveCount
>
0
&&
!
loading
;
return
(
<
Card
data
-
testid=
"profile-container"
>
<
Card
data
-
testid=
"profile-container"
classes=
"overflow-hidden"
>
<
div
className=
{
classnames
(
// Ensure there is enough height to clear both the heading text and the
...
...
src/sidebar/components/ShareDialog/ShareDialog.tsx
View file @
90a6adb8
import
{
Card
,
Tab
}
from
'@hypothesis/frontend-shared'
;
import
classnames
from
'classnames'
;
import
{
useState
}
from
'preact/hooks'
;
import
{
useSidebarStore
}
from
'../../store'
;
...
...
@@ -34,10 +35,12 @@ export default function ShareDialog({
const
panelTitle
=
`Share Annotations in
${
groupName
}
`
;
const
tabbedDialog
=
exportTab
||
importTab
;
// Determine initial selected tab, based on the first tab that will be displayed
const
initialTab
=
shareTab
?
'share'
:
exportTab
?
'export'
:
'import'
;
const
[
selectedTab
,
setSelectedTab
]
=
useState
<
'share'
|
'export'
|
'import'
>
(
// Determine initial selected tab, based on the first tab that will be displayed
shareTab
?
'share'
:
exportTab
?
'export'
:
'import'
,
initialTab
,
);
const
isFirstTabSelected
=
tabbedDialog
&&
selectedTab
===
initialTab
;
return
(
<
SidebarPanel
...
...
@@ -85,7 +88,7 @@ export default function ShareDialog({
</
Tab
>
)
}
</
TabHeader
>
<
Card
>
<
Card
classes=
{
classnames
({
'rounded-tl-none'
:
isFirstTabSelected
})
}
>
<
TabPanel
id=
"share-panel"
active=
{
selectedTab
===
'share'
}
...
...
src/sidebar/components/SidebarPanel.tsx
View file @
90a6adb8
...
...
@@ -69,6 +69,7 @@ export default function SidebarPanel({
onClose=
{
closePanel
}
transitionComponent=
{
Slider
}
variant=
{
variant
}
scrollable=
{
false
}
>
{
children
}
</
Dialog
>
...
...
src/sidebar/components/SortMenu.tsx
View file @
90a6adb8
...
...
@@ -33,7 +33,7 @@ export default function SortMenu() {
);
return
(
<
div
className
=
"SortMenu"
>
<
div
data
-
component
=
"SortMenu"
>
<
Menu
label=
{
menuLabel
}
title=
{
`Sort by ${sortKey}`
}
...
...
src/sidebar/components/test/Menu-test.js
View file @
90a6adb8
...
...
@@ -217,7 +217,7 @@ describe('Menu', () => {
assert
.
isTrue
(
wrapper
.
find
(
contentSelector
).
hasClass
(
'left-0'
));
wrapper
.
setProps
({
align
:
'right'
});
assert
.
isTrue
(
wrapper
.
find
(
contentSelector
).
hasClass
(
'
right-0
'
));
assert
.
isTrue
(
wrapper
.
find
(
contentSelector
).
hasClass
(
'
-right-1
'
));
});
it
(
'applies custom content class'
,
()
=>
{
...
...
tailwind-annotator.config.mjs
View file @
90a6adb8
...
...
@@ -9,4 +9,14 @@ export default {
// This module references `sidebar-frame` and related classes
'./src/annotator/sidebar.{js,ts,tsx}'
,
],
theme
:
{
extend
:
{
borderRadius
:
{
// Equivalent to tailwind defaults, but overriding values from frontend-shared preset
// Once the preset stops defining borderRadius, we can remove this
DEFAULT
:
'0.25rem'
,
lg
:
'0.5rem'
,
},
}
}
};
tailwind.config.mjs
View file @
90a6adb8
...
...
@@ -24,10 +24,6 @@ export default {
'pulse-fade-out'
:
'pulse-fade-out 5s ease-in-out forwards'
,
'slide-in-from-right'
:
'slide-in-from-right 0.3s forwards ease-in-out'
,
},
borderRadius
:
{
// Equivalent to tailwind default `rounded-sm` size
DEFAULT
:
'0.125rem'
,
},
boxShadow
:
{
'adder-toolbar'
:
'0px 2px 10px 0px rgba(0, 0, 0, 0.25)'
,
focus
:
`0 0 0 2px
${
focusBlue
}
`
,
...
...
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