add fullscreen mode

ts_web/elements/wcc-frame.ts

@@ -16,6 +16,9 @@ export class WccFrame extends DeesElement {
   @property({ type: Boolean })
   public advancedEditorOpen: boolean = false;
 
+  @property({ type: Boolean })
+  public isFullscreen: boolean = false;
+
   public static styles = [
     css`
       :host {
@@ -43,9 +46,19 @@ export class WccFrame extends DeesElement {
     return html`
       <style>
         :host {
-          bottom: ${this.advancedEditorOpen ? '400px' : '100px'};
-          transition: bottom 0.3s ease;
-          ${(() => {
+          ${this.isFullscreen ? `
+            border: none !important;
+            left: 0px !important;
+            right: 0px !important;
+            top: 0px !important;
+            bottom: 0px !important;
+          ` : `
+            bottom: ${this.advancedEditorOpen ? '400px' : '100px'};
+            border: 10px solid #ffaeaf;
+            left: 200px;
+          `}
+          transition: all 0.3s ease;
+          ${this.isFullscreen ? 'padding: 0px;' : (() => {
           switch (this.viewport) {
             case 'desktop':
               return `
@@ -74,7 +87,7 @@ export class WccFrame extends DeesElement {
         }
 
         .viewport {
-          ${this.viewport !== 'desktop'
+          ${!this.isFullscreen && this.viewport !== 'desktop'
             ? html` border-right: 1px dotted #444; border-left: 1px dotted #444; `
             : html``
           }