From f8768b7f71d324f2d4e514b8e35cb5ee31dfc27f Mon Sep 17 00:00:00 2001
From: Sebastian Stehle <sebastian@squidex.io>
Date: Sun, 6 Jan 2019 10:21:10 +0100
Subject: [PATCH] Tooltips for nav.

---
 .../pages/content/content-page.component.html | 14 +++++++++-----
 .../pages/rules/rules-page.component.html     | 10 +++++++---
 .../pages/schema/schema-page.component.html   |  4 +++-
 .../pages/backups/backups-page.component.html |  6 ++++--
 .../pages/clients/clients-page.component.html |  9 +++++++--
 .../contributors-page.component.html          |  9 +++++++--
 .../pages/languages/language.component.html   |  6 +++---
 .../languages/languages-page.component.html   |  9 +++++++--
 .../patterns/patterns-page.component.html     |  9 +++++++--
 .../pages/plans/plans-page.component.html     |  4 +++-
 .../pages/roles/roles-page.component.html     |  9 +++++++--
 src/Squidex/app/theme/_common.scss            |  9 +++++++++
 src/Squidex/app/theme/_panels.scss            | 19 +++++++++++++++----
 13 files changed, 88 insertions(+), 29 deletions(-)

diff --git a/src/Squidex/app/features/content/pages/content/content-page.component.html b/src/Squidex/app/features/content/pages/content/content-page.component.html
index e8257725d..e18ddf801 100644
--- a/src/Squidex/app/features/content/pages/content/content-page.component.html
+++ b/src/Squidex/app/features/content/pages/content/content-page.component.html
@@ -124,15 +124,19 @@
         </ng-container>
 
         <ng-container sidebar>
-            <a class="panel-link" routerLink="history" routerLinkActive="active" #linkHistory>
-                <i class="icon-time"></i>
-            </a>
+            <sqx-tooltip position="leftTop" [target]="historyLink">commentsLink</sqx-tooltip>
 
-            <a class="panel-link" routerLink="comments" routerLinkActive="active" #linkHistory>
+            <a class="panel-link" routerLink="comments" routerLinkActive="active" #commentsLink>
                 <i class="icon-comments"></i>
             </a>
 
-            <sqx-onboarding-tooltip helpId="history" [for]="linkHistory" position="leftTop" after="120000">
+            <sqx-tooltip position="leftTop" [target]="historyLink">History</sqx-tooltip>
+
+            <a class="panel-link" routerLink="history" routerLinkActive="active" #historyLink>
+                <i class="icon-time"></i>
+            </a>
+
+            <sqx-onboarding-tooltip helpId="history" [for]="historyLink" position="leftTop" after="120000">
                 The sidebar navigation contains useful context specific links. Here you can view the history how this schema has changed over time.
             </sqx-onboarding-tooltip>
         </ng-container>
diff --git a/src/Squidex/app/features/rules/pages/rules/rules-page.component.html b/src/Squidex/app/features/rules/pages/rules/rules-page.component.html
index 1450f79c2..7a14283fb 100644
--- a/src/Squidex/app/features/rules/pages/rules/rules-page.component.html
+++ b/src/Squidex/app/features/rules/pages/rules/rules-page.component.html
@@ -76,15 +76,19 @@
     </ng-container>
 
     <ng-container sidebar>
-        <a class="panel-link" routerLink="events" routerLinkActive="active" #linkHistory>
+        <sqx-tooltip position="leftTop" [target]="historyLink">History</sqx-tooltip>
+
+        <a class="panel-link" routerLink="events" routerLinkActive="active" #historyLink>
             <i class="icon-time"></i>
         </a>
 
-        <a class="panel-link" routerLink="help" routerLinkActive="active" #linkHelp>
+        <sqx-tooltip position="leftTop" [target]="helpLink">Help</sqx-tooltip>
+
+        <a class="panel-link" routerLink="help" routerLinkActive="active" #helpLink>
             <i class="icon-help"></i>
         </a>
 
