Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: board title and show icons on design page

Browse Source
This commit is contained in:
ascarbek 2023-04-06 15:38:50 +06:00
parent d2b0f7e6b0
commit 033a231b67
7 changed files with 178 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

162
frontend/appflowy_tauri/src/appflowy_app/components/TestColors/TestColors.tsx
View File

@ -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 (
<div>
<div className={'p-8'}>
<h1 className={'mb-4 text-2xl'}>Icons</h1>
<div className={'mb-8'}>
<div className={'flex flex-wrap items-center gap-4'}>
<i className={'h-5 w-5'}>
<AddSvg></AddSvg>
</i>
<i className={'h-5 w-5'}>
<ArrowLeftSvg></ArrowLeftSvg>
</i>
<i className={'h-5 w-5'}>
<ArrowRightSvg></ArrowRightSvg>
</i>
<i className={'h-5 w-5'}>
<BoardSvg></BoardSvg>
</i>
<i className={'h-5 w-5'}>
<CheckboxSvg></CheckboxSvg>
</i>
<i className={'h-5 w-5'}>
<ChecklistTypeSvg></ChecklistTypeSvg>
</i>
<i className={'h-5 w-5'}>
<CheckmarkSvg></CheckmarkSvg>
</i>
<i className={'h-5 w-5'}>
<ClockSvg></ClockSvg>
</i>
<i className={'h-5 w-5'}>
<CloseSvg></CloseSvg>
</i>
<i className={'h-5 w-5'}>
<CopySvg></CopySvg>
</i>
<i className={'h-5 w-5'}>
<DateTypeSvg></DateTypeSvg>
</i>
<i className={'h-5 w-5'}>
<Details2Svg></Details2Svg>
</i>
<i className={'h-5 w-5'}>
<DocumentSvg></DocumentSvg>
</i>
<i className={'h-5 w-5'}>
<DropDownShowSvg></DropDownShowSvg>
</i>
<i className={'h-5 w-5'}>
<EarthSvg></EarthSvg>
</i>
<i className={'h-5 w-5'}>
<EditorCheckSvg></EditorCheckSvg>
</i>
<i className={'h-5 w-5'}>
<EditorUncheckSvg></EditorUncheckSvg>
</i>
<i className={'h-5 w-5'}>
<EditSvg></EditSvg>
</i>
<i className={'h-5 w-5'}>
<EyeClosedSvg></EyeClosedSvg>
</i>
<i className={'h-5 w-5'}>
<EyeOpenSvg></EyeOpenSvg>
</i>
<i className={'h-5 w-5'}>
<FilterSvg></FilterSvg>
</i>
<i className={'h-5 w-5'}>
<GridSvg></GridSvg>
</i>
<i className={'h-5 w-5'}>
<HideMenuSvg></HideMenuSvg>
</i>
<i className={'h-5 w-5'}>
<InformationSvg></InformationSvg>
</i>
<i className={'h-5 w-5'}>
<LogoutSvg></LogoutSvg>
</i>
<i className={'h-5 w-5'}>
<MoreSvg></MoreSvg>
</i>
<i className={'h-5 w-5'}>
<MultiSelectTypeSvg></MultiSelectTypeSvg>
</i>
<i className={'h-5 w-5'}>
<NumberTypeSvg></NumberTypeSvg>
</i>
<i className={'h-5 w-5'}>
<PropertiesSvg></PropertiesSvg>
</i>
<i className={'h-5 w-5'}>
<SearchSvg></SearchSvg>
</i>
<i className={'h-5 w-5'}>
<ShowMenuSvg></ShowMenuSvg>
</i>
<i className={'h-5 w-5'}>
<SingleSelectTypeSvg></SingleSelectTypeSvg>
</i>
<i className={'h-5 w-5'}>
<SkipLeftSvg></SkipLeftSvg>
</i>
<i className={'h-5 w-5'}>
<SkipRightSvg></SkipRightSvg>
</i>
<i className={'h-5 w-5'}>
<SortSvg></SortSvg>
</i>
<i className={'h-5 w-5'}>
<TextTypeSvg></TextTypeSvg>
</i>
<i className={'h-5 w-5'}>
<TrashSvg></TrashSvg>
</i>
<i className={'h-5 w-5'}>
<UrlTypeSvg></UrlTypeSvg>
</i>
</div>
</div>
<h1 className={'mb-4 text-2xl'}>Colors</h1>
<h2 className={'mb-4'}>Main</h2>
<div className={'mb-8 flex flex-wrap items-center'}>
<div className={'m-2 h-[100px] w-[100px] bg-main-accent'}></div>

2
frontend/appflowy_tauri/src/appflowy_app/components/_shared/svg/EyeClosedSvg.tsx
View File

@ -1,4 +1,4 @@
export const EyeClosed = () => {
export const EyeClosedSvg = () => {
return (
<svg width='100%' height='100%' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path

2
frontend/appflowy_tauri/src/appflowy_app/components/_shared/svg/EyeOpenSvg.tsx
View File

@ -1,4 +1,4 @@
export const EyeOpened = () => {
export const EyeOpenSvg = () => {
return (
<svg width='100%' height='100%' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path

6
frontend/appflowy_tauri/src/appflowy_app/components/auth/Login/Login.tsx
View File

@ -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 { useLogin } from './Login.hooks';
import { Link } from 'react-router-dom';
import { Button } from '../../_shared/Button';
@ -55,7 +55,7 @@ export const Login = () => {
className='absolute right-0 top-0 flex h-full w-12 items-center justify-center '
onClick={onTogglePassword}
>
<span className='h-6 w-6'>{showPassword ? <EyeClosed /> : <EyeOpened />}</span>
<span className='h-6 w-6'>{showPassword ? <EyeClosedSvg /> : <EyeOpenSvg />}</span>
</button>
</div>

8
frontend/appflowy_tauri/src/appflowy_app/components/auth/SignUp/SignUp.tsx
View File

@ -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'
>
<span className='h-6 w-6'>{showPassword ? <EyeClosed /> : <EyeOpened />}</span>
<span className='h-6 w-6'>{showPassword ? <EyeClosedSvg /> : <EyeOpenSvg />}</span>
</button>
</div>
@ -89,7 +89,7 @@ export const SignUp = () => {
onClick={onToggleConfirmPassword}
type='button'
>
<span className='h-6 w-6'>{showConfirmPassword ? <EyeClosed /> : <EyeOpened />}</span>
<span className='h-6 w-6'>{showConfirmPassword ? <EyeClosedSvg /> : <EyeOpenSvg />}</span>
</button>
</div>
</div>

4
frontend/appflowy_tauri/src/appflowy_app/components/board/Board.tsx
View File

@ -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<RowInfo>();
@ -23,7 +23,7 @@ export const Board = ({ viewId }: { viewId: string }) => {
<>
<div className='flex w-full items-center justify-between'>
<div className={'flex items-center text-xl font-semibold'}>
<div>{'Kanban'}</div>
<div>{title}</div>
<button className={'ml-2 h-5 w-5'}>
<SettingsSvg></SettingsSvg>
</button>

10
frontend/appflowy_tauri/src/appflowy_app/views/BoardPage.tsx
View File

@ -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 (
<div className='flex h-full flex-col gap-8 px-8 pt-8'>
<h1 className='text-4xl font-bold'>Board: {viewId}</h1>
{viewId?.length && <Board viewId={viewId} />}
{viewId?.length && <Board viewId={viewId} title={title} />}
</div>
);
};