feat(docs): styling code editor (#200)

positive-js · Aug 14, 2019 · 4ecaf0a · 4ecaf0a
1 parent 126db05
commit 4ecaf0a
Show file tree

Hide file tree

Showing 6 changed files with 117 additions and 7 deletions.
diff --git a/packages/docs/src/app/shared/example-viewer/_example-viewer-theme.scss b/packages/docs/src/app/shared/example-viewer/_example-viewer-theme.scss
@@ -4,6 +4,9 @@
     $warn: map-get($theme, warn);
     $background: map-get($theme, background);
     $foreground: map-get($theme, foreground);
+    $is-dark: map-get($theme, is-dark);
+    $color: mc-color($primary);
+    $color_hover: mc-color($primary, if($is-dark, lighter, darker));
 
     example-viewer {
         .docs-example-viewer-wrapper {
@@ -35,5 +38,22 @@
         .docs-example-viewer-body {
             border: 1px solid mc-color($foreground, divider);
         }
+
+        .docs-example-source_copy {
+            color: $color;
+
+            &:focus {
+                outline: none;
+            }
+
+            &:visited {
+                color: $color;
+            }
+
+            &:hover {
+                color: $color_hover;
+            }
+
+        }
     }
 }
diff --git a/packages/docs/src/app/shared/example-viewer/example-viewer.html b/packages/docs/src/app/shared/example-viewer/example-viewer.html
@@ -5,16 +5,36 @@
         </div>
     </div>
 
-    <div class="docs-example-viewer__source" >
+    <div [class.docs-example-viewer__source]="true"
+         [class.docs-example-viewer__source_hidden]="!showSource">
         <stackblitz-button [example]="example"></stackblitz-button>
-        <mc-tab-group mc-light-tabs>
+        <mc-tab-group mc-light-tabs (selectedTabChange)="setNumbers()">
             <mc-tab *ngFor="let tabName of getExampleTabNames()" [label]="tabName">
                 <div class="docs-example-source-wrapper">
+                    <pre class="docs-example-numbers">{{numbers}}</pre>
                     <pre class="docs-example-source">
+                        <span class="docs-example-source_copy"><i class="mc mc-copy_16" (click)="copyCode($event)"></i></span>
                         <doc-viewer #viewer [documentUrl]="exampleTabs[tabName]"></doc-viewer>
+                        <div class="docs-example-source-shadow"></div>
                     </pre>
                 </div>
             </mc-tab>
         </mc-tab-group>
+        <div  [class.docs-example-source__show]="true"
+              [class.docs-example-source__hide]="showSource">
+            <span class="mc-link mc-link_underlined" (click)="toggleSourceView()"
+               [ngClass]="{'mc-active' : active, 'mc-focused': focus}">
+                <span class="mc-link__text">Показать полностью</span>
+                <i class="mc mc-angle-down-M_16"></i>
+            </span>
+        </div>
+        <div [class.docs-example-source__show]="true"
+             [class.docs-example-source__hide]="!showSource">
+            <span class="mc-link mc-link_underlined" (click)="toggleSourceView()"
+               [ngClass]="{'mc-active' : active, 'mc-focused': focus}">
+                <span class="mc-link__text">Свернуть</span>
+                <i class="mc mc-angle-up-M_16"></i>
+            </span>
+        </div>
     </div>
 </div>
diff --git a/packages/docs/src/app/shared/example-viewer/example-viewer.scss b/packages/docs/src/app/shared/example-viewer/example-viewer.scss
@@ -1,6 +1,6 @@
 :host {
     display: block;
-    padding: 20px 0;
+    padding: 20px 0 0;
 }
 
 .docs-example-viewer-wrapper {
@@ -9,6 +9,39 @@
     }
 }
 
+.docs-example-viewer__source_hidden {
+    .docs-example-source-wrapper {
+        max-height: 211px;
+        overflow-y: hidden;
+    }
+}
+
+.docs-example-source-shadow {
+    position: absolute;
+    bottom: 0;
+    margin: 0;
+    left: 0;
+    height: 44px;
+    width: 100%;
+    background: linear-gradient(0deg, rgba(234,236,241,1) 0%, rgba(234,236,241,0.5) 50%, rgba(234,236,241,0) 100%);
+}
+
+.docs-example-source__show {
+    text-align: center;
+    padding: 8px;
+}
+
+.docs-example-source__hide {
+    display: none;
+}
+
+.docs-example-source_copy {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 2px 6px;
+}
+
 .docs-example-viewer-title {
     align-content: center;
     align-items: center;
@@ -28,7 +61,7 @@
 }
 
 .docs-example-source-wrapper {
-    background-color: #eaedf1;
+    display: flex;
 }
 
 .docs-example-source-wrapper:hover {
@@ -37,8 +70,24 @@
     }
 }
 
+.docs-example-numbers {
+    $color: #eaedf1;
+    background-color: fade_out($color, 0.5);
+    color: #8c949e;
+    text-align: right;
+    width: 44px;
+    padding: 12px 8px;
+    margin: 0;
+}
+
 .docs-example-source {
-    padding: 10px 30px 10px 30px;
+    position: relative;
+    background-color: #eaedf1;
+    overflow-y: hidden;
+    display: flex;
+    margin: 0;
+    flex-grow: 1;
+    padding: 12px;
     min-height: 150px;
 }
 

diff --git a/packages/docs/src/app/shared/example-viewer/example-viewer.ts b/packages/docs/src/app/shared/example-viewer/example-viewer.ts
@@ -25,7 +25,7 @@ export class ExampleViewer {
 
     /** Whether the source for the example is being displayed. */
     showSource = false;
-
+    numbers = '1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n';
     /** String key of the currently displayed example. */
     @Input()
     get example() {
@@ -49,6 +49,14 @@ export class ExampleViewer {
     constructor(private copier: CopierService) {
     }
 
+    setNumbers() {
+        const length = document.querySelector('.docs-example-source').textContent.match(/\n/g).length + 1;
+        this.numbers = '';
+        for (let i = 1; i <= length; i++) {
+            this.numbers += `${i}\n`;
+        }
+    }
+
     toggleSourceView(): void {
         this.showSource = !this.showSource;
     }
@@ -57,6 +65,18 @@ export class ExampleViewer {
         return Object.keys(this.exampleTabs);
     }
 
+    copyCode(event): void {
+        const code = event.target.parentNode.parentNode;
+        // event.target.parentNode.parentNode.select();
+        const range = document.createRange();
+        range.selectNodeContents(code);
+        const sel = window.getSelection();
+        sel.removeAllRanges();
+        sel.addRange(range);
+        document.execCommand('copy');
+        sel.removeAllRanges();
+    }
+
     private resolveHighlightedExampleFile(fileName: string) {
         return `docs-content/examples-highlighted/${fileName}`;
     }

diff --git a/packages/docs/src/index.html b/packages/docs/src/index.html
@@ -10,7 +10,7 @@
 
     <link rel="icon" type="image/x-icon" href="favicon.ico">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Mono:300&display=swap"
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Mono:300,400,500,700&display=swap"
           rel="stylesheet">
 </head>
 

diff --git a/packages/docs/src/main.scss b/packages/docs/src/main.scss
@@ -52,3 +52,4 @@ $config: mc-typography-config();
 @include docs-stackblitz-typography($config);
 
 @include example-viewer-theme($theme);
+
Original file line number	Diff line number	Diff line change
Expand Up		@@ -52,3 +52,4 @@ $config: mc-typography-config();
		@include docs-stackblitz-typography($config);

		@include example-viewer-theme($theme);