SuiteCRM/SuiteCRM-Core
2
0
Fork 0
mirror of https://github.com/SuiteCRM/SuiteCRM-Core.git synced 2025-09-01 08:00:47 +08:00
Code Issues Projects Packages Activity Actions

Update record-content skeleton loading

Browse source
This commit is contained in:
Clemente Raposo 2024-12-11 00:57:24 +00:00 • committed by Jack Anderson
parent fecf63d19c
commit c38bcb2164
2 changed files with 291 additions and 199 deletions
Download patch file Download diff file Expand all files Collapse all files

456
core/app/core/src/lib/components/record-content-skeleton/record-content-skeleton.component.html
View file

@ -25,7 +25,7 @@
* the words "Supercharged by SuiteCRM".
*/
-->
<div class="record-content tabs-layout container-fluid pl-0 pr-0 record-content-skeleton">
<div class="record-content tabs-layout container-fluid pl-0 pr-0 pt-0 record-content-skeleton">
<ul class="nav-tabs nav">
<li class="tab nav-item">
<a class="tab-link nav-link active pl-5 pr-5 h-100 box-loading" href="">
@ -44,257 +44,317 @@
<div class="tab-pane fade active show">
<div class="">
<form class="detail field-layout">
<div class="form-row align-items-center pt-1 pb-1">
<div class="field-column-bordered col form-group m-0 pl-3 pb-2 pr-3">
<div class="label-container">
<strong>
<label class="col-form-label-sm mb-0 pb-3 pl-5 pr-5 h-100 rounded box-loading">
</label>
</strong>
</div>
<div class="d-flex">
<div class="flex-grow-1 text-break rounded box-loading skeleton-field-content">
<div class="field-layout-row form-row mb-1 align-items-stretch ng-star-inserted">
<div class="field-layout-col field-column-bordered col form-group m-0 pl-3 pb-2 pr-3 d-flex flex-column justify-content-between ng-star-inserted">
<div class="field-layout-field-group-wrapper form-group row ng-star-inserted">
<div class="col-form-label col-sm-3 field-layout-field-label-wrapper label-container">
<strong>
<label class="col-form-label-sm mb-0 pb-3 pl-5 pr-5 h-100 rounded box-loading">
</label>
</strong>
</div>
<div>
<button class="record-action-button" type="button">
<scrm-image image="pencil">
</scrm-image>
</button>
<div class="col-sm-9 d-flex flex-grow-1 field-layout-field-wrapper">
<div class="flex-grow-1 text-break rounded box-loading skeleton-field-content">
</div>
<div>
<button class="record-action-button" type="button">
<scrm-image image="pencil">
</scrm-image>
</button>
</div>
</div>
</div>
<div class="field-separation mt-2"></div>
<div class="field-separation mt-2 ng-star-inserted"></div>
</div>
<div class="col form-group m-0 pl-3 pb-2 pr-3">
<div class="label-container">
<strong>
<label class="col-form-label-sm mb-0 pb-3 pl-5 pr-5 h-100 rounded box-loading">
</label>
</strong>
</div>
<div class="d-flex">
<div class="flex-grow-1 text-break rounded box-loading skeleton-field-content"
>
<div class="field-layout-col col form-group m-0 pl-3 pb-2 pr-3 d-flex flex-column justify-content-between ng-star-inserted">
<div class="field-layout-field-group-wrapper form-group row ng-star-inserted">
<div class="col-form-label col-sm-3 field-layout-field-label-wrapper label-container">
<strong>
<label class="col-form-label-sm mb-0 pb-3 pl-5 pr-5 h-100 rounded box-loading">
</label>
</strong>
</div>
<div>
<button class="record-action-button" type="button">
<scrm-image image="pencil">
</scrm-image>
</button>
<div class="col-sm-9 d-flex flex-grow-1 field-layout-field-wrapper">
<div class="flex-grow-1 text-break rounded box-loading skeleton-field-content">
</div>
<div>
<button class="record-action-button" type="button">
<scrm-image image="pencil">
</scrm-image>
</button>
</div>
</div>
</div>
<div class="field-separation mt-2"></div>
<div class="field-separation mt-2 ng-star-inserted"></div>
</div>
</div>
<div class="form-row align-items-center pt-1 pb-1">
<div class="field-column-bordered col form-group m-0 pl-3 pb-2 pr-3">
<div class="label-container">
<strong>
<label class="col-form-label-sm mb-0 pb-3 pl-5 pr-5 h-100 rounded box-loading">
</label>
</strong>
</div>
<div class="d-flex">
<div class="flex-grow-1 text-break rounded box-loading skeleton-field-content"
>
<div class="field-layout-row form-row mb-1 align-items-stretch ng-star-inserted">
<div class="field-layout-col field-column-bordered col form-group m-0 pl-3 pb-2 pr-3 d-flex flex-column justify-content-between ng-star-inserted">
<div class="field-layout-field-group-wrapper form-group row ng-star-inserted">
<div class="col-form-label col-sm-3 field-layout-field-label-wrapper label-container">
<strong>
<label class="col-form-label-sm mb-0 pb-3 pl-5 pr-5 h-100 rounded box-loading">
</label>
</strong>
</div>
<div>
<button class="record-action-button" type="button">
<scrm-image image="pencil">
</scrm-image>
</button>
<div class="col-sm-9 d-flex flex-grow-1 field-layout-field-wrapper">
<div class="flex-grow-1 text-break rounded box-loading skeleton-field-content">
</div>
<div>
<button class="record-action-button" type="button">
<scrm-image image="pencil">
</scrm-image>
</button>
</div>
</div>
</div>
<div class="field-separation mt-2"></div>
<div class="field-separation mt-2 ng-star-inserted"></div>
</div>
<div class="col form-group m-0 pl-3 pb-2 pr-3">
<div class="label-container">
<strong>
<label class="col-form-label-sm mb-0 pb-3 pl-5 pr-5 h-100 rounded box-loading">
</label>
</strong>
</div>
<div class="d-flex">
<div class="flex-grow-1 text-break rounded box-loading skeleton-field-content"
>
<div class="field-layout-col col form-group m-0 pl-3 pb-2 pr-3 d-flex flex-column justify-content-between ng-star-inserted">
<div class="field-layout-field-group-wrapper form-group row ng-star-inserted">
<div class="col-form-label col-sm-3 field-layout-field-label-wrapper label-container">
<strong>
<label class="col-form-label-sm mb-0 pb-3 pl-5 pr-5 h-100 rounded box-loading">
</label>
</strong>
</div>
<div>
<button class="record-action-button" type="button">
<scrm-image image="pencil">
</scrm-image>
</button>
<div class="col-sm-9 d-flex flex-grow-1 field-layout-field-wrapper">
<div class="flex-grow-1 text-break rounded box-loading skeleton-field-content">
</div>
<div>
<button class="record-action-button" type="button">
<scrm-image image="pencil">
</scrm-image>
</button>
</div>
</div>
</div>
<div class="field-separation mt-2"></div>
<div class="field-separation mt-2 ng-star-inserted"></div>
</div>
</div>
<div class="form-row align-items-center pt-1 pb-1">
<div class="field-column-bordered col form-group m-0 pl-3 pb-2 pr-3">
<div class="label-container">
<strong>
<label class="col-form-label-sm mb-0 pb-3 pl-5 pr-5 h-100 rounded box-loading">
</label>
</strong>
</div>
<div class="d-flex">
<div class="flex-grow-1 text-break rounded box-loading skeleton-field-content"
>
<div class="field-layout-row form-row mb-1 align-items-stretch ng-star-inserted">
<div class="field-layout-col field-column-bordered col form-group m-0 pl-3 pb-2 pr-3 d-flex flex-column justify-content-between ng-star-inserted">
<div class="field-layout-field-group-wrapper form-group row ng-star-inserted">
<div class="col-form-label col-sm-3 field-layout-field-label-wrapper label-container">
<strong>
<label class="col-form-label-sm mb-0 pb-3 pl-5 pr-5 h-100 rounded box-loading">
</label>
</strong>
</div>
<div>
<button class="record-action-button" type="button">
<scrm-image image="pencil">
</scrm-image>
</button>
<div class="col-sm-9 d-flex flex-grow-1 field-layout-field-wrapper">
<div class="flex-grow-1 text-break rounded box-loading skeleton-field-content">
</div>
<div>
<button class="record-action-button" type="button">
<scrm-image image="pencil">
</scrm-image>
</button>
</div>
</div>
</div>
<div class="field-separation mt-2"></div>
<div class="field-separation mt-2 ng-star-inserted"></div>
</div>
<div class="col form-group m-0 pl-3 pb-2 pr-3">
<div class="label-container">
<strong>
<label class="col-form-label-sm mb-0 pb-3 pl-5 pr-5 h-100 rounded box-loading">
</label>
</strong>
</div>
<div class="d-flex">
<div class="flex-grow-1 text-break rounded box-loading skeleton-field-content"
>
<div class="field-layout-col col form-group m-0 pl-3 pb-2 pr-3 d-flex flex-column justify-content-between ng-star-inserted">
<div class="field-layout-field-group-wrapper form-group row ng-star-inserted">
<div class="col-form-label col-sm-3 field-layout-field-label-wrapper label-container">
<strong>
<label class="col-form-label-sm mb-0 pb-3 pl-5 pr-5 h-100 rounded box-loading">
</label>
</strong>
</div>
<div>
<button class="record-action-button" type="button">
<scrm-image image="pencil">
</scrm-image>
</button>
<div class="col-sm-9 d-flex flex-grow-1 field-layout-field-wrapper">
<div class="flex-grow-1 text-break rounded box-loading skeleton-field-content">
</div>
<div>
<button class="record-action-button" type="button">
<scrm-image image="pencil">
</scrm-image>
</button>
</div>
</div>
</div>
<div class="field-separation mt-2"></div>
<div class="field-separation mt-2 ng-star-inserted"></div>
</div>
</div>
<div class="form-row align-items-center pt-1 pb-1">
<div class="field-column-bordered col form-group m-0 pl-3 pb-2 pr-3">
<div class="label-container">
<strong>
<label class="col-form-label-sm mb-0 pb-3 pl-5 pr-5 h-100 rounded box-loading">
</label>
</strong>
</div>
<div class="d-flex">
<div class="flex-grow-1 text-break rounded box-loading skeleton-field-content"
>
<div class="field-layout-row form-row mb-1 align-items-stretch ng-star-inserted">
<div class="field-layout-col field-column-bordered col form-group m-0 pl-3 pb-2 pr-3 d-flex flex-column justify-content-between ng-star-inserted">
<div class="field-layout-field-group-wrapper form-group row ng-star-inserted">
<div class="col-form-label col-sm-3 field-layout-field-label-wrapper label-container">
<strong>
<label class="col-form-label-sm mb-0 pb-3 pl-5 pr-5 h-100 rounded box-loading">
</label>
</strong>
</div>
<div>
<button class="record-action-button" type="button">
<scrm-image image="pencil">
</scrm-image>
</button>
<div class="col-sm-9 d-flex flex-grow-1 field-layout-field-wrapper">
<div class="flex-grow-1 text-break rounded box-loading skeleton-field-content">
</div>
<div>
<button class="record-action-button" type="button">
<scrm-image image="pencil">
</scrm-image>
</button>
</div>
</div>
</div>
<div class="field-separation mt-2"></div>
<div class="field-separation mt-2 ng-star-inserted"></div>
</div>
<div class="col form-group m-0 pl-3 pb-2 pr-3">
<div class="label-container">
<strong>
<label class="col-form-label-sm mb-0 pb-3 pl-5 pr-5 h-100 rounded box-loading">
</label>
</strong>
</div>
<div class="d-flex">
<div class="flex-grow-1 text-break rounded box-loading skeleton-field-content"
>
<div class="field-layout-col col form-group m-0 pl-3 pb-2 pr-3 d-flex flex-column justify-content-between ng-star-inserted">
<div class="field-layout-field-group-wrapper form-group row ng-star-inserted">
<div class="col-form-label col-sm-3 field-layout-field-label-wrapper label-container">
<strong>
<label class="col-form-label-sm mb-0 pb-3 pl-5 pr-5 h-100 rounded box-loading">
</label>
</strong>
</div>
<div>
<button class="record-action-button" type="button">
<scrm-image image="pencil">
</scrm-image>
</button>
<div class="col-sm-9 d-flex flex-grow-1 field-layout-field-wrapper">
<div class="flex-grow-1 text-break rounded box-loading skeleton-field-content">
</div>
<div>
<button class="record-action-button" type="button">
<scrm-image image="pencil">
</scrm-image>
</button>
</div>
</div>
</div>
<div class="field-separation mt-2"></div>
<div class="field-separation mt-2 ng-star-inserted"></div>
</div>
</div>
<div class="form-row align-items-center pt-1 pb-1">
<div class="field-column-bordered col form-group m-0 pl-3 pb-2 pr-3">
<div class="label-container">
<strong>
<label class="col-form-label-sm mb-0 pb-3 pl-5 pr-5 h-100 rounded box-loading">
</label>
</strong>
</div>
<div class="d-flex">
<div class="flex-grow-1 text-break rounded box-loading skeleton-field-content"
>
<div class="field-layout-row form-row mb-1 align-items-stretch ng-star-inserted">
<div class="field-layout-col field-column-bordered col form-group m-0 pl-3 pb-2 pr-3 d-flex flex-column justify-content-between ng-star-inserted">
<div class="field-layout-field-group-wrapper form-group row ng-star-inserted">
<div class="col-form-label col-sm-3 field-layout-field-label-wrapper label-container">
<strong>
<label class="col-form-label-sm mb-0 pb-3 pl-5 pr-5 h-100 rounded box-loading">
</label>
</strong>
</div>
<div>
<button class="record-action-button" type="button">
<scrm-image image="pencil">
</scrm-image>
</button>
<div class="col-sm-9 d-flex flex-grow-1 field-layout-field-wrapper">
<div class="flex-grow-1 text-break rounded box-loading skeleton-field-content">
</div>
<div>
<button class="record-action-button" type="button">
<scrm-image image="pencil">
</scrm-image>
</button>
</div>
</div>
</div>
<div class="field-separation mt-2"></div>
<div class="field-separation mt-2 ng-star-inserted"></div>
</div>
<div class="col form-group m-0 pl-3 pb-2 pr-3">
<div class="label-container">
<strong>
<label class="col-form-label-sm mb-0 pb-3 pl-5 pr-5 h-100 rounded box-loading">
</label>
</strong>
</div>
<div class="d-flex">
<div class="flex-grow-1 text-break rounded box-loading skeleton-field-content"
>
<div class="field-layout-col col form-group m-0 pl-3 pb-2 pr-3 d-flex flex-column justify-content-between ng-star-inserted">
<div class="field-layout-field-group-wrapper form-group row ng-star-inserted">
<div class="col-form-label col-sm-3 field-layout-field-label-wrapper label-container">
<strong>
<label class="col-form-label-sm mb-0 pb-3 pl-5 pr-5 h-100 rounded box-loading">
</label>
</strong>
</div>
<div>
<button class="record-action-button" type="button">
<scrm-image image="pencil">
</scrm-image>
</button>
<div class="col-sm-9 d-flex flex-grow-1 field-layout-field-wrapper">
<div class="flex-grow-1 text-break rounded box-loading skeleton-field-content">
</div>
<div>
<button class="record-action-button" type="button">
<scrm-image image="pencil">
</scrm-image>
</button>
</div>
</div>
</div>
<div class="field-separation mt-2"></div>
<div class="field-separation mt-2 ng-star-inserted"></div>
</div>
</div>
<div class="form-row align-items-center pt-1 pb-1">
<div class="field-column-bordered col form-group m-0 pl-3 pb-2 pr-3">
<div class="label-container">
<strong>
<label class="col-form-label-sm mb-0 pb-3 pl-5 pr-5 h-100 rounded box-loading">
</label>
</strong>
</div>
<div class="d-flex">
<div class="flex-grow-1 text-break rounded box-loading skeleton-field-content"
>
<div class="field-layout-row form-row mb-1 align-items-stretch ng-star-inserted">
<div class="field-layout-col field-column-bordered col form-group m-0 pl-3 pb-2 pr-3 d-flex flex-column justify-content-between ng-star-inserted">
<div class="field-layout-field-group-wrapper form-group row ng-star-inserted">
<div class="col-form-label col-sm-3 field-layout-field-label-wrapper label-container">
<strong>
<label class="col-form-label-sm mb-0 pb-3 pl-5 pr-5 h-100 rounded box-loading">
</label>
</strong>
</div>
<div>
<button class="record-action-button" type="button">
<scrm-image image="pencil">
</scrm-image>
</button>
<div class="col-sm-9 d-flex flex-grow-1 field-layout-field-wrapper">
<div class="flex-grow-1 text-break rounded box-loading skeleton-field-content">
</div>
<div>
<button class="record-action-button" type="button">
<scrm-image image="pencil">
</scrm-image>
</button>
</div>
</div>
</div>
<div class="field-separation mt-2"></div>
<div class="field-separation mt-2 ng-star-inserted"></div>
</div>
<div class="col form-group m-0 pl-3 pb-2 pr-3">
<div class="label-container">
<strong>
<label class="col-form-label-sm mb-0 pb-3 pl-5 pr-5 h-100 rounded box-loading">
</label>
</strong>
</div>
<div class="d-flex">
<div class="flex-grow-1 text-break rounded box-loading skeleton-field-content"
>
<div class="field-layout-col col form-group m-0 pl-3 pb-2 pr-3 d-flex flex-column justify-content-between ng-star-inserted">
<div class="field-layout-field-group-wrapper form-group row ng-star-inserted">
<div class="col-form-label col-sm-3 field-layout-field-label-wrapper label-container">
<strong>
<label class="col-form-label-sm mb-0 pb-3 pl-5 pr-5 h-100 rounded box-loading">
</label>
</strong>
</div>
<div>
<button class="record-action-button" type="button">
<scrm-image image="pencil">
</scrm-image>
</button>
<div class="col-sm-9 d-flex flex-grow-1 field-layout-field-wrapper">
<div class="flex-grow-1 text-break rounded box-loading skeleton-field-content">
</div>
<div>
<button class="record-action-button" type="button">
<scrm-image image="pencil">
</scrm-image>
</button>
</div>
</div>
</div>
<div class="field-separation mt-2"></div>
<div class="field-separation mt-2 ng-star-inserted"></div>
</div>
</div>
<div class="field-layout-row form-row mb-1 align-items-stretch ng-star-inserted">
<div class="field-layout-col field-column-bordered col form-group m-0 pl-3 pb-2 pr-3 d-flex flex-column justify-content-between ng-star-inserted">
<div class="field-layout-field-group-wrapper form-group row ng-star-inserted">
<div class="col-form-label col-sm-3 field-layout-field-label-wrapper label-container">
<strong>
<label class="col-form-label-sm mb-0 pb-3 pl-5 pr-5 h-100 rounded box-loading">
</label>
</strong>
</div>
<div class="col-sm-9 d-flex flex-grow-1 field-layout-field-wrapper">
<div class="flex-grow-1 text-break rounded box-loading skeleton-field-content">
</div>
<div>
<button class="record-action-button" type="button">
<scrm-image image="pencil">
</scrm-image>
</button>
</div>
</div>
</div>
<div class="field-separation mt-2 ng-star-inserted"></div>
</div>
<div class="field-layout-col col form-group m-0 pl-3 pb-2 pr-3 d-flex flex-column justify-content-between ng-star-inserted">
<div class="field-layout-field-group-wrapper form-group row ng-star-inserted">
<div class="col-form-label col-sm-3 field-layout-field-label-wrapper label-container">
<strong>
<label class="col-form-label-sm mb-0 pb-3 pl-5 pr-5 h-100 rounded box-loading">
</label>
</strong>
</div>
<div class="col-sm-9 d-flex flex-grow-1 field-layout-field-wrapper">
<div class="flex-grow-1 text-break rounded box-loading skeleton-field-content">
</div>
<div>
<button class="record-action-button" type="button">
<scrm-image image="pencil">
</scrm-image>
</button>
</div>
</div>
</div>
<div class="field-separation mt-2 ng-star-inserted"></div>
</div>
</div>
</form>
</div>
</div>

