(feat): custom styling

src/app/interfaces/entities.ts

@@ -70,6 +70,7 @@ export interface MindsUser {
  toaster_notifications?: boolean;
  pro?: boolean;
  pro_settings?: { [key: string]: string };
+ pro_styles?: { [key: string]: string };
 }
 
 export interface MindsGroup {

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

@@ -2,6 +2,10 @@ m-pro--channel {
  display: block;
  background: none no-repeat center fixed;
  background-size: cover;
+
+ --primary-color: #4690D6;
+ --plain-background-color: rgba(0, 0, 0, 0.7);
+ --text-color: #fff;
 }
 
 .m-pro--channel {
@@ -59,10 +63,10 @@ m-pro--channel {
 
  // colors
  a.active, a:hover {
- color: #4690D6 !important;
+ color: var(--primary-color) !important;
  }
 
  a, h1, h2, h3, h4, h5, p, i {
- color: white !important;
+ color: var(--text-color) !important;
  }
 }

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

-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, OnDestroy, OnInit } from '@angular/core';
+import {
+ ChangeDetectionStrategy,
+ ChangeDetectorRef,
+ Component,
+ ElementRef,
+ HostBinding,
+ OnDestroy,
+ OnInit
+} from '@angular/core';
 import { ActivatedRoute, Router } from "@angular/router";
 import { Session } from "../../../services/session";
 import { Subscription } from "rxjs";
@@ -27,6 +35,7 @@ export class ProChannelComponent implements OnInit, OnDestroy {
  params$: Subscription;
 
  constructor(
+ protected element: ElementRef,
  protected session: Session,
  protected proService: ProService,
  protected client: Client,
@@ -66,6 +75,8 @@ export class ProChannelComponent implements OnInit, OnDestroy {
 
  let title = this.channel.pro_settings.title || this.channel.name;
 
+ this.setCustomStyles();
+
  if (this.channel.pro_settings.headline) {
  title += ` - ${this.channel.pro_settings.headline}`;
  }
@@ -78,6 +89,17 @@ export class ProChannelComponent implements OnInit, OnDestroy {
  this.detectChanges();
  }
 
+ setCustomStyles() {
+ const styles = this.channel.pro_styles;
+
+ for (let style in styles) {
+ if (styles.hasOwnProperty(style) && styles[style].trim() !== '') {
+ const styleAttr = style.replace(/_/g, "-");
+ document.body.style.setProperty(`--${styleAttr}`, styles[style]);
+ }
+ }
+ }
+
  detectChanges() {
  this.cd.markForCheck();
  this.cd.detectChanges();

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

@@ -59,8 +59,8 @@ m-pro--channel-list {
  }
 
  &.m-proChannelListContentList__seeMore {
- color: white;
- background-color: rgba(0, 0, 0, 0.7);
+ color: var(--text-color);
+ background-color: var(--plain-background-color);
  border: 1px solid #777;
 
  font-size: 30px;