added unfold icon when query panel is not expanded (#5173)

This commit is contained in:
Manish Kushare 2023-01-04 15:16:34 +05:30 committed by GitHub
parent 08e8b5fc3a
commit bf7d576a90
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -81,17 +81,22 @@ const QueryPanel = ({ children }) => {
<h5 className="mb-0 font-weight-500 cursor-pointer" onClick={toggleQueryEditor}>
QUERIES
</h5>
<span
onClick={toggleQueryEditor}
className="cursor-pointer m-1 toggle-query-editor-svg d-flex"
data-tip="Show query editor"
>
<svg width="auto" height="auto" viewBox="0 0 6 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M3.00013 4.18288C2.94457 4.18288 2.88624 4.17177 2.82513 4.14954C2.76402 4.12732 2.70569 4.08843 2.65013 4.03288L0.366797 1.74954C0.266797 1.64954 0.216797 1.52732 0.216797 1.38288C0.216797 1.23843 0.266797 1.11621 0.366797 1.01621C0.466797 0.916211 0.583464 0.866211 0.716797 0.866211C0.85013 0.866211 0.966797 0.916211 1.0668 1.01621L3.00013 2.94954L4.93346 1.01621C5.03346 0.916211 5.15291 0.866211 5.2918 0.866211C5.43069 0.866211 5.55013 0.916211 5.65013 1.01621C5.75013 1.11621 5.80013 1.23566 5.80013 1.37454C5.80013 1.51343 5.75013 1.63288 5.65013 1.73288L3.35013 4.03288C3.29457 4.08843 3.23902 4.12732 3.18346 4.14954C3.12791 4.17177 3.0668 4.18288 3.00013 4.18288ZM0.366797 10.9662C0.266797 10.8662 0.216797 10.7468 0.216797 10.6079C0.216797 10.469 0.266797 10.3495 0.366797 10.2495L2.65013 7.96621C2.70569 7.91065 2.76402 7.87177 2.82513 7.84954C2.88624 7.82732 2.94457 7.81621 3.00013 7.81621C3.0668 7.81621 3.12791 7.82732 3.18346 7.84954C3.23902 7.87177 3.29457 7.91065 3.35013 7.96621L5.65013 10.2662C5.75013 10.3662 5.80013 10.4829 5.80013 10.6162C5.80013 10.7495 5.75013 10.8662 5.65013 10.9662C5.55013 11.0662 5.42791 11.1162 5.28346 11.1162C5.13902 11.1162 5.0168 11.0662 4.9168 10.9662L3.00013 9.04954L1.08346 10.9662C0.983464 11.0662 0.864019 11.1162 0.72513 11.1162C0.586241 11.1162 0.466797 11.0662 0.366797 10.9662Z"
fill="#576574"
/>
</svg>
<span onClick={toggleQueryEditor} className="cursor-pointer m-1 d-flex" data-tip="Show query editor">
{isExpanded ? (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M8.00013 6.18288C7.94457 6.18288 7.88624 6.17177 7.82513 6.14954C7.76402 6.12732 7.70569 6.08843 7.65013 6.03288L5.3668 3.74954C5.2668 3.64954 5.2168 3.52732 5.2168 3.38288C5.2168 3.23843 5.2668 3.11621 5.3668 3.01621C5.4668 2.91621 5.58346 2.86621 5.7168 2.86621C5.85013 2.86621 5.9668 2.91621 6.0668 3.01621L8.00013 4.94954L9.93346 3.01621C10.0335 2.91621 10.1529 2.86621 10.2918 2.86621C10.4307 2.86621 10.5501 2.91621 10.6501 3.01621C10.7501 3.11621 10.8001 3.23566 10.8001 3.37454C10.8001 3.51343 10.7501 3.63288 10.6501 3.73288L8.35013 6.03288C8.29457 6.08843 8.23902 6.12732 8.18346 6.14954C8.12791 6.17177 8.0668 6.18288 8.00013 6.18288ZM5.3668 12.9662C5.2668 12.8662 5.2168 12.7468 5.2168 12.6079C5.2168 12.469 5.2668 12.3495 5.3668 12.2495L7.65013 9.96621C7.70569 9.91065 7.76402 9.87177 7.82513 9.84954C7.88624 9.82732 7.94457 9.81621 8.00013 9.81621C8.0668 9.81621 8.12791 9.82732 8.18346 9.84954C8.23902 9.87177 8.29457 9.91065 8.35013 9.96621L10.6501 12.2662C10.7501 12.3662 10.8001 12.4829 10.8001 12.6162C10.8001 12.7495 10.7501 12.8662 10.6501 12.9662C10.5501 13.0662 10.4279 13.1162 10.2835 13.1162C10.139 13.1162 10.0168 13.0662 9.9168 12.9662L8.00013 11.0495L6.08346 12.9662C5.98346 13.0662 5.86402 13.1162 5.72513 13.1162C5.58624 13.1162 5.4668 13.0662 5.3668 12.9662Z"
fill="#121212"
/>
</svg>
) : (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M5.3668 5.43327C5.2668 5.33327 5.2168 5.21105 5.2168 5.0666C5.2168 4.92216 5.2668 4.79994 5.3668 4.69994L7.65013 2.4166C7.70569 2.36105 7.76124 2.32216 7.8168 2.29993C7.87235 2.27771 7.93346 2.2666 8.00013 2.2666C8.05569 2.2666 8.11402 2.27771 8.17513 2.29993C8.23624 2.32216 8.29457 2.36105 8.35013 2.4166L10.6335 4.69994C10.7335 4.79994 10.7835 4.92216 10.7835 5.0666C10.7835 5.21105 10.7335 5.33327 10.6335 5.43327C10.5335 5.53327 10.4112 5.58327 10.2668 5.58327C10.1224 5.58327 10.0001 5.53327 9.90013 5.43327L8.00013 3.53327L6.10013 5.43327C6.00013 5.53327 5.87791 5.58327 5.73346 5.58327C5.58902 5.58327 5.4668 5.53327 5.3668 5.43327V5.43327ZM8.00013 13.7999C7.94457 13.7999 7.88624 13.7888 7.82513 13.7666C7.76402 13.7444 7.70569 13.7055 7.65013 13.6499L5.3668 11.3666C5.2668 11.2666 5.2168 11.1444 5.2168 10.9999C5.2168 10.8555 5.2668 10.7333 5.3668 10.6333C5.4668 10.5333 5.58902 10.4833 5.73346 10.4833C5.87791 10.4833 6.00013 10.5333 6.10013 10.6333L8.00013 12.5333L9.90013 10.6333C10.0001 10.5333 10.1224 10.4833 10.2668 10.4833C10.4112 10.4833 10.5335 10.5333 10.6335 10.6333C10.7335 10.7333 10.7835 10.8555 10.7835 10.9999C10.7835 11.1444 10.7335 11.2666 10.6335 11.3666L8.35013 13.6499C8.29457 13.7055 8.23902 13.7444 8.18346 13.7666C8.12791 13.7888 8.0668 13.7999 8.00013 13.7999V13.7999Z"
fill="#576574"
/>
</svg>
)}
</span>
</div>
<div