Typography fixed.

src/Squidex/app/features/rules/pages/rules/triggers/asset-changed-trigger.component.html

@@ -16,17 +16,17 @@
             <li class="help-example">
                 Specific events:<br/>
 
-                <pre class="code">event.type == 'Created' || event.type == 'Updated'</pre>
+                <sqx-code>event.type == 'Created' || event.type == 'Updated'</sqx-code>
             </li>
             <li class="help-example">
                 Large assets:<br/>
 
-                <pre class="code">event.fileSize > 100000000</pre>
+                <sqx-code>event.fileSize > 100000000</sqx-code>
             </li>
             <li class="help-example">
                 Images only:<br/>
 
-                <pre class="code">event.isImage</pre>
+                <sqx-code>event.isImage</sqx-code>
             </li>
         </ul>
     </div>

src/Squidex/app/features/rules/pages/rules/triggers/content-changed-trigger.component.html

@@ -53,17 +53,17 @@
             <li class="help-example">
                 Specific events:<br/>
 
-                <pre class="code">event.type == 'Created' || event.type == 'Published'</pre>
+                <sqx-code>event.type == 'Created' || event.type == 'Published'</sqx-code>
             </li>
             <li class="help-example">
                 Content has value:<br/>
 
-                <pre class="code">event.data.important.iv === true</pre>
+                <sqx-code>event.data.important.iv === true</sqx-code>
             </li>
             <li class="help-example">
                 Updated by user:<br/>
                 
-                <pre class="code">user.email === 'user@squidex.io'</pre>
+                <sqx-code>user.email === 'user@squidex.io'</sqx-code>
             </li>
         </ul>
     </div>

src/Squidex/app/features/schemas/pages/schemas/schema-form.component.html

@@ -23,7 +23,7 @@
                     The schema name becomes part of the api url:
                 </small>
 
-                <pre class="code">{{apiUrl.buildUrl("api/content/")}}{{appsState.appName}}/<b>{{createForm.schemaName | async}}</b></pre>
+                <sqx-code>{{apiUrl.buildUrl("api/content/")}}{{appsState.appName}}/{{createForm.schemaName | async}}</sqx-code>
 
                 <small class="form-text text-muted">
                     It must contain lower case letters (a-z), numbers and dashes only, and cannot be longer than 40 characters. The name cannot be changed later.

src/Squidex/app/features/settings/pages/clients/client.component.html

@@ -91,89 +91,53 @@
     
             <h3>Using HTTP</h3>
     
-            <div class="help-section">
+            <p>
                 1. Make the following request to get an access token. It will be valid for 30 days.
         
-                <div class="copy-container">
-                    <button type="button" class="btn-copy" [sqxCopy]="connectHttpBlock">
-                        <i class="icon-copy"></i>
-                    </button>
-
-                    <pre class="code code-block" #connectHttpBlock>{{connectHttpText}}</pre>
-                </div>
-            </div>
+                <sqx-code>{{connectHttpText}}</sqx-code>
+            </p>
     
-            <div class="help-section">
+            <p>
                 2. Add the bearer token as authorization header to all requests:
     
-                <div class="copy-container">
-                    <button type="button" class="btn-copy" [sqxCopy]="headerBlock">
-                        <i class="icon-copy"></i>
-                    </button>
-
-                    <pre class="code code-block" #headerBlock>Authorization: Bearer [YOUR_TOKEN]</pre>
-                </div>
-            </div>
+                <sqx-code>Authorization: Bearer [YOUR_TOKEN]</sqx-code>
+            </p>
 
-            <div class="help-section">
+            <p>
                 Use the following token for testing
 
-                <div class="copy-container">
-                    <button type="button" class="btn-copy" [sqxCopy]="connectTokenInput">
-                        <i class="icon-copy"></i>
-                    </button>
-
-                    <textarea class="form-control access-token" #connectTokenInput readonly>{{connectToken?.accessToken}}</textarea>
-                </div>
-            </div>
+                <sqx-code>{{connectToken?.accessToken}}</sqx-code>
+            </p>
     
             <h3>Using the command line interface (CLI)</h3>
     
-            <div class="help-section">
+            <p>
                 Download the CLI here: <a href="https://github.com/Squidex/squidex-samples/releases" sqxExternalLink>CLI Releases (Linux, OS X, Windows)</a>
-            </div>
+            </p>
     
-            <div class="help-section">
+            <p>
                 Connect with windows:
 
-                <div class="copy-container">
-                    <button type="button" class="btn-copy" [sqxCopy]="connectCLIWinBlock">
-                        <i class="icon-copy"></i>
-                    </button>
-
-                    <pre class="code code-block" #connectCLIWinBlock>{{connectCLIWinText}}</pre>
-                </div>
-            </div>
+                <sqx-code>{{connectCLIWinText}}</sqx-code>
+            </p>
     
