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

Merge pull request #4048 from crazyserver/MOBILE-4470 

Mobile 4470
main
Dani Palou 2024-05-15 13:24:57 +02:00 committed by GitHub
parent 691ad40490 f16c405115
commit 579f84a8b9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 65 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/addons/blog/pages/index/index.html
View File

@ -41,19 +41,17 @@
</h3> </h3>
@if (entry.userid === currentUserId && optionsAvailable) { @if (entry.userid === currentUserId && optionsAvailable) {
<div class="core-button-spinner"> <ion-button fill="clear" [attr.aria-label]="'core.displayoptions' | translate"
<ion-button fill="clear" [attr.aria-label]="'core.displayoptions' | translate" (click)="showEntryActionsPopover($event, entry)" class="entry-options">
(click)="showEntryActionsPopover($event, entry)"> <ion-icon slot="icon-only" aria-hidden="true" name="ellipsis-vertical" />
<ion-icon slot="icon-only" aria-hidden="true" name="ellipsis-vertical" /> </ion-button>
</ion-button>
</div>
} }
</div> </div>
<div class="entry-creation-info flex ion-align-items-center"> <div class="entry-creation-info flex ion-align-items-center">
<span> <div class="entry-avatar">
<core-user-avatar [user]="entry.user" [courseId]="entry.courseid" /> <core-user-avatar [user]="entry.user" [courseId]="entry.courseid" />
</span> </div>
@if (entry.user?.fullname && entry.created) { @if (entry.user?.fullname && entry.created) {
<span [innerHTML]="'core.bynameondate' | translate: { <span [innerHTML]="'core.bynameondate' | translate: {
@ -64,15 +62,14 @@
} }
</div> </div>
<div class="entry-summary" [collapsible-item]="64">
<div class="entry-summary" [ngClass]="{ 'border-bottom': entry.lastmodified <= entry.created }" [collapsible-item]="64">
<div class="ion-margin-bottom"> <div class="ion-margin-bottom">
<core-format-text [text]="entry.summary" [component]="component" [componentId]="entry.id" [contextLevel]="contextLevel" <core-format-text [text]="entry.summary" [component]="component" [componentId]="entry.id" [contextLevel]="contextLevel"
[contextInstanceId]="contextInstanceId" [courseId]="entry.courseid" /> [contextInstanceId]="contextInstanceId" [courseId]="entry.courseid" />
</div> </div>
@if (tagsEnabled && entry.tags && entry.tags!.length > 0) { @if (tagsEnabled && entry.tags && entry.tags!.length > 0) {
<ion-item class="ion-text-wrap"> <ion-item class="ion-text-wrap" lines="none">
<ion-label> <ion-label>
<div slot="start">{{ 'core.tag.tags' | translate }}:</div> <div slot="start">{{ 'core.tag.tags' | translate }}:</div>
<core-tag-list [tags]="entry.tags" /> <core-tag-list [tags]="entry.tags" />
@ -85,15 +82,14 @@
} }
@if (entry.uniquehash) { @if (entry.uniquehash) {
<ion-item [href]="entry.uniquehash" core-link [detail]="true"> <ion-item [href]="entry.uniquehash" core-link [detail]="true" lines="none">
<ion-label>{{ 'addon.blog.linktooriginalentry' | translate }}</ion-label> <ion-label>{{ 'addon.blog.linktooriginalentry' | translate }}</ion-label>
</ion-item> </ion-item>
} }
</div> </div>
@if (entry.lastmodified > entry.created || (entry.userid === currentUserId && entry.publishstate !== 'draft')) { @if (entry.lastmodified > entry.created || (entry.userid === currentUserId && entry.publishstate !== 'draft')) {
<ion-item class="entry-last-modification"> <ion-item class="entry-last-modification" lines="none">
@if (entry.lastmodified > entry.created) { @if (entry.lastmodified > entry.created) {
<ion-note class="flex ion-align-items-center" slot="start"> <ion-note class="flex ion-align-items-center" slot="start">
<ion-icon name="fas-clock" [attr.aria-label]="'core.lastmodified' | translate" /> <ion-icon name="fas-clock" [attr.aria-label]="'core.lastmodified' | translate" />

67
src/addons/blog/pages/index/index.scss
View File

@ -1,87 +1,68 @@
@use "theme/globals" as *; @use "theme/globals" as *;
:host { :host {
ion-card {
padding: .5rem 1rem;
}
.entry { .entry {
border-bottom: 1px solid var(--stroke); border-bottom: 1px solid var(--stroke);
&-visibility-permission { &-visibility-permission {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 0.875rem; font: var(-mdl-typography-label-font-lg);
font-weight: 500;
ion-icon { ion-icon {
margin-right: .3rem; @include margin-horizontal(null, .3rem);
} }
} }
&-draft { &-draft {
margin-left: .3rem; @include margin-horizontal(.3rem, null);
position: relative; position: relative;
top: 4px; top: 4px;
} }
&-subject { &-subject {
core-format-text { core-format-text {
font-size: 1.25rem; font: var(--mdl-typography-heading4-font);
font-weight: 500;
}
&::part(native) {
padding-left: 0;
} }
} }
&-creation-info { &-creation-info {
.entry-avatar {
@include margin(.6rem, .6rem, .6rem, 0px);
}
core-user-avatar { core-user-avatar {
--userpicture-padding: .6rem; --core-avatar-size: 24px;
margin-left: -.5rem;
} }
} }
&-last-modification { &-last-modification {
--border-width: 0 0 1px 0; --padding-end: 0px;
--padding-start: 0px;
&::part(native) { --padding-top: 0px;
padding: 0; --padding-bottom: 0px;
}
ion-note { ion-note {
padding-top: 0.9rem; padding-top: 0.9rem;
font-size: 0.875rem; font: var(-mdl-typography-label-font-lg);
font-weight: 500;
} }
ion-icon { ion-icon {
margin-right: .3rem; @include margin-horizontal(null, .3rem);
} }
} }
} }
.core-button-spinner { ion-button.entry-options {
margin-right: -.5rem; --padding-end: 0px;
align-self: start; --padding-start: 0px;
--padding-top: 0px;
ion-button::part(native) { --padding-bottom: 0px;
--padding-end: 0;
--padding-start: 0;
--padding-left: 0;
--padding-right: 0;
}
} }
core-comments ::ng-deep { core-comments ::ng-deep ion-item {
&::part(native) { --inner-border-width: 1px 0px 0px 0px;
--padding-start: 0; --padding-start: 0px;
}
}
.border-bottom {
border-bottom: 1px solid var(--stroke);
} }
} }

2
src/addons/mod/data/components/actionsmenu/actionsmenu.html
View File

@ -1,6 +1,6 @@
<ion-content> <ion-content>
<ion-list> <ion-list>
<ion-item button class="ion-text-wrap icon-margin-reduced" (click)="onItemClick(item)" *ngFor="let item of items" [detail]="false" <ion-item button class="ion-text-wrap" (click)="onItemClick(item)" *ngFor="let item of items" [detail]="false"
[attr.aria-label]="item.text | translate"> [attr.aria-label]="item.text | translate">
<ion-icon [name]="item.icon" slot="start" aria-hidden="true" /> <ion-icon [name]="item.icon" slot="start" aria-hidden="true" />
<ion-label> <ion-label>

6
src/core/components/context-menu/context-menu-popover.scss
View File

@ -3,9 +3,3 @@
ion-list { ion-list {
padding: 0; padding: 0;
} }
ion-icon[slot=start] {
@include margin-horizontal(0, 10px);
width: 0.8em;
height: 0.8em;
}

2
src/core/components/context-menu/context-menu-popover.ts
View File

@ -28,14 +28,12 @@ import { CoreContextMenuItemComponent } from './context-menu-item';
}) })
export class CoreContextMenuPopoverComponent { export class CoreContextMenuPopoverComponent {
title: string;
uniqueId: string; uniqueId: string;
items: CoreContextMenuItemComponent[]; items: CoreContextMenuItemComponent[];
constructor( constructor(
navParams: NavParams, navParams: NavParams,
) { ) {
this.title = navParams.get('title');
this.items = navParams.get('items') || []; this.items = navParams.get('items') || [];
this.uniqueId = navParams.get('id'); this.uniqueId = navParams.get('id');
} }

13
src/core/components/context-menu/context-menu.ts
View File

@ -32,9 +32,15 @@ import { CoreDirectivesRegistry } from '@singletons/directives-registry';
export class CoreContextMenuComponent implements OnInit, OnDestroy { export class CoreContextMenuComponent implements OnInit, OnDestroy {
@Input() icon = 'ellipsis-vertical'; // Icon to be shown on the navigation bar. Default: Kebab menu icon. @Input() icon = 'ellipsis-vertical'; // Icon to be shown on the navigation bar. Default: Kebab menu icon.
@Input() title?: string; // Text to be shown on the top of the popover.
@Input('aria-label') ariaLabel?: string; // Aria label to be shown on the top of the popover. @Input('aria-label') ariaLabel?: string; // Aria label to be shown on the top of the popover.
/**
* Title to be shown on the top of the popover.
*
* @deprecated since 4.4. Use aria-label instead.
*/
@Input() title?: string; // Text to be shown on the top of the popover.
hideMenu = true; // It will be unhidden when items are added. hideMenu = true; // It will be unhidden when items are added.
uniqueId: string; uniqueId: string;
@ -68,7 +74,7 @@ export class CoreContextMenuComponent implements OnInit, OnDestroy {
* @inheritdoc * @inheritdoc
*/ */
ngOnInit(): void { ngOnInit(): void {
this.ariaLabel = this.ariaLabel || this.title || Translate.instant('core.displayoptions'); this.ariaLabel = this.ariaLabel || Translate.instant('core.displayoptions');
} }
/** /**
@ -81,7 +87,7 @@ export class CoreContextMenuComponent implements OnInit, OnDestroy {
// All items were moved to the "parent" menu. Add the item in there. // All items were moved to the "parent" menu. Add the item in there.
this.parentContextMenu.addItem(item); this.parentContextMenu.addItem(item);
if (this.itemsMovedToParent.indexOf(item) == -1) { if (this.itemsMovedToParent.indexOf(item) === -1) {
this.itemsMovedToParent.push(item); this.itemsMovedToParent.push(item);
} }
} else if (this.items.indexOf(item) == -1) { } else if (this.items.indexOf(item) == -1) {
@ -181,7 +187,6 @@ export class CoreContextMenuComponent implements OnInit, OnDestroy {
event, event,
component: CoreContextMenuPopoverComponent, component: CoreContextMenuPopoverComponent,
componentProps: { componentProps: {
title: this.title,
items: this.items, items: this.items,
}, },
id: this.uniqueId, id: this.uniqueId,

11
src/core/components/context-menu/core-context-menu-popover.html
View File

@ -1,22 +1,15 @@
<ion-content> <ion-content>
<ion-list [id]="uniqueId" role="menu"> <ion-list [id]="uniqueId" role="menu">
<ion-list-header *ngIf="title">
<ion-label>{{title}}</ion-label>
</ion-list-header>
<ion-item class="ion-text-wrap" lines="none" *ngFor="let item of items" core-link [capture]="item.captureLink" <ion-item class="ion-text-wrap" lines="none" *ngFor="let item of items" core-link [capture]="item.captureLink"
[autoLogin]="item.autoLogin" [href]="item.href" (click)="itemClicked($event, item)" [attr.aria-label]="item.ariaAction" [autoLogin]="item.autoLogin" [href]="item.href" (click)="itemClicked($event, item)" [attr.aria-label]="item.ariaAction"
[hidden]="item.hidden" [detail]="!!(item.href && !item.iconAction)" role="menuitem" [button]="!!(item.href && !item.iconAction)" [hidden]="item.hidden" [detail]="!!(item.href && !item.iconAction)" role="menuitem" [button]="!!(item.href && !item.iconAction)"
[showBrowserWarning]="item.showBrowserWarning"> [showBrowserWarning]="item.showBrowserWarning">
<ion-toggle *ngIf="item.iconAction === 'toggle'" [(ngModel)]="item.toggle" (ionChange)="item.toggleChanged($event)"> <ion-toggle *ngIf="item.iconAction === 'toggle'" [(ngModel)]="item.toggle" (ionChange)="item.toggleChanged($event)">
<p class="item-heading"> <p class="item-heading">{{ item.content }}</p>
<core-format-text [clean]="true" [text]="item.content" [filter]="false" />
</p>
</ion-toggle> </ion-toggle>
<ng-container *ngIf="item.iconAction !== 'toggle'"> <ng-container *ngIf="item.iconAction !== 'toggle'">
<ion-label> <ion-label>
<p class="item-heading"> <p class="item-heading">{{ item.content }}</p>
<core-format-text [clean]="true" [text]="item.content" [filter]="false" />
</p>
</ion-label> </ion-label>
<ng-container *ngIf="(item.href || item.action) && item.iconAction"> <ng-container *ngIf="(item.href || item.action) && item.iconAction">
<ion-icon *ngIf="item.iconAction !== 'spinner'" [name]="item.iconAction" [class.icon-slash]="item.iconSlash" slot="end" <ion-icon *ngIf="item.iconAction !== 'spinner'" [name]="item.iconAction" [class.icon-slash]="item.iconSlash" slot="end"

10
src/core/components/user-avatar/user-avatar.scss
View File

@ -16,6 +16,8 @@
height: var(--core-avatar-size); height: var(--core-avatar-size);
max-width: var(--core-avatar-size); max-width: var(--core-avatar-size);
max-height: var(--core-avatar-size); max-height: var(--core-avatar-size);
min-width: var(--core-avatar-size);
min-height: var(--core-avatar-size);
padding: var(--userpicture-padding); padding: var(--userpicture-padding);
&[alt] { &[alt] {
text-indent: -999999px; text-indent: -999999px;
@ -79,8 +81,8 @@
font-weight: normal; font-weight: normal;
width: calc(var(--core-avatar-size) - var(--userpicture-padding) - var(--userpicture-padding)); width: calc(var(--core-avatar-size) - var(--userpicture-padding) - var(--userpicture-padding));
height: calc(var(--core-avatar-size) - var(--userpicture-padding) - var(--userpicture-padding)); height: calc(var(--core-avatar-size) - var(--userpicture-padding) - var(--userpicture-padding));
min-height: 0px; min-width: calc(var(--core-avatar-size) - var(--userpicture-padding) - var(--userpicture-padding));
min-width: 0px; min-height: calc(var(--core-avatar-size) - var(--userpicture-padding) - var(--userpicture-padding));
font-size: calc(var(--core-avatar-size)*0.3); font-size: calc(var(--core-avatar-size)*0.3);
margin: var(--userpicture-padding); margin: var(--userpicture-padding);
@ -106,8 +108,4 @@
:host-context(ion-item) { :host-context(ion-item) {
@include margin(var(--margin-vertical-on-item), var(--margin-end-on-item), var(--margin-vertical-on-item), 0px); @include margin(var(--margin-vertical-on-item), var(--margin-end-on-item), var(--margin-vertical-on-item), 0px);
img {
min-width: var(--core-avatar-size);
min-height: var(--core-avatar-size);
}
} }

15
src/core/features/courses/components/course-options-menu/core-courses-course-options-menu.html
View File

@ -1,41 +1,38 @@
<ion-content> <ion-content>
<ion-list> <ion-list>
<ion-item button class="ion-text-wrap icon-margin-reduced" (click)="action('download')" *ngIf="downloadCourseEnabled" <ion-item button class="ion-text-wrap" (click)="action('download')" *ngIf="downloadCourseEnabled" [detail]="false">
[detail]="false">
<ion-icon *ngIf="!prefetch.loading" [name]="prefetch.icon" slot="start" aria-hidden="true" /> <ion-icon *ngIf="!prefetch.loading" [name]="prefetch.icon" slot="start" aria-hidden="true" />
<ion-spinner *ngIf="prefetch.loading" slot="start" [attr.aria-label]="'core.loading' | translate" /> <ion-spinner *ngIf="prefetch.loading" slot="start" [attr.aria-label]="'core.loading' | translate" />
<ion-label> <ion-label>
<p class="item-heading">{{ prefetch.statusTranslatable | translate }}</p> <p class="item-heading">{{ prefetch.statusTranslatable | translate }}</p>
</ion-label> </ion-label>
</ion-item> </ion-item>
<ion-item button class="ion-text-wrap icon-margin-reduced" (click)="action('delete')" [detail]="false" <ion-item button class="ion-text-wrap" (click)="action('delete')" [detail]="false"
*ngIf="prefetch.status === 'downloaded' || prefetch.status === 'outdated'"> *ngIf="prefetch.status === 'downloaded' || prefetch.status === 'outdated'">
<ion-icon name="fas-trash" slot="start" aria-hidden="true" /> <ion-icon name="fas-trash" slot="start" aria-hidden="true" />
<ion-label> <ion-label>
<p class="item-heading">{{ 'addon.storagemanager.deletedata' | translate }}</p> <p class="item-heading">{{ 'addon.storagemanager.deletedata' | translate }}</p>
</ion-label> </ion-label>
</ion-item> </ion-item>
<ion-item button class="ion-text-wrap icon-margin-reduced" (click)="action('hide')" *ngIf="!course.hidden" [detail]="false"> <ion-item button class="ion-text-wrap" (click)="action('hide')" *ngIf="!course.hidden" [detail]="false">
<ion-icon name="fas-eye" slot="start" aria-hidden="true" /> <ion-icon name="fas-eye" slot="start" aria-hidden="true" />
<ion-label> <ion-label>
<p class="item-heading">{{ 'core.courses.hidecourse' | translate }}</p> <p class="item-heading">{{ 'core.courses.hidecourse' | translate }}</p>
</ion-label> </ion-label>
</ion-item> </ion-item>
<ion-item button class="ion-text-wrap icon-margin-reduced" (click)="action('show')" *ngIf="course.hidden" [detail]="false"> <ion-item button class="ion-text-wrap" (click)="action('show')" *ngIf="course.hidden" [detail]="false">
<ion-icon name="fas-eye-slash" slot="start" aria-hidden="true" /> <ion-icon name="fas-eye-slash" slot="start" aria-hidden="true" />
<ion-label> <ion-label>
<p class="item-heading">{{ 'core.courses.show' | translate }}</p> <p class="item-heading">{{ 'core.courses.show' | translate }}</p>
</ion-label> </ion-label>
</ion-item> </ion-item>
<ion-item button class="ion-text-wrap icon-margin-reduced" (click)="action('favourite')" *ngIf="!course.isfavourite" <ion-item button class="ion-text-wrap" (click)="action('favourite')" *ngIf="!course.isfavourite" [detail]="false">
[detail]="false">
<ion-icon name="fas-star" slot="start" aria-hidden="true" /> <ion-icon name="fas-star" slot="start" aria-hidden="true" />
<ion-label> <ion-label>
<p class="item-heading">{{ 'core.courses.addtofavourites' | translate }}</p> <p class="item-heading">{{ 'core.courses.addtofavourites' | translate }}</p>
</ion-label> </ion-label>
</ion-item> </ion-item>
<ion-item button class="ion-text-wrap icon-margin-reduced" (click)="action('unfavourite')" *ngIf="course.isfavourite" <ion-item button class="ion-text-wrap" (click)="action('unfavourite')" *ngIf="course.isfavourite" [detail]="false">
[detail]="false">
<ion-icon name="far-star" slot="start" aria-hidden="true" /> <ion-icon name="far-star" slot="start" aria-hidden="true" />
<ion-label> <ion-label>
<p class="item-heading">{{ 'core.courses.removefromfavourites' | translate }}</p> <p class="item-heading">{{ 'core.courses.removefromfavourites' | translate }}</p>

8
src/theme/components/ion-item.scss
View File

@ -47,12 +47,6 @@ ion-item.item {
&.item-has-interactive-control:focus-within { &.item-has-interactive-control:focus-within {
@include core-focus-outline(); @include core-focus-outline();
} }
&.icon-margin-reduced {
[slot=start] {
@include margin-horizontal(null, var(--mdl-spacing-4));
}
}
} }
// Fake item. // Fake item.
@ -167,6 +161,7 @@ ion-item .in-item {
text-overflow: inherit; text-overflow: inherit;
overflow: inherit; overflow: inherit;
white-space: inherit;
--color: initial; --color: initial;
color: var(--color); color: var(--color);
@ -203,6 +198,7 @@ ion-item > .in-item,
.item.ion-text-wrap > ion-checkbox::part(label), .item.ion-text-wrap > ion-checkbox::part(label),
ion-checkbox.ion-text-wrap::part(label), ion-checkbox.ion-text-wrap::part(label),
ion-toggle.ion-text-wrap::part(label), ion-toggle.ion-text-wrap::part(label),
.item.ion-text-wrap > ion-toggle::part(label),
.item.ion-text-wrap > ion-input > label, .item.ion-text-wrap > ion-input > label,
ion-input.ion-text-wrap > label { ion-input.ion-text-wrap > label {
white-space: normal; white-space: normal;

7
src/theme/components/ion-popover.scss
View File

@ -25,4 +25,11 @@ ion-popover {
white-space: normal; white-space: normal;
} }
} }
ion-item {
[slot=start] {
@include margin-horizontal(null, var(--mdl-spacing-4));
}
}
} }