Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-25 18:26:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: updater button text overflow (#2571)

Browse Source
This commit is contained in:
JimmFly
2023-05-29 18:39:47 +08:00
committed by Himself65
parent 8e6bb78bea
commit a9d417b3ce
2 changed files with 18 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/component/src/components/app-sidebar/app-updater-button/index.css.ts
View File

@@ -135,6 +135,11 @@ export const whatsNewLabel = style({
fontSize: 'var(--affine-font-sm)', fontSize: 'var(--affine-font-sm)',
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
}); });
export const ellipsisTextOverflow = style({
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
});
export const progress = style({ export const progress = style({
position: 'relative', position: 'relative',

18
packages/component/src/components/app-sidebar/app-updater-button/index.tsx
View File

@@ -106,7 +106,7 @@ export function AppUpdaterButton({ className, style }: AddPageButtonProps) {
return ( return (
<div className={clsx([styles.updateAvailableWrapper])}> <div className={clsx([styles.updateAvailableWrapper])}>
<div className={clsx([styles.installLabelNormal])}> <div className={clsx([styles.installLabelNormal])}>
<span> <span className={styles.ellipsisTextOverflow}>
{!updateReady {!updateReady
? t['com.affine.updater.downloading']() ? t['com.affine.updater.downloading']()
: t['com.affine.updater.update-available']()} : t['com.affine.updater.update-available']()}
@@ -119,7 +119,9 @@ export function AppUpdaterButton({ className, style }: AddPageButtonProps) {
{updateReady ? ( {updateReady ? (
<div className={clsx([styles.installLabelHover])}> <div className={clsx([styles.installLabelHover])}>
<ResetIcon className={styles.icon} /> <ResetIcon className={styles.icon} />
<span>{t['com.affine.updater.restart-to-update']()}</span> <span className={styles.ellipsisTextOverflow}>
{t['com.affine.updater.restart-to-update']()}
</span>
</div> </div>
) : ( ) : (
<div className={styles.progress}> <div className={styles.progress}>
@@ -137,14 +139,18 @@ export function AppUpdaterButton({ className, style }: AddPageButtonProps) {
return ( return (
<> <>
<div className={clsx([styles.installLabelNormal])}> <div className={clsx([styles.installLabelNormal])}>
<span>{t['com.affine.updater.update-available']()}</span> <span className={styles.ellipsisTextOverflow}>
{t['com.affine.updater.update-available']()}
</span>
<span className={styles.versionLabel}> <span className={styles.versionLabel}>
{updateAvailable?.version} {updateAvailable?.version}
</span> </span>
</div> </div>
<div className={clsx([styles.installLabelHover])}> <div className={clsx([styles.installLabelHover])}>
<span>{t['com.affine.updater.open-download-page']()}</span> <span className={styles.ellipsisTextOverflow}>
{t['com.affine.updater.open-download-page']()}
</span>
</div> </div>
</> </>
); );
@@ -155,7 +161,9 @@ export function AppUpdaterButton({ className, style }: AddPageButtonProps) {
<> <>
<div className={clsx([styles.whatsNewLabel])}> <div className={clsx([styles.whatsNewLabel])}>
<NewIcon className={styles.icon} /> <NewIcon className={styles.icon} />
<span>{t[`Discover what's new!`]()}</span> <span className={styles.ellipsisTextOverflow}>
{t[`Discover what's new!`]()}
</span>
</div> </div>
<div <div
className={styles.closeIcon} className={styles.closeIcon}