feat: indiciate variables support on input field

bitfocus · Sep 20, 2023 · e18efe3 · e18efe3
1 parent 7dec9ea
commit e18efe3
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/webui/src/Controls/OptionsInputField.jsx b/webui/src/Controls/OptionsInputField.jsx
@@ -9,7 +9,7 @@ import {
 } from '../Components'
 import { InternalCustomVariableDropdown, InternalInstanceField } from './InternalInstanceFields'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons'
+import { faDollarSign, faQuestionCircle } from '@fortawesome/free-solid-svg-icons'
 
 export function OptionsInputField({
 	instanceId,
@@ -29,6 +29,7 @@ export function OptionsInputField({
 	}
 
 	let control = undefined
+	let features = {}
 	switch (option.type) {
 		case 'textinput': {
 			control = (
@@ -42,6 +43,7 @@ export function OptionsInputField({
 					setValue={setValue2}
 				/>
 			)
+			features.variables = !!option.useVariables
 			break
 		}
 		case 'dropdown': {
@@ -134,9 +136,10 @@ export function OptionsInputField({
 		<CFormGroup style={{ display: visibility === false ? 'none' : null }}>
 			<CLabel>
 				{option.label}
-				{option.tooltip && (
-					<FontAwesomeIcon style={{ marginLeft: '5px' }} icon={faQuestionCircle} title={option.tooltip} />
+				{features.variables && (
+					<FontAwesomeIcon className="feature-icon" icon={faDollarSign} title={'Supports variables'} />
 				)}
+				{option.tooltip && <FontAwesomeIcon icon={faQuestionCircle} title={option.tooltip} />}
 			</CLabel>
 			{control}
 		</CFormGroup>

diff --git a/webui/src/scss/_button-edit.scss b/webui/src/scss/_button-edit.scss
@@ -18,8 +18,18 @@
 	label {
 		justify-content: left;
 		font-weight: bold;
-		font-size: 0.85em;
+		font-size: 0.95em;
 		margin-bottom: 0.15rem;
+
+		svg {
+			margin-left: 5px;
+
+			&.feature-icon {
+				margin-left: 3px;
+
+				font-size: 0.8rem;
+			}
+		}
 	}
 
 	.png-browse {