-            <div class="help-section">
+            <p>
                 Connect with Linux / OS X
 
-                <div class="copy-container">
-                    <button type="button" class="btn-copy" [sqxCopy]="connectCLINixBlock">
-                        <i class="icon-copy"></i>
-                    </button>
-
-                    <pre class="code code-block" #connectCLINixBlock>{{connectCLINixText}}</pre>
-                </div>
-            </div>
+                <sqx-code>{{connectCLINixText}}</sqx-code>
+            </p>
     
             <h3>Using the C# Client Library</h3>
 
-            <div class="help-section">
+            <p>
                 Get the nuget library from <a href="https://www.nuget.org/packages/Squidex.ClientLibrary/" sqxExternalLink>nuget.org</a>
-            </div>
+            </p>
     
-            <div class="help-section">
+            <p>
                 Create a client manager
 
-                <div class="copy-container">
-                    <button type="button" class="btn-copy" [sqxCopy]="connectLibraryBlock">
-                        <i class="icon-copy"></i>
-                    </button>
-
-                    <pre class="code code-block" #connectLibraryBlock>{{connectLibraryText}}</pre>
-                </div>
-            </div>
+                <sqx-code>{{connectLibraryText}}</sqx-code>
+            </p>
         </div>
     </ng-container>
 </sqx-modal-dialog>

src/Squidex/app/framework/angular/code.component.html

@@ -0,0 +1,7 @@
+<div class="copy-container">
+    <button type="button" class="copy-button" [sqxCopy]="codeBlock">
+        <i class="icon-copy"></i>
+    </button>
+
+    <pre class="code" #codeBlock><ng-content></ng-content></pre>
+</div>

src/Squidex/app/framework/angular/code.component.scss

@@ -0,0 +1,36 @@
+@import '_mixins';
+@import '_vars';
+
+.code {
+    background: $color-code-background;
+    padding-left: .5rem;
+    padding-right: .5rem;
+    margin: .25rem 0;
+}
+
+.code,
+.copy-button {
+    font-size: .8rem;
+    padding-top: .25rem;
+    padding-bottom: .25rem;
+    min-height: 27px;
+}
+
+.copy-container {
+    position: relative;
+}
+
+.copy-button {
+    & {
+        @include absolute(0, 0, auto, auto);
+        border: 0;
+        background: darken($color-border-dark, 30%);
+        padding-left: .375rem;
+        padding-right: .375rem;
+        color: $color-dark-foreground;
+    }
+
+    &:focus {
+        background: darken($color-border-dark, 40%);
+    }
+}

src/Squidex/app/framework/angular/code.component.ts

@@ -0,0 +1,17 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+    selector: 'sqx-code',
+    styleUrls: ['./code.component.scss'],
+    templateUrl: './code.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CodeComponent {
+}

src/Squidex/app/framework/declarations.ts

@@ -49,6 +49,7 @@ export * from './angular/pipes/numbers.pipes';
 export * from './angular/routers/can-deactivate.guard';
 export * from './angular/routers/parent-link.directive';
 
+export * from './angular/code.component';
 export * from './angular/external-link.directive';
 export * from './angular/hover-background.directive';
 export * from './angular/ignore-scrollbar.directive';

src/Squidex/app/framework/module.ts

