Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-23 08:58:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Design changes done

Browse source
This commit is contained in:
Shaurya Sharma 2025-05-08 03:27:27 +05:30
parent f1820e9620
commit 53ba068947
10 changed files with 112 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/HiddenOptions.jsx
View file

@ -74,7 +74,7 @@ export const HiddenOptions = (props) => {
{renderOptions()}
<OverlayTrigger
trigger={'click'}
placement={'bottom-start'}
placement={'bottom-end'}
rootClose={false}
show={showMenu}
overlay={
@ -114,12 +114,13 @@ export const HiddenOptions = (props) => {
setShowMenu((prev) => !prev);
setActionClicked((prev) => !prev);
}}
className="copy-menu-options-icon"
className="node-action-icon"
style={{
outline: 'none',
...(showMenu && { backgroundColor: 'var(--button-outline-pressed, rgba(136, 144, 153, 0.18)' }),
}}
>
<SolidIcon width="12" height="12" name="copy" />
<SolidIcon fill="#6A727C" width="12" height="12" name="copy" />
</div>
</OverlayTrigger>
</div>

15
frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/JSONTreeViewerV2.jsx
View file

@ -7,6 +7,7 @@ import JSONViewer from './JSONViewer';
import { SearchBox } from '@/_components';
import { Node } from './Node';
import { v4 as uuidv4 } from 'uuid';
import InputComponent from '@/components/ui/Input/Index';
import { isEmpty } from 'lodash';
const JSONTreeViewerV2 = ({ data = {}, iconsList = [], darkMode, searchablePaths = new Set() }) => {
@ -128,8 +129,8 @@ const JSONTreeViewerV2 = ({ data = {}, iconsList = [], darkMode, searchablePaths
<>
{!selectedNodePath || (typeof selectedData == 'object' && isEmpty(selectedData)) ? (
<div>
<div style={{ display: 'flex', justifyContent: 'center', marginBottom: '12px' }}>
<SearchBox
<div style={{ margin: '8px 16px 12px 16px' }}>
{/* <SearchBox
dataCy={`inspector-search`}
initialValue={searchValue}
callBack={(e) => setSearchValue(e.target.value)}
@ -138,6 +139,16 @@ const JSONTreeViewerV2 = ({ data = {}, iconsList = [], darkMode, searchablePaths
customClass={`tj-inspector-search-input tj-text-xsm`}
showClearButton={false}
width={300}
/> */}
<InputComponent
leadingIcon="search01"
onChange={(e) => setSearchValue(e.target.value)}
onClear={() => setSearchValue('')}
size="medium"
placeholder="Search"
value={searchValue}
{...(searchValue && { trailingAction: 'clear' })}
/>
</div>
<div className="json-tree-view">

44
frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/Node.jsx
View file

@ -19,20 +19,21 @@ const renderNodeIcons = (node, iconsList, darkMode) => {
<WidgetIcon
name={extractComponentName(icon?.iconPath)}
fill={darkMode ? '#3A3F42' : '#D7DBDF'}
width="16"
height="16"
width="14"
height="14"
/>
);
}
if (icon && icon.jsx) {
if (icon?.tooltipMessage) {
return (
<ToolTip message={icon?.tooltipMessage}>
<div>{icon.jsx()}</div>
<div>{icon.jsx({ height: 14, width: 14 })}</div>
</ToolTip>
);
}
return icon.jsx();
return icon.jsx({ height: 14, width: 14 });
}
};
@ -91,30 +92,31 @@ export const Node = (props) => {
// <div {...getNodeProps({ onClick: handleExpand })}>
<div
style={{
marginLeft: level > 1 ? 12 : 0,
// marginLeft: level > 1 ? 12 : 0,
// paddingLeft: '16px',
opacity: isDisabled ? 0.5 : 1,
height: level === 1 ? '28px' : '32px',
height: '20px',
display: 'flex',
alignItems: 'center',
color: level === 1 ? 'var(--text-placeholder, #6A727C)' : 'var(--text-default, #1B1F24)',
fontWeight: level === 1 ? 500 : 400,
// borderLeft: level > 1 ? '1px solid var(--slate6, #D7DBDF)' : 'none',
}}
>
{!['queries', 'globals', 'variables'].includes(type) && (
<div className="node-expansion-icon">
{(isBranch || level === 1 || path === 'page.variables') && (
<ButtonComponent
iconOnly
leadingIcon={isExpanded ? 'TriangleDownCenter' : 'rightarrrow'}
onClick={() => onExpand(props)}
variant="ghost"
fill="var(--icon-default,#ACB2B9)"
size="small"
/>
)}
</div>
)}
{/* {!['queries', 'globals', 'variables'].includes(type) && ( */}
<div className="node-expansion-icon">
{(isBranch || level === 1 || path === 'page.variables') && (
<ButtonComponent
iconOnly
leadingIcon={isExpanded ? 'TriangleDownCenter' : 'rightarrrow'}
onClick={() => onExpand(props)}
variant="ghost"
fill="var(--icon-default,#ACB2B9)"
size="small"
/>
)}
</div>
{/* )} */}
<div
onClick={() => onSelect(props)}
@ -134,7 +136,7 @@ export const Node = (props) => {
/>
</OverflowTooltip>
</div>
<div className="node-actions">
<div className="node-actions" style={{ marginRight: 12 + nodeSpecificFilteredActions.length * 12 }}>
<HiddenOptions
nodeSpecificFilteredActions={nodeSpecificFilteredActions}
generalActionsFiltered={generalActionsFiltered}

29
frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/TreeViewHeader.jsx
View file

@ -98,24 +98,23 @@ export const TreeViewHeader = (props) => {
return (
<div className="json-viewer-header">
<div className="json-viewer-back-btn" onClick={backFn}>
{/* <div className="json-viewer-back-btn" onClick={backFn}>
<ArrowLeft tailOpacity="1" fill={'var(--slate12)'} width={'18'} />
</div> */}
<div style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }} onClick={backFn}>
<span style={{ color: 'var(--slate11)' }}>{parentNode.charAt(0).toUpperCase() + parentNode.slice(1)}</span>
{pathArray.length > 1 &&
pathArray.slice(1).map((item, index) => (
<>
<CheveronRight fill={'var(--slate12)'} width={'18'} />
<span key={index} style={{ color: 'var(--slate12)' }}>
{item.charAt(0).toUpperCase() + item.slice(1)}
</span>
</>
))}
</div>
<span style={{ color: 'var(--slate11)', marginLeft: '8px' }}>
{parentNode.charAt(0).toUpperCase() + parentNode.slice(1)}
</span>
{pathArray.length > 1 &&
pathArray.slice(1).map((item, index) => (
<>
<CheveronRight fill={'var(--slate12)'} width={'18'} />
<span key={index} style={{ color: 'var(--slate12)' }}>
{item.charAt(0).toUpperCase() + item.slice(1)}
</span>
</>
))}
<OverlayTrigger
trigger={'click'}
placement={'bottom-start'}

33
frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/useIconList.js
View file

@ -10,7 +10,10 @@ const useIconList = ({ exposedComponentsVariables, componentIdNameMapping, expos
const queryIcons = Object.keys(exposedQueries).map((queryId) => {
const query = dataQueries.find((dataQuery) => dataQuery.id === queryId);
if (!isEmpty(query)) {
return { iconName: query?.name, jsx: () => <DataSourceIcon source={query} height={16} /> };
return {
iconName: query?.name,
jsx: ({ height = 16, width = 16 }) => <DataSourceIcon source={query} height={height} width={width} />,
};
}
});
@ -37,7 +40,9 @@ const useIconList = ({ exposedComponentsVariables, componentIdNameMapping, expos
if (componentExposedVariables.disable) {
icons.push({
iconName: 'disable',
jsx: () => <Icon name={'warning'} height={16} width={16} fill="#DB4324" />,
jsx: ({ height = 16, width = 16 }) => (
<Icon name={'warning'} height={height} width={width} fill="#DB4324" />
),
className: 'component-icon',
tooltipMessage: 'This function will be deprecated soon, You can use setDisable as an alternative',
isInfoIcon: true,
@ -47,7 +52,9 @@ const useIconList = ({ exposedComponentsVariables, componentIdNameMapping, expos
if (componentExposedVariables.visibility) {
icons.push({
iconName: 'visibility',
jsx: () => <Icon name={'warning'} height={16} width={16} fill="#DB4324" />,
jsx: ({ height = 16, width = 16 }) => (
<Icon name={'warning'} height={height} width={width} fill="#DB4324" />
),
className: 'component-icon',
tooltipMessage: 'This function will be deprecated soon, You can use setVisibility as an alternative',
isInfoIcon: true,
@ -62,7 +69,9 @@ const useIconList = ({ exposedComponentsVariables, componentIdNameMapping, expos
if (componentExposedVariables.setChecked) {
icons.push({
iconName: 'setChecked',
jsx: () => <Icon name={'warning'} height={16} width={16} fill="#DB4324" />,
jsx: ({ height = 16, width = 16 }) => (
<Icon name={'warning'} height={height} width={width} fill="#DB4324" />
),
className: 'component-icon',
tooltipMessage: 'This function will be deprecated soon, You can use setValue as an alternative',
isInfoIcon: true,
@ -78,7 +87,9 @@ const useIconList = ({ exposedComponentsVariables, componentIdNameMapping, expos
if (componentExposedVariables.disable) {
icons.push({
iconName: 'disable',
jsx: () => <Icon name={'warning'} height={16} width={16} fill="#DB4324" />,
jsx: ({ height = 16, width = 16 }) => (
<Icon name={'warning'} height={height} width={width} fill="#DB4324" />
),
className: 'component-icon',
tooltipMessage: 'This function will be deprecated soon, You can use setDisable as an alternative',
isInfoIcon: true,
@ -88,7 +99,9 @@ const useIconList = ({ exposedComponentsVariables, componentIdNameMapping, expos
if (componentExposedVariables.visibility) {
icons.push({
iconName: 'visibility',
jsx: () => <Icon name={'warning'} height={16} width={16} fill="#DB4324" />,
jsx: ({ height = 16, width = 16 }) => (
<Icon name={'warning'} height={height} width={width} fill="#DB4324" />
),
className: 'component-icon',
tooltipMessage: 'This function will be deprecated soon, You can use setVisibility as an alternative',
isInfoIcon: true,
@ -98,7 +111,9 @@ const useIconList = ({ exposedComponentsVariables, componentIdNameMapping, expos
if (componentExposedVariables.loading) {
icons.push({
iconName: 'loading',
jsx: () => <Icon name={'warning'} height={16} width={16} fill="#DB4324" />,
jsx: ({ height = 16, width = 16 }) => (
<Icon name={'warning'} height={height} width={width} fill="#DB4324" />
),
className: 'component-icon',
tooltipMessage: 'This function will be deprecated soon, You can use setLoading as an alternative',
isInfoIcon: true,
@ -112,7 +127,9 @@ const useIconList = ({ exposedComponentsVariables, componentIdNameMapping, expos
return [
{
iconName: 'visibility',
jsx: () => <Icon name={'warning'} height={16} width={16} fill="#DB4324" />,
jsx: ({ height = 16, width = 16 }) => (
<Icon name={'warning'} height={height} width={width} fill="#DB4324" />
),
className: 'component-icon',
tooltipMessage: 'This function will be deprecated soon, You can use setVisibility as an alternative',
isInfoIcon: true,

5
frontend/src/_styles/components.scss
View file

@ -95,10 +95,7 @@ $btn-dark-color: #FFFFFF;
}
.leftsidebar-panel-header {
// background-color: var(--slate3);
padding: 12px 16px 8px 16px;
min-height: 52px;
// border-bottom: 1px solid var(--slate5);
padding: 12px 16px 0px 16px;
.panel-header-container {

39
frontend/src/_styles/theme.scss
View file

@ -18878,13 +18878,24 @@ section.ai-message-prompt-input-wrapper {
}
.json-tree-view {
ul {
margin-left:16px !important;
border-left: 1px solid var(--slate6, #D7DBDF);
}
// ul {
// margin-left:16px !important;
// border-left: 1px solid var(--slate6, #D7DBDF);
// }
ul[role="tree"] {
margin-left:16px !important;
border-left: none !important;
ul {
margin-left:16px !important;
border-left: none !important;
ul {
margin-left:10px !important;
padding-left:16px !important;
border-left: 1px solid var(--slate6, #D7DBDF) !important;
}
}
}
}
@ -18936,9 +18947,11 @@ section.ai-message-prompt-input-wrapper {
.node-icon {
display: flex;
align-items: center;
align-items: flex-end;
justify-content: center;
margin-right: 6px;
height: 14px;
width: 14px;
}
.node-label {
@ -18964,10 +18977,10 @@ section.ai-message-prompt-input-wrapper {
.node-content {
display: flex;
align-items: center;
padding: 0px 8px;
padding: 0px 0px 0px 8px;
height: 100%;
width: 100%;
border-radius: 6px;
}
.node-content-active {
@ -18978,6 +18991,7 @@ section.ai-message-prompt-input-wrapper {
.node-content-hoverable:hover, .node-content-active {
background-color: var(--interactive-overlays-fill-hover);
cursor: pointer;
.node-actions {
display: flex;
}
@ -19014,9 +19028,13 @@ section.ai-message-prompt-input-wrapper {
font-weight: 500;
display: flex;
flex-direction: row;
margin-left:20px;
margin-bottom:18px;
margin-left:16px;
margin-bottom:12px;
margin-right: 18px;
margin-top: 8px;
height:28px;
align-items: center;
}
.json-viewer-back-btn {
@ -19058,11 +19076,9 @@ section.ai-message-prompt-input-wrapper {
}
.node-actions {
justify-content: center;
align-items: center;
margin-left:auto;
margin-right: 24px;
display: none;
gap: 4px;
}
@ -19104,6 +19120,7 @@ section.ai-message-prompt-input-wrapper {
border: none;
background: transparent;
border-radius: 10px;
top: -5px !important;
&.dark-theme {
.popover-body {
box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.9), 0px 8px 16px 0px #000000;

1
frontend/src/components/ui/Input/CommonInput/TextInput.jsx
View file

@ -46,6 +46,7 @@ const TextInput = ({
<TrailingBtn
size={size}
type={trailingAction}
{...(trailingAction === 'clear' && { onClick: restProps.onClear })}
disabled={trailingActionDisabled || disabled}
className={`tw-absolute tw-right-[5px] ${size === 'small' ? 'tw-top-[5px]' : 'tw-top-[4px]'}`}
/>

2
frontend/src/components/ui/Input/Index.jsx
View file

@ -13,6 +13,7 @@ InputComponent.propTypes = {
type: PropTypes.oneOf(['text', 'number', 'editable title', 'password', 'email']),
value: PropTypes.string,
onChange: PropTypes.func,
onClear: PropTypes.func,
placeholder: PropTypes.string,
name: PropTypes.string,
id: PropTypes.string,
@ -32,6 +33,7 @@ InputComponent.propTypes = {
InputComponent.defaultProps = {
type: 'text',
onChange: (e, validateObj) => {},
onClear: () => {},
placeholder: '',
name: '',
id: '',

2
frontend/src/components/ui/Input/Input.jsx
View file

@ -19,7 +19,7 @@ const Input = React.forwardRef(({ className, size, type, ...props }, ref) => {
type={isPasswordField && isPasswordVisible ? 'text' : type}
className={cn(
inputVariants({ size }),
`tw-relative tw-peer tw-flex tw-text-[12px]/[18px] tw-w-full tw-rounded-[8px] tw-border-[1px] tw-border-solid tw-bg-background-surface-layer-01 tw-py-[7px] tw-text-text-default focus-visible:tw-ring-[1px] focus-visible:tw-ring-offset-[1px] focus-visible:tw-ring-border-accent-strong focus-visible:tw-ring-offset-border-accent-strong focus-visible:tw-border-transparent disabled:tw-cursor-not-allowed ${props.styles}`,
`tw-peer tw-flex tw-text-[12px]/[18px] tw-w-full tw-rounded-[8px] tw-border-[1px] tw-border-solid tw-bg-background-surface-layer-01 tw-py-[7px] tw-text-text-default focus-visible:tw-ring-[1px] focus-visible:tw-ring-offset-[1px] focus-visible:tw-ring-border-accent-strong focus-visible:tw-ring-offset-border-accent-strong focus-visible:tw-border-transparent disabled:tw-cursor-not-allowed ${props.styles}`,
className
)}
ref={ref}