ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-04 01:25:38 -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 {
background-repeat: no-repeat;
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">
<div class="card-vertical-button">
<div *ngIf="iconPath" class="iconContainer"><div [class]="iconClass" [style.width]="iconWidth" [style.height]="iconHeight"></div>
<hr/>
<h4 class="card-label">{{label}}</h4>
<div *ngIf="iconPath" class="iconContainer">
<div [class]="iconClass" [style.maxWidth]="iconWidth" [style.maxHeight]="iconHeight"></div>
</div>
<h4 class="card-label">{{label}}</h4>
</div>
</ng-container>

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

@@ -39,7 +39,9 @@
.model-card .card-vertical-button {
position: relative;
display: inline-block;
display: flex;
flex-direction: column;
text-align: center;
height: auto;
width: auto;
padding: 5px 5px 5px 5px;
@@ -58,16 +60,24 @@
}
.model-card .iconContainer {
width: 100%;
height: 50px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-grow: 1;
border-bottom-width: 1px;
border-bottom-style: solid;
padding: 10px 0px 10px 0px;
border-color: rgb(214, 214, 214);
}
.model-card .cardIcon {
display: inline-block;
width: 40px;
height: 40px;
flex-grow: 1;
width: 100%;
height: 100%;
max-width: 50px;
max-height: 50px;
background-position: center;
background-repeat: no-repeat;
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 {
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 {
return this.getPropertyOrDefault<sqlops.ComponentWithIcon, number | string>((props) => props.iconWidth, '40px');
return this.getPropertyOrDefault<sqlops.ComponentWithIcon, number | string>((props) => props.iconWidth, '50px');
}
ngOnDestroy(): void {