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

MOBILE-3670 messages: Arrange space to make discussion index wider

main
Pau Ferrer Ocaña 2021-05-14 14:14:52 +02:00
parent 4925e47ab9
commit ac99f5585a
7 changed files with 71 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/addons/messages/messages-common.scss
View File

@ -1,6 +1,11 @@
:host { :host {
.addon-messages-conversation-item, .addon-messages-conversation-item,
.addon-message-discussion { .addon-message-discussion {
ion-label {
margin-right: 0;
margin-left: 0;
}
h2 { h2 {
core-format-text { core-format-text {
font-weight: bold; font-weight: bold;
@ -12,10 +17,18 @@
} }
ion-note { ion-note {
ion-badge { display: flex;
margin-left: 6px; flex-direction: column;
margin-right: 6px; align-self: flex-start;
vertical-align: middle; margin-left: 2px;
ion-badge, ion-icon {
margin-top: 3px;
align-self: flex-end;
}
.addon-message-last-message-date {
white-space: nowrap;
font-size: 11px;
} }
} }

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

@ -23,6 +23,8 @@
color: var(--ion-color-primary); color: var(--ion-color-primary);
background-color: transparent; background-color: transparent;
margin-top: 6px; margin-top: 6px;
margin-left: auto;
margin-right: auto;
ion-icon { ion-icon {
color: var(--ion-color-primary); color: var(--ion-color-primary);
background-color: transparent; background-color: transparent;

22
src/addons/messages/pages/discussions-35/discussions.html
View File

@ -52,16 +52,22 @@
<ng-container *ngIf="!search.showResults"> <ng-container *ngIf="!search.showResults">
<ion-item class="ion-text-wrap addon-message-discussion" *ngFor="let discussion of discussions" button <ion-item class="ion-text-wrap addon-message-discussion" *ngFor="let discussion of discussions" button
[attr.aria-label]="discussion.fullname" (click)="gotoDiscussion(discussion.message!.user)" [attr.aria-label]="discussion.fullname" (click)="gotoDiscussion(discussion.message!.user)"
[attr.aria-current]="discussion.message!.user == discussionUserId ? 'page' : 'false'"> [attr.aria-current]="discussion.message!.user == discussionUserId ? 'page' : 'false'" detail="false">
<core-user-avatar [user]="discussion" slot="start" checkOnline="false"></core-user-avatar> <core-user-avatar [user]="discussion" slot="start" checkOnline="false"></core-user-avatar>
<ion-label> <ion-label>
<h2>{{ discussion.fullname }}</h2> <div class="flex-row ion-justify-content-between">
<ion-note *ngIf="discussion.message!.timecreated > 0 || discussion.unread"> <h2>{{ discussion.fullname }}</h2>
<span *ngIf="discussion.unread" class="core-primary-circle"></span> <ion-note *ngIf="discussion.message!.timecreated > 0 || discussion.unread">
<span *ngIf="discussion.message!.timecreated > 0"> <span *ngIf="discussion.message!.timecreated > 0" class="addon-message-last-message-date">
{{discussion.message!.timecreated / 1000 | coreDateDayOrTime}} {{discussion.message!.timecreated / 1000 | coreDateDayOrTime}}
</span> </span>
</ion-note> <ion-icon *ngIf="discussion.unread" name="fas-circle" color="primary" aria-hidden="true">
</ion-icon>
<span *ngIf="discussion.unread" class="sr-only">
{{ 'addon.messages.unreadmessages' | translate }}
</span>
</ion-note>
</div>
<p> <p>
<core-format-text clean="true" singleLine="true" [text]="discussion.message!.message" <core-format-text clean="true" singleLine="true" [text]="discussion.message!.message"
contextLevel="system" [contextInstanceId]="0"> contextLevel="system" [contextInstanceId]="0">

34
src/addons/messages/pages/group-conversations/group-conversations.html
View File

@ -146,7 +146,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">
<ion-item class="ion-text-wrap addon-message-discussion" *ngFor="let conversation of conversations" button <ion-item class="ion-text-wrap addon-message-discussion" *ngFor="let conversation of conversations" button detail="false"
[attr.aria-label]="conversation.name" (click)="gotoConversation(conversation.id, conversation.userid)" [attr.aria-label]="conversation.name" (click)="gotoConversation(conversation.id, conversation.userid)"
[attr.aria-current]="((conversation.id && conversation.id == selectedConversationId) || [attr.aria-current]="((conversation.id && conversation.id == selectedConversationId) ||
(conversation.userid && conversation.userid == selectedUserId)) ? 'page': 'false'" (conversation.userid && conversation.userid == selectedUserId)) ? 'page': 'false'"
@ -162,13 +162,24 @@
[linkProfile]="false" [checkOnline]="conversation.showonlinestatus" slot="start"></core-user-avatar> [linkProfile]="false" [checkOnline]="conversation.showonlinestatus" slot="start"></core-user-avatar>
<ion-label> <ion-label>
<h2> <div class="flex-row ion-justify-content-between">
<core-format-text [text]="conversation.name" contextLevel="system" [contextInstanceId]="0"></core-format-text> <h2>
<ion-icon name="fas-user-slash" *ngIf="conversation.isblocked" <core-format-text [text]="conversation.name" contextLevel="system" [contextInstanceId]="0"></core-format-text>
[title]="'addon.messages.contactblocked' | translate"></ion-icon> <ion-icon name="fas-user-slash" *ngIf="conversation.isblocked"
<ion-icon *ngIf="conversation.ismuted" name="fas-volume-mute" [title]="'addon.messages.contactblocked' | translate"></ion-icon>
[title]="'addon.messages.mutedconversation' | translate"></ion-icon> <ion-icon *ngIf="conversation.ismuted" name="fas-volume-mute"
</h2> [title]="'addon.messages.mutedconversation' | translate"></ion-icon>
</h2>
<ion-note *ngIf="conversation.lastmessagedate > 0 || conversation.unreadcount">
<span *ngIf="conversation.lastmessagedate > 0" class="addon-message-last-message-date">
{{conversation.lastmessagedate | coreDateDayOrTime}}
</span>
<ion-badge *ngIf="conversation.unreadcount > 0" aria-label="true">{{ conversation.unreadcount }}</ion-badge>
<span *ngIf="conversation.unreadcount > 0" class="sr-only">
{{ 'addon.messages.unreadmessages' | translate:{$a: conversation.unreadcount} }}
</span>
</ion-note>
</div>
<p *ngIf="conversation.subname"><core-format-text [text]="conversation.subname" contextLevel="system" <p *ngIf="conversation.subname"><core-format-text [text]="conversation.subname" contextLevel="system"
[contextInstanceId]="0"></core-format-text></p> [contextInstanceId]="0"></core-format-text></p>
<p class="addon-message-last-message"> <p class="addon-message-last-message">
@ -181,12 +192,5 @@
class="addon-message-last-message-text" contextLevel="system" [contextInstanceId]="0"></core-format-text> class="addon-message-last-message-text" contextLevel="system" [contextInstanceId]="0"></core-format-text>
</p> </p>
</ion-label> </ion-label>
<ion-note *ngIf="conversation.lastmessagedate > 0 || conversation.unreadcount" slot="end">
<ion-badge *ngIf="conversation.unreadcount > 0" aria-label="true">{{ conversation.unreadcount }}</ion-badge>
<span *ngIf="conversation.unreadcount > 0" class="sr-only">
{{ 'addon.messages.unreadmessages' | translate:{$a: conversation.unreadcount} }}
</span>
<span *ngIf="conversation.lastmessagedate > 0">{{conversation.lastmessagedate | coreDateDayOrTime}}</span>
</ion-note>
</ion-item> </ion-item>
</ng-template> </ng-template>

4
src/addons/mod/quiz/pages/review/review.html
View File

@ -24,7 +24,9 @@
<ion-card-header class="ion-text-wrap"> <ion-card-header class="ion-text-wrap">
<ion-card-title> <ion-card-title>
<ng-container *ngIf="attempt.preview">{{ 'addon.mod_quiz.reviewofpreview' | translate }}</ng-container> <ng-container *ngIf="attempt.preview">{{ 'addon.mod_quiz.reviewofpreview' | translate }}</ng-container>
<ng-container *ngIf="!attempt.preview">{{ 'addon.mod_quiz.reviewofattempt' | translate:{$a: attempt.attempt} }}</ng-container> <ng-container *ngIf="!attempt.preview">
{{ 'addon.mod_quiz.reviewofattempt' | translate:{$a: attempt.attempt} }}
</ng-container>
</ion-card-title> </ion-card-title>
</ion-card-header> </ion-card-header>
<ion-list lines="none"> <ion-list lines="none">

11
src/core/features/search/components/search-box/search-box.scss
View File

@ -1,5 +1,5 @@
:host { :host {
height: 80px; height: 73px;
display: block; display: block;
position: relative; position: relative;
@ -8,9 +8,11 @@
left: 0; left: 0;
right: 0; right: 0;
z-index: 4; z-index: 4;
margin-top: 10px;
margin-bottom: 10px;
} }
ion-button.button:last-child { ion-button.button {
margin-left: unset; margin-left: unset;
margin-inline-start: 10px; margin-inline-start: 10px;
} }
@ -28,4 +30,9 @@
ion-label { ion-label {
margin: 0; margin: 0;
} }
ion-input {
--padding-start: 0;
--padding-end: 0;
}
} }

7
src/theme/theme.base.scss
View File

@ -554,6 +554,13 @@ textarea, button, select, input, a {
} }
} }
ion-loading:focus-visible,
ion-alert:focus-visible,
ion-popover:focus-visible,
ion-modal:focus-visible {
box-shadow: none;
}
ion-input .native-input{ ion-input .native-input{
&:focus, &:focus-visible { &:focus, &:focus-visible {
box-shadow: none; box-shadow: none;