MOBILE-3320 chat: Match styles with messaging
Pau Ferrer Ocaña
parent
586bda2b69
commit
02d2905c9a
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import "~theme/components/discussion.scss";
|
||||
|
||||
:host {
|
||||
.addon-mod_chat-notice {
|
||||
margin-top: 8px;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import "~theme/components/discussion.scss";
|
||||
|
||||
:host {
|
||||
.addon-mod_chat-notice {
|
||||
margin-top: 8px;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
||||
|
|
|
|||
|
|
@ -20,5 +20,6 @@
|
|||
line-height: 20px;
|
||||
padding: 9px 12px 11px;
|
||||
margin: 5px 10px;
|
||||
resize: vertical;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -364,7 +364,7 @@ ion-toolbar {
|
|||
|
||||
.item-dimmed {
|
||||
opacity: 0.7;
|
||||
--background: var(--gray-lighter);
|
||||
--background: var(--ion-color-light);
|
||||
}
|
||||
|
||||
// Extra text colors.
|
||||
|
|
|
|||
Loading…
Reference in New Issue