Merge branch 'feat/sidenav-refine-5242' into 'master'

Sidenav refinements #5242

See merge request minds/front!1775

Author: markharding

src/app/common/components/chat-icon/chat-icon.component.html

@@ -1,5 +1,5 @@
 <ng-template #iconAndBubble>
-  <m-icon iconId="chat_bubble" [sizeFactor]="5"></m-icon>
+  <m-icon iconId="chat_bubble" [sizeFactor]="27"></m-icon>
   <div class="m-chatIcon__unreadBubble" *ngIf="unread > 0">
     <span *ngIf="unread > 99">99+</span>
     <span *ngIf="unread <= 99">{{ unread }}</span>

src/app/common/layout/sidebar-more/sidebar-more.component.ng.scss

@@ -21,7 +21,7 @@
 
       li.m-sidebarMoreDropdown__item {
         padding: 0;
-        font-size: 15px;
+        font-size: 16px;
         line-height: 20px;
         border: 0 !important;
 
@@ -53,6 +53,7 @@
           ::ng-deep m-icon,
           i {
             margin-right: 15px;
+            font-size: 22px;
             @include m-theme() {
               color: themed($m-textColor--secondary);
               fill: themed($m-textColor--secondary);
@@ -96,7 +97,7 @@
           span {
             text-decoration: none;
             font-size: 13px;
-            line-height: 20px;
+            line-height: 16px;
             width: auto;
             white-space: pre-wrap;
             word-break: break-all;

src/app/common/layout/sidebar/navigation.component.html

@@ -79,7 +79,7 @@
             [anchor]="'left'"
             [useParentPosition]="true"
           >
-            <m-icon iconId="home" [sizeFactor]="8" m-tooltip--icon></m-icon
+            <m-icon iconId="home" [sizeFactor]="27" m-tooltip--icon></m-icon
             ><ng-container i18n="@@COMMON__NEWSFEED"
               >Newsfeed</ng-container
             ></m-tooltip
@@ -164,7 +164,7 @@
           >
             <m-icon
               iconId="account_balance"
-              [sizeFactor]="8"
+              [sizeFactor]="27"
               m-tooltip--icon
             ></m-icon>
             <ng-container i18n="@@COMMON__WALLET">Wallet</ng-container>
@@ -223,7 +223,7 @@
               [anchor]="'left'"
               [useParentPosition]="true"
             >
-              <m-icon iconId="group" [sizeFactor]="8" m-tooltip--icon></m-icon>
+              <m-icon iconId="group" [sizeFactor]="27" m-tooltip--icon></m-icon>
               <ng-container i18n="@@COMMON__GROUPS">Groups</ng-container>
             </m-tooltip>
             <span

src/app/common/layout/v3-topbar/user-menu/user-menu.component.html

@@ -54,32 +54,6 @@
         Upgrade
       </a>
     </li>
-
-    <li
-      class="
-        m-dropdownList__item
-        m-userMenuDropdown__item
-        m-userMenuDropdownItem__buyTokens
-      "
-      *ngIf="getCurrentUser()"
-      (click)="closeMenu()"
-    >
-      <a
-        routerLink="/token"
-        i18n="verb|@@COMMON__BUY_TOKENS"
-        data-ref="topnav-usermenu-buytokens"
-        >Buy tokens</a
-      >
-    </li>
-
-    <li
-      class="
-        m-dropdownList__item
-        m-userMenuDropdown__item m-userMenuDropdown__spacer
-      "
-      *ngIf="getCurrentUser()"
-    ></li>
-
     <li
       class="m-dropdownList__item m-userMenuDropdown__item"
       *ngIf="!getCurrentUser()"
@@ -100,18 +74,6 @@
       </a>
     </li>
 
-    <ng-container>
-      <li
-        class="m-dropdownList__item m-userMenuDropdown__item"
-        *ngIf="getCurrentUser()"
-        (click)="toggleTheme()"
-        data-ref="topnav-usermenu-themechange"
-      >
-        <span i18n="@@COMMON__LIGHT_MODE" *ngIf="isDark">Enter Light Mode</span>
-        <span i18n="@@COMMON__DARK_MODE" *ngIf="!isDark">Enter Dark Mode</span>
-      </li>
-    </ng-container>
-
     <li
       class="m-dropdownList__item m-userMenuDropdown__item"
       (click)="closeMenu()"
@@ -158,53 +120,6 @@
         <span i18n="@@COMMON__LOGOUT">Logout</span>
       </a>
     </li>
-
-    <li
-      class="
-        m-dropdownList__item
-        m-userMenuDropdown__item m-userMenuDropdown__spacer
-      "
-    ></li>
-
-    <li
-      class="
-        m-dropdownList__item
-        m-userMenuDropdown__item m-userMenuDropdown__footer
-      "
-      *ngIf="showFooterLinks"
-    >
-      <ng-container
-        *ngFor="let link of footerLinks.slice(0, maxFooterLinks); let i = index"
-      >
-        <a
-          *ngIf="link.routerLink"
-          [routerLink]="link.routerLink"
-          (click)="closeMenu()"
-          [data-ref]="'topnav-usermenu-footer' + link.label"
-        >
-          {{ link.label }}
-        </a>
-        <a
-          *ngIf="link.href"
-          [href]="link.href"
-          target="_blank"
-          (click)="closeMenu()"
-        >
-          {{ link.label }}
-        </a>
-        <span> · </span>
-      </ng-container>
-      <a (click)="toggleFooterLinks()">
-        <ng-container
-          *ngIf="maxFooterLinks === 5; else lessView"
-          i18n="@@COMMON__MORE"
-          >More</ng-container
-        >
-        <ng-template #lessView>
-          <ng-container i18n="@@COMMON__LESS">Less</ng-container>
-        </ng-template>
-      </a>
-    </li>
   </ul>
 </div>
 

src/app/common/layout/v3-topbar/user-menu/user-menu.component.scss

@@ -22,6 +22,7 @@ m-usermenu__v3 {
       margin: 34px 0 0;
       top: 15px;
       right: -20px;
+      padding: 18px 0;
 
       @include m-theme() {
         background-color: themed($m-bgColor--secondary);
@@ -56,7 +57,6 @@ m-usermenu__v3 {
         }
 
         &.m-userMenuDropdown__username {
-          margin-top: 18px;
           padding-top: 8px;
           padding-bottom: 8px;
 

src/app/common/layout/v3-topbar/user-menu/user-menu.component.spec.ts

@@ -97,18 +97,4 @@ describe('UserMenuV3Component', () => {
     //   fixture.debugElement.query(By.css('.m-userMenuDropdownItem__upgrade'))
     // ).toBeNull();
   });
-
-  it('should have a "buy tokens" option that redirects to /token', () => {
-    comp.toggleMenu();
-    expect(
-      fixture.debugElement.query(By.css('.m-userMenuDropdownItem__buyTokens'))
-    ).not.toBeNull();
-
-    const link = fixture.debugElement.query(
-      By.css('.m-userMenuDropdownItem__buyTokens a')
-    );
-    expect(link).not.toBeNull();
-
-    expect(link.nativeElement.getAttribute('routerLink')).toEqual('/token');
-  });
 });

src/app/common/layout/v3-topbar/user-menu/user-menu.component.ts

@@ -9,8 +9,6 @@ import {
 import { Session } from '../../../../services/session';
 import { ThemeService } from '../../../../common/services/theme.service';
 import { Subscription } from 'rxjs';
-import { Navigation as NavigationService } from '../../../../services/navigation';
-import { RouterLink } from '@angular/router';
 import { FeaturesService } from '../../../../services/features.service';
 import { MindsUser } from '../../../../interfaces/entities';
 import { UserMenuService } from './user-menu.service';
@@ -22,7 +20,6 @@ import { UserMenuService } from './user-menu.service';
 })
 export class UserMenuV3Component implements OnInit, OnDestroy {
   @Input() useAvatar: boolean = false;
-  @Input() showFooterLinks: boolean = false;
 
   isDark: boolean = false;
   themeSubscription: Subscription;
@@ -86,14 +83,6 @@ export class UserMenuV3Component implements OnInit, OnDestroy {
     this.themeService.toggleUserThemePreference();
   }
 
-  toggleFooterLinks(): void {
-    if (this.maxFooterLinks === 5) {
-      this.maxFooterLinks = Infinity;
-    } else {
-      this.maxFooterLinks = 5;
-    }
-  }
-
   ngOnDestroy(): void {
     this.closeMenu();
     this.themeSubscription.unsubscribe();

src/app/common/layout/v3-topbar/v3-topbar.component.html

@@ -122,7 +122,7 @@
           <ng-content select="[icons]"></ng-content>
           <m-usermenu__v3
             [useAvatar]="true"
-            [showFooterLinks]="true"
+            *ngIf="getCurrentUser()"
           ></m-usermenu__v3>
         </div>