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

fix: text color

Browse Source
This commit is contained in:
qinluhe 2024-07-03 15:05:11 +08:00
parent 1b69f7841c
commit e21ad18453
3 changed files with 20 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/appflowy_web_app/src/components/app/useAppThemeMode.ts
View File

@ -22,7 +22,9 @@ export function useAppThemeMode() {
setIsDark(darkModeMediaQuery.matches); setIsDark(darkModeMediaQuery.matches);
} }
if (localStorage.getItem('dark-mode') === null) {
detectColorScheme(); detectColorScheme();
}
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', detectColorScheme); window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', detectColorScheme);
return () => { return () => {

21
frontend/appflowy_web_app/src/components/editor/components/blocks/bulleted-list/BulletedListIcon.tsx
View File

@ -2,6 +2,9 @@ import { BulletedListNode } from '@/components/editor/editor.type';
import { getListLevel } from '@/components/editor/utils/list'; import { getListLevel } from '@/components/editor/utils/list';
import React, { useMemo } from 'react'; import React, { useMemo } from 'react';
import { ReactEditor, useSlateStatic } from 'slate-react'; import { ReactEditor, useSlateStatic } from 'slate-react';
import { ReactComponent as DiscIcon } from '@/assets/bulleted_list_icon_1.svg';
import { ReactComponent as CircleIcon } from '@/assets/bulleted_list_icon_2.svg';
import { ReactComponent as SquareIcon } from '@/assets/bulleted_list_icon_3.svg';
enum Letter { enum Letter {
Disc, Disc,
@ -25,7 +28,7 @@ export function BulletedListIcon({ block, className }: { block: BulletedListNode
} }
}, [block.type, staticEditor, path]); }, [block.type, staticEditor, path]);
const dataLetter = useMemo(() => { const Icon = useMemo(() => {
switch (letter) { switch (letter) {
case Letter.Disc: case Letter.Disc:
return 'disc'; return 'disc';
@ -37,12 +40,22 @@ export function BulletedListIcon({ block, className }: { block: BulletedListNode
}, [letter]); }, [letter]);
return ( return (
// <span
// onMouseDown={(e) => {
// e.preventDefault();
// }}
// contentEditable={false}
// className={`${className} bulleted-icon ${dataLetter} flex min-w-[24px] justify-center pr-1 font-medium`}
// />
<span <span
data-playwright-selected={false}
contentEditable={false}
onMouseDown={(e) => { onMouseDown={(e) => {
e.preventDefault(); e.preventDefault();
}} }}
contentEditable={false} className={`${className} cursor-pointer pr-1 text-xl hover:text-fill-default`}
className={`${className} bulleted-icon ${dataLetter} flex min-w-[24px] justify-center pr-1 font-medium`} >
/> {Icon === 'disc' ? <DiscIcon /> : Icon === 'circle' ? <CircleIcon /> : <SquareIcon />}
</span>
); );
} }

18
frontend/appflowy_web_app/src/components/editor/editor.scss
View File

@ -196,24 +196,6 @@ span[data-slate-placeholder="true"]:not(.inline-block-content) {
} }
} }
.bulleted-icon {
background-repeat: no-repeat;
background-size: 16px 16px;
background-position: center;
&.disc {
background-image: url('../../assets/bulleted_list_icon_1.svg');
}
&.circle {
background-image: url('../../assets/bulleted_list_icon_2.svg');
}
&.square {
background-image: url('../../assets/bulleted_list_icon_3.svg');
}
}
.numbered-icon { .numbered-icon {
&:after { &:after {