From 033a231b67c0c978afb717dc8cce28edafe2556e Mon Sep 17 00:00:00 2001 From: ascarbek Date: Thu, 6 Apr 2023 15:38:50 +0600 Subject: [PATCH] chore: board title and show icons on design page --- .../components/TestColors/TestColors.tsx | 162 +++++++++++++++++- .../components/_shared/svg/EyeClosedSvg.tsx | 2 +- .../components/_shared/svg/EyeOpenSvg.tsx | 2 +- .../components/auth/Login/Login.tsx | 6 +- .../components/auth/SignUp/SignUp.tsx | 8 +- .../appflowy_app/components/board/Board.tsx | 4 +- .../src/appflowy_app/views/BoardPage.tsx | 10 +- 7 files changed, 178 insertions(+), 16 deletions(-) diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/TestColors/TestColors.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/TestColors/TestColors.tsx index a09962216f..e09a062ecd 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/TestColors/TestColors.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/TestColors/TestColors.tsx @@ -1,6 +1,166 @@ +import AddSvg from '$app/components/_shared/svg/AddSvg'; +import { ChecklistTypeSvg } from '$app/components/_shared/svg/ChecklistTypeSvg'; +import { CheckmarkSvg } from '$app/components/_shared/svg/CheckmarkSvg'; +import { ArrowLeftSvg } from '$app/components/_shared/svg/ArrowLeftSvg'; +import { ArrowRightSvg } from '$app/components/_shared/svg/ArrowRightSvg'; +import { BoardSvg } from '$app/components/_shared/svg/BoardSvg'; +import { CheckboxSvg } from '$app/components/_shared/svg/CheckboxSvg'; +import { ClockSvg } from '$app/components/_shared/svg/ClockSvg'; +import { CloseSvg } from '$app/components/_shared/svg/CloseSvg'; +import { CopySvg } from '$app/components/_shared/svg/CopySvg'; +import { DateTypeSvg } from '$app/components/_shared/svg/DateTypeSvg'; +import { Details2Svg } from '$app/components/_shared/svg/Details2Svg'; +import { DocumentSvg } from '$app/components/_shared/svg/DocumentSvg'; +import { DropDownShowSvg } from '$app/components/_shared/svg/DropDownShowSvg'; +import { EarthSvg } from '$app/components/_shared/svg/EarthSvg'; +import { EditorCheckSvg } from '$app/components/_shared/svg/EditorCheckSvg'; +import { EditorUncheckSvg } from '$app/components/_shared/svg/EditorUncheckSvg'; +import { EditSvg } from '$app/components/_shared/svg/EditSvg'; +import { EyeClosedSvg } from '$app/components/_shared/svg/EyeClosedSvg'; +import { EyeOpenSvg } from '$app/components/_shared/svg/EyeOpenSvg'; +import { FilterSvg } from '$app/components/_shared/svg/FilterSvg'; +import { GridSvg } from '$app/components/_shared/svg/GridSvg'; +import { HideMenuSvg } from '$app/components/_shared/svg/HideMenuSvg'; +import { InformationSvg } from '$app/components/_shared/svg/InformationSvg'; +import { LogoutSvg } from '$app/components/_shared/svg/LogoutSvg'; +import { MoreSvg } from '$app/components/_shared/svg/MoreSvg'; +import { MultiSelectTypeSvg } from '$app/components/_shared/svg/MultiSelectTypeSvg'; +import { NumberTypeSvg } from '$app/components/_shared/svg/NumberTypeSvg'; +import { PropertiesSvg } from '$app/components/_shared/svg/PropertiesSvg'; +import { SearchSvg } from '$app/components/_shared/svg/SearchSvg'; +import { ShowMenuSvg } from '$app/components/_shared/svg/ShowMenuSvg'; +import { SingleSelectTypeSvg } from '$app/components/_shared/svg/SingleSelectTypeSvg'; +import { SkipLeftSvg } from '$app/components/_shared/svg/SkipLeftSvg'; +import { SkipRightSvg } from '$app/components/_shared/svg/SkipRightSvg'; +import { SortSharp } from '@mui/icons-material'; +import { SortSvg } from '$app/components/_shared/svg/SortSvg'; +import { TextTypeSvg } from '$app/components/_shared/svg/TextTypeSvg'; +import { TrashSvg } from '$app/components/_shared/svg/TrashSvg'; +import { UrlTypeSvg } from '$app/components/_shared/svg/UrlTypeSvg'; + export const TestColors = () => { return ( -
+
+

Icons

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+

Colors

Main

diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/svg/EyeClosedSvg.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/svg/EyeClosedSvg.tsx index baa5684f42..d4d50668d3 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/svg/EyeClosedSvg.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/svg/EyeClosedSvg.tsx @@ -1,4 +1,4 @@ -export const EyeClosed = () => { +export const EyeClosedSvg = () => { return ( { +export const EyeOpenSvg = () => { return ( { className='absolute right-0 top-0 flex h-full w-12 items-center justify-center ' onClick={onTogglePassword} > - {showPassword ? : } + {showPassword ? : }
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/auth/SignUp/SignUp.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/auth/SignUp/SignUp.tsx index 6b6a24ae9f..5ba6e768f3 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/auth/SignUp/SignUp.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/auth/SignUp/SignUp.tsx @@ -1,6 +1,6 @@ import { AppflowyLogo } from '../../_shared/svg/AppflowyLogo'; -import { EyeClosed } from '../../_shared/svg/EyeClosedSvg'; -import { EyeOpened } from '../../_shared/svg/EyeOpenSvg'; +import { EyeClosedSvg } from '../../_shared/svg/EyeClosedSvg'; +import { EyeOpenSvg } from '../../_shared/svg/EyeOpenSvg'; import { useSignUp } from './SignUp.hooks'; import { Link } from 'react-router-dom'; @@ -71,7 +71,7 @@ export const SignUp = () => { onClick={onTogglePassword} type='button' > - {showPassword ? : } + {showPassword ? : }
@@ -89,7 +89,7 @@ export const SignUp = () => { onClick={onToggleConfirmPassword} type='button' > - {showConfirmPassword ? : } + {showConfirmPassword ? : }
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/board/Board.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/board/Board.tsx index 97cb7bd430..bff32516d8 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/board/Board.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/board/Board.tsx @@ -9,7 +9,7 @@ import { useState } from 'react'; import { RowInfo } from '$app/stores/effects/database/row/row_cache'; import { EditRow } from '$app/components/_shared/EditRow/EditRow'; -export const Board = ({ viewId }: { viewId: string }) => { +export const Board = ({ viewId, title }: { viewId: string; title: string }) => { const { controller, rows, groups, groupByFieldId, onNewRowClick, onDragEnd } = useDatabase(viewId, ViewLayoutPB.Board); const [showBoardRow, setShowBoardRow] = useState(false); const [boardRowInfo, setBoardRowInfo] = useState(); @@ -23,7 +23,7 @@ export const Board = ({ viewId }: { viewId: string }) => { <>
-
{'Kanban'}
+
{title}
diff --git a/frontend/appflowy_tauri/src/appflowy_app/views/BoardPage.tsx b/frontend/appflowy_tauri/src/appflowy_app/views/BoardPage.tsx index d533850710..02c0e7c110 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/views/BoardPage.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/views/BoardPage.tsx @@ -1,22 +1,24 @@ import { useParams } from 'react-router-dom'; import { useEffect, useState } from 'react'; import { Board } from '../components/board/Board'; +import { useAppSelector } from '$app/stores/store'; export const BoardPage = () => { const params = useParams(); const [viewId, setViewId] = useState(''); + const pagesStore = useAppSelector((state) => state.pages); + const [title, setTitle] = useState(''); useEffect(() => { if (params?.id?.length) { setViewId(params.id); - // setDatabaseId('testDb'); + setTitle(pagesStore.find((page) => page.id === params.id)?.title || ''); } - }, [params]); + }, [params, pagesStore]); return (
-

Board: {viewId}

- {viewId?.length && } + {viewId?.length && }
); };