Merge pull request #325 from oslokommune/develop

Release 2.7.1
oslokommune · Dec 30, 2021 · 9ed73b5 · 9ed73b5
2 parents 82e7560 + 6344c36
commit 9ed73b5
Show file tree

Hide file tree

Showing 27 changed files with 233 additions and 90 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,18 @@ All notable changes to this project will be documented in this file. The format
 
 ## [UNRELEASED]
 
+## [2.7.1] 2021-12-30
+
+### Changes
+
+- All text colors follow the chosen theme
+- Use the only blue hover color the Oslo design system has to offer on both green and blue themes
+- Line chart changes colors together with the theme
+
+### Fixed
+
+- Header title disappeared when opening the side drawer
+
 ## [2.7.0] 2021-12-29
 
 OKR-tracker has been redesigned!

diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
@@ -55,7 +55,7 @@ further defined and clarified by project maintainers.
 ## Enforcement
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported by contacting the project team at aulon.mujaj@origo.oslo.kommune.no. All
+reported by contacting the project team at dataspeilet@oslo.kommune.no. All
 complaints will be reviewed and investigated and will result in a response that
 is deemed necessary and appropriate to the circumstances. The project team is
 obligated to maintain confidentiality with regard to the reporter of an incident.

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "okr-tracker",
-  "version": "2.7.0",
+  "version": "2.7.1",
   "private": true,
   "scripts": {
     "dev": "firebase emulators:start --import=./mock_data & vite",

diff --git a/src/components/ActionBar.vue b/src/components/ActionBar.vue
@@ -58,7 +58,7 @@ export default {
 
 .action-bar__period-dates {
   margin-bottom: 1.5rem;
-  color: var(--color-grey-700);
+  color: var(--color-primary);
   font-size: 0.9em;
 
   @media screen and (min-width: bp(s)) {
@@ -68,6 +68,7 @@ export default {
 }
 
 .action-bar__view {
+  color: var(--color-primary);
   font-weight: 500;
   background: none;
   border: none;

diff --git a/src/components/KeyResultRow.vue b/src/components/KeyResultRow.vue
@@ -132,7 +132,8 @@ export default {
   background-color: var(--color-secondary-light);
 
   &:hover {
-    background-color: var(--color-secondary);
+    color: var(--color-text-secondary);
+    background-color: var(--color-hover);
   }
 }
 
@@ -142,7 +143,7 @@ export default {
 
 .keyResult__info--header {
   height: 100%;
-  color: var(--color-grey-800);
+  color: var(--color-text);
   text-decoration: none;
 }
 
@@ -165,7 +166,7 @@ export default {
   }
 
   &:hover {
-    background-color: var(--color-primary-dark);
+    background-color: var(--color-hover);
     cursor: pointer;
   }
 }

diff --git a/src/components/KpiLink.vue b/src/components/KpiLink.vue
@@ -71,7 +71,8 @@ export default {
   background: var(--color-secondary-light);
 
   &:hover {
-    background: var(--color-secondary);
+    color: var(--color-text-secondary);
+    background: var(--color-hover);
   }
 
   &.disabled {

diff --git a/src/components/Navigation/SiteHeader.vue b/src/components/Navigation/SiteHeader.vue
@@ -1,8 +1,13 @@
 <template>
   <header class="header">
+    <sidebar-navigation :is-open="sidebarOpen" @hide="hideSidebar" />
     <div class="siteHeader-container">
-      <sidebar-navigation />
-
+      <a href="#" role="menuitem" class="header__nav-button" :class="{ 'is-open': sidebarOpen }" @click="sidebarOpen = true">
+        <div class="header__nav-icon" role="presentation">
+          <span class="sidebar__button"></span> <span class="sidebar__button"></span>
+          <span class="sidebar__button"></span> <span class="sidebar__button"></span>
+        </div>
+      </a>
       <div v-if="title" class="title">
         <h1 class="title__name">
           {{ title }}
@@ -47,6 +52,7 @@ export default {
     showProfileIcon: true,
     sidebarOpen: false,
     showProfileModal: false,
+    isOpen: false,
   }),
 
   metaInfo() {
@@ -95,8 +101,8 @@ export default {
   methods: {
     ...mapActions(['reset_state', 'setLoading', 'setActiveOrganization']),
 
-    hideSidebar() {
-      this.sidebarOpen = !this.sidebarOpen;
+    hideSidebar(event) {
+      this.sidebarOpen = event;
     },
 
     openProfileModal() {
@@ -159,4 +165,66 @@ $header-height: 4em;
   margin-right: 0.3em;
   font-size: 1.5rem;
 }
+
+
+.header__nav-button {
+  width: $header-height;
+  height: $header-height;
+  background-color: var(--color-primary);
+  border-radius: 50%;
+  cursor: pointer;
+
+  &.is-open {
+    span {
+      &:nth-child(1),
+      &:nth-child(4) {
+        opacity: 0;
+        transition: transform 1.2s ease-in-out 0s, opacity 0.2s ease-in-out 0s;
+      }
+      &:nth-child(2) {
+        transform: translateY(1em) rotate(45deg);
+        transition: transform 1.4s ease-in-out 0.4s, opacity 0.4s ease-in-out 0.4s;
+      }
+      &:nth-child(3) {
+        transform: translateY(1em) rotate(-45deg);
+        transition: transform 1.4s ease-in-out 0.4s, opacity 0.4s ease-in-out 0.4s;
+      }
+    }
+  }
+}
+
+.header__nav-icon {
+  position: relative;
+  width: 100%;
+  padding: 1em;
+
+  $bar-height: 0.15em;
+  $center: 1em - math.div($bar-height, 2);
+  span {
+    position: absolute;
+    top: $center;
+    left: 1.25em;
+    display: block;
+    width: 1.5em;
+    height: $bar-height;
+    background: var(--color-text-secondary);
+    border-radius: 0.075em;
+    transform-origin: 50% 50%;
+
+    &:nth-child(1) {
+      transform: translateY($center - 0.35em) rotate(0deg);
+      transition: transform 0.15s ease-in-out 0.3s, opacity 0.15s ease-in-out 0.3s;
+    }
+    &:nth-child(2),
+    &:nth-child(3) {
+      transform: translateY(1em) rotate(0deg);
+      transition: transform 0.2s ease-in-out 0s, opacity 0.2s ease-in-out 0s;
+    }
+    &:nth-child(4) {
+      transform: translateY($center + 0.35em + $bar-height) rotate(0deg);
+      transition: transform 0.15s ease-in-out 0.3s, opacity 0.15s ease-in-out 0.3s;
+    }
+  }
+}
+
 </style>
diff --git a/src/components/Navigation/SiteSidebar.vue b/src/components/Navigation/SiteSidebar.vue
@@ -1,12 +1,5 @@
 <template>
-  <div :class="{ 'overlay': isOpen }"  @click.self="hideSidebar">
-    <a href="#" role="menuitem" class="header__nav-button" :class="{ 'is-open': isOpen }" @click.stop="hideSidebar">
-      <div class="header__nav-icon" role="presentation">
-        <span class="sidebar__button"></span> <span class="sidebar__button"></span>
-        <span class="sidebar__button"></span> <span class="sidebar__button"></span>
-      </div>
-    </a>
-
+  <div :class="{ overlay: isOpen }" @click.self="hideSidebar">
     <transition name="slide">
       <aside v-if="isOpen" class="sidebar">
         <div class="sidebar__content">
@@ -111,8 +104,14 @@ export default {
     OsloLogo,
   },
 
+  props: {
+    isOpen: {
+      type: Boolean,
+      required: true,
+    },
+  },
+
   data: () => ({
-    isOpen: false,
     isCollapsed: false,
     appVersion: __APP_VERSION__, // eslint-disable-line no-undef
   }),
@@ -129,7 +128,7 @@ export default {
   watch: {
     $route: {
       handler() {
-        this.isOpen = false;
+        this.$emit('hide', false);
       },
     },
 
@@ -168,7 +167,7 @@ export default {
     },
 
     hideSidebar() {
-      this.isOpen = !this.isOpen;
+      this.$emit('hide', false);
     },
   },
 };
@@ -239,7 +238,7 @@ $header-height: 4em;
   display: flex;
   flex-direction: row;
   width: calc(100vw - 4rem);
-  max-width: 29rem;
+  max-width: 36rem;
   height: 100vh;
 }
 
@@ -275,7 +274,7 @@ $header-height: 4em;
 
   &.is-open {
     z-index: 250;
-    box-shadow: 0px 0px 10px 1px rgb(0 0 0 / 30%);
+    box-shadow: 0 0 10px 1px rgb(0 0 0 / 30%);
     transition: transform 0.5s ease-in-out, background-color 0.3s, box-shadow 0.3s;
 
     span {
@@ -305,7 +304,7 @@ $header-height: 4em;
 
 .slide-enter,
 .slide-leave-to {
-  left: -400px;
+  left: -504px;
 }
 
 .sidebar__group {

diff --git a/src/components/widgets/WidgetAdmin.vue b/src/components/widgets/WidgetAdmin.vue
@@ -130,8 +130,8 @@ export default {
   cursor: pointer;
 
   &:hover {
-    color: var(--color-text);
-    background-color: var(--color-secondary);
+    color: var(--color-text-secondary);
+    background-color: var(--color-hover);
   }
 }
 

diff --git a/src/components/widgets/WidgetWeights.vue b/src/components/widgets/WidgetWeights.vue
@@ -125,8 +125,9 @@ export default {
   border: 1px solid var(--color-secondary-light);
 
   &:hover {
-    background: var(--color-secondary);
-    border: 1px solid var(--color-secondary);
+    color: var(--color-text-secondary);
+    background: var(--color-hover);
+    border: 1px solid var(--color-hover);
   }
 }
 </style>
diff --git a/src/styles/_alerts.scss b/src/styles/_alerts.scss
@@ -8,6 +8,7 @@ $borderRadius: 1.5px;
   margin: 0.5rem 0 1rem;
   padding: 1rem;
   overflow: hidden;
+  color: var(--color-text);
   background: rgba(var(--color-grey-100-rgb), 0.1);
   border-radius: $borderRadius;
   box-shadow: 0 1px 3px rgba(var(--color-grey-500-rgb), 0.2), 0 3px 12px rgba(var(--color-grey-500-rgb), 0.05);

diff --git a/src/styles/_buttons.scss b/src/styles/_buttons.scss
@@ -47,7 +47,7 @@
   background: var(--color-primary);
 
   &:hover {
-    background-color: var(--color-primary-dark);
+    background-color: var(--color-hover);
   }
 }
 

diff --git a/src/styles/_forms.scss b/src/styles/_forms.scss
@@ -27,6 +27,7 @@ textarea {
 .form-label {
   display: block;
   margin-bottom: 0.25rem;
+  color: var(--color-text);
 }
 
 .form-field {
@@ -61,6 +62,7 @@ textarea {
   display: block;
   margin-top: -0.25rem;
   margin-bottom: 0.25rem;
+  color: var(--color-text);
   font-size: 0.85rem;
 }
 
@@ -177,4 +179,5 @@ textarea {
   align-items: center;
   margin-top: 1rem;
   margin-bottom: 1rem;
+  color: var(--color-text);
 }
diff --git a/src/styles/_miller.scss b/src/styles/_miller.scss
@@ -4,7 +4,7 @@
   min-width: 100%;
   height: 100%;
   overflow-x: scroll;
-  color: var(--color-black);
+  color: var(--color-text);
   background: rgba(var(--color-border-rgb), 0.075);
 
   &__container {

diff --git a/src/styles/_tabs.scss b/src/styles/_tabs.scss
@@ -13,8 +13,8 @@
     right: 0;
     bottom: 4px;
     left: 0;
-    height: 1px;
-    background: var(--color-black);
+    height: 2px;
+    background: var(--color-primary);
     content: '';
   }
 
@@ -39,13 +39,13 @@
 .tab {
   position: relative;
   display: block;
-  margin: 0 0.5rem 0.5rem 0;
+  margin: 0 0.5rem 0 0;
   padding: 0.7rem 1rem;
   color: var(--color-text);
   font-weight: 500;
   white-space: nowrap;
   text-decoration: none;
-  background-color: var(--color-bg);
+  background-color: var(--color-bg-dark);
   border: 0;
   border-bottom: 2px solid transparent;
   cursor: pointer;

diff --git a/src/styles/_widgets.scss b/src/styles/_widgets.scss
@@ -5,6 +5,7 @@
   align-self: start;
   width: 100%;
   margin-bottom: 0.5rem;
+  color: var(--color-text);
   background: var(--color-white);
 }
 
@@ -146,8 +147,8 @@
   }
 
   &:hover {
-    color: var(--color-text);
-    background: var(--color-secondary);
+    color: var(--color-text-secondary);
+    background: var(--color-hover);
 
     & > .fa-chevron-left {
       margin-right: 2rem;