chore: update the style of help island in edgeless mode (#2244)

This commit is contained in:
JimmFly
2023-05-06 04:35:05 +08:00
committed by GitHub
parent 8d8119b39b
commit 1ef408c9ad
3 changed files with 12 additions and 2 deletions

View File

@@ -6,6 +6,7 @@ import { useAtom } from 'jotai';
import { lazy, Suspense, useState } from 'react';
import { openOnboardingModalAtom } from '../../../atoms';
import { useCurrentMode } from '../../../hooks/current/use-current-mode';
import { ShortcutsModal } from '../shortcuts-modal';
import { ContactIcon, HelpIcon, KeyboardIcon } from './Icons';
import {
@@ -32,6 +33,7 @@ export const HelpIsland = ({
}: {
showList?: IslandItemNames[];
}) => {
const mode = useCurrentMode();
const [, setOpenOnboarding] = useAtom(openOnboardingModalAtom);
const [spread, setShowSpread] = useState(false);
// const { triggerShortcutsModal, triggerContactModal } = useModal();
@@ -62,6 +64,7 @@ export const HelpIsland = ({
onClick={() => {
setShowSpread(!spread);
}}
inEdgelessPage={mode === 'edgeless'}
>
<StyledAnimateWrapper
style={{ height: spread ? `${showList.length * 44}px` : 0 }}

View File

@@ -2,12 +2,17 @@ import { displayFlex, positionAbsolute, styled } from '@affine/component';
export const StyledIsland = styled('div')<{
spread: boolean;
}>(({ spread }) => {
inEdgelessPage?: boolean;
}>(({ spread, inEdgelessPage }) => {
return {
transition: 'box-shadow 0.2s',
width: '44px',
position: 'relative',
boxShadow: spread ? 'var(--affine-menu-shadow)' : 'unset',
boxShadow: spread
? 'var(--affine-menu-shadow)'
: inEdgelessPage
? 'var(--affine-menu-shadow)'
: 'unset',
padding: '0 4px 44px',
borderRadius: '10px',
background: spread
@@ -15,6 +20,7 @@ export const StyledIsland = styled('div')<{
: 'var(--affine-background-primary-color)',
':hover': {
background: spread ? null : 'var(--affine-white)',
boxShadow: spread ? null : 'var(--affine-menu-shadow)',
},
'::after': {
content: '""',