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

MOBILE-4470 group: Improve Group selector look and feel

main
Pau Ferrer Ocaña 2024-05-08 12:42:21 +02:00
parent cacc36d336
commit f42ab61f59
3 changed files with 15 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/core/components/group-selector/group-selector.html
View File

@ -1,15 +1,19 @@
<ng-container *ngIf="groupInfo && groupInfo.groups.length > 0 && (groupInfo.separateGroups || groupInfo.visibleGroups)"> <ng-container *ngIf="groupInfo && groupInfo.groups.length > 0 && (groupInfo.separateGroups || groupInfo.visibleGroups)">
<ion-card class="core-info-card" *ngIf="multipleGroupsMessage && groupInfo.groups && groupInfo.groups.length > 1"> <ion-card class="core-info-card" *ngIf="multipleGroupsMessage && groupInfo.groups && groupInfo.groups.length > 1">
<ion-item> <ion-item class="ion-text-wrap">
<ion-icon name="fas-circle-question" slot="start" aria-hidden="true" /> <ion-icon name="fas-circle-question" slot="start" aria-hidden="true" />
<ion-label>{{ multipleGroupsMessage }}</ion-label> <ion-label>
<p class="item-label">{{ multipleGroupsMessage }}</p>
</ion-label>
</ion-item> </ion-item>
</ion-card> </ion-card>
<ion-item class="ion-text-wrap core-group-selector"> <ion-item class="ion-text-wrap core-group-selector" lines="full">
<ion-select [label]="(groupInfo.separateGroups ? 'core.groupsseparate': 'core.groupsvisible') | translate" [(ngModel)]=" selected" <ion-icon name="fas-user-group" slot="start" aria-hidden="true" />
(ionChange)="selectedChange.emit(selected)" interface="action-sheet" [cancelText]="'core.cancel' | translate" <ion-select [(ngModel)]=" selected" (ionChange)="selectedChange.emit(selected)" interface="action-sheet"
[interfaceOptions]="{header: 'core.group' | translate}"> [cancelText]="'core.cancel' | translate" [interfaceOptions]="{header: 'core.group' | translate}">
<p class="item-heading" slot="label">{{ (groupInfo.separateGroups ? 'core.groupsseparate': 'core.groupsvisible') | translate }}
</p>
<ion-select-option *ngFor="let group of groupInfo.groups" [value]=" group.id"> <ion-select-option *ngFor="let group of groupInfo.groups" [value]=" group.id">
<core-format-text [text]="group.name" contextLevel="course" [contextInstanceId]="courseId" [wsNotFiltered]="true" /> <core-format-text [text]="group.name" contextLevel="course" [contextInstanceId]="courseId" [wsNotFiltered]="true" />
</ion-select-option> </ion-select-option>

4
src/core/components/group-selector/group-selector.scss 100644
View File

@ -0,0 +1,4 @@
.core-group-selector ion-icon {
--webkit-margin-end: 16px;
margin-inline-end: 16px;
}

1
src/core/components/group-selector/group-selector.ts
View File

@ -27,6 +27,7 @@ import { CoreGroupInfo } from '@services/groups';
@Component({ @Component({
selector: 'core-group-selector', selector: 'core-group-selector',
templateUrl: 'group-selector.html', templateUrl: 'group-selector.html',
styleUrl: 'group-selector.scss',
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class CoreGroupSelectorComponent { export class CoreGroupSelectorComponent {