Skip to content

Minds Frontend
Minds Frontend
Source
...
Target
 
Commits (2)
Hide whitespace changes
Inline Side-by-side
Showing with 630 additions and 257 deletions
src/app/app.component.scss
View file @ 62bbcb33
@import 'defaults';
@import 'themes';
@import 'foundation/grid-values.scss';
html,
body {
......@@ -38,6 +39,15 @@ m-app {
grid-gap: 0;
height: 100%;
@media screen and (max-width: $m-grid-max-tablet) {
grid-template-columns: 71px 5fr 4fr;
}
@media screen and(max-width: $m-grid-max-mobile) {
display: flex;
flex-direction: column;
}
}
}
......
src/app/common/common.module.ts
View file @ 62bbcb33
......@@ -146,6 +146,7 @@ import { HorizontalFeedService } from './services/horizontal-feed.service';
import { FormInputCheckboxComponent } from './components/forms/checkbox/checkbox.component';
import { AttachmentPasteDirective } from './directives/paste/attachment-paste.directive';
import { V3TopbarComponent } from './layout/v3-topbar/v3-topbar.component';
import { SidebarNavigationService } from './layout/sidebar/navigation.service';
const routes: Routes = [
{
......@@ -462,11 +463,15 @@ const routes: Routes = [
deps: [Title, Meta, SiteService, Location, ConfigsService],
},
MediaProxyService,
V2TopbarService,
SidebarNavigationService,
{
provide: V2TopbarService,
useFactory: V2TopbarService._,
},
{
provide: SidebarNavigationService,
useFactory: SidebarNavigationService._,
},
{
provide: SidebarMarkersService,
useFactory: SidebarMarkersService._,
......
src/app/common/components/tooltip/tooltip.component.ts
View file @ 62bbcb33
......@@ -13,6 +13,7 @@ export class TooltipComponent {
@Input() anchor: 'top' | 'bottom' | 'right' | 'left';
@Input() iconClass;
@Input() useParentPosition: boolean = false;
@Input() enabled: boolean = true;
hidden: boolean = true;
offsetTop: number = 0;
......@@ -22,6 +23,10 @@ export class TooltipComponent {
constructor(private element: ElementRef) {}
setHidden(value: boolean) {
if (!value && !this.enabled) {
return;
}
this.hidden = value;
if (!this.hidden && this.useParentPosition) {
......
src/app/common/layout/sidebar/navigation.component.html
View file @ 62bbcb33
<nav>
<ul>
<li>
<a
class="m-sidebar--navigation--item"
[routerLink]="['/newsfeed/subscriptions']"
[routerLinkActive]="'m-sidebar--navigation--item-active'"
[routerLinkActiveOptions]="{ exact: true }"
[title]="'Newsfeed'"
>
<i class="material-icons">check</i>
<span class="m-sidebar--navigation--text" i18n>Newsfeed</span>
<div
class="m-sidebarNavigation__overlay"
[class.m-sidebarNavigation--opened]="isOpened"
(click)="toggle()"
></div>
<div
class="m-sidebar--navigation"
[class.m-sidebarNavigation--slide]="isMobile"
[class.m-sidebarNavigation--opened]="isOpened"
>
<nav>
<div class="m-sidebarNavigation__top">
<a routerLink="/" title="Home" i18n-title *ngIf="isMobile">
<img [src]="cdnAssetsUrl + 'assets/logos/bulb.svg'" />
</a>
</li>
<li>
<a
class="m-sidebar--navigation--item"
[routerLink]="['/newsfeed/global/top']"
[routerLinkActive]="'m-sidebar--navigation--item-active'"
[routerLinkActiveOptions]="{ exact: true }"
[title]="'Discover'"
>
<i class="material-icons">check</i>
<i class="material-icons" (click)="toggle()">close</i>
</div>
<ul>
<li>
<a
class="m-sidebar--navigation--item"
[routerLink]="['/newsfeed/subscriptions']"
[routerLinkActive]="'m-sidebar--navigation--item-active'"
[routerLinkActiveOptions]="{ exact: true }"
(click)="toggle()"
>
<m-tooltip
icon="check"
i18n="@@COMMON__NEWSFEED"
[enabled]="!isDesktop && !isMobile"
>
Newsfeed
</m-tooltip>
<span class="m-sidebar--navigation--text" i18n>Discover</span>
</a>
</li>
<span
class="m-sidebar--navigation--text"
*ngIf="isDesktop || isMobile"
i18n
>
Newsfeed
</span>
</a>
</li>
<li>
<a
class="m-sidebar--navigation--item"
[routerLink]="['/wallet']"
[routerLinkActive]="'m-sidebar--navigation--item-active'"
[title]="'Wallet'"
>
<i class="material-icons">check</i>
<li>
<a
class="m-sidebar--navigation--item"
[routerLink]="['/newsfeed/global/top']"
[routerLinkActive]="'m-sidebar--navigation--item-active'"
[routerLinkActiveOptions]="{ exact: true }"
(click)="toggle()"
>
<m-tooltip
icon="check"
i18n="@@COMMON__DISCOVER"
[enabled]="!isDesktop && !isMobile"
>
Discover
</m-tooltip>
<span class="m-sidebar--navigation--text" i18n>Wallet</span>
</a>
</li>
<span
class="m-sidebar--navigation--text"
*ngIf="isDesktop || isMobile"
i18n
>
Discover
</span>
</a>
</li>
<li>
<a
class="m-sidebar--navigation--item"
[routerLink]="['/' + user.username]"
[routerLinkActive]="'m-sidebar--navigation--item-active'"
[title]="'Profile'"
>
<i class="material-icons">check</i>
<li>
<a
class="m-sidebar--navigation--item"
[routerLink]="['/wallet']"
[routerLinkActive]="'m-sidebar--navigation--item-active'"
(click)="toggle()"
>
<m-tooltip
icon="check"
i18n="@@COMMON__WALLET"
[enabled]="!isDesktop && !isMobile"
>
Wallet
</m-tooltip>
<span class="m-sidebar--navigation--text" i18n>Profile</span>
</a>
</li>
<span
class="m-sidebar--navigation--text"
*ngIf="isDesktop || isMobile"
i18n
>
Wallet
</span>
</a>
</li>
<li>
<a
class="m-sidebar--navigation--item"
[routerLink]="['/analytics']"
[routerLinkActive]="'m-sidebar--navigation--item-active'"
[title]="'Analytics'"
>
<i class="material-icons">check</i>
<li>
<a
class="m-sidebar--navigation--item"
[routerLink]="['/' + user.username]"
[routerLinkActive]="'m-sidebar--navigation--item-active'"
(click)="toggle()"
>
<m-tooltip
icon="check"
i18n="@@COMMON__PROFILE"
[enabled]="!isDesktop && !isMobile"
>
Profile
</m-tooltip>
<span class="m-sidebar--navigation--text" i18n>Analytics</span>
</a>
</li>
<span
class="m-sidebar--navigation--text"
*ngIf="isDesktop || isMobile"
i18n
>
Profile
</span>
</a>
</li>
<li>
<a
class="m-sidebar--navigation--item"
[routerLink]="['/settings']"
[routerLinkActive]="'m-sidebar--navigation--item-active'"
[title]="'Settings'"
>
<i class="material-icons">check</i>
<li>
<a
class="m-sidebar--navigation--item"
[routerLink]="['/analytics']"
[routerLinkActive]="'m-sidebar--navigation--item-active'"
(click)="toggle()"
>
<m-tooltip
icon="check"
i18n="@@COMMON__ANALYTICS"
[enabled]="!isDesktop && !isMobile"
>
Analytics
</m-tooltip>
<span
class="m-sidebar--navigation--text"
*ngIf="isDesktop || isMobile"
i18n
>
Analytics
</span>
</a>
</li>
<span class="m-sidebar--navigation--text" i18n>Settings</span>
</a>
</li>
</ul>
</nav>
<h5 i18n>
Groups
</h5>
<ng-template dynamic-host></ng-template>
<li>
<a
class="m-sidebar--navigation--item"
[routerLink]="['/settings']"
[routerLinkActive]="'m-sidebar--navigation--item-active'"
(click)="toggle()"
>
<m-tooltip
icon="check"
i18n="@@COMMON__SETTINGS"
[enabled]="!isDesktop && !isMobile"
>
Settings
</m-tooltip>
<span
class="m-sidebar--navigation--text"
*ngIf="isDesktop || isMobile"
i18n
>
Settings
</span>
</a>
</li>
</ul>
</nav>
<h5 i18n *ngIf="isDesktop || isMobile">
Groups
</h5>
<ng-template dynamic-host></ng-template>
</div>
src/app/common/layout/sidebar/navigation.component.scss
View file @ 62bbcb33
m-sidebar--navigation {
grid-area: nav;
padding-top: 8px !important;
padding-left: 33.3%;
min-width: 0;
@include m-theme() {
background-color: themed($m-body-bg);
border-right: 1px solid themed($m-grey-400);
display: contents;
.m-sidebarNavigation__overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
background-color: transparent;
transition: background-color 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
&.m-sidebarNavigation--opened {
z-index: 999998;
@include m-theme() {
background-color: rgba(themed($m-grey-700), 0.2);
}
}
}
nav {
//min-height: 100vh;
//height: 100%;
}
.m-sidebar--navigation {
grid-area: nav;
ul {
list-style: none;
padding: 0;
}
padding-top: 8px !important;
padding-left: 33.3%;
min-width: 0;
box-sizing: border-box;
h5 {
font-size: 11px;
line-height: 30px;
letter-spacing: 1.83px;
text-transform: uppercase;
@include m-theme() {
color: rgba(themed($m-black), 0.3);
background-color: themed($m-body-bg);
border-right: 1px solid themed($m-grey-400);
}
}
m-group--sidebar-markers {
.m-groupSidebarMarkers__list {
margin: 0;
&.m-sidebarNavigation--slide {
position: fixed;
top: 0;
bottom: 0;
left: -316px;
width: 316px;
max-width: 79vw;
z-index: 999999;
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;
transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
&.m-sidebarNavigation--opened {
transform: translateX(316px);
}
.m-sidebarNavigation__top {
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
height: 65px;
padding: 0 24px;
@include m-theme() {
border-bottom: 1px solid themed($m-primary-border);
}
a > img {
height: 36px;
cursor: pointer;
}
i.material-icons {
cursor: pointer;
@include m-theme() {
color: themed($m-black);
color: themed($m-second-text-color);
}
}
}
m-tooltip {
vertical-align: middle;
margin-right: 21px;
ul {
padding: 37px 35px 0;
img {
width: 27px;
height: 27px;
.m-sidebar--navigation--item {
margin: 4px 0;
}
&.m-groupSidebarMarkers__list {
padding: 0 35px 35px !important;
}
}
h5 {
padding: 0 35px;
}
}
nav {
//min-height: 100vh;
//height: 100%;
}
ul {
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);
}
}
}
i.material-icons {
font-size: 20px;
width: 27px;
height: 27px;
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;
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;
.m-infinite-scroll-manual {
font-size: 10px;
padding: 2px;
background-color: transparent !important;
transform: rotate(0) !important;
text-align: left;
}
}
}
}
}
}
.m-sidebar--navigation--item {
display: flex;
//flex-direction: column;
align-items: center;
text-decoration: none;
font-family: 'Roboto', Helvetica, sans-serif;
margin: 15px 0;
font-weight: bold;
font-size: 17px;
line-height: 44px;
@include m-theme() {
color: themed($m-navigation-item);
}
&.m-sidebar--navigation--item-active {
.m-sidebar--navigation--item {
display: flex;
//flex-direction: column;
align-items: center;
text-decoration: none;
font-family: 'Roboto', Helvetica, sans-serif;
margin: 15px 0;
font-weight: bold;
font-size: 17px;
line-height: 44px;
@include m-theme() {
color: themed($m-black);
color: themed($m-navigation-item);
}
}
i.material-icons {
//font-size:17px;
//line-height:44px;
margin-right: 30px;
}
&.m-sidebar--navigation--item-active {
font-weight: bold;
@include m-theme() {
color: themed($m-black);
}
}
span {
//text-transform: uppercase;
//font-size: 8px;
//letter-spacing: 1.25px;
//padding-top: 4px;
i.material-icons {
//font-size:17px;
//line-height:44px;
margin-right: 30px;
}
span {
//text-transform: uppercase;
//font-size: 8px;
//letter-spacing: 1.25px;
//padding-top: 4px;
}
}
}
src/app/common/layout/sidebar/navigation.component.ts
View file @ 62bbcb33
import {
Component,
ComponentFactoryResolver,
HostListener,
Inject,
OnInit,
PLATFORM_ID,
ViewChild,
} from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { Navigation as NavigationService } from '../../../services/navigation';
import { Session } from '../../../services/session';
import { GroupsSidebarMarkersComponent } from '../../../modules/groups/sidebar-markers/sidebar-markers.component';
import { DynamicHostDirective } from '../../directives/dynamic-host.directive';
import { SidebarNavigationService } from './navigation.service';
import { ConfigsService } from '../../services/configs.service';
@Component({
selector: 'm-sidebar--navigation',
templateUrl: 'navigation.component.html',
})
export class SidebarNavigationComponent implements OnInit {
readonly cdnAssetsUrl: string;
@ViewChild(DynamicHostDirective, { static: true }) host: DynamicHostDirective;
user;
......@@ -22,12 +30,27 @@ export class SidebarNavigationComponent implements OnInit {
componentRef;
componentInstance: GroupsSidebarMarkersComponent;
isDesktop: boolean = true;
isMobile: boolean = false;
isOpened: boolean = false;
constructor(
public navigation: NavigationService,
public session: Session,
private _componentFactoryResolver: ComponentFactoryResolver
private service: SidebarNavigationService,
protected configs: ConfigsService,
private _componentFactoryResolver: ComponentFactoryResolver,
@Inject(PLATFORM_ID) private platformId: Object
) {
this.cdnAssetsUrl = this.configs.get('cdn_assets_url');
this.service.setContainer(this);
this.getUser();
if (isPlatformBrowser(this.platformId)) {
this.onResize();
}
}
ngOnInit() {
......@@ -50,4 +73,20 @@ export class SidebarNavigationComponent implements OnInit {
this.componentInstance = this.componentRef.instance;
this.componentInstance.showLabels = true;
}
toggle() {
if (this.isMobile) {
this.isOpened = !this.isOpened;
}
}
@HostListener('window:resize')
onResize() {
this.isDesktop = window.innerWidth > 900;
this.isMobile = window.innerWidth <= 540;
if (!this.isMobile) {
this.isOpened = false;
}
}
}
src/app/common/layout/sidebar/navigation.service.ts 0 → 100644
View file @ 62bbcb33
import { Injectable } from '@angular/core';
import { SidebarNavigationComponent } from './navigation.component';
@Injectable()
export class SidebarNavigationService {
container: SidebarNavigationComponent;
static _() {
return new SidebarNavigationService();
}
setContainer(container: SidebarNavigationComponent) {
this.container = container;
}
toggle() {
if (this.container) {
this.container.toggle();
}
}
}
src/app/common/layout/v3-topbar/v3-topbar.component.html
View file @ 62bbcb33
<ng-template #navLinks>
<a
class="m-v3-topbarNav__Item m-v3-topbarNav__RouterNav"
routerLink="/newsfeed/subscriptions"
routerLinkActive="m-v3-topbarNav__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>
</a>
<a
class="m-v3-topbarNav__Item m-v3-topbarNav__RouterNav"
routerLink="/newsfeed/global"
routerLinkActive="m-v3-topbarNav__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>
</a>
<a
class="m-v3-topbarNav__Item m-v3-topbarNav__RouterNav"
routerLink="/wallet"
routerLinkActive="m-v3-topbarNav__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>
</a>
<ng-template #searchBar>
<div class="m-v3-topbar__SearchBox">
<ng-content select="[search]"></ng-content>
</div>
</ng-template>
<div class="m-v3-topbar__Top">
......@@ -45,6 +13,7 @@
routerLink="/"
title="Home"
i18n-title
*ngIf="!isMobile; else hamburgerMenu"
>
<img
[src]="cdnAssetsUrl + 'assets/logos/bulb.svg'"
......@@ -53,10 +22,18 @@
(mouseleave)="mouseLeave()"
/>
</a>
<ng-template #hamburgerMenu>
<div class="m-v3-topbarNav__Item" (click)="toggleSidebarNav()">
<i class="material-icons">menu</i>
</div>
</ng-template>
</nav>
</div>
<div class="m-v3topbar__middleColumn">
<div class="m-v3Topbar__spacer" *ngIf="isMobile"></div>
<div class="m-v3topbar__middleColumn" *ngIf="!isMobile">
<!-- <a-->
<!-- class="m-v3-topbar__Avatar"-->
<!-- *ngIf="getCurrentUser()"-->
......@@ -68,14 +45,14 @@
<!-- [editMode]="false"-->
<!-- ></minds-avatar>-->
<!-- </a>-->
<ng-container *ngIf="getCurrentUser()">
<div class="m-v3-topbar__SearchBox">
<ng-content select="[search]"></ng-content>
</div>
</ng-container>
<ng-container *ngTemplateOutlet="searchBar"></ng-container>
</div>
<div class="m-v3topbar__rightColumn">
<ng-container *ngIf="isMobile && getCurrentUser()">
<ng-container *ngTemplateOutlet="searchBar"></ng-container>
</ng-container>
<!-- edit -->
<!-- notifications -->
......@@ -90,7 +67,41 @@
</div>
<div class="m-v3-topbar__Bottom">
<ng-container *ngTemplateOutlet="navLinks"></ng-container>
<a
class="m-v3-topbarNav__Item m-v3-topbarNav__RouterNav"
routerLink="/newsfeed/subscriptions"
routerLinkActive="m-v3-topbarNav__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>
</a>
<a
class="m-v3-topbarNav__Item m-v3-topbarNav__RouterNav"
routerLink="/newsfeed/global"
routerLinkActive="m-v3-topbarNav__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>
</a>
<a
class="m-v3-topbarNav__Item m-v3-topbarNav__RouterNav"
routerLink="/wallet"
routerLinkActive="m-v3-topbarNav__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>
</a>
</div>
<div class="m-v3-topbar__NotificationsToaster">
......
src/app/common/layout/v3-topbar/v3-topbar.component.scss
View file @ 62bbcb33
......@@ -3,11 +3,23 @@ m-v3-topbar {
grid-gap: 0;
grid-template-columns: 3fr 5fr 4fr;
@media screen and (max-width: $m-grid-max-tablet) {
grid-template-columns: 71px 5fr 4fr;
}
@media screen and(max-width: $m-grid-max-mobile) {
display: flex;
}
&,
& > * {
height: 75px;
}
.m-v3Topbar__spacer {
flex-grow: 1;
opacity: 0;
}
.m-v3topbar__leftColumn {
margin-left: 33.3%;
grid-column: 1 / span 1;
......@@ -15,6 +27,10 @@ m-v3-topbar {
display: flex;
align-items: center;
@media screen and(max-width: $m-grid-max-mobile) {
margin-left: 23px;
}
}
.m-v3topbar__middleColumn {
......@@ -29,10 +45,12 @@ m-v3-topbar {
min-width: 0;
}
.m-v3topbar__leftColumn,
.m-v3topbar__middleColumn {
@include m-theme() {
border-right: 1px solid themed($m-grey-400);
@media screen and(min-width: $m-grid-max-mobile) {
.m-v3topbar__leftColumn,
.m-v3topbar__middleColumn {
@include m-theme() {
border-right: 1px solid themed($m-grey-400);
}
}
}
}
......@@ -75,6 +93,15 @@ m-v3-topbar {
> .mdl-textfield {
width: 100%;
@media screen and(max-width: $m-grid-max-mobile) {
width: 20px;
transition: width ease-in-out 0.2s;
&.is-focused {
width: 270px;
}
}
input {
border: 0;
font-size: 16px;
......@@ -233,7 +260,7 @@ m-v3-topbar {
.m-v3-topbarNavItem__Logo {
margin: 0 8px 0 0;
padding: 0 12px;
padding: 0;
//height: 62px;
box-sizing: border-box;
border: 0;
......
src/app/common/layout/v3-topbar/v3-topbar.component.ts
View file @ 62bbcb33
......@@ -2,8 +2,11 @@ import {
ChangeDetectorRef,
Component,
ComponentFactoryResolver,
HostListener,
Inject,
OnDestroy,
OnInit,
PLATFORM_ID,
ViewChild,
} from '@angular/core';
import { DynamicHostDirective } from '../../directives/dynamic-host.directive';
......@@ -11,6 +14,8 @@ import { NotificationsToasterComponent } from '../../../modules/notifications/to
import { Session } from '../../../services/session';
import { ThemeService } from '../../services/theme.service';
import { ConfigsService } from '../../services/configs.service';
import { isPlatformBrowser } from '@angular/common';
import { SidebarNavigationService } from '../sidebar/navigation.service';
@Component({
selector: 'm-v3-topbar',
......@@ -27,14 +32,22 @@ export class V3TopbarComponent implements OnInit, OnDestroy {
componentRef;
componentInstance: NotificationsToasterComponent;
isMobile: boolean = false;
constructor(
protected sidebarService: SidebarNavigationService,
protected themeService: ThemeService,
protected configs: ConfigsService,
protected session: Session,
protected cd: ChangeDetectorRef,
protected componentFactoryResolver: ComponentFactoryResolver
protected componentFactoryResolver: ComponentFactoryResolver,
@Inject(PLATFORM_ID) private platformId: Object
) {
this.cdnAssetsUrl = this.configs.get('cdn_assets_url');
if (isPlatformBrowser(this.platformId)) {
this.onResize();
}
}
ngOnInit() {
......@@ -81,6 +94,15 @@ export class V3TopbarComponent implements OnInit, OnDestroy {
clearTimeout(this.timeout);
}
toggleSidebarNav() {
this.sidebarService.toggle();
}
@HostListener('window:resize')
onResize() {
this.isMobile = window.innerWidth <= 540;
}
ngOnDestroy() {
if (this.timeout) {
clearTimeout(this.timeout);
......
src/app/common/services/theme.service.ts
View file @ 62bbcb33
import { Injectable, Renderer2, RendererFactory2 } from '@angular/core';
import {
Inject,
Injectable,
PLATFORM_ID,
Renderer2,
RendererFactory2,
} from '@angular/core';
import { Client } from '../../services/api/client';
import { Session } from '../../services/session';
import { Storage } from '../../services/storage';
import { BehaviorSubject, Subscription } from 'rxjs';
import { isPlatformBrowser } from '@angular/common';
@Injectable()
export class ThemeService {
......@@ -16,7 +23,8 @@ export class ThemeService {
private rendererFactory: RendererFactory2,
private client: Client,
private session: Session,
private storage: Storage
private storage: Storage,
private platformId: Object
) {
this.renderer = rendererFactory.createRenderer(null, null);
}
......@@ -25,9 +33,16 @@ export class ThemeService {
rendererFactory: RendererFactory2,
client: Client,
session: Session,
storage: Storage
storage: Storage,
platformId: Object
) {
return new ThemeService(rendererFactory, client, session, storage);
return new ThemeService(
rendererFactory,
client,
session,
storage,
platformId
);
}
// TODO after release of MacOS 10.14.4
......@@ -92,13 +107,15 @@ export class ThemeService {
this.renderer.removeClass(document.body, 'm-theme__dark');
this.renderer.addClass(document.body, 'm-theme__light');
}
//this.clearTransitions();
this.clearTransitions();
}
clearTransitions() {
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.renderer.removeClass(document.body, 'm-theme-in-transition');
}, 1000);
if (isPlatformBrowser(this.platformId)) {
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.renderer.removeClass(document.body, 'm-theme-in-transition');
}, 1000);
}
}
}
src/app/modules/groups/sidebar-markers/sidebar-markers.component.html
View file @ 62bbcb33
<ul class="m-groupSidebarMarkers__list m-scroll__thin" #list>
<li style="display:flex">
<a [routerLink]="['/groups/create']">
<a
class="m-groupSidebarMarkers__newGroup"
[routerLink]="['/groups/create']"
>
<m-tooltip [anchor]="tooltipsAnchor" [useParentPosition]="true">
<i class="material-icons" m-tooltip--anchor>add</i>
<span i18n="@@M__COMMON__NEW_GROUP">New group</span>
......@@ -15,6 +18,28 @@
</a>
</li>
<li *ngIf="!inProgress && groups && groups.length > 0">
<a
class="m-groupSidebarMarkers__discoverGroups"
[routerLink]="[
'/newsfeed/global/top',
{ period: '12h', type: 'groups', all: 1 }
]"
>
<m-tooltip [anchor]="tooltipsAnchor" [useParentPosition]="true">
<i class="material-icons" m-tooltip--anchor>people</i>
<span i18n="@@M__COMMON__DISCOVER_GROUPS">Discover Groups</span>
<ng-container i18n="@@M__COMMON__DISCOVER_GROUPS">
Discover Groups
</ng-container>
</m-tooltip>
<ng-container i18n="@@M__COMMON__DISCOVER_GROUPS" *ngIf="showLabels">
Discover Groups
</ng-container>
</a>
</li>
<li *ngFor="let group of groups" [class.has-marker]="group.hasMarker">
<a [routerLink]="['/groups/profile', group.guid]">
<m-tooltip [anchor]="tooltipsAnchor" [useParentPosition]="true">
......@@ -45,29 +70,18 @@
/>
<span>Noname</span>
<ng-container>
<ng-container
i18n="@@M__COMMON__JOIN_SOME_GROUPS_TO_POPULATE_THIS_SIDEBAR"
>
Join some groups to populate this sidebar
</ng-container>
</m-tooltip>
</a>
</li>
<li *ngIf="!inProgress && groups && groups.length > 0">
<a
[routerLink]="[
'/newsfeed/global/top',
{ period: '12h', type: 'groups', all: 1 }
]"
>
<!-- todo: TEST IT -->
<m-tooltip [anchor]="tooltipsAnchor" [useParentPosition]="true">
<i class="material-icons" m-tooltip--anchor>people</i>
<span>Find a Group</span>
<ng-container>
Find a Group
</ng-container>
</m-tooltip>
<ng-container
i18n="@@M__COMMON__JOIN_SOME_GROUPS_TO_POPULATE_THIS_SIDEBAR"
*ngIf="showLabels"
>
Join some groups to populate this sidebar
</ng-container>
</a>
</li>
......
src/app/services/providers.ts
View file @ 62bbcb33
import { NgZone, RendererFactory2, PLATFORM_ID } from '@angular/core';
import { NgZone, RendererFactory2, PLATFORM_ID, Inject } from '@angular/core';
import { Router } from '@angular/router';
import { Location } from '@angular/common';
import { TransferState } from '@angular/platform-browser';
......@@ -230,7 +230,7 @@ export const MINDS_PROVIDERS: any[] = [
{
provide: ThemeService,
useFactory: ThemeService._,
deps: [RendererFactory2, Client, Session, Storage],
deps: [RendererFactory2, Client, Session, Storage, PLATFORM_ID],
},
DiagnosticsService,
AuthService,
......
src/stylesheets/themes.scss
View file @ 62bbcb33
......@@ -84,9 +84,16 @@ $messenger: #0084ff;
$twitter: #03b3ee;
$whatsapp: #25d366;
$linkedin: #0071a1;
$navigation-item: #aeb0b8;
$navigation-item-hover: #a6a6a6;
$second-text-color: #7d7d82;
$second-text-color-dark: #aeb0b8;
$primary-border: #dce2e4;
$primary-border-dark: #404a4e;
// Theme maps
// e.g. m-grey-100 in light mode will become m-grey-900 in dark mode
$themes: (
......@@ -146,6 +153,8 @@ $themes: (
m-linkedin: $linkedin,
m-navigation-item: $navigation-item,
m-navigation-item-hover: $navigation-item-hover,
m-second-text-color: $second-text-color,
m-primary-border: $primary-border,
),
dark: (
m-grey-950: lighten($grey-50, $percent),
......@@ -203,6 +212,8 @@ $themes: (
m-linkedin: $linkedin,
m-navigation-item: lighten($navigation-item, $percent),
m-navigation-item-hover: lighten($navigation-item-hover, $percent),
m-second-text-color: $second-text-color-dark,
m-primary-border: $primary-border-dark,
),
);
......@@ -269,3 +280,7 @@ $m-linkedin: 'm-linkedin';
$m-navigation-item: 'm-navigation-item';
$m-navigation-item-hover: 'm-navigation-item-hover';
$m-second-text-color: 'm-second-text-color';
$m-primary-border: 'm-primary-border';