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

MOBILE-3814 messages: Fix on some styles

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2022-03-01 15:38:22 +01:00
parent e37b68dd47
commit d973bd3028
7 changed files with 184 additions and 197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/addons/messages/pages/discussion/discussion.html
View File

@ -69,8 +69,7 @@
<h2 class="sr-only">{{ title }}</h2> <h2 class="sr-only">{{ title }}</h2>
<ion-list class="addon-messages-discussion-container list-item-limited-width" [class.addon-messages-discussion-group]="isGroup" <ion-list class="addon-messages-discussion-container" [class.addon-messages-discussion-group]="isGroup" [attr.aria-live]="'polite'">
[attr.aria-live]="'polite'">
<ng-container *ngFor="let message of messages; index as index; last as last"> <ng-container *ngFor="let message of messages; index as index; last as last">
<h3 class="ion-text-center addon-messages-date" *ngIf="message.showDate"> <h3 class="ion-text-center addon-messages-date" *ngIf="message.showDate">
{{ message.timecreated | coreFormatDate: "strftimedayshort" }} {{ message.timecreated | coreFormatDate: "strftimedayshort" }}
@ -100,10 +99,10 @@
</div> </div>
<!-- Some messages have <p> and some others don't. Add a <p> so they all have same styles. --> <!-- Some messages have <p> and some others don't. Add a <p> so they all have same styles. -->
<p class="addon-message-text"> <div class="addon-message-text">
<core-format-text (afterRender)="last && scrollToBottom()" [text]="message.text" contextLevel="system" <core-format-text (afterRender)="last && scrollToBottom()" [text]="message.text" contextLevel="system"
[contextInstanceId]="0"></core-format-text> [contextInstanceId]="0"></core-format-text>
</p> </div>
</ion-label> </ion-label>
<ion-note *ngIf="!message.pending" slot="end">{{ message.timecreated | coreFormatDate: "strftimetime" }}</ion-note> <ion-note *ngIf="!message.pending" slot="end">{{ message.timecreated | coreFormatDate: "strftimetime" }}</ion-note>
<ion-note *ngIf="message.pending" slot="end"> <ion-note *ngIf="message.pending" slot="end">

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

@ -93,13 +93,13 @@
<div>{{ message.userfullname }}</div> <div>{{ message.userfullname }}</div>
</h2> </h2>
<p class="addon-message-text"> <div class="addon-message-text">
<core-format-text [text]="message.message" contextLevel="module" [contextInstanceId]="cmId" <core-format-text [text]="message.message" contextLevel="module" [contextInstanceId]="cmId"
[courseId]="courseId" (afterRender)="last && scrollToBottom()"> [courseId]="courseId" (afterRender)="last && scrollToBottom()">
</core-format-text> </core-format-text>
</p> </div>
</ion-label> </ion-label>
<ion-note>{{ message.timestamp * 1000 | coreFormatDate: "strftimetime" }}</ion-note> <ion-note slot="end">{{ message.timestamp * 1000 | coreFormatDate: "strftimetime" }}</ion-note>
<div class="tail" *ngIf="message.showTail"></div> <div class="tail" *ngIf="message.showTail"></div>
</ion-item> </ion-item>
</ng-container> </ng-container>

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

@ -86,13 +86,13 @@
<div *ngIf="message.showUserData">{{ message.userfullname }}</div> <div *ngIf="message.showUserData">{{ message.userfullname }}</div>
</h2> </h2>
<p class="addon-message-text"> <div class="addon-message-text">
<core-format-text [text]="message.message" contextLevel="module" [contextInstanceId]="cmId" <core-format-text [text]="message.message" contextLevel="module" [contextInstanceId]="cmId"
[courseId]="courseId"> [courseId]="courseId">
</core-format-text> </core-format-text>
</p> </div>
<ion-note>{{ message.timestamp * 1000 | coreFormatDate: "strftimetime" }}</ion-note>
</ion-label> </ion-label>
<ion-note slot="end">{{ message.timestamp * 1000 | coreFormatDate: "strftimetime" }}</ion-note>
<div class="tail" *ngIf="message.showTail"></div> <div class="tail" *ngIf="message.showTail"></div>
</ion-item> </ion-item>
</ng-container> </ng-container>

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

