Adjustments to PropertyFieldColorConfiguration #433

Puzzlepart · Nov 3, 2022 · d71d703 · d71d703
1 parent eaa2721
commit d71d703
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 11 deletions.
diff --git a/SharePointFramework/ProjectWebParts/src/loc/mystrings.d.ts b/SharePointFramework/ProjectWebParts/src/loc/mystrings.d.ts
@@ -1,4 +1,5 @@
 declare interface IProjectWebPartsStrings {
+  RevertDefaultColorConfigurationText: string
   RiskMatrix_Header_ExtremelyLow: string
   RiskMatrix_Header_VeryCritical: string
   RiskMatrixColorScaleConfigLabel: string

diff --git a/SharePointFramework/ProjectWebParts/src/loc/nb-no.js b/SharePointFramework/ProjectWebParts/src/loc/nb-no.js
@@ -1,6 +1,7 @@
 define([], function () {
   return {
-    RiskMatrixColorScaleConfigLabel:'Fargekonfigurasjon',
+    RevertDefaultColorConfigurationText: 'Bruk standard',
+    RiskMatrixColorScaleConfigLabel: 'Fargekonfigurasjon',
     RiskMatrixSizeLabel: 'Størrelse',
     RiskMatrixFullWidthLabel: 'Bruk full bredde',
     ParentProjectsGroupName: 'Overordnede prosjekter',
@@ -62,7 +63,7 @@ define([], function () {
     PhaseChecklistViewUrl: 'Lists/Fasesjekkliste/AllItems.aspx',
     PickReportText: 'Velg rapport',
     SaveText: 'Lagre',
-    SaveColorConfigurationText:'Lagre fargekonfigurasjon',
+    SaveColorConfigurationText: 'Lagre',
     RiskMatrixGroupName: 'Risikomatrise',
     ProjectStatusProjectPropertiesGroupName: 'Prosjektegenskaper (Statusseksjoner)',
     SettingsGroupName: 'Innstillinger',

diff --git a/...on/components/PropertyFieldColorConfiguration/PropertyFieldColorConfiguration.module.scss b/...on/components/PropertyFieldColorConfiguration/PropertyFieldColorConfiguration.module.scss
@@ -1,12 +1,21 @@
 .root {
   .container {
     display: flex;
-    flex-direction: rowx;
+    flex-direction: row;
     justify-content: space-between;
     flex-wrap: wrap;
     margin: 20px 0 0 0;
   }
-  .saveBtn {
+  .actions {
+    display: flex;
+    flex-direction: row;
+    justify-content:  flex-start;
+    flex-wrap: nowrap;
     margin: 15px 0 0 0;
+
+    > div, > button {
+      flex: 1;
+      margin: 0 8px 0 0;
+    }
   }
 }
diff --git a/...trix/PropertyFieldColorConfiguration/components/PropertyFieldColorConfiguration/index.tsx b/...trix/PropertyFieldColorConfiguration/components/PropertyFieldColorConfiguration/index.tsx
@@ -1,4 +1,4 @@
-import { DefaultButton, Label, Slider } from '@fluentui/react'
+import { DefaultButton, Label, PrimaryButton, Slider } from '@fluentui/react'
 import { MATRIX_DEFAULT_COLOR_SCALE_CONFIG } from 'components/RiskMatrix/types'
 import strings from 'ProjectWebPartsStrings'
 import React, { FC } from 'react'
@@ -10,9 +10,14 @@ import { usePropertyFieldColorConfiguration } from './usePropertyFieldColorConfi
 export const PropertyFieldColorConfiguration: FC<IPropertyFieldColorConfigurationProps> = (
   props
 ) => {
-  const { count, setCount, config, onColorChange, onSave } = usePropertyFieldColorConfiguration(
-    props
-  )
+  const {
+    count,
+    setCount,
+    config,
+    onColorChange,
+    onSave,
+    onRevertDefault
+  } = usePropertyFieldColorConfiguration(props)
   return (
     <div className={styles.root}>
       <Label>{props.label}</Label>
@@ -27,12 +32,17 @@ export const PropertyFieldColorConfiguration: FC<IPropertyFieldColorConfiguratio
           />
         ))}
       </div>
-      <div className={styles.saveBtn}>
-        <DefaultButton
+      <div className={styles.actions}>
+        <PrimaryButton
           text={strings.SaveColorConfigurationText}
           onClick={onSave && onSave}
           disabled={!onSave}
         />
+        <DefaultButton
+          text={strings.RevertDefaultColorConfigurationText}
+          onClick={onRevertDefault && onRevertDefault}
+          disabled={!onRevertDefault}
+        />
       </div>
     </div>
   )

diff --git a/...guration/components/PropertyFieldColorConfiguration/usePropertyFieldColorConfiguration.ts b/...guration/components/PropertyFieldColorConfiguration/usePropertyFieldColorConfiguration.ts
@@ -1,3 +1,4 @@
+import { MATRIX_DEFAULT_COLOR_SCALE_CONFIG } from 'components/RiskMatrix'
 import { useState } from 'react'
 import _, { last } from 'underscore'
 import { IPropertyFieldColorConfigurationProps } from '../../types'
@@ -35,10 +36,14 @@ export function usePropertyFieldColorConfiguration(props: IPropertyFieldColorCon
   }
 
   let onSave: () => void = null
+  let onRevertDefault: () => void = null
 
   if (!_.isEqual(props.value, config)) {
     onSave = () => props.onChange(null, config)
   }
+  if (!_.isEqual(MATRIX_DEFAULT_COLOR_SCALE_CONFIG, config)) {
+    onRevertDefault = () => props.onChange(null, undefined)
+  }
 
-  return { config, count, setCount, onColorChange, onSave } as const
+  return { config, count, setCount, onColorChange, onSave, onRevertDefault } as const
 }