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

MOBILE-3651 quiz: Fix question styles and icons

main
Pau Ferrer Ocaña 2021-02-23 12:21:12 +01:00 committed by Dani Palou
parent 7d00aefdd9
commit 9eac6e4350
5 changed files with 91 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/addons/qtype/calculated/component/addon-qtype-calculated.html
View File

@ -15,24 +15,24 @@
<ion-item *ngIf="calcQuestion.input" class="ion-text-wrap core-{{calcQuestion.input.correctIconColor}}-item">
<ion-label position="stacked">{{ 'addon.mod_quiz.answercolon' | translate }}</ion-label>
<!-- Display unit select before the answer input. -->
<ng-container *ngIf="calcQuestion.select && calcQuestion.selectFirst">
<ng-container *ngTemplateOutlet="selectUnits"></ng-container>
</ng-container>
<div class="flex-row">
<!-- Display unit select before the answer input. -->
<ng-container *ngIf="calcQuestion.select && calcQuestion.selectFirst">
<ng-container *ngTemplateOutlet="selectUnits"></ng-container>
</ng-container>
<!-- Input to enter the answer. -->
<!-- Input to enter the answer. -->
<ion-input type="text" [attr.name]="calcQuestion.input.name"
[placeholder]="calcQuestion.input.readOnly ? '' : 'core.question.answer' | translate"
[value]="calcQuestion.input.value" [disabled]="calcQuestion.input.readOnly" autocorrect="off"
[slot]="calcQuestion.select && calcQuestion.selectFirst ? 'end' : 'start'">
[value]="calcQuestion.input.value" [disabled]="calcQuestion.input.readOnly" autocorrect="off">
</ion-input>
<!-- Display unit select after the answer input. -->
<ng-container *ngIf="calcQuestion.select && !calcQuestion.selectFirst">
<ng-container *ngTemplateOutlet="selectUnits"></ng-container>
</ng-container>
<ion-icon *ngIf="calcQuestion.input.correctIcon" class="core-correct-icon" slot="end"
<!-- Display unit select after the answer input. -->
<ng-container *ngIf="calcQuestion.select && !calcQuestion.selectFirst">
<ng-container *ngTemplateOutlet="selectUnits"></ng-container>
</ng-container>
</div>
<ion-icon *ngIf="calcQuestion.input.correctIcon" class="core-correct-icon ion-align-self-center" slot="end"
[name]="calcQuestion.input.correctIcon" [color]="[calcQuestion.input.correctIconColor]">
</ion-icon>
</ion-item>
@ -45,18 +45,16 @@
<!-- Template for units entered using a select. -->
<ng-template #selectUnits>
<!-- <ion-col> -->
<label *ngIf="calcQuestion!.select!.accessibilityLabel" class="accesshide" for="{{calcQuestion!.select!.id}}">
{{ calcQuestion!.select!.accessibilityLabel }}
</label>
<ion-select id="{{calcQuestion!.select!.id}}" [name]="calcQuestion!.select!.name"
[(ngModel)]="calcQuestion!.select!.selected" interface="action-sheet" [disabled]="calcQuestion!.select!.disabled"
[slot]="calcQuestion?.selectFirst ? 'start' : 'end'">
<ion-select-option *ngFor="let option of calcQuestion!.select!.options" [value]="option.value">
{{option.label}}
</ion-select-option>
</ion-select>
<!-- </ion-col> -->
<label *ngIf="calcQuestion!.select!.accessibilityLabel" class="accesshide" for="{{calcQuestion!.select!.id}}">
{{ calcQuestion!.select!.accessibilityLabel }}
</label>
<ion-select id="{{calcQuestion!.select!.id}}" [name]="calcQuestion!.select!.name"
[(ngModel)]="calcQuestion!.select!.selected" interface="action-sheet" [disabled]="calcQuestion!.select!.disabled"
[slot]="calcQuestion?.selectFirst ? 'start' : 'end'">
<ion-select-option *ngFor="let option of calcQuestion!.select!.options" [value]="option.value">
{{option.label}}
</ion-select-option>
</ion-select>
</ng-template>
<!-- Template for units entered using radio buttons. -->

6
src/core/components/local-file/core-local-file.html
View File

@ -1,6 +1,8 @@
<form (ngSubmit)="changeName(newFileName, $event)" #nameForm>
<ion-item class="ion-text-wrap item-media" (click)="fileClicked($event)"> <!-- [class.item-input]="editMode" -->
<img [src]="fileIcon" alt="{{fileExtension}}" role="presentation" slot="start" />
<ion-item class="ion-text-wrap item-file" (click)="fileClicked($event)"> <!-- [class.item-input]="editMode" -->
<ion-thumbnail slot="start">
<img [src]="fileIcon" alt="{{fileExtension}}" role="presentation" />
</ion-thumbnail>
<ion-label>
<!-- File name and edit button (if editable). -->

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

