(refactor): PRO settings form styles

src/app/common/common.module.ts

@@ -121,6 +121,8 @@ import { PageLayoutComponent } from './components/page-layout/page-layout.compon
 import { DashboardLayoutComponent } from './components/dashboard-layout/dashboard-layout.component';
 import { ShadowboxLayoutComponent } from './components/shadowbox-layout/shadowbox-layout.component';
 import { ShadowboxHeaderComponent } from './components/shadowbox-header/shadowbox-header.component';
+import { FormDescriptorComponent } from './components/form-descriptor/form-descriptor.component';
+import { FormToastComponent } from './components/form-toast/form-toast.component';
 
 PlotlyModule.plotlyjs = PlotlyJS;
 
@@ -232,6 +234,8 @@ PlotlyModule.plotlyjs = PlotlyJS;
     DashboardLayoutComponent,
     ShadowboxLayoutComponent,
     ShadowboxHeaderComponent,
+    FormDescriptorComponent,
+    FormToastComponent,
   ],
   exports: [
     MINDS_PIPES,
@@ -327,6 +331,8 @@ PlotlyModule.plotlyjs = PlotlyJS;
     PageLayoutComponent,
     DashboardLayoutComponent,
     ShadowboxLayoutComponent,
+    FormDescriptorComponent,
+    FormToastComponent,
   ],
   providers: [
     SiteService,

src/app/common/components/form-descriptor/form-descriptor.component.html

+<div class="m-formDescriptor" i18n>
+  <ng-content></ng-content>
+</div>

src/app/common/components/form-descriptor/form-descriptor.component.scss

+.m-formDescriptor {
+  display: inline-block;
+  margin-left: 33px;
+  padding-left: 14px;
+  font-size: 15px;
+  line-height: 20px;
+  @include m-theme() {
+    color: themed($m-blue);
+    border-left: 2px solid themed($m-blue);
+  }
+}

src/app/common/components/form-descriptor/form-descriptor.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FormDescriptorComponent } from './form-descriptor.component';
+
+describe('FormDescriptorComponent', () => {
+  let component: FormDescriptorComponent;
+  let fixture: ComponentFixture<FormDescriptorComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [FormDescriptorComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FormDescriptorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/common/components/form-descriptor/form-descriptor.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'm-formDescriptor',
+  templateUrl: './form-descriptor.component.html',
+})
+export class FormDescriptorComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

src/app/common/components/form-toast/form-toast.component.html

+<div class="m-formToast__wrapper" [hidden]="hidden">
+  <i
+    class="material-icons m-formToast__icon--statusSuccess"
+    *ngIf="status === 'success'"
+    >check</i
+  >
+  <i
+    class="material-icons m-formToast__icon--statusError"
+    *ngIf="status === 'error'"
+    >warning</i
+  >
+  <p i18n><ng-content></ng-content></p>
+  <div class="m-formToast__iconWrapper">
+    <i class="material-icons m-formToast__icon--close" (click)="hidden = true"
+      >close</i
+    >
+  </div>
+</div>

src/app/common/components/form-toast/form-toast.component.scss

+m-formToast {
+  margin: 37px 70px 0 70px;
+  display: block;
+}
+.m-formToast__wrapper {
+  font-size: 15px;
+  line-height: 20px;
+  padding: 13px;
+  display: flex;
+  @include m-theme() {
+    color: themed($m-grey-600);
+    background-color: themed($m-white);
+    box-shadow: 0 0 15px 0 rgba(themed($m-black), 0.2);
+  }
+  p {
+    flex-grow: 1;
+    margin: 0;
+  }
+}
+
+[class*='m-formToast__icon--status'] {
+  margin-right: 10px;
+}
+.m-formToast__icon--statusSuccess {
+  @include m-theme() {
+    color: themed($m-green-dark);
+  }
+}
+.m-formToast__icon--statusError {
+  @include m-theme() {
+    color: themed($m-red);
+  }
+}
+.m-formToast__icon--close {
+  cursor: pointer;
+  transition: all 0.2s ease-out;
+  @include m-theme() {
+    color: themed($m-grey-600);
+  }
+  &:hover {
+    transform: scale(1.2);
+    @include m-theme() {
+      color: themed($m-grey-300);
+    }
+  }
+  &:active {
+    @include m-theme() {
+      color: themed($m-grey-600);
+    }
+  }
+}
+
+@media screen and (max-width: $min-tablet) {
+  m-formToast {
+    // margin: 37px 24px 0 24px;
+    margin: auto;
+  }
+}
+
+// TODOOJM
+// @media screen and (max-width: $max-mobile) {
+//   m-formToast {
+//     position: fixed;
+
+//   }
+// }

src/app/common/components/form-toast/form-toast.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FormToastComponent } from './form-toast.component';
+
+describe('FormToastComponent', () => {
+  let component: FormToastComponent;
+  let fixture: ComponentFixture<FormToastComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [FormToastComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FormToastComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/common/components/form-toast/form-toast.component.ts

+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'm-formToast',
+  templateUrl: './form-toast.component.html',
+})
+export class FormToastComponent implements OnInit {
+  @Input() status: string = 'success';
+  @Input() hidden: boolean = false; //OJMTODO
+  constructor() {}
+
+  ngOnInit() {}
+}
+
+// TODOOJM : add timer, add max-width, slide into fixed position

src/app/common/components/page-layout/page-layout.component.scss

@@ -3,12 +3,14 @@ m-pageLayout {
   position: relative;
   width: 100%;
   min-height: 100%;
-  padding-top: 56px;
-  margin-bottom: 48px;
+  padding: 56px 0 48px 0;
   @include m-theme() {
     background-color: themed($m-white);
     color: themed($m-grey-800);
   }
+  &.isForm {
+    min-height: none;
+  }
 
   .m-tooltip {
     margin-left: 4px;

src/app/common/components/shadowbox-header/shadowbox-header.component.scss

@@ -96,8 +96,6 @@ m-shadowboxHeader {
   }
 }
 .m-shadowboxLayout__header.hasTitle {
-  padding-top: 34px;
-  padding-bottom: 28px;
   padding: 34px 28px 34px 70px;
 }
 .m-shadowboxHeader__title {
@@ -110,7 +108,7 @@ m-shadowboxHeader {
   }
 }
 .m-shadowboxHeader__subtitle {
-  line-height: 20px;
+  line-height: 22px;
   margin: 0;
   @include m-theme() {
     color: themed($m-grey-300);
@@ -119,6 +117,9 @@ m-shadowboxHeader {
 }
 
 @media screen and (max-width: $min-tablet) {
+  .m-shadowboxLayout__header.hasTitle {
+    padding: 0 24px;
+  }
   .m-shadowboxHeader__section {
     [class*='m-shadowboxHeader__overflowScrollButton--'] {
       display: none;

src/app/common/components/shadowbox-layout/shadowbox-layout.component.html

@@ -4,8 +4,8 @@
   [ngClass]="{ isScrollable: scrollableHeader }"
 >
   <div class="m-shadowboxLayout__header hasTitle" *ngIf="headerTitle">
-    <h3 class="m-shadowboxHeader__title">{{ headerTitle }}</h3>
-    <h4 *ngIf="headerSubtitle" class="m-shadowboxHeader__subtitle">
+    <h3 class="m-shadowboxHeader__title" i18n>{{ headerTitle }}</h3>
+    <h4 *ngIf="headerSubtitle" class="m-shadowboxHeader__subtitle" i18n>
       {{ headerSubtitle }}
     </h4>
   </div>

src/app/common/components/shadowbox-layout/shadowbox-layout.component.scss

@@ -12,6 +12,7 @@ m-shadowboxHeader.isScrollable {
 }
 .m-shadowboxLayout__bottom {
   position: relative;
+  transition: all 0.3s ease;
   @include m-theme() {
     border-top: 1px solid rgba(themed($m-grey-50), 0.5);
     background-color: themed($m-white);
@@ -31,21 +32,43 @@ m-shadowboxHeader.isScrollable {
   cursor: pointer;
   padding: 10px 20px;
   font-size: 17px;
-  background-color: #4fc3a9; // TBD
+  background-color: #4fc3a9;
   height: 43px;
   border: 0;
+  transition: all 0.2s ease;
+  border-radius: 2px;
+  outline: 0;
   @include m-theme() {
     color: themed($m-white);
   }
+  &:hover {
+    transform: scale(1.02);
+    background-color: #4cb9a0;
+  }
+  &:active {
+    background-color: #63dac0;
+  }
+  &:disabled,
+  &[disabled] {
+    cursor: default;
+    @include m-theme() {
+      background-color: themed($m-grey-200);
+    }
+  }
 }
 // ---------------------------------------
-.isForm {
+m-shadowboxLayout.isForm {
   margin-top: 69px;
   .m-shadowboxLayout__body {
     padding: 50px 70px;
   }
   .m-shadowboxLayout__footer {
     padding: 30px 70px;
+    align-items: center;
+  }
+
+  .m-shadowboxHeader__wrapper {
+    height: auto;
   }
 }
 // ---------------------------------------
@@ -61,4 +84,42 @@ m-shadowboxHeader.isScrollable {
       border-top: 1px solid themed($m-grey-100);
     }
   }
+  m-shadowboxLayout.isForm {
+    margin-top: 0px;
+    m-shadowboxHeader {
+      min-height: 80px;
+    }
+    .m-shadowboxLayout__bottom {
+      @include m-theme() {
+        border-top: none;
+      }
+    }
+    .m-shadowboxLayout__body {
+      padding: 24px 24px 36px 24px;
+    }
+    .m-shadowboxLayout__footer {
+      justify-content: center;
+      padding: 24px;
+    }
+  }
+}
+
+@media screen and (max-width: $max-mobile) {
+  m-shadowboxLayout.isForm {
+    .m-shadowboxLayout__bottom {
+      @include m-theme() {
+        border-top-color: rgba(0, 0, 0, 0);
+      }
+    }
+    .m-shadowboxLayout__footer {
+      .m-shadowboxLayout__button {
+        min-width: 50%;
+      }
+    }
+  }
+  m-shadowboxLayout {
+    @include m-theme() {
+      box-shadow: none;
+    }
+  }
 }

src/app/common/components/sidebar-menu/sidebar-menu.component.html

@@ -52,12 +52,14 @@
 
     <nav class="m-sidebarMenu__linksContainer" *ngIf="menu.links">
       <div class="m-sidebarMenu__link" *ngFor="let link of menu.links">
+        <!-- OJMTODO: fix target _blank -->
         <a
           *ngIf="link.permissionGranted"
           (click)="mobileMenuExpanded = false"
           [routerLink]="link.path ? '/' + link.path : '../' + link.id"
           routerLinkActive="selected"
-          target="link.newWindow ? '_blank' : '_self'"
+          [routerLinkActiveOptions]="{ exact: true }"
+          [target]="link.newWindow ? '_blank' : '_self'"
           [ngClass]="{ newWindow: link.newWindow }"
           ><i class="material-icons" *ngIf="link.newWindow">launch</i>
           <span>{{ link.label }}</span></a

src/app/common/components/sidebar-menu/sidebar-menus.default.ts

@@ -75,6 +75,10 @@ const sidebarMenus = [
         id: 'theme',
         label: 'Theme',
       },
+      {
+        id: 'assets',
+        label: 'Assets',
+      },
       {
         id: 'hashtags',
         label: 'Hashtags',
@@ -90,6 +94,7 @@ const sidebarMenus = [
       {
         id: 'subscription',
         label: 'Pro Subscription',
+        path: 'pro',
       },
       {
         id: ':user',

src/app/modules/analytics/v2/layouts/layout-summary/layout-summary.component.html

@@ -44,7 +44,7 @@
 
   <!-- BOOST BACKLOG -->
   <div class="m-analyticsSummary__boostBacklogWrapper" *ngIf="boosts">
-    <div class="m-analyticsSummary__boostBacklogTitle">Boost Backlog</div>
+    <div class="m-analyticsSummary__boostBacklogTitle" i18n>Boost Backlog</div>
     <div class="m-analyticsSummary__boostRowsContainer">
       <ng-container *ngFor="let boostRow of boostRows">
         <div class="m-analyticsSummary__boostRow">

src/app/modules/analytics/v2/layouts/layout-summary/layout-summary.component.ts

@@ -61,7 +61,7 @@ export class AnalyticsLayoutSummaryComponent implements OnInit {
     },
   ];
 
-  constructor(private client: Client, private session: Session) {}
+  constructor(private client: Client, public session: Session) {}
 
   ngOnInit() {
     // TODO: confirm how permissions/security will work

src/app/modules/pro/settings/settings.component.ts

@@ -22,11 +22,8 @@ import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
   templateUrl: 'settings.component.html',
 })
 export class ProSettingsComponent implements OnInit, OnDestroy {
-  activeTab: string;
-  activeTabTitles: any;
-  // tabTitle: string;
-  // tabSubtitle: string;
-  tabTitles = [
+  activeTab: any;
+  tabs = [
     {
       id: 'general',
       title: 'General',
@@ -35,7 +32,12 @@ export class ProSettingsComponent implements OnInit, OnDestroy {
     {
       id: 'theme',
       title: 'Theme',
-      subtitle: "Set up your page's color theme",
+      subtitle: "Set up your site's color theme",
+    },
+    {
+      id: 'assets',
+      title: 'Assets',
+      subtitle: 'Upload custom logo and background images',
     },
     {
       id: 'hashtags',
@@ -45,18 +47,13 @@ export class ProSettingsComponent implements OnInit, OnDestroy {
     {
       id: 'footer',
       title: 'Footer',
-      subtitle: "Set up your page's footer links",
+      subtitle: "Set up your site's footer links",
     },
     {
       id: 'domain',
       title: 'Domain',
       subtitle: 'Customize your site domain',
     },
-    {
-      id: 'subscription',
-      title: 'Subscription',
-      subtitle: 'Manage your PRO subscription',
-    },
   ];
 
   settings: any;
@@ -65,14 +62,14 @@ export class ProSettingsComponent implements OnInit, OnDestroy {
 
   saved: boolean = false;
 
-  currentTab:
-    | 'general'
-    | 'theme'
-    | 'assets'
-    | 'hashtags'
-    | 'footer'
-    | 'domain'
-    | 'cancel' = 'general';
+  // currentTab:
+  //   | 'general'
+  //   | 'theme'
+  //   | 'assets'
+  //   | 'hashtags'
+  //   | 'footer'
+  //   | 'domain'
+  //   | 'cancel' = 'general';
 
   user: string | null = null;
 
@@ -107,14 +104,13 @@ export class ProSettingsComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
     this.paramMap$ = this.route.paramMap.subscribe((params: ParamMap) => {
-      this.activeTab = params.get('tab');
-      this.activeTabTitles = this.tabTitles.find(
-        tabTitleObj => tabTitleObj.id === this.activeTab
-      );
+      const activeTabParam = params.get('tab');
+      this.activeTab = this.tabs.find(tab => tab.id === activeTabParam);
     });
 
     this.param$ = this.route.params.subscribe(params => {
       if (this.session.isAdmin()) {
+        console.log('***', this.route.params);
         this.user = params['user'] || null;
       }