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

add toggle button for properties container (#16335)

Browse Source
This commit is contained in:
Alan Ren
2021-07-19 23:36:52 -07:00
committed by GitHub
parent 9b31e7beac
commit 1000e97091
6 changed files with 74 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/sql/base/browser/ui/propertiesContainer/media/propertiesContainer.css
View File

@@ -61,3 +61,7 @@ properties-container .splitter {
properties-container .columnLayout .splitter {
display: none;
}
properties-container .actionbar-container {
justify-content: center;
}

3
src/sql/base/browser/ui/propertiesContainer/propertiesContainer.component.html
View File

@@ -4,7 +4,7 @@
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
-->
<div class="grid-container {{gridDisplayLayout}}">
<div *ngIf="this._togglePropertiesAction.expanded" class="grid-container {{gridDisplayLayout}}">
<ng-template ngFor let-item [ngForOf]="propertyItems">
<div class="property {{propertyLayout}}">
<div class="propertyName">{{item.displayName}}</div>
@@ -13,3 +13,4 @@
</div>
</ng-template>
</div>
<div [style.display]="this.showToggleButton ? 'flex': 'none'" class="actionbar-container" #actionbar></div>

31
src/sql/base/browser/ui/propertiesContainer/propertiesContainer.component.ts
View File

@@ -4,9 +4,11 @@
*--------------------------------------------------------------------------------------------*/
import 'vs/css!./media/propertiesContainer';
import { Component, Inject, forwardRef, ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core';
import { Component, Inject, forwardRef, ChangeDetectorRef, OnInit, OnDestroy, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import * as DOM from 'vs/base/browser/dom';
import { Disposable } from 'vs/base/common/lifecycle';
import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
import { TogglePropertiesAction } from 'sql/base/browser/ui/propertiesContainer/togglePropertiesAction';
enum GridDisplayLayout {
twoColumns = 'twoColumns',
@@ -27,10 +29,14 @@ export interface PropertyItem {
selector: 'properties-container',
templateUrl: decodeURI(require.toUrl('./propertiesContainer.component.html'))
})
export class PropertiesContainer extends Disposable implements OnInit, OnDestroy {
export class PropertiesContainer extends Disposable implements OnInit, OnDestroy, AfterViewInit {
public gridDisplayLayout = GridDisplayLayout.twoColumns;
public propertyLayout = PropertyLayoutDirection.row;
private _propertyItems: PropertyItem[] = [];
private _showToggleButton: boolean = false;
private _actionbar: ActionBar;
private _togglePropertiesAction: TogglePropertiesAction = new TogglePropertiesAction();
@ViewChild('actionbar', { read: ElementRef }) private _actionbarRef: ElementRef;
constructor(
@Inject(forwardRef(() => ChangeDetectorRef)) private _changeRef: ChangeDetectorRef
@@ -38,6 +44,16 @@ export class PropertiesContainer extends Disposable implements OnInit, OnDestroy
super();
}
ngAfterViewInit(): void {
this._togglePropertiesAction.onDidChange((e) => {
if (e.expanded !== undefined) {
this._changeRef.detectChanges();
}
});
this._actionbar = new ActionBar(this._actionbarRef.nativeElement);
this._actionbar.push(this._togglePropertiesAction, { icon: true, label: false });
}
ngOnInit() {
this._register(DOM.addDisposableListener(window, DOM.EventType.RESIZE, () => this.layoutPropertyItems()));
this._changeRef.detectChanges();
@@ -74,4 +90,15 @@ export class PropertiesContainer extends Disposable implements OnInit, OnDestroy
public get propertyItems(): PropertyItem[] {
return this._propertyItems;
}
public get showToggleButton(): boolean {
return this._showToggleButton;
}
public set showToggleButton(v: boolean) {
if (this._showToggleButton !== v) {
this._showToggleButton = v;
this._changeRef.detectChanges();
}
}
}

27
src/sql/base/browser/ui/propertiesContainer/togglePropertiesAction.ts Normal file
View File

@@ -0,0 +1,27 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import { Action } from 'vs/base/common/actions';
import * as nls from 'vs/nls';
export class TogglePropertiesAction extends Action {
private static readonly ID = 'TogglePropertiesAction';
private static readonly COLLPASE_LABEL = nls.localize('hideProperties', "Hide properties");
private static readonly EXPAND_LABEL = nls.localize('showProperties', "Show Properties");
private static readonly COLLAPSE_ICON = 'codicon-chevron-up';
private static readonly EXPAND_ICON = 'codicon-chevron-down';
constructor(
) {
super(TogglePropertiesAction.ID, TogglePropertiesAction.COLLPASE_LABEL, TogglePropertiesAction.COLLAPSE_ICON);
this.expanded = true;
}
override async run(): Promise<void> {
this.expanded = !this.expanded;
this.class = this.expanded ? TogglePropertiesAction.COLLAPSE_ICON : TogglePropertiesAction.EXPAND_ICON;
this.label = this.expanded ? TogglePropertiesAction.COLLPASE_LABEL : TogglePropertiesAction.EXPAND_LABEL;
}
}