Merge pull request #2799 from crazyserver/MOBILE-3320

Mobile 3320
main
Dani Palou 2021-05-31 09:52:54 +02:00 committed by GitHub
commit 47251bdc73
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
62 changed files with 408 additions and 369 deletions

View File

@ -3,7 +3,7 @@
<h2>{{ 'addon.block_activitymodules.pluginname' | translate }}</h2>
</ion-label>
</ion-item-divider>
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded" [fullscreen]="false">
<ion-item class="ion-text-wrap item-media" *ngFor="let entry of entries" detail="false" button
(click)="gotoCoureListModType(entry)">
<img slot="start" [src]="entry.icon" alt="" role="presentation" class="core-module-icon">

View File

@ -36,7 +36,7 @@
</core-context-menu-item>
</core-context-menu>
</ion-item-divider>
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded" [fullscreen]="false">
<div class="safe-padding-horizontal" [hidden]="showFilter || !showSelectorFilter">
<!-- "Time" selector. -->
<core-combobox [label]="'core.show' | translate" [selection]="selectedFilter" (onChange)="selectedChanged($event)">

View File

@ -20,7 +20,7 @@
</core-horizontal-scroll-controls>
</div>
</ion-item-divider>
<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
<core-loading [hideUntil]="loaded" [fullscreen]="false" class="safe-area-page">
<core-empty-box *ngIf="courses.length == 0" image="assets/img/icons/courses.svg" inline="true"
[message]="'addon.block_recentlyaccessedcourses.nocourses' | translate"></core-empty-box>
<!-- List of courses. -->

View File

@ -5,7 +5,7 @@
</core-horizontal-scroll-controls>
</div>
</ion-item-divider>
<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
<core-loading [hideUntil]="loaded" [fullscreen]="false" class="safe-area-page">
<div
[id]="scrollElementId"
[hidden]="!items || items.length === 0"

View File

@ -3,7 +3,7 @@
<h2>{{ 'addon.block_sitemainmenu.pluginname' | translate }}</h2>
</ion-label>
</ion-item-divider>
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded" [fullscreen]="false">
<ng-container *ngIf="mainMenuBlock">
<ion-item class="ion-text-wrap" *ngIf="mainMenuBlock.summary">
<ion-label>

View File

@ -20,7 +20,7 @@
</core-horizontal-scroll-controls>
</div>
</ion-item-divider>
<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
<core-loading [hideUntil]="loaded" [fullscreen]="false" class="safe-area-page">
<core-empty-box *ngIf="courses.length == 0" image="assets/img/icons/courses.svg" inline="true"
[message]="'addon.block_starredcourses.nocourses' | translate"></core-empty-box>
<!-- List of courses. -->

View File

@ -9,7 +9,7 @@
</core-context-menu-item>
</core-context-menu>
</ion-item-divider>
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded" [fullscreen]="false">
<div class="safe-padding-horizontal">
<core-combobox [selection]="filter" (onChange)="switchFilter($event)">
<ion-select-option class="ion-text-wrap" value="all">
@ -35,12 +35,12 @@
</ion-select-option>
</core-combobox>
</div>
<core-loading [hideUntil]="timeline.loaded" [hidden]="sort != 'sortbydates'" class="core-loading-center">
<core-loading [hideUntil]="timeline.loaded" [hidden]="sort != 'sortbydates'" [fullscreen]="false">
<addon-block-timeline-events [events]="timeline.events" showCourse="true" [canLoadMore]="timeline.canLoadMore"
(loadMore)="loadMoreTimeline()" [from]="dataFrom" [to]="dataTo"></addon-block-timeline-events>
</core-loading>
<core-loading [hideUntil]="timelineCourses.loaded" [hidden]="sort != 'sortbycourses'"
class="core-loading-center safe-area-page">
[fullscreen]="false" class="safe-area-page">
<ion-grid class="ion-no-padding">
<ion-row class="ion-no-padding">
<ion-col *ngFor="let course of timelineCourses.courses" class="ion-no-padding" size="12" size-md="6">

View File

@ -11,7 +11,7 @@
<ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refresh($event.target)">
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
</ion-refresher>
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded">
<ion-item *ngIf="showMyEntriesToggle">
<ion-label>{{ 'addon.blog.showonlyyourentries' | translate }}</ion-label>
<ion-toggle [(ngModel)]="onlyMyEntries" (ionChange)="onlyMyEntriesToggleChanged(onlyMyEntries)"></ion-toggle>

View File

@ -8,7 +8,7 @@
</core-context-menu>
</core-navbar-buttons>
<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
<core-loading [hideUntil]="loaded" class="safe-area-page">
<!-- Period name and arrows to navigate. -->
<ion-grid class="ion-no-padding addon-calendar-navigation">
<ion-row class="ion-align-items-center">

View File

