feat: Properties panel is edited pencil styling

bbc · Nov 13, 2024 · 7f5fa09 · 7f5fa09
1 parent 958d8e3
commit 7f5fa09
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 19 deletions.
diff --git a/packages/webui/src/client/styles/propertiesPanel.scss b/packages/webui/src/client/styles/propertiesPanel.scss
@@ -188,14 +188,24 @@
 				margin-top: 15px;
 				color: #ddd;
 				padding: 4px 4px;
-
+				position: relative;
+				display: flex;
+				align-items: flex-start;
+				gap: 8px;
+
+				// Add positioning for the pencil icon
+				> svg {
+				  margin-top: 4px;
+				  flex-shrink: 0;
+				}
+
 				> .properties-panel-pop-up__form__schema {
-					border-color: pink;
-					border-width: 0px;
-
+				  border-color: pink;
+				  border-width: 0px;
+				  flex-grow: 1;
 				}
 			}
-
+		
 			> .properties-panel-pop-up__has-been-edited {
 				background-color: #ffffff16;
 				border-radius: 8px;

diff --git a/packages/webui/src/client/ui/UserEditOperations/PropertiesPanel.tsx b/packages/webui/src/client/ui/UserEditOperations/PropertiesPanel.tsx
@@ -360,6 +360,12 @@ function EditingTypeAction(props: {
 						hasBeenEdited ? 'properties-panel-pop-up__has-been-edited' : ''
 					)}
 				>
+					{hasBeenEdited && (
+						<>
+							{' '}
+							<FontAwesomeIcon icon="pencil-alt" />
+						</>
+					)}{' '}
 					<a
 						className={classNames('propertiespanel-pop-up__switchbutton', 'switch-button', {
 							'sb-on': getPendingState() ?? (props.userEditOperation.isActive || false),
@@ -377,12 +383,6 @@ function EditingTypeAction(props: {
 						</div>
 					</a>
 					<span className="propertiespanel-pop-up__label">
-						{hasBeenEdited && (
-							<>
-								{' '}
-								<FontAwesomeIcon icon="pencil-alt" />
-							</>
-						)}{' '}
 						{translateMessage(props.userEditOperation.label, i18nTranslator)}
 					</span>
 				</div>
@@ -532,14 +532,8 @@ function EditingTypeChangeSourceLayerSource(props: {
 						hasBeenEdited ? 'properties-panel-pop-up__has-been-edited' : ''
 					)}
 				>
-					<div
-						className={classNames(
-							'properties-panel-pop-up__form__schema',
-							hasBeenEdited ? 'properties-panel-pop-up__has-been-edited' : ''
-						)}
-						onChange={handleSourceChange}
-					>
-						{hasBeenEdited && <FontAwesomeIcon icon="pencil-alt" />}
+					{hasBeenEdited && <FontAwesomeIcon icon="pencil-alt" />}
+					<div className="properties-panel-pop-up__form__schema" onChange={handleSourceChange}>
 						<StyledSchemaFormInPlace
 							schema={selectedGroupSchema}
 							object={selectedValues}