diff --git a/src/Web/WebMVC/wwwroot/css/site.css b/src/Web/WebMVC/wwwroot/css/site.css
index 7981b10ab..fe152a3f3 100644
--- a/src/Web/WebMVC/wwwroot/css/site.css
+++ b/src/Web/WebMVC/wwwroot/css/site.css
@@ -757,7 +757,6 @@ form .col-md-4 {
background-color: #FFFFFF;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
- /*left: 100px;*/
right: 0px;
}
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/images/arrow-down.png b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/images/arrow-down.png
new file mode 100644
index 000000000..1ebe2e929
Binary files /dev/null and b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/images/arrow-down.png differ
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/images/logout.png b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/images/logout.png
new file mode 100644
index 000000000..9915b9862
Binary files /dev/null and b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/images/logout.png differ
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/images/my_orders.png b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/images/my_orders.png
new file mode 100644
index 000000000..145be925b
Binary files /dev/null and b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/images/my_orders.png differ
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/_variables.scss b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/_variables.scss
index fb6bd2413..179f36d71 100644
--- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/_variables.scss
+++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/_variables.scss
@@ -1,9 +1,56 @@
-$primary-colour: #00A69C;
-$primary-accent: #83D01B;
+// Colors
+$color-brand: #00A69C;
+$color-brand-dark: darken($color-brand, 10%);
+$color-brand-darker: darken($color-brand, 20%);
+$color-brand-bright: lighten($color-brand, 10%);
+$color-brand-brighter: lighten($color-brand, 20%);
-$white-colour: #FFFFFF;
-$grey-colour: #E2E2E2;
-$text-colour: #757575;
+$color-secondary: #83D01B;
+$color-secondary-dark: darken($color-secondary, 10%);
+$color-secondary-darker: darken($color-secondary, 20%);
+$color-secondary-bright: lighten($color-secondary, 10%);
+$color-secondary-brighter: lighten($color-secondary, 20%);
-$grey-box-shadow: 10px 10px 20px #F2F2F2;
-$grey-box-border: 1px solid #DDDDDD;
\ No newline at end of file
+$color-background-dark: #333333;
+$color-background-darker: #000000;
+$color-background-bright: #EEEEEE;
+$color-background-brighter: #FFFFFF;
+
+$color-foreground-dark: #333333;
+$color-foreground-darker: #000000;
+$color-foreground-bright: #EEEEEE;
+$color-foreground-brighter: #FFFFFF;
+
+// Animations
+$animation-speed-default: .35s;
+$animation-speed-slow: .5s;
+$animation-speed-fast: .15s;
+
+// Fonts
+$font-weight-light: 200;
+$font-weight-semilight: 300;
+$font-weight-normal: 400;
+$font-weight-semibold: 600;
+$font-weight-bold: 700;
+
+$font-size-xs: .5rem; // 8px
+$font-size-s: .85rem; // 13.6px
+$font-size-m: 1rem; // 16px
+$font-size-l: 1.25rem; // 20px
+$font-size-xl: 1.5rem; // 24px
+
+// Medias
+$media-screen-xxs: 360px;
+$media-screen-xs: 640px;
+$media-screen-s: 768px;
+$media-screen-m: 1024px;
+$media-screen-l: 1280px;
+$media-screen-xl: 1440px;
+$media-screen-xxl: 1680px;
+$media-screen-xxxl: 1920px;
+
+// Margins
+$margin-center: 10vw;
+
+$medias: xxs, xs, s, m, l, xl, xxl, xxxl;
+$mediavalues: $media-screen-xxs, $media-screen-xs, $media-screen-s, $media-screen-m, $media-screen-l, $media-screen-xl, $media-screen-xxl, $media-screen-xxxl;
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.component.html b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.component.html
index 55d1d81fe..034a82aee 100644
--- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.component.html
+++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.component.html
@@ -9,7 +9,7 @@
-
+
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.scss b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.scss
index a820a44a4..2888ead1a 100644
--- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.scss
+++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.scss
@@ -1,6 +1,7 @@
@import '../../_variables.scss';
.esh-basketstatus {
+ float:right;
&-image {
height: 36px;
@@ -20,5 +21,6 @@
font-size: 12px;
cursor: pointer;
top: 0;
+ padding-left: 3px;
}
}
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.ts
index 06751547b..11c1f86d0 100644
--- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.ts
+++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.ts
@@ -1,6 +1,5 @@
import { Component, OnInit } from '@angular/core';
-
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs/Subscription';
import { BasketService } from '../basket.service';
import { BasketWrapperService } from '../../shared/services/basket.wrapper.service';
@@ -19,18 +18,12 @@ export class BasketStatusComponent implements OnInit {
ngOnInit() {
this.subscription = this.basketEvents.addItemToBasket$.subscribe(
item => {
- console.log('element received in basket');
- console.log(item);
this.service.setBasket(item).subscribe(res => {
- console.log(res);
this.service.getBasket().subscribe(basket => {
this.badge = basket.items.length;
- console.log('response from basket api');
- console.log(basket.items.length);
});
});
});
}
-
}
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.scss b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.scss
index e7cbdbf7d..aa752bea5 100644
--- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.scss
+++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.scss
@@ -51,6 +51,7 @@
&-total-value {
font-size: 20px;
color: #00a69c;
+ width: 90px;
}
&-total-label {
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.html b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.html
index cc2aafb45..b0dd9f49c 100644
--- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.html
+++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.html
@@ -1,2 +1,8 @@
-userName: {{userName}}
+
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.scss b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.scss
index 76ac3a08e..7ab3b2394 100644
--- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.scss
+++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.scss
@@ -1,3 +1,82 @@
.identity {
+ &-user {
+ position: absolute !important;
+ top: 30px;
+ right: 120px;
+ cursor: pointer;
+ &:hover .identity-userDropdown{
+ display:block;
+ }
+ }
+
+ &-userDropdown {
+ display: none;
+ position: absolute;
+ background-color: #FFFFFF;
+ min-width: 160px;
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+ right: -15px;
+ z-index: 3;
+
+ &:hover{
+ display:block;
+ }
+
+ //TODO: DELETE THIS BLOCK ONCE REFACTOR.
+ & a {
+ color: black;
+ padding: 12px 16px;
+ text-decoration: none;
+ display: block;
+ text-align: right;
+ text-transform: uppercase;
+
+ &:hover{
+ color: #83d01b;
+ }
+ }
+ //
+
+ & div {
+ color: black;
+ padding: 12px 16px;
+ text-decoration: none;
+ display: block;
+ text-align: right;
+ text-transform: uppercase;
+
+ &:hover{
+ color: #83d01b;
+ }
+ }
+ }
+
+ &-downArrow {
+ background-image: url('../images/arrow-down.png');
+ height: 7px;
+ width: 10px;
+ display: inline-block;
+ margin-left: 20px;
+
+ &:hover > identity.userDropdown {
+ display:block;
+ }
+ }
+
+ &-ordersIcon {
+ background-image: url('../images/my_orders.PNG');
+ display: inline-block;
+ height: 20px;
+ width: 20px;
+ margin-left: 15px;
+ }
+
+ &-logOutIcon {
+ background-image: url('../images/logout.PNG');
+ display: inline-block;
+ height: 19px;
+ width: 19px;
+ margin-left: 15px;
+ }
}
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.ts
index 9b8d8352b..ea3b92e9c 100644
--- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.ts
+++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.ts
@@ -33,6 +33,12 @@ export class Identity implements OnInit {
}
}
+ logoutClicked(event: any) {
+ event.preventDefault();
+ console.log('Logout clicked');
+ this.logout();
+ }
+
login() {
this.service.Authorize();
}
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/services/security.service.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/services/security.service.ts
index 32756c0cd..cdf823b27 100644
--- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/services/security.service.ts
+++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/services/security.service.ts
@@ -159,6 +159,9 @@ export class SecurityService {
this.ResetAuthorizationData();
+ //emit observable
+ this.authenticationSource.next(false);
+
window.location.href = url;
}
+ 