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

MOBILE-3320 chat: Match styles with messaging

main
Pau Ferrer Ocaña 2021-05-25 10:02:33 +02:00
parent 586bda2b69
commit 02d2905c9a
10 changed files with 201 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

177
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,157 +15,7 @@
}
}
// 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 {
.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;
}
}

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 {

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;
}
}

185
src/theme/components/discussion.scss 100644
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.