(feat): Footer settings

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

 <div class="m-pro--settings">
+ <div class="m-toolbar" *ngIf="settings">
+ <div class="m-topbar--row">
+ <div class="m-topbar--navigation m-topbar--navigation--text-only">
+ <a
+ class="m-topbar--navigation--item"
+ [class.m-topbar--navigation--item-active]="currentTab === 'general'"
+ (click)="currentTab = 'general'"
+ >
+ <span i18n>General</span>
+ <m-tooltip icon="help" i18n>
+ TBD
+ </m-tooltip>
+ </a>
+
+ <a
+ class="m-topbar--navigation--item"
+ [class.m-topbar--navigation--item-active]="currentTab === 'theme'"
+ (click)="currentTab = 'theme'"
+ >
+ <span i18n>Theme</span>
+ <m-tooltip icon="help" i18n>
+ TBD
+ </m-tooltip>
+ </a>
+
+ <a
+ class="m-topbar--navigation--item"
+ [class.m-topbar--navigation--item-active]="currentTab === 'footer'"
+ (click)="currentTab = 'footer'"
+ >
+ <span i18n>Footer</span>
+ <m-tooltip icon="help" i18n>
+ TBD
+ </m-tooltip>
+ </a>
+
+ <a
+ class="m-topbar--navigation--item"
+ [class.m-topbar--navigation--item-active]="currentTab === 'cancel'"
+ (click)="currentTab = 'cancel'"
+ >
+ <span i18n>Cancel</span>
+ <m-tooltip icon="help" i18n>
+ TBD
+ </m-tooltip>
+ </a>
+ </div>
+ </div>
+ </div>
+
  <div class="m-page">
  <div class="m-page--main m-pro--settings--page m-border">
- <h4 i18n>Pro Settings</h4>
-
  <div *ngIf="inProgress && !settings">
  <div class="mdl-spinner mdl-js-spinner is-active" [mdl]></div>
  </div>
 
  <ng-container *ngIf="settings">
  <form (ngSubmit)="save()">
- <div class="m-pro--settings--field">
- <label for="domain" i18n>Domain</label>
- <input type="text" id="domain" name="domain" [(ngModel)]="settings.domain">
- </div>
+ <ng-container [ngSwitch]="currentTab">
 
- <div class="m-pro--settings--field">
- <label for="title" i18n>Title</label>
- <input type="text" id="title" name="title" [(ngModel)]="settings.title">
- </div>
+ <!-- General -->
 
- <div class="m-pro--settings--field">
- <label for="headline" i18n>Headline</label>
- <input type="text" id="headline" name="headline" [(ngModel)]="settings.headline">
- </div>
+  <ng-template ngSwitchCase="general">
+  <p class="m-pro--settings--note" i18n>
+  Customize your domain, title and headline. This will be used as your SEO tags as well.
+  </p>
 
- <div class="m-pro--settings--field">
- <label for="text_color" i18n>Text Color</label>
- <input type="color" id="text_color" name="text_color" [(ngModel)]="settings.text_color">
- </div>
+  <div class="m-pro--settings--field">
+  <label for="domain" i18n>Domain</label>
+  <input type="text" id="domain" name="domain" [(ngModel)]="settings.domain">
+  </div>
 
- <div class="m-pro--settings--field">
- <label for="primary_color" i18n>Primary Color</label>
- <input type="color" id="primary_color" name="primary_color" [(ngModel)]="settings.primary_color">
- </div>
+  <div class="m-pro--settings--field">
+  <label for="title" i18n>Title</label>
+  <input type="text" id="title" name="title" [(ngModel)]="settings.title">
+  </div>
 
- <div class="m-pro--settings--field">
- <label for="plain_background_color" i18n>Plain Background Color</label>
- <input type="color" id="plain_background_color" name="plain_background_color" [(ngModel)]="settings.plain_background_color">
- </div>
+ <div class="m-pro--settings--field">
+ <label for="headline" i18n>Headline</label>
+ <input type="text" id="headline" name="headline" [(ngModel)]="settings.headline">
+ </div>
+ </ng-template>
+
+ <!-- Theme -->
+
+ <ng-template ngSwitchCase="theme">
+ <p class="m-pro--settings--note" i18n>
+ Set up your colors schema below.
+ </p>
 
