From 4a89b1a5dd14b13f4f9f02be4627df2ca80e83fd Mon Sep 17 00:00:00 2001 From: pengx17 Date: Mon, 19 Aug 2024 06:15:06 +0000 Subject: [PATCH] fix(electron): adjust tab styles (#7919) ![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/121ee595-99f0-43cb-be5f-ca1bdd15d6ca.png) fix AF-1261 --- .../app-tabs-header/views/app-tabs-header.tsx | 8 +- .../app-tabs-header/views/styles.css.ts | 99 ++++++++++--------- .../frontend/electron/src/main/protocol.ts | 3 +- 3 files changed, 61 insertions(+), 49 deletions(-) diff --git a/packages/frontend/core/src/modules/app-tabs-header/views/app-tabs-header.tsx b/packages/frontend/core/src/modules/app-tabs-header/views/app-tabs-header.tsx index 25aee614aa..d69c30cf8c 100644 --- a/packages/frontend/core/src/modules/app-tabs-header/views/app-tabs-header.tsx +++ b/packages/frontend/core/src/modules/app-tabs-header/views/app-tabs-header.tsx @@ -1,3 +1,4 @@ +// credits: tab overlay impl inspired by Figma desktop import { type DropTargetDropEvent, type DropTargetOptions, @@ -208,7 +209,6 @@ const WorkbenchTab = ({ data-testid="workbench-tab" data-active={tabActive} data-pinned={workbench.pinned} - data-padding-right={tabsLength > 1 && !workbench.pinned} className={styles.tab} > {workbench.views.map((view, viewIdx) => { @@ -236,7 +236,11 @@ const WorkbenchTab = ({ )} {workbench.pinned || !view.title ? null : ( -
+
1 && !workbench.pinned} + > {view.title}
)} diff --git a/packages/frontend/core/src/modules/app-tabs-header/views/styles.css.ts b/packages/frontend/core/src/modules/app-tabs-header/views/styles.css.ts index 371f178af3..e16bab0677 100644 --- a/packages/frontend/core/src/modules/app-tabs-header/views/styles.css.ts +++ b/packages/frontend/core/src/modules/app-tabs-header/views/styles.css.ts @@ -1,5 +1,9 @@ import { cssVar } from '@toeverything/theme'; -import { style } from '@vanilla-extract/css'; +import { cssVarV2 } from '@toeverything/theme/v2'; +import { createVar, style } from '@vanilla-extract/css'; + +export const tabOverlayWidth = createVar('0px'); +export const tabButtonWidth = createVar('16px'); export const root = style({ width: '100%', @@ -94,9 +98,6 @@ export const tab = style({ background: cssVar('backgroundPrimaryColor'), boxShadow: cssVar('shadow1'), }, - '&[data-padding-right="true"]': { - paddingRight: 20, - }, '&[data-pinned="true"]': { flexShrink: 0, }, @@ -115,27 +116,30 @@ export const splitViewLabel = style({ fontWeight: 500, alignItems: 'center', cursor: 'default', - ':last-of-type': { - paddingRight: 0, - }, }); -export const splitViewLabelText = style({ - minWidth: 0, - textOverflow: 'ellipsis', +export const tabCloseButtonWrapper = style({ + pointerEvents: 'none', + position: 'absolute', + right: 0, + top: 0, + bottom: 0, + height: '100%', + width: 14, overflow: 'clip', - whiteSpace: 'nowrap', - color: cssVar('textSecondaryColor'), - fontSize: cssVar('fontXs'), + display: 'flex', + alignItems: 'center', + paddingRight: 8, + justifyContent: 'flex-end', selectors: { - [`${splitViewLabel}:hover &`]: { - color: cssVar('textPrimaryColor'), + [`${tab}:is([data-active=true], :hover) &:not(:empty)`]: { + width: 40, }, - [`${splitViewLabel}[data-active="true"] &`]: { - color: cssVar('primaryColor'), + [`${tab}[data-active=true] &`]: { + background: `linear-gradient(270deg, ${cssVar('backgroundPrimaryColor')} 52.86%, rgba(255, 255, 255, 0.00) 100%)`, }, - [`${splitViewLabel}:last-of-type &`]: { - textOverflow: 'clip', + [`${tab}[data-active=false] &`]: { + background: `linear-gradient(270deg, ${cssVar('backgroundSecondaryColor')} 65.71%, rgba(244, 244, 245, 0.00) 100%)`, }, }, }); @@ -165,48 +169,51 @@ export const labelIcon = style([ }, ]); -export const tabCloseButtonWrapper = style({ - pointerEvents: 'none', - position: 'absolute', - right: 0, - top: 0, - bottom: 0, - height: '100%', - width: 24, - overflow: 'clip', - display: 'flex', - alignItems: 'center', - paddingRight: 4, - justifyContent: 'flex-end', - selectors: { - [`${tab}:is([data-active=true], :hover) &:not(:empty)`]: { - width: 40, - }, - [`${tab}[data-active=true] &`]: { - background: `linear-gradient(270deg, ${cssVar('backgroundPrimaryColor')} 52.86%, rgba(255, 255, 255, 0.00) 100%)`, - }, - [`${tab}[data-active=false] &`]: { - background: `linear-gradient(270deg, ${cssVar('backgroundSecondaryColor')} 65.71%, rgba(244, 244, 245, 0.00) 100%)`, - }, - }, -}); - export const tabCloseButton = style([ tabIcon, { pointerEvents: 'auto', width: 16, - height: '100%', + height: 16, + borderRadius: 2, display: 'none', color: cssVar('iconColor'), selectors: { [`${tab}:is([data-active=true], :hover) &`]: { display: 'flex', }, + '&:hover': { + color: cssVarV2('tab/iconColor/hover'), + background: cssVarV2('layer/background/hoverOverlay'), + }, }, }, ]); +export const splitViewLabelText = style({ + minWidth: 0, + textOverflow: 'ellipsis', + overflow: 'clip', + whiteSpace: 'nowrap', + color: cssVar('textSecondaryColor'), + fontSize: cssVar('fontXs'), + paddingRight: 4, + selectors: { + [`${splitViewLabel}:hover &`]: { + color: cssVar('textPrimaryColor'), + }, + [`${splitViewLabel}[data-active="true"] &`]: { + color: cssVar('primaryColor'), + }, + [`${splitViewLabel}:last-of-type &`]: { + textOverflow: 'clip', + }, + [`${splitViewLabel}:last-of-type [data-padding-right="true"]&`]: { + paddingRight: 20, + }, + }, +}); + export const spacer = style({ flexGrow: 1, height: '100%', diff --git a/packages/frontend/electron/src/main/protocol.ts b/packages/frontend/electron/src/main/protocol.ts index 248fedb070..b8bc02959a 100644 --- a/packages/frontend/electron/src/main/protocol.ts +++ b/packages/frontend/electron/src/main/protocol.ts @@ -105,7 +105,8 @@ export function registerProtocol() { session.defaultSession.webRequest.onBeforeSendHeaders((details, callback) => { const url = new URL(details.url); const pathname = url.pathname; - // if sending request to the cloud, attach the session cookie + // session cookies are set to file:// on production + // if sending request to the cloud, attach the session cookie (to affine cloud server) if (isNetworkResource(pathname)) { const cookie = getCookies(); if (cookie) {