...
 
Commits (2)
......@@ -3,7 +3,8 @@ import {
ChangeDetectorRef,
Component,
ElementRef,
HostBinding, HostListener,
HostBinding,
HostListener,
OnDestroy,
OnInit
} from '@angular/core';
......@@ -164,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;
}
......
......@@ -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> {
......
......@@ -97,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">
......@@ -115,6 +115,16 @@
<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">
......
......@@ -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],
......
......@@ -45,14 +45,6 @@ export class ProSettingsComponent implements OnInit {
this.settings = settings;
if (this.settings && this.settings.tag_list) {
this.settings.tag_list = this.settings.tag_list.map(({ tag, label }) => {
const formattedTag = `#${tag}`;
return { tag: formattedTag, label };
});
}
this.title.setTitle('Pro Settings');
this.inProgress = false;
......
......@@ -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}');
......