yujunjun/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2025-11-02 11:04:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: add new row cover (#6826)

Browse Source 
* fix: add new row cover

* fix: add default callout icon
This commit is contained in:
Kilu.He 2024-11-18 16:09:31 +08:00 committed by GitHub
parent 8a7cedd5b4
commit cc7476c75b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 125 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/appflowy_web_app/src/application/database-yjs/selector.ts
View File

@ -1,5 +1,5 @@
import {
FieldId,
FieldId, RowCoverType,
SortId,
YDatabase,
YDatabaseField, YDatabaseMetas, YDatabaseRow,
@ -641,7 +641,10 @@ export function usePrimaryFieldId () {
export interface RowMeta {
documentId: string;
cover: string;
cover: {
data: string,
cover_type: RowCoverType,
} | null;
icon: string;
isEmptyDocument: boolean;
}
@ -691,10 +694,10 @@ export const useRowMetaSelector = (rowId: string) => {
const metaJson = yMeta.toJSON();
const icon = metaJson[iconKey];
let cover = '';
let cover = null;
try {
cover = metaJson[coverKey] ? JSON.parse(metaJson[coverKey])?.url : '';
cover = metaJson[coverKey] ? JSON.parse(metaJson[coverKey]) : null;
} catch (e) {
// do nothing
}

7
frontend/appflowy_web_app/src/application/types.ts
View File

@ -830,6 +830,13 @@ export enum CoverType {
None = 'none',
}
export enum RowCoverType {
ColorCover = 0,
FileCover = 1,
AssetCover = 2,
GradientCover = 3,
}
export enum UIVariant {
Publish = 'publish',
App = 'app',

21
frontend/appflowy_web_app/src/assets/date.svg
View File

@ -1,14 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<g clip-path="url(#clip0_41_21)">
<path d="M13.8933 4.53334V3.49334C13.8933 2.72752 13.2725 2.10667 12.5067 2.10667H2.8C2.03417 2.10667 1.41333 2.72752 1.41333 3.49334V13.2C1.41333 13.9659 2.03411 14.5867 2.8 14.5867H5.22666"
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.4266 0.720001V3.49333" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.88 0.720001V3.49333" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1.41333 6.26666H4.88" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.4666 11.4667L10.4266 10.6347V9.03999" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round"/>
<path d="M6.26666 10.4267C6.26666 13.6291 9.73333 15.6305 12.5067 14.0293C13.7938 13.2862 14.5867 11.9129 14.5867 10.4267C14.5867 7.22426 11.12 5.22282 8.34666 6.82399C7.05954 7.56709 6.26666 8.94045 6.26666 10.4267Z"
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.00006 0.799988V2.89999" stroke="currentColor" stroke-width="1.2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.5999 0.799988V2.89999" stroke="currentColor" stroke-width="1.2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1.8501 5.76297H13.7501" stroke="currentColor" stroke-width="1.2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14.1 5.34995V11.2999C14.1 13.3999 13.05 14.7999 10.6 14.7999H5C2.55 14.7999 1.5 13.3999 1.5 11.2999V5.34995C1.5 3.24995 2.55 1.84995 5 1.84995H10.6C13.05 1.84995 14.1 3.24995 14.1 5.34995Z" stroke="currentColor" stroke-width="1.2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.0946 8.91612H5.10359" stroke="currentColor" stroke-width="1.05" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.0946 11.0839H5.10359" stroke="currentColor" stroke-width="1.05" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.69659 8.89999H7.70558" stroke="currentColor" stroke-width="1.05" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

5
frontend/appflowy_web_app/src/assets/reminder_clock.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.8332 8.83333C13.8332 12.0533 11.2198 14.6667 7.99984 14.6667C4.77984 14.6667 2.1665 12.0533 2.1665 8.83333C2.1665 5.61333 4.77984 3 7.99984 3C11.2198 3 13.8332 5.61333 13.8332 8.83333Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 5.33325V8.66659" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6 1.33325H10" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 591 B

1
frontend/appflowy_web_app/src/components/_shared/image-render/ImageRender.tsx
View File

@ -13,6 +13,7 @@ export function ImageRender({ src, ...props }: ImageRenderProps) {
const [loading, setLoading] = useState(true);
const [hasError, setHasError] = useState(false);
console.log('ImageRender', src);
return (
<>
{hasError ? (

47
frontend/appflowy_web_app/src/components/database/components/board/card/Card.tsx
View File

@ -1,6 +1,9 @@
import { DatabaseContext, useFieldsSelector, useRowMetaSelector } from '@/application/database-yjs';
import { DatabaseContext, RowMeta, useFieldsSelector, useRowMetaSelector } from '@/application/database-yjs';
import CardField from '@/components/database/components/field/CardField';
import React, { memo, useContext, useEffect, useMemo } from 'react';
import React, { memo, useCallback, useContext, useEffect, useMemo } from 'react';
import { RowCoverType } from '@/application/types';
import { renderColor } from '@/utils/color';
import ImageRender from '@/components/_shared/image-render/ImageRender';
export interface CardProps {
groupFieldId: string;
@ -45,6 +48,41 @@ export const Card = memo(({ groupFieldId, rowId, onResize, isDragging }: CardPro
return classList.join(' ');
}, [navigateToRow]);
const renderCoverImage = useCallback((cover: RowMeta["cover"]) => {
if (!cover) return null;
if (cover.cover_type === RowCoverType.GradientCover || cover.cover_type === RowCoverType.ColorCover) {
return <div
style={{
background: renderColor(cover.data),
}}
className={`h-full w-full`}
/> ;
}
let url: string | undefined = cover.data;
if (cover.cover_type === RowCoverType.AssetCover) {
url = {
1: '/covers/m_cover_image_1.png',
2: '/covers/m_cover_image_2.png',
3: '/covers/m_cover_image_3.png',
4: '/covers/m_cover_image_4.png',
5: '/covers/m_cover_image_5.png',
6: '/covers/m_cover_image_6.png',
}[Number(cover.data)]
}
if (!url) return null;
return (
<>
<ImageRender draggable={false} src={url} alt={''} className={'h-full w-full object-cover'} />
</>
);
}, []);
return (
<div
onClick={() => {
@ -60,10 +98,7 @@ export const Card = memo(({ groupFieldId, rowId, onResize, isDragging }: CardPro
<div
className={'w-full h-[100px] bg-cover bg-center'}
>
<img
className={'w-full h-full object-cover'}
src={cover}
/>
{renderCoverImage(cover)}
</div>
)}
<div className={'flex flex-col gap-2 py-2 px-3'}>

56
frontend/appflowy_web_app/src/components/database/components/header/DatabaseRowHeader.tsx
View File

@ -1,8 +1,10 @@
import { useCellSelector, usePrimaryFieldId, useRowMetaSelector } from '@/application/database-yjs';
import { AppendBreadcrumb, ViewIconType, ViewLayout } from '@/application/types';
import { RowMeta, useCellSelector, usePrimaryFieldId, useRowMetaSelector } from '@/application/database-yjs';
import { AppendBreadcrumb, RowCoverType, ViewIconType, ViewLayout } from '@/application/types';
import Title from '@/components/database/components/header/Title';
import { getScrollParent } from '@/components/global-comment/utils';
import React, { useEffect } from 'react';
import React, { useCallback, useEffect } from 'react';
import { renderColor } from '@/utils/color';
import ImageRender from '@/components/_shared/image-render/ImageRender';
function DatabaseRowHeader ({ rowId, appendBreadcrumb }: { rowId: string; appendBreadcrumb?: AppendBreadcrumb }) {
const fieldId = usePrimaryFieldId() || '';
@ -13,6 +15,40 @@ function DatabaseRowHeader ({ rowId, appendBreadcrumb }: { rowId: string; append
const meta = useRowMetaSelector(rowId);
const cover = meta?.cover;
const renderCoverImage = useCallback((cover: RowMeta["cover"]) => {
if (!cover) return null;
if (cover.cover_type === RowCoverType.GradientCover || cover.cover_type === RowCoverType.ColorCover) {
return <div
style={{
background: renderColor(cover.data),
}}
className={`h-full w-full`}
/> ;
}
let url: string | undefined = cover.data;
if (cover.cover_type === RowCoverType.AssetCover) {
url = {
1: '/covers/m_cover_image_1.png',
2: '/covers/m_cover_image_2.png',
3: '/covers/m_cover_image_3.png',
4: '/covers/m_cover_image_4.png',
5: '/covers/m_cover_image_5.png',
6: '/covers/m_cover_image_6.png',
}[Number(cover.data)]
}
if (!url) return null;
return (
<>
<ImageRender draggable={false} src={url} alt={''} className={'h-full w-full object-cover'} />
</>
);
}, []);
const cell = useCellSelector({
rowId,
fieldId,
@ -63,12 +99,16 @@ function DatabaseRowHeader ({ rowId, appendBreadcrumb }: { rowId: string; append
return <div ref={ref} className={'flex flex-col relative'}>
<div className={'row-header-cover relative'} style={{ left: offsetLeft, width }}>
{cover && <img
className={'max-h-[288px] min-h-[130px] w-full max-sm:h-[180px] object-cover'} src={cover}
alt={cell?.data as string}
/>}
{cover && <div
style={{
height: '40vh',
}}
className={'relative flex max-h-[288px] min-h-[130px] w-full max-sm:h-[180px]'}
>
{renderCoverImage(cover)}
</div>}
</div>
<Title icon={meta?.icon} name={cell?.data as string} />
<Title icon={meta?.icon} name={cell?.data as string}/>
</div>;
}

4
frontend/appflowy_web_app/src/components/editor/components/blocks/callout/CalloutIcon.tsx
View File

@ -6,8 +6,8 @@ function CalloutIcon({ node }: { node: CalloutNode }) {
return (
<>
<span contentEditable={false} ref={ref} className={`icon flex h-8 w-8 items-center p-1`}>
{node.data.icon}
<span contentEditable={false} ref={ref} className={`icon flex h-10 w-8 items-center p-1`}>
{node.data.icon || `📌`}
</span>
</>
);

10
frontend/appflowy_web_app/src/components/editor/components/leaf/mention/MentionDate.tsx
View File

@ -1,7 +1,7 @@
import { renderDate } from '@/utils/time';
import React, { useMemo } from 'react';
import { ReactComponent as DateSvg } from '@/assets/date.svg';
import { ReactComponent as ReminderSvg } from '@/assets/clock_alarm.svg';
import { ReactComponent as ReminderSvg } from '@/assets/reminder_clock.svg';
function MentionDate ({ date, reminder }: { date: string; reminder?: { id: string; option: string } }) {
const dateFormat = useMemo(() => {
@ -9,10 +9,12 @@ function MentionDate ({ date, reminder }: { date: string; reminder?: { id: strin
}, [date]);
return (
<span className={'mention-inline'}>
{reminder ? <ReminderSvg className={'mention-icon'} /> : <DateSvg className={'mention-icon'} />}
<span className={'mention-inline opacity-70'} style={{
color: reminder ? 'var(--fill-default)' : 'var(--text-title)',
}}>
<span className={'mention-content mr-[1.5em] ml-0'}><span>@</span>{dateFormat}</span>
{reminder ? <ReminderSvg className={'mention-icon right-1'} /> : <DateSvg className={'mention-icon right-1'} />}
<span className={'mention-content'}>{dateFormat}</span>
</span>
);
}