Merge branch 'feature/header_menu_uppdatering'

Vastra-Gotalandsregionen · Sep 29, 2023 · 8febc77 · 8febc77
2 parents 0593794 + 1db4d57
commit 8febc77
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Change-log](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+# 10.2.0 (2023-09-29) 
+- Added new look on icon for `vgr-header-menu` with and without expanding. Also added a hover effect on icon and possibility to click directly on icon which was not possible before.
+# 10.1.3 (2023-09-19) 
+- Fixed a bug for aligning a `vgr-checkbox` in a `vgr-grid` which was not working correct
 # 10.1.2 (2023-05-09) 
 - Added possibility to set displayformat on datepicker
 # 10.1.1 (2023-05-09) 

diff --git a/projects/komponentkartan/package.json b/projects/komponentkartan/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vgr-komponentkartan",
-  "version": "10.1.3",
+  "version": "10.2.0",
   "peerDependencies": {
     "@angular/cdk": ">=14.2.3",
     "@angular/common": ">=14.2.4",

diff --git a/projects/komponentkartan/src/lib/controls/header/header.component.scss b/projects/komponentkartan/src/lib/controls/header/header.component.scss
@@ -71,14 +71,18 @@
     }
     .header__login-info-menu {
       cursor: pointer;
-      .header__login-info-menu-arrow {
-        display: inline-block;
+      .header__login-info-menu-dots {
+        display: flex;
+        justify-content: center;
         position: absolute;
         height: 26px;
-        right: 68px;
-        bottom: 12px;
+        width: 20px;
+        right: 61px;
+        bottom: 13px;
         transform: rotate(0deg);
         transition: all ease 0.3s;
+        padding-left: 5px;
+        padding-right: 5px;
         &.expanded {
           transform: rotate(-180deg);
         }
@@ -93,6 +97,15 @@
     }
   }
 
+  .header__login-info-menu-dots:hover {
+    border: 1px solid transparent;
+    border-radius: 5px;
+    background-color: rgb(248, 248, 248, .2);
+    > .icon:hover {
+      color: white;
+    }
+  }
+
   .login-information {
     display: inline-flex;
     color: white;

diff --git a/projects/komponentkartan/src/lib/controls/headerMenu/headerMenu.component.html b/projects/komponentkartan/src/lib/controls/headerMenu/headerMenu.component.html
@@ -3,8 +3,10 @@
   <vgr-login-information [initials]="internalInitials" [userName]="userName" [textColor]="textColor" (mousedown)="clickToggleHeaderMenu($event)"
     [circleColor]="circleColor" [attr.aria-haspopup]="menuItems.length > 0" role="menu">
   </vgr-login-information>
-  <vgr-icon icon="chevron-down" size="xs" class="caret" *ngIf="menuItems.length > 0"
-    class="header__login-info-menu-arrow" [ngClass]="{'expanded' : !hideMenu}"></vgr-icon>
+
+    <vgr-icon icon="{{hideMenu ? 'ellipsis-v' : 'times'}}" size="xs" class="caret" *ngIf="menuItems.length > 0"
+      class="header__login-info-menu-dots" [ngClass]="{'expanded' : !hideMenu}" (mousedown)="clickToggleHeaderMenu($event)"></vgr-icon>
+
   <div class="header-menu header-menu__content" [ngClass]="{'header-menu--hidden' : hideMenu}" *ngIf="menuItems.length > 0">
     <div role="menu" (click)="closeMenuOnClick($event, menuItems)" (keydown)="closeMenuOnClick($event, menuItems)">
       <ng-content></ng-content>

diff --git a/projects/komponentkartan/src/lib/controls/headerMenu/headerMenu.component.scss b/projects/komponentkartan/src/lib/controls/headerMenu/headerMenu.component.scss
@@ -24,12 +24,16 @@
         width: 0;
         position: absolute;
         pointer-events: none;
+        right: 23%;
+        @media screen and (min-width: $desktop-width--medium) {
+          right: 21%;
+        }
     }
     &:after {
         border-color: rgba(255, 255, 255, 0);
         border-bottom-color: #ffffff;
         border-width: 4px;
-        left: 45%;
+        // left: 45%;
     }
   }