Skip to content
Commits on Source (3)
<ng-container *ngIf="ready">
<ng-container *ngIf="!isProDomain">
<ng-container *ngIf="useNewNavigation; else v2Topbar">
<m-v3-topbar>
<m-v3topbar>
<ng-container search>
<m-search--bar [defaultSizes]="false"></m-search--bar>
</ng-container>
</m-v3-topbar>
</m-v3topbar>
</ng-container>
<ng-template #v2Topbar>
......@@ -40,11 +40,7 @@
</ng-container>
<m-body
[class.has-markers-sidebar]="
session.isLoggedIn() &&
!isProDomain &&
!featuresService.has('navigation-2020')
"
[class.has-markers-sidebar]="hasMarkersSidebar()"
[class.has-v2-navbar]="featuresService.has('top-feeds')"
[class.has-v3-navbar]="featuresService.has('navigation-2020')"
[class.is-pro-domain]="isProDomain"
......
......@@ -187,6 +187,14 @@ export class Minds implements OnInit, OnDestroy {
this.socketsService.setUp();
}
hasMarkersSidebar() {
return (
this.session.isLoggedIn() &&
!this.isProDomain &&
!this.featuresService.has('navigation-2020')
);
}
ngOnDestroy() {
this.loginReferrer.unlisten();
this.scrollToTop.unlisten();
......
......@@ -133,7 +133,6 @@ import { FormDescriptorComponent } from './components/form-descriptor/form-descr
import { FormToastComponent } from './components/form-toast/form-toast.component';
import { SsoService } from './services/sso.service';
import { PagesService } from './services/pages.service';
import { V2TopbarService } from './layout/v2-topbar/v2-topbar.service';
import { DateDropdownsComponent } from './components/date-dropdowns/date-dropdowns.component';
import { SidebarMarkersService } from './layout/sidebar/markers.service';
import { EmailConfirmationComponent } from './components/email-confirmation/email-confirmation.component';
......@@ -147,6 +146,7 @@ import { FormInputCheckboxComponent } from './components/forms/checkbox/checkbox
import { AttachmentPasteDirective } from './directives/paste/attachment-paste.directive';
import { V3TopbarComponent } from './layout/v3-topbar/v3-topbar.component';
import { SidebarNavigationService } from './layout/sidebar/navigation.service';
import { TopbarService } from './layout/topbar.service';
const routes: Routes = [
{
......@@ -464,14 +464,7 @@ const routes: Routes = [
},
MediaProxyService,
SidebarNavigationService,
{
provide: V2TopbarService,
useFactory: V2TopbarService._,
},
{
provide: SidebarNavigationService,
useFactory: SidebarNavigationService._,
},
TopbarService,
{
provide: SidebarMarkersService,
useFactory: SidebarMarkersService._,
......
......@@ -6,7 +6,7 @@ import {
OnInit,
} from '@angular/core';
import { MetaService } from '../../services/meta.service';
import { V2TopbarService } from '../../layout/v2-topbar/v2-topbar.service';
import { TopbarService } from '../../layout/topbar.service';
@Component({
selector: 'm-marketing',
......@@ -20,7 +20,7 @@ export class MarketingComponent implements OnInit, OnDestroy {
constructor(
protected metaService: MetaService,
private topbarService: V2TopbarService
private navigationService: TopbarService
) {}
ngOnInit() {
......@@ -28,7 +28,7 @@ export class MarketingComponent implements OnInit, OnDestroy {
this.metaService.setTitle(this.pageTitle);
}
this.topbarService.toggleMarketingPages(
this.navigationService.toggleMarketingPages(
true,
this.showBottombar,
this.forceBackground
......@@ -36,6 +36,6 @@ export class MarketingComponent implements OnInit, OnDestroy {
}
ngOnDestroy() {
this.topbarService.toggleMarketingPages(false);
this.navigationService.toggleMarketingPages(false);
}
}
<div
class="m-sidebarNavigation__overlay"
[class.m-sidebarNavigation--opened]="isOpened"
(click)="toggle()"
></div>
<div class="m-sidebarNavigation__overlay" (click)="toggle()"></div>
<div
class="m-sidebar--navigation"
[class.m-sidebarNavigation--slide]="isMobile"
[class.m-sidebarNavigation--opened]="isOpened"
[class.m-sidebarNavigation--slide]="layoutMode === 'phone'"
>
<nav>
<div class="m-sidebarNavigation__top">
<a routerLink="/" title="Home" i18n-title *ngIf="isMobile">
<a routerLink="/" title="Home" i18n-title>
<img [src]="cdnAssetsUrl + 'assets/logos/bulb.svg'" />
</a>
......@@ -28,14 +23,14 @@
<m-tooltip
icon="check"
i18n="@@COMMON__NEWSFEED"
[enabled]="!isDesktop && !isMobile"
[enabled]="layoutMode === 'tablet'"
>
Newsfeed
</m-tooltip>
<span
class="m-sidebar--navigation--text"
*ngIf="isDesktop || isMobile"
*ngIf="layoutMode !== 'tablet'"
i18n
>
Newsfeed
......@@ -54,14 +49,14 @@
<m-tooltip
icon="check"
i18n="@@COMMON__DISCOVER"
[enabled]="!isDesktop && !isMobile"
[enabled]="layoutMode === 'tablet'"
>
Discover
</m-tooltip>
<span
class="m-sidebar--navigation--text"
*ngIf="isDesktop || isMobile"
*ngIf="layoutMode !== 'tablet'"
i18n
>
Discover
......@@ -79,14 +74,14 @@
<m-tooltip
icon="check"
i18n="@@COMMON__WALLET"
[enabled]="!isDesktop && !isMobile"
[enabled]="layoutMode === 'tablet'"
>
Wallet
</m-tooltip>
<span
class="m-sidebar--navigation--text"
*ngIf="isDesktop || isMobile"
*ngIf="layoutMode !== 'tablet'"
i18n
>
Wallet
......@@ -104,14 +99,14 @@
<m-tooltip
icon="check"
i18n="@@COMMON__PROFILE"
[enabled]="!isDesktop && !isMobile"
[enabled]="layoutMode === 'tablet'"
>
Profile
</m-tooltip>
<span
class="m-sidebar--navigation--text"
*ngIf="isDesktop || isMobile"
*ngIf="layoutMode !== 'tablet'"
i18n
>
Profile
......@@ -129,13 +124,13 @@
<m-tooltip
icon="check"
i18n="@@COMMON__ANALYTICS"
[enabled]="!isDesktop && !isMobile"
[enabled]="layoutMode === 'tablet'"
>
Analytics
</m-tooltip>
<span
class="m-sidebar--navigation--text"
*ngIf="isDesktop || isMobile"
*ngIf="layoutMode !== 'tablet'"
i18n
>
Analytics
......@@ -153,14 +148,14 @@
<m-tooltip
icon="check"
i18n="@@COMMON__SETTINGS"
[enabled]="!isDesktop && !isMobile"
[enabled]="layoutMode === 'tablet'"
>
Settings
</m-tooltip>
<span
class="m-sidebar--navigation--text"
*ngIf="isDesktop || isMobile"
*ngIf="layoutMode !== 'tablet'"
i18n
>
Settings
......@@ -169,8 +164,6 @@
</li>
</ul>
</nav>
<h5 i18n *ngIf="isDesktop || isMobile">
Groups
</h5>
<ng-template dynamic-host></ng-template>
</div>
m-sidebar--navigation {
display: contents;
&.m-sidebarNavigation--opened {
.m-sidebarNavigation__overlay {
z-index: 999998;
@include m-theme() {
background-color: rgba(themed($m-grey-700), 0.2);
}
}
.m-sidebar--navigation.m-sidebarNavigation--slide {
transform: translateX(316px);
}
}
.m-sidebarNavigation__overlay {
position: fixed;
top: 0;
......@@ -32,6 +46,10 @@ m-sidebar--navigation {
border-right: 1px solid themed($m-grey-400);
}
.m-sidebarNavigation__top {
display: none;
}
&.m-sidebarNavigation--slide {
position: fixed;
top: 0;
......@@ -44,9 +62,9 @@ m-sidebar--navigation {
transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
&.m-sidebarNavigation--opened {
transform: translateX(316px);
}
//&.m-sidebarNavigation--opened {
// transform: translateX(316px);
//}
.m-sidebarNavigation__top {
display: flex;
......@@ -102,93 +120,6 @@ m-sidebar--navigation {
list-style: none;
padding: 0;
}
h5 {
font-size: 11px;
line-height: 30px;
letter-spacing: 1.83px;
text-transform: uppercase;
@include m-theme() {
color: rgba(themed($m-black), 0.3);
}
}
m-group--sidebar-markers {
.m-groupSidebarMarkers__list {
margin: 0;
padding: 0;
width: auto !important;
height: auto !important;
max-width: unset;
min-height: unset;
box-shadow: unset !important;
display: block !important;
overflow: unset !important;
& > li {
width: auto;
height: auto;
border: unset !important;
a {
padding: 8px 0;
font-size: 14px;
font-weight: normal;
line-height: 30px;
white-space: nowrap;
text-overflow: ellipsis;
overflow-x: hidden;
@include m-theme() {
color: themed($m-black);
}
&.m-groupSidebarMarkers__newGroup,
&.m-groupSidebarMarkers__discoverGroups {
@include m-theme() {
color: themed($m-grey-200);
}
i.material-icons {
@include m-theme() {
color: themed($m-grey-500);
}
}
}
m-tooltip {
vertical-align: middle;
margin-right: 21px;
img {
width: 27px;
height: 27px;
}
i.material-icons {
font-size: 20px;
width: 27px;
height: 27px;
}
}
}
}
infinite-scroll {
padding: 2px 0 !important;
width: 48px !important;
.m-infinite-scroll-manual {
font-size: 10px;
padding: 2px;
background-color: transparent !important;
transform: rotate(0) !important;
text-align: left;
}
}
}
}
}
.m-sidebar--navigation--item {
......
import {
Component,
ComponentFactoryResolver,
HostBinding,
HostListener,
Inject,
OnInit,
......@@ -30,10 +31,9 @@ export class SidebarNavigationComponent implements OnInit {
componentRef;
componentInstance: GroupsSidebarMarkersComponent;
isDesktop: boolean = true;
isMobile: boolean = false;
layoutMode: 'phone' | 'tablet' | 'desktop' = 'desktop';
@HostBinding('class.m-sidebarNavigation--opened')
isOpened: boolean = false;
constructor(
......@@ -47,13 +47,13 @@ export class SidebarNavigationComponent implements OnInit {
this.cdnAssetsUrl = this.configs.get('cdn_assets_url');
this.service.setContainer(this);
this.getUser();
}
ngOnInit() {
if (isPlatformBrowser(this.platformId)) {
this.onResize();
}
}
ngOnInit() {
this.createGroupsSideBar();
}
......@@ -72,20 +72,26 @@ export class SidebarNavigationComponent implements OnInit {
this.componentRef = viewContainerRef.createComponent(componentFactory);
this.componentInstance = this.componentRef.instance;
this.componentInstance.showLabels = true;
this.componentInstance.leftSidebar = true;
}
toggle() {
if (this.isMobile) {
toggle(): void {
if (this.layoutMode === 'phone') {
this.isOpened = !this.isOpened;
}
}
@HostListener('window:resize')
onResize() {
this.isDesktop = window.innerWidth > 900;
this.isMobile = window.innerWidth <= 540;
if (window.innerWidth > 900) {
this.layoutMode = 'desktop';
} else if (window.innerWidth > 540 && window.innerWidth <= 900) {
this.layoutMode = 'tablet';
} else {
this.layoutMode = 'phone';
}
if (!this.isMobile) {
if (this.layoutMode !== 'phone') {
this.isOpened = false;
}
}
......
import { Injectable } from '@angular/core';
import { SidebarNavigationComponent } from './navigation.component';
@Injectable()
export class SidebarNavigationService {
container: SidebarNavigationComponent;
static _() {
return new SidebarNavigationService();
}
setContainer(container: SidebarNavigationComponent) {
setContainer(container: SidebarNavigationComponent): void {
this.container = container;
}
toggle() {
toggle(): void {
if (this.container) {
this.container.toggle();
}
......
import { V2TopbarComponent } from './v2-topbar/v2-topbar.component';
import { V3TopbarComponent } from './v3-topbar/v3-topbar.component';
import { FeaturesService } from '../../services/features.service';
import { Injectable } from '@angular/core';
@Injectable()
export class TopbarService {
private container: V2TopbarComponent | V3TopbarComponent;
private useV3Topbar: boolean;
static _(featuresService: FeaturesService) {
return new TopbarService(featuresService);
}
constructor(private featuresService: FeaturesService) {
this.useV3Topbar = this.featuresService.has('navigation-2020');
}
setContainer(container: V2TopbarComponent | V3TopbarComponent) {
this.container = container;
return this;
}
toggleMarketingPages(
value: boolean,
showBottombar: boolean = true,
forceBackground: boolean = true
): void {
if (this.container) {
if (this.useV3Topbar) {
this.container.toggleMarketingPages(value, forceBackground);
} else {
this.container.toggleMarketingPages(
value,
showBottombar,
forceBackground
);
}
}
}
toggleVisibility(visible: boolean): void {
if (this.container) {
if (this.useV3Topbar) {
this.container.toggleVisibility(visible);
} else {
this.container.toggleVisibility(visible);
}
}
}
}
......@@ -14,9 +14,8 @@ import { DynamicHostDirective } from '../../directives/dynamic-host.directive';
import { NotificationsToasterComponent } from '../../../modules/notifications/toaster.component';
import { ThemeService } from '../../../common/services/theme.service';
import { ConfigsService } from '../../services/configs.service';
import { V2TopbarService } from './v2-topbar.service';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { Location } from '@angular/common';
import { NavigationEnd, Router } from '@angular/router';
import { TopbarService } from '../topbar.service';
@Component({
selector: 'm-v2-topbar',
......@@ -50,7 +49,7 @@ export class V2TopbarComponent implements OnInit, OnDestroy {
private themeService: ThemeService,
protected componentFactoryResolver: ComponentFactoryResolver,
configs: ConfigsService,
protected topbarService: V2TopbarService,
protected topbarService: TopbarService,
protected router: Router
) {
this.cdnAssetsUrl = configs.get('cdn_assets_url');
......
import { V2TopbarComponent } from './v2-topbar.component';
export class V2TopbarService {
private container: V2TopbarComponent;
static _() {
return new V2TopbarService();
}
setContainer(container: V2TopbarComponent) {
this.container = container;
return this;
}
toggleMarketingPages(
value: boolean,
showBottombar: boolean = true,
forceBackground: boolean = true
) {
if (this.container) {
this.container.toggleMarketingPages(
value,
showBottombar,
forceBackground
);
}
}
toggleVisibility(visible: boolean) {
this.container.toggleVisibility(visible);
}
}
<ng-template #searchBar>
<div class="m-v3-topbar__SearchBox">
<div class="m-v3Topbar__searchBox">
<ng-content select="[search]"></ng-content>
</div>
</ng-template>
<div class="m-v3-topbar__Top">
<div
class="m-v3Topbar__top"
[class.m-v3Topbar__marketingPages]="marketingPages"
[class.m-v3Topbar__noBackground]="!showBackground"
[style.visibility]="showTopbar ? 'visible' : 'hidden'"
>
<div class="m-grid">
<div class="m-v3topbar__leftColumn">
<nav class="m-v3-topbar__Nav">
<div class="m-v3Topbar__leftColumn">
<nav class="m-v3Topbar__nav">
<a
class="m-v3-topbarNav__Item m-v3-topbarNavItem__Logo"
class="m-v3TopbarNav__item m-v3TopbarNavItem__logo"
routerLink="/"
title="Home"
i18n-title
......@@ -24,7 +29,7 @@
</a>
<ng-template #hamburgerMenu>
<div class="m-v3-topbarNav__Item" (click)="toggleSidebarNav()">
<div class="m-v3TopbarNav__item" (click)="toggleSidebarNav()">
<i class="material-icons">menu</i>
</div>
</ng-template>
......@@ -33,12 +38,12 @@
<div class="m-v3Topbar__spacer" *ngIf="isMobile"></div>
<div class="m-v3topbar__middleColumn" *ngIf="!isMobile">
<div class="m-v3Topbar__middleColumn" *ngIf="!isMobile">
<!-- <a-->
<!-- class="m-v3-topbar__Avatar"-->
<!-- class="m-v3Topbar__avatar"-->
<!-- *ngIf="getCurrentUser()"-->
<!-- [routerLink]="['/', getCurrentUser()?.username]"-->
<!-- routerLinkActive="m-v3-topbar__Avatar&#45;&#45;active"-->
<!-- routerLinkActive="m-v3Topbar__avatar&#45;&#45;active"-->
<!-- >-->
<!-- <minds-avatar-->
<!-- [object]="getCurrentUser()"-->
......@@ -48,7 +53,7 @@
<ng-container *ngTemplateOutlet="searchBar"></ng-container>
</div>
<div class="m-v3topbar__rightColumn">
<div class="m-v3Topbar__rightColumn">
<ng-container *ngIf="isMobile && getCurrentUser()">
<ng-container *ngTemplateOutlet="searchBar"></ng-container>
</ng-container>
......@@ -59,51 +64,51 @@
<!-- logged in user avatar -->
<div class="m-v3-topbar__UserMenu" *ngIf="getCurrentUser()">
<div class="m-v3Topbar__userMenu" *ngIf="getCurrentUser()">
<ng-content select="[icons]"></ng-content>
</div>
</div>
</div>
</div>
<div class="m-v3-topbar__Bottom">
<div class="m-v3Topbar__bottom">
<a
class="m-v3-topbarNav__Item m-v3-topbarNav__RouterNav"
class="m-v3TopbarNav__item m-v3TopbarNav__routerNav"
routerLink="/newsfeed/subscriptions"
routerLinkActive="m-v3-topbarNav__Item--active"
routerLinkActive="m-v3TopbarNav__item--active"
title="Newsfeed"
i18n-title
data-cy="data-minds-nav-newsfeed-button"
>
<i class="material-icons">home</i>
<span class="m-v3-topbarNavItem__Text" i18n>Newsfeed</span>
<span class="m-v3TopbarNavItem__text" i18n>Newsfeed</span>
</a>
<a
class="m-v3-topbarNav__Item m-v3-topbarNav__RouterNav"
class="m-v3TopbarNav__item m-v3TopbarNav__routerNav"
routerLink="/newsfeed/global"
routerLinkActive="m-v3-topbarNav__Item--active"
routerLinkActive="m-v3TopbarNav__item--active"
title="Discovery"
i18n-title
data-cy="data-minds-nav-discovery-button"
>
<i class="material-icons">search</i>
<span class="m-v3-topbarNavItem__Text" i18n>Discovery</span>
<span class="m-v3TopbarNavItem__text" i18n>Discovery</span>
</a>
<a
class="m-v3-topbarNav__Item m-v3-topbarNav__RouterNav"
class="m-v3TopbarNav__item m-v3TopbarNav__routerNav"
routerLink="/wallet"
routerLinkActive="m-v3-topbarNav__Item--active"
routerLinkActive="m-v3TopbarNav__item--active"
title="Wallet"
i18n-title
data-cy="data-minds-nav-wallet-button"
>
<i class="material-icons">account_balance</i>
<span class="m-v3-topbarNavItem__Text" i18n>Wallet</span>
<span class="m-v3TopbarNavItem__text" i18n>Wallet</span>
</a>
</div>
<div class="m-v3-topbar__NotificationsToaster">
<div class="m-v3Topbar__notificationsToaster">
<ng-template dynamic-host></ng-template>
</div>
m-v3-topbar {
m-v3topbar {
.m-grid {
grid-gap: 0;
grid-template-columns: 3fr 5fr 4fr;
......@@ -20,7 +20,7 @@ m-v3-topbar {
opacity: 0;
}
.m-v3topbar__leftColumn {
.m-v3Topbar__leftColumn {
margin-left: 33.3%;
grid-column: 1 / span 1;
min-width: 0;
......@@ -33,12 +33,12 @@ m-v3-topbar {
}
}
.m-v3topbar__middleColumn {
.m-v3Topbar__middleColumn {
grid-column: 2 / span 1;
min-width: 0;
}
.m-v3topbar__rightColumn {
.m-v3Topbar__rightColumn {
grid-column: 3 / span 1;
display: flex;
align-items: center;
......@@ -46,8 +46,8 @@ m-v3-topbar {
}
@media screen and(min-width: $m-grid-max-mobile) {
.m-v3topbar__leftColumn,
.m-v3topbar__middleColumn {
.m-v3Topbar__leftColumn,
.m-v3Topbar__middleColumn {
@include m-theme() {
border-right: 1px solid themed($m-grey-400);
}
......@@ -56,7 +56,7 @@ m-v3-topbar {
}
}
.m-v3-topbar__Top {
.m-v3Topbar__top {
position: fixed;
top: 0;
left: 0;
......@@ -81,7 +81,14 @@ m-v3-topbar {
width: 100%;
}
.m-v3-topbar__SearchBox {
&.m-v3Topbar__noBackground {
@include m-theme() {
background-color: transparent;
border-bottom: none;
}
}
.m-v3Topbar__searchBox {
width: 100%;
height: 100%;
display: flex;
......@@ -155,51 +162,7 @@ m-v3-topbar {
}
}
.m-v3-topbar {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
height: 75px;
max-width: 1296px;
margin: 0 auto;
padding: 0 8px;
//padding-right: 46px;
box-sizing: border-box;
@media screen and (min-width: 1296px) {
padding: 0 46px 0 0;
}
@media screen and (max-width: 480px) {
.m-v3-topbarNav__RouterNav {
display: none;
}
.m-v3-topbar__SearchBox {
display: none;
}
}
}
.m-v3-topbar__Container--left,
.m-v3-topbar__Container--right {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
}
.m-v3-topbar__Container--left {
justify-content: flex-start;
}
.m-v3-topbar__Container--right {
justify-content: flex-end;
}
.m-v3-topbar__Nav {
.m-v3Topbar__nav {
display: flex;
flex-direction: row;
align-items: center;
......@@ -210,7 +173,7 @@ m-v3-topbar {
}
}
.m-v3-topbarNav__Item {
.m-v3TopbarNav__item {
padding: 11px 12px 14px;
display: flex;
flex-direction: row;
......@@ -221,14 +184,14 @@ m-v3-topbar {
color: themed($m-grey-800);
}
&.m-v3-topbarNav__Item--active {
&.m-v3TopbarNav__item--active {
@include m-theme() {
color: themed($m-blue);
border-color: themed($m-blue);
}
}
&.m-v3-topbarNav__Item--no-padding {
&.m-v3TopbarNav__item--no-padding {
padding: 0 12px;
@media screen and (max-width: 480px) {
......@@ -258,7 +221,7 @@ m-v3-topbar {
}
}
.m-v3-topbarNavItem__Logo {
.m-v3TopbarNavItem__logo {
margin: 0 8px 0 0;
padding: 0;
//height: 62px;
......@@ -272,16 +235,16 @@ m-v3-topbar {
}
}
// .m-theme__dark .m-v3-topbarNavItem__Logo,
// .m-theme__light .m-v3-topbarNavItem__Logo:hover {
// .m-theme__dark .m-v3TopbarNavItem__logo,
// .m-theme__light .m-v3TopbarNavItem__logo:hover {
// filter: grayscale(100%);
// }
//
// .m-theme__dark .m-v3-topbarNavItem__Logo:hover {
// .m-theme__dark .m-v3TopbarNavItem__logo:hover {
// filter: grayscale(0%);
// }
.m-v3-topbar__Avatar {
.m-v3Topbar__avatar {
cursor: pointer;
@media screen and (max-width: 810px) {
......@@ -300,18 +263,18 @@ m-v3-topbar {
}
}
&.m-v3-topbar__Avatar--active .minds-avatar {
&.m-v3Topbar__avatar--active .minds-avatar {
@include m-theme() {
box-shadow: 0 0 0 2px themed($m-blue);
}
}
}
.m-v3-topbar__UserMenu {
.m-v3Topbar__userMenu {
min-width: 80px;
}
.m-v3-topbar__Container__LoginWrapper {
.m-v3TopbarContainer__loginWrapper {
@media screen and (max-width: 480px) {
// display: none;
}
......@@ -335,7 +298,7 @@ m-v3-topbar {
}
}
.m-v3-topbar__Bottom {
.m-v3Topbar__bottom {
display: none;
position: fixed;
bottom: 0;
......@@ -362,13 +325,13 @@ m-v3-topbar {
display: flex;
}
.m-v3-topbarNav__RouterNav {
.m-v3TopbarNav__routerNav {
flex-grow: 1;
justify-content: center;
}
}
.m-v3-topbar__NotificationsToaster {
.m-v3Topbar__notificationsToaster {
.m-notifications--toaster {
z-index: 500;
right: 65px;
......
......@@ -16,9 +16,10 @@ import { ThemeService } from '../../services/theme.service';
import { ConfigsService } from '../../services/configs.service';
import { isPlatformBrowser } from '@angular/common';
import { SidebarNavigationService } from '../sidebar/navigation.service';
import { TopbarService } from '../topbar.service';
@Component({
selector: 'm-v3-topbar',
selector: 'm-v3topbar',
templateUrl: 'v3-topbar.component.html',
})
export class V3TopbarComponent implements OnInit, OnDestroy {
......@@ -32,6 +33,11 @@ export class V3TopbarComponent implements OnInit, OnDestroy {
componentRef;
componentInstance: NotificationsToasterComponent;
showTopbar: boolean = true;
forceBackground: boolean = true;
showBackground: boolean = true;
marketingPages: boolean = false;
isMobile: boolean = false;
constructor(
......@@ -41,6 +47,7 @@ export class V3TopbarComponent implements OnInit, OnDestroy {
protected session: Session,
protected cd: ChangeDetectorRef,
protected componentFactoryResolver: ComponentFactoryResolver,
protected topbarService: TopbarService,
@Inject(PLATFORM_ID) private platformId: Object
) {
this.cdnAssetsUrl = this.configs.get('cdn_assets_url');
......@@ -53,6 +60,8 @@ export class V3TopbarComponent implements OnInit, OnDestroy {
ngOnInit() {
this.loadComponent();
this.session.isLoggedIn(() => this.detectChanges());
this.topbarService.setContainer(this);
}
getCurrentUser() {
......@@ -98,6 +107,32 @@ export class V3TopbarComponent implements OnInit, OnDestroy {
this.sidebarService.toggle();
}
/**
* Marketing pages set this to true in order to change how the topbar looks
* @param value
* @param forceBackground
*/
toggleMarketingPages(value: boolean, forceBackground: boolean = true) {
this.marketingPages = value;
this.forceBackground = forceBackground;
this.onScroll();
this.detectChanges();
}
@HostListener('window:scroll')
onScroll() {
this.showBackground = this.forceBackground
? true
: this.marketingPages
? window.document.body.scrollTop > 52
: true;
}
toggleVisibility(visible: boolean) {
this.showTopbar = visible;
this.detectChanges();
}
@HostListener('window:resize')
onResize() {
this.isMobile = window.innerWidth <= 540;
......
......@@ -5,6 +5,7 @@ m-login {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
position: relative;
grid-area: content;
&:not(.m-login__newDesign) {
@include m-theme() {
......@@ -38,6 +39,10 @@ m-login {
&.m-login__newDesign {
margin-top: -52px;
&.m-login__newNavigation {
margin-top: -75px;
}
&.m-login__iosFallback {
.m-grid {
.m-login__wrapper {
......
......@@ -35,7 +35,7 @@ import {
import { FeaturesService } from '../../services/features.service';
import { featuresServiceMock } from '../../../tests/features-service-mock.spec';
import { IfFeatureDirective } from '../../common/directives/if-feature.directive';
import { V2TopbarService } from '../../common/layout/v2-topbar/v2-topbar.service';
import { TopbarService } from '../../common/layout/topbar.service';
import { MockService } from '../../utils/mock';
@Component({
......@@ -90,7 +90,7 @@ describe('LoginComponent', () => {
CookieService,
{ provide: COOKIE_OPTIONS, useValue: CookieOptionsProvider },
{ provide: FeaturesService, useValue: featuresServiceMock },
{ provide: V2TopbarService, useValue: MockService(V2TopbarService) },
{ provide: TopbarService, useValue: MockService(TopbarService) },
],
}).compileComponents();
}));
......
......@@ -10,8 +10,8 @@ import { LoginReferrerService } from '../../services/login-referrer.service';
import { OnboardingService } from '../onboarding/onboarding.service';
import { CookieService } from '../../common/services/cookie.service';
import { FeaturesService } from '../../services/features.service';
import { V2TopbarService } from '../../common/layout/v2-topbar/v2-topbar.service';
import { iOSVersion } from '../../helpers/is-safari';
import { TopbarService } from '../../common/layout/topbar.service';
@Component({
selector: 'm-login',
......@@ -27,6 +27,8 @@ export class LoginComponent implements OnInit, OnDestroy {
@HostBinding('class.m-login__newDesign')
newDesign: boolean = false;
@HostBinding('class.m-login__newNavigation')
newNavigation: boolean = false;
@HostBinding('class.m-login__iosFallback')
iosFallback: boolean = false;
......@@ -46,7 +48,7 @@ export class LoginComponent implements OnInit, OnDestroy {
private cookieService: CookieService,
private onboarding: OnboardingService,
private featuresService: FeaturesService,
private topbarService: V2TopbarService
private topbarService: TopbarService
) {}
ngOnInit() {
......@@ -68,6 +70,7 @@ export class LoginComponent implements OnInit, OnDestroy {
}
this.newDesign = this.featuresService.has('register_pages-december-2019');
this.newNavigation = this.featuresService.has('navigation-2020');
if (this.newDesign) {
this.topbarService.toggleVisibility(false);
......
......@@ -19,7 +19,7 @@ import { MockComponent, MockService } from '../../utils/mock';
import { FeaturesService } from '../../services/features.service';
import { featuresServiceMock } from '../../../tests/features-service-mock.spec';
import { IfFeatureDirective } from '../../common/directives/if-feature.directive';
import { V2TopbarService } from '../../common/layout/v2-topbar/v2-topbar.service';
import { TopbarService } from '../../common/layout/topbar.service';
describe('RegisterComponent', () => {
let comp: RegisterComponent;
......@@ -44,7 +44,7 @@ describe('RegisterComponent', () => {
{ provide: SignupModalService, useValue: signupModalServiceMock },
{ provide: LoginReferrerService, useValue: loginReferrerServiceMock },
{ provide: FeaturesService, useValue: featuresServiceMock },
{ provide: V2TopbarService, useValue: MockService(V2TopbarService) },
{ provide: TopbarService, useValue: MockService(TopbarService) },
],
}).compileComponents();
}));
......
......@@ -12,10 +12,10 @@ import { OnboardingService } from '../onboarding/onboarding.service';
import { ConfigsService } from '../../common/services/configs.service';
import { PagesService } from '../../common/services/pages.service';
import { FeaturesService } from '../../services/features.service';
import { V2TopbarService } from '../../common/layout/v2-topbar/v2-topbar.service';
import { OnboardingV2Service } from '../onboarding-v2/service/onboarding.service';
import { MetaService } from '../../common/services/meta.service';
import { iOSVersion } from '../../helpers/is-safari';
import { TopbarService } from '../../common/layout/topbar.service';
@Component({
selector: 'm-register',
......@@ -54,7 +54,7 @@ export class RegisterComponent implements OnInit, OnDestroy {
configs: ConfigsService,
public pagesService: PagesService,
private featuresService: FeaturesService,
private topbarService: V2TopbarService,
private topbarService: TopbarService,
private onboardingService: OnboardingV2Service,
private metaService: MetaService
) {
......
......@@ -32,7 +32,7 @@
</span>
</div>
<ng-container *mIfFeature="'navigation-2020'; else oldChannel">
<ng-container *mIfFeature="'navigation-2020'; else v1Channel">
<div class="m-channel__middleColumn">
feed goes here
</div>
......@@ -45,7 +45,7 @@
</div>
</ng-container>
<ng-template #oldChannel>
<ng-template #v1Channel>
<header [hidden]="!isLocked"></header>
<header *ngIf="user" [ngClass]="{ isLocked: isLocked }">
......