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

MOBILE-2774 messages: Style conversation list

main
Pau Ferrer Ocaña 2018-12-11 12:58:11 +01:00
parent 371c66407a
commit e6ef1f2260
6 changed files with 47 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/addon/messages/components/discussions/addon-messages-discussions.html
View File

@ -12,7 +12,7 @@
<h2>{{ 'core.searchresults' | translate }}</h2> <h2>{{ 'core.searchresults' | translate }}</h2>
<ion-note item-end>{{ search.results.length }}</ion-note> <ion-note item-end>{{ search.results.length }}</ion-note>
</ion-item-divider> </ion-item-divider>
<a ion-item text-wrap *ngFor="let result of search.results" [title]="result.fullname" (click)="gotoDiscussion(result.userid, result.messageid)" [class.core-split-item-selected]="result.userid == discussionUserId" detail-none> <a ion-item text-wrap *ngFor="let result of search.results" [title]="result.fullname" (click)="gotoDiscussion(result.userid, result.messageid)" [class.core-split-item-selected]="result.userid == discussionUserId" class="addon-message-discussion">
<ion-avatar core-user-avatar [user]="result" item-start></ion-avatar> <ion-avatar core-user-avatar [user]="result" item-start></ion-avatar>
<h2><core-format-text [text]="result.fullname"></core-format-text></h2> <h2><core-format-text [text]="result.fullname"></core-format-text></h2>
<p><core-format-text clean="true" singleLine="true" [text]="result.lastmessage"></core-format-text></p> <p><core-format-text clean="true" singleLine="true" [text]="result.lastmessage"></core-format-text></p>
@ -20,15 +20,15 @@
</ion-list> </ion-list>
<ion-list *ngIf="!search.showResults" no-margin> <ion-list *ngIf="!search.showResults" no-margin>
<a ion-item text-wrap *ngFor="let discussion of discussions" [title]="discussion.fullname" (click)="gotoDiscussion(discussion.message.user)" [class.core-split-item-selected]="discussion.message.user == discussionUserId" detail-none> <a ion-item text-wrap *ngFor="let discussion of discussions" [title]="discussion.fullname" (click)="gotoDiscussion(discussion.message.user)" [class.core-split-item-selected]="discussion.message.user == discussionUserId" class="addon-message-discussion">
<ion-avatar core-user-avatar [user]="discussion" item-start></ion-avatar> <ion-avatar core-user-avatar [user]="discussion" item-start></ion-avatar>
<h2> <h2>
<core-format-text [text]="discussion.fullname"></core-format-text> <core-format-text [text]="discussion.fullname"></core-format-text>
</h2>
<ion-note *ngIf="discussion.message.timecreated > 0 || discussion.unread"> <ion-note *ngIf="discussion.message.timecreated > 0 || discussion.unread">
<span *ngIf="discussion.unread" class="core-primary-circle"></span> <span *ngIf="discussion.unread" class="core-primary-circle"></span>
<span *ngIf="discussion.message.timecreated > 0">{{discussion.message.timecreated / 1000 | coreDateDayOrTime}}</span> <span *ngIf="discussion.message.timecreated > 0">{{discussion.message.timecreated / 1000 | coreDateDayOrTime}}</span>
</ion-note> </ion-note>
</h2>
<p><core-format-text clean="true" singleLine="true" [text]="discussion.message.message"></core-format-text></p> <p><core-format-text clean="true" singleLine="true" [text]="discussion.message.message"></core-format-text></p>
</a> </a>
</ion-list> </ion-list>

18
src/addon/messages/components/discussions/discussions.scss
View File

@ -1,13 +1,15 @@
ion-app.app-root addon-messages-discussions { ion-app.app-root .addon-message-discussion {
h2 { h2 {
display: flex; margin-top: 6px;
justify-content: space-between; core-format-text {
font-weight: bold;
}
}
.note { .note {
margin: 0; position: absolute;
align-self: flex-end; @include position(0, 0, null, null);
display: inline-flex; margin: 4px 8px;
font-size: initial; font-size: 1.3rem;
}
} }
} }

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

