mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
feat(devtools): Applying consistent styling
This commit is contained in:
Sumit Arora
AleksanderBodurri
parent
113e4cc72d
commit
6ddac7c051
8 changed files with 51 additions and 35 deletions
|
|
@ -56,7 +56,8 @@ mat-tab-group {
|
|||
}
|
||||
|
||||
/deep/ .mat-tab-body-wrapper {
|
||||
height: calc(100% - 49px);
|
||||
height: 100%;
|
||||
/* height: calc(100% - 49px); */
|
||||
/* 100% - header */
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -127,4 +127,5 @@
|
|||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
line-height: 20px;
|
||||
width: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
.explorer-panel header {
|
||||
background-color: #eee;
|
||||
padding: 0 5px;
|
||||
padding-left: 9px;
|
||||
border-top: 1px solid #ccc;
|
||||
border-bottom: 1px solid #ccc;
|
||||
color: hsla(0, 0%, 32%, 1);
|
||||
white-space: nowrap;
|
||||
|
|
@ -8,7 +9,16 @@
|
|||
overflow: hidden;
|
||||
line-height: 25px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/deep/ .mat-button,
|
||||
.mat-icon-button {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
line-height: 15px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,8 +8,6 @@
|
|||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
width="1em"
|
||||
height="1em"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
viewBox="0 0 8 8"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -2,15 +2,25 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
min-height: 40px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.element-header .component-name {
|
||||
margin-left: 8px;
|
||||
font-weight: 400;
|
||||
margin-left: 10px;
|
||||
font-weight: 700;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.element-header .element-name {
|
||||
margin-left: 8px;
|
||||
font-weight: 300;
|
||||
margin-left: 10px;
|
||||
line-height: 25px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/deep/ .mat-button,
|
||||
.mat-icon-button {
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
line-height: 25px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,21 +3,9 @@
|
|||
<ng-container *ngIf="currentSelectedElement.component; else currentElementIsDOMElement">
|
||||
<div class="component-name">{{ currentSelectedElement.component.name }}</div>
|
||||
<button mat-icon-button (click)="viewSource.emit()">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
width="1em"
|
||||
height="1em"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M7.375 16.781l1.25-1.562L4.601 12l4.024-3.219l-1.25-1.562l-5 4a1 1 0 0 0 0 1.562l5 4zm9.25-9.562l-1.25 1.562L19.399 12l-4.024 3.219l1.25 1.562l5-4a1 1 0 0 0 0-1.562l-5-4z"
|
||||
fill="#626262"
|
||||
/>
|
||||
<path d="M14.976 3.216l-4 18l-1.953-.434l4-18z" fill="#626262" />
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
|
||||
<path d="M0 0h24v24H0V0z" fill="none" />
|
||||
<path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" />
|
||||
</svg>
|
||||
</button>
|
||||
</ng-container>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
:host, .devtools-wrapper {
|
||||
:host,
|
||||
.devtools-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.noselect {
|
||||
user-select: none;
|
||||
}
|
||||
|
|
@ -16,7 +18,7 @@
|
|||
}
|
||||
|
||||
.initializing .loading {
|
||||
background: url("./images/angular.svg");
|
||||
background: url('./images/angular.svg');
|
||||
border-radius: 50%;
|
||||
width: 125px;
|
||||
height: 125px;
|
||||
|
|
@ -25,12 +27,19 @@
|
|||
animation: pulse 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse
|
||||
{
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0 0 0 35px rgba(0, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.text-message {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,22 +6,22 @@
|
|||
</ng-container>
|
||||
<ng-template #notSupported>
|
||||
<ng-container *ngIf="prodMode; else versionTooLow">
|
||||
<div>
|
||||
<p class="text-message">
|
||||
Angular Devtools only supports dev mode.
|
||||
</div>
|
||||
</p>
|
||||
</ng-container>
|
||||
<ng-template #versionTooLow>
|
||||
<div>
|
||||
<p class="text-message">
|
||||
Angular Devtools only supports Angular versions 9 and above.
|
||||
</div>
|
||||
</p>
|
||||
</ng-template>
|
||||
</ng-template>
|
||||
</ng-container>
|
||||
<ng-template #errorOrLoad>
|
||||
<ng-container *ngIf="angularExists === false; else load">
|
||||
<div>
|
||||
<p class="text-message">
|
||||
Not an Angular app
|
||||
</div>
|
||||
</p>
|
||||
</ng-container>
|
||||
<ng-template #load>
|
||||
<div class="initializing" *ngIf="angularExists === null">
|
||||
|
|
@ -29,4 +29,3 @@
|
|||
</div>
|
||||
</ng-template>
|
||||
</ng-template>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue