ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-19 17:22:48 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix endpoint links to not overflow text (#7312)

Browse Source 
* Fix endpoint links to not overflow

* Add titles to links

* Re-add title to Text and fix errors
This commit is contained in:
Charles Gagnon
2019-09-26 11:47:22 -07:00
committed by GitHub
parent 2d9f6dcd86
commit 33854d42e4
12 changed files with 114 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/sql/azdata.d.ts vendored
View File

@@ -3062,12 +3062,11 @@ declare module 'azdata' {
focused?: boolean;
}
export interface TextComponentProperties {
export interface TextComponentProperties extends ComponentProperties, TitledComponentProperties {
value?: string;
links?: LinkArea[];
description?: string;
requiredIndicator?: boolean;
CSSStyles?: { [key: string]: string };
}
export interface ImageComponentProperties {
@@ -3081,7 +3080,7 @@ declare module 'azdata' {
url: string;
}
export interface HyperlinkComponentProperties extends ComponentProperties {
export interface HyperlinkComponentProperties extends ComponentProperties, TitledComponentProperties {
label: string;
url: string;
}
@@ -3198,6 +3197,13 @@ declare module 'azdata' {
clickable?: boolean;
}
export interface TitledComponentProperties {
/**
* The title for the component. This title will show when hovered over
*/
title?: string;
}
export interface CardComponent extends Component, CardProperties {
onDidActionClick: vscode.Event<ActionDescriptor>;
onCardSelectedChanged: vscode.Event<any>;
@@ -3207,8 +3213,7 @@ declare module 'azdata' {
}
export interface TextComponent extends Component, ComponentProperties {
value: string;
export interface TextComponent extends Component, TextComponentProperties {
/**
* An event called when the text is clicked
*/
@@ -3232,9 +3237,7 @@ declare module 'azdata' {
onDidClick: vscode.Event<any>;
}
export interface CheckBoxComponent extends Component {
checked: boolean;
label: string;
export interface CheckBoxComponent extends Component, CheckBoxProperties {
onChanged: vscode.Event<any>;
}

22
src/sql/sqlops.proposed.d.ts vendored
View File

@@ -550,7 +550,7 @@ declare module 'sqlops' {
checked?: boolean;
}
export interface TextComponentProperties {
export interface TextComponentProperties extends ComponentProperties, TitledComponentProperties {
value?: string;
links?: LinkArea[];
}
@@ -560,7 +560,7 @@ declare module 'sqlops' {
url: string;
}
export interface HyperlinkComponentProperties extends ComponentProperties {
export interface HyperlinkComponentProperties extends ComponentProperties, TitledComponentProperties {
label: string;
url: string;
}
@@ -668,6 +668,13 @@ declare module 'sqlops' {
yOffsetChange?: number;
}
export interface TitledComponentProperties {
/**
* The title for the component. This title will show when hovered over
*/
title?: string;
}
export interface CardComponent extends Component, CardProperties {
onDidActionClick: vscode.Event<ActionDescriptor>;
onCardSelectedChanged: vscode.Event<any>;
@@ -677,8 +684,11 @@ declare module 'sqlops' {
}
export interface TextComponent extends Component, ComponentProperties {
value: string;
export interface TextComponent extends Component, TextComponentProperties {
/**
* An event called when the text is clicked
*/
onDidClick: vscode.Event<any>;
}
export interface HyperlinkComponent extends Component, HyperlinkComponentProperties {
@@ -692,9 +702,7 @@ declare module 'sqlops' {
onDidClick: vscode.Event<any>;
}
export interface CheckBoxComponent extends Component {
checked: boolean;
label: string;
export interface CheckBoxComponent extends Component, CheckBoxProperties {
onChanged: vscode.Event<any>;
}

7
src/sql/workbench/api/common/extHostModelView.ts
View File

@@ -1119,6 +1119,13 @@ class TextComponentWrapper extends ComponentWrapper implements azdata.TextCompon
this.setProperty('value', v);
}
public get title(): string {
return this.properties['title'];
}
public set title(title: string) {
this.setProperty('title', title);
}
public get onDidClick(): vscode.Event<any> {
let emitter = this._emitterMap.get(ComponentEventType.onDidClick);
return emitter && emitter.event;

6
src/sql/workbench/browser/modelComponents/hyperlink.component.ts
View File

@@ -10,14 +10,14 @@ import {
import * as azdata from 'azdata';
import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase';
import { IComponent, IComponentDescriptor, IModelStore } from 'sql/workbench/browser/modelComponents/interfaces';
import { TitledComponent } from 'sql/workbench/browser/modelComponents/titledComponent';
@Component({
selector: 'modelview-hyperlink',
template: `<a [href]="getUrl()" target="blank">{{getLabel()}}</a>`
template: `<a [href]="getUrl()" [title]="title" target="blank">{{getLabel()}}</a>`
})
export default class HyperlinkComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit {
export default class HyperlinkComponent extends TitledComponent implements IComponent, OnDestroy, AfterViewInit {
@Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore;

4
src/sql/workbench/browser/modelComponents/interfaces.ts
View File

@@ -101,3 +101,7 @@ export interface IModelStore {
*/
validate(component: IComponent): Thenable<boolean>;
}
export interface ITitledComponent {
title?: string;
}

6
src/sql/workbench/browser/modelComponents/text.component.ts
View File

@@ -11,22 +11,22 @@ import {
import * as azdata from 'azdata';
import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase';
import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/workbench/browser/modelComponents/interfaces';
import { SafeHtml, DomSanitizer } from '@angular/platform-browser';
import { TitledComponent } from 'sql/workbench/browser/modelComponents/titledComponent';
@Component({
selector: 'modelview-text',
template: `
<div style="display:flex;flex-flow:row;align-items:center;" [style.width]="getWidth()">
<p [innerHTML]="getValue()" [ngStyle]="this.CSSStyles"></p>
<p [innerHTML]="getValue()" [title]="title" [ngStyle]="this.CSSStyles" (click)="onClick()"></p>
<p *ngIf="requiredIndicator" style="color:red;margin-left:5px;">*</p>
<div *ngIf="description" tabindex="0" class="modelview-text-tooltip" [attr.aria-label]="description">
<div class="modelview-text-tooltip-content" [innerHTML]="description"></div>
</div>
<div>`
})
export default class TextComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit {
export default class TextComponent extends TitledComponent implements IComponent, OnDestroy, AfterViewInit {
@Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore;

29
src/sql/workbench/browser/modelComponents/titledComponent.ts Normal file
View File

@@ -0,0 +1,29 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import {
ChangeDetectorRef, ElementRef
} from '@angular/core';
import { ITitledComponent } from 'sql/workbench/browser/modelComponents/interfaces';
import * as azdata from 'azdata';
import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase';
export abstract class TitledComponent extends ComponentBase implements ITitledComponent {
constructor(
protected _changeRef: ChangeDetectorRef,
protected _el: ElementRef) {
super(_changeRef, _el);
}
public get title(): string {
return this.getPropertyOrDefault<azdata.HyperlinkComponentProperties, string>((props) => props.title, '');
}
public set title(newTitle: string) {
this.setPropertyFromUI<azdata.HyperlinkComponentProperties, string>((properties, title) => { properties.title = title; }, newTitle);
}
}