GuzhavinAleksey/Vmeda.Online
1
0
Fork 0
forked from CIT/Vmeda.Online
Code Pull Requests Activity

Merge pull request #2788 from crazyserver/MOBILE-3320

Browse Source 
Mobile 3320
This commit is contained in:
Dani Palou 2021-05-25 14:48:32 +02:00 committed by GitHub
commit f936bc9bd9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
29 changed files with 484 additions and 629 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.github/workflows/migration.yml vendored
View File

@ -15,4 +15,5 @@ jobs:
node-version: '12.x'
- run: npm ci
- run: result=$(find src -type f -iname '*.html' -exec sh -c 'cat {} | tr "\n" " " | grep -Eo "class=\"[^\"]+\"[^>]+class=\"" ' \; | wc -l); test $result -eq 0
- run: npm install -D @ionic/v4-migration-tslint
- run: npx tslint -c ionic-migration.json -p tsconfig.json

186
package-lock.json generated
View File

@ -3334,16 +3334,6 @@
}
}
},
"@ionic/v4-migration-tslint": {
"version": "1.7.1",
"resolved": "https://registry.npmjs.org/@ionic/v4-migration-tslint/-/v4-migration-tslint-1.7.1.tgz",
"integrity": "sha512-1vwBmf0czHvG+vKboxHtYtPJ3Stc7wP8tB2i7qmLslKqMqVFzaTkbNiakt40mHJ/UtbfAzFOkBD6RZZHTWEuzQ==",
"dev": true,
"requires": {
"codelyzer": "^4.4.4",
"tslint": "^5.0.0"
}
},
"@istanbuljs/load-nyc-config": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@ -5010,12 +5000,6 @@
"picomatch": "^2.0.4"
}
},
"app-root-path": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/app-root-path/-/app-root-path-2.2.1.tgz",
"integrity": "sha512-91IFKeKk7FjfmezPKkwtaRvSpnUc4gDwPAjA1YZ9Gn0q0PPeW+vbeUsZuyDwjI7+QTHhcLen2v25fi/AmhvbJA==",
"dev": true
},
"append-buffer": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/append-buffer/-/append-buffer-1.0.2.tgz",
@ -6187,12 +6171,6 @@
"integrity": "sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk=",
"dev": true
},
"builtin-modules": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz",
"integrity": "sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8=",
"dev": true
},
"builtin-status-codes": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
@ -7380,34 +7358,6 @@
"resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
"integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
},
"codelyzer": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/codelyzer/-/codelyzer-4.5.0.tgz",
"integrity": "sha512-oO6vCkjqsVrEsmh58oNlnJkRXuA30hF8cdNAQV9DytEalDwyOFRvHMnlKFzmOStNerOmPGZU9GAHnBo4tGvtiQ==",
"dev": true,
"requires": {
"app-root-path": "^2.1.0",
"css-selector-tokenizer": "^0.7.0",
"cssauron": "^1.4.0",
"semver-dsl": "^1.0.1",
"source-map": "^0.5.7",
"sprintf-js": "^1.1.1"
},
"dependencies": {
"source-map": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
"dev": true
},
"sprintf-js": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.2.tgz",
"integrity": "sha512-VE0SOVEHCk7Qc8ulkWw3ntAzXuqf7S2lvwQaDLRnUeIEaKNQJzV6BwmLKhOqT61aGhfUMrXeaBk+oDGCzvhcug==",
"dev": true
}
}
},
"collect-v8-coverage": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz",
@ -8502,16 +8452,6 @@
"integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==",
"dev": true
},
"css-selector-tokenizer": {
"version": "0.7.3",
"resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.7.3.tgz",
"integrity": "sha512-jWQv3oCEL5kMErj4wRnK/OPoBi0D+P1FR2cDCKYPaMeD2eW3/mttav8HT4hT1CKopiJI/psEULjkClhvJo4Lvg==",
"dev": true,
"requires": {
"cssesc": "^3.0.0",
"fastparse": "^1.1.2"
}
},
"css-tree": {
"version": "1.0.0-alpha.37",
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@ -8536,15 +8476,6 @@
"integrity": "sha512-wHOppVDKl4vTAOWzJt5Ek37Sgd9qq1Bmj/T1OjvicWbU5W7ru7Pqbn0Jdqii3Drx/h+dixHKXNhZYx7blthL7g==",
"dev": true
},
"cssauron": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/cssauron/-/cssauron-1.4.0.tgz",
"integrity": "sha1-pmAt/34EqDBtwNuaVR6S6LVmKtg=",
"dev": true,
"requires": {
"through": "X.X.X"
}
},
"cssesc": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@ -10500,12 +10431,6 @@
"integrity": "sha512-Utm6CdzT+6xsDk2m8S6uL8VHxNwI6Jub+e9NYTcAms28T84pTa25GJQV9j0CY0N1rM8hK4x6grpF2BQf+2qwVA==",
"dev": true
},
"fastparse": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
"integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
"dev": true
},
"fastq": {
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.8.0.tgz",
@ -19850,23 +19775,6 @@
}
}
},
"semver-dsl": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/semver-dsl/-/semver-dsl-1.0.1.tgz",
"integrity": "sha1-02eN5VVeimH2Ke7QJTZq5fJzQKA=",
"dev": true,
"requires": {
"semver": "^5.3.0"
},
"dependencies": {
"semver": {
"version": "5.7.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
"dev": true
}
}
},
"semver-greatest-satisfied-range": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/semver-greatest-satisfied-range/-/semver-greatest-satisfied-range-1.1.0.tgz",
@ -21881,100 +21789,6 @@
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz",
"integrity": "sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ=="
},
"tslint": {
"version": "5.20.1",
"resolved": "https://registry.npmjs.org/tslint/-/tslint-5.20.1.tgz",
"integrity": "sha512-EcMxhzCFt8k+/UP5r8waCf/lzmeSyVlqxqMEDQE7rWYiQky8KpIBz1JAoYXfROHrPZ1XXd43q8yQnULOLiBRQg==",
"dev": true,
"requires": {
"@babel/code-frame": "^7.0.0",
"builtin-modules": "^1.1.1",
"chalk": "^2.3.0",
"commander": "^2.12.1",
"diff": "^4.0.1",
"glob": "^7.1.1",
"js-yaml": "^3.13.1",
"minimatch": "^3.0.4",
"mkdirp": "^0.5.1",
"resolve": "^1.3.2",
"semver": "^5.3.0",
"tslib": "^1.8.0",
"tsutils": "^2.29.0"
},
"dependencies": {
"ansi-styles": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
"dev": true,
"requires": {
"color-convert": "^1.9.0"
}
},
"chalk": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
"dev": true,
"requires": {
"ansi-styles": "^3.2.1",
"escape-string-regexp": "^1.0.5",
"supports-color": "^5.3.0"
}
},
"color-convert": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
"dev": true,
"requires": {
"color-name": "1.1.3"
}
},
"color-name": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
"dev": true
},
"has-flag": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
"dev": true
},
"semver": {
"version": "5.7.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
"dev": true
},
"supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
"dev": true,
"requires": {
"has-flag": "^3.0.0"
}
},
"tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
"dev": true
},
"tsutils": {
"version": "2.29.0",
"resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.29.0.tgz",
"integrity": "sha512-g5JVHCIJwzfISaXpXE1qvNalca5Jwob6FjI4AoPlqMusJ6ftFE7IkkFoMhVLRgK+4Kx3gkzb8UZK5t5yTTvEmA==",
"dev": true,
"requires": {
"tslib": "^1.8.1"
}
}
}
},
"tsutils": {
"version": "3.17.1",
"resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.17.1.tgz",

1
package.json
View File

@ -137,7 +137,6 @@
"@angular/language-service": "~10.0.0",
"@ionic/angular-toolkit": "^2.3.0",
"@ionic/cli": "^6.14.1",
"@ionic/v4-migration-tslint": "^1.7.1",
"@types/faker": "^5.1.3",
"@types/node": "^12.12.64",
"@types/resize-observer-browser": "^0.1.5",

175
src/addons/messages/pages/discussion/discussion.scss
View File

@ -1,25 +1,7 @@
@import "~theme/components/discussion.scss";
@import "~theme/globals.scss";
:host {
ion-content {
--background: var(--background-alternative);
&::part(scroll) {
padding-bottom: 0 !important;
}
}
.addon-messages-discussion-container {
display: flex;
flex-direction: column;
padding-bottom: 15px;
background: var(--background-alternative);
}
.addon-messages-date {
font-weight: normal;
font-size: 0.9rem;
}
.addon-messages-unreadfrom {
color: var(--ion-color-primary);
@ -33,156 +15,6 @@
}
}
// Message item.
ion-item.addon-message {
border: 0;
border-radius: 4px;
padding: 0 8px 0 8px;
margin: 10px 8px 0 8px;
--background: var(--addon-messages-message-bg);
background: var(--background);
align-self: flex-start;
width: 90%;
max-width: 90%;
--min-height: var(--a11y-min-target-size);
position: relative;
@include core-transition(width);
// This is needed to display bubble tails.
overflow: visible;
&::part(native) {
--inner-border-width: 0;
--inner-padding-end: 0;
padding: 0;
margin: 0;
}
core-format-text > p:only-child {
display: inline;
}
.addon-message-user {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: .5rem;
margin-top: 0;
color: var(--ion-text-color);
core-user-avatar {
display: block;
--core-avatar-size: var(--addon-messages-avatar-size);
margin: 0;
}
div {
font-weight: 500;
flex-grow: 1;
@include padding-horizontal(.5rem);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
ion-note {
color: var(--addon-messages-message-note-text);
font-size: var(--addon-messages-message-note-font-size);
margin: 0;
padding: 0 0 8px 0;
align-self: flex-end;
}
&:active {
--background: var(--addon-messages-message-activated-bg);
}
ion-label {
margin: 0;
padding: 8px 0;
}
.addon-message-text {
display: inline-flex;
* {
color: var(--ion-text-color);
}
}
.addon-messages-delete-button {
min-height: initial;
line-height: initial;
@include margin(0, null, 0, null);
height: var(--a11y-min-target-size) !important;
align-self: flex-end;
ion-icon {
font-size: 1.4em;
line-height: initial;
color: var(--ion-color-danger);
}
}
.tail {
content: '';
width: 0;
height: 0;
border: 0.5rem solid transparent;
position: absolute;
touch-action: none;
bottom: 0;
}
// Defines when an item-message is the user's.
&.addon-message-mine {
--background: var(--addon-messages-message-mine-bg);
align-self: flex-end;
&:active {
--background: var(--addon-messages-message-mine-activated-bg);
}
.spinner {
@include float(end);
@include margin(2px, -3px, -2px, 5px);
svg {
width: 16px;
height: 16px;
}
}
.tail {
@include position(null, -8px, null, null);
@include margin-horizontal(null, -0.5rem);
border-bottom-color: var(--addon-messages-message-mine-bg);
}
&:active .tail {
border-bottom-color: var(--addon-messages-message-mine-activated-bg);
}
}
&.addon-message-not-mine .tail {
border-bottom-color: var(--addon-messages-message-bg);
@include position(null, null, null, -8px);
@include margin-horizontal(-0.5rem, null);
}
&.addon-message-not-mine.activated .tail {
border-bottom-color: var(--addon-messages-message-activated-bg);
}
}
ion-item.addon-message.addon-message-mine + ion-item.addon-message.addon-message-no-user.addon-message-mine,
ion-item.addon-message.addon-message-not-mine + ion-item.addon-message.addon-message-no-user.addon-message-not-mine {
.item-heading {
margin-bottom: 0;
}
padding-top: 0;
}
.has-fab .scroll-content {
padding-bottom: 0;
}
@ -232,9 +64,4 @@
ion-header ion-toolbar h1 {
justify-content: center;
}
ion-footer .toolbar:last-child {
padding-bottom: 4px;
min-height: 0;
}
}

2
src/addons/mod/assign/pages/edit/edit.html
View File

@ -8,7 +8,7 @@
</core-format-text>
</h1>
<ion-buttons slot="end">
<ion-button fill="clear" (click)="save()" [attr.aria-label]="'core.save' | translate">
<ion-button fill="clear" (click)="save()">
{{ 'core.save' | translate }}
</ion-button>
</ion-buttons>

2
src/addons/mod/assign/pages/submission-review/submission-review.html
View File

@ -12,7 +12,7 @@
</ion-toolbar>
<core-navbar-buttons slot="end">
<ion-button [hidden]="!canSaveGrades" fill="clear" (click)="submitGrade()" [attr.aria-label]="'core.done' | translate">
<ion-button [hidden]="!canSaveGrades" fill="clear" (click)="submitGrade()">
{{ 'core.done' | translate }}
</ion-button>
</core-navbar-buttons>

8
src/addons/mod/chat/pages/chat/chat.html
View File

@ -86,11 +86,10 @@
[@coreSlideInOut]="message.userid == currentUserId ? '' : 'fromLeft'">
<ion-label>
<!-- User data. -->
<h2 class="addon-message-user">
<core-user-avatar slot="start" [user]="message" [linkProfile]="false" *ngIf="message.showUserData">
<h2 class="addon-message-user" *ngIf="message.showUserData">
<core-user-avatar slot="start" [user]="message" [linkProfile]="false">
</core-user-avatar>
<div *ngIf="message.showUserData">{{ message.userfullname }}</div>
<ion-note>{{ message.timestamp * 1000 | coreFormatDate: "strftimetime" }}</ion-note>
<div>{{ message.userfullname }}</div>
</h2>
<p class="addon-message-text">
@ -99,6 +98,7 @@
</core-format-text>
</p>
</ion-label>
<ion-note>{{ message.timestamp * 1000 | coreFormatDate: "strftimetime" }}</ion-note>
<div class="tail" *ngIf="message.showTail"></div>
</ion-item>
</ng-container>

2
src/addons/mod/chat/pages/chat/chat.scss
View File

@ -1,3 +1,5 @@
@import "~theme/components/discussion.scss";
:host {
.addon-mod_chat-notice {
margin-top: 8px;

3
src/addons/mod/chat/pages/chat/chat.ts
View File

@ -36,7 +36,7 @@ import { AddonModChatFormattedMessage, AddonModChatHelper } from '../../services
selector: 'page-addon-mod-chat-chat',
templateUrl: 'chat.html',
animations: [CoreAnimations.SLIDE_IN_OUT],
styleUrls: ['chat.scss', '../../../../messages/pages/discussion/discussion.scss'],
styleUrls: ['chat.scss'],
})
export class AddonModChatChatPage implements OnInit, OnDestroy, CanLeave {
@ -54,7 +54,6 @@ export class AddonModChatChatPage implements OnInit, OnDestroy, CanLeave {
courseId!: number;
cmId!: number;
protected logger;
protected chatId!: number;
protected sessionId?: string;
protected lastTime = 0;

4
src/addons/mod/chat/pages/session-messages/session-messages.html
View File

@ -11,7 +11,7 @@
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
</ion-refresher>
<core-loading [hideUntil]="loaded" class="safe-area-page">
<ion-list class="addon-messages-discussion-container" aria-live="polite">
<ion-list class="addon-messages-discussion-container">
<ng-container *ngFor="let message of messages; index as index;">
<div class="ion-text-center addon-messages-date" *ngIf="message.showDate">
@ -83,7 +83,6 @@
<core-user-avatar slot="start" [user]="message" [linkProfile]="false" *ngIf="message.showUserData">
</core-user-avatar>
<div *ngIf="message.showUserData">{{ message.userfullname }}</div>
<ion-note>{{ message.timestamp * 1000 | coreFormatDate: "strftimetime" }}</ion-note>
</h2>
<p class="addon-message-text">
@ -91,6 +90,7 @@
[courseId]="courseId">
</core-format-text>
</p>
<ion-note>{{ message.timestamp * 1000 | coreFormatDate: "strftimetime" }}</ion-note>
</ion-label>
<div class="tail" *ngIf="message.showTail"></div>
</ion-item>

2
src/addons/mod/chat/pages/session-messages/session-messages.scss
View File

@ -1,3 +1,5 @@
@import "~theme/components/discussion.scss";
:host {
.addon-mod_chat-notice {
margin-top: 8px;

2
src/addons/mod/chat/pages/session-messages/session-messages.ts
View File

@ -28,7 +28,7 @@ import { AddonModChatFormattedSessionMessage, AddonModChatHelper } from '../../s
@Component({
selector: 'page-addon-mod-chat-session-messages',
templateUrl: 'session-messages.html',
styleUrls: ['session-messages.scss', '../../../../messages/pages/discussion/discussion.scss'],
styleUrls: ['session-messages.scss'],
})
export class AddonModChatSessionMessagesPage implements OnInit {

2
src/addons/mod/data/pages/edit/edit.html
View File

@ -8,7 +8,7 @@
</core-format-text>
</h1>
<ion-buttons slot="end">
<ion-button *ngIf="entry" fill="clear" (click)="save($event)" [attr.aria-label]="'core.save' | translate">
<ion-button *ngIf="entry" fill="clear" (click)="save($event)">
{{ 'core.save' | translate }}
</ion-button>
</ion-buttons>

2
src/addons/mod/wiki/pages/edit/edit.html
View File

@ -9,7 +9,7 @@
</h1>
<ion-buttons slot="end">
<ion-button fill="clear" (click)="save()" [attr.aria-label]="'core.save' | translate">
<ion-button fill="clear" (click)="save()">
{{ 'core.save' | translate }}
</ion-button>
</ion-buttons>

2
src/addons/mod/workshop/pages/assessment/assessment.html
View File

@ -9,7 +9,7 @@
</core-format-text>
</h1>
<ion-buttons slot="end" [hidden]="!evaluating">
<ion-button fill="clear" (click)="saveEvaluation()" [attr.aria-label]="'core.save' | translate">
<ion-button fill="clear" (click)="saveEvaluation()">
{{ 'core.save' | translate }}
</ion-button>
</ion-buttons>

2
src/addons/mod/workshop/pages/submission/submission.html
View File

@ -12,7 +12,7 @@
[attr.aria-label]="'core.save' | translate">
{{ 'core.save' | translate }}
</ion-button>
<ion-button *ngIf="canAddFeedback" fill="clear" (click)="saveEvaluation()" [attr.aria-label]="'core.save' | translate">
<ion-button *ngIf="canAddFeedback" fill="clear" (click)="saveEvaluation()">
{{ 'core.save' | translate }}
</ion-button>
</ion-buttons>

20
src/core/components/send-message-form/core-send-message-form.html
View File

@ -1,7 +1,21 @@
<form #messageForm>
<textarea class="core-send-message-input" [core-auto-focus]="showKeyboard" [placeholder]="placeholder" rows="1" core-auto-rows
[(ngModel)]="message" name="message" (onResize)="textareaResized()" (keyup.enter)="enterClicked($event)"
(keyup.control.enter)="enterClicked($event, 'control')" (keyup.meta.enter)="enterClicked($event, 'meta')"></textarea>
<textarea
class="core-send-message-input"
[core-auto-focus]="showKeyboard"
[placeholder]="placeholder"
rows="1"
core-auto-rows
[(ngModel)]="message"
name="message"
(onResize)="textareaResized()"
(keyup.enter)="enterKeyUp($event)"
(keyup.control.enter)="enterKeyUp($event, 'control')"
(keyup.meta.enter)="enterKeyUp($event, 'meta')"
(keydown.enter)="enterKeyDown($event)"
(keydown.control.enter)="enterKeyDown($event, 'control')"
(keydown.meta.enter)="enterKeyDown($event, 'meta')"
>
</textarea>
<ion-button fill="clear" size="large" type="submit" [disabled]="!message || sendDisabled"
[attr.aria-label]="'core.send' | translate" [core-suppress-events] (click)="submitForm($event)">
<ion-icon name="send" color="dark" slot="icon-only" aria-hidden="true"></ion-icon>

1
src/core/components/send-message-form/send-message-form.scss
View File

@ -20,5 +20,6 @@
line-height: 20px;
padding: 9px 12px 11px;
margin: 5px 10px;
resize: vertical;
}
}

23
src/core/components/send-message-form/send-message-form.ts
View File

@ -103,13 +103,34 @@ export class CoreSendMessageFormComponent implements OnInit {
this.onResize.emit();
}
/**
* A11y key functionality that prevents keyDown events.
*
* @param e Event.
*/
enterKeyDown(e: KeyboardEvent, other?: string): void {
if (this.sendDisabled) {
return;
}
if (this.sendOnEnter && !other) {
// Enter clicked, send the message.
e.preventDefault();
e.stopPropagation();
} else if (!this.sendOnEnter && !CoreApp.isMobile() && other == 'control') {
// Cmd+Enter or Ctrl+Enter, send message.
e.preventDefault();
e.stopPropagation();
}
}
/**
* Enter key clicked.
*
* @param e Event.
* @param other The name of the other key that was clicked, undefined if no other key.
*/
enterClicked(e: Event, other?: string): void {
enterKeyUp(e: Event, other?: string): void {
if (this.sendDisabled) {
return;
}

6
src/core/directives/long-press.ts
View File

@ -27,6 +27,7 @@ export class CoreLongPressDirective implements OnInit, OnDestroy {
element: HTMLElement;
pressGesture?: Gesture;
protected moved = false;
@Output() longPress = new EventEmitter();
@ -42,8 +43,11 @@ export class CoreLongPressDirective implements OnInit, OnDestroy {
this.pressGesture = GestureController.create({
el: this.element,
threshold: 0,
disableScroll: true,
gestureName: 'longpress',
onEnd: ev => this.longPress.emit(ev.event),
onStart: () => this.moved = false,
onMove: () => this.moved = true,
onEnd: ev => !this.moved && this.longPress.emit(ev.event),
}, true);
this.pressGesture.enable();

95
src/core/features/comments/components/add/add-modal.ts
View File

@ -1,95 +0,0 @@
// (C) Copyright 2015 Moodle Pty Ltd.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import { Component, ViewChild, ElementRef, Input } from '@angular/core';
import { CoreComments } from '@features/comments/services/comments';
import { CoreApp } from '@services/app';
import { CoreSites } from '@services/sites';
import { CoreDomUtils } from '@services/utils/dom';
import { CoreForms } from '@singletons/form';
import { ModalController } from '@singletons';
/**
* Component that displays a text area for composing a comment.
*/
@Component({
selector: 'core-comments-add',
templateUrl: 'add.html',
})
export class CoreCommentsAddComponent {
@ViewChild('commentForm') formElement?: ElementRef;
@Input() protected contextLevel!: string;
@Input() protected instanceId!: number;
@Input() protected componentName!: string;
@Input() protected itemId!: number;
@Input() protected area = '';
@Input() content = '';
processing = false;
/**
* Send the comment or store it offline.
*
* @param e Event.
*/
async addComment(e: Event): Promise<void> {
e.preventDefault();
e.stopPropagation();
CoreApp.closeKeyboard();
const loadingModal = await CoreDomUtils.showModalLoading('core.sending', true);
// Freeze the add comment button.
this.processing = true;
try {
const commentsResponse = await CoreComments.addComment(
this.content,
this.contextLevel,
this.instanceId,
this.componentName,
this.itemId,
this.area,
);
CoreForms.triggerFormSubmittedEvent(
this.formElement,
!!commentsResponse,
CoreSites.getCurrentSiteId(),
);
ModalController.dismiss(commentsResponse).finally(() => {
CoreDomUtils.showToast(
commentsResponse ? 'core.comments.eventcommentcreated' : 'core.datastoredoffline',
true,
3000,
);
});
} catch (error) {
CoreDomUtils.showErrorModal(error);
this.processing = false;
} finally {
loadingModal.dismiss();
}
}
/**
* Close modal.
*/
closeModal(): void {
CoreForms.triggerFormCancelledEvent(this.formElement, CoreSites.getCurrentSiteId());
ModalController.dismiss();
}
}

26
src/core/features/comments/components/add/add.html
View File

@ -1,26 +0,0 @@
<ion-header>
<ion-toolbar>
<h2>{{ 'core.comments.addcomment' | translate }}</h2>
<ion-buttons slot="end">
<ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
<ion-icon name="fas-times" slot="icon-only" aria-hidden=true></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<form name="itemEdit" (ngSubmit)="addComment($event)" #commentForm>
<ion-item>
<ion-label>
<ion-textarea placeholder="{{ 'core.comments.addcomment' | translate }}" rows="5" [(ngModel)]="content"
name="content" required="required">
</ion-textarea>
</ion-label>
</ion-item>
<div class="ion-padding">
<ion-button expand="block" type="submit" [disabled]="processing || content.length < 1">
{{ 'core.comments.savecomment' | translate }}
</ion-button>
</div>
</form>
</ion-content>

3
src/core/features/comments/components/components.module.ts
View File

@ -14,20 +14,17 @@
import { CoreSharedModule } from '@/core/shared.module';
import { NgModule } from '@angular/core';
import { CoreCommentsAddComponent } from './add/add-modal';
import { CoreCommentsCommentsComponent } from './comments/comments';
@NgModule({
declarations: [
CoreCommentsCommentsComponent,
CoreCommentsAddComponent,
],
imports: [
CoreSharedModule,
],
exports: [
CoreCommentsCommentsComponent,
CoreCommentsAddComponent,
],
})
export class CoreCommentsComponentsModule {}

140
src/core/features/comments/pages/viewer/viewer.html
View File

@ -34,75 +34,95 @@
[message]="'core.comments.nocomments' | translate">
</core-empty-box>
<ion-card class="core-warning-card" *ngIf="hasOffline">
<ion-item>
<ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon>
<ion-label>
{{ 'core.thereisdatatosync' | translate:{$a: 'core.comments.comments' | translate | lowercase } }}
</ion-label>
</ion-item>
</ion-card>
<!-- Load previous messages. -->
<core-infinite-loading [enabled]="canLoadMore" position="top" (action)="loadPrevious($event)" [error]="loadMoreError">
</core-infinite-loading>
<ion-card *ngIf="offlineComment" (click)="addComment($event)">
<ion-item class="ion-text-wrap">
<core-user-avatar [user]="offlineComment" slot="start"></core-user-avatar>
<ion-label>
<p class="item-heading">{{ offlineComment.fullname }}</p>
<p>
<ion-icon name="fas-clock" aria-hidden="true"></ion-icon> {{ 'core.notsent' | translate }}
</p>
</ion-label>
<ion-button *ngIf="showDelete" slot="end" fill="clear" [@coreSlideInOut]="'fromRight'" color="danger"
(click)="deleteComment($event, offlineComment)" [attr.aria-label]="'core.delete' | translate">
<ion-icon name="fas-trash" slot="icon-only" aria-hidden="true"></ion-icon>
</ion-button>
</ion-item>
<ion-item class="ion-text-wrap">
<ion-label>
<core-format-text clean="true" [text]="offlineComment.content" [contextLevel]="contextLevel"
[contextInstanceId]="instanceId" [courseId]="courseId">
</core-format-text>
</ion-label>
</ion-item>
</ion-card>
<ion-list class="addon-messages-discussion-container">
<ng-container *ngFor="let comment of comments; index as index; last as last">
<ion-card *ngFor="let comment of comments">
<ion-item class="ion-text-wrap">
<core-user-avatar [user]="comment" slot="start"></core-user-avatar>
<ion-label>
<p class="item-heading">{{ comment.fullname }}</p>
<p *ngIf="!comment.deleted">{{ comment.timecreated * 1000 | coreFormatDate: 'strftimerecentfull' }}</p>
<p *ngIf="comment.deleted">
<ion-icon name="fas-trash" aria-hidden="true"></ion-icon> <span class="ion-text-wrap">
{{ 'core.deletedoffline' | translate }}
</span>
<p class="ion-text-center addon-messages-date" *ngIf="comment.showDate">
{{ comment.timecreated * 1000 | coreFormatDate: "strftimedayshort" }}
</p>
</ion-label>
<ion-button *ngIf="showDelete && !comment.deleted && comment.delete" slot="end" fill="clear"
[@coreSlideInOut]="'fromRight'" color="danger" (click)="deleteComment($event, comment)"
[attr.aria-label]="'core.delete' | translate">
<ion-icon name="fas-trash" slot="icon-only" aria-hidden="true"></ion-icon>
</ion-button>
<ion-button *ngIf="showDelete && comment.deleted" slot="end" fill="clear" color="danger"
(click)="undoDeleteComment($event, comment)" [attr.aria-label]="'core.restore' | translate">
<ion-icon name="fas-undo-alt" slot="icon-only" aria-hidden="true"></ion-icon>
</ion-button>
</ion-item>
<ion-item class="ion-text-wrap">
<ion-item class="ion-text-wrap addon-message"
[class.addon-message-mine]="comment.userid == currentUserId"
[class.addon-message-not-mine]="comment.userid != currentUserId"
[class.addon-message-no-user]="!comment.showUserData"
[@coreSlideInOut]="comment.userid == currentUserId ? '' : 'fromLeft'">
<ion-label>
<!-- User data. -->
<h2 class="addon-message-user" *ngIf="comment.showUserData">
<core-user-avatar slot="start" [user]="comment" [linkProfile]="false">
</core-user-avatar>
<div>{{ comment.fullname }}</div>
</h2>
<p class="addon-message-text">
<core-format-text [text]="comment.content" [contextLevel]="contextLevel" [contextInstanceId]="instanceId"
[courseId]="courseId">
</core-format-text>
</p>
</ion-label>
<ion-note>
<ng-container *ngIf="!comment.deleted">
{{ comment.timecreated * 1000 | coreFormatDate: 'strftimetime' }}
</ng-container>
<ng-container *ngIf="comment.deleted">
<ion-icon name="fas-trash" aria-hidden="true"></ion-icon> <span class="ion-text-wrap">
{{ 'core.deletedoffline' | translate }}
</span>
</ng-container>
</ion-note>
<div class="tail" *ngIf="comment.showTail"></div>
<ion-button *ngIf="showDelete && !comment.deleted && comment.delete" slot="end" fill="clear"
[@coreSlideInOut]="'fromRight'" color="danger" (click)="deleteComment($event, comment)"
[attr.aria-label]="'core.delete' | translate" class="addon-messages-delete-button">
<ion-icon name="fas-trash" slot="icon-only" aria-hidden="true"></ion-icon>
</ion-button>
<ion-button *ngIf="showDelete && comment.deleted" slot="end" fill="clear" color="danger"
(click)="undoDeleteComment($event, comment)" [attr.aria-label]="'core.restore' | translate"
class="addon-messages-delete-button">
<ion-icon name="fas-undo-alt" slot="icon-only" aria-hidden="true"></ion-icon>
</ion-button>
</ion-item>
</ion-card>
</ng-container>
<ion-item
*ngIf="offlineComment"
class="ion-text-wrap addon-message addon-message-mine"
>
<ion-label>
<!-- User data. -->
<p class="ion-text-center">
<ion-icon name="fas-exclamation-triangle" aria-hidden="true"></ion-icon>
{{ 'core.thereisdatatosync' | translate:{$a: 'core.comments.comments' | translate | lowercase } }}
</p>
<p class="addon-message-text">
<core-format-text [text]="offlineComment.content" [contextLevel]="contextLevel" [contextInstanceId]="instanceId"
[courseId]="courseId">
</core-format-text>
</p>
</ion-label>
<ion-note>
<ion-icon name="fas-clock" aria-hidden="true"></ion-icon> {{ 'core.notsent' | translate }}
</ion-note>
<div class="tail"></div>
<ion-button *ngIf="showDelete" slot="end" fill="clear"
[@coreSlideInOut]="'fromRight'" color="danger" (click)="deleteComment($event, offlineComment)"
[attr.aria-label]="'core.delete' | translate" class="addon-messages-delete-button">
<ion-icon name="fas-trash" slot="icon-only" aria-hidden="true"></ion-icon>
</ion-button>
</ion-item>
</ion-list>
<core-infinite-loading [enabled]="canLoadMore" (action)="loadMore($event)" [error]="loadMoreError"></core-infinite-loading>
</core-loading>
<ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end" *ngIf="canAddComments">
<ion-fab-button (click)="addComment($event)" [attr.aria-label]="'core.comments.addcomment' | translate">
<ion-icon name="fas-plus" aria-hidden="true"></ion-icon>
</ion-fab-button>
</ion-fab>
</ion-content>
<ion-footer color="light" class="footer-adjustable" *ngIf="commentsLoaded">
<ion-toolbar color="light">
<core-send-message-form [sendDisabled]="sending" [message]="newComment"
(onSubmit)="addComment($event)" [placeholder]="'core.comments.addcomment' | translate">
</core-send-message-form>
</ion-toolbar>
</ion-footer>

183
src/core/features/comments/pages/viewer/viewer.page.ts
View File

@ -15,7 +15,7 @@
import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { CoreEventObserver, CoreEvents } from '@singletons/events';
import { CoreAnimations } from '@components/animations';
import { ActivatedRoute, Params } from '@angular/router';
import { ActivatedRoute } from '@angular/router';
import { CoreSites } from '@services/sites';
import {
CoreComments,
@ -33,13 +33,14 @@ import { CoreNavigator } from '@services/navigator';
import { Translate } from '@singletons';
import { CoreUtils } from '@services/utils/utils';
import { CoreDomUtils } from '@services/utils/dom';
import { CoreUser, CoreUserProfile } from '@features/user/services/user';
import { CoreUser } from '@features/user/services/user';
import { CoreTextUtils } from '@services/utils/text';
import { CoreError } from '@classes/errors/error';
import { CoreCommentsOffline } from '@features/comments/services/comments-offline';
import { CoreCommentsDBRecord } from '@features/comments/services/database/comments';
import { CoreTimeUtils } from '@services/utils/time';
import { CoreCommentsAddComponent } from '@features/comments/components/add/add-modal';
import { CoreApp } from '@services/app';
import moment from 'moment';
/**
* Page that displays comments.
@ -48,12 +49,13 @@ import { CoreCommentsAddComponent } from '@features/comments/components/add/add-
selector: 'page-core-comments-viewer',
templateUrl: 'viewer.html',
animations: [CoreAnimations.SLIDE_IN_OUT],
styleUrls: ['viewer.scss'],
})
export class CoreCommentsViewerPage implements OnInit, OnDestroy {
@ViewChild(IonContent) content?: IonContent;
comments: CoreCommentsDataWithUser[] = [];
comments: CoreCommentsDataToDisplay[] = [];
commentsLoaded = false;
contextLevel!: ContextLevel;
instanceId!: number;
@ -73,10 +75,12 @@ export class CoreCommentsViewerPage implements OnInit, OnDestroy {
syncIcon = CoreConstants.ICON_LOADING;
offlineComment?: CoreCommentsOfflineWithUser;
currentUserId: number;
sending = false;
newComment = '';
protected addDeleteCommentsAvailable = false;
protected syncObserver?: CoreEventObserver;
protected currentUser?: CoreUserProfile;
protected viewDestroyed = false;
constructor(
protected route: ActivatedRoute,
@ -95,8 +99,6 @@ export class CoreCommentsViewerPage implements OnInit, OnDestroy {
this.refreshIcon = CoreConstants.ICON_LOADING;
this.syncIcon = CoreConstants.ICON_LOADING;
this.content?.scrollToTop();
this.page = 0;
this.comments = [];
this.fetchComments(false);
@ -151,9 +153,9 @@ export class CoreCommentsViewerPage implements OnInit, OnDestroy {
);
this.canAddComments = this.addDeleteCommentsAvailable && !!commentsResponse.canpost;
let comments = commentsResponse.comments.sort((a, b) => b.timecreated - a.timecreated);
let comments = commentsResponse.comments.sort((a, b) => a.timecreated - b.timecreated);
if (typeof commentsResponse.count != 'undefined') {
this.canLoadMore = (this.comments.length + comments.length) > commentsResponse.count;
this.canLoadMore = (this.comments.length + comments.length) < commentsResponse.count;
} else {
// Old style.
this.canLoadMore = commentsResponse.comments.length > 0 &&
@ -162,7 +164,13 @@ export class CoreCommentsViewerPage implements OnInit, OnDestroy {
comments = await Promise.all(comments.map((comment) => this.loadCommentProfile(comment)));
this.comments = this.comments.concat(comments);
this.comments = comments.concat(this.comments);
this.comments.forEach((comment, index) => {
comment.showDate = this.showDate(comment, this.comments[index - 1]);
comment.showUserData = this.showUserData(comment, this.comments[index - 1]);
comment.showTail = this.showTail(comment, this.comments[index + 1]);
});
this.canDeleteComments = this.addDeleteCommentsAvailable &&
(this.hasOffline || this.comments.some((comment) => !!comment.delete));
@ -179,6 +187,10 @@ export class CoreCommentsViewerPage implements OnInit, OnDestroy {
this.commentsLoaded = true;
this.refreshIcon = CoreConstants.ICON_REFRESH;
this.syncIcon = CoreConstants.ICON_SYNC;
if (this.page == 0) {
this.scrollToBottom();
}
}
}
@ -189,7 +201,7 @@ export class CoreCommentsViewerPage implements OnInit, OnDestroy {
* @param infiniteComplete Infinite scroll complete function. Only used from core-infinite-loading.
* @return Resolved when done.
*/
loadMore(infiniteComplete?: () => void): Promise<void> {
loadPrevious(infiniteComplete?: () => void): Promise<void> {
this.page++;
this.canLoadMore = false;
@ -262,34 +274,41 @@ export class CoreCommentsViewerPage implements OnInit, OnDestroy {
}
/**
* Add a new comment to the list.
* Send the comment or store it offline.
*
* @param e Event.
* @param text Comment text to add.
*/
async addComment(e: Event): Promise<void> {
e.preventDefault();
e.stopPropagation();
async addComment(text: string): Promise<void> {
CoreApp.closeKeyboard();
const loadingModal = await CoreDomUtils.showModalLoading('core.sending', true);
// Freeze the add comment button.
this.sending = true;
try {
const commentsResponse = await CoreComments.addComment(
text,
this.contextLevel,
this.instanceId,
this.componentName,
this.itemId,
this.area,
);
const params: Params = {
contextLevel: this.contextLevel,
instanceId: this.instanceId,
componentName: this.componentName,
itemId: this.itemId,
area: this.area,
content: this.offlineComment ? this.offlineComment!.content : '',
};
CoreDomUtils.showToast(
commentsResponse ? 'core.comments.eventcommentcreated' : 'core.datastoredoffline',
true,
3000,
);
const comment = await CoreDomUtils.openModal<CoreCommentsDataWithUser>({
component: CoreCommentsAddComponent,
componentProps: params,
});
if (comment) {
if (commentsResponse) {
this.invalidateComments();
const addedComments = await this.loadCommentProfile(comment);
const addedComments = await this.loadCommentProfile(commentsResponse);
addedComments.showDate = this.showDate(addedComments, this.comments[this.comments.length - 1]);
addedComments.showUserData = this.showUserData(addedComments, this.comments[this.comments.length - 1]);
addedComments.showTail = this.showTail(addedComments, this.comments[this.comments.length + 1]);
// Add the comment to the top.
this.comments = [addedComments].concat(this.comments);
this.comments = this.comments.concat([addedComments]);
this.canDeleteComments = this.addDeleteCommentsAvailable;
CoreEvents.trigger(CoreCommentsProvider.COMMENTS_COUNT_CHANGED_EVENT, {
@ -301,9 +320,18 @@ export class CoreCommentsViewerPage implements OnInit, OnDestroy {
countChange: 1,
}, CoreSites.getCurrentSiteId());
} else if (comment === false) {
} else if (commentsResponse === false) {
// Comments added in offline mode.
return this.loadOfflineData();
await this.loadOfflineData();
}
} catch (error) {
CoreDomUtils.showErrorModal(error);
} finally {
loadingModal.dismiss();
this.sending = false;
// New comments.
this.scrollToBottom();
}
}
@ -313,7 +341,7 @@ export class CoreCommentsViewerPage implements OnInit, OnDestroy {
* @param e Click event.
* @param comment Comment to delete.
*/
async deleteComment(e: Event, comment: CoreCommentsDataWithUser | CoreCommentsOfflineWithUser): Promise<void> {
async deleteComment(e: Event, comment: CoreCommentsDataToDisplay | CoreCommentsOfflineWithUser): Promise<void> {
e.preventDefault();
e.stopPropagation();
@ -349,8 +377,9 @@ export class CoreCommentsViewerPage implements OnInit, OnDestroy {
const deletedOnline = await CoreComments.deleteComment(deleteComment);
this.showDelete = false;
if (deletedOnline) {
const index = this.comments.findIndex((comment) => comment.id == comment.id);
if (deletedOnline && 'id' in comment) {
const index = this.comments.findIndex((commentinList) => commentinList.id == comment.id);
if (index >= 0) {
this.comments.splice(index, 1);
@ -396,7 +425,7 @@ export class CoreCommentsViewerPage implements OnInit, OnDestroy {
* @param comment Comment object.
* @return Promise resolved with modified comment when done.
*/
protected async loadCommentProfile(comment: CoreCommentsDataWithUser): Promise<CoreCommentsDataWithUser> {
protected async loadCommentProfile(comment: CoreCommentsDataToDisplay): Promise<CoreCommentsDataToDisplay> {
// Get the user profile image.
try {
const user = await CoreUser.getProfile(comment.userid!, undefined, true);
@ -410,6 +439,54 @@ export class CoreCommentsViewerPage implements OnInit, OnDestroy {
}
/**
* Check if the user info should be displayed for the current message.
* User data is only displayed if the previous message was from another user.
*
* @param comment Comment object.
* @param prevComment Previous comment object.
* @return Whether user data should be shown.
*/
protected showUserData(
comment: CoreCommentsDataToDisplay,
prevComment?: CoreCommentsDataToDisplay,
): boolean {
return comment.userid != this.currentUserId && (!prevComment || prevComment.userid != comment.userid || !!comment.showDate);
}
/**
* Check if a css tail should be shown.
*
* @param comment Comment object.
* @param nextComment Previous comment object.
* @return Whether user data should be shown.
*/
protected showTail(
comment: CoreCommentsDataToDisplay,
nextComment?: CoreCommentsDataToDisplay,
): boolean {
return !nextComment || nextComment.userid != comment.userid || !!nextComment.showDate;
}
/**
* Check if the date should be displayed between messages (when the day changes at midnight for example).
*
* @param comment Comment object.
* @param prevComment Previous comment object.
* @return True if messages are from diferent days, false othetwise.
*/
protected showDate(
comment: CoreCommentsDataToDisplay,
prevComment?: CoreCommentsDataToDisplay,
): boolean {
if (!prevComment) {
return true;
}
// Check if day has changed.
return !moment(comment.timecreated * 1000).isSame(prevComment.timecreated * 1000, 'day');
}
/**
* Load offline comments.
*
@ -433,14 +510,10 @@ export class CoreCommentsViewerPage implements OnInit, OnDestroy {
return;
}
if (!this.currentUser) {
this.currentUser = await CoreUser.getProfile(this.currentUserId, undefined, true);
if (this.newComment == '') {
this.newComment = this.offlineComment!.content;
}
if (this.currentUser) {
this.offlineComment!.profileimageurl = this.currentUser.profileimageurl;
this.offlineComment!.fullname = this.currentUser.fullname;
}
this.offlineComment!.userid = this.currentUserId;
return;
@ -480,7 +553,7 @@ export class CoreCommentsViewerPage implements OnInit, OnDestroy {
* @param e Click event.
* @param comment Comment to delete.
*/
async undoDeleteComment(e: Event, comment: CoreCommentsDataWithUser): Promise<void> {
async undoDeleteComment(e: Event, comment: CoreCommentsDataToDisplay): Promise<void> {
e.preventDefault();
e.stopPropagation();
@ -490,6 +563,18 @@ export class CoreCommentsViewerPage implements OnInit, OnDestroy {
this.showDelete = false;
}
/**
* Scroll bottom when render has finished.
*/
protected scrollToBottom(): void {
// Need a timeout to leave time to the view to be rendered.
setTimeout(() => {
if (!this.viewDestroyed) {
this.content?.scrollToBottom();
}
}, 100);
}
/**
* Toggle delete.
*/
@ -501,15 +586,19 @@ export class CoreCommentsViewerPage implements OnInit, OnDestroy {
* Page destroyed.
*/
ngOnDestroy(): void {
this.syncObserver && this.syncObserver.off();
this.syncObserver?.off();
this.viewDestroyed = true;
}
}
export type CoreCommentsDataWithUser = CoreCommentsData & {
export type CoreCommentsDataToDisplay = CoreCommentsData & {
profileimageurl?: string;
fullname?: string;
deleted?: boolean;
showDate?: boolean;
showTail?: boolean;
showUserData?: boolean;
};
export type CoreCommentsOfflineWithUser = CoreCommentsDBRecord & {

1
src/core/features/comments/pages/viewer/viewer.scss Normal file
View File

@ -0,0 +1 @@
@import "~theme/components/discussion.scss";

4
src/core/features/comments/services/comments.ts
View File

@ -85,11 +85,11 @@ export class CoreCommentsProvider {
itemId: number,
area: string = '',
siteId?: string,
): Promise<CoreCommentsData | boolean> {
): Promise<CoreCommentsData | false> {
siteId = siteId || CoreSites.getCurrentSiteId();
// Convenience function to store a comment to be synchronized later.
const storeOffline = async (): Promise<boolean> => {
const storeOffline = async (): Promise<false> => {
await CoreCommentsOffline.saveComment(content, contextLevel, instanceId, component, itemId, area, siteId);
return false;

185
src/theme/components/discussion.scss Normal file
View File

@ -0,0 +1,185 @@
@import "~theme/globals.scss";
:host {
ion-content {
--background: var(--background-alternative);
&::part(scroll) {
padding-bottom: 0 !important;
}
}
.addon-messages-discussion-container {
display: flex;
flex-direction: column;
padding-bottom: 15px;
background: var(--background-alternative);
}
.addon-messages-date {
font-weight: normal;
font-size: 0.9rem;
}
// Message item.
ion-item.addon-message {
border: 0;
border-radius: 4px;
padding: 0 8px 0 8px;
margin: 10px 8px 0 8px;
--background: var(--addon-messages-message-bg);
background: var(--background);
align-self: flex-start;
width: 90%;
max-width: 90%;
--min-height: var(--a11y-min-target-size);
position: relative;
@include core-transition(width);
// This is needed to display bubble tails.
overflow: visible;
&::part(native) {
--inner-border-width: 0;
--inner-padding-end: 0;
padding: 0;
margin: 0;
}
core-format-text > p:only-child {
display: inline;
}
.addon-message-user {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: .5rem;
margin-top: 0;
color: var(--ion-text-color);
core-user-avatar {
display: block;
--core-avatar-size: var(--addon-messages-avatar-size);
margin: 0;
}
div {
font-weight: 500;
flex-grow: 1;
@include padding-horizontal(.5rem);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
ion-note {
color: var(--addon-messages-message-note-text);
font-size: var(--addon-messages-message-note-font-size);
margin: 0;
padding: 0 0 8px 0;
align-self: flex-end;
}
&[tappable]:active {
--background: var(--addon-messages-message-activated-bg);
}
ion-label {
margin: 0;
padding: 8px 0;
}
.addon-message-text {
display: inline-flex;
* {
color: var(--ion-text-color);
}
}
.tail {
content: '';
width: 0;
height: 0;
border: 0.5rem solid transparent;
position: absolute;
touch-action: none;
bottom: 0;
}
// Defines when an item-message is the user's.
&.addon-message-mine {
--background: var(--addon-messages-message-mine-bg);
align-self: flex-end;
&[tappable]:active {
--background: var(--addon-messages-message-mine-activated-bg);
}
.spinner {
@include float(end);
@include margin(2px, -3px, -2px, 5px);
svg {
width: 16px;
height: 16px;
}
}
.tail {
@include position(null, -8px, null, null);
@include margin-horizontal(null, -0.5rem);
border-bottom-color: var(--addon-messages-message-mine-bg);
}
&[tappable]:active .tail {
border-bottom-color: var(--addon-messages-message-mine-activated-bg);
}
}
&.addon-message-not-mine .tail {
border-bottom-color: var(--addon-messages-message-bg);
@include position(null, null, null, -8px);
@include margin-horizontal(-0.5rem, null);
}
&[tappable].addon-message-not-mine.activated .tail {
border-bottom-color: var(--addon-messages-message-activated-bg);
}
.addon-messages-delete-button {
min-height: initial;
line-height: initial;
@include margin(0, null, 0, null);
height: var(--a11y-min-target-size) !important;
align-self: flex-end;
ion-icon {
font-size: 1.4em;
line-height: initial;
color: var(--ion-color-danger);
}
}
&.addon-message-no-user {
margin-top: 8px;
}
}
ion-item.addon-message.addon-message-mine + ion-item.addon-message.addon-message-no-user.addon-message-mine,
ion-item.addon-message.addon-message-not-mine + ion-item.addon-message.addon-message-no-user.addon-message-not-mine {
.item-heading {
margin-bottom: 0;
}
padding-top: 0;
}
}
:host-context(.ios) {
ion-footer .toolbar:last-child {
padding-bottom: 4px;
min-height: 0;
}
}

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

@ -364,7 +364,7 @@ ion-toolbar {
.item-dimmed {
opacity: 0.7;
--background: var(--gray-lighter);
--background: var(--ion-color-light);
}
// Extra text colors.