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

MOBILE-3814 messages: Fix on some styles

main
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>
<ion-list class="addon-messages-discussion-container list-item-limited-width" [class.addon-messages-discussion-group]="isGroup"
[attr.aria-live]="'polite'">
<ion-list class="addon-messages-discussion-container" [class.addon-messages-discussion-group]="isGroup" [attr.aria-live]="'polite'">
<ng-container *ngFor="let message of messages; index as index; last as last">
<h3 class="ion-text-center addon-messages-date" *ngIf="message.showDate">
{{ message.timecreated | coreFormatDate: "strftimedayshort" }}
@ -100,10 +99,10 @@
</div>
<!-- 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"
[contextInstanceId]="0"></core-format-text>
</p>
</div>
</ion-label>
<ion-note *ngIf="!message.pending" slot="end">{{ message.timecreated | coreFormatDate: "strftimetime" }}</ion-note>
<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>
</h2>
<p class="addon-message-text">
<div class="addon-message-text">
<core-format-text [text]="message.message" contextLevel="module" [contextInstanceId]="cmId"
[courseId]="courseId" (afterRender)="last && scrollToBottom()">
</core-format-text>
</p>
</div>
</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>
</ion-item>
</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>
</h2>
<p class="addon-message-text">
<div class="addon-message-text">
<core-format-text [text]="message.message" contextLevel="module" [contextInstanceId]="cmId"
[courseId]="courseId">
</core-format-text>
</p>
<ion-note>{{ message.timestamp * 1000 | coreFormatDate: "strftimetime" }}</ion-note>
</div>
</ion-label>
<ion-note slot="end">{{ message.timestamp * 1000 | coreFormatDate: "strftimetime" }}</ion-note>
<div class="tail" *ngIf="message.showTail"></div>
</ion-item>
</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>
<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">
<p class="ion-text-center addon-messages-date" *ngIf="comment.showDate">
@ -56,13 +56,13 @@
<div>{{ comment.fullname }}</div>
</h2>
<p class="addon-message-text">
<div class="addon-message-text">
<core-format-text [text]="comment.content" [contextLevel]="contextLevel" [contextInstanceId]="instanceId"
[courseId]="courseId">
</core-format-text>
</p>
</div>
</ion-label>
<ion-note>
<ion-note slot="end">
<ng-container *ngIf="!comment.deleted">
{{ comment.timecreated * 1000 | coreFormatDate: 'strftimetime' }}
</ng-container>
@ -94,11 +94,11 @@
{{ 'core.thereisdatatosync' | translate:{$a: 'core.comments.comments' | translate | lowercase } }}
</p>
<p class="addon-message-text">
<div class="addon-message-text">
<core-format-text [text]="offlineComment.content" [contextLevel]="contextLevel" [contextInstanceId]="instanceId"
[courseId]="courseId">
</core-format-text>
</p>
</div>
</ion-label>
<ion-note>
<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>({
component: CoreLoginSitesComponent,
cssClass: 'core-modal-lateral-sm',
cssClass: 'core-modal-lateral core-modal-lateral-sm',
});
if (closeAll) {

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

@ -1,185 +1,173 @@
@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: var(--small-radius);
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: 0px;
--inner-padding-end: 0px;
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(--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;
}
}
ion-content {
--content-background: var(--background-alternative);
--background: var(--content-background);
&::part(scroll) {
padding-bottom: 0 !important;
}
}
.addon-messages-discussion-container {
display: flex;
flex-direction: column;
padding-bottom: 16px !important;
background: var(--content-background);
}
.addon-messages-date {
font-weight: normal;
font-size: 0.9rem;
}
// Message item.
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-radius: var(--medium-radius);
padding: 0 8px 0 8px;
margin: 8px;
--background: var(--message-background);
background: var(--message-background);
align-self: var(--message-alignment);
width: 90%;
max-width: var(--list-item-max-width);
--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: 0px;
--inner-padding-end: 0px;
padding: 0;
margin: 0;
}
&:hover {
filter: drop-shadow(2px 2px 2px rgba(0,0,0,.3));
}
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;
padding-left: .5rem;
padding-right: .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: 8px 0;
align-self: flex-start;
}
&[tappable]:active {
--message-background: var(--message-activated-background);
}
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;
border-bottom-color: var(--message-background);
}
// Defines when an item-message is the user's.
&.addon-message-mine {
--message-background: var(--addon-messages-message-mine-bg);
--message-activated-background: var(--addon-messages-message-mine-activated-bg);
--message-alignment: flex-end;
.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);
}
}
&.addon-message-not-mine .tail {
@include position(null, null, null, -8px);
@include margin-horizontal(-0.5rem, null);
}
.addon-messages-delete-button {
min-height: initial;
line-height: initial;
margin-top: 0px;
margin-bottom: 0px;
height: var(--a11y-min-target-size) !important;
align-self: flex-end;
ion-icon {
font-size: 1.4em;
line-height: initial;
color: var(--danger);
}
}
&.addon-message-no-user {
margin-top: 0px;
}
}

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

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