Dashboard style updates to match mockups (#9857)

* widget formatting

* tab panel style

* breadcrumb padding

* dark theme colors

* Addressing comments

* move colors to theme.ts

* update properties widget colors

* update color names
This commit is contained in:
Kim Santiago
2020-04-08 18:15:23 -07:00
committed by GitHub
parent db49a146b0
commit 238acb1468
9 changed files with 111 additions and 17 deletions

View File

@@ -2,6 +2,7 @@
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import 'vs/css!./insightsWidget';
import {
Component, Inject, forwardRef, AfterContentInit,
@@ -46,7 +47,7 @@ interface IStorageResult {
selector: 'insights-widget',
template: `
<div *ngIf="error" style="text-align: center; padding-top: 20px">{{error}}</div>
<div *ngIf="lastUpdated" style="font-style: italic; font-size: 80%; margin-left: 5px">{{lastUpdated}}</div>
<div *ngIf="lastUpdated" class="insights-widget-last-updated subText">{{lastUpdated}}</div>
<div *ngIf="autoRefreshStatus" style="font-style: italic; font-size: 80%; margin-left: 5px">{{autoRefreshStatus}}</div>
<div style="margin: 10px; width: calc(100% - 20px); height: calc(100% - 20px)">
<ng-template *ngIf="!_loading" component-host></ng-template>

View File

@@ -0,0 +1,9 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
.insights-widget-last-updated {
font-size: 10px;
margin-left: 5px;
}

View File

@@ -11,8 +11,8 @@
<span #child style="white-space : nowrap; width: fit-content">
<ng-template ngFor let-item [ngForOf]="properties">
<span style="margin-left: 10px; display: inline-block;">
<div style="font-size: 11px;">{{item.displayName}}</div>
<div>{{item.value}}</div>
<div class="propertiesName" style="font-size: 11px;">{{item.displayName}}</div>
<div class="propertiesValue">{{item.value}}</div>
</span>
</ng-template>
</span>