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

Automatically resizing codehinter input based on content

Browse source
This commit is contained in:
Shaurya Sharma 2025-02-27 02:44:31 +05:30
parent faeb817c99
commit ac09c2cfd6
11 changed files with 32 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/AppBuilder/QueryManager/QueryEditors/Restapi/TabContent.jsx
View file

@ -30,7 +30,7 @@ export default ({
return (
<>
<div className="row-container query-manager-border-color" key={index}>
<div className="fields-container mb-1">
<div className="fields-container mb-1 restapi-key-value">
<div className="field col-4 rounded-start rest-api-codehinter-key-field">
<CodeHinter
type="basic"
@ -52,7 +52,7 @@ export default ({
/>
</div>
<button
className={`d-flex justify-content-center align-items-center delete-field-option bg-transparent border-0 rounded-0 border-top border-bottom border-end rounded-end ${
className={`d-flex justify-content-center align-items-center delete-field-option bg-transparent border-0 rounded-0 border-top border-bottom border-end rounded-end qm-delete-btn ${
darkMode ? 'delete-field-option-dark' : ''
}`}
role="button"

4
frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/DropDownSelect.jsx
View file

@ -298,7 +298,7 @@ const DropDownSelect = ({
</p>
</div>
) : (
<div className={`col-auto ${buttonClasses}`} id={popoverBtnId.current}>
<div className={`col-auto ${buttonClasses} h-100`} id={popoverBtnId.current}>
<ButtonSolid
size="sm"
variant="tertiary"
@ -322,6 +322,8 @@ const DropDownSelect = ({
},
'gap-0',
'w-100',
'h-100',
'align-items-start',
'rounded-0',
'position-relative',
'font-weight-normal',

3
frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinConstraint.jsx
View file

@ -645,10 +645,9 @@ const JoinOn = ({
</div>
{index > 0 && (
<ButtonSolid
customStyles={{ height: '30px' }}
size="sm"
variant="ghostBlack"
className="px-1 rounded-0 border border-start-0 rounded-end"
className="px-1 rounded-0 border border-start-0 rounded-en qm-delete-btn"
onClick={onRemove}
>
<Trash fill="var(--slate9)" style={{ height: '16px' }} />

5
frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinSelect.jsx
View file

@ -340,10 +340,7 @@ const JsonBfieldsForSelect = ({ selectedJsonbColumns, handleJSonChange, table })
<ButtonSolid
size="sm"
variant="ghostBlack"
className="px-1 rounded-0 border rounded-end"
customStyles={{
height: '30px',
}}
className="px-1 rounded-0 border rounded-end qm-delete-btn"
onClick={() => handleRemove(colDetails.id, colDetails.name, colDetails.table)}
>
<Trash fill="var(--slate9)" style={{ height: '16px' }} />

5
frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinSort.jsx
View file

@ -164,10 +164,7 @@ export default function JoinSort({ darkMode }) {
<ButtonSolid
size="sm"
variant="ghostBlack"
className="px-1 rounded-0 border rounded-end"
customStyles={{
height: '30px',
}}
className="px-1 rounded-0 border rounded-end qm-delete-btn"
onClick={() => setJoinOrderByOptions(joinOrderByOptions.filter((opt, idx) => idx !== i))}
>
<Trash fill="var(--slate9)" style={{ height: '16px' }} />

3
frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinTable.jsx
View file

@ -535,12 +535,11 @@ const RenderFilterSection = ({ darkMode }) => {
<ButtonSolid
customStyles={{
height: '30px',
maxWidth: '30px',
}}
size="sm"
variant="ghostBlack"
className="px-1 rounded-0 border rounded-end col-2"
className="px-1 rounded-0 border rounded-end col-2 qm-delete-btn"
onClick={() => removeFilterConditionEntry(index)}
>
<Trash fill="var(--slate9)" style={{ height: '16px' }} />

5
frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/RenderColumnUI.jsx
View file

@ -54,10 +54,7 @@ const RenderColumnUI = ({
<ButtonSolid
size="sm"
variant="ghostBlack"
className="px-1 rounded-0 border rounded-end"
customStyles={{
height: '30px',
}}
className="px-1 rounded-0 border rounded-end qm-delete-btn"
onClick={() => removeColumnOptionsPair(id)}
>
<Trash fill="var(--slate9)" style={{ height: '16px' }} />

5
frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/RenderFilterSectionUI.jsx
View file

@ -117,10 +117,7 @@ const RenderFilterSectionUI = ({
<ButtonSolid
size="sm"
variant="ghostBlack"
className="px-1 rounded-0 border rounded-end"
customStyles={{
height: '30px',
}}
className="px-1 rounded-0 border rounded-end qm-delete-btn"
onClick={() => removeFilterConditionPair(id)}
>
<Trash fill="var(--slate9)" style={{ height: '16px' }} />

5
frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/RenderSortUI.jsx
View file

@ -86,10 +86,7 @@ const RenderSortUI = ({
<ButtonSolid
size="sm"
variant="ghostBlack"
className="px-1 rounded-0 border rounded-end"
customStyles={{
height: '30px',
}}
className="px-1 rounded-0 border rounded-end qm-delete-btn"
onClick={() => removeSortConditionPair(id)}
>
<Trash fill="var(--slate9)" style={{ height: '16px' }} />

21
frontend/src/_styles/queryManager.scss
View file

@ -1856,8 +1856,9 @@ $border-radius: 4px;
.tjdb-codhinter-wrapper{
.codehinter-input{
.cm-editor{
height: 30px !important;
// height: 30px !important;
min-height: 30px !important;
max-height:100px !important;
border-radius: 0 !important;
border-right: 0 ;
}
@ -1865,8 +1866,9 @@ $border-radius: 4px;
}
.tjdb-limit-offset-codehinter{
.cm-editor{
height: 30px !important;
// height: 30px !important;
min-height: 30px !important;
max-height:100px !important;
}
}
@ -1904,4 +1906,19 @@ $border-radius: 4px;
line-height: 18px;
}
}
}
.qm-delete-btn {
min-height: 30px;
height: 100% !important;
align-items: flex-start !important;
padding-top: 6px;
}
.restapi-key-value {
.code-hinter-wrapper, .code-editor-basic-wrapper, .codehinter-container, .cm-codehinter, .code-editor-query-panel{
height:100%;
max-height: 100px;
}
}

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

@ -15824,6 +15824,7 @@ tbody {
}
.rest-api-options-codehinter {
height: 100%;
.cm-content>.cm-line {
// max-width: 357px !important;
}