-        <sqx-onboarding-tooltip helpId="help" [for]="linkHelp" position="leftTop" after="180000">
+        <sqx-onboarding-tooltip helpId="help" [for]="helpLink" position="leftTop" after="180000">
             Click the help icon to show a context specific help page. Go to <a href="https://docs.squidex.io" target="_blank" rel="noopener">https://docs.squidex.io</a> for the full documentation.
         </sqx-onboarding-tooltip>
     </ng-container>
diff --git a/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html b/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html
index 45546c3e6..140df0be3 100644
--- a/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html
+++ b/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html
@@ -82,7 +82,9 @@
     </ng-container>
 
     <ng-container sidebar>
-        <a class="panel-link" routerLink="help" routerLinkActive="active">
+        <sqx-tooltip position="leftTop" [target]="helpLink">Help</sqx-tooltip>
+
+        <a class="panel-link" routerLink="help" routerLinkActive="active" #helpLink>
             <i class="icon-help"></i>
         </a>
     </ng-container>
diff --git a/src/Squidex/app/features/settings/pages/backups/backups-page.component.html b/src/Squidex/app/features/settings/pages/backups/backups-page.component.html
index e909b075b..e1ec5d3f5 100644
--- a/src/Squidex/app/features/settings/pages/backups/backups-page.component.html
+++ b/src/Squidex/app/features/settings/pages/backups/backups-page.component.html
@@ -55,7 +55,7 @@
                         </div>
                         <div class="col-auto">
                             <div>
-                                {{backup.started | sqxISODate}}
+                                {{backup.started | sqxFromNow}}
                             </div>
                             <div *ngIf="backup.stopped">
                                 {{backup | sqxBackupDuration}}
@@ -93,7 +93,9 @@
     </ng-container>
 
     <ng-container sidebar>
-        <a class="panel-link" routerLink="help" routerLinkActive="active">
+        <sqx-tooltip position="leftTop" [target]="helpLink">Help</sqx-tooltip>
+
+        <a class="panel-link" routerLink="help" routerLinkActive="active" #helpLink>
             <i class="icon-help"></i>
         </a>
     </ng-container>
diff --git a/src/Squidex/app/features/settings/pages/clients/clients-page.component.html b/src/Squidex/app/features/settings/pages/clients/clients-page.component.html
index 5ae615fdb..5ba08be65 100644
--- a/src/Squidex/app/features/settings/pages/clients/clients-page.component.html
+++ b/src/Squidex/app/features/settings/pages/clients/clients-page.component.html
@@ -47,10 +47,15 @@
     </ng-container>
 
     <ng-container sidebar>
-        <a class="panel-link" routerLink="history" routerLinkActive="active">
+        <sqx-tooltip position="leftTop" [target]="historyLink">History</sqx-tooltip>
+
+        <a class="panel-link" routerLink="history" routerLinkActive="active" #historyLink>
             <i class="icon-time"></i>
         </a>
-        <a class="panel-link" routerLink="help" routerLinkActive="active">
+
+        <sqx-tooltip position="leftTop" [target]="helpLink">Help</sqx-tooltip>
+
+        <a class="panel-link" routerLink="help" routerLinkActive="active" #helpLink>
             <i class="icon-help"></i>
         </a>
     </ng-container>
diff --git a/src/Squidex/app/features/settings/pages/contributors/contributors-page.component.html b/src/Squidex/app/features/settings/pages/contributors/contributors-page.component.html
index b7b83e42c..fef4da276 100644
--- a/src/Squidex/app/features/settings/pages/contributors/contributors-page.component.html
+++ b/src/Squidex/app/features/settings/pages/contributors/contributors-page.component.html
@@ -73,10 +73,15 @@
     </ng-container>
 
     <ng-container sidebar>
-        <a class="panel-link" routerLink="history" routerLinkActive="active">
+        <sqx-tooltip position="leftTop" [target]="historyLink">History</sqx-tooltip>
+
+        <a class="panel-link" routerLink="history" routerLinkActive="active" #historyLink>
             <i class="icon-time"></i>
         </a>
