SuiteCRM/SuiteCRM-Core
2
0
Fork 0
mirror of https://github.com/SuiteCRM/SuiteCRM-Core.git synced 2025-08-29 20:50:13 +08:00
Code Issues Projects Packages Activity Actions

Adjust top widget styling

Browse source
This commit is contained in:
Clemente Raposo 2025-01-21 12:41:09 +00:00 • committed by Jack Anderson
parent 4a956fea14
commit 8aaf22e0ff
2 changed files with 69 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

98
core/app/core/src/lib/containers/top-widget/components/statistics-top-widget/statistics-top-widget.component.html
View file

@ -31,62 +31,64 @@
{{vm.appStrings[this.messageLabelKey] || '' | uppercase}}
</div>
<ng-container *ngIf="!loading()">
<ng-container *ngFor="let item of statistics | keyvalue">
<div class="d-flex justify-content-center align-items-center w-100 mt-3 mb-3">
<ng-container *ngFor="let item of statistics | keyvalue; index as i; last as isLast; count as total">
<div class="d-flex col h-100 flex-column justify-content-start align-items-center widget-bar-entry"
[class.border-right]="total > 1 && i%2 === 0 && !isLast">
<div class="d-flex flex-column justify-content-center align-items-baseline widget-bar-entry p-2">
<ng-container *ngIf="!shouldHide(vm.statistics[item.key], item.value)">
<ng-container *ngIf="!shouldHide(vm.statistics[item.key], item.value)">
<div *ngIf="item.value.labelKey && getLabel(item.value.labelKey)" class="pr-1 widget-bar-entry-label">
<ng-container *ngIf="!isValueEmpty(vm.statistics[item.key])">
{{getLabel(item.value.labelKey) | uppercase}}:
</ng-container>
<ng-container *ngIf="isValueEmpty(vm.statistics[item.key])">
{{getLabel(item.value.labelKey) | uppercase}}
</ng-container>
</div>
</ng-container>
<ng-container
*ngIf="item.key && vm.statistics[item.key] && !shouldHide(vm.statistics[item.key], item.value)">
<div class="pl-1 pr-1 widget-bar-entry-value"
*ngIf="!vm.statistics[item.key].loading && vm.statistics[item.key].field">
<ng-container
*ngIf="!isValueEmpty(vm.statistics[item.key]) || item.value.hideValueIfEmpty !== true">
<scrm-field [type]="vm.statistics[item.key].field.type" [field]="vm.statistics[item.key].field"
mode="list"></scrm-field>
</ng-container>
</div>
</ng-container>
<div class="pl-1 pr-1 widget-bar-entry-loading" *ngIf="(item.value.store.loading$ | async) as loading">
<div class="pb-2">
<div class="large-size-text-skeleton small-length-text-skeleton rounded box-loading skeleton-field-content">
.
<div *ngIf="item.value.labelKey && getLabel(item.value.labelKey)" class="pr-1 widget-bar-entry-label">
<ng-container *ngIf="!isValueEmpty(vm.statistics[item.key])">
{{getLabel(item.value.labelKey) | uppercase}}:
</ng-container>
<ng-container *ngIf="isValueEmpty(vm.statistics[item.key])">
{{getLabel(item.value.labelKey) | uppercase}}
</ng-container>
</div>
</ng-container>
<ng-container
*ngIf="item.key && vm.statistics[item.key] && !shouldHide(vm.statistics[item.key], item.value)">
<div class="pl-1 pr-1 widget-bar-entry-value"
*ngIf="!vm.statistics[item.key].loading && vm.statistics[item.key].field">
<ng-container
*ngIf="!isValueEmpty(vm.statistics[item.key]) || item.value.hideValueIfEmpty !== true">
<scrm-field [type]="vm.statistics[item.key].field.type" [field]="vm.statistics[item.key].field"
mode="list"></scrm-field>
</ng-container>
</div>
</ng-container>
<div class="pl-1 pr-1 widget-bar-entry-loading" *ngIf="(item.value.store.loading$ | async) as loading">
<div class="pb-2">
<div class="large-size-text-skeleton small-length-text-skeleton rounded box-loading skeleton-field-content">
.
</div>
</div>
<ng-container *ngIf="!loading && (!item.key || !vm.statistics[item.key])">
-
</ng-container>
</div>
<ng-container *ngIf="!loading && (!item.key || !vm.statistics[item.key])">
-
<ng-container *ngIf="!shouldHide(vm.statistics[item.key], item.value)">
<div *ngIf="item.value.endLabelKey && getLabel(item.value.endLabelKey)"
class="pl-1 widget-bar-entry-end-label">
{{getLabel(item.value.endLabelKey) | uppercase}}
</div>
</ng-container>
</div>
<ng-container *ngIf="!shouldHide(vm.statistics[item.key], item.value)">
<div *ngIf="item.value.endLabelKey && getLabel(item.value.endLabelKey)"
class="pl-1 widget-bar-entry-end-label">
{{getLabel(item.value.endLabelKey) | uppercase}}
</div>
</ng-container>
</div>
</ng-container>
</ng-container>
</div>
</ng-container>
<ng-container *ngIf="loading()">

23
core/app/shell/src/themes/suite8/css/components/_widget-bar.scss
View file

@ -29,12 +29,19 @@
color: $dark-midnight-grey;
box-shadow: 0 .125rem .25rem #00000013;
border: 1px solid $extra-light-grey;
min-height: 70px;
min-height: 60px;
.widget-bar-entry:not(:first-child):not(:last-child) {
margin-top: .5rem;
margin-bottom: .5rem;
}
}
.widget-bar .widget-bar-entry-value {
font-weight: 900;
font-size: 1.7em;
font-weight: 700;
font-size: 1.3em;
.skeleton-field-content {
background-color: $dark-midnight-grey;
@ -45,9 +52,17 @@
.widget-bar .widget-bar-entry-label,
.widget-bar .widget-bar-entry-end-label {
font-weight: 400;
font-size: 0.7em;
font-size: 0.8em;
text-align: center;
}
.widget-bar .widget-bar-entry-label:first-child {
padding-top: 0.2rem;
}
.widget-bar .inline-spinner > div {
width: 0.45em;
height: 0.45em;