Merge pull request #876 from oslokommune/pane-design-adjustments

Pane design adjustments
oslokommune · Sep 26, 2023 · 3f8243a · 3f8243a
2 parents 6a0758b + 099e26e
commit 3f8243a
Show file tree

Hide file tree

Showing 7 changed files with 115 additions and 67 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "node": "18"
   },
   "dependencies": {
-    "@oslokommune/punkt-vue2": "^5.1.21",
+    "@oslokommune/punkt-vue2": "^8.0.6",
     "d3": "^7.6.1",
     "d3-array": "^3.1.1",
     "d3-axis": "^3.0.0",
@@ -66,7 +66,7 @@
   "devDependencies": {
     "@babel/eslint-parser": "7.16.5",
     "@babel/preset-env": "^7.16.5",
-    "@oslokommune/punkt-css": "^5.1.19",
+    "@oslokommune/punkt-css": "^8.0.5",
     "@vitejs/plugin-vue2": "^2.2.0",
     "env-cmd": "^10.1.0",
     "esbuild": "^0.15.14",

diff --git a/src/components/panes/KeyResultPane.vue b/src/components/panes/KeyResultPane.vue
@@ -1,22 +1,24 @@
 <template>
   <pane-wrapper
     ref="pane"
-    :title="$t('general.keyResult')"
     class="key-result-pane"
     closable
     @close="
       $router.push({ name: 'ObjectiveHome', params: { objectiveId: activeObjective.id } })
     "
   >
-    <archived-restore
-      v-if="activeKeyResult.archived"
-      class="mt-size-16"
-      :restore="restore"
-      :object-type="$t('archived.keyResult')"
+    <pkt-breadcrumbs
+      class="pkt-hide-laptop-up"
+      navigation-type="router"
+      :breadcrumbs="breadcrumbs"
     />
 
+    <pkt-tag text-style="normal-text" skin="grey" class="mt-size-8">
+      {{ $t('general.keyResult') }}
+    </pkt-tag>
+
     <div class="key-result-pane__title">
-      <h2 class="pkt-txt-16-medium">{{ activeKeyResult.name }}</h2>
+      <h2 class="pkt-txt-18-medium">{{ activeKeyResult.name }}</h2>
       <pkt-button
         v-if="hasEditRights"
         v-tooltip="$t('btn.updateKeyResult')"
@@ -103,13 +105,12 @@ import Progress from '@/db/Progress';
 import LineChart from '@/util/LineChart';
 import { getRandomInt } from '@/util';
 import { getKeyResultProgressDetails } from '@/util/keyResultProgress';
-import { PktAlert, PktButton } from '@oslokommune/punkt-vue2';
+import { PktAlert, PktBreadcrumbs, PktButton, PktTag } from '@oslokommune/punkt-vue2';
 import PaneWrapper from '@/components/panes/PaneWrapper.vue';
 import WidgetWrapper from '@/components/widgets/WidgetWrapper.vue';
 import WidgetProgressHistory from '@/components/widgets/WidgetProgressHistory/WidgetProgressHistory.vue';
 // import WidgetKeyResultNotes from '@/components/widgets/WidgetKeyResultNotes.vue';
 import WidgetKeyResultDetails from '@/components/widgets/WidgetKeyResultDetails.vue';
-import ArchivedRestore from '@/components/ArchivedRestore.vue';
 import HTMLOutput from '@/components/HTMLOutput.vue';
 import ProgressModal from '@/components/modals/ProgressModal.vue';
 import ProgressBar from '@/components/ProgressBar.vue';
@@ -120,12 +121,13 @@ export default {
   components: {
     PktAlert,
     PktButton,
+    PktBreadcrumbs,
+    PktTag,
     PaneWrapper,
     Widget: WidgetWrapper,
     WidgetProgressHistory,
     // WidgetKeyResultNotes,
     WidgetKeyResultDetails,
-    ArchivedRestore,
     HTMLOutput,
     ProgressModal,
     ProgressBar,
@@ -140,7 +142,7 @@ export default {
   }),
 
   computed: {
-    ...mapState(['activePeriod']),
+    ...mapState(['activeItem', 'activePeriod']),
     ...mapState('okrs', ['activeObjective', 'activeKeyResult']),
     ...mapGetters(['hasEditRights']),
 
@@ -169,6 +171,20 @@ export default {
         { unit: this.activeKeyResult.unit }
       )}`;
     },
+
+    breadcrumbs() {
+      return [
+        { text: this.activeItem.name, href: { name: 'ItemHome' } },
+        {
+          text: this.activeObjective.name,
+          href: {
+            name: 'ObjectiveHome',
+            params: { objectiveId: this.activeObjective.id },
+          },
+        },
+        { text: this.activeKeyResult.name },
+      ];
+    },
   },
 
   watch: {
@@ -291,7 +307,6 @@ export default {
   &__title {
     display: flex;
     justify-content: space-between;
-    margin-top: 1rem;
     text-wrap: balance;
 
     .pkt-btn {
@@ -330,4 +345,12 @@ export default {
     }
   }
 }
+
+::v-deep .pkt-breadcrumbs--mobile {
+  width: 100%;
+
+  .pkt-breadcrumbs__text {
+    white-space: nowrap;
+  }
+}
 </style>
diff --git a/src/components/panes/ObjectivePane.vue b/src/components/panes/ObjectivePane.vue
@@ -1,13 +1,22 @@
 <template>
   <pane-wrapper
     ref="pane"
-    :title="$t('general.objective')"
     class="objective-pane"
     closable
     @close="$router.push({ name: 'ItemHome' })"
   >
+    <pkt-breadcrumbs
+      class="pkt-hide-laptop-up"
+      navigation-type="router"
+      :breadcrumbs="breadcrumbs"
+    />
+
+    <pkt-tag text-style="normal-text" skin="grey" class="mt-size-8">
+      {{ $t('general.objective') }}
+    </pkt-tag>
+
     <div class="objective-pane__title">
-      <h2 class="pkt-txt-16-medium">{{ activeObjective.name }}</h2>
+      <h2 class="pkt-txt-18-medium">{{ activeObjective.name }}</h2>
       <pkt-button
         v-if="hasEditRights"
         v-tooltip="$t('btn.updateObjective')"
@@ -31,11 +40,9 @@
       :progression="activeObjective.progression"
     />
 
-    <div v-if="period" class="objective-pane__period">
-      <span class="pkt-txt-16-light">{{ $t('objective.period') }}</span>
-      <pkt-tag text-style="normal-text" skin="beige" size="small">
-        {{ periodDates(period) }}
-      </pkt-tag>
+    <div v-if="period" class="mt-size-16">
+      <div class="pkt-txt-14-medium">{{ $t('objective.period') }}</div>
+      <div class="pkt-txt-14">{{ periodDates(period) }}</div>
     </div>
 
     <div class="objective-pane__key-results">
@@ -91,7 +98,7 @@ import { format } from 'd3-format';
 import { mapGetters, mapState } from 'vuex';
 import { dateLong, periodDates } from '@/util';
 import { db } from '@/config/firebaseConfig';
-import { PktButton, PktTag } from '@oslokommune/punkt-vue2';
+import { PktBreadcrumbs, PktButton, PktTag } from '@oslokommune/punkt-vue2';
 import ProgressBar from '@/components/ProgressBar.vue';
 import PaneWrapper from '@/components/panes/PaneWrapper.vue';
 import LoadingSmall from '@/components/LoadingSmall.vue';
@@ -110,6 +117,7 @@ export default {
     OkrLinkCard,
     HTMLOutput,
     LoadingSmall,
+    PktBreadcrumbs,
     PktButton,
     PktTag,
     ProgressBar,
@@ -123,6 +131,7 @@ export default {
   }),
 
   computed: {
+    ...mapState(['activeItem']),
     ...mapState('okrs', ['activeObjective', 'activeKeyResult']),
     ...mapGetters(['hasEditRights']),
 
@@ -143,6 +152,13 @@ export default {
 
       return null;
     },
+
+    breadcrumbs() {
+      return [
+        { text: this.activeItem.name, href: { name: 'ItemHome' } },
+        { text: this.activeObjective.name },
+      ];
+    },
   },
 
   watch: {
@@ -186,22 +202,13 @@ export default {
   &__title {
     display: flex;
     justify-content: space-between;
-    margin-top: 1rem;
     text-wrap: balance;
 
     .pkt-btn {
       margin: -0.75rem 0 0 1rem;
     }
   }
 
-  &__period > span {
-    &:first-child {
-      display: block;
-      margin-bottom: 0.25rem;
-      color: var(--color-grayscale-60);
-    }
-  }
-
   &__progression {
     margin-top: 1rem;
   }
@@ -271,4 +278,12 @@ export default {
     }
   }
 }
+
+::v-deep .pkt-breadcrumbs--mobile {
+  width: 100%;
+
+  .pkt-breadcrumbs__text {
+    white-space: nowrap;
+  }
+}
 </style>
diff --git a/src/components/panes/PaneWrapper.vue b/src/components/panes/PaneWrapper.vue
@@ -14,7 +14,7 @@
     </div>
 
     <div class="pane__inner">
-      <div class="pane__header">
+      <div v-if="title" class="pane__header">
         <h1 class="pkt-txt-18-medium">{{ title }}</h1>
       </div>
 
@@ -38,7 +38,7 @@ export default {
   props: {
     title: {
       type: String,
-      required: true,
+      default: null,
     },
     closable: {
       type: Boolean,

diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -1,3 +1,7 @@
+@use '@oslokommune/punkt-css/dist/scss/abstracts/variables' with (
+  $font-path: '@oslokommune/punkt-assets/dist'
+);
+
 @use 'reset';
 @use 'widgets';
 @use 'nav';