(feat): View and preview assets, stylize input fields

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

@@ -229,28 +229,61 @@
 
  <div class="m-proSettings__field">
  <label for="logo" i18n>Logo Image</label>
- <input
- type="file"
- id="logo"
- name="logo"
- accept="image/*"
- (change)="onAssetFileSelect('logo', logoField.files)"
- #logoField
- />
+
+ <label
+ for="logo"
+ class="m-proSettingsField__filePreview m-proSettingsField__logoFilePreview"
+ [ngStyle]="{
+ backgroundColor: settings.plain_background_color
+ }"
+ >
+ <input
+ 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>
- <input
- type="file"
- id="background"
- name="background"
- accept="image/*"
- (change)="
- onAssetFileSelect('background', backgroundField.files)
- "
- #backgroundField
- />
+
+ <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>
 

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

@@ -92,6 +92,68 @@
  margin-left: auto;
  }
  }
+
+ .m-proSettingsField__filePreview {
+ position: relative;
+ overflow: hidden;
+ display: inline-block;
+ border-radius: 4px;
+ cursor: pointer;
+ margin: 0;
+
+ &.m-proSettingsField__logoFilePreview {
+ padding: 16px;
+
+ > img {
+ max-width: 100%;
+ max-height: 100px;
+ object-fit: contain;
+ }
+ }
+
+ &.m-proSettingsField__backgroundFilePreview {
+ > img {
+ width: 480px;
+ height: 270px;
+ object-fit: cover;
+ }
+ }
+
+ input[type='file'] {
+ position: absolute;
+ -webkit-appearance: none;
+ width: 0.1px;
+ height: 0.1px;
+ z-index: -1;
+ opacity: 0.01;
+ top: -1px;
+ left: -1px;
+ }
+
+ .m-proSettingsFieldFilePreview__overlay {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 5;
+ background: rgba(0, 0, 0, 0.4);
+
+ > i.material-icons {
+ font-size: 3em;
+ color: #ffffff;
+ }
+ }
+
+ &:hover {
+ .m-proSettingsFieldFilePreview__overlay {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+ }
  }
 
  .m-proSettings__previewBtn {

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

@@ -13,6 +13,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { MindsTitle } from '../../../services/ux/title';
 import { Subscription } from 'rxjs';
 import { SiteService } from '../../../common/services/site.service';
+import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 
 @Component({
  selector: 'm-pro--settings',
@@ -54,7 +55,8 @@ export class ProSettingsComponent implements OnInit, OnDestroy {
  protected route: ActivatedRoute,
  protected cd: ChangeDetectorRef,
  protected title: MindsTitle,
- protected site: SiteService
+ protected site: SiteService,
+ protected sanitizer: DomSanitizer
  ) {}
 
  ngOnInit() {
@@ -117,6 +119,22 @@ export class ProSettingsComponent implements OnInit, OnDestroy {
  }
  }
 
+ getPreviewAssetSrc(type: string): string | SafeUrl {
+ if (this.settings[type]) {
+ if (!this.settings[type]._mindsBlobUrl) {
+ this.settings[type]._mindsBlobUrl = URL.createObjectURL(this.settings[
+ type
+ ] as File);
+ }
+
+ return this.sanitizer.bypassSecurityTrustUrl(
+ this.settings[type]._mindsBlobUrl
+ );
+ }
+
+ return this.settings[`${type}_image`];
+ }
+
  async save() {
  this.error = null;
  this.inProgress = true;