34
core/app/shell/src/themes/suite8/css/components/_record-content-skeleton.scss
View file

@ -25,18 +25,20 @@
*/
.record-content-skeleton .nav-tabs.nav {
height: 34px;
height: 30px;
opacity: 0.6;
}
.record-content-skeleton .tab-content .col-form-label-sm {
background-color: $midnight-blue;
opacity: 0.4;
height: 1.2rem !important;
}
.record-content-skeleton .tab-content .skeleton-field-content {
background-color: $geyser-blue;
opacity: 0.6;
height: 1.2rem;
}
.dynamic-field .skeleton-field-content {
@ -44,3 +46,33 @@
background-color: $geyser-blue;
opacity: 0.6;
}
.skeleton-field-content {
color: transparent;
background-color: $geyser-blue;
opacity: 0.6;
}
.skeleton-field-content.small-size-text-skeleton {
height: 0.5em;
}
.skeleton-field-content.medium-size-text-skeleton {
height: 1em;
}
.skeleton-field-content.large-size-text-skeleton {
height: 1.5em;
}
.skeleton-field-content.small-length-text-skeleton {
width: 4.5em;
}
.skeleton-field-content.medium-length-text-skeleton {
width: 6em;
}
.skeleton-field-content.large-length-text-skeleton {
width: 12em;
}