@ -1,4 +1,4 @@
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded">
<core-empty-box *ngIf="!filteredEvents || !filteredEvents.length" icon="fas-calendar" [message]="'addon.calendar.noevents' | translate">
</core-empty-box>

View File

@ -24,7 +24,7 @@
<ion-refresher slot="fixed" [disabled]="!confirmedLoaded" (ionRefresh)="refreshData($event.target)">
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
</ion-refresher>
<core-loading [hideUntil]="confirmedLoaded" class="core-loading-center">
<core-loading [hideUntil]="confirmedLoaded">
<ion-list class="ion-no-margin">
<ion-item class="ion-text-wrap addon-messages-conversation-item" (click)="selectUser(contact.id)" button
*ngFor="let contact of confirmedContacts" [attr.aria-label]="contact.fullname" detail="true"
@ -62,7 +62,7 @@
<ion-refresher slot="fixed" [disabled]="!requestsLoaded" (ionRefresh)="refreshData($event.target)">
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
</ion-refresher>
<core-loading [hideUntil]="requestsLoaded" class="core-loading-center">
<core-loading [hideUntil]="requestsLoaded">
<ion-list class="ion-no-margin">
<ion-item class="ion-text-wrap addon-messages-conversation-item" *ngFor="let request of requests"
[attr.aria-label]="request.fullname" (click)="selectUser(request.id)" button

View File

@ -28,7 +28,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

View File

@ -1,4 +1,4 @@
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded" [fullscreen]="false">
<!-- User and status of the submission. -->
<ion-item class="ion-text-wrap" *ngIf="!blindMarking && user" core-user-link [userId]="submitId" [courseId]="courseId"

View File

@ -21,7 +21,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

View File

@ -24,7 +24,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
<core-loading [hideUntil]="loaded" class="safe-area-page">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

View File

@ -26,7 +26,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

View File

@ -37,7 +37,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

View File

@ -26,7 +26,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

View File

@ -23,7 +23,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

View File

@ -41,7 +41,7 @@
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
</ion-refresher>
<core-loading [hideUntil]="discussions.loaded" class="core-loading-center">
<core-loading [hideUntil]="discussions.loaded">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"
(completionChanged)="onCompletionChange()">

View File