@ -38,7 +38,7 @@
<core-infinite-loading [enabled]="canLoadMore" position="top" (action)="loadPrevious($event)" [error]="loadMoreError"> <core-infinite-loading [enabled]="canLoadMore" position="top" (action)="loadPrevious($event)" [error]="loadMoreError">
</core-infinite-loading> </core-infinite-loading>
<ion-list class="addon-messages-discussion-container list-item-limited-width"> <ion-list class="addon-messages-discussion-container">
<ng-container *ngFor="let comment of comments; index as index; last as last"> <ng-container *ngFor="let comment of comments; index as index; last as last">
<p class="ion-text-center addon-messages-date" *ngIf="comment.showDate"> <p class="ion-text-center addon-messages-date" *ngIf="comment.showDate">
@ -56,13 +56,13 @@
<div>{{ comment.fullname }}</div> <div>{{ comment.fullname }}</div>
</h2> </h2>
<p class="addon-message-text"> <div class="addon-message-text">
<core-format-text [text]="comment.content" [contextLevel]="contextLevel" [contextInstanceId]="instanceId" <core-format-text [text]="comment.content" [contextLevel]="contextLevel" [contextInstanceId]="instanceId"
[courseId]="courseId"> [courseId]="courseId">
</core-format-text> </core-format-text>
</p> </div>
</ion-label> </ion-label>
<ion-note> <ion-note slot="end">
<ng-container *ngIf="!comment.deleted"> <ng-container *ngIf="!comment.deleted">
{{ comment.timecreated * 1000 | coreFormatDate: 'strftimetime' }} {{ comment.timecreated * 1000 | coreFormatDate: 'strftimetime' }}
</ng-container> </ng-container>
@ -94,11 +94,11 @@
{{ 'core.thereisdatatosync' | translate:{$a: 'core.comments.comments' | translate | lowercase } }} {{ 'core.thereisdatatosync' | translate:{$a: 'core.comments.comments' | translate | lowercase } }}
</p> </p>
<p class="addon-message-text"> <div class="addon-message-text">
<core-format-text [text]="offlineComment.content" [contextLevel]="contextLevel" [contextInstanceId]="instanceId" <core-format-text [text]="offlineComment.content" [contextLevel]="contextLevel" [contextInstanceId]="instanceId"
[courseId]="courseId"> [courseId]="courseId">
</core-format-text> </core-format-text>
</p> </div>
</ion-label> </ion-label>
<ion-note> <ion-note>
<ion-icon name="fas-clock" aria-hidden="true"></ion-icon> {{ 'core.notsent' | translate }} <ion-icon name="fas-clock" aria-hidden="true"></ion-icon> {{ 'core.notsent' | translate }}

2
src/core/features/mainmenu/components/user-menu/user-menu.ts
View File