-        <a class="panel-link" routerLink="help" routerLinkActive="active">
+
+        <sqx-tooltip position="leftTop" [target]="helpLink">Help</sqx-tooltip>
+
+        <a class="panel-link" routerLink="help" routerLinkActive="active" #helpLink>
             <i class="icon-help"></i>
         </a>
     </ng-container>
diff --git a/src/Squidex/app/features/settings/pages/languages/language.component.html b/src/Squidex/app/features/settings/pages/languages/language.component.html
index ab6c8ce8b..7d3c013d9 100644
--- a/src/Squidex/app/features/settings/pages/languages/language.component.html
+++ b/src/Squidex/app/features/settings/pages/languages/language.component.html
@@ -1,13 +1,13 @@
 <div class="table-items-row table-items-row-expandable language"> 
     <div class="table-items-row-summary">        
-        <div class="row">
+        <div class="row no-gutters">
             <div class="col-2" [class.language-optional]="language.isOptional" [class.language-master]="language.isMaster">
                 {{language.iso2Code}}
             </div>
-            <div class="col-8" [class.language-optional]="language.isOptional" [class.language-master]="language.isMaster">
+            <div class="col" [class.language-optional]="language.isOptional" [class.language-master]="language.isMaster">
                 {{language.englishName}}
             </div>
-            <div class="col-auto">
+            <div class="col-options">
                 <div class="float-right">
                     <button type="button" class="btn btn-secondary table-items-edit-button mr-1" [class.active]="isEditing" (click)="toggleEditing()" *ngIf="!language.isMaster">
                         <i class="icon-settings"></i>
diff --git a/src/Squidex/app/features/settings/pages/languages/languages-page.component.html b/src/Squidex/app/features/settings/pages/languages/languages-page.component.html
index d3940d091..b84fa4de9 100644
--- a/src/Squidex/app/features/settings/pages/languages/languages-page.component.html
+++ b/src/Squidex/app/features/settings/pages/languages/languages-page.component.html
@@ -43,10 +43,15 @@
     </ng-container>
 
     <ng-container sidebar>
-        <a class="panel-link" routerLink="history" routerLinkActive="active">
+        <sqx-tooltip position="leftTop" [target]="historyLink">History</sqx-tooltip>
+
+        <a class="panel-link" routerLink="history" routerLinkActive="active" #historyLink>
             <i class="icon-time"></i>
         </a>
-        <a class="panel-link" routerLink="help" routerLinkActive="active">
+
+        <sqx-tooltip position="leftTop" [target]="helpLink">Help</sqx-tooltip>
+
+        <a class="panel-link" routerLink="help" routerLinkActive="active" #helpLink>
             <i class="icon-help"></i>
         </a>
     </ng-container>
diff --git a/src/Squidex/app/features/settings/pages/patterns/patterns-page.component.html b/src/Squidex/app/features/settings/pages/patterns/patterns-page.component.html
index 027eba027..f66ffd241 100644
--- a/src/Squidex/app/features/settings/pages/patterns/patterns-page.component.html
+++ b/src/Squidex/app/features/settings/pages/patterns/patterns-page.component.html
@@ -25,10 +25,15 @@
     </ng-container>
 
     <ng-container sidebar>
-        <a class="panel-link" routerLink="history" routerLinkActive="active">
+        <sqx-tooltip position="leftTop" [target]="historyLink">History</sqx-tooltip>
+
+        <a class="panel-link" routerLink="history" routerLinkActive="active" #historyLink>
             <i class="icon-time"></i>
         </a>
-        <a class="panel-link" routerLink="help" routerLinkActive="active">
+
+        <sqx-tooltip position="leftTop" [target]="helpLink">Help</sqx-tooltip>
+
+        <a class="panel-link" routerLink="help" routerLinkActive="active" #helpLink>
             <i class="icon-help"></i>
         </a>
     </ng-container>
