mirror of
https://github.com/ianarawjo/ChainForge.git
synced 2025-03-14 16:26:45 +00:00
Better node header btn styles
This commit is contained in:
parent
8e237ed159
commit
9685650e45
@ -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}>✕</button>
|
||||
<button className="close-button nodrag" onClick={handleCloseButtonClick}>✕</button>
|
||||
<br/>
|
||||
</div>
|
||||
{/* <button className="AmitSahoo45-button-3 nodrag" onClick={handleRunClick}><div className="play-button"></div></button> */}
|
||||
|
@ -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]);
|
||||
|
@ -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);
|
||||
|
Loading…
x
Reference in New Issue
Block a user