fix: geometry edit tools and styling (#1762)

* fix: geometry edit tools and styling * fix: indentation and renaming of toolbar select values * fix: linting errors
terrestris · Nov 11, 2024 · 1b6b833 · 1b6b833
1 parent bfceba3
commit 1b6b833
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 10 deletions.
diff --git a/src/bootstrap.tsx b/src/bootstrap.tsx
@@ -769,6 +769,7 @@ const renderApp = async () => {
               <ConfigProvider
                 locale={getConfigLang(i18n.language)}
                 theme={{
+                  cssVar: true,
                   token: {
                     colorPrimary: Color(style['--primaryColor']).isLight() ?
                       Color(style['--primaryColor']).darken(0.5).hex() :

diff --git a/src/components/EditFeatureDrawer/EditFeatureGeometryToolbar/index.less b/src/components/EditFeatureDrawer/EditFeatureGeometryToolbar/index.less
@@ -3,13 +3,15 @@
   left: -45px;
   top: 50%;
   transform: translateY(-50%);
-  button {
-      background: var(--secondaryColor);
-      border-color: var(--secondaryColor);
 
-      &:hover {
-        background: var(--ant-primary-color-hover);
-        border-color: var(--ant-primary-color-hover);
-      }
+  .ant-btn-variant-solid.react-geo-togglebutton {
+    background: var(--secondaryColor);
+  }
+
+  .ant-btn-variant-solid {
+    &:disabled {
+      background: #f5f5f5;
+      border-color: #d9d9d9
     }
+  }
 }
diff --git a/src/components/EditFeatureDrawer/EditFeatureGeometryToolbar/index.tsx b/src/components/EditFeatureDrawer/EditFeatureGeometryToolbar/index.tsx
@@ -77,6 +77,7 @@ export const EditFeatureGeometryToolbar: React.FC<EditFeatureGeometryToolbarProp
 
   const [editLayer, setEditLayer] = useState<OlLayerVector<OlSourceVector>>();
   const [, setRevision] = useState<number>(0);
+  const [selected, setSelected] = useState<string | undefined>(undefined);
 
   const gjFormat = useMemo(() => new OlFormatGeoJson(), []);
 
@@ -104,8 +105,8 @@ export const EditFeatureGeometryToolbar: React.FC<EditFeatureGeometryToolbarProp
     if (isModified && !formDirty) {
       dispatch(setFormDirty(true));
     }
-  // we only want to change formDirty state when the editHistory changes
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // we only want to change formDirty state when the editHistory changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dispatch, editHistory.current.past]);
 
   useEffect(() => {
@@ -221,10 +222,16 @@ export const EditFeatureGeometryToolbar: React.FC<EditFeatureGeometryToolbarProp
         className="geometry-edit-tb"
         alignment="vertical"
       >
-        <ToggleGroup>
+        <ToggleGroup
+          selected={selected}
+          onChange={(_evt: any, value: string | undefined) => {
+            setSelected(value);
+          }}
+        >
           {
             allowedEditMode.includes('CREATE') ?
               <DrawButton
+                value="create"
                 icon={
                   <FontAwesomeIcon icon={faPencil} />
                 }
@@ -243,6 +250,7 @@ export const EditFeatureGeometryToolbar: React.FC<EditFeatureGeometryToolbarProp
           {
             allowedEditMode.includes('UPDATE') ?
               <ModifyButton
+                value="update"
                 icon={
                   <FontAwesomeIcon icon={faDrawPolygon} />
                 }
@@ -262,6 +270,7 @@ export const EditFeatureGeometryToolbar: React.FC<EditFeatureGeometryToolbarProp
           {
             allowedEditMode.includes('DELETE') ?
               <DeleteButton
+                value="delete"
                 icon={
                   <FontAwesomeIcon icon={faTrash} />
                 }