Merge branch 'goal/pro-logo-upload' into 'master' (325552f9) · Commits · Minds / Minds Frontend

cypress/integration/pro/settings.spec.js

+0 −1

Original line number	Diff line number	Diff line
		@@ -21,7 +21,6 @@ context('Pro Settings', () => {
		43: '#tile_ratio_4\:3', // 4:3
		11: '#tile_ratio_1\:1' , // 1:1
		},
		logoGuid: '#logo_guid',
		}

		const hashtags = {

src/app/interfaces/entities.ts

+2 −1

Original line number	Diff line number	Diff line
		@@ -85,7 +85,6 @@ export interface MindsUser {
		pro_published?: boolean;
		pro_settings?: {
		logo_image: string;
		logo_guid: string;
		tag_list?: Tag[];
		background_image: string;
		title: string;
		@@ -97,6 +96,8 @@ export interface MindsUser {
		featured_content?: Array<string>;
		tile_ratio?: string;
		styles?: { [key: string]: string };
		has_custom_logo?: boolean;
		has_custom_background?: boolean;
		};
		mode: ChannelMode;
		}

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

+3 −1

Original line number	Diff line number	Diff line
		<div class="m-pro__channel">
		<ng-container *ngIf="channel">
		<div class="m-proChannel__topbar">
		<ng-container *ngIf="!channel.pro_settings.logo_guid; else customLogo">
		<ng-container
		*ngIf="!channel.pro_settings.has_custom_logo; else customLogo"
		>
		<minds-avatar
		[object]="channel"
		[routerLink]="homeRouterLink"

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

+20 −1

Original line number	Diff line number	Diff line
		import { Injectable } from '@angular/core';
		import { Client } from '../../services/api/client';
		import { Upload } from '../../services/api/upload';

		@Injectable()
		export class ProService {
		public readonly ratios = ['16:9', '16:10', '4:3', '1:1'];

		constructor(protected client: Client) {}
		constructor(protected client: Client, protected uploadClient: Upload) {}

		async isActive(): Promise<boolean> {
		const result: any = await this.client.get('api/v2/pro');
		@@ -66,4 +67,22 @@ export class ProService {
		await this.client.post(endpoint.join('/'), settings);
		return true;
		}

		async upload(type: string, file, remoteUser: string \| null = null) {
		const endpoint = ['api/v2/pro/settings/assets', type];

		if (remoteUser) {
		endpoint.push(remoteUser);
		}

		const response = (await this.uploadClient.post(endpoint.join('/'), [
		file,
		])) as any;

		if (!response \|\| response.status !== 'success') {
		throw new Error(response.message \|\| 'Invalid server response');
		}

		return true;
		}
		}

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

+77 −9

Original line number	Diff line number	Diff line
		@@ -24,6 +24,17 @@
		</m-tooltip>
		</a>

		<a
		class="m-topbar--navigation--item"
		[class.m-topbar--navigation--item-active]="currentTab === 'assets'"
		(click)="currentTab = 'assets'"
		>
		<span i18n>Assets</span>
		<m-tooltip icon="help" i18n>
		Upload a custom logo and background.
		</m-tooltip>
		</a>

		<a
		class="m-topbar--navigation--item"
		[class.m-topbar--navigation--item-active]="currentTab === 'hashtags'"
		@@ -207,15 +218,72 @@
		</label>
		</ng-container>
		</div>
		</ng-template>

		<!-- Assets -->

		<ng-template ngSwitchCase="assets">
		<p class="m-proSettings__note" i18n>
		Upload a custom logo and background.
		</p>

		<div class="m-proSettings__field">
		<label for="logo_guid" i18n>Logo Asset GUID</label>
		<label for="logo" i18n>Logo Image</label>

		<label
		for="logo"
		class="m-proSettingsField__filePreview m-proSettingsField__logoFilePreview"
		[ngStyle]="{
		backgroundColor: settings.plain_background_color
		}"
		>
		<input
		type="text"
		id="logo_guid"
		name="logo_guid"
		[(ngModel)]="settings.logo_guid"
		type="file"
		id="logo"
		name="logo"
		accept="image/*"
		(change)="onAssetFileSelect('logo', logoField.files)"
		#logoField
		/>

		<img
		*ngIf="getPreviewAssetSrc('logo')"
		[src]="getPreviewAssetSrc('logo')"
		/>

		<span class="m-proSettingsFieldFilePreview__overlay">
		<i class="material-icons">cloud_upload</i>
		</span>
		</label>
		</div>

		<div class="m-proSettings__field">
		<label for="background" i18n>Background</label>

		<label
		for="background"
		class="m-proSettingsField__filePreview m-proSettingsField__backgroundFilePreview"
		>
		<input
		type="file"
		id="background"
		name="background"
		accept="image/*"
		(change)="
		onAssetFileSelect('background', backgroundField.files)
		"
		#backgroundField
		/>

		<img
		*ngIf="getPreviewAssetSrc('background')"
		[src]="getPreviewAssetSrc('background')"
		/>

		<span class="m-proSettingsFieldFilePreview__overlay">
		<i class="material-icons">cloud_upload</i>
		</span>
		</label>
		</div>
		</ng-template>

		@@ -381,8 +449,8 @@
		</ng-template>
		</ng-container>

		<div class="m-proSettings__error" *ngIf="!!error">
		{{ error }}
		<div class="m-proSettings__error" *ngIf="error">
		Error: {{ error }}
		</div>

		<div