MOBILE-2774 messages: Unify styles
parent
74c59f3254
commit
942175e865
|
@ -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>
|
||||
<core-icon *ngIf="contact.isblocked" name="fa-ban" item-end></core-icon>
|
||||
<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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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>
|
||||
<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>
|
||||
</h2>
|
||||
</a>
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
@ -18,4 +36,10 @@ ion-app.app-root page-addon-messages-group-conversations {
|
|||
white-space: nowrap;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
}
|
||||
|
||||
ion-app.app-root .addon-message-discussion {
|
||||
h2 {
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
|
@ -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 -->
|
||||
|
|
Loading…
Reference in New Issue