- <div class="m-pro--settings--field">
+ <div class="m-pro--settings--field">
+ <label for="text_color" i18n>Text Color</label>
+ <input type="color" id="text_color" name="text_color" [(ngModel)]="settings.text_color">
+ </div>
+
+ <div class="m-pro--settings--field">
+ <label for="primary_color" i18n>Primary Color</label>
+ <input type="color" id="primary_color" name="primary_color" [(ngModel)]="settings.primary_color">
+ </div>
+
+ <div class="m-pro--settings--field">
+ <label for="plain_background_color" i18n>Plain Background Color</label>
+ <input type="color" id="plain_background_color" name="plain_background_color" [(ngModel)]="settings.plain_background_color">
+ </div>
+ </ng-template>
+
+ <!-- Footer -->
+
+ <ng-template ngSwitchCase="footer">
+ <p class="m-pro--settings--note" i18n>
+ Set up your footer links below.
+ </p>
+
+ <div class="m-pro--settings--field">
+ <label for="footer_text" i18n>Text</label>
+ <input type="text" id="footer_text" name="footer_text" [(ngModel)]="settings.footer_text">
+ </div>
+
+ <div class="m-pro--settings--field" *ngFor="let link of settings.footer_links; let i = index">
+ <label for="headline" i18n>Link #{{ i + 1 }}</label>
+
+ <div class="m-pro--settings--flex-inputs">
+ <input
+ type="text"
+ placeholder="Title"
+ [id]="'footer-link-title-' + i"
+ [name]="'footer_link[' + i + '][title]'"
+ [(ngModel)]="link.title"
+ i18n-placeholder
+ >
+
+ <input
+ type="text"
+ placeholder="https://example.com/"
+ [id]="'footer-link-href-' + i"
+ [name]="'footer_link[' + i + '][href]'"
+ [(ngModel)]="link.href"
+ i18n-placeholder
+ >
+ </div>
+ </div>
+
+ <div class="m-pro--settings--field">
+ <button
+ class="m-btn m-btn--slim"
+ type="button"
+ [disabled]="inProgress"
+ (click)="addBlankFooterLink()"
+ i18n
+ >+ Add Link</button>
+ </div>
+ </ng-template>
+
+ <!-- Cancel -->
+
+ <ng-template ngSwitchCase="cancel">
+ <p class="m-pro--settings--note" i18n>
+ Clicking the button below will take you to Minds Pro page, where you can
+ cancel your subscription.
+ </p>
+
+ <div class="m-pro--settings--field">
+ <a
+ class="m-btn m-link-btn m-btn--slim m-btn--destructive"
+ routerLink="/pro"
+ >Cancel Pro</a>
+ </div>
+ </ng-template>
+ </ng-container>
+
+ <div class="m-pro--settings--field" *ngIf="currentTab !== 'cancel'">
  <button
  class="m-btn m-btn--slim m-btn--action"
  type="submit"
@@ -58,13 +188,6 @@
  i18n
  >Preview your Pro site</a>
  </div>
-
- <div class="m-pro--settings--field">
- <a
- class="m-btn m-link-btn m-btn--slim m-btn--destructive"
- routerLink="/pro"
- >Cancel Pro</a>
- </div>
  </form>
  </ng-container>
  </div>

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

 .m-pro--settings {
  max-width: 1280px;
  margin: auto;
+
+ .m-toolbar {
+ padding-top: 4px;
+ }
 }
 
 .m-pro--settings--page {
- margin-top: 16px;
  padding-bottom: 24px;
 
  @include m-theme() {
@@ -49,6 +52,10 @@
  font-size: 16px;
  max-width: 40em;
 
+ @media screen and (max-width: 768px) {
+ max-width: 100%;
+ }
+
  @include m-theme() {
  border-color: themed($m-grey-50);
  }
@@ -63,4 +70,29 @@
  border-color: themed($m-grey-300);
  }
  }
+
+ .m-pro--settings--note {
+ @include m-theme() {
+ color: themed($m-grey-400);
+ }
+ }
+
+ .m-pro--settings--flex-inputs {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ max-width: 40em;
+
+ @media screen and (max-width: 768px) {
+ max-width: 100%;
+ }
+
+ > input {
+ margin-right: 8px;
+
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+ }
 }

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

@@ -16,6 +16,8 @@ export class ProSettingsComponent implements OnInit {
 
  saved: boolean = false;
 
+ currentTab: 'general' | 'theme' | 'footer' | 'cancel' = 'general';
+
  constructor(
  protected service: ProService,
  protected session: Session,
@@ -56,6 +58,14 @@ export class ProSettingsComponent implements OnInit {
  this.detectChanges();
  }
 
+ addBlankFooterLink() {
+ if (!this.settings) {
+ return;
+ }
+
+ this.settings.footer_links.push({ title: '', href: '' });
+ }
+
  detectChanges() {
  this.cd.markForCheck();
  this.cd.detectChanges();