EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-4470 data: Fix database input styles

main
Pau Ferrer Ocaña 2024-05-08 10:54:52 +02:00
parent d0e0ef86b6
commit cacc36d336
10 changed files with 42 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/addons/mod/data/data-forms.scss
View File

@ -2,9 +2,6 @@
// Edit and search modal.
:host {
--input-border-color: var(--stroke);
--input-border-width: 1px;
--select-border-width: 0px;
::ng-deep {
table {
@ -13,16 +10,6 @@
td {
vertical-align: top;
}
.addon-data-latlong {
display: flex;
.input-units {
flex-grow: 1;
white-space: nowrap;
align-self: center;
}
}
}
.addon-data-advanced-search {
@ -35,66 +22,15 @@
background-color: var(--ion-item-background);
::ng-deep {
ion-input {
border-bottom: var(--input-border-width) solid var(--input-border-color);
&.has-focus,
&.has-focus.ion-valid,
&.ion-touched.ion-invalid {
--input-border-width: 2px;
.has-errors {
.input-highlight,
.select-highlight,
.textarea-highlight {
transform: scale(1);
}
&.has-focus {
--input-border-color: var(--primary);
core-rich-text-editor.ion-touched.ng-invalid {
--stroke: var(--danger);
}
&.has-focus.ion-valid {
--input-border-color: var(--success);
}
&.ion-touched.ion-invalid {
--input-border-color: var(--danger);
}
}
core-rich-text-editor {
border-bottom: var(--select-border-width) solid var(--input-border-color);
&.ion-touched.ng-valid,
&.ion-touched.ng-invalid {
--select-border-width: 2px;
}
&.ion-touched.ng-valid {
--input-border-color: var(--success);
}
&.ion-touched.ng-invalid {
--input-border-color: var(--danger);
}
}
ion-select {
border-bottom: var(--select-border-width) solid var(--input-border-color);
&.ion-touched.ion-valid,
&.ion-touched.ion-invalid {
--select-border-width: 2px;
}
&.ion-touched.ion-valid {
--input-border-color: var(--success);
}
&.ion-touched.ion-invalid {
--input-border-color: var(--danger);
}
}
.has-errors ion-input.ion-invalid {
--input-border-width: 2px;
--input-border-color: var(--danger);
}
.has-errors ion-select.ion-invalid,
.has-errors core-rich-text-editor.ng-invalid {
--select-border-width: 2px;
--input-border-color: var(--danger);
}
.core-mark-required {

2
src/addons/mod/data/data.scss
View File

@ -55,7 +55,7 @@ $grid-column-paddings: (
}
// Do not let block elements to define widths or heights.
address, article, aside, blockquote, canvas, dd, div, dl, dt, fieldset, figcaption, figure, footer, form,
address, article, aside, blockquote, canvas, dd, dl, dt, fieldset, figcaption, figure, footer, form,
h1, h2, h3, h4, h5, h6,
header, li, main, nav, noscript, ol, p, pre, section, table, tfoot, ul, video {
width: auto !important;

11
src/addons/mod/data/fields/file/component/addon-mod-data-field-file.html
View File

@ -1,13 +1,12 @@
<span *ngIf="editMode && form">
<span [core-mark-required]="field.required" class="core-mark-required"></span>
<ng-container *ngIf="editMode && form">
<core-attachments [files]="files" [maxSize]="maxSizeBytes" maxSubmissions="1" [component]="component" [componentId]="componentId"
[allowOffline]="true" [courseId]="database?.course" />
[allowOffline]="true" [courseId]="database?.course" [required]="field.required" />
<core-input-errors *ngIf="error" [errorText]="error" />
</span>
</ng-container>
<span *ngIf="searchMode && form" [formGroup]="form">
<ng-container *ngIf="searchMode && form" [formGroup]="form">
<ion-input type="text" [formControlName]="'f_'+field.id" [placeholder]="field.name" />
</span>
</ng-container>
<ng-container *ngIf="displayMode">
<div>

14
src/addons/mod/data/fields/latlong/component/addon-mod-data-field-latlong.html
View File

@ -3,13 +3,15 @@
<ng-container *ngIf="editMode">
<span [core-mark-required]="field.required" class="core-mark-required"></span>
<div class="addon-data-latlong flex-row">
<ion-input type="text" [formControlName]="'f_'+field.id+'_0'" maxlength="10" />
<div class="input-units">°N</div>
<div class="addon-data-latlong">
<ion-input type="text" [formControlName]="'f_'+field.id+'_0'" maxlength="10" placeholder="0.0">
<div class="input-units" slot="end">°N</div>
</ion-input>
</div>
<div class="addon-data-latlong flex-row">
<ion-input type="text" [formControlName]="'f_'+field.id+'_1'" maxlength="10" />
<div class="input-units">°E</div>
<div class="addon-data-latlong">
<ion-input type="text" [formControlName]="'f_'+field.id+'_1'" maxlength="10" placeholder="0.0">
<div class="input-units" slot="end">°E</div>
</ion-input>
</div>
<div class="addon-data-latlong" *ngIf="locationServicesEnabled">
<ion-button (click)="getLocation($event)">

2
src/addons/mod/data/fields/menu/component/addon-mod-data-field-menu.html
View File

@ -2,7 +2,7 @@
<span *ngIf="editMode" [core-mark-required]="field.required" class="core-mark-required"></span>
<ion-select [formControlName]="'f_'+field.id" [placeholder]="'addon.mod_data.menuchoose' | translate"
[cancelText]="'core.cancel' | translate" [interfaceOptions]="{header: field.name}" interface="action-sheet">
<ion-select-option value="">{{ 'addon.mod_data.menuchoose' | translate }}</ion-select-option>
<ion-select-option *ngIf="!editMode || !field.required" value="">{{ 'addon.mod_data.menuchoose' | translate }}</ion-select-option>
<ion-select-option *ngFor="let option of options" [value]="option">
<core-format-text [text]="option" contextLevel="module" [contextInstanceId]="database?.coursemodule"
[courseId]="database?.course" [wsNotFiltered]="true" />

1
src/addons/mod/data/fields/menu/component/menu.ts
View File

@ -35,6 +35,7 @@ export class AddonModDataFieldMenuComponent extends AddonModDataFieldPluginBaseC
}
this.options = this.field.param1.split('\n');
this.options = this.options.filter((option) => option !== '');
let val: string | undefined;
if (this.editMode && this.value) {

11
src/addons/mod/data/fields/picture/component/addon-mod-data-field-picture.html
View File

@ -1,16 +1,15 @@
<span *ngIf="editMode && form" [formGroup]="form">
<span [core-mark-required]="field.required" class="core-mark-required"></span>
<ng-container *ngIf="editMode && form" [formGroup]="form">
<core-attachments [files]="files" [maxSize]="maxSizeBytes" maxSubmissions="1" [component]="component" [componentId]="componentId"
[allowOffline]="true" acceptedTypes="image" [courseId]="database?.course" />
[allowOffline]="true" acceptedTypes="image" [courseId]="database?.course" [required]="field.required" />
<core-input-errors *ngIf="error" [errorText]="error" />
<ion-input [label]="'addon.mod_data.alttext' | translate" labelPlacement="stacked" type="text"
[formControlName]="'f_'+field.id+'_alttext'" [placeholder]=" 'addon.mod_data.alttext' | translate" />
</span>
</ng-container>
<span *ngIf="searchMode && form" [formGroup]="form">
<ng-container *ngIf="searchMode && form" [formGroup]="form">
<ion-input type="text" [formControlName]="'f_'+field.id" [placeholder]="field.name" />
</span>
</ng-container>
<button class="as-link" *ngIf="listMode && imageUrl" (click)="navigateEntry()">
<img [src]="imageUrl" [alt]="title" class="core-media-adapt-width listMode_picture" core-external-content />

2
src/addons/mod/data/fields/radiobutton/component/addon-mod-data-field-radiobutton.html
View File

@ -3,7 +3,7 @@
<ion-select [formControlName]="'f_'+field.id" [placeholder]="'addon.mod_data.menuchoose' | translate"
[cancelText]="'core.cancel' | translate" [okText]="'core.ok' | translate" [interfaceOptions]="{header: field.name}"
interface="alert">
<ion-select-option value="">{{ 'addon.mod_data.menuchoose' | translate }}</ion-select-option>
<ion-select-option *ngIf="!editMode || !field.required" value="">{{ 'addon.mod_data.menuchoose' | translate }}</ion-select-option>
<ion-select-option *ngFor="let option of options" [value]="option">
<core-format-text [text]="option" contextLevel="module" [contextInstanceId]="database?.coursemodule"
[courseId]="database?.course" [wsNotFiltered]="true" />

1
src/addons/mod/data/fields/radiobutton/component/radiobutton.ts
View File

@ -35,6 +35,7 @@ export class AddonModDataFieldRadiobuttonComponent extends AddonModDataFieldPlug
}
this.options = this.field.param1.split('\n');
this.options = this.options.filter((option) => option !== '');
let val: string | undefined;
if (this.editMode && this.value) {

18
src/core/features/editor/components/rich-text-editor/rich-text-editor.scss
View File

@ -98,16 +98,18 @@
.core-textarea {
position: relative;
--highlight-color: transparent !important;
::ng-deep textarea {
margin: 0 !important;
padding: 0;
margin: 0px !important;
padding: 0px;
resize: none;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
height: auto;
top: 0;
bottom: 0;
top: 0px;
bottom: 0px;
}
}
@ -180,6 +182,10 @@
min-height: 200px;
}
:host-context(.item-label-stacked) {
margin-top: 10px;
:host-context(.item) {
margin-bottom: 12px;
}
:host-context(.item-label-stacked) {
margin-top: 12px;
}