From b6d8bd5490b5095e6df38449ca7d498e1a70e3ac Mon Sep 17 00:00:00 2001 From: Sebastian Stehle Date: Mon, 7 Jan 2019 14:55:44 +0100 Subject: [PATCH] Clipboard improvements. --- .../pages/clients/client.component.html | 60 ++++++++++++++----- .../pages/clients/client.component.scss | 3 +- .../pages/clients/client.component.ts | 24 ++++---- .../framework/angular/forms/copy.directive.ts | 49 +++++++++------ src/Squidex/app/theme/_common.scss | 23 +++++++ 5 files changed, 115 insertions(+), 44 deletions(-) diff --git a/src/Squidex/app/features/settings/pages/clients/client.component.html b/src/Squidex/app/features/settings/pages/clients/client.component.html index 1aa25b07a..a5ed55f11 100644 --- a/src/Squidex/app/features/settings/pages/clients/client.component.html +++ b/src/Squidex/app/features/settings/pages/clients/client.component.html @@ -25,7 +25,7 @@
- +
- - Connect @@ -96,21 +94,37 @@
1. Make the following request to get an access token. It will be valid for 30 days. - 
{{connectHttpText}}
+
+ + + 
{{connectHttpText}}
+
2. Add the bearer token as authorization header to all requests: - 
Authorization: Bearer [YOUR_TOKEN]
+
+ + + 
Authorization: Bearer [YOUR_TOKEN]
+
Use the following token for testing - - - +
+ + + +

Using the command line interface (CLI)

@@ -121,14 +135,26 @@
Connect with windows: - - 
{{connectCLIWinText}}
+ +
+ + + 
{{connectCLIWinText}}
+
Connect with Linux / OS X - - 
{{connectCLINixText}}
+ +
+ + + 
{{connectCLINixText}}
+

Using the C# Client Library

@@ -139,8 +165,14 @@
Create a client manager - - 
{{connectLibrary}}
+ +
+ + + 
{{connectLibraryText}}
+
diff --git a/src/Squidex/app/features/settings/pages/clients/client.component.scss b/src/Squidex/app/features/settings/pages/clients/client.component.scss index 1438298e4..ba61bb4a8 100644 --- a/src/Squidex/app/features/settings/pages/clients/client.component.scss +++ b/src/Squidex/app/features/settings/pages/clients/client.component.scss @@ -7,7 +7,8 @@ $color-editor: #eceeef; & { @include border-radius(0); border-bottom-width: 2px; - border-top-width: 1px; + border-top-width: 0; + margin-bottom: .25rem; } &-header { diff --git a/src/Squidex/app/features/settings/pages/clients/client.component.ts b/src/Squidex/app/features/settings/pages/clients/client.component.ts index 2c8c91373..fd8648645 100644 --- a/src/Squidex/app/features/settings/pages/clients/client.component.ts +++ b/src/Squidex/app/features/settings/pages/clients/client.component.ts @@ -37,6 +37,14 @@ function connectHttpText(apiUrl: ApiUrlConfig, app: string, client: { id: string scope=squidex-api`; } +function connectCLIWinText(app: string, client: { id: string, secret: string }) { + return `.\\sq.exe config add ${app} ${app}:${client.id} ${client.secret};.\\sq.exe config use ${app}`; +} + +function connectCLINixText(app: string, client: { id: string, secret: string }) { + return `sq config add ${app} ${app}:${client.id} ${client.secret} && sq config use ${app}`; +} + function connectLibrary(apiUrl: ApiUrlConfig, app: string, client: { id: string, secret: string }) { const url = apiUrl.value; @@ -47,14 +55,6 @@ function connectLibrary(apiUrl: ApiUrlConfig, app: string, client: { id: string, "${client.secret}")`; } -function connectCLIWinText(app: string, client: { id: string, secret: string }) { - return `.\\sq.exe config add ${app} ${app}:${client.id} ${client.secret};.\\sq.exe config use ${app}`; -} - -function connectCLINixText(app: string, client: { id: string, secret: string }) { - return `sq config add ${app} ${app}:${client.id} ${client.secret} && sq config use ${app}`; -} - @Component({ selector: 'sqx-client', styleUrls: ['./client.component.scss'], @@ -77,7 +77,7 @@ export class ClientComponent implements OnChanges { public connectHttpText: string; public connectCLINixText: string; public connectCLIWinText: string; - public connectLibrary: string; + public connectLibraryText: string; constructor( public readonly appsState: AppsState, @@ -97,7 +97,7 @@ export class ClientComponent implements OnChanges { this.connectHttpText = connectHttpText(this.apiUrl, app, this.client); this.connectCLINixText = connectCLINixText(app, this.client); this.connectCLIWinText = connectCLIWinText(app, this.client); - this.connectLibrary = connectLibrary(this.apiUrl, app, this.client); + this.connectLibraryText = connectLibrary(this.apiUrl, app, this.client); } public revoke() { @@ -135,10 +135,10 @@ export class ClientComponent implements OnChanges { } } - public createToken(client: AppClientDto) { + public connect() { this.connectDialog.show(); - this.appClientsService.createToken(this.appsState.appName, client) + this.appClientsService.createToken(this.appsState.appName, this.client) .subscribe(dto => { this.connectToken = dto; }, error => { diff --git a/src/Squidex/app/framework/angular/forms/copy.directive.ts b/src/Squidex/app/framework/angular/forms/copy.directive.ts index a46d78164..3f7c3fdf0 100644 --- a/src/Squidex/app/framework/angular/forms/copy.directive.ts +++ b/src/Squidex/app/framework/angular/forms/copy.directive.ts @@ -5,7 +5,7 @@ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. */ -import { Directive, HostListener, Input } from '@angular/core'; +import { Directive, HostListener, Input, Renderer2 } from '@angular/core'; import { DialogService, @@ -21,7 +21,8 @@ export class CopyDirective { public inputElement: any; constructor( - private readonly dialogs: DialogService + private readonly dialogs: DialogService, + private readonly renderer: Renderer2 ) { } @@ -32,18 +33,40 @@ export class CopyDirective { } } - private copyToClipbord(element: HTMLInputElement | HTMLTextAreaElement) { - const currentFocus: any = document.activeElement; + private copyToClipbord(element: HTMLElement) { + if (Types.is(element, HTMLInputElement) || Types.is(element, HTMLTextAreaElement)) { + const currentFocus: any = document.activeElement; - const prevSelectionStart = element.selectionStart; - const prevSelectionEnd = element.selectionEnd; + const prevSelectionStart = element.selectionStart; + const prevSelectionEnd = element.selectionEnd; - element.focus(); - - if (Types.is(element, HTMLInputElement)) { + element.focus(); element.setSelectionRange(0, element.value.length); + + this.copy(); + + element.setSelectionRange(prevSelectionStart!, prevSelectionEnd!); + + if (currentFocus && Types.isFunction(currentFocus.focus)) { + currentFocus.focus(); + } + } else { + const input = this.renderer.createElement('textarea'); + + this.renderer.setStyle(input, 'position', 'absolute'); + this.renderer.setStyle(input, 'right', '-1000px'); + this.renderer.appendChild(document.body, input); + + input.value = element.innerText; + input.select(); + + this.copy(); + + this.renderer.removeChild(document.body, input); } + } + private copy() { try { document.execCommand('copy'); @@ -51,13 +74,5 @@ export class CopyDirective { } catch (e) { console.log('Copy failed'); } - - if (currentFocus && Types.isFunction(currentFocus.focus)) { - currentFocus.focus(); - } - - if (Types.is(element, HTMLInputElement)) { - element.setSelectionRange(prevSelectionStart!, prevSelectionEnd!); - } } } \ No newline at end of file diff --git a/src/Squidex/app/theme/_common.scss b/src/Squidex/app/theme/_common.scss index 4075293fa..90ca59232 100644 --- a/src/Squidex/app/theme/_common.scss +++ b/src/Squidex/app/theme/_common.scss @@ -118,6 +118,29 @@ pre { } } +// +// 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%); + } + } +} + // // Profile picture in circle //