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>
@if (entry.userid === currentUserId && optionsAvailable) {
<div class="core-button-spinner">
<ion-button fill="clear" [attr.aria-label]="'core.displayoptions' | translate"
(click)="showEntryActionsPopover($event, entry)">
<ion-icon slot="icon-only" aria-hidden="true" name="ellipsis-vertical" />
</ion-button>
</div>
<ion-button fill="clear" [attr.aria-label]="'core.displayoptions' | translate"
(click)="showEntryActionsPopover($event, entry)" class="entry-options">
<ion-icon slot="icon-only" aria-hidden="true" name="ellipsis-vertical" />
</ion-button>
}
</div>
<div class="entry-creation-info flex ion-align-items-center">
<span>
<div class="entry-avatar">
<core-user-avatar [user]="entry.user" [courseId]="entry.courseid" />
</span>
</div>
@if (entry.user?.fullname && entry.created) {
<span [innerHTML]="'core.bynameondate' | translate: {
@ -64,15 +62,14 @@
}
</div>
<div class="entry-summary" [ngClass]="{ 'border-bottom': entry.lastmodified <= entry.created }" [collapsible-item]="64">
<div class="entry-summary" [collapsible-item]="64">
<div class="ion-margin-bottom">
<core-format-text [text]="entry.summary" [component]="component" [componentId]="entry.id" [contextLevel]="contextLevel"
[contextInstanceId]="contextInstanceId" [courseId]="entry.courseid" />
</div>
@if (tagsEnabled && entry.tags && entry.tags!.length > 0) {
<ion-item class="ion-text-wrap">
<ion-item class="ion-text-wrap" lines="none">
<ion-label>
<div slot="start">{{ 'core.tag.tags' | translate }}:</div>
<core-tag-list [tags]="entry.tags" />
@ -85,15 +82,14 @@
}
@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-item>
}
</div>
@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) {
<ion-note class="flex ion-align-items-center" slot="start">
<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 *;
:host {
ion-card {
padding: .5rem 1rem;
}
.entry {
border-bottom: 1px solid var(--stroke);
&-visibility-permission {
display: flex;
align-items: center;
font-size: 0.875rem;
font-weight: 500;
font: var(-mdl-typography-label-font-lg);
ion-icon {
margin-right: .3rem;
@include margin-horizontal(null, .3rem);
}
}
&-draft {
margin-left: .3rem;
@include margin-horizontal(.3rem, null);
position: relative;
top: 4px;
}
&-subject {
core-format-text {
font-size: 1.25rem;
font-weight: 500;
}
&::part(native) {
padding-left: 0;
font: var(--mdl-typography-heading4-font);
}
}
&-creation-info {
.entry-avatar {
@include margin(.6rem, .6rem, .6rem, 0px);
}
core-user-avatar {
--userpicture-padding: .6rem;
margin-left: -.5rem;
--core-avatar-size: 24px;
}
}
&-last-modification {
--border-width: 0 0 1px 0;
&::part(native) {
padding: 0;
}
--padding-end: 0px;
--padding-start: 0px;
--padding-top: 0px;
--padding-bottom: 0px;
ion-note {
padding-top: 0.9rem;
font-size: 0.875rem;
font-weight: 500;
font: var(-mdl-typography-label-font-lg);
}
ion-icon {
margin-right: .3rem;
@include margin-horizontal(null, .3rem);
}
}
}
.core-button-spinner {
margin-right: -.5rem;
align-self: start;
ion-button::part(native) {
--padding-end: 0;
--padding-start: 0;
--padding-left: 0;
--padding-right: 0;
}
ion-button.entry-options {
--padding-end: 0px;
--padding-start: 0px;
--padding-top: 0px;
--padding-bottom: 0px;
}
core-comments ::ng-deep {
&::part(native) {
--padding-start: 0;
}
}
.border-bottom {
border-bottom: 1px solid var(--stroke);
core-comments ::ng-deep ion-item {
--inner-border-width: 1px 0px 0px 0px;
--padding-start: 0px;
}
}

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

@ -1,6 +1,6 @@
<ion-content>
<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">
<ion-icon [name]="item.icon" slot="start" aria-hidden="true" />
<ion-label>

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

@ -3,9 +3,3 @@
ion-list {
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 {
title: string;
uniqueId: string;
items: CoreContextMenuItemComponent[];
constructor(
navParams: NavParams,
) {
this.title = navParams.get('title');
this.items = navParams.get('items') || [];
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 {
@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.
/**
* 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.
uniqueId: string;
@ -68,7 +74,7 @@ export class CoreContextMenuComponent implements OnInit, OnDestroy {
* @inheritdoc
*/
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.
this.parentContextMenu.addItem(item);
if (this.itemsMovedToParent.indexOf(item) == -1) {
if (this.itemsMovedToParent.indexOf(item) === -1) {
this.itemsMovedToParent.push(item);
}
} else if (this.items.indexOf(item) == -1) {
@ -181,7 +187,6 @@ export class CoreContextMenuComponent implements OnInit, OnDestroy {
event,
component: CoreContextMenuPopoverComponent,
componentProps: {
title: this.title,
items: this.items,
},
id: this.uniqueId,

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

@ -1,22 +1,15 @@
<ion-content>
<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"
[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)"
[showBrowserWarning]="item.showBrowserWarning">
<ion-toggle *ngIf="item.iconAction === 'toggle'" [(ngModel)]="item.toggle" (ionChange)="item.toggleChanged($event)">
<p class="item-heading">
<core-format-text [clean]="true" [text]="item.content" [filter]="false" />
</p>
<p class="item-heading">{{ item.content }}</p>
</ion-toggle>
<ng-container *ngIf="item.iconAction !== 'toggle'">
<ion-label>
<p class="item-heading">
<core-format-text [clean]="true" [text]="item.content" [filter]="false" />
</p>
<p class="item-heading">{{ item.content }}</p>
</ion-label>
<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"

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

@ -16,6 +16,8 @@
height: var(--core-avatar-size);
max-width: 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);
&[alt] {
text-indent: -999999px;
@ -79,8 +81,8 @@
font-weight: normal;
width: 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: 0px;
min-width: calc(var(--core-avatar-size) - var(--userpicture-padding) - var(--userpicture-padding));
min-height: calc(var(--core-avatar-size) - var(--userpicture-padding) - var(--userpicture-padding));
font-size: calc(var(--core-avatar-size)*0.3);
margin: var(--userpicture-padding);
@ -106,8 +108,4 @@
:host-context(ion-item) {
@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-list>
<ion-item button class="ion-text-wrap icon-margin-reduced" (click)="action('download')" *ngIf="downloadCourseEnabled"
[detail]="false">
<ion-item button class="ion-text-wrap" (click)="action('download')" *ngIf="downloadCourseEnabled" [detail]="false">
<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-label>
<p class="item-heading">{{ prefetch.statusTranslatable | translate }}</p>
</ion-label>
</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'">
<ion-icon name="fas-trash" slot="start" aria-hidden="true" />
<ion-label>
<p class="item-heading">{{ 'addon.storagemanager.deletedata' | translate }}</p>
</ion-label>
</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-label>
<p class="item-heading">{{ 'core.courses.hidecourse' | translate }}</p>
</ion-label>
</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-label>
<p class="item-heading">{{ 'core.courses.show' | translate }}</p>
</ion-label>
</ion-item>
<ion-item button class="ion-text-wrap icon-margin-reduced" (click)="action('favourite')" *ngIf="!course.isfavourite"
[detail]="false">
<ion-item button class="ion-text-wrap" (click)="action('favourite')" *ngIf="!course.isfavourite" [detail]="false">
<ion-icon name="fas-star" slot="start" aria-hidden="true" />
<ion-label>
<p class="item-heading">{{ 'core.courses.addtofavourites' | translate }}</p>
</ion-label>
</ion-item>
<ion-item button class="ion-text-wrap icon-margin-reduced" (click)="action('unfavourite')" *ngIf="course.isfavourite"
[detail]="false">
<ion-item button class="ion-text-wrap" (click)="action('unfavourite')" *ngIf="course.isfavourite" [detail]="false">
<ion-icon name="far-star" slot="start" aria-hidden="true" />
<ion-label>
<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 {
@include core-focus-outline();
}
&.icon-margin-reduced {
[slot=start] {
@include margin-horizontal(null, var(--mdl-spacing-4));
}
}
}
// Fake item.
@ -167,6 +161,7 @@ ion-item .in-item {
text-overflow: inherit;
overflow: inherit;
white-space: inherit;
--color: initial;
color: var(--color);
@ -203,6 +198,7 @@ ion-item > .in-item,
.item.ion-text-wrap > ion-checkbox::part(label),
ion-checkbox.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,
ion-input.ion-text-wrap > label {
white-space: normal;

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

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