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

@@ -7,7 +7,7 @@ import {
  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";
@@ -67,7 +67,7 @@ export class ProChannelComponent implements OnInit, OnDestroy {
  if (!navigationEvent.urlAfterRedirects) {
  return;
  }
- 
+
  this.currentURL = navigationEvent.urlAfterRedirects;
  this.setTitle();
  }
@@ -95,7 +95,7 @@ export class ProChannelComponent implements OnInit, OnDestroy {
  if (this.channel.pro_settings.headline) {
  title += ` - ${this.channel.pro_settings.headline}`;
  }
- 
+
  if (urlFragments[fragmentIndex]) {
  title += ` - ${urlFragments[fragmentIndex]}`;
  }
@@ -127,9 +127,10 @@ export class ProChannelComponent implements OnInit, OnDestroy {
 
  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)) {
@@ -145,6 +146,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]);
  }
  }
 
@@ -174,7 +176,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')) {
@@ -182,7 +184,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/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();
  }