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

MOBILE-2774 messages: Style conversation page

main
Pau Ferrer Ocaña 2018-12-11 15:40:45 +01:00
parent d74b09f8bc
commit 371c66407a
3 changed files with 90 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/addon/messages/pages/discussion/discussion.html
View File

@ -25,32 +25,32 @@
<core-loading [hideUntil]="loaded"> <core-loading [hideUntil]="loaded">
<!-- Load previous messages. --> <!-- Load previous messages. -->
<core-infinite-loading [enabled]="canLoadMore" (action)="loadPrevious($event)" position="top" [error]="loadMoreError"></core-infinite-loading> <core-infinite-loading [enabled]="canLoadMore" (action)="loadPrevious($event)" position="top" [error]="loadMoreError"></core-infinite-loading>
<ion-list class="addon-messages-discussion-container safe-area-page" [attr.aria-live]="'polite'"> <ion-list class="addon-messages-discussion-container safe-area-page" [class.addon-messages-discussion-group]="isGroup" [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">
<ion-chip *ngIf="message.showDate" class="addon-messages-date" color="light"> <h6 text-center *ngIf="message.showDate" class="addon-messages-date">
<ion-label>{{ message.timecreated | coreFormatDate: "LL" }}</ion-label> {{ message.timecreated | coreFormatDate: "LL" }}
</ion-chip> </h6>
<ion-chip class="addon-messages-unreadfrom" *ngIf="unreadMessageFrom && message.id == unreadMessageFrom" color="light"> <ion-chip class="addon-messages-unreadfrom" *ngIf="unreadMessageFrom && message.id == unreadMessageFrom" color="light">
<ion-label>{{ 'addon.messages.newmessages' | translate:{$a: title} }}</ion-label> <ion-label>{{ 'addon.messages.newmessages' | translate:{$a: title} }}</ion-label>
<ion-icon name="arrow-round-down"></ion-icon> <ion-icon name="arrow-round-down"></ion-icon>
</ion-chip> </ion-chip>
<ion-item text-wrap (longPress)="copyMessage(message)" class="addon-message" [class.addon-message-mine]="message.useridfrom == currentUserId" [@coreSlideInOut]="message.useridfrom == currentUserId ? '' : 'fromLeft'"> <ion-item text-wrap (longPress)="copyMessage(message)" class="addon-message" [class.addon-message-mine]="message.useridfrom == currentUserId" [class.addon-message-not-mine]="message.useridfrom != currentUserId" [class.addon-message-no-user]="!message.showUserData" [@coreSlideInOut]="message.useridfrom == currentUserId ? '' : 'fromLeft'">
<!-- User data. --> <!-- User data. -->
<ion-avatar item-start *ngIf="message.showUserData"> <h2 class="addon-message-user" >
<img [src]="members[message.useridfrom].profileimageurl" [alt]="'core.pictureof' | translate:{$a: members[message.useridfrom].fullname}" core-external-content onError="this.src='assets/img/user-avatar.png'"> <ion-avatar item-start core-user-avatar [user]="members[message.useridfrom]" [linkProfile]="false" *ngIf="message.showUserData"></ion-avatar>
</ion-avatar>
<h2 *ngIf="message.showUserData">{{ members[message.useridfrom].fullname }}</h2> <div *ngIf="message.showUserData">{{ members[message.useridfrom].fullname }}</div>
<ion-note *ngIf="!message.pending">{{ message.timecreated | coreFormatDate: "dftimedate" }}</ion-note>
<ion-note *ngIf="message.pending"><ion-icon name="time"></ion-icon></ion-note>
</h2>
<!-- 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"> <p class="addon-message-text">
<core-format-text (afterRender)="last && scrollToBottom()" [text]="message.text"></core-format-text> <core-format-text (afterRender)="last && scrollToBottom()" [text]="message.text"></core-format-text>
</p> </p>
<ion-note *ngIf="!message.pending">
{{ message.timecreated | coreFormatDate: "dftimedate" }}
</ion-note>
<ion-note *ngIf="message.pending"><ion-icon name="time"></ion-icon></ion-note>
<button ion-button icon-only clear="true" *ngIf="!message.sending && showDelete" (click)="deleteMessage(message, index)" class="addon-messages-delete-button" [@coreSlideInOut]="'fromRight'" [attr.aria-label]=" 'addon.messages.deletemessage' | translate"> <button ion-button icon-only clear="true" *ngIf="!message.sending && showDelete" (click)="deleteMessage(message, index)" class="addon-messages-delete-button" [@coreSlideInOut]="'fromRight'" [attr.aria-label]=" 'addon.messages.deletemessage' | translate">
<ion-icon name="trash" color="danger"></ion-icon> <ion-icon name="trash" color="danger"></ion-icon>

101
src/addon/messages/pages/discussion/discussion.scss
View File

@ -1,39 +1,93 @@
// Messages. // Messages.
$item-message-bg: $gray-lighter !default; $item-message-bg: $white !default;
$item-message-note-text: $gray-dark !default; $item-message-note-text: $gray-dark !default;
$item-message-note-font-size: 75% !default; $item-message-note-font-size: 75% !default;
$item-message-mine-bg: $blue-light !default; $item-message-mine-bg: $gray-light !default;
ion-app.app-root page-addon-messages-discussion { ion-app.app-root page-addon-messages-discussion {
ion-content {
background-color: $gray-lighter !important;
}
.addon-messages-discussion-container { .addon-messages-discussion-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-bottom: 15px; padding-bottom: 15px;
} }
.addon-messages-date, .addon-messages-date {
.addon-messages-unreadfrom { font-weight: normal;
margin-top: 10px; font-size: 1.4rem;
} }
.addon-messages-unreadfrom { .addon-messages-unreadfrom {
color: $blue; color: $core-color;
background-color: transparent;
margin-top: 10px;
ion-icon {
color: $core-color;
background-color: transparent;
}
} }
// Message item. // Message item.
.addon-message { .addon-message {
max-width: 80%;
border: 0; border: 0;
border-radius: 16px; border-radius: 4px;
padding: 10px; padding: 8px;
margin: 4px; @include margin(8px, 8px, 0, 8px);
background-color: $item-message-bg; background-color: $item-message-bg;
align-self: flex-start; align-self: flex-start;
width: auto; width: 90%;
max-width: 90%;
min-height: 0; min-height: 0;
position: relative; position: relative;
@include core-transition(width); @include core-transition(width);
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!important;
margin-top: 0;
ion-avatar {
display: block;
min-width: 30px;
min-height: 30px;
margin: 0;
img {
width: 30px;
height: 30px;
}
}
div {
font-weight: 500;
flex-grow: 1;
@include padding-horizontal(.5rem);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.note {
@include text-align('end');
color: $item-message-note-text;
font-size: $item-message-note-font-size;
}
}
&.addon-message-no-user .addon-message-user .note {
width: 100%;
}
&.activated { &.activated {
background-color: darken($item-message-bg, 10%); background-color: darken($item-message-bg, 10%);
} }
@ -53,12 +107,6 @@ ion-app.app-root page-addon-messages-discussion {
display: inline-flex; display: inline-flex;
} }
.note {
align-self: flex-end;
color: $item-message-note-text;
font-size: $item-message-note-font-size;
@include margin(null, null, null, 10px);
}
.addon-messages-delete-button { .addon-messages-delete-button {
min-height: initial; min-height: initial;
line-height: initial; line-height: initial;
@ -76,11 +124,22 @@ ion-app.app-root page-addon-messages-discussion {
} }
} }
.addon-messages-discussion-group .addon-message + .addon-message-no-user,
.addon-message.addon-message-mine + .addon-message-no-user.addon-message-mine,
.addon-message.addon-message-not-mine + .addon-message-no-user.addon-message-not-mine {
h2 {
margin-bottom: 0;
}
margin-top: -4px;
padding-top: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
// 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-color: $item-message-mine-bg; background-color: $item-message-mine-bg;
align-self: flex-end; align-self: flex-end;
max-width: 80%;
&.activated { &.activated {
background-color: darken($item-message-mine-bg, 10%); background-color: darken($item-message-mine-bg, 10%);
@ -97,12 +156,6 @@ ion-app.app-root page-addon-messages-discussion {
} }
} }
.addon-message .item-content,
.addon-message-mine .item-content {
background-color: transparent;
padding: 0;
}
.toolbar-title { .toolbar-title {
img { img {
@include margin-horizontal(null, 6px); @include margin-horizontal(null, 6px);

5
src/theme/format-text.scss
View File

@ -184,9 +184,4 @@ ion-app.app-root {
width: min-content; width: min-content;
display: inline; display: inline;
} }
// Message item.
.item-message core-format-text > p:only-child {
display: inline;
}
} }