admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Design fixes (#555)

Browse Source 
* Change placeholder color and design fixes for show page / sidebar

* Replace hardcoded border radiuses

* Improve border display for middle of button group

* Editor styling

* Editor font size

* Comment Bar positioning and remove scrollbar for 1px

* Add Comments section title

* Nit: match css style

---------

Co-authored-by: Emilien <emilien.chauvet.enpc@gmail.com>
This commit is contained in:
Félix Malfait
2023-07-10 20:24:20 +02:00
committed by GitHub
parent 3079747c83
commit 25eeada92c
37 changed files with 136 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
front/src/modules/comments/components/comment-thread/CommentThreadBodyEditor.tsx
View File

@ -46,7 +46,7 @@ export function CommentThreadBodyEditor({ commentThread, onChange }: OwnProps) {
initialContent: commentThread.body
? JSON.parse(commentThread.body)
: undefined,
editorDOMAttributes: { class: 'editor-edit-mode' },
editorDOMAttributes: { class: 'editor' },
onEditorContentChange: (editor) => {
debounceOnChange(JSON.stringify(editor.topLevelBlocks) ?? '');
},

20
front/src/modules/comments/components/comment-thread/CommentThreadComments.tsx
View File

@ -41,6 +41,13 @@ const StyledCommentActionBar = styled.div`
width: calc(${({ theme }) => theme.rightDrawerWidth} - 48px - 24px);
`;
const StyledThreadCommentTitle = styled.div`
color: ${({ theme }) => theme.font.color.tertiary};
font-size: ${({ theme }) => theme.font.size.xs};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
text-transform: uppercase;
`;
export function CommentThreadComments({ commentThread }: OwnProps) {
const [createCommentMutation] = useCreateCommentMutation();
const currentUser = useRecoilValue(currentUserState);
@ -69,11 +76,14 @@ export function CommentThreadComments({ commentThread }: OwnProps) {
return (
<>
{commentThread?.comments.length > 0 && (
<StyledThreadItemListContainer>
{commentThread?.comments?.map((comment, index) => (
<CommentThreadItem key={comment.id} comment={comment} />
))}
</StyledThreadItemListContainer>
<>
<StyledThreadItemListContainer>
<StyledThreadCommentTitle>Comments</StyledThreadCommentTitle>
{commentThread?.comments?.map((comment, index) => (
<CommentThreadItem key={comment.id} comment={comment} />
))}
</StyledThreadItemListContainer>
</>
)}
<StyledCommentActionBar>

2
front/src/modules/comments/components/comment-thread/CommentThreadTypeDropdown.tsx
View File

@ -6,7 +6,7 @@ import { IconNotes } from '@/ui/icons/index';
export function CommentThreadTypeDropdown() {
const options: DropdownOptionType[] = [
{ label: 'Notes', icon: <IconNotes /> },
{ label: 'Note', icon: <IconNotes /> },
// { label: 'Call', icon: <IconPhone /> },
];