@ -1,3 +1,20 @@
@import "~theme/globals";
:host {
--placeholder-color: var(--gray-light);
--toobar-background: var(--white);
--button-color: var(--ion-text-color);
--button-active-color: var(--gray);
}
:host-context(body.dark) {
--background: var(--gray-darker);
--color: var(--white);
--button-color: var(--gray-light);
--button-active-color: var(--gray-dark);
--placeholder-color: var(--gray);
--toobar-background: var(--black);
}
:host {
height: 40vh;
overflow: hidden;
@ -6,9 +23,7 @@
width: 100%;
display: flex;
flex-direction: column;
// @include darkmode() {
// background-color: $gray-darker;
// }
background: var(--background);
.core-rte-editor-container {
max-height: calc(100% - 46px);
@ -22,7 +37,7 @@
.core-rte-info-message {
padding: 5px;
border-top: 1px solid var(--ion-color-secondary);
background: white;
background: var(--background);
flex-shrink: 1;
font-size: 1.4rem;
@ -37,36 +52,30 @@
margin: 2px;
width: 100%;
resize: none;
background-color: white;
background-color: var(--background);
color: var(--color);
flex-grow: 1;
// @include darkmode() {
// background-color: var(--gray-darker);
// color: var(--white);
// }
}
.core-rte-editor {
flex-grow: 1;
flex-shrink: 1;
-webkit-user-select: auto !important;
user-select: auto !important;
word-wrap: break-word;
overflow-x: hidden;
overflow-y: auto;
cursor: text;
img {
// @include padding(null, null, null, 2px);
@include padding(null, null, null, 2px);
max-width: 95%;
width: auto;
}
&:empty:before {
content: attr(data-placeholder-text);
display: block;
color: var(--gray-light);
color: var(--placeholder-color);
font-weight: bold;
// @include darkmode() {
// color: $gray;
// }
}
// Make empty elements selectable (to move the cursor).
@ -80,19 +89,15 @@
flex-shrink: 1;
position: relative;
textarea {
::ng-deep textarea {
margin: 0 !important;
padding: 0;
height: 100% !important;
width: 100% !important;
resize: none;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}
@ -102,12 +107,8 @@
z-index: 1;
flex-grow: 0;
flex-shrink: 0;
background-color: var(--white);
// @include darkmode() {
// background-color: $black;
// }
// @include padding(5px, null);
background-color: var(--toobar-background);
padding-top: 5px;
border-top: 1px solid var(--gray);
ion-slides {
@ -126,26 +127,18 @@
padding-left: 6px;
margin: 0 auto;
font-size: 18px;
background-color: var(--white);
background-color: var(--toobar-background);
border-radius: 4px;
// @include core-transition(background-color, 200ms);
color: var(--ion-text-color);
@include core-transition(background-color, 200ms);
color: var(--button-color);
cursor: pointer;
// @include darkmode() {
// background-color: $black;
// color: $core-dark-text-color;
// }
&.toolbar-button-enable {
width: 100%;
}
&:active, &[aria-pressed="true"] {
background-color: var(--gray);
// @include darkmode() {
// background-color: $gray-dark;
// }
background-color: var(--button-active-color);
}
&.toolbar-arrow {
@ -153,13 +146,10 @@
flex-grow: 0;
flex-shrink: 0;
opacity: 1;
// @include core-transition(opacity, 200ms);
@include core-transition(opacity, 200ms);
&:active {
background-color: var(--white);
// @include darkmode() {
// background-color: $black;
// }
background-color: var(--toobar-background);
}
&.toolbar-arrow-hidden {
@ -178,4 +168,4 @@
:host-context(.keyboard-is-open) {
min-height: 200px;
}
}

36
src/core/features/question/services/question-helper.ts
View File

@ -769,22 +769,36 @@ export class CoreQuestionHelperProvider {
* @param element DOM element.
*/
treatCorrectnessIcons(element: HTMLElement): void {
const icons = <HTMLImageElement[]> Array.from(element.querySelectorAll('img.icon, img.questioncorrectnessicon'));
const icons = <HTMLElement[]> Array.from(element.querySelectorAll('img.icon, img.questioncorrectnessicon, i.icon'));
icons.forEach((icon) => {
// Replace the icon with the font version.
if (!icon.src) {
return;
let correct = false;
if ('src' in icon) {
if ((icon as HTMLImageElement).src.indexOf('correct') >= 0) {
correct = true;
} else if ((icon as HTMLImageElement).src.indexOf('incorrect') < 0 ) {
return;
}
} else {
const classList = icon.classList.toString();
if (classList.indexOf('fa-check') >= 0) {
correct = true;
} else if (classList.indexOf('fa-remove') < 0) {
return;
}
}
// @todo: Check the right classes to use.
const newIcon: HTMLElement = document.createElement('i');
// Replace the icon with the font version.
const newIcon: HTMLElement = document.createElement('ion-icon');
if (icon.src.indexOf('incorrect') > -1) {
newIcon.className = 'icon fa fa-remove text-danger fa-fw questioncorrectnessicon';
} else if (icon.src.indexOf('correct') > -1) {
newIcon.className = 'icon fa fa-check text-success fa-fw questioncorrectnessicon';
if (correct) {
newIcon.setAttribute('name', 'fas-check');
newIcon.setAttribute('src', 'assets/fonts/font-awesome/solid/check.svg');
newIcon.className = 'core-correct-icon ion-color ion-color-success questioncorrectnessicon';
} else {
return;
newIcon.setAttribute('name', 'fas-times');
newIcon.setAttribute('src', 'assets/fonts/font-awesome/solid/times.svg');
newIcon.className = 'core-correct-icon ion-color ion-color-danger questioncorrectnessicon';
}
newIcon.title = icon.title;

5
src/theme/theme.base.scss
View File

@ -28,6 +28,11 @@
text-transform: none;
}
.flex-row {
display: flex;
flex-direction: row;
}
// Correctly inherit ion-text-wrap onto labels.
ion-item.ion-text-wrap ion-label {
white-space: normal !important;