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: some style

Browse Source
This commit is contained in:
Kilu 2024-06-28 12:30:22 +08:00
parent c398c0cb19
commit 07f22a9913
2 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/appflowy_web_app/src/components/publish/outline/OutlineItem.tsx
View File

@ -36,12 +36,18 @@ function OutlineItem({ view }: { view: PublishViewInfo }) {
const navigateToView = useContext(PublishContext)?.toView;
const renderItem = (item: PublishViewInfo) => {
const { icon, layout, name, view_id } = item;
const hasChildren = Boolean(item.child_views?.length);
return (
<div className={'flex h-fit w-full flex-col gap-2'}>
<div
style={{
marginLeft: hasChildren ? '0' : '1.125rem',
}}
className={'flex h-fit flex-col gap-2'}
>
<div
className={
'flex w-full items-center rounded-[8px] p-1.5 text-sm hover:bg-content-blue-50 focus:bg-content-blue-50 focus:outline-none'
'flex w-full items-center gap-0.5 rounded-[8px] p-1.5 text-sm hover:bg-content-blue-50 focus:bg-content-blue-50 focus:outline-none'
}
>
{item.child_views?.length ? getIcon() : null}
@ -63,14 +69,17 @@ function OutlineItem({ view }: { view: PublishViewInfo }) {
);
};
const hasChildren = Boolean(view.child_views?.length);
return (
<div className={'flex h-fit w-full flex-col'}>
{renderItem(view)}
<div
className={'ml-9 flex transform flex-col gap-2 transition-all'}
className={'flex transform flex-col gap-2 transition-all'}
style={{
height: isExpanded && view.child_views?.length ? 'auto' : 0,
opacity: isExpanded && view.child_views?.length ? 1 : 0,
marginLeft: hasChildren ? '1.125rem' : '2.25rem',
}}
>
{view.child_views

2
frontend/appflowy_web_app/src/styles/variables/dark.variables.css
View File

@ -19,7 +19,7 @@
--fill-toolbar: #0F111C;
--fill-selector: #232b38;
--fill-list-active: #3c4557;
--fill-list-hover: #005174;
--fill-list-hover: rgba(255, 255, 255, 0.1);
--content-blue-400: #00bcf0;
--content-blue-300: #52d1f4;
--content-blue-600: #009fd1;