mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-07-24 05:48:59 +08:00
feat(electron): audio capture permissions and settings (#11185)
fix AF-2420, AF-2391, AF-2265
This commit is contained in:
pengx17
@@ -0,0 +1,62 @@
|
||||
import type { Meta, StoryFn } from '@storybook/react';
|
||||
import { useState } from 'react';
|
||||
|
||||
import { AnimatedPlayIcon } from './animated-play-icon';
|
||||
|
||||
export default {
|
||||
title: 'UI/Audio Player/Animated Play Icon',
|
||||
component: AnimatedPlayIcon,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
'An animated icon that transitions between play, pause, and loading states.',
|
||||
},
|
||||
},
|
||||
},
|
||||
} satisfies Meta<typeof AnimatedPlayIcon>;
|
||||
|
||||
const Template: StoryFn<typeof AnimatedPlayIcon> = args => (
|
||||
<AnimatedPlayIcon {...args} />
|
||||
);
|
||||
|
||||
export const Play = Template.bind({});
|
||||
Play.args = {
|
||||
state: 'play',
|
||||
};
|
||||
|
||||
export const Pause = Template.bind({});
|
||||
Pause.args = {
|
||||
state: 'pause',
|
||||
};
|
||||
|
||||
export const Loading = Template.bind({});
|
||||
Loading.args = {
|
||||
state: 'loading',
|
||||
};
|
||||
|
||||
export const WithStateToggle: StoryFn<typeof AnimatedPlayIcon> = () => {
|
||||
const [state, setState] = useState<'play' | 'pause' | 'loading'>('play');
|
||||
|
||||
const cycleState = () => {
|
||||
setState(current => {
|
||||
switch (current) {
|
||||
case 'play':
|
||||
return 'pause';
|
||||
case 'pause':
|
||||
return 'play';
|
||||
case 'loading':
|
||||
return 'play';
|
||||
default:
|
||||
return 'play';
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
|
||||
<AnimatedPlayIcon state={state} />
|
||||
<button onClick={cycleState}>Toggle State (Current: {state})</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,71 @@
|
||||
import clsx from 'clsx';
|
||||
import { useDebouncedValue } from 'foxact/use-debounced-value';
|
||||
import type { LottieRef } from 'lottie-react';
|
||||
import Lottie from 'lottie-react';
|
||||
import { useEffect, useRef } from 'react';
|
||||
|
||||
import { Loading } from '../loading';
|
||||
import playandpause from './playandpause.json';
|
||||
import * as styles from './styles.css';
|
||||
|
||||
export interface AnimatedPlayIconProps {
|
||||
state: 'play' | 'pause' | 'loading';
|
||||
className?: string;
|
||||
onClick?: (e: React.MouseEvent) => void;
|
||||
}
|
||||
|
||||
const PlayAndPauseIcon = ({
|
||||
onClick,
|
||||
className,
|
||||
state,
|
||||
}: {
|
||||
onClick?: (e: React.MouseEvent) => void;
|
||||
className?: string;
|
||||
state: 'play' | 'pause';
|
||||
}) => {
|
||||
const lottieRef: LottieRef = useRef(null);
|
||||
const prevStateRef = useRef(state);
|
||||
|
||||
useEffect(() => {
|
||||
if (!lottieRef.current) return;
|
||||
const lottie = lottieRef.current;
|
||||
lottie.setSpeed(2);
|
||||
|
||||
// Only animate if state actually changed
|
||||
if (prevStateRef.current !== state) {
|
||||
if (state === 'play') {
|
||||
// Animate from pause to play
|
||||
lottie.playSegments([120, 160], true);
|
||||
} else {
|
||||
// Animate from play to pause
|
||||
lottie.playSegments([60, 100], true);
|
||||
}
|
||||
prevStateRef.current = state;
|
||||
}
|
||||
}, [state]);
|
||||
|
||||
return (
|
||||
<Lottie
|
||||
onClick={onClick}
|
||||
lottieRef={lottieRef}
|
||||
className={clsx(styles.root, className)}
|
||||
animationData={playandpause}
|
||||
loop={false}
|
||||
autoplay={false}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const AnimatedPlayIcon = ({
|
||||
state: _state,
|
||||
className,
|
||||
onClick,
|
||||
}: AnimatedPlayIconProps) => {
|
||||
const state = useDebouncedValue(_state, 25);
|
||||
if (state === 'loading') {
|
||||
return <Loading size={40} />;
|
||||
}
|
||||
return (
|
||||
<PlayAndPauseIcon state={state} onClick={onClick} className={className} />
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,46 @@
|
||||
import type { Meta, StoryFn } from '@storybook/react';
|
||||
import { useState } from 'react';
|
||||
|
||||
import { AnimatedTranscribeIcon } from './animated-transcribe-icon';
|
||||
|
||||
export default {
|
||||
title: 'UI/Audio Player/Animated Transcribe Icon',
|
||||
component: AnimatedTranscribeIcon,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
'An animated icon that shows transcription state with smooth transitions.',
|
||||
},
|
||||
},
|
||||
},
|
||||
} satisfies Meta<typeof AnimatedTranscribeIcon>;
|
||||
|
||||
const Template: StoryFn<typeof AnimatedTranscribeIcon> = args => (
|
||||
<AnimatedTranscribeIcon {...args} />
|
||||
);
|
||||
|
||||
export const Idle = Template.bind({});
|
||||
Idle.args = {
|
||||
state: 'idle',
|
||||
};
|
||||
|
||||
export const Transcribing = Template.bind({});
|
||||
Transcribing.args = {
|
||||
state: 'transcribing',
|
||||
};
|
||||
|
||||
export const WithStateToggle: StoryFn<typeof AnimatedTranscribeIcon> = () => {
|
||||
const [state, setState] = useState<'idle' | 'transcribing'>('idle');
|
||||
|
||||
const toggleState = () => {
|
||||
setState(current => (current === 'idle' ? 'transcribing' : 'idle'));
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
|
||||
<AnimatedTranscribeIcon state={state} />
|
||||
<button onClick={toggleState}>Toggle State (Current: {state})</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,81 @@
|
||||
import clsx from 'clsx';
|
||||
import type { LottieRef } from 'lottie-react';
|
||||
import Lottie from 'lottie-react';
|
||||
import { useEffect, useRef } from 'react';
|
||||
|
||||
import * as styles from './styles.css';
|
||||
import lottieData from './transcribe.json';
|
||||
|
||||
export interface AnimatedTranscribeIconProps {
|
||||
state: 'idle' | 'transcribing';
|
||||
className?: string;
|
||||
onClick?: (e: React.MouseEvent) => void;
|
||||
}
|
||||
|
||||
export const AnimatedTranscribeIcon = ({
|
||||
state,
|
||||
className,
|
||||
onClick,
|
||||
}: AnimatedTranscribeIconProps) => {
|
||||
const lottieRef: LottieRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!lottieRef.current) return;
|
||||
|
||||
let loopInterval: NodeJS.Timeout | null = null;
|
||||
|
||||
// Cleanup function to clear any existing intervals
|
||||
const cleanup = () => {
|
||||
const animating = !!loopInterval;
|
||||
if (loopInterval) {
|
||||
clearInterval(loopInterval);
|
||||
loopInterval = null;
|
||||
}
|
||||
const lottie = lottieRef.current;
|
||||
// Play the final segment when stopped
|
||||
if (lottie && animating) {
|
||||
lottie.goToAndPlay(lottie.animationItem?.currentFrame || 0, true);
|
||||
}
|
||||
};
|
||||
|
||||
if (state === 'transcribing') {
|
||||
// First play the transition to playing state (0-35)
|
||||
lottieRef.current.playSegments([0, 35], true);
|
||||
|
||||
// After transition, start the main loop
|
||||
const startMainLoop = () => {
|
||||
// Play the main animation segment (35-64)
|
||||
lottieRef.current?.playSegments([35, 64], true);
|
||||
|
||||
// Set up interval to continue looping
|
||||
loopInterval = setInterval(
|
||||
() => {
|
||||
if (loopInterval) {
|
||||
lottieRef.current?.playSegments([35, 64], true);
|
||||
}
|
||||
},
|
||||
(64 - 35) * (1000 / 60)
|
||||
); // 60fps
|
||||
};
|
||||
|
||||
// Start the main loop after the transition
|
||||
setTimeout(startMainLoop, 10 * (1000 / 60)); // Wait for transition to complete
|
||||
} else {
|
||||
cleanup();
|
||||
}
|
||||
|
||||
// Cleanup on unmount or when state changes
|
||||
return cleanup;
|
||||
}, [state]);
|
||||
|
||||
return (
|
||||
<Lottie
|
||||
onClick={onClick}
|
||||
lottieRef={lottieRef}
|
||||
className={clsx(styles.root, className)}
|
||||
animationData={lottieData}
|
||||
loop={false} // We're handling the loop manually
|
||||
autoplay={false} // We're controlling playback manually
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,5 @@
|
||||
export * from './animated-play-icon';
|
||||
export * from './animated-transcribe-icon';
|
||||
export * from './collections-icon';
|
||||
export * from './delete-icon';
|
||||
export * from './folder-icon';
|
||||
@@ -0,0 +1,867 @@
|
||||
{
|
||||
"v": "5.12.1",
|
||||
"fr": 60,
|
||||
"ip": 0,
|
||||
"op": 161,
|
||||
"w": 40,
|
||||
"h": 40,
|
||||
"nm": "pause to play",
|
||||
"ddd": 0,
|
||||
"assets": [],
|
||||
"layers": [
|
||||
{
|
||||
"ddd": 0,
|
||||
"ind": 1,
|
||||
"ty": 3,
|
||||
"nm": "Void::Icon (Stroke)",
|
||||
"sr": 1,
|
||||
"ks": {
|
||||
"o": { "a": 0, "k": 100, "ix": 11 },
|
||||
"r": { "a": 0, "k": 0, "ix": 10 },
|
||||
"p": { "a": 0, "k": [21.125, 20, 0], "ix": 2, "l": 2 },
|
||||
"a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 },
|
||||
"s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 }
|
||||
},
|
||||
"ao": 0,
|
||||
"ef": [
|
||||
{
|
||||
"ty": 5,
|
||||
"nm": "Void",
|
||||
"np": 19,
|
||||
"mn": "Pseudo/250958",
|
||||
"ix": 1,
|
||||
"en": 1,
|
||||
"ef": [
|
||||
{
|
||||
"ty": 0,
|
||||
"nm": "Width",
|
||||
"mn": "Pseudo/250958-0001",
|
||||
"ix": 1,
|
||||
"v": { "a": 0, "k": 100, "ix": 1 }
|
||||
},
|
||||
{
|
||||
"ty": 0,
|
||||
"nm": "Height",
|
||||
"mn": "Pseudo/250958-0002",
|
||||
"ix": 2,
|
||||
"v": { "a": 0, "k": 100, "ix": 2 }
|
||||
},
|
||||
{
|
||||
"ty": 0,
|
||||
"nm": "Offset X",
|
||||
"mn": "Pseudo/250958-0003",
|
||||
"ix": 3,
|
||||
"v": { "a": 0, "k": 0, "ix": 3 }
|
||||
},
|
||||
{
|
||||
"ty": 0,
|
||||
"nm": "Offset Y",
|
||||
"mn": "Pseudo/250958-0004",
|
||||
"ix": 4,
|
||||
"v": { "a": 0, "k": 0, "ix": 4 }
|
||||
},
|
||||
{
|
||||
"ty": 0,
|
||||
"nm": "Roundness",
|
||||
"mn": "Pseudo/250958-0005",
|
||||
"ix": 5,
|
||||
"v": { "a": 0, "k": 0, "ix": 5 }
|
||||
},
|
||||
{
|
||||
"ty": 6,
|
||||
"nm": "About",
|
||||
"mn": "Pseudo/250958-0006",
|
||||
"ix": 6,
|
||||
"v": 0
|
||||
},
|
||||
{
|
||||
"ty": 6,
|
||||
"nm": "Plague of null layers.",
|
||||
"mn": "Pseudo/250958-0007",
|
||||
"ix": 7,
|
||||
"v": 0
|
||||
},
|
||||
{
|
||||
"ty": 6,
|
||||
"nm": "Void",
|
||||
"mn": "Pseudo/250958-0008",
|
||||
"ix": 8,
|
||||
"v": 0
|
||||
},
|
||||
{
|
||||
"ty": 6,
|
||||
"nm": "Following projects",
|
||||
"mn": "Pseudo/250958-0009",
|
||||
"ix": 9,
|
||||
"v": 0
|
||||
},
|
||||
{
|
||||
"ty": 6,
|
||||
"nm": "Void",
|
||||
"mn": "Pseudo/250958-0010",
|
||||
"ix": 10,
|
||||
"v": 0
|
||||
},
|
||||
{
|
||||
"ty": 6,
|
||||
"nm": "through time.",
|
||||
"mn": "Pseudo/250958-0011",
|
||||
"ix": 11,
|
||||
"v": 0
|
||||
},
|
||||
{
|
||||
"ty": 6,
|
||||
"nm": "Void",
|
||||
"mn": "Pseudo/250958-0012",
|
||||
"ix": 12,
|
||||
"v": 0
|
||||
},
|
||||
{
|
||||
"ty": 6,
|
||||
"nm": "Be free of the past.",
|
||||
"mn": "Pseudo/250958-0013",
|
||||
"ix": 13,
|
||||
"v": 0
|
||||
},
|
||||
{
|
||||
"ty": 6,
|
||||
"nm": "Void",
|
||||
"mn": "Pseudo/250958-0014",
|
||||
"ix": 14,
|
||||
"v": 0
|
||||
},
|
||||
{
|
||||
"ty": 6,
|
||||
"nm": "Copyright 2023 Battle Axe Inc",
|
||||
"mn": "Pseudo/250958-0015",
|
||||
"ix": 15,
|
||||
"v": 0
|
||||
},
|
||||
{
|
||||
"ty": 6,
|
||||
"nm": "Void",
|
||||
"mn": "Pseudo/250958-0016",
|
||||
"ix": 16,
|
||||
"v": 0
|
||||
},
|
||||
{
|
||||
"ty": 6,
|
||||
"nm": "Void",
|
||||
"mn": "Pseudo/250958-0017",
|
||||
"ix": 17,
|
||||
"v": 0
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"ip": 0,
|
||||
"op": 5400,
|
||||
"st": 0,
|
||||
"ct": 1,
|
||||
"bm": 0
|
||||
},
|
||||
{
|
||||
"ddd": 0,
|
||||
"ind": 2,
|
||||
"ty": 4,
|
||||
"nm": "Icon (Stroke)",
|
||||
"parent": 1,
|
||||
"sr": 1,
|
||||
"ks": {
|
||||
"o": {
|
||||
"a": 1,
|
||||
"k": [
|
||||
{
|
||||
"i": { "x": [0.48], "y": [1] },
|
||||
"o": { "x": [0.26], "y": [1] },
|
||||
"t": 60,
|
||||
"s": [100]
|
||||
},
|
||||
{
|
||||
"i": { "x": [0.833], "y": [1] },
|
||||
"o": { "x": [0.26], "y": [0] },
|
||||
"t": 90,
|
||||
"s": [0]
|
||||
},
|
||||
{
|
||||
"i": { "x": [0.833], "y": [1] },
|
||||
"o": { "x": [0.167], "y": [0] },
|
||||
"t": 120,
|
||||
"s": [0]
|
||||
},
|
||||
{ "t": 142, "s": [100] }
|
||||
],
|
||||
"ix": 11
|
||||
},
|
||||
"r": { "a": 0, "k": 0, "ix": 10 },
|
||||
"p": { "a": 0, "k": [0, 0, 0], "ix": 2, "l": 2 },
|
||||
"a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 },
|
||||
"s": {
|
||||
"a": 1,
|
||||
"k": [
|
||||
{
|
||||
"i": { "x": [0.48, 0.48, 0.48], "y": [1, 1, 1] },
|
||||
"o": { "x": [0.26, 0.26, 0.26], "y": [1, 1, 0] },
|
||||
"t": 60,
|
||||
"s": [100, 100, 100]
|
||||
},
|
||||
{
|
||||
"i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 1] },
|
||||
"o": { "x": [0.26, 0.26, 0.26], "y": [0, 0, 0] },
|
||||
"t": 90,
|
||||
"s": [32, 32, 100]
|
||||
},
|
||||
{
|
||||
"i": { "x": [0.64, 0.64, 0.64], "y": [1, 1, 1] },
|
||||
"o": { "x": [0.33, 0.33, 0.33], "y": [0.52, 0.52, 0] },
|
||||
"t": 120,
|
||||
"s": [43, 43, 100]
|
||||
},
|
||||
{
|
||||
"i": { "x": [0.6, 0.6, 0.6], "y": [1, 1, 1] },
|
||||
"o": { "x": [0.32, 0.32, 0.32], "y": [0.999, 0.999, 0] },
|
||||
"t": 143,
|
||||
"s": [115, 115, 100]
|
||||
},
|
||||
{ "t": 160, "s": [100, 100, 100] }
|
||||
],
|
||||
"ix": 6,
|
||||
"l": 2
|
||||
}
|
||||
},
|
||||
"ao": 0,
|
||||
"shapes": [
|
||||
{
|
||||
"ty": "gr",
|
||||
"it": [
|
||||
{
|
||||
"ind": 0,
|
||||
"ty": "sh",
|
||||
"ix": 1,
|
||||
"ks": {
|
||||
"a": 0,
|
||||
"k": {
|
||||
"i": [
|
||||
[0.782, 0.44],
|
||||
[0, 0],
|
||||
[0.504, 0.225],
|
||||
[0.525, -0.059],
|
||||
[0.453, -0.629],
|
||||
[0.051, -0.554],
|
||||
[0, -0.867],
|
||||
[0, 0],
|
||||
[-0.05, -0.55],
|
||||
[-0.309, -0.428],
|
||||
[-0.77, -0.087],
|
||||
[-0.508, 0.227],
|
||||
[-0.756, 0.425],
|
||||
[0, 0],
|
||||
[-0.468, 0.323],
|
||||
[-0.221, 0.491],
|
||||
[0.324, 0.718],
|
||||
[0.47, 0.324]
|
||||
],
|
||||
"o": [
|
||||
[0, 0],
|
||||
[-0.756, -0.425],
|
||||
[-0.508, -0.227],
|
||||
[-0.77, 0.087],
|
||||
[-0.309, 0.428],
|
||||
[-0.05, 0.55],
|
||||
[0, 0],
|
||||
[0, 0.867],
|
||||
[0.051, 0.554],
|
||||
[0.453, 0.629],
|
||||
[0.525, 0.059],
|
||||
[0.504, -0.225],
|
||||
[0, 0],
|
||||
[0.782, -0.44],
|
||||
[0.47, -0.324],
|
||||
[0.324, -0.718],
|
||||
[-0.221, -0.491],
|
||||
[-0.468, -0.323]
|
||||
],
|
||||
"v": [
|
||||
[4.482, -3.424],
|
||||
[-1.857, -6.99],
|
||||
[-3.729, -7.985],
|
||||
[-5.269, -8.313],
|
||||
[-7.19, -7.189],
|
||||
[-7.66, -5.686],
|
||||
[-7.71, -3.566],
|
||||
[-7.71, 3.566],
|
||||
[-7.66, 5.686],
|
||||
[-7.19, 7.189],
|
||||
[-5.269, 8.313],
|
||||
[-3.729, 7.985],
|
||||
[-1.857, 6.99],
|
||||
[4.482, 3.424],
|
||||
[6.365, 2.305],
|
||||
[7.467, 1.13],
|
||||
[7.467, -1.13],
|
||||
[6.365, -2.305]
|
||||
],
|
||||
"c": true
|
||||
},
|
||||
"ix": 2
|
||||
},
|
||||
"nm": "路径 1",
|
||||
"mn": "ADBE Vector Shape - Group",
|
||||
"hd": false
|
||||
},
|
||||
{
|
||||
"ty": "fl",
|
||||
"c": {
|
||||
"a": 0,
|
||||
"k": [0.478431373835, 0.478431373835, 0.478431373835, 1],
|
||||
"ix": 4
|
||||
},
|
||||
"o": { "a": 0, "k": 100, "ix": 5 },
|
||||
"r": 1,
|
||||
"bm": 0,
|
||||
"nm": "填充 1",
|
||||
"mn": "ADBE Vector Graphic - Fill",
|
||||
"hd": false
|
||||
},
|
||||
{
|
||||
"ty": "tr",
|
||||
"p": { "a": 0, "k": [0, 0], "ix": 2 },
|
||||
"a": { "a": 0, "k": [0, 0], "ix": 1 },
|
||||
"s": { "a": 0, "k": [100, 100], "ix": 3 },
|
||||
"r": { "a": 0, "k": 0, "ix": 6 },
|
||||
"o": { "a": 0, "k": 100, "ix": 7 },
|
||||
"sk": { "a": 0, "k": 0, "ix": 4 },
|
||||
"sa": { "a": 0, "k": 0, "ix": 5 },
|
||||
"nm": "变换"
|
||||
}
|
||||
],
|
||||
"nm": "Icon (Stroke)",
|
||||
"np": 2,
|
||||
"cix": 2,
|
||||
"bm": 0,
|
||||
"ix": 1,
|
||||
"mn": "ADBE Vector Group",
|
||||
"hd": false
|
||||
}
|
||||
],
|
||||
"ip": 0,
|
||||
"op": 5400,
|
||||
"st": 0,
|
||||
"ct": 1,
|
||||
"bm": 0
|
||||
},
|
||||
{
|
||||
"ddd": 0,
|
||||
"ind": 3,
|
||||
"ty": 4,
|
||||
"nm": "Union",
|
||||
"sr": 1,
|
||||
"ks": {
|
||||
"o": {
|
||||
"a": 1,
|
||||
"k": [
|
||||
{
|
||||
"i": { "x": [0.833], "y": [0.833] },
|
||||
"o": { "x": [0.167], "y": [0.167] },
|
||||
"t": 60,
|
||||
"s": [0]
|
||||
},
|
||||
{
|
||||
"i": { "x": [0.833], "y": [0.833] },
|
||||
"o": { "x": [0.167], "y": [0.167] },
|
||||
"t": 83,
|
||||
"s": [100]
|
||||
},
|
||||
{
|
||||
"i": { "x": [0.6], "y": [1] },
|
||||
"o": { "x": [0.32], "y": [0.94] },
|
||||
"t": 120,
|
||||
"s": [100]
|
||||
},
|
||||
{ "t": 150, "s": [0] }
|
||||
],
|
||||
"ix": 11
|
||||
},
|
||||
"r": { "a": 0, "k": 0, "ix": 10 },
|
||||
"p": { "a": 0, "k": [20, 20, 0], "ix": 2, "l": 2 },
|
||||
"a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 },
|
||||
"s": {
|
||||
"a": 1,
|
||||
"k": [
|
||||
{
|
||||
"i": { "x": [0.64, 0.64, 0.64], "y": [1, 1, 1] },
|
||||
"o": { "x": [0.33, 0.33, 0.33], "y": [0.52, 0.52, 0] },
|
||||
"t": 60,
|
||||
"s": [43, 43, 100]
|
||||
},
|
||||
{
|
||||
"i": { "x": [0.6, 0.6, 0.6], "y": [1, 1, 1] },
|
||||
"o": { "x": [0.32, 0.32, 0.32], "y": [0.999, 0.999, 0] },
|
||||
"t": 83,
|
||||
"s": [115, 115, 100]
|
||||
},
|
||||
{
|
||||
"i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] },
|
||||
"o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] },
|
||||
"t": 100,
|
||||
"s": [100, 100, 100]
|
||||
},
|
||||
{
|
||||
"i": { "x": [0.6, 0.6, 0.6], "y": [1, 1, 1] },
|
||||
"o": { "x": [0.32, 0.32, 0.32], "y": [0.94, 0.94, 0] },
|
||||
"t": 120,
|
||||
"s": [100, 100, 100]
|
||||
},
|
||||
{ "t": 150, "s": [39, 39, 100] }
|
||||
],
|
||||
"ix": 6,
|
||||
"l": 2
|
||||
}
|
||||
},
|
||||
"ao": 0,
|
||||
"shapes": [
|
||||
{
|
||||
"ty": "gr",
|
||||
"it": [
|
||||
{
|
||||
"ind": 0,
|
||||
"ty": "sh",
|
||||
"ix": 1,
|
||||
"ks": {
|
||||
"a": 0,
|
||||
"k": {
|
||||
"i": [
|
||||
[0, 0],
|
||||
[0.849, 0],
|
||||
[0, -0.849],
|
||||
[0, 0],
|
||||
[-0.849, 0],
|
||||
[0, 0.849]
|
||||
],
|
||||
"o": [
|
||||
[0, -0.849],
|
||||
[-0.849, 0],
|
||||
[0, 0],
|
||||
[0, 0.849],
|
||||
[0.849, 0],
|
||||
[0, 0]
|
||||
],
|
||||
"v": [
|
||||
[-2.563, -6.152],
|
||||
[-4.101, -7.69],
|
||||
[-5.639, -6.152],
|
||||
[-5.639, 6.152],
|
||||
[-4.101, 7.69],
|
||||
[-2.563, 6.152]
|
||||
],
|
||||
"c": true
|
||||
},
|
||||
"ix": 2
|
||||
},
|
||||
"nm": "路径 1",
|
||||
"mn": "ADBE Vector Shape - Group",
|
||||
"hd": false
|
||||
},
|
||||
{
|
||||
"ty": "mm",
|
||||
"mm": 5,
|
||||
"nm": "合并路径 1",
|
||||
"mn": "ADBE Vector Filter - Merge",
|
||||
"hd": false
|
||||
},
|
||||
{
|
||||
"ind": 2,
|
||||
"ty": "sh",
|
||||
"ix": 3,
|
||||
"ks": {
|
||||
"a": 0,
|
||||
"k": {
|
||||
"i": [
|
||||
[-0.849, 0],
|
||||
[0, -0.849],
|
||||
[0, 0],
|
||||
[0.849, 0],
|
||||
[0, 0.849],
|
||||
[0, 0]
|
||||
],
|
||||
"o": [
|
||||
[0.849, 0],
|
||||
[0, 0],
|
||||
[0, 0.849],
|
||||
[-0.849, 0],
|
||||
[0, 0],
|
||||
[0, -0.849]
|
||||
],
|
||||
"v": [
|
||||
[4.101, -7.69],
|
||||
[5.639, -6.152],
|
||||
[5.639, 6.152],
|
||||
[4.101, 7.69],
|
||||
[2.563, 6.152],
|
||||
[2.563, -6.152]
|
||||
],
|
||||
"c": true
|
||||
},
|
||||
"ix": 2
|
||||
},
|
||||
"nm": "路径 2",
|
||||
"mn": "ADBE Vector Shape - Group",
|
||||
"hd": false
|
||||
},
|
||||
{
|
||||
"ty": "mm",
|
||||
"mm": 5,
|
||||
"nm": "合并路径 2",
|
||||
"mn": "ADBE Vector Filter - Merge",
|
||||
"hd": false
|
||||
},
|
||||
{
|
||||
"ty": "fl",
|
||||
"c": {
|
||||
"a": 0,
|
||||
"k": [0.478431373835, 0.478431373835, 0.478431373835, 1],
|
||||
"ix": 4
|
||||
},
|
||||
"o": { "a": 0, "k": 100, "ix": 5 },
|
||||
"r": 1,
|
||||
"bm": 0,
|
||||
"nm": "填充 1",
|
||||
"mn": "ADBE Vector Graphic - Fill",
|
||||
"hd": false
|
||||
},
|
||||
{
|
||||
"ty": "tr",
|
||||
"p": { "a": 0, "k": [0, 0], "ix": 2 },
|
||||
"a": { "a": 0, "k": [0, 0], "ix": 1 },
|
||||
"s": { "a": 0, "k": [100, 100], "ix": 3 },
|
||||
"r": { "a": 0, "k": 0, "ix": 6 },
|
||||
"o": { "a": 0, "k": 100, "ix": 7 },
|
||||
"sk": { "a": 0, "k": 0, "ix": 4 },
|
||||
"sa": { "a": 0, "k": 0, "ix": 5 },
|
||||
"nm": "变换"
|
||||
}
|
||||
],
|
||||
"nm": "Union",
|
||||
"np": 5,
|
||||
"cix": 2,
|
||||
"bm": 0,
|
||||
"ix": 1,
|
||||
"mn": "ADBE Vector Group",
|
||||
"hd": false
|
||||
}
|
||||
],
|
||||
"ip": 0,
|
||||
"op": 5400,
|
||||
"st": 0,
|
||||
"ct": 1,
|
||||
"bm": 0
|
||||
},
|
||||
{
|
||||
"ddd": 0,
|
||||
"ind": 4,
|
||||
"ty": 4,
|
||||
"nm": "wave",
|
||||
"sr": 1,
|
||||
"ks": {
|
||||
"o": {
|
||||
"a": 1,
|
||||
"k": [
|
||||
{
|
||||
"i": { "x": [0.833], "y": [0.833] },
|
||||
"o": { "x": [0.167], "y": [0.167] },
|
||||
"t": 133,
|
||||
"s": [100]
|
||||
},
|
||||
{ "t": 145, "s": [0] }
|
||||
],
|
||||
"ix": 11
|
||||
},
|
||||
"r": { "a": 0, "k": 0, "ix": 10 },
|
||||
"p": { "a": 0, "k": [20.52, 20.457, 0], "ix": 2, "l": 2 },
|
||||
"a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 },
|
||||
"s": {
|
||||
"a": 1,
|
||||
"k": [
|
||||
{
|
||||
"i": { "x": [0.6, 0.6, 0.6], "y": [1, 1, 1] },
|
||||
"o": { "x": [0.32, 0.32, 0.32], "y": [0.94, 0.94, 0] },
|
||||
"t": 120,
|
||||
"s": [12, 12, 100]
|
||||
},
|
||||
{ "t": 145, "s": [100, 100, 100] }
|
||||
],
|
||||
"ix": 6,
|
||||
"l": 2
|
||||
}
|
||||
},
|
||||
"ao": 0,
|
||||
"shapes": [
|
||||
{
|
||||
"ty": "gr",
|
||||
"it": [
|
||||
{
|
||||
"d": 1,
|
||||
"ty": "el",
|
||||
"s": { "a": 0, "k": [40, 40], "ix": 2 },
|
||||
"p": { "a": 0, "k": [0, 0], "ix": 3 },
|
||||
"nm": "椭圆路径 1",
|
||||
"mn": "ADBE Vector Shape - Ellipse",
|
||||
"hd": false
|
||||
},
|
||||
{
|
||||
"ty": "st",
|
||||
"c": {
|
||||
"a": 0,
|
||||
"k": [0.960784316063, 0.960784316063, 0.960784316063, 1],
|
||||
"ix": 3
|
||||
},
|
||||
"o": { "a": 0, "k": 100, "ix": 4 },
|
||||
"w": { "a": 0, "k": 0, "ix": 5 },
|
||||
"lc": 1,
|
||||
"lj": 1,
|
||||
"ml": 4,
|
||||
"bm": 0,
|
||||
"nm": "描边 1",
|
||||
"mn": "ADBE Vector Graphic - Stroke",
|
||||
"hd": false
|
||||
},
|
||||
{
|
||||
"ty": "fl",
|
||||
"c": {
|
||||
"a": 0,
|
||||
"k": [0.936106004902, 0.936106004902, 0.936106004902, 1],
|
||||
"ix": 4
|
||||
},
|
||||
"o": { "a": 0, "k": 100, "ix": 5 },
|
||||
"r": 1,
|
||||
"bm": 0,
|
||||
"nm": "填充 1",
|
||||
"mn": "ADBE Vector Graphic - Fill",
|
||||
"hd": false
|
||||
},
|
||||
{
|
||||
"ty": "tr",
|
||||
"p": { "a": 0, "k": [-0.52, -0.457], "ix": 2 },
|
||||
"a": { "a": 0, "k": [0, 0], "ix": 1 },
|
||||
"s": { "a": 0, "k": [100, 100], "ix": 3 },
|
||||
"r": { "a": 0, "k": 0, "ix": 6 },
|
||||
"o": { "a": 0, "k": 100, "ix": 7 },
|
||||
"sk": { "a": 0, "k": 0, "ix": 4 },
|
||||
"sa": { "a": 0, "k": 0, "ix": 5 },
|
||||
"nm": "变换"
|
||||
}
|
||||
],
|
||||
"nm": "椭圆 1",
|
||||
"np": 3,
|
||||
"cix": 2,
|
||||
"bm": 0,
|
||||
"ix": 1,
|
||||
"mn": "ADBE Vector Group",
|
||||
"hd": false
|
||||
}
|
||||
],
|
||||
"ip": 120,
|
||||
"op": 161,
|
||||
"st": 60,
|
||||
"ct": 1,
|
||||
"bm": 0
|
||||
},
|
||||
{
|
||||
"ddd": 0,
|
||||
"ind": 5,
|
||||
"ty": 4,
|
||||
"nm": "wave",
|
||||
"sr": 1,
|
||||
"ks": {
|
||||
"o": {
|
||||
"a": 1,
|
||||
"k": [
|
||||
{
|
||||
"i": { "x": [0.833], "y": [0.833] },
|
||||
"o": { "x": [0.167], "y": [0.167] },
|
||||
"t": 73,
|
||||
"s": [100]
|
||||
},
|
||||
{ "t": 85, "s": [0] }
|
||||
],
|
||||
"ix": 11
|
||||
},
|
||||
"r": { "a": 0, "k": 0, "ix": 10 },
|
||||
"p": { "a": 0, "k": [20.52, 20.457, 0], "ix": 2, "l": 2 },
|
||||
"a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 },
|
||||
"s": {
|
||||
"a": 1,
|
||||
"k": [
|
||||
{
|
||||
"i": { "x": [0.6, 0.6, 0.6], "y": [1, 1, 1] },
|
||||
"o": { "x": [0.32, 0.32, 0.32], "y": [0.94, 0.94, 0] },
|
||||
"t": 60,
|
||||
"s": [12, 12, 100]
|
||||
},
|
||||
{ "t": 85, "s": [100, 100, 100] }
|
||||
],
|
||||
"ix": 6,
|
||||
"l": 2
|
||||
}
|
||||
},
|
||||
"ao": 0,
|
||||
"shapes": [
|
||||
{
|
||||
"ty": "gr",
|
||||
"it": [
|
||||
{
|
||||
"d": 1,
|
||||
"ty": "el",
|
||||
"s": { "a": 0, "k": [40, 40], "ix": 2 },
|
||||
"p": { "a": 0, "k": [0, 0], "ix": 3 },
|
||||
"nm": "椭圆路径 1",
|
||||
"mn": "ADBE Vector Shape - Ellipse",
|
||||
"hd": false
|
||||
},
|
||||
{
|
||||
"ty": "st",
|
||||
"c": {
|
||||
"a": 0,
|
||||
"k": [0.960784316063, 0.960784316063, 0.960784316063, 1],
|
||||
"ix": 3
|
||||
},
|
||||
"o": { "a": 0, "k": 100, "ix": 4 },
|
||||
"w": { "a": 0, "k": 0, "ix": 5 },
|
||||
"lc": 1,
|
||||
"lj": 1,
|
||||
"ml": 4,
|
||||
"bm": 0,
|
||||
"nm": "描边 1",
|
||||
"mn": "ADBE Vector Graphic - Stroke",
|
||||
"hd": false
|
||||
},
|
||||
{
|
||||
"ty": "fl",
|
||||
"c": {
|
||||
"a": 0,
|
||||
"k": [0.936106004902, 0.936106004902, 0.936106004902, 1],
|
||||
"ix": 4
|
||||
},
|
||||
"o": { "a": 0, "k": 100, "ix": 5 },
|
||||
"r": 1,
|
||||
"bm": 0,
|
||||
"nm": "填充 1",
|
||||
"mn": "ADBE Vector Graphic - Fill",
|
||||
"hd": false
|
||||
},
|
||||
{
|
||||
"ty": "tr",
|
||||
"p": { "a": 0, "k": [-0.52, -0.457], "ix": 2 },
|
||||
"a": { "a": 0, "k": [0, 0], "ix": 1 },
|
||||
"s": { "a": 0, "k": [100, 100], "ix": 3 },
|
||||
"r": { "a": 0, "k": 0, "ix": 6 },
|
||||
"o": { "a": 0, "k": 100, "ix": 7 },
|
||||
"sk": { "a": 0, "k": 0, "ix": 4 },
|
||||
"sa": { "a": 0, "k": 0, "ix": 5 },
|
||||
"nm": "变换"
|
||||
}
|
||||
],
|
||||
"nm": "椭圆 1",
|
||||
"np": 3,
|
||||
"cix": 2,
|
||||
"bm": 0,
|
||||
"ix": 1,
|
||||
"mn": "ADBE Vector Group",
|
||||
"hd": false
|
||||
}
|
||||
],
|
||||
"ip": 0,
|
||||
"op": 101,
|
||||
"st": 0,
|
||||
"ct": 1,
|
||||
"bm": 0
|
||||
},
|
||||
{
|
||||
"ddd": 0,
|
||||
"ind": 6,
|
||||
"ty": 4,
|
||||
"nm": "circle",
|
||||
"sr": 1,
|
||||
"ks": {
|
||||
"o": { "a": 0, "k": 100, "ix": 11 },
|
||||
"r": { "a": 0, "k": 0, "ix": 10 },
|
||||
"p": { "a": 0, "k": [20.52, 20.457, 0], "ix": 2, "l": 2 },
|
||||
"a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 },
|
||||
"s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 }
|
||||
},
|
||||
"ao": 0,
|
||||
"shapes": [
|
||||
{
|
||||
"ty": "gr",
|
||||
"it": [
|
||||
{
|
||||
"d": 1,
|
||||
"ty": "el",
|
||||
"s": { "a": 0, "k": [40, 40], "ix": 2 },
|
||||
"p": { "a": 0, "k": [0, 0], "ix": 3 },
|
||||
"nm": "椭圆路径 1",
|
||||
"mn": "ADBE Vector Shape - Ellipse",
|
||||
"hd": false
|
||||
},
|
||||
{
|
||||
"ty": "st",
|
||||
"c": {
|
||||
"a": 0,
|
||||
"k": [0.960784316063, 0.960784316063, 0.960784316063, 1],
|
||||
"ix": 3
|
||||
},
|
||||
"o": { "a": 0, "k": 100, "ix": 4 },
|
||||
"w": { "a": 0, "k": 0, "ix": 5 },
|
||||
"lc": 1,
|
||||
"lj": 1,
|
||||
"ml": 4,
|
||||
"bm": 0,
|
||||
"nm": "描边 1",
|
||||
"mn": "ADBE Vector Graphic - Stroke",
|
||||
"hd": false
|
||||
},
|
||||
{
|
||||
"ty": "fl",
|
||||
"c": {
|
||||
"a": 0,
|
||||
"k": [0.960784316063, 0.960784316063, 0.960784316063, 1],
|
||||
"ix": 4
|
||||
},
|
||||
"o": { "a": 0, "k": 100, "ix": 5 },
|
||||
"r": 1,
|
||||
"bm": 0,
|
||||
"nm": "填充 1",
|
||||
"mn": "ADBE Vector Graphic - Fill",
|
||||
"hd": false
|
||||
},
|
||||
{
|
||||
"ty": "tr",
|
||||
"p": { "a": 0, "k": [-0.52, -0.457], "ix": 2 },
|
||||
"a": { "a": 0, "k": [0, 0], "ix": 1 },
|
||||
"s": { "a": 0, "k": [100, 100], "ix": 3 },
|
||||
"r": { "a": 0, "k": 0, "ix": 6 },
|
||||
"o": { "a": 0, "k": 100, "ix": 7 },
|
||||
"sk": { "a": 0, "k": 0, "ix": 4 },
|
||||
"sa": { "a": 0, "k": 0, "ix": 5 },
|
||||
"nm": "变换"
|
||||
}
|
||||
],
|
||||
"nm": "椭圆 1",
|
||||
"np": 3,
|
||||
"cix": 2,
|
||||
"bm": 0,
|
||||
"ix": 1,
|
||||
"mn": "ADBE Vector Group",
|
||||
"hd": false
|
||||
}
|
||||
],
|
||||
"ip": 0,
|
||||
"op": 5400,
|
||||
"st": 0,
|
||||
"ct": 1,
|
||||
"bm": 0
|
||||
}
|
||||
],
|
||||
"markers": [],
|
||||
"props": {}
|
||||
}
|
||||
@@ -1,15 +1,61 @@
|
||||
import { cssVarV2 } from '@toeverything/theme/v2';
|
||||
import { globalStyle, style } from '@vanilla-extract/css';
|
||||
export const root = style({
|
||||
width: '1em',
|
||||
height: '1em',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
});
|
||||
const magicColor = `rgb(119,117,125)`;
|
||||
globalStyle(`${root} path[stroke="${magicColor}"]`, {
|
||||
stroke: 'currentColor',
|
||||
});
|
||||
globalStyle(`${root} path[fill="${magicColor}"]`, {
|
||||
fill: 'currentColor',
|
||||
display: 'inline-flex',
|
||||
});
|
||||
|
||||
// replace primary colors to cssVarV2('icon/primary')
|
||||
const iconPrimaryColors = [
|
||||
// legacy "--affine-icon-color"
|
||||
'rgb(119,117,125)',
|
||||
// --affine-v2-icon-primary
|
||||
'rgb(122,122,122)',
|
||||
];
|
||||
|
||||
// todo: may need to replace secondary colors & background colors as well?
|
||||
|
||||
const backgroundPrimaryColors = [
|
||||
// --affine-v2-background-primary
|
||||
'rgb(255,255,255)',
|
||||
'#ffffff',
|
||||
];
|
||||
|
||||
const backgroundSecondaryColors = [
|
||||
// --affine-v2-background-secondary
|
||||
'rgb(245,245,245)',
|
||||
];
|
||||
|
||||
globalStyle(
|
||||
`${root} :is(${iconPrimaryColors.map(color => `path[fill="${color}"]`).join(',')})`,
|
||||
{
|
||||
fill: cssVarV2('icon/primary'),
|
||||
}
|
||||
);
|
||||
|
||||
globalStyle(
|
||||
`${root} :is(${iconPrimaryColors.map(color => `path[stroke="${color}"]`).join(',')})`,
|
||||
{
|
||||
stroke: cssVarV2('icon/primary'),
|
||||
}
|
||||
);
|
||||
|
||||
globalStyle(
|
||||
`${root} :is(${backgroundPrimaryColors.map(color => `rect[fill="${color}"]`).join(',')})`,
|
||||
{
|
||||
fill: 'transparent',
|
||||
}
|
||||
);
|
||||
|
||||
globalStyle(
|
||||
`${root} :is(${backgroundPrimaryColors.map(color => `path[fill="${color}"]`).join(',')})`,
|
||||
{
|
||||
fill: 'transparent',
|
||||
}
|
||||
);
|
||||
|
||||
globalStyle(
|
||||
`${root} :is(${backgroundSecondaryColors.map(color => `path[fill="${color}"]`).join(',')})`,
|
||||
{
|
||||
fill: cssVarV2('layer/background/secondary'),
|
||||
}
|
||||
);
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user