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

Pane design adjustments
oslokommune · Sep 4, 2023 · 1fa4000 · 1fa4000
2 parents be28e5c + 65eead3
commit 1fa4000
Show file tree

Hide file tree

Showing 11 changed files with 259 additions and 132 deletions.
diff --git a/src/components/AppLayout.vue b/src/components/AppLayout.vue
@@ -43,6 +43,6 @@ export default {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  overflow-y: scroll;
+  overflow-y: auto;
 }
 </style>
diff --git a/src/components/GanttChart.vue b/src/components/GanttChart.vue
@@ -2,14 +2,19 @@
   <div class="gantt">
     <div class="gantt__inner">
       <div class="month-wrapper" @mousedown="startDrag">
-        <div v-if="!loading" ref="today" class="today" :style="todayStyle()">
+        <div
+          v-if="!loading"
+          ref="today"
+          class="today pkt-txt-14-medium"
+          :style="todayStyle()"
+        >
           {{ $t('general.today') }}
         </div>
         <div class="months">
           <div
             v-for="m in months"
             :key="m.valueOf()"
-            class="month"
+            class="month pkt-txt-12-medium"
             :style="`width: ${getDaysInMonth(m) * PPD}px`"
           >
             <span v-if="!loading">{{ dateLongCompact(m) }}</span>
