feat(ui/flux): add caret to query builder overwrite confirmation

pull/5895/head
Pavel Zavora 2022-03-21 15:40:55 +01:00
parent 2ef7965695
commit 0323d09cdf
2 changed files with 25 additions and 2 deletions

View File

@ -228,7 +228,7 @@ button.flux-query-builder--add-card-button {
display: flex;
z-index: 5000;
span {
.fqb--confirm-label {
margin: 0 8px
}
> button {
@ -237,3 +237,16 @@ button.flux-query-builder--add-card-button {
background-image: linear-gradient(45deg, rgb(191, 61, 94) 0%, rgb(249, 95, 83) 100%)
}
}
.fqb--confirm-caret {
content: "";
width: 0;
height: 0;
position: fixed;
border-top: 6px solid transparent;
border-bottom: 6px solid #ff8564;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
margin-top: -12px;
margin-left: -3px;
z-index: 9999;
}

View File

@ -99,7 +99,7 @@ const FluxQueryBuilderSubmit = ({
}px`,
}}
>
<span>
<span className="fqb--confirm-label">
Submitting the Script Builder will overwrite the existing Flux
script, any changes you have made using Flux will be discarded.
This cannot be recovered.
@ -127,6 +127,16 @@ const FluxQueryBuilderSubmit = ({
/>
</ClickOutside>
</div>
<span
className="fqb--confirm-caret"
style={{
left: `${
buttonRef.current.getBoundingClientRect().left +
buttonRef.current.getBoundingClientRect().width / 2
}px`,
top: `${buttonRef.current.getBoundingClientRect().bottom}px`,
}}
/>
</>
)}
</div>