mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-01-15 17:22:25 -05:00
Fix endpoint links to not overflow text (#7312)
* Fix endpoint links to not overflow * Add titles to links * Re-add title to Text and fix errors
This commit is contained in:
@@ -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;
|
||||
|
||||
|
||||
@@ -101,3 +101,7 @@ export interface IModelStore {
|
||||
*/
|
||||
validate(component: IComponent): Thenable<boolean>;
|
||||
}
|
||||
|
||||
export interface ITitledComponent {
|
||||
title?: string;
|
||||
}
|
||||
|
||||
@@ -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
29
src/sql/workbench/browser/modelComponents/titledComponent.ts
Normal 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);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user