@@ -121,8 +126,8 @@ export default {
 
   data() {
     return {
-      PPD: 6, // Pixels per day
-      minPPD: 4,
+      PPD: 4, // Pixels per day
+      minPPD: 3,
       lineWidth: '0.25rem',
       endPadding: 75, // Padding in pixels before/after the first/last months
       now: new Date(),
@@ -500,7 +505,7 @@ export default {
   flex-direction: column;
   height: 100%;
   overflow: auto;
-  background-color: var(--color-gray-light);
+  background-color: var(--color-gray);
 
   &__inner {
     position: relative;
@@ -522,9 +527,7 @@ export default {
 
 .months {
   display: inline-flex;
-  margin-bottom: 0.5rem;
   margin-left: var(--end-padding);
-  font-weight: 500;
 }
 
 .month {
@@ -564,7 +567,7 @@ export default {
 
 .sep {
   height: var(--sep-height);
-  background: var(--color-grayscale-10);
+  background: rgba(42, 40, 89, 0.25); // blue-dark, 25%;
   border-top: var(--sep-border-width) solid var(--color-primary);
 
   .sep__period {
@@ -588,7 +591,6 @@ export default {
   display: inline-block;
   height: 1.5rem;
   color: var(--color-active);
-  font-weight: 500;
 
   &::after {
     position: absolute;
@@ -616,13 +618,7 @@ export default {
   position: absolute;
   top: var(--period-offset-top);
   height: calc(100% - var(--period-offset-top));
-  background: repeating-linear-gradient(
-    -45deg,
-    var(--color-blue-dark-10),
-    var(--color-blue-dark-10) 4px,
-    var(--color-gray-light) 4px,
-    var(--color-gray-light) 8px
-  );
+  background-color: rgba(42, 40, 89, 0.15); // blue-dark, 15%
 }
 
 .objective-row {

diff --git a/src/components/OkrLinkCard.vue b/src/components/OkrLinkCard.vue
@@ -1,25 +1,39 @@
 <template>
   <router-link v-slot="{ href, navigate, isExactActive }" :to="route" custom>
     <a
-      :class="['okr-link-card', { 'okr-link-card--active': isExactActive || active }]"
+      :class="[
+        'okr-link-card',
+        {
+          'okr-link-card--active': isExactActive || active,
+          'okr-link-card--compact': compact,
+        },
+      ]"
       :href="href"
       @click="activate($event, navigate)"
     >
-      <div class="okr-link-card__title pkt-txt-16-medium">
-        <span>{{ title }}</span>
-      </div>
+      <pkt-tag v-if="!compact" text-style="normal-text" skin="yellow" size="small">
+        {{ activeItem.name }}
+      </pkt-tag>
 
-      <progress-bar :progression="progression" />
+      <span class="okr-link-card__title pkt-txt-14">
+        {{ title }}
+      </span>
+
+      <progress-bar :progression="progression" :compact="compact" />
     </a>
   </router-link>
 </template>
 
 <script>
+import { mapState } from 'vuex';
+import { PktTag } from '@oslokommune/punkt-vue2';
+
 export default {
   name: 'OkrLinkCard',
 
   components: {
     ProgressBar: () => import('@/components/ProgressBar.vue'),
+    PktTag,
   },
 
   props: {
@@ -39,6 +53,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    compact: {
+      type: Boolean,
+      default: false,
+    },
     beforeNavigate: {
       type: Function,
       default: null,
@@ -49,6 +67,10 @@ export default {
     },
   },
 
+  computed: {
+    ...mapState(['activeItem']),
+  },
+
   methods: {
     async activate(event, rootHandler) {
       if (this.beforeNavigate) {
@@ -69,27 +91,27 @@ export default {
 .okr-link-card {
   display: flex;
   flex-direction: column;
+  gap: 0.5rem;
   min-height: 6.5rem;
+  padding: 1rem;
   color: var(--color-text);
   text-decoration: none;
   background-color: var(--color-white);
-  border: 2px solid var(--color-grayscale-10);
+  border: 2px solid rgba(42, 40, 89, 0.25); // blue-dark, 25%
   cursor: pointer;
 
   &:hover {
     color: var(--color-hover);
   }
 
+  &__title {
+    text-wrap: balance;
+  }
+
   &--active {
     color: var(--color-hover);
+    background-color: var(--color-blue-5);
     border: 2px solid var(--color-hover);
   }
-
-  &__title {
-    display: flex;
-    flex-grow: 1;
-    align-items: center;
-    padding: 0.5rem 1rem 0 1rem;
-  }
 }
 </style>
diff --git a/src/components/ProgressBar.vue b/src/components/ProgressBar.vue
@@ -1,10 +1,7 @@
 <template>
-  <div class="progress-bar">
+  <div :class="['progress-bar', { 'progress-bar--compact': compact }]">
     <h4 v-if="title" class="pkt-txt-14-medium">{{ title }}</h4>
     <div class="progress-bar__bar">
-      <span class="progress-bar__label" :style="progressLabelStyle">
-        {{ formattedPercent }}
-      </span>
       <div
         :class="[
           'progress-bar__value',
@@ -17,6 +14,9 @@
         aria-valuemax="100"
         :aria-valuenow="percent"
       ></div>
+      <span class="progress-bar__label" :style="progressLabelStyle">
+        {{ formattedPercent }}
+      </span>
     </div>
     <div v-if="leftLabel || rightLabel" class="progress-bar__sub-labels">
       <span v-if="leftLabel" class="progress-bar__label">
@@ -52,6 +52,10 @@ export default {
       type: String,
       default: null,
     },
+    compact: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   computed: {
@@ -83,12 +87,12 @@ export default {
 
   &__bar {
     position: relative;
-    margin-top: 1.5rem;
+    margin: 0.5rem 0 1rem 0;
     background-color: var(--color-grayscale-10);
 
     > span {
       position: absolute;
-      top: -1.25rem;
+      bottom: -1.25rem;
       width: 2.1rem;
       text-align: center;
     }
@@ -119,5 +123,11 @@ export default {
       margin-left: auto;
     }
   }
+
+  &--compact {
+    .progress-bar__value {
+      height: 0.5rem;
+    }
+  }
 }
 </style>
diff --git a/src/components/layout/PaneLayout.vue b/src/components/layout/PaneLayout.vue
@@ -35,7 +35,7 @@ export default {
     width: 0;
     height: 100%;
     overflow: auto;
-    border-left: 1px solid var(--color-grayscale-10);
+    border-left: 1px solid var(--color-grayscale-20);
 
     &:nth-last-child(-n + 1) {
       display: block;

diff --git a/src/components/panes/KeyResultPane.vue b/src/components/panes/KeyResultPane.vue
@@ -1,13 +1,22 @@
 <template>
   <pane-wrapper
-    :title="activeKeyResult.name"
+    ref="pane"
+    :title="$t('general.keyResult')"
     class="key-result-pane"
     closable
     @close="
       $router.push({ name: 'ObjectiveHome', params: { objectiveId: activeObjective.id } })
     "
   >
-    <template #actions>
+    <archived-restore
+      v-if="activeKeyResult.archived"
+      class="mt-size-16"
+      :restore="restore"
+      :object-type="$t('archived.keyResult')"
+    />
+
+    <div class="key-result-pane__title">
+      <h2 class="pkt-txt-16-medium">{{ activeKeyResult.name }}</h2>
       <pkt-button
         v-if="hasEditRights"
         v-tooltip="$t('btn.updateKeyResult')"
@@ -17,16 +26,9 @@
         icon-name="edit"
         @onClick="$emit('edit-key-result')"
       />
-    </template>
-
-    <archived-restore
-      v-if="activeKeyResult.archived"
-      class="mt-size-16"
-      :restore="restore"
-      :object-type="$t('archived.keyResult')"
-    />
+    </div>
 
-    <p v-if="activeKeyResult.description" class="pkt-txt-18-light">
+    <p v-if="activeKeyResult.description" class="pkt-txt-14">
       {{ activeKeyResult.description }}
     </p>
 
@@ -46,9 +48,8 @@
       @delete-record="deleteHistoryRecord"
     >
       <template #title-actions>
-        <div v-if="hasEditRights" data-mode="dark">
+        <div v-if="hasEditRights">
           <pkt-button
-            v-tooltip="$t('keyResult.newValue')"
             :text="$t('keyResult.newValue')"
             skin="primary"
             size="small"
@@ -172,6 +173,10 @@ export default {
           return;
         }
 
+        this.$nextTick(() => {
+          this.$refs.pane.$el.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+
         this.isLoading = true;
         await this.$bind(
           'progress',
@@ -274,27 +279,48 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use '@/styles/typography';
 @use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
 
 .key-result-pane {
+  &__title {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 1rem;
+    text-wrap: balance;
+
+    .pkt-btn {
+      margin: -0.75rem 0 0 1rem;
+    }
+  }
+
   &__progression {
     margin-top: 1rem;
   }
 
   &__values,
   &__graph {
-    margin-top: 3rem;
     padding: 0;
     border: 0;
   }
+  &__values {
+    margin-top: 1rem;
+  }
 
-  &__widgets {
-    margin-top: 2rem;
+  ::v-deep .widget {
+    padding: 1.5rem 0;
+
+    h3 {
+      @include get-text('pkt-txt-16-medium');
+    }
+  }
 
+  &__widgets {
     ::v-deep .widget {
-      padding: 0;
       border: 0;
+
+      h3 {
+        @include get-text('pkt-txt-16');
+      }
     }
   }
 }