Merge pull request #899 from oslokommune/drag-n-drop-icon

Add drag & drop indicator icon
oslokommune · Oct 19, 2023 · 11eeda2 · 11eeda2
2 parents 5503836 + 2dd7536
commit 11eeda2
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 19 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
     "node": "18"
   },
   "dependencies": {
-    "@oslokommune/punkt-vue2": "^5.1.21",
+    "@oslokommune/punkt-vue2": "^9.2.6",
     "d3": "^7.6.1",
     "d3-array": "^3.1.1",
     "d3-axis": "^3.0.0",
@@ -68,7 +68,7 @@
     "@babel/eslint-parser": "7.16.5",
     "@babel/preset-env": "^7.16.5",
     "@firebase/rules-unit-testing": "^2.0.7",
-    "@oslokommune/punkt-css": "^5.1.19",
+    "@oslokommune/punkt-css": "^9.2.6",
     "@vitejs/plugin-vue2": "^2.2.0",
     "env-cmd": "^10.1.0",
     "esbuild": "^0.15.14",

diff --git a/src/components/Navigation/header/OrganizationSelector.vue b/src/components/Navigation/header/OrganizationSelector.vue
@@ -81,7 +81,7 @@ export default {
   &__item {
     gap: 0.25rem;
     align-items: center;
-    margin: 0.5rem 1.25rem;
+    margin: 0.6875rem 1.25rem;
 
     .pkt-form-check-input {
       width: 1rem;

diff --git a/src/components/widgets/WidgetKpiCard/WidgetKpiCard.vue b/src/components/widgets/WidgetKpiCard/WidgetKpiCard.vue
@@ -4,6 +4,10 @@
     :title="kpi.name"
     :class="['kpi-card-widget', { 'kpi-card-widget--compact': compact }]"
   >
+    <template v-if="hasEditRights" #title-actions>
+      <pkt-icon class="drag-icon" name="drag" />
+    </template>
+
     <div class="kpi-card-widget__inner">
       <div class="kpi-card-widget__trend">
         <period-trend-tag
@@ -33,7 +37,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapGetters, mapState } from 'vuex';
 import {
   filterDuplicatedProgressValues,
   formatKPIValue,
@@ -74,6 +78,7 @@ export default {
 
   computed: {
     ...mapState(['selectedPeriod']),
+    ...mapGetters(['hasEditRights']),
 
     progress() {
       return filterDuplicatedProgressValues(this.progressCollection);
@@ -159,6 +164,19 @@ export default {
     max-width: 50%;
   }
 
+  ::v-deep .widget__header {
+    align-items: flex-start;
+  }
+
+  .drag-icon {
+    --fg-color: var(--color-grayscale-30);
+
+    ::v-deep svg {
+      height: 0.875rem;
+      min-height: 0.875rem;
+    }
+  }
+
   .no-data {
     flex: 1;
     align-self: center;

diff --git a/src/styles/_forms.scss b/src/styles/_forms.scss
@@ -82,7 +82,6 @@
     flex-direction: column;
     gap: 0;
     align-items: flex-start;
-    margin-top: 0.15rem;
     font-weight: 300;
 
     .description {

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';