Tooltips for nav.

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>
+            <sqx-tooltip position="leftTop" [target]="historyLink">commentsLink</sqx-tooltip>
-                <i class="icon-time"></i>
-            </a>
 
-            <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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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;
     }

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;
+                    border-color: $color-border;
-                background: $color-theme-blue;
+                }
+
+                &::before {
+                    @include absolute(0, -1px, 0, auto);
+                    width: 2px;
+                    color: transparent;
+                    content: '';
+                    background: $panel-light-background;
+                }
             }
         }
     }