toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-12-23 08:53:27 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix(core): adjust app updater button style (#8289)

Browse Source 
https://github.com/user-attachments/assets/6d6d9ff5-f3aa-466b-94f1-ce152b856cac
This commit is contained in:
JimmFly 2024-09-18 08:19:57 +00:00
parent 366c3b8784
commit 544cdd3d56
No known key found for this signature in database
GPG Key ID: 126E0320FEB0D05C
2 changed files with 25 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/frontend/core/src/components/app-sidebar/app-updater-button/index.css.ts
View File

@ -87,6 +87,7 @@ export const installLabel = style({
export const installLabelNormal = style([
installLabel,
{
justifyContent: 'flex-start',
selectors: {
[`${root}:hover &, ${root}[data-updating=true] &`]: {
display: 'none',

30
packages/frontend/core/src/components/app-sidebar/app-updater-button/index.tsx
View File

@ -3,7 +3,12 @@ import { useCatchEventCallback } from '@affine/core/components/hooks/use-catch-e
import { popupWindow } from '@affine/core/utils';
import { Unreachable } from '@affine/env/constant';
import { useI18n } from '@affine/i18n';
import { CloseIcon, NewIcon, ResetIcon } from '@blocksuite/icons/rc';
import {
CloseIcon,
DownloadIcon,
NewIcon,
ResetIcon,
} from '@blocksuite/icons/rc';
import clsx from 'clsx';
import { useCallback, useMemo } from 'react';
@ -43,11 +48,21 @@ interface ButtonContentProps {
function DownloadUpdate({ updateAvailable }: ButtonContentProps) {
const t = useI18n();
return (
<div className={styles.installLabel}>
<span className={styles.ellipsisTextOverflow}>
{t['com.affine.appUpdater.downloadUpdate']()}
</span>
<span className={styles.versionLabel}>{updateAvailable?.version}</span>
<div className={styles.updateAvailableWrapper}>
<div className={styles.installLabelNormal}>
<DownloadIcon className={styles.icon} />
<span className={styles.ellipsisTextOverflow}>
{t['com.affine.appUpdater.downloadUpdate']()}
</span>
<span className={styles.versionLabel}>{updateAvailable?.version}</span>
</div>
<div className={styles.installLabelHover}>
<DownloadIcon className={styles.icon} />
<span className={styles.ellipsisTextOverflow}>
{t['com.affine.appUpdater.downloadUpdate']()}
</span>
</div>
</div>
);
}
@ -57,6 +72,7 @@ function UpdateReady({ updateAvailable, appQuitting }: ButtonContentProps) {
return (
<div className={styles.updateAvailableWrapper}>
<div className={styles.installLabelNormal}>
<ResetIcon className={styles.icon} />
<span className={styles.ellipsisTextOverflow}>
{t['com.affine.appUpdater.updateAvailable']()}
</span>
@ -102,6 +118,7 @@ function OpenDownloadPage({ updateAvailable }: ButtonContentProps) {
return (
<>
<div className={styles.installLabelNormal}>
<DownloadIcon className={styles.icon} />
<span className={styles.ellipsisTextOverflow}>
{t['com.affine.appUpdater.updateAvailable']()}
</span>
@ -109,6 +126,7 @@ function OpenDownloadPage({ updateAvailable }: ButtonContentProps) {
</div>
<div className={styles.installLabelHover}>
<DownloadIcon className={styles.icon} />
<span className={styles.ellipsisTextOverflow}>
{t['com.affine.appUpdater.openDownloadPage']()}
</span>