@@ -17,6 +17,7 @@ import {
     CanDeactivateGuard,
     CheckboxGroupComponent,
     ClipboardService,
+    CodeComponent,
     CodeEditorComponent,
     ConfirmClickDirective,
     ControlErrorsComponent,
@@ -96,6 +97,7 @@ import {
         CheckboxGroupComponent,
         ConfirmClickDirective,
         ControlErrorsComponent,
+        CodeComponent,
         CodeEditorComponent,
         CopyDirective,
         DarkenPipe,
@@ -157,6 +159,7 @@ import {
         CheckboxGroupComponent,
         CodeEditorComponent,
         CommonModule,
+        CodeComponent,
         ConfirmClickDirective,
         ControlErrorsComponent,
         CopyDirective,

src/Squidex/app/shared/components/app-form.component.html

@@ -24,7 +24,7 @@
                     The app name becomes part of the api url:
                 </small>
 
-                <pre class="code">{{apiUrl.buildUrl("api/content/")}}<b>{{createForm.appName | async}}</b></pre>
+                <sqx-code>{{apiUrl.buildUrl("api/content/")}}{{createForm.appName | async}}</sqx-code>
                     
                 <small class="form-text text-muted">
                     It must contain lower case letters (a-z), numbers and dashes only, and cannot be longer than 40 characters. The name cannot be changed later.

src/Squidex/app/shell/pages/internal/apps-menu.component.scss

@@ -45,6 +45,10 @@ $color-apps-border: #65a6ff;
     @include absolute(2.65rem, auto, auto, auto);
 }
 
+.dropdown-item {
+    @include border-radius(0);
+}
+
 .btn-block {
     white-space: nowrap;
 }

src/Squidex/app/theme/_bootstrap-vars.scss

@@ -1,12 +1,14 @@
 @import '_mixins.scss';
 @import '_vars.scss';
 
-$h1-font-size:              1.25rem;
-$h2-font-size:              1.2rem;
-$h3-font-size:              1.15rem;
-$h4-font-size:              1.1rem;
-$h5-font-size:              1.05rem;
-$h6-font-size:              1rem;
+$font-size-base:            1rem;
+
+$h1-font-size:              $font-size-base * 1.4;
+$h2-font-size:              $font-size-base * 1.3;
+$h3-font-size:              $font-size-base * 1.2;
+$h4-font-size:              $font-size-base * 1.1;
+$h5-font-size:              $font-size-base;
+$h6-font-size:              $font-size-base;
 
 $body-bg:                   $color-background;
 
@@ -28,4 +30,6 @@ $badge-bg-level: 2;
 $dropdown-border-color:     $color-border;
 
 $card-border-color:         $color-border;
-$card-cap-bg:               $panel-light-background;
+$card-cap-bg:               $panel-light-background;
+
+$paragraph-margin-bottom:   .5rem;

src/Squidex/app/theme/_bootstrap.scss

@@ -120,10 +120,6 @@ a {
         line-height: 2.2rem;
     }
 
-    &-toggler {
-        padding: .18rem .6rem;
-    }
-
     // Ensure that dropdown is always under nav bar.
     .dropdown-menu {
         top: 2.6rem;

src/Squidex/app/theme/_common.scss

@@ -47,27 +47,6 @@ body {
     font-weight: bold;
 }
 
-//
-// Code blocks
-//
-.code {
-    font-family: monospace;
-}
-
-pre {
-    &.code {
-        display: inline-block;
-        background: $color-border;
-        border: 0;
-        padding: .25rem .5rem;
-        margin: 0;
-    }
-
-    &.code-block {
-        display: block;
-    }
-}
-
 //
 // Help texts
 //
@@ -76,68 +55,10 @@ pre {
         font-size: .9rem;
     }
 
-    pre {
-        font-size: 100%;
-    }
-
-    h2 {
-        margin-top: 1rem;
-    }
-
-    h3 {
-        margin-top: 1.5rem;
-        margin-bottom: .25rem;
-        font-size: 1.1rem;
-    }
-
+    h2,
+    h3,
     h4 {
-        margin: 0;
-        font-size: 1rem;
-    }
-
-    .code-block {
-        margin: .25rem 0;
-    }
-
-    &-header {
-        margin-bottom: 1rem;
-    }
-
-    &-section {
-        padding-top: .5rem;
-    }
-
-    &-example {
-        margin-top: .375rem;
-    }
-
-    &-examples {
-        margin-top: 0;
-        margin-bottom: 0;
-        padding-left: 1.5rem;
-    }
-}
-
-//
-// Copy buttons
-//
-.copy-container {
-    & {
-        position: relative;
-    }
-
-    .btn-copy {
-        & {
-            @include absolute(0, 0, auto, auto);
-            border: 0;
-            background: darken($color-border-dark, 30%);
-            padding: 2px 6px;
-            color: $color-dark-foreground;
-        }
-
-        &:focus {
-            background: darken($color-border-dark, 40%);
-        }
+        margin-top: 1rem;
     }
 }
 

src/Squidex/app/theme/_vars.scss

@@ -9,6 +9,9 @@ $color-text-decent:         #a9b2bb;
 $color-tooltip:             #1a2129;
 $color-history:             #7f858c;
 
+$color-code-background:     #f5f7f9;
+$color-code-text:           #708090;
+
 $color-input:               #dbe4eb;
 $color-input-background:    #fff;
 $color-input-disabled:      #eef1f4;
@@ -27,7 +30,7 @@ $color-theme-blue-dark:     #297ff6;
 $color-theme-blue-lighter:  #65a6ff;
 $color-theme-blue-light:    #9ebeea;
 $color-theme-blue-lightest: #d9e8fc;
-$color-theme-secondary:     #d9dfe5;
+$color-theme-secondary:     #e1e4e8;
 
 $color-theme-green:         #4bb958;
 $color-theme-green-dark:    #47b353;