SuiteCRM/SuiteCRM-Core
2
0
Fork 0
mirror of https://github.com/SuiteCRM/SuiteCRM-Core.git synced 2025-08-30 02:52:22 +08:00
Code Issues Projects Packages Activity Actions

Update field-layout display for new UI

Browse source
This commit is contained in:
Clemente Raposo 2024-12-05 00:47:48 +00:00 • committed by Jack Anderson
parent c914da2400
commit c2bf11785e
2 changed files with 121 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

75
core/app/core/src/lib/components/field-layout/field-layout.component.html
View file

@ -26,50 +26,53 @@
*/
-->
<form class="field-layout {{config.mode}}">
<div [ngClass]="rowClass" *ngFor="let row of fieldGrid; index as i">
<div [ngClass]="rowClass" class="field-layout-row" *ngFor="let row of fieldGrid; index as i">
<div *ngFor="let col of row.cols; index as colNumber"
[class.field-column-bordered]="row.cols.length > 1 && colNumber < row.cols.length - 1"
[ngClass]="colClass">
[ngClass]="colClass"
class="field-layout-col">
<ng-container *ngIf="col.field && col.field.display !== 'none'">
<div class="label-container">
<strong>
<label [ngClass]="labelClass">{{col.field.label | uppercase}}</label>:
<ng-container
*ngIf="col.field.definition.required && (['edit', 'create'].includes(config.mode))">
<span class="required">*</span>
</ng-container>
</strong>
</div>
<div class="d-flex flex-grow-1"
[ngClass]="{ 'align-items-center': (col?.fieldActions && col?.fieldActions?.position === 'inline') }">
<div class="flex-grow-1 text-break">
<scrm-field [type]="col.field.type"
[mode]="config.mode"
[klass]="inputClass"
[field]="col.field"
[record]="record">
</scrm-field>
<div class="field-layout-field-group-wrapper form-group row">
<div class="col-sm-3 field-layout-field-label-wrapper col-form-label label-container">
<strong>
<ng-container
*ngIf="col.field.definition.required && (['edit', 'create'].includes(config.mode))">
<span class="required">*</span>
</ng-container>
<label [ngClass]="labelClass">{{col.field.label | uppercase}}</label>
</strong>
</div>
<ng-container *ngIf="col?.fieldActions && ((col?.fieldActions?.position ?? 'inline') === 'inline')">
<div>
<scrm-action-group-menu
[config]="col.adaptor"
[buttonGroupClass] = "col.fieldActions?.containerKlass ?? ''"
[klass] = "col.fieldActions?.klass ?? ''"
>
</scrm-action-group-menu>
<div class="col-sm-9 d-flex flex-grow-1 field-layout-field-wrapper"
[ngClass]="{ 'align-items-center': (col?.fieldActions && col?.fieldActions?.position === 'inline') }">
<div class="flex-grow-1 text-break field-layout-field-value-wrapper">
<scrm-field [type]="col.field.type"
[mode]="config.mode"
[klass]="inputClass"
[field]="col.field"
[record]="record">
</scrm-field>
</div>
</ng-container>
<div>
<button type="button" class="record-action-button"
(click)="this.dataSource.getEditAction()"
*ngIf="col.field.definition.inline_edit !== false && !col.field.readonly && !col.field.definition.readonly && this.dataSource.inlineEdit && config.mode === 'detail'">
<scrm-image class="sicon" image="pencil"></scrm-image>
</button>
<ng-container *ngIf="col?.fieldActions && ((col?.fieldActions?.position ?? 'inline') === 'inline')">
<div>
<scrm-action-group-menu
[config]="col.adaptor"
[buttonGroupClass] = "col.fieldActions?.containerKlass ?? ''"
[klass] = "col.fieldActions?.klass ?? ''"
>
</scrm-action-group-menu>
</div>
</ng-container>
<div>
<button type="button" class="record-action-button"
(click)="this.dataSource.getEditAction()"
*ngIf="col.field.definition.inline_edit !== false && !col.field.readonly && !col.field.definition.readonly && this.dataSource.inlineEdit && config.mode === 'detail'">
<scrm-image class="sicon" image="pencil"></scrm-image>
</button>
</div>
</div>
</div>
</ng-container>

86
core/app/shell/src/themes/suite8/css/components/_field-layout.scss
View file

@ -24,22 +24,100 @@
* the words "Supercharged by SuiteCRM".
*/
.field-layout .label-container,
.field-layout .label-container label {
color: $midnight-blue;
.field-layout.edit {
.field-separation {
display: none;
}
.field-layout-field-group-wrapper {
margin-bottom: 5px;
}
}
.field-layout-field-group-wrapper {
min-height: 2em;
}
.field-layout .field-separation {
border-top: 1px solid #ddd;
margin-top: 0px !important;
padding-top: 5px !important;
}
span.required {
color: $amaranth;
position: absolute;
left: 7px;
}
.tabs-layout .nav-tabs .tab-link {
background-color: #d7dde1;
color: #333;
font-size: .8rem;
border: none;
padding: .35rem 1rem;
}
.tab-content {
box-shadow: 0 .125rem .25rem #00000013 !important;
border: 1px solid #dee2e6 !important;
}
.tabs-layout .nav-tabs .tab {
display: flex;
align-items: end;
}
.form-row > .col, .form-row > [class*=col-] {
/* padding-right: 5px !important; */
padding-left: 5px;
padding-bottom: 2px !important;
}
.field-layout {
> .form-row > .form-group > .form-group.row {
margin-bottom: 0;
}
.col-form-label {
padding-top: 0;
padding-bottom: 0;
.col-form-label-sm {
padding-top: 0;
padding-bottom: 0;
font-size: .76rem;
}
}
}
.field-layout .field-column-bordered {
border-right: $nepal-grey solid 0.0625rem;
//border-right: $nepal-grey solid 0.0625rem;
/*
.form-group::after {
content: " ";
position: absolute;
right: 0;
top: 25%;
transform: translate(50%, 50%);
width: 3px;
height: 3px;
background-color: grey;
border-radius: 50%;
margin-bottom: auto;
}*/
}
.field-separation {
/*
height: 0.1em;
color: darkgrey;
background-image: linear-gradient(to right, grey 10%, rgba(255, 255, 255, 0) 0%);
background-position: top;
background-size: 0.5em 0.1em;
background-repeat: repeat-x;
*/
}
.field-layout.detail textarea.form-control:disabled,