@ -23,7 +23,7 @@ ion-app.app-root page-addon-messages-discussion {
.addon-messages-unreadfrom { .addon-messages-unreadfrom {
color: $core-color; color: $core-color;
background-color: transparent; background-color: transparent;
margin-top: 10px; margin-top: 6px;
ion-icon { ion-icon {
color: $core-color; color: $core-color;
background-color: transparent; background-color: transparent;

16
src/addon/messages/pages/group-conversations/group-conversations.html
View File

@ -20,7 +20,7 @@
</ion-refresher> </ion-refresher>
<core-loading [hideUntil]="loaded" [message]="loadingMessage"> <core-loading [hideUntil]="loaded" [message]="loadingMessage">
<a ion-item text-wrap (click)="gotoContacts($event)" [attr.aria-label]="'addon.messages.contacts' | translate"> <a ion-item text-wrap (click)="gotoContacts($event)" [attr.aria-label]="'addon.messages.contacts' | translate" class="addon-message-discussion">
<ion-icon name="person" item-start></ion-icon> <ion-icon name="person" item-start></ion-icon>
<h2>{{ 'addon.messages.contacts' | translate }}</h2> <h2>{{ 'addon.messages.contacts' | translate }}</h2>
<ion-badge *ngIf="contactRequestsCount > 0" item-end>{{contactRequestsCount}}</ion-badge> <ion-badge *ngIf="contactRequestsCount > 0" item-end>{{contactRequestsCount}}</ion-badge>
@ -79,7 +79,7 @@
<!-- Template to render a list of conversations. --> <!-- Template to render a list of conversations. -->
<ng-template #conversationsTemplate let-conversations="conversations"> <ng-template #conversationsTemplate let-conversations="conversations">
<a ion-item text-wrap *ngFor="let conversation of conversations" [title]="conversation.name" detail-none (click)="gotoConversation(conversation.id, conversation.userid)" [class.core-split-item-selected]="(conversation.id && conversation.id == selectedConversationId) || (conversation.userid && conversation.userid == selectedUserId)" id="addon-message-conversation-{{ conversation.id ? conversation.id : 'user-' + conversation.userid }}"> <a ion-item text-wrap *ngFor="let conversation of conversations" [title]="conversation.name" (click)="gotoConversation(conversation.id, conversation.userid)" [class.core-split-item-selected]="(conversation.id && conversation.id == selectedConversationId) || (conversation.userid && conversation.userid == selectedUserId)" class="addon-message-discussion" id="addon-message-conversation-{{ conversation.id ? conversation.id : 'user-' + conversation.userid }}">
<!-- Group conversation image. --> <!-- Group conversation image. -->
<ion-avatar item-start *ngIf="conversation.type != typeIndividual && conversation.imageurl"> <ion-avatar item-start *ngIf="conversation.type != typeIndividual && conversation.imageurl">
<img [src]="conversation.imageurl" [alt]="conversation.name" core-external-content> <img [src]="conversation.imageurl" [alt]="conversation.name" core-external-content>
@ -89,18 +89,18 @@
<ion-avatar *ngIf="conversation.type == typeIndividual" core-user-avatar [user]="conversation.otherUser" [linkProfile]="false" [checkOnline]="conversation.showonlinestatus" item-start></ion-avatar> <ion-avatar *ngIf="conversation.type == typeIndividual" core-user-avatar [user]="conversation.otherUser" [linkProfile]="false" [checkOnline]="conversation.showonlinestatus" item-start></ion-avatar>
<h2> <h2>
<p>
<core-format-text [text]="conversation.name"></core-format-text> <core-format-text [text]="conversation.name"></core-format-text>
<core-icon name="fa-ban" *ngIf="conversation.isblocked" [attr.aria-label]="'addon.messages.contactblocked' | translate"></core-icon> <core-icon name="fa-ban" *ngIf="conversation.isblocked" [attr.aria-label]="'addon.messages.contactblocked' | translate"></core-icon>
</p> </h2>
<ion-note *ngIf="conversation.lastmessagedate > 0 || conversation.unreadcount"> <ion-note *ngIf="conversation.lastmessagedate > 0 || conversation.unreadcount">
<ion-badge *ngIf="conversation.unreadcount > 0">{{ conversation.unreadcount }}</ion-badge> <ion-badge *ngIf="conversation.unreadcount > 0">{{ conversation.unreadcount }}</ion-badge>
<span *ngIf="conversation.lastmessagedate > 0">{{conversation.lastmessagedate | coreDateDayOrTime}}</span> <span *ngIf="conversation.lastmessagedate > 0">{{conversation.lastmessagedate | coreDateDayOrTime}}</span>
</ion-note> </ion-note>
</h2> <p *ngIf="conversation.subname"><core-format-text [text]="conversation.subname"></core-format-text></p>
<p><core-format-text *ngIf="conversation.subname" [text]="conversation.subname"></core-format-text></p> <p class="addon-message-last-message">
<p> <span *ngIf="conversation.sentfromcurrentuser" class="addon-message-last-message-user">{{ 'addon.messages.you' | translate }}</span>
<span *ngIf="conversation.sentfromcurrentuser">{{ 'addon.messages.you' | translate }}</span> <core-format-text clean="true" singleLine="true" [text]="conversation.lastmessage" class="addon-message-last-message"></core-format-text> <core-format-text *ngIf="conversation.type != typeIndividual && conversation.members[0]" [text]="conversation.members[0].fullname + ':'" class="addon-message-last-message-user"></core-format-text>
<core-format-text clean="true" singleLine="true" [text]="conversation.lastmessage" class="addon-message-last-message-text"></core-format-text>
</p> </p>
</a> </a>
</ng-template> </ng-template>

24
src/addon/messages/pages/group-conversations/group-conversations.scss
View File

@ -1,17 +1,21 @@
ion-app.app-root page-addon-messages-group-conversations { ion-app.app-root page-addon-messages-group-conversations {
h2 { .addon-message-last-message {
display: flex; display: flex;
flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center;
.note {
margin: 0;
align-self: flex-end;
display: inline-flex;
font-size: initial;
}
} }
core-format-text.addon-message-last-message { .addon-message-last-message-user {
display: inline; white-space: nowrap;
color: $black;
@include margin(null, 2px, null, null)
}
.addon-message-last-message-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex-shrink: 1;
} }
} }

2
src/addon/messages/pages/search/search.html
View File

@ -30,7 +30,7 @@
</ion-item> </ion-item>
<!-- List of results --> <!-- List of results -->
<a ion-item text-wrap *ngFor="let result of item.results" [title]="result.fullname" (click)="openDiscussion(result.id)" [class.core-split-item-selected]="result.id == selectedUserId" detail-none> <a ion-item text-wrap *ngFor="let result of item.results" [title]="result.fullname" (click)="openDiscussion(result.id)" [class.core-split-item-selected]="result.id == selectedUserId" class="addon-message-discussion">
<ion-avatar item-start core-user-avatar [user]="result" [checkOnline]="true" [linkProfile]="false"></ion-avatar> <ion-avatar item-start core-user-avatar [user]="result" [checkOnline]="true" [linkProfile]="false"></ion-avatar>
<h2> <h2>
<core-format-text [text]="result.fullname"></core-format-text> <core-format-text [text]="result.fullname"></core-format-text>