ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-16 18:46:40 -05:00
Code Issues Packages Projects Releases Wiki Activity

Update card layout to give more icon space (#1858)

Browse Source
This commit is contained in:
Matt Irvine
2018-07-05 14:58:46 -07:00
committed by GitHub
parent c92ff60592
commit c504113d13
4 changed files with 22 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/sql/parts/modelComponents/button.css
View File

@@ -6,4 +6,5 @@
modelview-button a.monaco-button.monaco-text-button.icon { modelview-button a.monaco-button.monaco-text-button.icon {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0% 50%; background-position: 0% 50%;
background-size: contain;
} }

6
src/sql/parts/modelComponents/card.component.html
View File

@@ -5,10 +5,10 @@
<ng-container *ngIf="isVerticalButton"> <ng-container *ngIf="isVerticalButton">
<div class="card-vertical-button"> <div class="card-vertical-button">
<div *ngIf="iconPath" class="iconContainer"><div [class]="iconClass" [style.width]="iconWidth" [style.height]="iconHeight"></div> <div *ngIf="iconPath" class="iconContainer">
<hr/> <div [class]="iconClass" [style.maxWidth]="iconWidth" [style.maxHeight]="iconHeight"></div>
<h4 class="card-label">{{label}}</h4>
</div> </div>
<h4 class="card-label">{{label}}</h4>
</div> </div>
</ng-container> </ng-container>

22
src/sql/parts/modelComponents/card.css
View File

@@ -39,7 +39,9 @@
.model-card .card-vertical-button { .model-card .card-vertical-button {
position: relative; position: relative;
display: inline-block; display: flex;
flex-direction: column;
text-align: center;
height: auto; height: auto;
width: auto; width: auto;
padding: 5px 5px 5px 5px; padding: 5px 5px 5px 5px;
@@ -58,16 +60,24 @@
} }
.model-card .iconContainer { .model-card .iconContainer {
width: 100%; display: flex;
height: 50px; flex-direction: column;
text-align: center; justify-content: center;
align-items: center;
flex-grow: 1;
border-bottom-width: 1px;
border-bottom-style: solid;
padding: 10px 0px 10px 0px; padding: 10px 0px 10px 0px;
border-color: rgb(214, 214, 214);
} }
.model-card .cardIcon { .model-card .cardIcon {
display: inline-block; display: inline-block;
width: 40px; flex-grow: 1;
height: 40px; width: 100%;
height: 100%;
max-width: 50px;
max-height: 50px;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;

4
src/sql/parts/modelComponents/componentWithIconBase.ts
View File

@@ -91,11 +91,11 @@ export abstract class ComponentWithIconBase extends ComponentBase {
} }
public get iconHeight(): number | string { public get iconHeight(): number | string {
return this.getPropertyOrDefault<sqlops.ComponentWithIcon, number | string>((props) => props.iconHeight, '40px'); return this.getPropertyOrDefault<sqlops.ComponentWithIcon, number | string>((props) => props.iconHeight, '50px');
} }
public get iconWidth(): number | string { public get iconWidth(): number | string {
return this.getPropertyOrDefault<sqlops.ComponentWithIcon, number | string>((props) => props.iconWidth, '40px'); return this.getPropertyOrDefault<sqlops.ComponentWithIcon, number | string>((props) => props.iconWidth, '50px');
} }
ngOnDestroy(): void { ngOnDestroy(): void {