Rename app-blocks and app-blockviewer & transfer layout.scss into styles.scss

2021-12-30 09:21:53 +03:00
parent c81ea58d3a
commit 834bfe5f40
12 changed files with 681 additions and 569 deletions
@@ -0,0 +1,119 @@
+.block-section {
+    margin-bottom: 4rem;
+    overflow: hidden;
+}
+
+.block-header {
+    padding: 1rem 2rem;
+    background-color: var(--surface-section);
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+    border:1px solid var(--surface-d);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .block-title {
+        font-weight: 700;
+        display: inline-flex;
+        align-items: center;
+
+        .badge-free {
+            border-radius: 4px;
+            padding: .25rem .5rem;
+            background-color: var(--orange-500);
+            color: white;
+            margin-left: 1rem;
+            font-weight: 700;
+            font-size: .875rem;
+        }
+    }
+
+    .block-actions {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        user-select: none;
+        margin-left: 1rem;
+
+        a {
+            display: flex;
+            align-items: center;
+            margin-right: .75rem;
+            padding: .5rem 1rem;
+            border-radius: 4px;
+            font-weight: 600;
+            border: 1px solid transparent;
+            transition: background-color .2s;
+            cursor: pointer;
+
+            &:last-child {
+                margin-right: 0;
+            }
+
+            &:not(.block-action-disabled):hover {
+                background-color: var(--surface-c);
+            }
+
+            &.block-action-active {
+                border-color: var(--primary-color);
+                color: var(--primary-color);
+            }
+
+            &.block-action-copy {
+                i {
+                    color: var(--primary-color);
+                    font-size: 1.25rem;
+                }
+            }
+
+            &.block-action-disabled {
+                opacity: .6;
+                cursor: auto !important;
+            }
+
+            i {
+                margin-right: .5rem;
+            }
+        }
+    }
+}
+
+.block-content {
+    padding: 0;
+    border:1px solid var(--surface-d);
+    border-top: 0 none;
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
+    overflow: hidden;
+}
+
+:host ::ng-deep pre[class*="language-"] {
+    margin: 0 !important;
+
+    &:before, &:after {
+        display: none !important;
+    } 
+
+    code {
+        border-left: 0 none !important;
+        box-shadow: none !important;
+        background: var(--surface-e) !important;
+        margin: 0;
+        color: var(--text-color);
+        font-size: 14px;
+        padding: 0 2rem !important;
+    }
+}
+
+@media screen and (max-width: 575px) {
+    .block-header {
+        flex-direction: column;
+        align-items: start;
+
+        .block-actions {
+            margin-top: 1rem;
+            margin-left: 0;
+        }
+    }
+}
@@ -0,0 +1,80 @@
+import { Component, Input } from '@angular/core';
+import { environment } from '../../../environments/environment';
+
+enum BlockView {
+  PREVIEW,
+  CODE
+}
+
+@Component({
+  selector: 'block-viewer',
+  template: `
+    <div class="block-section">
+        <div class="block-header">
+            <span class="block-title">
+                <span>{{header}}</span>
+                <span class="badge-free" *ngIf="free">Free</span>
+                <span class="badge-new" *ngIf="new">New</span>
+            </span>
+            <div class="block-actions">
+                <a tabindex="0" [ngClass]="{'block-action-active': blockView == BlockView.PREVIEW}" (click)="activateView($event, BlockView.PREVIEW)"><span>Preview</span></a>
+                <a [attr.tabindex]="codeDisabled ? null: '0'" [ngClass]="{'block-action-active': blockView == BlockView.CODE, 'block-action-disabled': codeDisabled}" (click)="activateView($event, BlockView.CODE)">
+                    <i class="pi pi-lock" *ngIf="codeDisabled"></i>
+                    <span>Code</span>
+                </a>
+                <a [attr.tabindex]="codeDisabled ? null: '0'" class="block-action-copy" [ngClass]="{'block-action-disabled': codeDisabled}" (click)="copyCode($event)" 
+                    pTooltip="Copied to clipboard" tooltipEvent="focus" tooltipPosition="bottom" [tooltipDisabled]="codeDisabled"><i class="pi pi-copy"></i></a>
+            </div>
+        </div>
+        <div class="block-content">
+            <div [class]="containerClass" [ngStyle]="previewStyle" *ngIf="blockView == BlockView.PREVIEW">
+                <ng-content></ng-content>
+            </div>
+            <div *ngIf="blockView == BlockView.CODE && !codeDisabled">
+                <app-code lang="markup" ngPreserveWhitespaces>{{code}}
+                </app-code>
+            </div>
+        </div>
+    </div>
+  `,
+  styleUrls: ['./blockviewer.component.scss']
+})
+export class BlockViewer {
+  
+  @Input() header: string;
+
+  @Input() code: string;
+
+  @Input() containerClass: string;
+
+  @Input() previewStyle: string;
+
+  @Input() free: boolean = false;
+
+  @Input() new: boolean = false;
+
+  BlockView = BlockView;
+
+  blockView: BlockView = BlockView.PREVIEW;
+
+  activateView(event: Event, blockView: BlockView) {
+      if (!this.codeDisabled) {
+          this.blockView = blockView;
+      }
+      
+      event.preventDefault();
+  }
+
+  async copyCode(event: Event) {
+      if (!this.codeDisabled) {
+          await navigator.clipboard.writeText(this.code);
+      }
+
+      event.preventDefault();
+  }
+
+  get codeDisabled() {
+      return this.free ? false : (environment ? environment.production: false);
+  }
+
+}