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. // Edit and search modal.
:host { :host {
--input-border-color: var(--stroke);
--input-border-width: 1px;
--select-border-width: 0px;
::ng-deep { ::ng-deep {
table { table {
@ -13,16 +10,6 @@
td { td {
vertical-align: top; vertical-align: top;
} }
.addon-data-latlong {
display: flex;
.input-units {
flex-grow: 1;
white-space: nowrap;
align-self: center;
}
}
} }
.addon-data-advanced-search { .addon-data-advanced-search {
@ -35,66 +22,15 @@
background-color: var(--ion-item-background); background-color: var(--ion-item-background);
::ng-deep { ::ng-deep {
.has-errors {
ion-input { .input-highlight,
border-bottom: var(--input-border-width) solid var(--input-border-color); .select-highlight,
&.has-focus, .textarea-highlight {
&.has-focus.ion-valid, transform: scale(1);
&.ion-touched.ion-invalid {
--input-border-width: 2px;
} }
core-rich-text-editor.ion-touched.ng-invalid {
&.has-focus { --stroke: var(--danger);
--input-border-color: var(--primary);
} }
&.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 { .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. // 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, h1, h2, h3, h4, h5, h6,
header, li, main, nav, noscript, ol, p, pre, section, table, tfoot, ul, video { header, li, main, nav, noscript, ol, p, pre, section, table, tfoot, ul, video {
width: auto !important; 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"> <ng-container *ngIf="editMode && form">
<span [core-mark-required]="field.required" class="core-mark-required"></span>
<core-attachments [files]="files" [maxSize]="maxSizeBytes" maxSubmissions="1" [component]="component" [componentId]="componentId" <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" /> <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" /> <ion-input type="text" [formControlName]="'f_'+field.id" [placeholder]="field.name" />
</span> </ng-container>
<ng-container *ngIf="displayMode"> <ng-container *ngIf="displayMode">
<div> <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"> <ng-container *ngIf="editMode">
<span [core-mark-required]="field.required" class="core-mark-required"></span> <span [core-mark-required]="field.required" class="core-mark-required"></span>
<div class="addon-data-latlong flex-row"> <div class="addon-data-latlong">
<ion-input type="text" [formControlName]="'f_'+field.id+'_0'" maxlength="10" /> <ion-input type="text" [formControlName]="'f_'+field.id+'_0'" maxlength="10" placeholder="0.0">
<div class="input-units">°N</div> <div class="input-units" slot="end">°N</div>
</ion-input>
</div> </div>
<div class="addon-data-latlong flex-row"> <div class="addon-data-latlong">
<ion-input type="text" [formControlName]="'f_'+field.id+'_1'" maxlength="10" /> <ion-input type="text" [formControlName]="'f_'+field.id+'_1'" maxlength="10" placeholder="0.0">
<div class="input-units">°E</div> <div class="input-units" slot="end">°E</div>
</ion-input>
</div> </div>
<div class="addon-data-latlong" *ngIf="locationServicesEnabled"> <div class="addon-data-latlong" *ngIf="locationServicesEnabled">
<ion-button (click)="getLocation($event)"> <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> <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" <ion-select [formControlName]="'f_'+field.id" [placeholder]="'addon.mod_data.menuchoose' | translate"
[cancelText]="'core.cancel' | translate" [interfaceOptions]="{header: field.name}" interface="action-sheet"> [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"> <ion-select-option *ngFor="let option of options" [value]="option">
<core-format-text [text]="option" contextLevel="module" [contextInstanceId]="database?.coursemodule" <core-format-text [text]="option" contextLevel="module" [contextInstanceId]="database?.coursemodule"
[courseId]="database?.course" [wsNotFiltered]="true" /> [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.field.param1.split('\n');
this.options = this.options.filter((option) => option !== '');
let val: string | undefined; let val: string | undefined;
if (this.editMode && this.value) { 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"> <ng-container *ngIf="editMode && form" [formGroup]="form">
<span [core-mark-required]="field.required" class="core-mark-required"></span>
<core-attachments [files]="files" [maxSize]="maxSizeBytes" maxSubmissions="1" [component]="component" [componentId]="componentId" <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" /> <core-input-errors *ngIf="error" [errorText]="error" />
<ion-input [label]="'addon.mod_data.alttext' | translate" labelPlacement="stacked" type="text" <ion-input [label]="'addon.mod_data.alttext' | translate" labelPlacement="stacked" type="text"
[formControlName]="'f_'+field.id+'_alttext'" [placeholder]=" 'addon.mod_data.alttext' | translate" /> [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" /> <ion-input type="text" [formControlName]="'f_'+field.id" [placeholder]="field.name" />
</span> </ng-container>
<button class="as-link" *ngIf="listMode && imageUrl" (click)="navigateEntry()"> <button class="as-link" *ngIf="listMode && imageUrl" (click)="navigateEntry()">
<img [src]="imageUrl" [alt]="title" class="core-media-adapt-width listMode_picture" core-external-content /> <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" <ion-select [formControlName]="'f_'+field.id" [placeholder]="'addon.mod_data.menuchoose' | translate"
[cancelText]="'core.cancel' | translate" [okText]="'core.ok' | translate" [interfaceOptions]="{header: field.name}" [cancelText]="'core.cancel' | translate" [okText]="'core.ok' | translate" [interfaceOptions]="{header: field.name}"
interface="alert"> 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"> <ion-select-option *ngFor="let option of options" [value]="option">
<core-format-text [text]="option" contextLevel="module" [contextInstanceId]="database?.coursemodule" <core-format-text [text]="option" contextLevel="module" [contextInstanceId]="database?.coursemodule"
[courseId]="database?.course" [wsNotFiltered]="true" /> [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.field.param1.split('\n');
this.options = this.options.filter((option) => option !== '');
let val: string | undefined; let val: string | undefined;
if (this.editMode && this.value) { 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 { .core-textarea {
position: relative; position: relative;
--highlight-color: transparent !important;
::ng-deep textarea { ::ng-deep textarea {
margin: 0 !important; margin: 0px !important;
padding: 0; padding: 0px;
resize: none; resize: none;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
position: absolute; position: absolute;
height: auto; height: auto;
top: 0; top: 0px;
bottom: 0; bottom: 0px;
} }
} }
@ -180,6 +182,10 @@
min-height: 200px; min-height: 200px;
} }
:host-context(.item-label-stacked) { :host-context(.item) {
margin-top: 10px; margin-bottom: 12px;
}
:host-context(.item-label-stacked) {
margin-top: 12px;
} }