feat: properties panel styling - is edited indication

Author: olzzon

packages/webui/src/client/styles/propertiesPanel.scss

@@ -85,6 +85,11 @@
 				display: block;
 				margin: 10px auto;
 
+				&:active {
+					transform: scale(0.95);
+					top: 2px;
+				}
+
 				> svg {
 					margin-top: -0.1em;
 					vertical-align: middle;
@@ -121,9 +126,7 @@
 				flex-wrap: wrap;
 				margin-top: 0.5em;
 				margin-bottom: 0.5em;
-
-				
-				
+	
 				> .propertiespanel-pop-up__groupselector__button {
 					@include item-type-colors();
 
@@ -153,8 +156,22 @@
 			> .propertiespanel-pop-up__action {
 				margin-top: 15px;
 				color: #ddd;
+				padding: 4px;
+			}
+
+			> .properties-panel-pop-up__form {
+				margin-top: 15px;
+				color: #ddd;
+				padding: 4px;
+			}
+
+			> .properties-panel-pop-up__has-been-edited {
+				background-color: #8a2929c0;
+				border-radius: 8px;
+				padding: 4px
 			}
 
+
 			> .propertiespanel-pop-up__label {
 				color: #ddd;
 			}
@@ -178,6 +195,11 @@
 				border: 1px solid #7F7F7F;
 				color: #ddd;
 
+				&:active {
+					transform: scale(0.95);
+					top: 2px;
+				}
+
 				> svg {
 					margin-top: -0.1em;
 					vertical-align: middle;

packages/webui/src/client/ui/UserEditOperations/PropertiesPanel.tsx

@@ -279,14 +279,22 @@ function EditingTypeAction(props: {
 	pendingChanges: PendingChange[]
 	setPendingChanges: React.Dispatch<React.SetStateAction<PendingChange[]>>
 }) {
-	if (!props.userEditOperation.buttonType) return null
-
-	const getPendingState = (operationId: string) => {
-		const pendingChange = props.pendingChanges.find((change) => change.operationId === operationId)
+	const getPendingState = () => {
+		const pendingChange = props.pendingChanges.find((change) => change.operationId === props.userEditOperation.id)
 		return pendingChange?.switchState
 	}
 
+	const [hasBeenEdited, setHasBeenEdited] = React.useState<boolean>(
+		getPendingState() !== undefined && getPendingState() !== props.userEditOperation.isActive
+	)
+
+	React.useEffect(() => {
+		setHasBeenEdited(getPendingState() !== undefined && getPendingState() !== props.userEditOperation.isActive)
+	}, [props.userEditOperation.id, props.pendingChanges])
+
+	if (!props.userEditOperation.buttonType) return null
 	const addPendingChange = () => {
+		setHasBeenEdited(!hasBeenEdited)
 		props.setPendingChanges((prev) => {
 			// Find if there's an existing pending change for this operation
 			const existingChangeIndex = prev.findIndex((change) => change.operationId === props.userEditOperation.id)
@@ -328,10 +336,15 @@ function EditingTypeAction(props: {
 			)
 		case UserEditingButtonType.SWITCH:
 			return (
-				<div className="propertiespanel-pop-up__action">
+				<div
+					className={classNames(
+						'propertiespanel-pop-up__action',
+						hasBeenEdited ? 'properties-panel-pop-up__has-been-edited' : ''
+					)}
+				>
 					<a
 						className={classNames('propertiespanel-pop-up__switchbutton', 'switch-button', {
-							'sb-on': getPendingState(props.userEditOperation.id) ?? (props.userEditOperation.isActive || false),
+							'sb-on': getPendingState() ?? (props.userEditOperation.isActive || false),
 						})}
 						role="button"
 						onClick={addPendingChange}
@@ -409,6 +422,21 @@ function EditingTypeChangeSourceLayerSource(props: {
 			props.userEditOperation.currentValues.value
 	)
 
+	const getPendingState = () => {
+		const pendingChange = props.pendingChanges.find((change) => change.operationId === props.userEditOperation.id)
+		return pendingChange?.value
+	}
+
+	const [hasBeenEdited, setHasBeenEdited] = React.useState<boolean>(
+		getPendingState() !== undefined && getPendingState() !== props.userEditOperation.currentValues.value
+	)
+
+	React.useEffect(() => {
+		setHasBeenEdited(
+			getPendingState() !== undefined && getPendingState() !== props.userEditOperation.currentValues.value
+		)
+	}, [props.userEditOperation.id, props.pendingChanges])
+
 	const jsonSchema = Object.values<UserEditingSourceLayer>(props.userEditOperation.schemas).find(
 		(layer) => layer.sourceLayerType === selectedSourceGroup
 	)?.schema
@@ -424,6 +452,7 @@ function EditingTypeChangeSourceLayerSource(props: {
 
 	const handleSourceChange = () => {
 		setSelectedValues(selectedValues)
+		setHasBeenEdited(true)
 		// Add to pending changes instead of executing immediately
 		props.setPendingChanges((prev) => {
 			const filtered = prev.filter(
@@ -474,19 +503,24 @@ function EditingTypeChangeSourceLayerSource(props: {
 				})}
 			</div>
 			{selectedGroupSchema && (
-				<>
+				<div
+					className={classNames(
+						'properties-panel-pop-up__form',
+						hasBeenEdited ? 'properties-panel-pop-up__has-been-edited' : ''
+					)}
+				>
 					<a className="propertiespanel-pop-up__label">{t('Source')}:</a>
+					<br />
 					<div onChange={handleSourceChange}>
 						<SchemaFormInPlace
 							schema={selectedGroupSchema}
 							object={selectedValues}
 							translationNamespaces={props.userEditOperation.translationNamespaces}
 						/>
-						<br />
-						<hr />
 					</div>
-				</>
+				</div>
 			)}
+			<hr />
 		</>
 	)
 }