Merge pull request #896 from oslokommune/pane-de-saturation

De-saturated pane design
oslokommune · Oct 18, 2023 · df9cbc7 · df9cbc7
2 parents 26a9e31 + 575c0ad
commit df9cbc7
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 60 deletions.
diff --git a/src/components/KeyResultLinkCard.vue b/src/components/KeyResultLinkCard.vue
@@ -31,7 +31,7 @@
           </div>
         </div>
 
-        <progress-bar :progression="progression" skin="yellow" compact />
+        <progress-bar :progression="progression" compact />
       </div>
     </a>
   </router-link>
@@ -111,8 +111,8 @@ export default {
 
   &--active {
     color: var(--color-hover);
-    background-color: var(--color-yellow-5);
-    border-color: var(--color-yellow);
+    background-color: var(--color-blue-5);
+    border: 2px solid var(--color-hover);
   }
 }
 

diff --git a/src/components/panes/KeyResultPane.vue b/src/components/panes/KeyResultPane.vue
@@ -13,11 +13,13 @@
       :breadcrumbs="breadcrumbs"
     />
 
+    <h1 class="key-result-pane__title pkt-txt-18-medium">
+      {{ $t('general.keyResult') }}
+    </h1>
+
     <div class="key-result-pane__details">
       <div class="key-result-pane__header">
-        <pkt-tag text-style="normal-text" skin="yellow">
-          {{ $t('general.keyResult') }}
-        </pkt-tag>
+        <h2 class="pkt-txt-18-medium">{{ activeKeyResult.name }}</h2>
 
         <pkt-button
           v-if="hasEditRights"
@@ -30,31 +32,17 @@
         />
       </div>
 
-      <h2 class="pkt-txt-18-medium">{{ activeKeyResult.name }}</h2>
-
       <HTML-output
         v-if="activeKeyResult.description"
         class="key-result-pane__description"
         :html="activeKeyResult.description"
       />
 
-      <h4 class="pkt-txt-14-medium">{{ $t('keyResult.progression') }}:</h4>
-
-      <svg ref="graph" class="key-result-pane__graph"></svg>
-
-      <progress-bar
-        :progression="progression"
-        :right-label="progressionRightLabel"
-        skin="yellow"
-      />
-    </div>
-
-    <div class="key-result-pane__values">
-      <div class="key-result-pane__values-header">
-        <h3 class="pkt-txt-16-medium">{{ $t('keyResult.registeredValues') }}</h3>
+      <div class="key-result-pane__progression">
+        <h4 class="pkt-txt-14-medium">{{ $t('keyResult.progression') }}</h4>
         <pkt-button
           v-if="hasEditRights"
-          :text="$t('keyResult.newValue')"
+          :text="$t('widget.history.value')"
           skin="primary"
           size="small"
           variant="icon-left"
@@ -63,6 +51,14 @@
         />
       </div>
 
+      <svg ref="graph" class="key-result-pane__graph"></svg>
+
+      <progress-bar :progression="progression" :right-label="progressionRightLabel" />
+    </div>
+
+    <div class="key-result-pane__values">
+      <h3 class="pkt-txt-16-medium">{{ $t('keyResult.registeredValues') }}</h3>
+
       <div v-if="isLoading">
         <loading-small />
         {{ $t('general.loading') }}
@@ -124,7 +120,7 @@ import Progress from '@/db/Progress';
 import LineChart from '@/util/LineChart';
 import { getRandomInt } from '@/util';
 import { getKeyResultProgressDetails } from '@/util/keyResultProgress';
-import { PktAlert, PktBreadcrumbs, PktButton, PktTag } from '@oslokommune/punkt-vue2';
+import { PktAlert, PktBreadcrumbs, PktButton } from '@oslokommune/punkt-vue2';
 import PaneWrapper from '@/components/panes/PaneWrapper.vue';
 // import WidgetKeyResultNotes from '@/components/widgets/WidgetKeyResultNotes.vue';
 import WidgetKeyResultDetails from '@/components/widgets/WidgetKeyResultDetails.vue';
