MOBILE-2774 messages: Unify styles

main
Pau Ferrer Ocaña 2018-12-17 10:49:37 +01:00
parent 74c59f3254
commit 942175e865
10 changed files with 51 additions and 57 deletions

View File

@ -4,10 +4,12 @@
</ion-refresher>
<core-loading [hideUntil]="loaded" class="core-loading-center">
<ion-list no-margin>
<a ion-item text-wrap *ngFor="let contact of contacts" [title]="contact.fullname" (click)="selectUser(contact.id)" [class.core-split-item-selected]="contact.id == selectedUserId" detail-none>
<a ion-item text-wrap *ngFor="let contact of contacts" [title]="contact.fullname" (click)="selectUser(contact.id)" [class.core-split-item-selected]="contact.id == selectedUserId" class="addon-messages-conversation-item">
<ion-avatar item-start core-user-avatar [user]="contact" [checkOnline]="true" [linkProfile]="false"></ion-avatar>
<h2><core-format-text [text]="contact.fullname"></core-format-text></h2>
<h2>
<core-format-text [text]="contact.fullname"></core-format-text>
<core-icon *ngIf="contact.isblocked" name="fa-ban" item-end></core-icon>
</h2>
</a>
</ion-list>
<core-empty-box *ngIf="!contacts.length" icon="person" [message]="'addon.messages.nocontactsgetstarted' | translate"></core-empty-box>

View File

@ -4,7 +4,7 @@
</ion-refresher>
<core-loading [hideUntil]="loaded" class="core-loading-center">
<ion-list no-margin>
<a ion-item text-wrap *ngFor="let request of requests" [title]="request.fullname" (click)="selectUser(request.id)" [class.core-split-item-selected]="request.id == selectedUserId" detail-none>
<a ion-item text-wrap *ngFor="let request of requests" [title]="request.fullname" (click)="selectUser(request.id)" [class.core-split-item-selected]="request.id == selectedUserId" class="addon-messages-conversation-item">
<ion-avatar item-start core-user-avatar [user]="request" [checkOnline]="true" [linkProfile]="false"></ion-avatar>
<h2><core-format-text [text]="request.fullname"></core-format-text></h2>
<p *ngIf="!request.iscontact && !request.confirmedOrDeclined">{{ 'addon.messages.wouldliketocontactyou' | translate }}</p>

View File

@ -18,7 +18,7 @@
</ion-item-divider>
<ng-container *ngFor="let contact of contacts[contactType]">
<!-- Don't show deleted users -->
<a ion-item text-wrap *ngIf="contact.profileimageurl || contact.profileimageurlsmall" [title]="contact.fullname" (click)="gotoDiscussion(contact.id)" [class.core-split-item-selected]="contact.id == discussionUserId" detail-none>
<a ion-item text-wrap *ngIf="contact.profileimageurl || contact.profileimageurlsmall" [title]="contact.fullname" (click)="gotoDiscussion(contact.id)" [class.core-split-item-selected]="contact.id == discussionUserId" class="addon-messages-conversation-item">
<ion-avatar core-user-avatar [user]="contact" item-start></ion-avatar>
<h2><core-format-text [text]="contact.fullname"></core-format-text></h2>
</a>

View File

@ -1,12 +0,0 @@
ion-app.app-root addon-messages-discussions {
h2 {
display: flex;
justify-content: space-between;
.note {
margin: 0;
align-self: flex-end;
display: inline-flex;
}
}
}

View File

@ -1,15 +0,0 @@
ion-app.app-root .addon-message-discussion {
h2 {
margin-top: 6px;
core-format-text {
font-weight: bold;
}
}
.note {
position: absolute;
@include position(0, 0, null, null);
margin: 4px 8px;
font-size: 1.3rem;
}
}

View File

@ -23,13 +23,11 @@
<p>{{ 'addon.messages.numparticipants' | translate:{$a: conversation.membercount} }}</p>
</ion-item>
<a ion-item text-wrap *ngFor="let member of members" (click)="closeModal(member.id)">
<a ion-item text-wrap *ngFor="let member of members" (click)="closeModal(member.id)" class="addon-messages-conversation-item">
<ion-avatar core-user-avatar [user]="member" [linkProfile]="false" [checkOnline]="member.showonlinestatus" item-start></ion-avatar>
<h2>
<p>
<core-format-text [text]="member.fullname"></core-format-text>
<core-icon name="fa-ban" *ngIf="member.isblocked" [attr.aria-label]="'addon.messages.contactblocked' | translate"></core-icon>
</p>
</h2>
</a>

View File

@ -1,17 +0,0 @@
ion-app.app-root page-addon-messages-group-conversations {
h2 {
display: flex;
justify-content: space-between;
.note {
margin: 0;
align-self: flex-end;
display: inline-flex;
font-size: initial;
}
}
core-format-text.addon-message-last-message {
display: inline;
}
}

View File

@ -162,6 +162,17 @@ ion-app.app-root page-addon-messages-discussion {
}
display: flex;
align-items: center;
core-format-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex-shrink: 1;
}
ion-icon {
@include margin-horizontal(6px, null);
}
}
}

View File

@ -1,4 +1,22 @@
ion-app.app-root page-addon-messages-group-conversations {
ion-app.app-root .addon-messages-conversation-item,
ion-app.app-root .addon-message-discussion {
h2 {
core-format-text {
font-weight: bold;
}
ion-icon {
@include margin(null, null, null, 2px);
}
}
.note {
position: absolute;
@include position(0, 0, null, null);
margin: 4px 8px;
font-size: 1.3rem;
}
.addon-message-last-message {
display: flex;
flex-direction: row;
@ -9,7 +27,7 @@ ion-app.app-root page-addon-messages-group-conversations {
.addon-message-last-message-user {
white-space: nowrap;
color: $black;
@include margin(null, 2px, null, null)
@include margin(null, 2px, null, null);
}
.addon-message-last-message-text {
@ -19,3 +37,9 @@ ion-app.app-root page-addon-messages-group-conversations {
flex-shrink: 1;
}
}
ion-app.app-root .addon-message-discussion {
h2 {
margin-top: 6px;
}
}

View File

@ -39,7 +39,10 @@
<ion-note *ngIf="result.lastmessagedate > 0">
{{result.lastmessagedate | coreDateDayOrTime}}
</ion-note>
<core-format-text *ngIf="result.lastmessage" clean="true" singleLine="true" [text]="result.lastmessage"></core-format-text>
<p class="addon-message-last-message">
<span *ngIf="result.sentfromcurrentuser" class="addon-message-last-message-user">{{ 'addon.messages.you' | translate }}</span>
<core-format-text clean="true" singleLine="true" [text]="result.lastmessage" class="addon-message-last-message-text"></core-format-text>
</p>
</a>
<!-- Load more button for contacts and non-contacts -->