From 86e547318f9d7dbf49b9d06992b6e0b4a84af4a8 Mon Sep 17 00:00:00 2001
From: Iakovleva Margarita <naruyaoi@yandex.ru>
Date: Mon, 9 Sep 2019 19:00:51 +0300
Subject: [PATCH] feat(docs): version dropdown styling (#237)

---
 .../app/components/navbar/_navbar-theme.scss  | 27 +++++++------
 .../app/components/navbar/navbar.component.ts | 30 ++++++++------
 .../src/app/components/navbar/navbar.scss     | 39 ++++++++++++-------
 .../components/navbar/navbar.template.html    |  7 +++-
 4 files changed, 62 insertions(+), 41 deletions(-)

diff --git a/packages/docs/src/app/components/navbar/_navbar-theme.scss b/packages/docs/src/app/components/navbar/_navbar-theme.scss
index 56d5103b2..59eb66653 100644
--- a/packages/docs/src/app/components/navbar/_navbar-theme.scss
+++ b/packages/docs/src/app/components/navbar/_navbar-theme.scss
@@ -1,22 +1,21 @@
 @mixin mc-navbar-theme($theme) {
-    $background: #fefefe;
-    $dodger_blue: #2f80ed;
-    $dodger_blue: #8c949e;
-    $solitude: #e6e7e8;
-    $doc_green: #2f2f33;
+    $foreground: map-get($theme, foreground);
+    $background: map-get($theme, background);
+    $white: mc-color($background, background);
+    $text: mc-color($foreground, text);
+    $divider: mc-color($foreground, divider);
+    $hint-text: mc-color($foreground, hint-text);
 
     .docs-navbar-header {
-        border-bottom: 1px solid $solitude;
-        background: $background;
+        box-shadow: 0 1px $divider;
+        background: $white;
 
-        .docs-navbar-version {
-            color: $dodger_blue;
-        }
+        .docs-navbar-dropdown__trigger { color: $text; }
+    }
 
-        .docs-navbar-dropdown__trigger {
-            color: $doc_green;
-        }
+    .docs-navbar-version {
+        color: $hint-text;
 
+        &__date { color: $hint-text; }
     }
-
 }
diff --git a/packages/docs/src/app/components/navbar/navbar.component.ts b/packages/docs/src/app/components/navbar/navbar.component.ts
index 707c6cb9c..b5e1c91d8 100644
--- a/packages/docs/src/app/components/navbar/navbar.component.ts
+++ b/packages/docs/src/app/components/navbar/navbar.component.ts
@@ -8,21 +8,27 @@ import { Component } from '@angular/core';
 })
 
 export class NavbarComponent {
-
-    versions = ["5.1", "5.0.1", "5", "4.8.8", "4.8.5", "4.8.4", "4.8", "4.7.1", "1.0" ];
-    curVerIndex = this.versions[0];
-
-    languages = ["Русский язык", "Английский язык"];
+    // TODO fetch real data instead
+    versions = [{number: '5.1', date: '15 октября', bold: true},
+        {number: '5.0.1', date: '14 октября', bold: false},
+        {number: '5', date: '13 октября', bold: true},
+        {number: '4.8.8', date: '12 октября', bold: false},
+        {number: '4.8.5', date: '11 октября', bold: false},
+        {number: '4.8.4', date: '10 октября', bold: false},
+        {number: '4.8', date: '9 октября', bold: true},
+        {number: '4.7.1', date: '8 октября', bold: false},
+        {number: '1.0', date: '7 октября', bold: true}];
+
+    curVerIndex = this.versions[0].number;
+    languages = ['Русский язык', 'Английский язык'];
     curLanguage = this.languages[0];
-
-    themes = ["Светлая тема", "Темная тема"];
+    themes = ['Светлая тема', 'Темная тема'];
     curTheme = this.themes[0];
+    // TODO Эти значения временные, надо определиться с постоянными и заменить ими текущие значения.
+    colors = ['#2f80ed', '#333491', '#07804e', '#eaaf00'];
+    activeColor = '#2f80ed';
 
-    colors = ["#2f80ed", "#333491", "#07804e", "#eaaf00"];
-    activeColor = "#2f80ed";
-    //TODO Эти значения временные, надо определиться с постоянными и заменить ими текущие значения.
-
-    iconFont = "20px";
+    iconFont = '20px';
 
     setVersion(version) {
         this.curVerIndex = version;
diff --git a/packages/docs/src/app/components/navbar/navbar.scss b/packages/docs/src/app/components/navbar/navbar.scss
index 699204eb3..1a71435cb 100644
--- a/packages/docs/src/app/components/navbar/navbar.scss
+++ b/packages/docs/src/app/components/navbar/navbar.scss
@@ -30,18 +30,6 @@ $doc-navbar-padding: 10px;
         }
     }
 
-    .docs-navbar-version {
-        display: flex;
-        align-items: baseline;
-        height: $doc-navbar-font-size;
-        font-size: $doc-navbar-font-size;
-        line-height: $doc-navbar-font-size;
-        margin-bottom: -5px;
-
-        &__number { margin-left: 7px; }
-
-    }
-
     .docs-navbar-dropdown {
         min-width: 140px;
 
@@ -55,11 +43,35 @@ $doc-navbar-padding: 10px;
         }
 
         &__icon { color: inherit; }
-
     }
 
     .color-picker__icon { font-size: $doc-navbar-font-size; }
+}
+
+.docs-navbar-version {
+    display: flex;
+    align-items: baseline;
+    height: $doc-navbar-font-size;
+    font-size: $doc-navbar-font-size;
+    line-height: $doc-navbar-font-size;
+    margin-bottom: -5px;
 
+    &_bold { font-weight: 500; }
+
+    &__number { margin-left: 7px; }
+
+    &__item { display: flex; }
+
+    &__num {
+        display: flex;
+        min-width: 50px;
+    }
+
+    &__date {
+        display: flex;
+        flex-grow: 1;
+        white-space: nowrap;
+    }
 }
 
 .docs-navbar-header_fixed {
@@ -69,4 +81,3 @@ $doc-navbar-padding: 10px;
     right: 0;
     z-index: 1000;
 }
-
diff --git a/packages/docs/src/app/components/navbar/navbar.template.html b/packages/docs/src/app/components/navbar/navbar.template.html
index 43640127b..a273a706f 100644
--- a/packages/docs/src/app/components/navbar/navbar.template.html
+++ b/packages/docs/src/app/components/navbar/navbar.template.html
@@ -19,7 +19,12 @@
             <i mc-icon="mc-angle-down-L_16" class="docs-navbar-version__icon"></i>
         </div>
         <mc-dropdown #versionDropdown="mcDropdown" xPosition="after" class="docs-navbar-version__dropdown">
-            <button mc-dropdown-item *ngFor="let version of versions; let i = index" (click)="setVersion(version)">{{version}}</button>
+            <button mc-dropdown-item *ngFor="let version of versions; let i = index" (click)="setVersion(version.number)" [class.docs-navbar-version_bold]="version.bold">
+                <span class="docs-navbar-version__item" >
+                    <span class="docs-navbar-version__num" >{{version.number}}</span>
+                    <span class="docs-navbar-version__date" >{{version.date}}</span>
+                </span>
+            </button>
         </mc-dropdown>
     </div>