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

@@ -28,13 +28,13 @@
  </div>
 
  <ng-container *ngIf="!collapseNavItems">
-<!-- <a
+ <a
  class="m-proChannelTopbar__navItem"
  [routerLink]="['/pro', channel.username, 'feed']"
  [queryParams]="{algorithm: 'pro'}"
  routerLinkActive="active"
  i18n
- >Feed</a>-->
+ >Feed</a>
  <a
  class="m-proChannelTopbar__navItem"
  [routerLink]="linkTo('videos', searchedText)"
@@ -65,19 +65,6 @@
  routerLinkActive="active"
  i18n
  >Donate</a>
- <a
- class="m-proChannelTopbar__navItem"
- [routerLink]="['/pro', channel.username, 'signup']"
- routerLinkActive="active"
- *ngIf="!currentUser"
- i18n
- >Signup / Login</a>
- </ng-container>
-
- <ng-container *ngIf="currentUser">
- <a [routerLink]="['/', channel.username]" routerLinkActive="active">
- <minds-avatar [object]="currentUser" [editMode]="false"></minds-avatar>
- </a>
  </ng-container>
 
  <m-pro-user-menu [channelName]="channel.username" [showNavItems]="collapseNavItems" [query]="searchedText"></m-pro-user-menu>

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

@@ -15,7 +15,7 @@ m-pro--channel {
  display: grid;
  grid-template-rows: repeat(2, 100px) 1fr 100px;
  grid-template-columns: repeat(12, 1fr);
- min-height: 100%;
+ min-height: calc(100vh - 52px); /* 52px is the topbar height */
 
  .m-proChannel__topbar {
  grid-row: 1 / span 1;
@@ -57,24 +57,30 @@ m-pro--channel {
  position: absolute;
  margin: 6px;
  font-size: 20px;
- color: rgba(0,0,0,.87)!important;
+
+ @include m-theme() {
+ color: themed($m-black);
+ }
  }
 
  i.clear {
  font-size: 16px;
- background-color: #3e3737;
- color: white;
+
  border-radius: 20px;
  cursor: pointer;
  position: absolute;
  top: 16px;
  right: 10px;
+
+ @include m-theme() {
+ color: themed($m-black);
+ }
  }
  
  input {
  height: 32px;
  border-radius: 18px;
- font-family: Roboto,sans-serif;
+ font-family: Roboto, sans-serif;
  font-size: 14px;
  letter-spacing: .5px;
  font-weight: 600;

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

@@ -3,16 +3,17 @@ import {
  ChangeDetectorRef,
  Component,
  ElementRef,
- HostBinding, HostListener,
+ HostBinding,
+ HostListener,
  OnDestroy,
  OnInit
 } from '@angular/core';
-import { ActivatedRoute, Router, NavigationEnd, NavigationStart  } from "@angular/router";
+import { ActivatedRoute, Router, NavigationEnd, NavigationStart } from "@angular/router";
 import { Session } from "../../../services/session";
 import { Subscription } from "rxjs";
 import { MindsUser } from "../../../interfaces/entities";
 import { Client } from "../../../services/api/client";
-import { Title } from "@angular/platform-browser";
+import { MindsTitle } from '../../../services/ux/title';
 import { ProChannelService } from './channel.service';
 
 @Component({
@@ -48,7 +49,7 @@ export class ProChannelComponent implements OnInit, OnDestroy {
  protected session: Session,
  protected channelService: ProChannelService,
  protected client: Client,
- protected title: Title,
+ protected title: MindsTitle,
  protected router: Router,
  protected route: ActivatedRoute,
  protected cd: ChangeDetectorRef,
@@ -67,8 +68,9 @@ export class ProChannelComponent implements OnInit, OnDestroy {
  if (!navigationEvent.urlAfterRedirects) {
  return;
  }
- 
+
  this.currentURL = navigationEvent.urlAfterRedirects;
+ this.setTitle();
  }
  } catch (e) {
  console.error('Minds: router hook(SearchBar)', e);
@@ -86,6 +88,23 @@ export class ProChannelComponent implements OnInit, OnDestroy {
  });
  }
 
+ setTitle() {
+ let title = this.channel.pro_settings.title as string || this.channel.name;
+
+ const childRoute = this.route.children.length > 0 ? this.route.children[0].snapshot : null;
+
+ if (childRoute && childRoute.params['type']) {
+ title += ` - ${childRoute.params['type']}`;
+ }
+
+ if (this.channel.pro_settings.headline) {
+ title += ` - ${this.channel.pro_settings.headline}`;
+ }
+
+
+ this.title.setTitle(title);
+ }
+
  ngOnDestroy() {
  this.params$.unsubscribe();
  this.routerSubscription.unsubscribe();
@@ -102,24 +121,18 @@ export class ProChannelComponent implements OnInit, OnDestroy {
  try {
  this.channel = await this.channelService.load(this.username);
 
- let title = this.channel.pro_settings.title as string || this.channel.name;
-
  this.bindCssVariables();
-
- if (this.channel.pro_settings.headline) {
- title += ` - ${this.channel.pro_settings.headline}`;
- }
-
- this.title.setTitle(title);
+ this.setTitle();
  } catch (e) {
  this.error = e.getMessage();
  }
 
  this.detectChanges();
  }
- 
+
  bindCssVariables() {
  const styles = this.channel.pro_settings.styles;
+ const modal: HTMLElement = document.querySelector('m-app m-overlay-modal');
 
  for (const style in styles) {
  if (!styles.hasOwnProperty(style)) {
@@ -135,6 +148,7 @@ export class ProChannelComponent implements OnInit, OnDestroy {
  const styleAttr = style.replace(/_/g, "-");
  this.element.nativeElement
  .style.setProperty(`--${styleAttr}`, styles[style]);
+ modal.style.setProperty(`--${styleAttr}`, styles[style]);
  }
  }
 
@@ -151,6 +165,14 @@ export class ProChannelComponent implements OnInit, OnDestroy {
  return `url(${this.channel.pro_settings.background_image})`;
  }
 
+ @HostBinding('class') get cssColorSchemeOverride() {
+ if (!this.channel) {
+ return '';
+ }
+
+ return `m-theme--wrapper__${this.channel.pro_settings.scheme || 'light'}`;
+ }
+
  @HostListener('window:resize') onResize() {
  this.collapseNavItems = window.innerWidth <= 992 ? true : false;
  }
@@ -164,7 +186,7 @@ export class ProChannelComponent implements OnInit, OnDestroy {
  }
 
  search() {
- if(!this.currentURL){
+ if (!this.currentURL) {
  this.currentURL = `/pro/${this.channel.username}/articles`; //TODO ADD /TOP when algorithm is enable
  } else {
  if (this.currentURL.includes('query')) {
@@ -172,7 +194,7 @@ export class ProChannelComponent implements OnInit, OnDestroy {
  }
  }
 
- this.router.navigate([this.currentURL,{ query: this.searchedText, period: '24h' }]);
+ this.router.navigate([this.currentURL, { query: this.searchedText, period: '24h' }]);
  }
 
  clearSearch() {

src/app/modules/pro/channel/content-modal/modal.component.scss

@@ -3,8 +3,8 @@
 }
 
 .m-overlay-modal.m-overlayModal--media {
- padding:0px;
- max-width:95%;
+ padding: 0px;
+ max-width: 95%;
  z-index: 9999998;
 
 }
@@ -31,28 +31,30 @@ m-media--modal {
  position: relative;
  width: 100%;
  overflow: hidden; // .????
- @include m-theme(){
+ @include m-theme() {
  background-color: rgba(themed($m-black-always), 0.95);
  }
 
  &:hover {
- .m-mediaModal__theaterOverlay{
+ .m-mediaModal__theaterOverlay {
  opacity: 1;
  }
  }
 
- img{
+ img {
  object-fit: contain;
  flex: 1;
  overflow: hidden;
  }
- m-video{
- @include m-theme(){
+
+ m-video {
+ @include m-theme() {
  background-color: themed($m-black-always);
  }
- video{
- max-width:100%;
- height:100%;
+
+ video {
+ max-width: 100%;
+ height: 100%;
  }
  }
 
@@ -69,8 +71,8 @@ m-media--modal {
  transition: opacity 500ms cubic-bezier(.22, 1, .33, 1);
  box-sizing: border-box;
  font-size: 24px;
- @include m-theme(){
- background: linear-gradient(rgba(themed($m-black-always),0.5), transparent);
+ @include m-theme() {
+ background: linear-gradient(rgba(themed($m-black-always), 0.5), transparent);
  }
 
  &:hover {
@@ -83,9 +85,8 @@ m-media--modal {
  text-overflow: ellipsis;
  text-decoration: none;
 
- @include m-theme(){
- color: themed($m-white-always);
- }
+ color: var(--text-color);
+
  &:hover {
  text-decoration: underline;
  }
@@ -93,9 +94,7 @@ m-media--modal {
 
  // TODO OJM fullscreen styles e.g. .myClass:not(:fullscreen)
  .m-mediaModal__fullscreenButton {
- @include m-theme(){
- color: themed($m-white-always);
- }
+ color: var(--text-color);
  transition: transform 150ms ease;
 
 
@@ -108,6 +107,7 @@ m-media--modal {
  .m-mediaModal__fullscreenIcon--enable {
  transform: scale(1.2);
  }
+
  .m-mediaModal__fullscreenIcon--disable {
  transform: scale(0.83);
  }
@@ -116,6 +116,7 @@ m-media--modal {
  .m-mediaModal__fullscreenIcon--disable {
  font-size: 28px;
  }
+
  .m-mediaModal__fullscreenIcon--disable {
  font-size: 34px;
  }
@@ -138,9 +139,7 @@ m-media--modal {
  padding: 16px;
  font-family: 'Roboto', Helvetica, sans-serif;
 
- @include m-theme(){
- background-color: themed($m-white);
- }
+ background-color: var(--plain-background-color);
 
  .m-mediaModal__ownerBlock {
  padding: 0;
@@ -154,6 +153,7 @@ m-media--modal {
  white-space: nowrap;
  font-weight: 500;
  }
+
  .m-ownerBlock__channelLink, .m-ownerBlock__groupLink {
  text-decoration: none;
  }
@@ -168,9 +168,7 @@ m-media--modal {
  white-space: pre-wrap;
  line-height: 18px;
  -webkit-font-smoothing: antialiased;
- @include m-theme(){
- color: themed($m-grey-400);
- }
+ color: var(--text-color);
 
  > * {
  padding-right: 8px;
@@ -184,14 +182,12 @@ m-media--modal {
 
  .m-ownerBlock__permalinkFlag {
  text-transform: uppercase;
- padding: 0 8px 0 0 ;
+ padding: 0 8px 0 0;
  letter-spacing: 0.5px;
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
- @include m-theme(){
- color: themed($m-grey-400);
- }
+ color: var(--text-color);
  }
 
  .m-ownerBlock__permalinkFlag--boosted {
@@ -207,18 +203,15 @@ m-media--modal {
 
  a {
  vertical-align: middle;
- @include m-theme(){
- color: themed($m-grey-400);
- }
+ color: var(--text-color);
  }
 
  &.m-ownerBlock__permalinkFlag--onchain {
- @include m-theme(){
- color: themed($m-blue);
- }
+ color: var(--primary-color);
+
  a {
- @include m-theme(){
- color: themed($m-blue);
+ @include m-theme() {
+ color: var(--primary-color);
  }
  }
  }
@@ -226,12 +219,14 @@ m-media--modal {
  }
 
  }
+
  .m-mediaModal__actionButtonsWrapper {
  .m-mediaModal__actionButtonsRow {
  display: flex;
  justify-content: space-around;
  padding-top: 16px;
  }
+
  minds-button-boost {
  button {
  margin-top: 8px;
@@ -243,7 +238,7 @@ m-media--modal {
 
  .m-mediaModal__commentsWrapper {
  padding-top: $minds-padding;
- @include m-theme(){
+ @include m-theme() {
  border-top: 1px solid themed($m-grey-100);
  }
 
@@ -252,7 +247,6 @@ m-media--modal {
  flex: 1;
 
 
-
  m-comments__tree {
  height: 100%;
  // height: calc(100vh - 45px);
@@ -294,6 +288,7 @@ m-media--modal {
 
 
  }
+
  .minds-comment {
  padding: 8px 0px;
 
@@ -305,8 +300,9 @@ m-media--modal {
  display: block;
  }
 
- .m-comment-attachment .m-rich-embed{
+ .m-comment-attachment .m-rich-embed {
  max-width: 63%;
+
  .m-blurb {
  display: block;
  }

src/app/modules/pro/channel/footer/footer.component.html

-<span>{{footerText}}</span>
+<div class="m-pro--channel-footer">
+ <span class="m-pro--channel-footer--text">{{footerText}}</span>
 
-<div class="mdl-color-text--blue-grey-600">
+ <div class="m-pro--channel-footer--social-profiles">
  <span *ngFor="let profile of footerSocialProfiles">
  <a *ngIf="profile.key && profile.value"
- [href]="getSocialProfileURL(profile.value)"
- rel="noopener noreferrer"
- target="_blank"
+  [href]="getSocialProfileURL(profile.value)"
+  rel="noopener noreferrer"
+  target="_blank"
  ><i [ngClass]="[ getSocialProfileIconClass(profile) ]"></i></a>
  </span>
-</div>
-
-<a [href]="link.href" *ngFor="let link of footerLinks">{{link.title}}</a>
-
+ </div>
 
+ <a
+ *ngFor="let link of footerLinks"
+ class="m-pro--channel-footer--link"
+ [href]="link.href"
+ >{{link.title}}</a>
+</div>

src/app/modules/pro/channel/footer/footer.component.scss

-m-pro--channel-footer {
+.m-pro--channel-footer {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  height: 100px;
+ color: var(--text-color);
 
  a {
  text-decoration: none;

src/app/modules/pro/channel/list-modal/list-modal.component.scss

@@ -7,3 +7,17 @@
  grid-gap: 16px;
  grid-template-columns: repeat(3, 1fr);
 }
+
+m-overlay-modal {
+ .m-overlayModal--seeMore {
+ background-color: var(--plain-background-color) !important;
+
+ a.m-overlay-modal--close {
+ background-color: var(--transparent-background-color) !important;
+
+ i {
+ color: var(--text-color) !important;
+ }
+ }
+ }
+}

src/app/modules/pro/channel/list-modal/list-modal.component.ts

@@ -78,13 +78,21 @@ export class ProChannelListModal {
  }
 
  async expand(entity) {
- if (entity.subtype !== 'video' && entity.subtype !== 'image') {
- return;
+ switch (this.getType(entity)) {
+ case 'object:blog':
+ window.open(`${window.Minds.site_url}${entity.route}/`, '_blank');
+ break;
+ case 'object:image':
+ case 'object:video':
+ this.modalService.create(ProContentModalComponent, entity, {
+ class: 'm-overlayModal--media'
+ }, this.injector).present();
+ break;
  }
+ }
 
- this.modalService.create(ProContentModalComponent, entity, {
- class: 'm-overlayModal--media'
- }, this.injector).present();
+ private getType(entity: any) {
+ return entity.type === 'object' ? `${entity.type}:${entity.subtype}` : entity.type;
  }
 
  detectChanges() {

src/app/modules/pro/channel/list/list.component.ts

@@ -136,7 +136,14 @@ export class ProChannelListComponent implements OnInit, OnDestroy {
 
  seeMore() {
  this.modalService
- .create(ProChannelListModal, { type: this.type, algorithm: 'latest', query: this.query }, void 0, this.injector)
+ .create(ProChannelListModal, {
+ type: this.type,
+ algorithm: 'latest',
+ query: this.query,
+ },
+ {
+ class: 'm-overlayModal--seeMore'
+ }, this.injector)
  .present();
  }
 

src/app/modules/pro/channel/pro-user-menu/pro-user-menu.component.html

@@ -45,25 +45,6 @@
  <a [routerLink]="['/pro', channel.username, 'donate']" routerLinkActive="active">Donate</a>
  </li>
  </ng-container>
- <li
- class="m-dropdownList__item m-pro-user-menuDropdown__item"
- (click)="closeMenu()"
- >
- <a [routerLink]="['/', channelName]">
- <i class="material-icons">remove_red_eye</i>
- <span i18n>View on Minds</span>
- </a>
- </li>
- <li
- class="m-dropdownList__item m-pro-user-menuDropdown__item"
- *ngIf="getCurrentUser()"
- (click)="closeMenu()"
- >
- <a routerLink="/logout">
- <i class="material-icons">exit_to_app</i>
- <span i18n>Logout</span>
- </a>
- </li>
  </ul>
 </div>
 

src/app/modules/pro/channel/pro-user-menu/pro-user-menu.component.scss

@@ -2,6 +2,10 @@ m-pro-user-menu {
  display: inline-block;
  position: relative;
  cursor: pointer;
+
+ @media screen and (min-width: 1000px) {
+ display: none;
+ }
 }
 
 .m-pro-user-menu__dropdown {

src/app/modules/pro/pro.service.ts

@@ -29,7 +29,23 @@ export class ProService {
  }
 
  async get(): Promise<{ isActive, settings }> {
- return await this.client.get('api/v2/pro/settings', {}, {cache: false}) as any;
+ const { isActive, settings } = await this.client.get('api/v2/pro/settings', {}, {cache: false}) as any;
+
+ if (settings) {
+ if (settings.tag_list) {
+ settings.tag_list = settings.tag_list.map(({ tag, label }) => {
+ const formattedTag = `#${tag}`;
+
+ return { tag: formattedTag, label };
+ });
+ }
+
+ if (!settings.scheme) {
+ settings.scheme = 'light';
+ }
+ }
+
+ return { isActive, settings };
  }
 
  async set(settings): Promise<boolean> {

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

@@ -24,6 +24,17 @@
  </m-tooltip>
  </a>
 
+ <a
+ class="m-topbar--navigation--item"
+ [class.m-topbar--navigation--item-active]="currentTab === 'hashtags'"
+ (click)="currentTab = 'hashtags'"
+ >
+ <span i18n>Hashtags</span>
+ <m-tooltip icon="help" i18n>
+ TBD
+ </m-tooltip>
+ </a>
+
  <a
  class="m-topbar--navigation--item"
  [class.m-topbar--navigation--item-active]="currentTab === 'footer'"
@@ -86,7 +97,7 @@
 
  <ng-template ngSwitchCase="theme">
  <p class="m-pro--settings--note" i18n>
- Set up your colors schema below.
+ Set up your color scheme below.
  </p>
 
  <div class="m-pro--settings--field">
@@ -104,12 +115,64 @@
  <input type="color" id="plain_background_color" name="plain_background_color" [(ngModel)]="settings.plain_background_color">
  </div>
 
+ <div class="m-pro--settings--field">
+ <label i18n>Color Schema</label>
+
+ <input type="radio" id="scheme_light" name="scheme" value="light" [(ngModel)]="settings.scheme">
+ <label for="scheme_light" class="m-pro--settings--inline-label">Light</label>
+
+ <input type="radio" id="scheme_dark" name="scheme" value="dark" [(ngModel)]="settings.scheme">
+ <label for="scheme_dark" class="m-pro--settings--inline-label">Dark</label>
+ </div>
+
  <div class="m-pro--settings--field">
  <label for="logo_guid" i18n>Logo Asset GUID</label>
  <input type="text" id="logo_guid" name="logo_guid" [(ngModel)]="settings.logo_guid">
  </div>
  </ng-template>
 
+ <!-- Tags -->
+
+ <ng-template ngSwitchCase="hashtags">
+ <p class="m-pro--settings--note" i18n>
+ Set up your category filter hashtags here.
+ </p>
+
+ <div class="m-pro--settings--field" *ngFor="let tag of settings.tag_list; let i = index">
+ <label for="headline" i18n>Hashtag #{{ i + 1 }}</label>
+
+ <div class="m-pro--settings--flex-inputs">
+ <input
+ type="text"
+ placeholder="Label"
+ [id]="'tag-label-' + i"
+ [name]="'tag[' + i + '][label]'"
+ [(ngModel)]="tag.label"
+ i18n-placeholder
+ >
+
+ <input
+ type="text"
+ placeholder="#hashtag"
+ [id]="'tag-tag-' + i"
+ [name]="'tag[' + i + '][tag]'"
+ [(ngModel)]="tag.tag"
+ i18n-placeholder
+ >
+ </div>
+ </div>
+
+ <div class="m-pro--settings--field">
+ <button
+ class="m-btn m-btn--slim"
+ type="button"
+ [disabled]="inProgress"
+ (click)="addBlankTag()"
+ i18n
+ >+ Add Tag</button>
+ </div>
+ </ng-template>
+
  <!-- Footer -->
 
  <ng-template ngSwitchCase="footer">

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

@@ -38,6 +38,12 @@
  @include m-theme() {
  color: themed($m-grey-800);
  }
+
+ &.m-pro--settings--inline-label {
+ display: inline-block;
+ padding: 0;
+ margin: 0 0.35em;
+ }
  }
 
  input[type=text],

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

@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@
 import { ProService } from '../pro.service';
 import { Session } from '../../../services/session';
 import { Router } from '@angular/router';
+import { MindsTitle } from '../../../services/ux/title';
 
 @Component({
  selector: 'm-pro--settings',
@@ -16,13 +17,14 @@ export class ProSettingsComponent implements OnInit {
 
  saved: boolean = false;
 
- currentTab: 'general' | 'theme' | 'footer' | 'cancel' = 'general';
+ currentTab: 'general' | 'theme' | 'hashtags' | 'footer' | 'cancel' = 'general';
 
  constructor(
  protected service: ProService,
  protected session: Session,
  protected router: Router,
  protected cd: ChangeDetectorRef,
+ protected title: MindsTitle
  ) {
  }
 
@@ -43,6 +45,8 @@ export class ProSettingsComponent implements OnInit {
 
  this.settings = settings;
 
+ this.title.setTitle('Pro Settings');
+
  this.inProgress = false;
  this.detectChanges();
  }
@@ -58,6 +62,14 @@ export class ProSettingsComponent implements OnInit {
  this.detectChanges();
  }
 
+ addBlankTag() {
+ if (!this.settings) {
+ return;
+ }
+
+ this.settings.tag_list.push({ label: '', tag: '' });
+ }
+
  addBlankFooterLink() {
  if (!this.settings) {
  return;

src/stylesheets/themes.scss

@@ -3,7 +3,8 @@
 // Colors change when .theme__light/.theme__dark classes are toggled on body tag
 @mixin m-theme() {
  @each $theme, $colors in $themes {
- body.m-theme__#{$theme} & {
+ body.m-theme__#{$theme} &,
+ body .m-theme--wrapper__#{$theme} & {
  $theme-map: () !global;
  @each $color-name, $color in $colors {
  $value: map-get(map-get($themes, $theme), '#{$color-name}');