@ -667,6 +667,9 @@ export class AddonModForumIndexComponent extends CoreCourseModuleMainActivityCom
* @param discussion Discussion.
*/
async showOptionsMenu(event: Event, discussion: AddonModForumDiscussion): Promise<void> {
event.preventDefault();
event.stopPropagation();
const popoverData = await CoreDomUtils.openPopover<{ action?: string; value: boolean }>({
component: AddonModForumDiscussionOptionsMenuComponent,
componentProps: {

View File

@ -1,4 +1,4 @@
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded" [fullscreen]="false">
<ion-item class="ion-text-wrap" (click)="editPost()" *ngIf="offlinePost || (canEdit && isOnline)">
<ion-icon name="fas-pen" slot="start" aria-hidden="true"></ion-icon>
<ion-label>

View File

@ -93,9 +93,9 @@
<ion-button fill="clear" size="small"
[attr.aria-controls]="'addon-forum-reply-edit-form-' + uniqueId"
[attr.aria-expanded]="replyData.replyingTo === post.id"
(click)="showReplyForm()">
<ion-icon name="fa-reply" slot="start" aria-hidden="true">
</ion-icon> {{ 'addon.mod_forum.reply' | translate }}
(click)="showReplyForm($event)">
<ion-icon name="fa-reply" slot="start" aria-hidden="true"></ion-icon>
{{ 'addon.mod_forum.reply' | translate }}
</ion-button>
</ion-label>
</ion-item>

View File

@ -1,7 +1,7 @@
@import "~theme/globals";
:host .addon-mod_forum-post {
background-color: var(--white);
background-color: var(--ion-item-background);
border-bottom: 1px solid var(--addon-forum-border-color);
.addon-forum-star {
@ -21,6 +21,7 @@
margin-top: 8px;
margin-bottom: 8px;
font-weight: bold;
flex-grow: 1;
ion-icon {
@include margin(0, 6px, 0, 0);

View File

@ -306,8 +306,13 @@ export class AddonModForumPostComponent implements OnInit, OnDestroy, OnChanges
/**
* Set this post as being replied to.
*
* @param event Click event.
*/
async showReplyForm(): Promise<void> {
async showReplyForm(event: Event): Promise<void> {
event.preventDefault();
event.stopPropagation();
if (this.replyData.isEditing) {
// User is editing a post, data needs to be resetted. Ask confirm if there is unsaved data.
try {
@ -323,7 +328,7 @@ export class AddonModForumPostComponent implements OnInit, OnDestroy, OnChanges
);
});
}
} catch (error) {
} catch {
// Cancelled.
}

View File

@ -49,7 +49,7 @@
[autoFocus]="true" [lengthCheck]="2" (onClear)="toggleSearch()" searchArea="AddonModGlossary-{{module.id}}">
</core-search-box>
<core-loading [hideUntil]="entries.loaded" class="core-loading-center">
<core-loading [hideUntil]="entries.loaded">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"
(completionChanged)="onCompletionChange()">

View File

@ -30,7 +30,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
<core-loading [hideUntil]="loaded" class="safe-area-page">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

View File

@ -26,7 +26,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
<core-loading [hideUntil]="loaded" class="safe-area-page">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

View File

@ -26,7 +26,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded">
<core-tabs [hideUntil]="loaded" [selectedIndex]="selectedTab">
<!-- Index/Preview tab. -->
<core-tab [title]="'addon.mod_lesson.preview' | translate" (ionSelect)="indexSelected()">

View File

@ -17,7 +17,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
<core-loading [hideUntil]="loaded" class="safe-area-page">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

View File

@ -23,7 +23,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
<core-loading [hideUntil]="loaded" class="safe-area-page">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

View File

@ -26,7 +26,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

View File

@ -18,7 +18,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
<core-loading [hideUntil]="loaded" class="safe-area-page">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

View File

@ -26,7 +26,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

View File

@ -27,7 +27,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
<core-loading [hideUntil]="loaded" class="safe-area-page">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

View File

@ -13,7 +13,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

View File

@ -46,7 +46,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

View File

@ -26,7 +26,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

View File

@ -29,7 +29,7 @@
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
</ion-refresher>
<core-loading [hideUntil]="notesLoaded" class="core-loading-center">
<core-loading [hideUntil]="notesLoaded">
<ion-item class="ion-text-wrap" *ngIf="user">
<core-user-avatar [user]="user" [courseId]="courseId" slot="start" [linkProfile]="false"></core-user-avatar>
<ion-label><h2>{{user!.fullname}}</h2></ion-label>

View File

@ -1,4 +1,4 @@
<ion-list *ngIf="ddQuestion && (ddQuestion.text || ddQuestion.text === '')" class="addon-qtype-ddimageortext-container">
<div *ngIf="ddQuestion && (ddQuestion.text || ddQuestion.text === '')" class="addon-qtype-ddimageortext-container">
<!-- Content is outside the core-loading to let the script calculate drag items position -->
<core-loading [hideUntil]="ddQuestion.loaded"></core-loading>
@ -15,10 +15,13 @@
[contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"
(afterRender)="textRendered()">
</core-format-text>
</ion-label>
</ion-item>
<ion-item class="ion-text-wrap" [hidden]="!ddQuestion.loaded">
<ion-label>
<core-format-text *ngIf="ddQuestion.ddArea" [adaptImg]="false" [component]="component" [componentId]="componentId"
[text]="ddQuestion.ddArea" [filter]="false" (afterRender)="ddAreaRendered()">
</core-format-text>
</ion-label>
</ion-item>
</ion-list>
</div>

View File

@ -2,18 +2,29 @@
// Style ddimageortext content a bit. Almost all these styles are copied from Moodle.
:host {
.addon-qtype-ddimageortext-container {
min-height: 80px; // To display the loading.
}
--ddimageortext-border-drop: var(--gray-darker);
--ddimageortext-draghome-background: nth($core-dd-question-colors, 2);
}
.addon-qtype-ddimageortext-container {
min-height: 80px; // To display the loading.
}
core-format-text ::ng-deep {
div.ddarea {
text-align: center;
position: relative;
margin-top: 10px;
user-select: none;
core-format-text ::ng-deep {
.qtext {
margin-bottom: 0.5em;
display: block;
}
div.droparea img {
border: 1px solid var(--gray-darker);
border: 1px solid var(--core-dd-question-border);
max-width: 100%;
}
@ -27,9 +38,9 @@
}
div.draghome {
border: 1px solid var(--gray-darker);
border: 1px solid var(--core-dd-question-border);
cursor: pointer;
background-color: #B0C4DE;
background-color: var(--ddimageortext-draghome-background);
display: inline-block;
height: auto;
width: auto;
@ -39,37 +50,40 @@
@for $i from 0 to length($core-dd-question-colors) {
.group#{$i + 1} {
background: nth($core-dd-question-colors, $i + 1);
color: get_contrast_color(nth($core-dd-question-colors, $i + 1));
}
}
.group2 {
border-radius: 10px 0 0 0;
border-radius: var(--core-dd-question-radius) 0 0 0;
}
.group3 {
border-radius: 0 10px 0 0;
border-radius: 0 var(--core-dd-question-radius) 0 0;
}
.group4 {
border-radius: 0 0 10px 0;
border-radius: 0 0 var(--core-dd-question-radius) 0;
}
.group5 {
border-radius: 0 0 0 10px;
border-radius: 0 0 0 var(--core-dd-question-radius);
}
.group6 {
border-radius: 0 10px 10px 0;
border-radius: 0 var(--core-dd-question-radius) var(--core-dd-question-radius) 0;
}
.group7 {
border-radius: 10px 0 0 10px;
border-radius: var(--core-dd-question-radius) 0 0 var(--core-dd-question-radius);
}
.group8 {
border-radius: 10px 10px 10px 10px;
border-radius: var(--core-dd-question-radius) var(--core-dd-question-radius) var(--core-dd-question-radius) var(--core-dd-question-radius);
}
.drag {
border: 1px solid var(--gray-darker);
color: var(--ion-text-color);
border: 1px solid var(--core-dd-question-border);
cursor: pointer;
z-index: 2;
}
.drag.placed {
border: 1px solid var(--ddimageortext-border-drop);
}
.dragitems.readonly .drag {
cursor: auto;
}
@ -85,16 +99,11 @@
.drag img {
display: block;
}
div.ddarea {
text-align : center;
position: relative;
}
.dropbackground {
margin:0 auto;
}
.dropzone {
border: 1px solid var(--gray-darker);
border: 1px solid var(--ddimageortext-border-drop);
position: absolute;
z-index: 1;
cursor: pointer;
@ -104,7 +113,7 @@
}
div.dragitems div.draghome, div.dragitems div.drag {
font:13px/1.231 arial,helvetica,clean,sans-serif;
font: 13px/1.231 arial, helvetica, clean, sans-serif;
}
.drag.beingdragged {
z-index: 3;

View File

@ -1,4 +1,4 @@
<ion-list *ngIf="ddQuestion && (ddQuestion.text || ddQuestion.text === '')" class="addon-qtype-ddmarker-container">
<div *ngIf="ddQuestion && (ddQuestion.text || ddQuestion.text === '')" class="addon-qtype-ddmarker-container">
<!-- Content is outside the core-loading to let the script calculate drag items position -->
<core-loading [hideUntil]="ddQuestion.loaded"></core-loading>
@ -14,9 +14,13 @@
[contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"
(afterRender)="textRendered()">
</core-format-text>
</ion-label>
</ion-item>
<ion-item class="ion-text-wrap" [hidden]="!ddQuestion.loaded">
<ion-label>
<core-format-text *ngIf="ddQuestion.ddArea" [adaptImg]="false" [component]="component" [componentId]="componentId"
[text]="ddQuestion.ddArea" [filter]="false" (afterRender)="ddAreaRendered()">
</core-format-text>
</ion-label>
</ion-item>
</ion-list>
</div>

View File

@ -1,150 +1,150 @@
// Style ddmarker content a bit. Almost all these styles are copied from Moodle.
:host {
.addon-qtype-ddmarker-container {
min-height: 80px; // To display the loading.
.addon-qtype-ddmarker-container {
min-height: 80px; // To display the loading.
}
core-format-text ::ng-deep {
.ddarea, .ddform {
user-select: none;
}
core-format-text ::ng-deep {
.ddarea, .ddform {
user-select: none;
}
.qtext {
margin-bottom: 0.5em;
display: block;
}
.qtext {
margin-bottom: 0.5em;
display: block;
}
.droparea {
display: inline-block;
}
.droparea {
display: inline-block;
}
div.droparea img {
border: 1px solid var(--core-dd-question-border);
max-width: 100%;
}
div.droparea img {
border: 1px solid var(--gray-darker);
max-width: 100%;
}
.dropzones svg {
z-index: 3;
}
.dropzones svg {
z-index: 3;
}
.dragitem.beingdragged .markertext {
z-index: 5;
box-shadow: var(--core-dd-question-selected-shadow);
}
.dragitem.beingdragged .markertext {
z-index: 5;
box-shadow: var(--core-dd-question-selected-shadow);
}
.dragitems, // Previous to 3.9.
.draghomes {
&.readonly {
.dragitem,
.marker {
cursor: auto;
}
}
.dragitem, // Previous to 3.9.
.draghome,
.marker {
vertical-align: top;
cursor: pointer;
position: relative;
margin: 10px;
display: inline-block;
&.dragplaceholder {
display: none;
visibility: hidden;
&.active {
display: inline-block;
}
}
&.unplaced {
position: relative;
}
&.placed {
position: absolute;
opacity: 0.6;
}
}
}
.droparea {
.dragitems, // Previous to 3.9.
.draghomes {
&.readonly {
.dragitem,
.marker {
cursor: pointer;
position: absolute;
vertical-align: top;
z-index: 2;
cursor: auto;
}
}
div.ddarea {
text-align: center;
.dragitem, // Previous to 3.9.
.draghome,
.marker {
vertical-align: top;
cursor: pointer;
position: relative;
}
div.ddarea .dropzones,
div.ddarea .markertexts {
top: 0;
left: 0;
min-height: 80px;
position: absolute;
text-align: start;
}
.dropbackground {
margin: 0 auto;
}
div.dragitems div.draghome,
div.dragitems div.dragitem,
div.draghome,
div.drag,
div.draghomes div.marker,
div.marker,
div.drag {
font: 13px/1.231 arial,helvetica,clean,sans-serif;
}
div.dragitems span.markertext,
div.draghomes span.markertext,
div.markertexts span.markertext {
margin: 0 5px;
z-index: 2;
background-color: var(--white);
border: 2px solid var(--gray-darker);
padding: 5px;
margin: 10px;
display: inline-block;
zoom: 1;
border-radius: 10px;
color: var(--ion-text-color);
}
div.markertexts span.markertext {
z-index: 3;
background-color: var(--yellow-light);
border-style: solid;
border-width: 2px;
border-color: var(--yellow);
position: absolute;
}
span.wrongpart {
background-color: var(--yellow-light);
border-style: solid;
border-width: 2px;
border-color: var(--yellow);
padding: 5px;
border-radius: 10px;
opacity: 0.6;
margin: 5px;
display: inline-block;
}
div.dragitems img.target,
div.draghomes img.target {
position: absolute;
left: -7px; /* This must be half the size of the target image, minus 0.5. */
top: -7px; /* In other words, this works for a 15x15 cross-hair. */
}
div.dragitems div.draghome img.target,
div.draghomes div.marker img.target {
display: none;
&.dragplaceholder {
display: none;
visibility: hidden;
&.active {
display: inline-block;
}
}
&.unplaced {
position: relative;
}
&.placed {
position: absolute;
opacity: 0.6;
}
}
}
.droparea {
.dragitem,
.marker {
cursor: pointer;
position: absolute;
vertical-align: top;
z-index: 2;
}
}
div.ddarea {
text-align: center;
position: relative;
}
div.ddarea .dropzones,
div.ddarea .markertexts {
top: 0;
left: 0;
min-height: 80px;
position: absolute;
text-align: start;
}
.dropbackground {
margin: 0 auto;
}
div.dragitems div.draghome,
div.dragitems div.dragitem,
div.draghome,
div.drag,
div.draghomes div.marker,
div.marker,
div.drag {
font: 13px/1.231 arial, helvetica, clean, sans-serif;
}
div.dragitems span.markertext,
div.draghomes span.markertext,
div.markertexts span.markertext {
margin: 0 5px;
z-index: 2;
background-color: var(--ion-item-background);
border: 2px solid var(--core-dd-question-border);
padding: 5px;
display: inline-block;
zoom: 1;
border-radius: 10px;
color: var(--ion-text-color);
}
div.markertexts span.markertext {
z-index: 3;
background-color: var(--yellow-light);
border-style: solid;
border-width: 2px;
border-color: var(--yellow);
position: absolute;
color: var(--black);
}
span.wrongpart {
background-color: var(--yellow-light);
border-style: solid;
border-width: 2px;
border-color: var(--yellow);
padding: 5px;
border-radius: 10px;
opacity: 0.6;
margin: 5px;
display: inline-block;
color: var(--black);
}
div.dragitems img.target,
div.draghomes img.target {
position: absolute;
left: -7px; /* This must be half the size of the target image, minus 0.5. */
top: -7px; /* In other words, this works for a 15x15 cross-hair. */
}
div.dragitems div.draghome img.target,
div.draghomes div.marker img.target {
display: none;
}
}

View File

@ -1,8 +1,8 @@
<ion-list *ngIf="ddQuestion && (ddQuestion.text || ddQuestion.text === '')" class="addon-qtype-ddwtos-container">
<div *ngIf="ddQuestion && (ddQuestion.text || ddQuestion.text === '')" class="addon-qtype-ddwtos-container">
<!-- Content is outside the core-loading to let the script calculate drag items position -->
<core-loading [hideUntil]="ddQuestion.loaded"></core-loading>
<ion-item class="ion-text-wrap addon-qtype-ddwtos-container" [hidden]="!ddQuestion.loaded">
<ion-item class="ion-text-wrap" [hidden]="!ddQuestion.loaded">
<ion-label>
<ion-card *ngIf="!ddQuestion.readOnly" class="core-info-card">
<ion-item>
@ -14,10 +14,12 @@
[contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" #questiontext
(afterRender)="textRendered()">
</core-format-text>
<core-format-text *ngIf="ddQuestion.answers" [component]="component" [componentId]="componentId"
[text]="ddQuestion.answers" [filter]="false" (afterRender)="answersRendered()">
</core-format-text>
<div class="drags"></div>
</ion-label>
</ion-item>
</ion-list>
</div>

View File

@ -1,126 +1,120 @@
@import "~core/features/question/question";
// Style ddwtos content a bit. Almost all these styles are copied from Moodle.
:host {
.addon-qtype-ddwtos-container {
min-height: 80px; // To display the loading.
.addon-qtype-ddwtos-container {
min-height: 80px; // To display the loading.
}
core-format-text ::ng-deep, .drags ::ng-deep {
.qtext {
margin-bottom: 0.5em;
display: block;
}
core-format-text ::ng-deep, .drags ::ng-deep {
.qtext {
margin-bottom: 0.5em;
display: block;
}
.draghome {
margin-bottom: 1em;
max-width: calc(100%);
}
.draghome {
margin-bottom: 1em;
max-width: calc(100%);
}
.answertext {
margin-bottom: 0.5em;
}
.answertext {
margin-bottom: 0.5em;
}
.drop {
display: inline-block;
text-align: center;
border: 1px solid var(--core-dd-question-border);
margin-bottom: 2px;
border-radius: 5px;
cursor: pointer;
}
.draghome, .drag {
display: inline-block;
text-align: center;
background: transparent;
border: 0;
white-space: normal;
overflow: visible;
word-wrap: break-word;
}
.draghome, .drag.unplaced{
border: 1px solid var(--core-dd-question-border);
}
.draghome {
visibility: hidden;
}
.drag {
z-index: 2;
border-radius: 5px;
line-height: 25px;
cursor: pointer;
}
.drag.selected,
.drop.selected {
z-index: 3;
box-shadow: var(--core-dd-question-selected-shadow);
}
.drop {
display: inline-block;
text-align: center;
border: 1px solid var(--gray-darker);
margin-bottom: 2px;
border-radius: 5px;
cursor: pointer;
}
.draghome, .drag {
display: inline-block;
text-align: center;
background: transparent;
border: 0;
white-space: normal;
overflow: visible;
word-wrap: break-word;
}
.draghome, .drag.unplaced{
border: 1px solid var(--gray-darker);
}
.draghome {
visibility: hidden;
}
.drag {
z-index: 2;
border-radius: 5px;
line-height: 25px;
cursor: pointer;
}
.drag.selected {
z-index: 3;
box-shadow: var(--core-dd-question-selected-shadow);
}
&.notreadonly .drag,
&.notreadonly .draghome,
&.notreadonly .drop,
&.notreadonly .answercontainer {
cursor: pointer;
border-radius: 5px;
}
.drop.selected {
border-color: var(--yellow-light);
box-shadow: 0 0 5px 5px var(--yellow-light);
}
&.readonly .drag,
&.readonly .draghome,
&.readonly .drop,
&.readonly .answercontainer {
cursor: default;
}
&.notreadonly .drag,
&.notreadonly .draghome,
&.notreadonly .drop,
&.notreadonly .answercontainer {
cursor: pointer;
border-radius: 5px;
}
span.incorrect {
background-color: var(--core-question-incorrect-color-bg);
}
span.correct {
background-color: var(--core-question-correct-color-bg);
}
&.readonly .drag,
&.readonly .draghome,
&.readonly .drop,
&.readonly .answercontainer {
cursor: default;
@for $i from 0 to length($core-dd-question-colors) {
.group#{$i + 1} {
background: nth($core-dd-question-colors, $i + 1);
color: get_contrast_color(nth($core-dd-question-colors, $i + 1));
}
}
span.incorrect {
background-color: var(--core-question-incorrect-color-bg);
}
span.correct {
background-color: var(--core-question-correct-color-bg);
}
.group2 {
border-radius: var(--core-dd-question-radius) 0 0 0;
}
.group3 {
border-radius: 0 var(--core-dd-question-radius) 0 0;
}
.group4 {
border-radius: 0 0 var(--core-dd-question-radius) 0;
}
.group5 {
border-radius: 0 0 0 var(--core-dd-question-radius);
}
.group6 {
border-radius: 0 var(--core-dd-question-radius) var(--core-dd-question-radius) 0;
}
.group7 {
border-radius: var(--core-dd-question-radius) 0 0 var(--core-dd-question-radius);
}
.group8 {
border-radius: var(--core-dd-question-radius) var(--core-dd-question-radius) var(--core-dd-question-radius) var(--core-dd-question-radius);
}
@for $i from 0 to length($core-dd-question-colors) {
.group#{$i + 1} {
background: nth($core-dd-question-colors, $i + 1);
color: var(--ion-text-color);
}
}
.group2 {
border-radius: 10px 0 0 0;
}
.group3 {
border-radius: 0 10px 0 0;
}
.group4 {
border-radius: 0 0 10px 0;
}
.group5 {
border-radius: 0 0 0 10px;
}
.group6 {
border-radius: 0 10px 10px 0;
}
.group7 {
border-radius: 10px 0 0 10px;
}
.group8 {
border-radius: 10px 10px 10px 10px;
}
sub, sup {
font-size: 80%;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.4em;
}
sub {
bottom: -0.2em;
}
sub, sup {
font-size: 80%;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.4em;
}
sub {
bottom: -0.2em;
}
}

View File

@ -52,6 +52,7 @@ ion-button {
ion-select {
&::part(icon) {
margin: var(--icon-margin);
opacity: 1;
}
&::after {
@ -115,7 +116,6 @@ ion-button {
width: 19px;
height: 19px;
position: relative;
opacity: 0.33;
.select-icon-inner {
left: 5px;

View File

@ -6,7 +6,6 @@
--loading-text-color: var(--ion-text-color);
position: static;
@include core-transition(height, 200ms);
color: var(--loading-text-color);
ion-spinner {
@ -48,7 +47,7 @@
position: unset;
}
&.core-loading-center {
&.core-loading-inline {
display: block;
.core-loading-container {
@ -56,4 +55,14 @@
position: relative;
}
}
&.core-loading-loaded.core-loading-inline {
position: relative;
min-height: 102px;
.core-loading-container {
padding-top: 10px;
position: absolute;
}
}
}

View File

@ -49,6 +49,8 @@ export class CoreLoadingComponent implements OnInit, OnChanges, AfterViewInit {
@Input() hideUntil: unknown; // Determine when should the contents be shown.
@Input() message?: string; // Message to show while loading.
@Input() protected fullscreen = true; // Use the whole screen.
@ViewChild('content') content?: ElementRef;
uniqueId: string;
@ -69,6 +71,8 @@ export class CoreLoadingComponent implements OnInit, OnChanges, AfterViewInit {
// Default loading message.
this.message = Translate.instant('core.loading');
}
this.element.classList.toggle('core-loading-inline', !this.fullscreen);
}
/**
@ -78,11 +82,9 @@ export class CoreLoadingComponent implements OnInit, OnChanges, AfterViewInit {
// Add class if loaded on init.
if (this.hideUntil) {
this.element.classList.add('core-loading-loaded');
this.content?.nativeElement.classList.add('core-loading-content');
} else {
this.content?.nativeElement.classList.remove('core-loading-content');
this.content?.nativeElement.classList.add('core-loading-content-loading');
}
this.content?.nativeElement.classList.toggle('core-loading-content', !!this.hideUntil);
}
/**
@ -99,12 +101,10 @@ export class CoreLoadingComponent implements OnInit, OnChanges, AfterViewInit {
// Change CSS to force calculate height.
// Removed 500ms timeout to avoid reallocating html.
this.content?.nativeElement.classList.add('core-loading-content');
this.content?.nativeElement.classList.remove('core-loading-content-loading');
});
} else {
this.element.classList.remove('core-loading-loaded');
this.content?.nativeElement.classList.remove('core-loading-content');
this.content?.nativeElement.classList.add('core-loading-content-loading');
}
// Trigger the event after a timeout since the elements inside ngIf haven't been added to DOM yet.

View File

@ -1,25 +1,24 @@
:host {
background: var(--white);
form {
position: relative;
display: flex;
align-items: center;
width: 100%;
background: var(--ion-item-background);
}
form {
position: relative;
display: flex;
align-items: center;
width: 100%;
}
.core-send-message-input {
appearance: none;
display: block;
width: 100%;
border: 0;
font-family: inherit;
background: var(--core-send-message-input-background);
color: var(--core-send-message-input-color);
border-radius: 21px;
line-height: 20px;
padding: 9px 12px 11px;
margin: 5px 10px;
resize: vertical;
}
.core-send-message-input {
appearance: none;
display: block;
width: 100%;
border: 0;
font-family: inherit;
background: var(--core-send-message-input-background);
color: var(--core-send-message-input-color);
border-radius: 21px;
line-height: 20px;
padding: 9px 12px 11px;
margin: 5px 10px;
resize: vertical;
}
}

View File

@ -3,7 +3,8 @@
--tabs-color: var(--core-tab-color);
--height: 56px;
height: 100%;
display: block;
display: flex;
flex-direction: column;
ion-tabs {
background: transparent;
@ -82,7 +83,7 @@
z-index: 1;
&.selected {
display: block;
display: contents;
}
ion-header {
@ -95,6 +96,11 @@
}
}
}
div.core-tabs-content-container {
flex-grow: 1;
position: relative;
}
}

View File

@ -3,7 +3,7 @@
</div>
<div *ngIf="blocks && blocks.length > 0 && !hideBlocks" [class.core-hide-blocks]="hideBottomBlocks" class="core-course-blocks-side">
<core-loading [hideUntil]="dataLoaded" class="core-loading-center">
<core-loading [hideUntil]="dataLoaded" [fullscreen]="false">
<ion-list>
<!-- Course expand="block"s. -->
<ng-container *ngFor="let block of blocks">

View File

@ -7,7 +7,7 @@
</h2>
</ion-label>
</ion-item-divider>
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded" [fullscreen]="false">
<ion-item *ngIf="block.contents?.content" class="ion-text-wrap core-block-content">
<ion-label>
<core-format-text [text]="block.contents?.content" contextLevel="block" [contextInstanceId]="block.instanceid"

View File

@ -12,13 +12,6 @@
margin-top: 0;
margin-bottom: 0;
}
progress {
.progress-bar-fallback,
&[value]::-webkit-progress-bar {
background-color: var(--white);
}
}
}
}
@ -30,7 +23,7 @@
cursor: pointer;
pointer-events: auto;
position: relative;
background: white;
background: var(--ion-item-background);
img {
position: absolute;

View File

@ -30,7 +30,7 @@
transition: all 50ms ease-in-out;
&.core-course-color-img {
background: white;
background: var(--ion-item-background);
}
img {

View File

@ -1,4 +1,4 @@
<core-loading [hideUntil]="iframeSrc" class="core-loading-center safe-area-page">
<core-loading [hideUntil]="iframeSrc" [fullscreen]="false" class="safe-area-page">
<core-iframe *ngIf="iframeSrc" [src]="iframeSrc" iframeHeight="auto" [allowFullscreen]="true" (loaded)="iframeLoaded()">
</core-iframe>
<script *ngIf="resizeScript && iframeSrc" type="text/javascript" [src]="resizeScript"></script>

View File

@ -6,7 +6,7 @@
<core-site-picker *ngIf="showSitePicker" [hidden]="!filesLoaded" [initialSite]="siteId" (siteSelected)="changeSite($event)">
</core-site-picker>
<core-loading [hideUntil]="filesLoaded" class="core-loading-center">
<core-loading [hideUntil]="filesLoaded" [fullscreen]="false">
<ion-list *ngIf="files && files.length > 0">
<ng-container *ngFor="let file of files; let idx = index">
<core-local-file *ngIf="file.isFile" [file]="file" [manage]="manage" [overrideClick]="pick"

View File

@ -59,7 +59,7 @@ export class CoreSharedFilesUploadHandlerService implements CoreFileUploaderHand
return {
title: 'core.sharedfiles.sharedfiles',
class: 'core-sharedfiles-fileuploader-handler',
icon: 'folder',
icon: 'fas-folder',
action: (
maxSize?: number,
upload?: boolean,

View File

@ -1,4 +1,4 @@
<core-loading [hideUntil]="dataLoaded" class="core-loading-center">
<core-loading [hideUntil]="dataLoaded" [fullscreen]="false">
<core-compile-html [text]="content" [javascript]="javascript" [jsData]="jsData" [forceCompile]="forceCompile" #compile>
</core-compile-html>
</core-loading>

View File

@ -237,7 +237,7 @@ $colors-dark: (
$core-course-image-background: #81ecec, #74b9ff, #a29bfe, #dfe6e9, #00b894, #0984e3, #b2bec3, #fdcb6e, #fd79a8, #6c5ce7 !default;
$core-dd-question-colors: $white, $blue-light, #DCDCDC, #D8BFD8, #87CEFA, #DAA520, #FFD700, #F0E68C !default;
$core-dd-question-colors: #FFFFFF, #B0C4DE, #DCDCDC, #D8BFD8, #87CEFA, #DAA520, #FFD700, #F0E68C !default;
/*
* Layout Breakpoints
@ -378,8 +378,8 @@ $addon-forum-avatar-size: 44px !default;
$addon-forum-border-color: $gray !default;
$addon-forum-highlight-color: $gray-lighter !default;
$addon-forum-border-color-dark: $gray-darker !default;
$addon-forum-highlight-color-dark: $gray-dark !default;
$addon-forum-border-color-dark: $gray-dark !default;
$addon-forum-highlight-color-dark: $gray-darker !default;
$core-more-icon: null !default;
$core-more-item-border: null !default;

View File

@ -104,6 +104,10 @@ ion-header h2 {
white-space: nowrap;
overflow: hidden;
pointer-events: auto;
.filter_mathjaxloader_equation div {
display: inline !important;
}
}
ion-app.md ion-header h1,
@ -477,7 +481,7 @@ ion-card ion-item img.core-module-icon[slot="start"] {
margin-left: 32px;
}
.core-course-module-handler:not(.addon-mod-label-handler) .item-heading .filter_mathjaxloader_equation * {
.core-course-module-handler:not(.addon-mod-label-handler) .item-heading .filter_mathjaxloader_equation div {
display: inline !important;
}
@ -514,6 +518,10 @@ ion-select::part(text) {
white-space: normal;
}
ion-select::part(icon) {
opacity: 1;
}
ion-searchbar {
.searchbar-search-icon.ios {
top: 4px;

View File

@ -117,6 +117,7 @@
--core-question-feedback-background-color: var(--yellow-dark);
--core-dd-question-selected-shadow: 2px 2px 4px var(--gray-light);
--core-dd-question-border: var(--gray-light);
--addon-messages-message-bg: #{$addon-messages-message-bg-dark};
--addon-messages-message-activated-bg: #{$addon-messages-message-activated-bg-dark};

View File

@ -275,6 +275,8 @@
--core-question-feedback-background-color: var(--yellow-light);
--core-dd-question-selected-shadow: 2px 2px 4px var(--gray-dark);
--core-dd-question-radius: 10px;
--core-dd-question-border: var(--gray-darker);
@if ($core-more-icon) {
--core-more-icon: #{$core-more-icon};