Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-11 15:16:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat!: affine cloud support (#3813)

Browse Source 
Co-authored-by: Hongtao Lye <codert.sn@gmail.com>
Co-authored-by: liuyi <forehalo@gmail.com>
Co-authored-by: LongYinan <lynweklm@gmail.com>
Co-authored-by: X1a0t <405028157@qq.com>
Co-authored-by: JimmFly <yangjinfei001@gmail.com>
Co-authored-by: Peng Xiao <pengxiao@outlook.com>
Co-authored-by: xiaodong zuo <53252747+zuoxiaodong0815@users.noreply.github.com>
Co-authored-by: DarkSky <25152247+darkskygit@users.noreply.github.com>
Co-authored-by: Qi <474021214@qq.com>
Co-authored-by: danielchim <kahungchim@gmail.com>
This commit is contained in:
Alex Yang
2023-08-29 05:07:05 -05:00
committed by GitHub
parent d0145c6f38
commit 2f6c4e3696
414 changed files with 19469 additions and 7591 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/component/src/ui/button/radio.tsx
+20 -15
View File
@@ -8,22 +8,27 @@ import { type CSSProperties, forwardRef } from 'react';
import * as styles from './styles.css';
export const RadioButton = forwardRef<HTMLButtonElement, RadioGroupItemProps>(
({ children, className, ...props }, ref) => {
return (
<RadioGroup.Item
ref={ref}
{...props}
className={clsx(styles.radioButton, className)}
export const RadioButton = forwardRef<
HTMLButtonElement,
RadioGroupItemProps & { spanStyle?: string }
>(({ children, className, spanStyle, ...props }, ref) => {
return (
<RadioGroup.Item
ref={ref}
{...props}
className={clsx(styles.radioButton, className)}
>
<span className={clsx(styles.radioUncheckedButton, spanStyle)}>
{children}
</span>
<RadioGroup.Indicator
className={clsx(styles.radioButtonContent, spanStyle)}
>
<span className={styles.radioUncheckedButton}>{children}</span>
<RadioGroup.Indicator className={styles.radioButtonContent}>
{children}
</RadioGroup.Indicator>
</RadioGroup.Item>
);
}
);
{children}
</RadioGroup.Indicator>
</RadioGroup.Item>
);
});
RadioButton.displayName = 'RadioButton';
export const RadioButtonGroup = forwardRef<
packages/component/src/ui/button/style.css.ts
+42 -28
View File
@@ -25,18 +25,24 @@ export const button = style({
'&.text-bold': {
fontWeight: 600,
},
'&:hover': {
'&:not(.without-hover):hover': {
background: 'var(--affine-hover-color)',
},
'&.disabled, &.loading': {
'&.disabled': {
opacity: '.4',
cursor: 'default',
color: 'var(--affine-disable-color)',
pointerEvents: 'none',
},
'&.disabled:hover, &.loading:hover': {
background: 'inherit',
'&.loading': {
cursor: 'default',
color: 'var(--affine-disable-color)',
pointerEvents: 'none',
},
'&.disabled:not(.without-hover):hover, &.loading:not(.without-hover):hover':
{
background: 'inherit',
},
'&.block': { display: 'flex', width: '100%' },
@@ -64,6 +70,7 @@ export const button = style({
'&.plain': {
color: 'var(--affine-text-primary-color)',
borderColor: 'transparent',
background: 'transparent',
},
'&.primary': {
@@ -72,7 +79,7 @@ export const button = style({
borderColor: 'var(--affine-black-10)',
boxShadow: 'var(--affine-button-inner-shadow)',
},
'&.primary:hover': {
'&.primary:not(.without-hover):hover': {
background:
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-primary-color)',
},
@@ -80,7 +87,7 @@ export const button = style({
opacity: '.4',
cursor: 'default',
},
'&.primary.disabled:hover': {
'&.primary.disabled:not(.without-hover):hover': {
background: 'var(--affine-primary-color)',
},
@@ -90,7 +97,7 @@ export const button = style({
borderColor: 'var(--affine-black-10)',
boxShadow: 'var(--affine-button-inner-shadow)',
},
'&.error:hover': {
'&.error:not(.without-hover):hover': {
background:
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-error-color)',
},
@@ -98,7 +105,7 @@ export const button = style({
opacity: '.4',
cursor: 'default',
},
'&.error.disabled:hover': {
'&.error.disabled:not(.without-hover):hover': {
background: 'var(--affine-error-color)',
},
@@ -108,7 +115,7 @@ export const button = style({
borderColor: 'var(--affine-black-10)',
boxShadow: 'var(--affine-button-inner-shadow)',
},
'&.warning:hover': {
'&.warning:not(.without-hover):hover': {
background:
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-warning-color)',
},
@@ -116,7 +123,7 @@ export const button = style({
opacity: '.4',
cursor: 'default',
},
'&.warning.disabled:hover': {
'&.warning.disabled:not(.without-hover):hover': {
background: 'var(--affine-warning-color)',
},
@@ -126,7 +133,7 @@ export const button = style({
borderColor: 'var(--affine-black-10)',
boxShadow: 'var(--affine-button-inner-shadow)',
},
'&.success:hover': {
'&.success:not(.without-hover):hover': {
background:
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-success-color)',
},
@@ -134,7 +141,7 @@ export const button = style({
opacity: '.4',
cursor: 'default',
},
'&.success.disabled:hover': {
'&.success.disabled:not(.without-hover):hover': {
background: 'var(--affine-success-color)',
},
@@ -144,7 +151,7 @@ export const button = style({
borderColor: 'var(--affine-black-10)',
boxShadow: 'var(--affine-button-inner-shadow)',
},
'&.processing:hover': {
'&.processing:not(.without-hover):hover': {
background:
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-processing-color)',
},
@@ -152,7 +159,7 @@ export const button = style({
opacity: '.4',
cursor: 'default',
},
'&.processing.disabled:hover': {
'&.processing.disabled:not(.without-hover):hover': {
background: 'var(--affine-processing-color)',
},
},
@@ -222,18 +229,24 @@ export const iconButton = style({
color: 'var(--affine-primary-color)',
},
'&:hover': {
'&:not(.without-hover):hover': {
background: 'var(--affine-hover-color)',
},
'&.disabled, &.loading': {
'&.disabled': {
opacity: '.4',
cursor: 'default',
color: 'var(--affine-disable-color)',
pointerEvents: 'none',
},
'&.disabled:hover, &.loading:hover': {
background: 'inherit',
'&.loading': {
cursor: 'default',
color: 'var(--affine-disable-color)',
pointerEvents: 'none',
},
'&.disabled:not(.without-hover):hover, &.loading:not(.without-hover):hover':
{
background: 'inherit',
},
// size
'&.large': {
@@ -251,6 +264,7 @@ export const iconButton = style({
'&.plain': {
color: 'var(--affine-icon-color)',
borderColor: 'transparent',
background: 'transparent',
},
'&.plain.active': {
color: 'var(--affine-primary-color)',
@@ -262,7 +276,7 @@ export const iconButton = style({
borderColor: 'var(--affine-black-10)',
boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
},
'&.primary:hover': {
'&.primary:not(.without-hover):hover': {
background:
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-primary-color)',
},
@@ -270,7 +284,7 @@ export const iconButton = style({
opacity: '.4',
cursor: 'default',
},
'&.primary.disabled:hover': {
'&.primary.disabled:not(.without-hover):hover': {
background: 'var(--affine-primary-color)',
},
@@ -280,7 +294,7 @@ export const iconButton = style({
borderColor: 'var(--affine-black-10)',
boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
},
'&.error:hover': {
'&.error:not(.without-hover):hover': {
background:
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-error-color)',
},
@@ -288,7 +302,7 @@ export const iconButton = style({
opacity: '.4',
cursor: 'default',
},
'&.error.disabled:hover': {
'&.error.disabled:not(.without-hover):hover': {
background: 'var(--affine-error-color)',
},
@@ -298,7 +312,7 @@ export const iconButton = style({
borderColor: 'var(--affine-black-10)',
boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
},
'&.warning:hover': {
'&.warning:not(.without-hover):hover': {
background:
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-warning-color)',
},
@@ -306,7 +320,7 @@ export const iconButton = style({
opacity: '.4',
cursor: 'default',
},
'&.warning.disabled:hover': {
'&.warning.disabled:not(.without-hover):hover': {
background: 'var(--affine-warning-color)',
},
@@ -316,7 +330,7 @@ export const iconButton = style({
borderColor: 'var(--affine-black-10)',
boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
},
'&.success:hover': {
'&.success:not(.without-hover):hover': {
background:
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-success-color)',
},
@@ -324,7 +338,7 @@ export const iconButton = style({
opacity: '.4',
cursor: 'default',
},
'&.success.disabled:hover': {
'&.success.disabled:not(.without-hover):hover': {
background: 'var(--affine-success-color)',
},
@@ -334,7 +348,7 @@ export const iconButton = style({
borderColor: 'var(--affine-black-10)',
boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
},
'&.processing:hover': {
'&.processing:not(.without-hover):hover': {
background:
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-processing-color)',
},
@@ -342,7 +356,7 @@ export const iconButton = style({
opacity: '.4',
cursor: 'default',
},
'&.processing.disabled:hover': {
'&.processing.disabled:not(.without-hover):hover': {
background: 'var(--affine-processing-color)',
},
},
packages/component/src/ui/button/utils.ts
+5 -4
View File
@@ -8,14 +8,14 @@ export const SIZE_CONFIG = {
[SIZE_SMALL]: {
iconSize: 16,
fontSize: 'var(--affine-font-xs)',
borderRadius: 4,
borderRadius: 8,
height: 28,
padding: 6,
padding: 12,
},
[SIZE_MIDDLE]: {
iconSize: 20,
fontSize: 'var(--affine-font-sm)',
borderRadius: 4,
borderRadius: 8,
height: 32,
padding: 12,
},
@@ -24,7 +24,7 @@ export const SIZE_CONFIG = {
fontSize: 'var(--affine-font-base)',
height: 38,
padding: 24,
borderRadius: 4,
borderRadius: 8,
},
} as const;
@@ -51,6 +51,7 @@ export const getButtonColors = (
color: 'var(--affine-white)',
borderColor: 'var(--affine-primary-color)',
backgroundBlendMode: 'overlay',
opacity: disabled ? '.4' : '1',
'.affine-button-icon': {
color: 'var(--affine-white)',
},