zack3d/big-agi
1
0
Fork 0
mirror of https://github.com/enricoros/big-AGI.git synced 2026-05-10 21:50:14 -07:00
Code Issues Packages Projects Releases Wiki Activity

Tintable buttons

Browse Source
This commit is contained in:
Enrico Ros
2025-05-13 12:22:22 -07:00
parent a6d6f69d4e
commit ec13a9664c
6 changed files with 30 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/apps/chat/components/composer/buttons/ButtonAttachCamera.tsx
+5 -4
View File
@@ -1,6 +1,6 @@
import * as React from 'react';
import { Box, Button, IconButton, Tooltip } from '@mui/joy';
import { Box, Button, ColorPaletteProp, IconButton, Tooltip } from '@mui/joy';
import AddAPhotoIcon from '@mui/icons-material/AddAPhoto';
import CameraAltOutlinedIcon from '@mui/icons-material/CameraAltOutlined';
@@ -12,6 +12,7 @@ import { CameraCaptureModal } from '../CameraCaptureModal';
export const ButtonAttachCameraMemo = React.memo(ButtonAttachCamera);
function ButtonAttachCamera(props: {
color?: ColorPaletteProp,
isMobile?: boolean,
disabled?: boolean,
fullWidth?: boolean,
@@ -19,7 +20,7 @@ function ButtonAttachCamera(props: {
onOpenCamera: () => void,
}) {
return props.isMobile ? (
<IconButton disabled={props.disabled} onClick={props.onOpenCamera}>
<IconButton color={props.color} disabled={props.disabled} onClick={props.onOpenCamera}>
<AddAPhotoIcon />
</IconButton>
) : (
@@ -30,8 +31,8 @@ function ButtonAttachCamera(props: {
</Box>
)}>
<Button
variant='plain'
color='neutral'
variant={props.color ? 'soft' : 'plain'}
color={props.color || 'neutral'}
disabled={props.disabled}
fullWidth={props.fullWidth}
startDecorator={<CameraAltOutlinedIcon />}
src/apps/chat/components/composer/buttons/ButtonAttachClipboard.tsx
+5 -4
View File
@@ -1,6 +1,6 @@
import * as React from 'react';
import { Box, Button, IconButton, Tooltip } from '@mui/joy';
import { Box, Button, ColorPaletteProp, IconButton, Tooltip } from '@mui/joy';
import ContentPasteGoIcon from '@mui/icons-material/ContentPasteGo';
import { KeyStroke } from '~/common/components/KeyStroke';
@@ -10,6 +10,7 @@ import { buttonAttachSx } from '~/common/components/ButtonAttachFiles';
export const ButtonAttachClipboardMemo = React.memo(ButtonAttachClipboard);
function ButtonAttachClipboard(props: {
color?: ColorPaletteProp,
isMobile?: boolean,
disabled?: boolean,
fullWidth?: boolean,
@@ -17,7 +18,7 @@ function ButtonAttachClipboard(props: {
onAttachClipboard: () => void,
}) {
return props.isMobile ? (
<IconButton disabled={props.disabled} onClick={props.onAttachClipboard}>
<IconButton color={props.color} disabled={props.disabled} onClick={props.onAttachClipboard}>
<ContentPasteGoIcon />
</IconButton>
) : (
@@ -29,8 +30,8 @@ function ButtonAttachClipboard(props: {
</Box>
)}>
<Button
variant='plain'
color='neutral'
variant={props.color ? 'soft' : 'plain'}
color={props.color || 'neutral'}
disabled={props.disabled}
fullWidth={props.fullWidth}
startDecorator={<ContentPasteGoIcon />}
src/apps/chat/components/composer/buttons/ButtonAttachNewDoc.tsx
+5 -4
View File
@@ -1,6 +1,6 @@
import * as React from 'react';
import { Box, Button, IconButton, Tooltip } from '@mui/joy';
import { Box, Button, ColorPaletteProp, IconButton, Tooltip } from '@mui/joy';
import AddRoundedIcon from '@mui/icons-material/AddRounded';
import { buttonAttachSx } from '~/common/components/ButtonAttachFiles';
@@ -9,6 +9,7 @@ import { buttonAttachSx } from '~/common/components/ButtonAttachFiles';
export const ButtonAttachNewMemo = React.memo(ButtonAttachNew);
function ButtonAttachNew(props: {
color?: ColorPaletteProp,
isMobile?: boolean,
disabled?: boolean,
fullWidth?: boolean,
@@ -16,7 +17,7 @@ function ButtonAttachNew(props: {
onAttachNew: () => void,
}) {
return props.isMobile ? (
<IconButton disabled={props.disabled} onClick={props.onAttachNew}>
<IconButton color={props.color} disabled={props.disabled} onClick={props.onAttachNew}>
<AddRoundedIcon />
</IconButton>
) : (
@@ -29,8 +30,8 @@ function ButtonAttachNew(props: {
</Box>
)}>
<Button
variant='plain'
color='neutral'
variant={props.color ? 'soft' : 'plain'}
color={props.color || 'neutral'}
disabled={props.disabled}
fullWidth={props.fullWidth}
startDecorator={<AddRoundedIcon />}
src/apps/chat/components/composer/buttons/ButtonAttachScreenCapture.tsx
+5 -4
View File
@@ -1,6 +1,6 @@
import * as React from 'react';
import { Box, Button, IconButton, Tooltip } from '@mui/joy';
import { Box, Button, ColorPaletteProp, IconButton, Tooltip } from '@mui/joy';
import ScreenshotMonitorIcon from '@mui/icons-material/ScreenshotMonitor';
import { Is } from '~/common/util/pwaUtils';
@@ -11,6 +11,7 @@ import { takeScreenCapture } from '~/common/util/screenCaptureUtils';
export const ButtonAttachScreenCaptureMemo = React.memo(ButtonAttachScreenCapture);
function ButtonAttachScreenCapture(props: {
color?: ColorPaletteProp,
isMobile?: boolean,
disabled?: boolean,
fullWidth?: boolean,
@@ -41,7 +42,7 @@ function ButtonAttachScreenCapture(props: {
return props.isMobile ? (
<IconButton disabled={props.disabled} onClick={handleTakeScreenCapture}>
<IconButton color={props.color} disabled={props.disabled} onClick={handleTakeScreenCapture}>
<ScreenshotMonitorIcon />
</IconButton>
) : (
@@ -55,8 +56,8 @@ function ButtonAttachScreenCapture(props: {
</Box>
)}>
<Button
variant={capturing ? 'solid' : 'plain'}
color={!!error ? 'danger' : 'neutral'}
variant={capturing ? 'solid' : props.color ? 'soft' : 'plain'}
color={!!error ? 'danger' : props.color || 'neutral'}
disabled={props.disabled}
fullWidth={props.fullWidth}
loading={capturing}
src/apps/chat/components/composer/buttons/ButtonAttachWeb.tsx
+5 -4
View File
@@ -1,6 +1,6 @@
import * as React from 'react';
import { Box, Button, IconButton, Tooltip } from '@mui/joy';
import { Box, Button, ColorPaletteProp, IconButton, Tooltip } from '@mui/joy';
import LanguageRoundedIcon from '@mui/icons-material/LanguageRounded';
import { buttonAttachSx } from '~/common/components/ButtonAttachFiles';
@@ -10,6 +10,7 @@ import { KeyStroke } from '~/common/components/KeyStroke';
export const ButtonAttachWebMemo = React.memo(ButtonAttachWeb);
function ButtonAttachWeb(props: {
color?: ColorPaletteProp,
isMobile?: boolean,
disabled?: boolean,
fullWidth?: boolean,
@@ -18,13 +19,13 @@ function ButtonAttachWeb(props: {
}) {
const button = props.isMobile ? (
<IconButton disabled={props.disabled} onClick={props.onOpenWebInput}>
<IconButton color={props.color} disabled={props.disabled} onClick={props.onOpenWebInput}>
<LanguageRoundedIcon />
</IconButton>
) : (
<Button
variant='plain'
color='neutral'
variant={props.color ? 'soft' : 'plain'}
color={props.color || 'neutral'}
disabled={props.disabled}
fullWidth={props.fullWidth}
startDecorator={<LanguageRoundedIcon />}
src/common/components/ButtonAttachFiles.tsx
+5 -4
View File
@@ -1,7 +1,7 @@
import * as React from 'react';
import { fileOpen, FileWithHandle } from 'browser-fs-access';
import { Box, Button, IconButton, Tooltip } from '@mui/joy';
import { Box, Button, ColorPaletteProp, IconButton, Tooltip } from '@mui/joy';
import AttachFileRoundedIcon from '@mui/icons-material/AttachFileRounded';
import { KeyStroke } from '~/common/components/KeyStroke';
@@ -40,6 +40,7 @@ export async function openFileForAttaching(
export const ButtonAttachFilesMemo = React.memo(ButtonAttachFiles);
function ButtonAttachFiles(props: {
color?: ColorPaletteProp,
multiple?: boolean,
isMobile?: boolean,
disabled?: boolean,
@@ -55,7 +56,7 @@ function ButtonAttachFiles(props: {
}, [onAttachFiles, props.multiple]);
return props.isMobile ? (
<IconButton disabled={props.disabled} onClick={handleAttachFilePicker}>
<IconButton color={props.color} disabled={props.disabled} onClick={handleAttachFilePicker}>
<AttachFileRoundedIcon />
</IconButton>
) : (
@@ -67,8 +68,8 @@ function ButtonAttachFiles(props: {
</Box>
)}>
<Button
variant='plain'
color='neutral'
variant={props.color ? 'soft' : 'plain'}
color={props.color || 'neutral'}
disabled={props.disabled}
fullWidth={props.fullWidth}
onClick={handleAttachFilePicker}