@ -207,7 +207,7 @@ export class CoreMainMenuUserMenuComponent implements OnInit, OnDestroy {
const closeAll = await CoreDomUtils.openSideModal<boolean>({ const closeAll = await CoreDomUtils.openSideModal<boolean>({
component: CoreLoginSitesComponent, component: CoreLoginSitesComponent,
cssClass: 'core-modal-lateral-sm', cssClass: 'core-modal-lateral core-modal-lateral-sm',
}); });
if (closeAll) { if (closeAll) {

86
src/theme/components/discussion.scss
View File

@ -1,8 +1,15 @@
@import "~theme/globals.scss"; @import "~theme/globals.scss";
:host { :host-context(.ios) {
ion-footer .toolbar:last-child {
padding-bottom: 4px;
min-height: 0;
}
}
ion-content { ion-content {
--background: var(--background-alternative); --content-background: var(--background-alternative);
--background: var(--content-background);
&::part(scroll) { &::part(scroll) {
padding-bottom: 0 !important; padding-bottom: 0 !important;
@ -12,8 +19,8 @@
.addon-messages-discussion-container { .addon-messages-discussion-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-bottom: 15px; padding-bottom: 16px !important;
background: var(--background-alternative); background: var(--content-background);
} }
.addon-messages-date { .addon-messages-date {
@ -23,15 +30,19 @@
// Message item. // Message item.
ion-item.addon-message { ion-item.addon-message {
--message-background: var(--addon-messages-message-bg);
--message-activated-background: var(--addon-messages-message-activated-bg);
--message-alignment: flex-start;
border: 0; border: 0;
border-radius: var(--small-radius); border-radius: var(--medium-radius);
padding: 0 8px 0 8px; padding: 0 8px 0 8px;
margin: 10px 8px 0 8px; margin: 8px;
--background: var(--addon-messages-message-bg); --background: var(--message-background);
background: var(--background); background: var(--message-background);
align-self: flex-start; align-self: var(--message-alignment);
width: 90%; width: 90%;
max-width: 90%; max-width: var(--list-item-max-width);
--min-height: var(--a11y-min-target-size); --min-height: var(--a11y-min-target-size);
position: relative; position: relative;
@include core-transition(width); @include core-transition(width);
@ -45,6 +56,10 @@
margin: 0; margin: 0;
} }
&:hover {
filter: drop-shadow(2px 2px 2px rgba(0,0,0,.3));
}
core-format-text > p:only-child { core-format-text > p:only-child {
display: inline; display: inline;
} }
@ -67,7 +82,8 @@
div { div {
font-weight: 500; font-weight: 500;
flex-grow: 1; flex-grow: 1;
@include padding-horizontal(.5rem); padding-left: .5rem;
padding-right: .5rem;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -78,12 +94,12 @@
color: var(--addon-messages-message-note-text); color: var(--addon-messages-message-note-text);
font-size: var(--addon-messages-message-note-font-size); font-size: var(--addon-messages-message-note-font-size);
margin: 0; margin: 0;
padding: 0 0 8px 0; padding: 8px 0;
align-self: flex-end; align-self: flex-start;
} }
&[tappable]:active { &[tappable]:active {
--background: var(--addon-messages-message-activated-bg); --message-background: var(--message-activated-background);
} }
ion-label { ion-label {
@ -106,16 +122,14 @@
position: absolute; position: absolute;
touch-action: none; touch-action: none;
bottom: 0; bottom: 0;
border-bottom-color: var(--message-background);
} }
// Defines when an item-message is the user's. // Defines when an item-message is the user's.
&.addon-message-mine { &.addon-message-mine {
--background: var(--addon-messages-message-mine-bg); --message-background: var(--addon-messages-message-mine-bg);
align-self: flex-end; --message-activated-background: var(--addon-messages-message-mine-activated-bg);
--message-alignment: flex-end;
&[tappable]:active {
--background: var(--addon-messages-message-mine-activated-bg);
}
.spinner { .spinner {
@include float(end); @include float(end);
@ -130,28 +144,19 @@
.tail { .tail {
@include position(null, -8px, null, null); @include position(null, -8px, null, null);
@include margin-horizontal(null, -0.5rem); @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 { &.addon-message-not-mine .tail {
border-bottom-color: var(--addon-messages-message-bg);
@include position(null, null, null, -8px); @include position(null, null, null, -8px);
@include margin-horizontal(-0.5rem, null); @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 { .addon-messages-delete-button {
min-height: initial; min-height: initial;
line-height: initial; line-height: initial;
@include margin(0, null, 0, null); margin-top: 0px;
margin-bottom: 0px;
height: var(--a11y-min-target-size) !important; height: var(--a11y-min-target-size) !important;
align-self: flex-end; align-self: flex-end;
@ -163,23 +168,6 @@
} }
&.addon-message-no-user { &.addon-message-no-user {
margin-top: 8px; margin-top: 0px;
}
}
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;
} }
} }

6
src/theme/theme.light.scss
View File

@ -104,7 +104,7 @@
ion-content { ion-content {
--background: var(--ion-background-color); --background: var(--ion-background-color);
--background-alternative: var(--light); --background-alternative: var(--gray-200);
} }
--core-bottom-tabs-background: var(--white); --core-bottom-tabs-background: var(--white);
@ -324,8 +324,8 @@
--addon-messages-message-activated-bg: var(--gray-200); --addon-messages-message-activated-bg: var(--gray-200);
--addon-messages-message-note-text: var(--gray-500); --addon-messages-message-note-text: var(--gray-500);
--addon-messages-message-note-font-size: 75%; --addon-messages-message-note-font-size: 75%;
--addon-messages-message-mine-bg: var(--gray-200); --addon-messages-message-mine-bg: var(--gray-300);
--addon-messages-message-mine-activated-bg: var(--gray-300); --addon-messages-message-mine-activated-bg: var(--gray-400);
--addon-messages-avatar-size: 30px; --addon-messages-avatar-size: 30px;
--addon-messages-discussion-badge: var(--primary); --addon-messages-discussion-badge: var(--primary);
--addon-messages-discussion-badge-text: var(--white); --addon-messages-discussion-badge-text: var(--white);