Better node header btn styles

This commit is contained in:
Ian Arawjo 2023-05-03 18:09:14 -04:00
parent 8e237ed159
commit 9685650e45
3 changed files with 36 additions and 15 deletions

View File

@ -57,9 +57,9 @@ export default function NodeLabel({ title, nodeId, icon, onEdit, onSave, editabl
/>
{statusIndicator}
<AlertModal ref={alertModal} />
<div style={{float: 'right', marginRight: '5px', marginLeft: '10px'}}>
<div className="node-header-btns-container">
{runButton}
<button className="AmitSahoo45-button-4 nodrag" onClick={handleCloseButtonClick}>&#x2715;</button>
<button className="close-button nodrag" onClick={handleCloseButtonClick}>&#x2715;</button>
<br/>
</div>
{/* <button className="AmitSahoo45-button-3 nodrag" onClick={handleRunClick}><div className="play-button"></div></button> */}

View File

@ -88,11 +88,12 @@ const TextFieldsNode = ({ data, id }) => {
// Whenever 'data' changes, update the input fields to reflect the current state.
useEffect(() => {
const f = data.fields ? Object.keys(data.fields) : [];
setFields(f.map((i) => {
setFields(f.map((i, idx) => {
const val = data.fields ? data.fields[i] : '';
return (
<div className="input-field" key={i}>
<textarea id={i} name={i} className="text-field-fixed nodrag" rows="2" cols="40" value={val} onChange={handleInputChange} /><button id={delButtonId + i} onClick={handleDelete}>x</button>
<textarea id={i} name={i} className="text-field-fixed nodrag" rows="2" cols="40" value={val} onChange={handleInputChange} />
{idx > 0 ? (<button id={delButtonId + i} className="remove-text-field-btn" onClick={handleDelete}>X</button>) : <></>}
</div>
)}));
}, [data.fields, handleInputChange, handleDelete]);

View File

@ -95,6 +95,15 @@
align-items: center;
margin-bottom: 5px;
}
.remove-text-field-btn {
margin-left: 3px;
border-style: none;
background-color: inherit;
color: #bbb;
font-weight: bold;
cursor: pointer;
}
.input-field input {
margin-left: 5px;
@ -107,6 +116,7 @@
border-right: 0px;
border-style: dashed;
margin-bottom: 12px;
padding-bottom: 4px;
}
.prompt-node {
@ -259,9 +269,10 @@
position: relative;
padding: 2px 10px;
margin-top: -5px;
border-radius: 7px;
margin-right: 3px;
border-radius: 5px;
border: 1px solid #999;
font-size: 14px;
font-size: 12px;
/* text-transform: uppercase; */
/* font-weight: 600; */
/* letter-spacing: 2px; */
@ -307,14 +318,21 @@
transform: skewX(-20deg);
}
/** CSS Button style from https://css-buttons-hover.netlify.app/ */
.AmitSahoo45-button-4 {
.node-header-btns-container {
float: right;
margin-right: 0px;
margin-left: 10px;
margin-top: -3px;
}
.close-button {
position: relative;
padding: 2px 10px;
margin-top: -5px;
border-radius: 7px;
padding: 2px 6px;
margin-top: -7px;
border-radius: 5px;
border: 1px solid #999;
font-size: 14px;
font-size: 12px;
/* text-transform: uppercase; */
/* font-weight: 600; */
/* letter-spacing: 2px; */
@ -329,20 +347,21 @@
cursor: pointer;
}
.AmitSahoo45-button-4:hover {
.close-button:hover {
background: rgb(200 , 26, 69);
color: white;
box-shadow: 0 0 30px 5px rgb(234, 63, 106, 0.815);
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.AmitSahoo45-button-4:hover::before {
.close-button:hover::before {
-moz-animation: sh02 0.5s 0s linear;
animation: sh02 0.5s 0s linear;
}
.AmitSahoo45-button-4::before {
.close-button::before {
content: '';
display: block;
width: 0px;
@ -351,6 +370,7 @@
top: 7%;
left: 0%;
opacity: 0;
color: black;
background: #fff;
box-shadow: 0 0 50px 30px #fff;
-webkit-transform: skewX(-20deg);