@@ -142,7 +138,6 @@ export default {
     PktAlert,
     PktButton,
     PktBreadcrumbs,
-    PktTag,
     PaneWrapper,
     // WidgetKeyResultNotes,
     WidgetKeyResultDetails,
@@ -333,19 +328,21 @@ export default {
 @use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
 
 .key-result-pane {
-  background-color: #faf6f1;
+  background-color: var(--color-gray);
+
+  &__title {
+    @include bp('laptop-up') {
+      margin-top: 2rem;
+    }
+  }
 
   &__details {
     display: flex;
     flex-direction: column;
     gap: 1rem;
     padding: 1.5rem;
     background-color: var(--color-white);
-    border-left: 0.25rem solid var(--color-yellow-50);
-
-    @include bp('laptop-up') {
-      margin-top: 2rem;
-    }
+    border-left: 0.125rem solid var(--color-yellow-50);
   }
 
   &__header {
@@ -358,27 +355,21 @@ export default {
     }
   }
 
+  &__progression {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 0.5rem;
+  }
+
   &__values {
     margin-top: 3rem;
-
-    &-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-bottom: 1rem;
-    }
   }
 
   &__table {
     margin-top: 1rem;
   }
 
-  &__graph {
-    --graph-value-line: var(--color-yellow);
-    --graph-symbol-fill: var(--color-yellow);
-    --graph-symbol-color: var(--color-yellow-100);
-  }
-
   &__widgets {
     margin-top: 3rem;
 

diff --git a/src/components/panes/ObjectivePane.vue b/src/components/panes/ObjectivePane.vue
@@ -11,11 +11,13 @@
       :breadcrumbs="breadcrumbs"
     />
 
+    <h1 class="objective-pane__title pkt-txt-18-medium">
+      {{ $t('general.objective') }}
+    </h1>
+
     <div class="objective-pane__details">
       <div class="objective-pane__header">
-        <pkt-tag text-style="normal-text" skin="blue">
-          {{ $t('general.objective') }}
-        </pkt-tag>
+        <h2 class="pkt-txt-18-medium">{{ activeObjective.name }}</h2>
 
         <pkt-button
           v-if="hasEditRights"
@@ -28,8 +30,6 @@
         />
       </div>
 
-      <h2 class="pkt-txt-18-medium">{{ activeObjective.name }}</h2>
-
       <HTML-output
         v-if="activeObjective.description"
         class="objective-pane__description"
@@ -78,7 +78,7 @@
         <h3 class="pkt-txt-16-medium">{{ $t('general.keyResults') }}</h3>
         <pkt-button
           v-if="hasEditRights"
-          :text="$t('btn.createKeyResult')"
+          :text="$t('general.keyResult')"
           skin="primary"
           size="small"
           variant="icon-left"
@@ -146,7 +146,7 @@
 <script>
 import { format } from 'd3-format';
 import { mapGetters, mapState } from 'vuex';
-import { PktBreadcrumbs, PktButton, PktTag } from '@oslokommune/punkt-vue2';
+import { PktBreadcrumbs, PktButton } from '@oslokommune/punkt-vue2';
 import draggable from 'vuedraggable';
 import { compareKeyResults, contributorTagColor, contributorTagMode } from '@/util/okr';
 import { dateLong, periodDates, uniqueBy } from '@/util';
@@ -174,7 +174,6 @@ export default {
     LoadingSmall,
     PktBreadcrumbs,
     PktButton,
-    PktTag,
     ProgressBar,
     WidgetWeights,
     WidgetObjectiveDetails,
@@ -274,19 +273,21 @@ export default {
 @use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
 
 .objective-pane {
-  background-color: #f5f5f8;
+  background-color: var(--color-gray-light);
+
+  &__title {
+    @include bp('laptop-up') {
+      margin-top: 2rem;
+    }
+  }
 
   &__details {
     display: flex;
     flex-direction: column;
     gap: 1rem;
     padding: 1.5rem;
     background-color: var(--color-white);
-    border-left: 0.25rem solid var(--color-blue-light);
-
-    @include bp('laptop-up') {
-      margin-top: 2rem;
-    }
+    border-left: 0.125rem solid var(--color-blue);
   }
 
   &__header {

diff --git a/src/locale/locales/en-US.json b/src/locale/locales/en-US.json
@@ -347,7 +347,7 @@
     "description": "Description",
     "startValue": "Start value",
     "targetValue": "Target value",
-    "progression": "Progression",
+    "progression": "Key result progression:",
     "unit": "Unit of measurement",
     "defaultUnit": "percent",
     "newValue": "New value",

diff --git a/src/locale/locales/nb-NO.json b/src/locale/locales/nb-NO.json
@@ -347,7 +347,7 @@
     "description": "Beskrivelse",
     "startValue": "Startverdi",
     "targetValue": "Målverdi",
-    "progression": "Progresjon",
+    "progression": "Progresjon for nøkkelresultatet:",
     "unit": "Måleenhet",
     "defaultUnit": "prosent",
     "newValue": "Ny verdi",