diff --git a/src/Squidex/app/features/settings/pages/plans/plans-page.component.html b/src/Squidex/app/features/settings/pages/plans/plans-page.component.html
index e7dcb0bb2..6944d2fd0 100644
--- a/src/Squidex/app/features/settings/pages/plans/plans-page.component.html
+++ b/src/Squidex/app/features/settings/pages/plans/plans-page.component.html
@@ -79,7 +79,9 @@
     </ng-container>
 
     <ng-container sidebar>
-        <a class="panel-link" routerLink="history" routerLinkActive="active">
+        <sqx-tooltip position="leftTop" [target]="historyLink">History</sqx-tooltip>
+
+        <a class="panel-link" routerLink="history" routerLinkActive="active" #historyLink>
             <i class="icon-time"></i>
         </a>
     </ng-container>
diff --git a/src/Squidex/app/features/settings/pages/roles/roles-page.component.html b/src/Squidex/app/features/settings/pages/roles/roles-page.component.html
index fbaa66786..380d06a76 100644
--- a/src/Squidex/app/features/settings/pages/roles/roles-page.component.html
+++ b/src/Squidex/app/features/settings/pages/roles/roles-page.component.html
@@ -38,10 +38,15 @@
     </ng-container>
 
     <ng-container sidebar>
-        <a class="panel-link" routerLink="history" routerLinkActive="active">
+        <sqx-tooltip position="leftTop" [target]="historyLink">History</sqx-tooltip>
+
+        <a class="panel-link" routerLink="history" routerLinkActive="active" #historyLink>
             <i class="icon-time"></i>
         </a>
-        <a class="panel-link" routerLink="help" routerLinkActive="active">
+
+        <sqx-tooltip position="leftTop" [target]="helpLink">Help</sqx-tooltip>
+
+        <a class="panel-link" routerLink="help" routerLinkActive="active" #helpLink>
             <i class="icon-help"></i>
         </a>
     </ng-container>
diff --git a/src/Squidex/app/theme/_common.scss b/src/Squidex/app/theme/_common.scss
index 13be82170..4075293fa 100644
--- a/src/Squidex/app/theme/_common.scss
+++ b/src/Squidex/app/theme/_common.scss
@@ -90,10 +90,19 @@ pre {
         font-size: 1.1rem;
     }
 
+    h4 {
+        margin: 0;
+        font-size: 1rem;
+    }
+
     .code-block {
         margin: .25rem 0;
     }
 
+    &-header {
+        margin-bottom: 1rem;
+    }
+
     &-section {
         padding-top: .5rem;
     }
diff --git a/src/Squidex/app/theme/_panels.scss b/src/Squidex/app/theme/_panels.scss
index 1cf914dad..646b566b8 100644
--- a/src/Squidex/app/theme/_panels.scss
+++ b/src/Squidex/app/theme/_panels.scss
@@ -74,7 +74,6 @@
         @include flex-box;
         @include flex-flow(row);
         @include flex-grow(1);
-        overflow: hidden;
     }
 
     // First column of the main row (second row) with the main content.
@@ -85,6 +84,7 @@
             border-top: 1px solid $color-border;
             background: $color-background;
             padding: $panel-padding;
+            overflow-x: hidden;
             overflow-y: auto;
         }
 
@@ -164,6 +164,9 @@
                 display: block;
                 padding-top: .6rem;
                 padding-bottom: .6rem;
+                position: relative;
+                border-top: 1px solid transparent;
+                border-bottom: 1px solid transparent;
             }
 
             &:hover {
@@ -171,9 +174,17 @@
             }
 
             &.active {
-                color: $color-dark-foreground;
-                border: 0;
-                background: $color-theme-blue;
+                & {
+                    border-color: $color-border;
+                }
+
+                &::before {
+                    @include absolute(0, -1px, 0, auto);
+                    width: 2px;
+                    color: transparent;
+                    content: '';
+                    background: $panel-light-background;
+                }
             }
         }
     }