[AI] More tab new design (#19165)
closes https://discord.com/channels/1130383047699738754/1480981616666087687 <img width="1596" height="1318" alt="CleanShot 2026-03-31 at 18 06 37" src="https://github.com/user-attachments/assets/0d87610e-e4ce-4f3d-8047-97d242f230c5" />
This commit is contained in:
+11
-27
@@ -8,7 +8,6 @@ import { type VariablePickerComponent } from '@/object-record/record-field/ui/fo
|
||||
import { InputErrorHelper } from '@/ui/input/components/InputErrorHelper';
|
||||
import { InputHint } from '@/ui/input/components/InputHint';
|
||||
import { InputLabel } from '@/ui/input/components/InputLabel';
|
||||
import { StyledDropdownButtonContainer } from '@/ui/layout/dropdown/components/StyledDropdownButtonContainer';
|
||||
import { useFullScreenModal } from '@/ui/layout/fullscreen/hooks/useFullScreenModal';
|
||||
import { type BreadcrumbProps } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
|
||||
import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
|
||||
@@ -16,10 +15,11 @@ import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks
|
||||
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
|
||||
import { styled } from '@linaria/react';
|
||||
import { useLingui } from '@lingui/react/macro';
|
||||
import { useContext, useId, useState } from 'react';
|
||||
import { useId, useState } from 'react';
|
||||
import { isDefined } from 'twenty-shared/utils';
|
||||
import { IconMaximize } from 'twenty-ui/display';
|
||||
import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
|
||||
import { LightIconButton } from 'twenty-ui/input';
|
||||
import { themeCssVariables } from 'twenty-ui/theme-constants';
|
||||
import { useIsMobile } from 'twenty-ui/utilities';
|
||||
|
||||
const StyledAdvancedTextFieldContainerWrapper = styled.div`
|
||||
@@ -47,8 +47,9 @@ const StyledAdvancedTextFieldInnerContainer = styled.div`
|
||||
`;
|
||||
|
||||
const StyledEditorActionButtonContainer = styled.div`
|
||||
margin-top: ${themeCssVariables.spacing[1]};
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
right: ${themeCssVariables.spacing[1]};
|
||||
top: ${themeCssVariables.spacing[0]};
|
||||
z-index: 1;
|
||||
`;
|
||||
@@ -63,19 +64,6 @@ const StyledFullScreenEditorContainer = styled.div`
|
||||
padding: ${themeCssVariables.spacing[2]};
|
||||
`;
|
||||
|
||||
const StyledFullScreenButtonContainerWrapper = styled.div`
|
||||
> * {
|
||||
background-color: transparent;
|
||||
color: ${themeCssVariables.font.color.tertiary};
|
||||
padding: ${themeCssVariables.spacing[2]};
|
||||
|
||||
:hover {
|
||||
background-color: ${themeCssVariables.background.transparent.light};
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
type FormAdvancedTextFieldInputProps = {
|
||||
label?: string;
|
||||
error?: string;
|
||||
@@ -111,7 +99,6 @@ export const FormAdvancedTextFieldInput = ({
|
||||
maxWidth,
|
||||
contentType = 'json',
|
||||
}: FormAdvancedTextFieldInputProps) => {
|
||||
const { theme } = useContext(ThemeContext);
|
||||
const instanceId = useId();
|
||||
const isMobile = useIsMobile();
|
||||
const [isFullScreen, setIsFullScreen] = useState(false);
|
||||
@@ -229,15 +216,12 @@ export const FormAdvancedTextFieldInput = ({
|
||||
{enableFullScreen && (
|
||||
<StyledEditorActionButtonContainer>
|
||||
{!readonly && !isFullScreen && (
|
||||
<StyledFullScreenButtonContainerWrapper>
|
||||
<StyledDropdownButtonContainer
|
||||
isUnfolded={false}
|
||||
transparentBackground
|
||||
onClick={handleEnterFullScreen}
|
||||
>
|
||||
<IconMaximize size={theme.icon.size.md} />
|
||||
</StyledDropdownButtonContainer>
|
||||
</StyledFullScreenButtonContainerWrapper>
|
||||
<LightIconButton
|
||||
Icon={IconMaximize}
|
||||
size="small"
|
||||
onClick={handleEnterFullScreen}
|
||||
accent="tertiary"
|
||||
/>
|
||||
)}
|
||||
</StyledEditorActionButtonContainer>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user