src/app/common/common.module.ts

@@ -111,6 +111,7 @@ import { DndModule } from 'ngx-drag-drop';
 import { SiteService } from './services/site.service';
 import { MarketingComponent } from './components/marketing/marketing.component';
 import { MarketingFooterComponent } from './components/marketing/footer.component';
+import { ToggleComponent } from './components/toggle/toggle.component';
 
 @NgModule({
  imports: [
@@ -209,6 +210,7 @@ import { MarketingFooterComponent } from './components/marketing/footer.componen
  FeaturedContentComponent,
  PosterDateSelectorComponent,
  DraggableListComponent,
+ ToggleComponent,
  MarketingComponent,
  MarketingFooterComponent,
  ],
@@ -298,6 +300,7 @@ import { MarketingFooterComponent } from './components/marketing/footer.componen
  PosterDateSelectorComponent,
  ChannelModeSelectorComponent,
  DraggableListComponent,
+ ToggleComponent,
  MarketingComponent,
  ],
  providers: [

src/app/common/components/marketing/footer.component.html

@@ -7,49 +7,53 @@
 
  <ul>
  <li>
- <a href="" i18n>
+ <a href="#" i18n>
  Company
  </a>
  </li>
 
  <li>
- <a href="" i18n>
+ <a href="#" i18n>
  Mission
  </a>
  </li>
 
  <li>
- <a href="" i18n>
+ <a href="#" i18n>
  Features
  </a>
  </li>
 
  <li>
- <a href="" i18n>
+ <a routerLink="/mobile" i18n>
  Mobile
  </a>
  </li>
 
  <li>
- <a href="" i18n>
+ <a routerLink="/jobs" i18n>
  Careers
  </a>
  </li>
 
  <li>
- <a href="" i18n>
+ <a href="#" i18n>
  Investors
  </a>
  </li>
 
  <li>
- <a href="" i18n>
+ <a routerLink="/blog/minds" i18n>
  Blog
  </a>
  </li>
 
  <li>
- <a href="" i18n>
+ <a
+ href="https://cdn-assets.minds.com/front/dist/assets/whitepapers/03_27_18_Minds%20Whitepaper%20V0.1.pdf"
+ target="_blank"
+ i18n
+ >
  Whitepaper
  </a>
  </li>
@@ -63,49 +67,49 @@
 
  <ul>
  <li>
- <a href="" i18n>
+ <a routerLink="/upgrades" i18n>
  Upgrade
  </a>
  </li>
 
  <li>
- <a href="" i18n>
+ <a routerLink="/token" i18n>
  Token
  </a>
  </li>
 
  <li>
- <a href="" i18n>
+ <a routerLink="/plus" i18n>
  Plus
  </a>
  </li>
 
  <li>
- <a href="" i18n>
+ <a routerLink="/pro" i18n>
  Pro
  </a>
  </li>
 
  <li>
- <a href="" i18n>
+ <a href="#" i18n>
  Nodes
  </a>
  </li>
 
  <li>
- <a href="" i18n>
- Ads
+ <a routerLink="/boost" i18n>
+ Boost
  </a>
  </li>
 
  <li>
- <a href="" i18n>
+ <a href="#" i18n>
  Payments
  </a>
  </li>
 
  <li>
- <a href="" i18n>
+ <a href="#" i18n>
  Store
  </a>
  </li>
@@ -119,31 +123,31 @@
 
  <ul>
  <li>
- <a href="" i18n>
+ <a href="https://developers.minds.com" target="_blank" i18n>
  Documentation
  </a>
  </li>
 
  <li>
- <a href="" i18n>
+ <a routerLink="/groups/profile/365903183068794880" i18n>
  Community
  </a>
  </li>
 
  <li>
- <a href="" i18n>
+ <a href="https://gitlab.com/minds" target="_blank" i18n>
  Code
  </a>
  </li>
 
  <li>
- <a href="" i18n>
+ <a routerLink="/canary" i18n>
  Canary
  </a>
  </li>
 
  <li>
- <a href="" i18n>
+ <a routerLink="/branding" i18n>
  Branding
  </a>
  </li>
@@ -157,31 +161,31 @@
 
  <ul>
  <li>
- <a href="" i18n>
+ <a routerLink="/help" i18n>
  Help Desk
  </a>
  </li>
 
  <li>
- <a href="" i18n>
+ <a routerLink="/groups/profile/100000000000000681" i18n>
  Community
  </a>
  </li>
 
  <li>
- <a href="" i18n>
+ <a routerLink="/localization" i18n>
  Languages
  </a>
  </li>
 
  <li>
- <a href="" i18n>
+ <a href="https://status.minds.com" target="_blank" i18n>
  Status
  </a>
  </li>
 
  <li>
- <a href="" i18n>
+ <a routerLink="/p/contact" i18n>
  Contact
  </a>
  </li>
@@ -204,25 +208,25 @@
  >
  <ul class="m-marketingFooter__inlineList">
  <li>
- <a href="" i18n>
+ <a routerLink="/p/terms" i18n>
  Terms of Service
  </a>
  </li>
 
  <li>
- <a href="" i18n>
+ <a routerLink="/p/privacy" i18n>
  Privacy Policy
  </a>
  </li>
 
  <li>
- <a href="" i18n>
+ <a routerLink="/content-policy" i18n>
  Content Policy
  </a>
  </li>
 
  <li>
- <a href="" i18n>
+ <a routerLink="/p/dmca" i18n>
  DMCA
  </a>
  </li>

src/app/common/components/toggle/toggle.component.html

+<div class="m-toggle__track"></div>
+<div
+ class="m-toggle__switch"
+ [class.m-toggle__switch--left]="mModel === leftValue"
+ [class.m-toggle__switch--right]="mModel === rightValue"
+></div>

src/app/common/components/toggle/toggle.component.scss

+m-toggle {
+ position: relative;
+ display: inline-block;
+ width: 27px;
+ height: 19px;
+ margin: 0 0.35em;
+ cursor: pointer;
+
+ .m-toggle__track {
+ display: inline-block;
+ position: absolute;
+ top: 50%;
+ left: 0;
+ right: 0;
+ height: 10px;
+ z-index: 1;
+ transform: translateY(-50%);
+ border-radius: 6px;
+
+ @include m-theme() {
+ background: themed($m-grey-100);
+ }
+ }
+
+ .m-toggle__switch {
+ display: inline-block;
+ position: absolute;
+ top: 0;
+ left: 50%;
+ width: 19px;
+ height: 19px;
+ z-index: 2;
+ transform: translateX(-50%);
+ border-radius: 50%;
+
+ @include m-theme() {
+ background: themed($m-grey-100);
+ box-shadow: 1px 1px 1px -1px rgba(themed($m-black), 0.3);
+ }
+
+ &.m-toggle__switch--left,
+ &.m-toggle__switch--right {
+ transform: none;
+
+ @include m-theme() {
+ background: themed($m-blue);
+ }
+ }
+
+ &.m-toggle__switch--left {
+ left: 0;
+ right: auto;
+ }
+
+ &.m-toggle__switch--right {
+ right: 0;
+ left: auto;
+ }
+ }
+}

src/app/common/components/toggle/toggle.component.ts

+import {
+ ChangeDetectionStrategy,
+ Component,
+ EventEmitter,
+ HostListener,
+ Input,
+ Output,
+} from '@angular/core';
+
+@Component({
+ selector: 'm-toggle',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ templateUrl: 'toggle.component.html',
+})
+export class ToggleComponent {
+ @Input('leftValue') leftValue: any;
+
+ @Input('rightValue') rightValue: any;
+
+ @Input('mModel') mModel: any;
+
+ @Output('mModelChange') mModelChange: EventEmitter<any> = new EventEmitter<
+ any
+ >();
+
+ @HostListener('click') toggle() {
+ if (this.mModel === this.leftValue) {
+ this.mModelChange.emit(this.rightValue);
+ } else {
+ this.mModelChange.emit(this.leftValue);
+ }
+ }
+}

src/app/modules/upgrades/upgrade-options.component.html

@@ -5,12 +5,24 @@
  <div class="m-upgradesUpgradeOptionsHeader__toggleContainer">
  <div class="m-upgradesUpgradeOptionsHeader__toggle">
  <span class="">Yearly</span>
- <!-- TODO: left/right toggle -->
+ <span
+ ><m-toggle
+ [(mModel)]="interval"
+ leftValue="yearly"
+ rightValue="monthly"
+ ></m-toggle
+ ></span>
  <span class="">Monthly</span>
  </div>
  <div class="m-upgradesUpgradeOptionsHeader__toggle">
  <span class="">USD</span>
- <!-- TODO: left/right toggle -->
+ <span
+ ><m-toggle
+ [(mModel)]="currency"
+ leftValue="usd"
+ rightValue="tokens"
+ ></m-toggle
+ ></span>
  <span class="">Tokens</span>
  </div>
  </div>

src/app/modules/upgrades/upgrade-options.component.scss

@@ -21,6 +21,10 @@ m-upgrades__upgradeOptions {
  align-items: center;
 
  .m-upgradesUpgradeOptionsHeader__toggle {
+ display: inline-flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: stretch;
  margin-right: 50px;
 
  &:last-child {

src/app/modules/upgrades/upgrade-options.component.ts

@@ -5,4 +5,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: 'upgrade-options.component.html',
 })
-export class UpgradeOptionsComponent {}
+export class UpgradeOptionsComponent {
+ interval: string = 'yearly';
+ currency: string = 'tokens';
+}