mirror of
https://github.com/SuiteCRM/SuiteCRM-Core.git
synced 2025-08-30 02:52:22 +08:00
Update field-layout display for new UI
This commit is contained in:
Clemente Raposo
Jack Anderson
parent
c914da2400
commit
c2bf11785e
2 changed files with 121 additions and 40 deletions
|
|
@ -26,50 +26,53 @@
|
||||||
*/
|
*/
|
||||||
-->
|
-->
|
||||||
<form class="field-layout {{config.mode}}">
|
<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"
|
<div *ngFor="let col of row.cols; index as colNumber"
|
||||||
[class.field-column-bordered]="row.cols.length > 1 && colNumber < row.cols.length - 1"
|
[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'">
|
<ng-container *ngIf="col.field && col.field.display !== 'none'">
|
||||||
<div class="label-container">
|
<div class="field-layout-field-group-wrapper form-group row">
|
||||||
<strong>
|
<div class="col-sm-3 field-layout-field-label-wrapper col-form-label label-container">
|
||||||
<label [ngClass]="labelClass">{{col.field.label | uppercase}}</label>:
|
<strong>
|
||||||
<ng-container
|
<ng-container
|
||||||
*ngIf="col.field.definition.required && (['edit', 'create'].includes(config.mode))">
|
*ngIf="col.field.definition.required && (['edit', 'create'].includes(config.mode))">
|
||||||
<span class="required">*</span>
|
<span class="required">*</span>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</strong>
|
<label [ngClass]="labelClass">{{col.field.label | uppercase}}</label>
|
||||||
</div>
|
</strong>
|
||||||
<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>
|
</div>
|
||||||
|
<div class="col-sm-9 d-flex flex-grow-1 field-layout-field-wrapper"
|
||||||
<ng-container *ngIf="col?.fieldActions && ((col?.fieldActions?.position ?? 'inline') === 'inline')">
|
[ngClass]="{ 'align-items-center': (col?.fieldActions && col?.fieldActions?.position === 'inline') }">
|
||||||
<div>
|
<div class="flex-grow-1 text-break field-layout-field-value-wrapper">
|
||||||
<scrm-action-group-menu
|
<scrm-field [type]="col.field.type"
|
||||||
[config]="col.adaptor"
|
[mode]="config.mode"
|
||||||
[buttonGroupClass] = "col.fieldActions?.containerKlass ?? ''"
|
[klass]="inputClass"
|
||||||
[klass] = "col.fieldActions?.klass ?? ''"
|
[field]="col.field"
|
||||||
>
|
[record]="record">
|
||||||
</scrm-action-group-menu>
|
</scrm-field>
|
||||||
</div>
|
</div>
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
<div>
|
<ng-container *ngIf="col?.fieldActions && ((col?.fieldActions?.position ?? 'inline') === 'inline')">
|
||||||
<button type="button" class="record-action-button"
|
<div>
|
||||||
(click)="this.dataSource.getEditAction()"
|
<scrm-action-group-menu
|
||||||
*ngIf="col.field.definition.inline_edit !== false && !col.field.readonly && !col.field.definition.readonly && this.dataSource.inlineEdit && config.mode === 'detail'">
|
[config]="col.adaptor"
|
||||||
<scrm-image class="sicon" image="pencil"></scrm-image>
|
[buttonGroupClass] = "col.fieldActions?.containerKlass ?? ''"
|
||||||
</button>
|
[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>
|
||||||
</div>
|
</div>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
|
||||||
|
|
@ -24,22 +24,100 @@
|
||||||
* the words "Supercharged by SuiteCRM".
|
* the words "Supercharged by SuiteCRM".
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.field-layout .label-container,
|
|
||||||
.field-layout .label-container label {
|
.field-layout.edit {
|
||||||
color: $midnight-blue;
|
.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 {
|
.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 {
|
.field-separation {
|
||||||
|
/*
|
||||||
height: 0.1em;
|
height: 0.1em;
|
||||||
color: darkgrey;
|
color: darkgrey;
|
||||||
background-image: linear-gradient(to right, grey 10%, rgba(255, 255, 255, 0) 0%);
|
background-image: linear-gradient(to right, grey 10%, rgba(255, 255, 255, 0) 0%);
|
||||||
background-position: top;
|
background-position: top;
|
||||||
background-size: 0.5em 0.1em;
|
background-size: 0.5em 0.1em;
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
|
*/
|
||||||
}
|
}
|
||||||
|
|
||||||
.field-layout.detail textarea.form-control:disabled,
|
.field-layout.detail textarea.form-control:disabled,
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue
