mirror of
https://github.com/ToolJet/ToolJet
synced 2026-05-23 00:48:25 +00:00
Padding issues and icon issues fixed
This commit is contained in:
Shaurya Sharma
parent
53ba068947
commit
2ec0506c8f
11 changed files with 78 additions and 22 deletions
|
|
@ -82,7 +82,7 @@ const Row = ({ label, value, level = 1, absolutePath }) => {
|
|||
}}
|
||||
className="json-viewer-action-icon"
|
||||
>
|
||||
<SolidIcon width="12" height="12" name="copy" />
|
||||
<SolidIcon width="12" height="12" name="copy" fill="#6A727C" />
|
||||
</span>
|
||||
</ToolTip>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -50,7 +50,6 @@
|
|||
.json-viewer-actions-container {
|
||||
display:none;
|
||||
margin-left: auto;
|
||||
margin-right: 4px;
|
||||
height: 12px;
|
||||
width:40px;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import React from 'react';
|
||||
|
||||
export const DefaultCopyIcon = ({ height = 12, width = 12 }) => (
|
||||
export const DefaultCopyIcon = ({ height = 12, width = 12, fill = '#6A727C' }) => (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
fill={fill}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
data-cy="copy-path-to-clipboard"
|
||||
>
|
||||
|
|
@ -13,7 +13,7 @@ export const DefaultCopyIcon = ({ height = 12, width = 12 }) => (
|
|||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M19.3113 4.68871C18.5834 3.9609 17.4034 3.9609 16.6757 4.68871L15.8421 5.5223C15.4237 5.94071 14.7453 5.94071 14.3269 5.5223C13.9084 5.10389 13.9084 4.42549 14.3269 4.00707L15.1605 3.17348C16.7251 1.60884 19.2619 1.60884 20.8266 3.17348C22.3911 4.73811 22.3911 7.2749 20.8266 8.83954L19.9929 9.67313C19.5746 10.0916 18.8961 10.0916 18.4777 9.67313C18.0593 9.25471 18.0593 8.57633 18.4777 8.1579L19.3113 7.32431C20.0391 6.59651 20.0391 5.41651 19.3113 4.68871ZM17.406 6.59394C17.8244 7.01236 17.8244 7.69074 17.406 8.10917L15.1982 10.317C14.7798 10.7354 14.1014 10.7354 13.683 10.317C13.2645 9.89856 13.2645 9.22017 13.683 8.80174L15.8908 6.59394C16.3091 6.17551 16.9876 6.17551 17.406 6.59394ZM12.6651 7.184C13.0835 7.60241 13.0835 8.28081 12.6651 8.69923L11.8315 9.53283C11.1037 10.2606 11.1037 11.4406 11.8315 12.1684C12.5593 12.8962 13.7393 12.8962 14.4671 12.1684L15.3007 11.3348C15.7191 10.9164 16.3974 10.9164 16.8159 11.3348C17.2343 11.7533 17.2343 12.4316 16.8159 12.8501L15.9823 13.6837C14.4177 15.2483 11.8809 15.2483 10.3162 13.6837C8.75161 12.119 8.75161 9.58223 10.3162 8.0176L11.1498 7.184C11.5683 6.76559 12.2467 6.76559 12.6651 7.184ZM17.245 14.9463C14.983 17.2083 11.3156 17.2083 9.05356 14.9463C6.79156 12.6843 6.79156 9.01691 9.05356 6.7549L9.52276 6.28571H4.14286C2.95939 6.28571 2 7.2451 2 8.42857V19.8571C2 21.0406 2.95939 22 4.14286 22H15.5714C16.7549 22 17.7143 21.0406 17.7143 19.8571V14.4771L17.245 14.9463Z"
|
||||
fill={'#C1C8CD'}
|
||||
fill={'fill'}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ export const HiddenOptions = (props) => {
|
|||
dispatchAction(data);
|
||||
}}
|
||||
>
|
||||
<img src={src ?? `assets/images/icons/${iconName}.svg`} width={width} height={height} />
|
||||
<SolidIcon name={iconName} fill="var(--icon-strong)" width={width} height={height} />
|
||||
</span>
|
||||
</ToolTip>
|
||||
</div>
|
||||
|
|
@ -89,7 +89,7 @@ export const HiddenOptions = (props) => {
|
|||
}}
|
||||
className="option"
|
||||
>
|
||||
<SolidIcon width="12" height="12" name="copy" />
|
||||
<SolidIcon width="16" height="16" name="copy" fill="var(--icon-weak)" />
|
||||
<span> Copy path</span>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -100,7 +100,7 @@ export const HiddenOptions = (props) => {
|
|||
}}
|
||||
className="option"
|
||||
>
|
||||
<DefaultCopyIcon />
|
||||
<DefaultCopyIcon height={16} width={16} fill="var(--icon-weak)" />
|
||||
<span> Copy value</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -120,7 +120,7 @@ export const HiddenOptions = (props) => {
|
|||
...(showMenu && { backgroundColor: 'var(--button-outline-pressed, rgba(136, 144, 153, 0.18)' }),
|
||||
}}
|
||||
>
|
||||
<SolidIcon fill="#6A727C" width="12" height="12" name="copy" />
|
||||
<SolidIcon fill="var(--icon-strong)" width="12" height="12" name="copy" />
|
||||
</div>
|
||||
</OverlayTrigger>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -100,6 +100,8 @@ export const Node = (props) => {
|
|||
alignItems: 'center',
|
||||
color: level === 1 ? 'var(--text-placeholder, #6A727C)' : 'var(--text-default, #1B1F24)',
|
||||
fontWeight: level === 1 ? 500 : 400,
|
||||
marginTop: level === 1 ? 4 : 0,
|
||||
marginBottom: level === 1 ? 4 : 0,
|
||||
// borderLeft: level > 1 ? '1px solid var(--slate6, #D7DBDF)' : 'none',
|
||||
}}
|
||||
>
|
||||
|
|
@ -136,12 +138,13 @@ export const Node = (props) => {
|
|||
/>
|
||||
</OverflowTooltip>
|
||||
</div>
|
||||
<div className="node-actions" style={{ marginRight: 12 + nodeSpecificFilteredActions.length * 12 }}>
|
||||
<div className="node-actions" style={{ marginRight: 10 + nodeSpecificFilteredActions.length * 10 }}>
|
||||
<HiddenOptions
|
||||
nodeSpecificFilteredActions={nodeSpecificFilteredActions}
|
||||
generalActionsFiltered={generalActionsFiltered}
|
||||
setActionClicked={setActionClicked}
|
||||
data={data}
|
||||
darkMode={darkMode}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ export const TreeViewHeader = (props) => {
|
|||
}}
|
||||
className="option"
|
||||
>
|
||||
<SolidIcon width="12" height="12" name="copy" />
|
||||
<SolidIcon width="16" height="16" name="copy" fill="var(--icon-weak)" />
|
||||
<span> Copy path</span>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -66,13 +66,13 @@ export const TreeViewHeader = (props) => {
|
|||
}}
|
||||
className="option"
|
||||
>
|
||||
<DefaultCopyIcon />
|
||||
<DefaultCopyIcon height={16} width={16} fill="var(--icon-weak)" />
|
||||
<span> Copy value</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{nodeSpecificActions?.map((actionOption, index) => {
|
||||
const { name, icon, src, iconName, dispatchAction, width = 12, height = 12 } = actionOption;
|
||||
const { name, icon, src, iconName, dispatchAction, width = 16, height = 16 } = actionOption;
|
||||
if (icon) {
|
||||
return (
|
||||
<div className="menu-options mb-0" key={`${name}-${index}`}>
|
||||
|
|
@ -85,7 +85,7 @@ export const TreeViewHeader = (props) => {
|
|||
}}
|
||||
className="option"
|
||||
>
|
||||
<img src={src ?? `assets/images/icons/${iconName}.svg`} width={width} height={height} />
|
||||
<SolidIcon name={iconName} fill="var(--icon-weak)" width={width} height={height} />
|
||||
{name}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -141,7 +141,7 @@ export const TreeViewHeader = (props) => {
|
|||
boxShadow: 'none',
|
||||
}}
|
||||
>
|
||||
<SolidIcon data-cy={'menu-icon'} name="morevertical" width="18" fill={'#6A727C'} />
|
||||
<SolidIcon data-cy={'menu-icon'} name="morevertical" width="18" fill={'var(--icon-strong)'} />
|
||||
</div>
|
||||
</OverlayTrigger>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ const useCallbackActions = () => {
|
|||
name: 'Run Query',
|
||||
dispatchAction: handleRunQuery,
|
||||
icon: true,
|
||||
src: 'assets/images/icons/editor/play.svg',
|
||||
iconName: 'play01',
|
||||
width: 8,
|
||||
height: 8,
|
||||
enableInspectorTreeView: false,
|
||||
|
|
@ -76,7 +76,7 @@ const useCallbackActions = () => {
|
|||
name: 'View query',
|
||||
dispatchAction: selectQuery,
|
||||
icon: true,
|
||||
src: 'assets/images/icons/editor/file-code.svg',
|
||||
iconName: 'file-code',
|
||||
width: 14,
|
||||
height: 14,
|
||||
enableInspectorTreeView: true,
|
||||
|
|
@ -99,7 +99,7 @@ const useCallbackActions = () => {
|
|||
name: 'Go to component',
|
||||
dispatchAction: handleAutoScrollToComponent,
|
||||
icon: true,
|
||||
iconName: 'select',
|
||||
iconName: 'corners',
|
||||
enableInspectorTreeView: true,
|
||||
},
|
||||
...(!shouldFreeze
|
||||
|
|
|
|||
|
|
@ -18938,7 +18938,7 @@ section.ai-message-prompt-input-wrapper {
|
|||
.node-expansion-icon {
|
||||
width:20px;
|
||||
height:20px;
|
||||
margin-right: 2px;
|
||||
margin-right: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -18977,7 +18977,6 @@ section.ai-message-prompt-input-wrapper {
|
|||
.node-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0px 0px 0px 8px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
|
|
@ -19090,7 +19089,6 @@ section.ai-message-prompt-input-wrapper {
|
|||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 4px;
|
||||
margin-right:4px;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -19118,7 +19116,7 @@ section.ai-message-prompt-input-wrapper {
|
|||
.copy-menu-options{
|
||||
width: 144px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
background-color: var(--background-surface-layer-01);
|
||||
border-radius: 10px;
|
||||
top: -5px !important;
|
||||
&.dark-theme {
|
||||
|
|
|
|||
25
frontend/src/_ui/Icon/solidIcons/Corners.jsx
Normal file
25
frontend/src/_ui/Icon/solidIcons/Corners.jsx
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import React from 'react';
|
||||
|
||||
const Corners = ({ style, fill = '#C1C8CD', width = '12', height = '13', className = '', viewBox = '0 0 12 13' }) => (
|
||||
<svg
|
||||
width={width}
|
||||
height={width}
|
||||
viewBox={viewBox}
|
||||
fill={fill}
|
||||
className={className}
|
||||
style={style}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g id="corners ">
|
||||
<path
|
||||
id="vector"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M2 1.5C1.44772 1.5 1 1.94772 1 2.5V3.5C1 4.05228 1.44772 4.5 2 4.5H2.125V8.5H2C1.44772 8.5 1 8.94772 1 9.5V10.5C1 11.0523 1.44772 11.5 2 11.5H3C3.55228 11.5 4 11.0523 4 10.5V10.375H8V10.5C8 11.0523 8.44772 11.5 9 11.5H10C10.5523 11.5 11 11.0523 11 10.5V9.5C11 8.94772 10.5523 8.5 10 8.5H9.875V4.5H10C10.5523 4.5 11 4.05228 11 3.5V2.5C11 1.94772 10.5523 1.5 10 1.5H9C8.44772 1.5 8 1.94772 8 2.5V2.625L4 2.625V2.5C4 1.94772 3.55228 1.5 3 1.5H2ZM4 3.375V3.5C4 4.05228 3.55228 4.5 3 4.5H2.875V8.5H3C3.55228 8.5 4 8.94772 4 9.5V9.625H8V9.5C8 8.94772 8.44772 8.5 9 8.5H9.125V4.5H9C8.44772 4.5 8 4.05228 8 3.5V3.375L4 3.375Z"
|
||||
fill={fill}
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default Corners;
|
||||
25
frontend/src/_ui/Icon/solidIcons/FileCode.jsx
Normal file
25
frontend/src/_ui/Icon/solidIcons/FileCode.jsx
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import React from 'react';
|
||||
|
||||
const FileCode = ({ style, fill = '#C1C8CD', width = '25', className = '', viewBox = '0 0 12 12' }) => (
|
||||
<svg
|
||||
width={width}
|
||||
height={width}
|
||||
viewBox={viewBox}
|
||||
fill={fill}
|
||||
className={className}
|
||||
style={style}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g id="file-code">
|
||||
<path
|
||||
id="vector"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M2.02805 1.31381C2.22898 1.11288 2.5015 1 2.78566 1H7.07138C7.1661 1 7.25694 1.03763 7.32391 1.10461L10.1811 3.96175C10.248 4.02872 10.2857 4.11956 10.2857 4.21429V9.92857C10.2857 10.2127 10.1728 10.4853 9.97188 10.6862C9.77095 10.8871 9.49838 11 9.21423 11H2.78566C2.5015 11 2.22898 10.8871 2.02805 10.6862C1.82712 10.4853 1.71423 10.2127 1.71423 9.92857V2.07143C1.71423 1.78727 1.82712 1.51475 2.02805 1.31381ZM5.30733 5.26405C5.51653 5.47326 5.51653 5.81246 5.30733 6.02166L4.25756 7.07143L5.30733 8.12119C5.51653 8.33043 5.51653 8.66957 5.30733 8.87879C5.09812 9.088 4.75892 9.088 4.54971 8.87879L3.12114 7.45024C2.91193 7.24103 2.91193 6.90183 3.12114 6.69262L4.54971 5.26405C4.75892 5.05484 5.09812 5.05484 5.30733 5.26405ZM6.69257 6.02166C6.48336 5.81246 6.48336 5.47326 6.69257 5.26405C6.90178 5.05484 7.24098 5.05484 7.45018 5.26405L8.87873 6.69262C9.08795 6.90183 9.08795 7.24103 8.87873 7.45024L7.45018 8.87879C7.24098 9.088 6.90178 9.088 6.69257 8.87879C6.48336 8.66957 6.48336 8.33043 6.69257 8.12119L7.74233 7.07143L6.69257 6.02166Z"
|
||||
fill={fill}
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default FileCode;
|
||||
|
|
@ -234,6 +234,8 @@ import NewTabSmall from './NewTabSmall.jsx';
|
|||
import Code from './Code.jsx';
|
||||
import WorkflowV3 from './WorkflowV3.jsx';
|
||||
import WorkspaceV3 from './WorkspaceV3.jsx';
|
||||
import FileCode from './FileCode.jsx';
|
||||
import Corners from './Corners.jsx';
|
||||
|
||||
const Icon = (props) => {
|
||||
switch (props.name) {
|
||||
|
|
@ -369,6 +371,8 @@ const Icon = (props) => {
|
|||
return <EyeDisable {...props} />;
|
||||
case 'expand':
|
||||
return <Expand {...props} />;
|
||||
case 'file-code':
|
||||
return <FileCode {...props} />;
|
||||
case 'file01':
|
||||
return <File01 {...props} />;
|
||||
case 'filedownload':
|
||||
|
|
@ -531,6 +535,8 @@ const Icon = (props) => {
|
|||
return <ShiftButtonIcon {...props} />;
|
||||
case 'comments':
|
||||
return <Comments {...props} />;
|
||||
case 'corners':
|
||||
return <Corners {...props} />;
|
||||
case 'share':
|
||||
return <Share {...props} />;
|
||||
case 'shield':
|
||||
|
|
|
|||
Loading…
Reference in a new issue