mirror of
https://github.com/toeverything/AFFiNE.git
synced 2024-09-20 07:57:29 +03:00
style: adjust page list header style (#3599)
This commit is contained in:
parent
45ffad45b0
commit
d9f323874d
@ -124,6 +124,7 @@ const PluginHeader = () => {
|
||||
disposes = Object.entries(headerItems).map(([id, headerItem]) => {
|
||||
const div = document.createElement('div');
|
||||
div.setAttribute('plugin-id', id);
|
||||
div.style.display = 'flex';
|
||||
const cleanup = headerItem(div);
|
||||
root.appendChild(div);
|
||||
return () => {
|
||||
@ -192,7 +193,12 @@ export const Header = forwardRef<
|
||||
data-is-edgeless={mode === 'edgeless'}
|
||||
data-is-page-list={props.currentPage === null}
|
||||
>
|
||||
<div className={styles.headerLeftSide}>
|
||||
<div
|
||||
className={clsx(styles.headerLeftSide, {
|
||||
[styles.headerLeftSideColumn]:
|
||||
isWindowsDesktop || props.currentPage === null,
|
||||
})}
|
||||
>
|
||||
<div>{!open && <SidebarSwitch />}</div>
|
||||
<div
|
||||
className={clsx(styles.headerLeftSideItem, {
|
||||
@ -207,6 +213,8 @@ export const Header = forwardRef<
|
||||
<div
|
||||
className={clsx(styles.headerRightSide, {
|
||||
[styles.headerRightSideWindow]: isWindowsDesktop,
|
||||
[styles.headerRightSideColumn]:
|
||||
isWindowsDesktop || props.currentPage === null,
|
||||
})}
|
||||
>
|
||||
<PluginHeader />
|
||||
|
@ -116,6 +116,8 @@ export const headerLeftSide = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
transition: 'all .15s',
|
||||
});
|
||||
export const headerLeftSideColumn = style({
|
||||
'@container': {
|
||||
[`${headerVanillaContainer} (max-width: 900px)`]: {
|
||||
flexDirection: 'column',
|
||||
@ -149,6 +151,9 @@ export const headerRightSide = style({
|
||||
marginLeft: '20px',
|
||||
justifyContent: 'flex-end',
|
||||
transition: 'all .15s',
|
||||
});
|
||||
|
||||
export const headerRightSideColumn = style({
|
||||
'@container': {
|
||||
[`${headerVanillaContainer} (max-width: 900px)`]: {
|
||||
position: 'absolute',
|
||||
@ -162,7 +167,6 @@ export const headerRightSide = style({
|
||||
export const headerRightSideWindow = style({
|
||||
marginRight: '140px',
|
||||
});
|
||||
|
||||
export const browserWarning = style({
|
||||
backgroundColor: 'var(--affine-background-warning-color)',
|
||||
color: 'var(--affine-warning-color)',
|
||||
|
@ -67,7 +67,7 @@ const AllPagesHead = ({
|
||||
content: t['Created'](),
|
||||
proportion: 0.1,
|
||||
tableCellStyle: {
|
||||
width: '80px',
|
||||
width: '110px',
|
||||
} satisfies CSSProperties,
|
||||
},
|
||||
{
|
||||
@ -75,7 +75,7 @@ const AllPagesHead = ({
|
||||
content: t['Updated'](),
|
||||
proportion: 0.1,
|
||||
tableCellStyle: {
|
||||
width: '80px',
|
||||
width: '110px',
|
||||
} satisfies CSSProperties,
|
||||
},
|
||||
{
|
||||
@ -90,7 +90,7 @@ const AllPagesHead = ({
|
||||
showWhen: () => !isPublicWorkspace,
|
||||
sortable: false,
|
||||
tableCellStyle: {
|
||||
width: '130px',
|
||||
width: '140px',
|
||||
} satisfies CSSProperties,
|
||||
styles: {
|
||||
justifyContent: 'flex-end',
|
||||
|
@ -20,7 +20,7 @@ export const dropdownBtn = style({
|
||||
cursor: 'pointer',
|
||||
selectors: {
|
||||
'&:hover': {
|
||||
background: 'var(--affine-hover-color)',
|
||||
background: 'var(--affine-hover-color-filled)',
|
||||
},
|
||||
},
|
||||
});
|
||||
@ -94,7 +94,7 @@ export const radioButtonGroup = style({
|
||||
display: 'inline-flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
background: 'var(--affine-hover-color)',
|
||||
background: 'var(--affine-hover-color-filled)',
|
||||
borderRadius: '10px',
|
||||
padding: '2px',
|
||||
// @ts-expect-error - fix electron drag
|
||||
|
@ -1,5 +1,6 @@
|
||||
import { IconButton, Tooltip } from '@affine/component';
|
||||
import { contentLayoutAtom } from '@affine/sdk/entry';
|
||||
import { AiIcon } from '@blocksuite/icons';
|
||||
import { useSetAtom } from 'jotai';
|
||||
import type { ReactElement } from 'react';
|
||||
import { useCallback } from 'react';
|
||||
@ -27,22 +28,7 @@ export const HeaderItem = (): ReactElement => {
|
||||
[setLayout]
|
||||
)}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="icon icon-tabler icon-tabler-brand-hipchat"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M17.802 17.292s.077 -.055 .2 -.149c1.843 -1.425 3 -3.49 3 -5.789c0 -4.286 -4.03 -7.764 -9 -7.764c-4.97 0 -9 3.478 -9 7.764c0 4.288 4.03 7.646 9 7.646c.424 0 1.12 -.028 2.088 -.084c1.262 .82 3.104 1.493 4.716 1.493c.499 0 .734 -.41 .414 -.828c-.486 -.596 -1.156 -1.551 -1.416 -2.29z"></path>
|
||||
<path d="M7.5 13.5c2.5 2.5 6.5 2.5 9 0"></path>
|
||||
</svg>
|
||||
<AiIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user