From 0051bb29d592467bf5d5d1be03af22208fdfa4ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Tue, 29 Mar 2022 14:31:52 +0200 Subject: [PATCH] MOBILE-3833 style: Improve module info and files boxes --- .../index/addon-mod-assign-index.html | 4 +- .../index/addon-mod-folder-index.html | 2 +- .../mod/folder/components/index/index.ts | 25 +++++++ .../privatefiles/pages/index/index.html | 6 +- src/core/components/file/core-file.html | 49 +++++++------ .../local-file/core-local-file.html | 73 ++++++++++--------- src/core/components/local-file/local-file.ts | 26 ++++--- .../module-info/core-course-module-info.html | 28 +++---- .../module-info/course-module-info.scss | 47 ++++++++---- .../sharedfiles/components/list/list.html | 6 +- src/theme/theme.base.scss | 27 ++++++- 11 files changed, 187 insertions(+), 106 deletions(-) diff --git a/src/addons/mod/assign/components/index/addon-mod-assign-index.html b/src/addons/mod/assign/components/index/addon-mod-assign-index.html index 2b39744af..5aa7a97af 100644 --- a/src/addons/mod/assign/components/index/addon-mod-assign-index.html +++ b/src/addons/mod/assign/components/index/addon-mod-assign-index.html @@ -11,10 +11,10 @@ - +
- +
diff --git a/src/addons/mod/folder/components/index/addon-mod-folder-index.html b/src/addons/mod/folder/components/index/addon-mod-folder-index.html index eea0df71e..3a121644d 100644 --- a/src/addons/mod/folder/components/index/addon-mod-folder-index.html +++ b/src/addons/mod/folder/components/index/addon-mod-folder-index.html @@ -15,7 +15,7 @@ - +

{{folder.filename}}

diff --git a/src/addons/mod/folder/components/index/index.ts b/src/addons/mod/folder/components/index/index.ts index 8cd1f0504..e20e5cf7e 100644 --- a/src/addons/mod/folder/components/index/index.ts +++ b/src/addons/mod/folder/components/index/index.ts @@ -54,6 +54,7 @@ export class AddonModFolderIndexComponent extends CoreCourseModuleMainResourceCo if (this.subfolder) { this.description = this.folderInstance ? this.folderInstance.intro : this.module.description; this.contents = this.subfolder; + this.sortFilesAndFolders(); this.showLoading = false; @@ -88,6 +89,30 @@ export class AddonModFolderIndexComponent extends CoreCourseModuleMainResourceCo this.description = this.folderInstance ? this.folderInstance.intro : this.module.description; this.contents = AddonModFolderHelper.formatContents(contents); + this.sortFilesAndFolders(); + } + + /** + * Sort files and folders alphabetically. + */ + protected sortFilesAndFolders(): void { + if (!this.contents) { + return; + } + + this.contents.folders.sort((a, b) => { + const compareA = a.filename.toLowerCase(); + const compareB = b.filename.toLowerCase(); + + return compareA.localeCompare(compareB); + }); + + this.contents.files.sort((a, b) => { + const compareA = a.filename.toLowerCase(); + const compareB = b.filename.toLowerCase(); + + return compareA.localeCompare(compareB); + }); } /** diff --git a/src/addons/privatefiles/pages/index/index.html b/src/addons/privatefiles/pages/index/index.html index ec245c9cd..3ad05578f 100644 --- a/src/addons/privatefiles/pages/index/index.html +++ b/src/addons/privatefiles/pages/index/index.html @@ -37,10 +37,8 @@ - - - - + + {{file.filename}} diff --git a/src/core/components/file/core-file.html b/src/core/components/file/core-file.html index 396b05120..e6e2e729d 100644 --- a/src/core/components/file/core-file.html +++ b/src/core/components/file/core-file.html @@ -1,24 +1,29 @@ - - - - - -

{{fileName}}

-

{{ fileSizeReadable }}

-

{{ timemodified * 1000 | coreFormatDate }}

- -
- - + + + + + + +

{{fileName}}

+

+ {{ fileSizeReadable }} + · + {{ timemodified * 1000 | coreFormatDate }} +

+ +
+ + - - - + + + - - - -
- + + + +
+ + diff --git a/src/core/components/local-file/core-local-file.html b/src/core/components/local-file/core-local-file.html index 7c5ede969..b723da5eb 100644 --- a/src/core/components/local-file/core-local-file.html +++ b/src/core/components/local-file/core-local-file.html @@ -1,41 +1,48 @@
- - - - + + + + + - - -

{{fileName}}

- -

{{ size }}

-

{{ timemodified }}

- + + +

{{fileName}}

+ +

+ {{ size }} + · + {{ timemodified }} +

+ - - - + + + -
- - - - - - - +
+ + - - - + + + + - - - - -
- + + + + + + + + +
+ + diff --git a/src/core/components/local-file/local-file.ts b/src/core/components/local-file/local-file.ts index 3ae64c44c..568b657df 100644 --- a/src/core/components/local-file/local-file.ts +++ b/src/core/components/local-file/local-file.ts @@ -56,7 +56,7 @@ export class CoreLocalFileComponent implements OnInit { timemodified?: string; newFileName = ''; editMode = false; - relativePath?: string; + relativePath = ''; isIOS = false; openButtonIcon = ''; openButtonLabel = ''; @@ -112,7 +112,7 @@ export class CoreLocalFileComponent implements OnInit { * @param isOpenButton Whether the open button was clicked. */ async openFile(e: Event, isOpenButton = false): Promise { - if (this.editMode) { + if (this.editMode || !this.file) { return; } @@ -125,7 +125,7 @@ export class CoreLocalFileComponent implements OnInit { return; } - if (!CoreFileHelper.isOpenableInApp(this.file!)) { + if (!CoreFileHelper.isOpenableInApp(this.file)) { try { await CoreFileHelper.showConfirmOpenUnsupportedFile(); } catch (error) { @@ -139,7 +139,7 @@ export class CoreLocalFileComponent implements OnInit { options.iOSOpenFileAction = this.defaultIsOpenWithPicker ? OpenFileAction.OPEN : OpenFileAction.OPEN_WITH; } - CoreUtils.openFile(this.file!.toURL(), options); + CoreUtils.openFile(this.file.toURL(), options); } /** @@ -148,11 +148,15 @@ export class CoreLocalFileComponent implements OnInit { * @param e Click event. */ activateEdit(e: Event): void { + if (!this.file) { + return; + } + e.preventDefault(); e.stopPropagation(); this.editMode = true; - this.newFileName = this.file!.name; + this.newFileName = this.file.name; } /** @@ -162,10 +166,14 @@ export class CoreLocalFileComponent implements OnInit { * @param e Click event. */ async changeName(newName: string, e: Event): Promise { + if (!this.file) { + return; + } + e.preventDefault(); e.stopPropagation(); - if (newName == this.file!.name) { + if (newName == this.file.name) { // Name hasn't changed, stop. this.editMode = false; CoreForms.triggerFormCancelledEvent(this.formElement, CoreSites.getCurrentSiteId()); @@ -174,7 +182,7 @@ export class CoreLocalFileComponent implements OnInit { } const modal = await CoreDomUtils.showModalLoading(); - const fileAndDir = CoreFile.getFileAndDirectoryFromPath(this.relativePath!); + const fileAndDir = CoreFile.getFileAndDirectoryFromPath(this.relativePath); const newPath = CoreText.concatenatePaths(fileAndDir.directory, newName); try { @@ -186,7 +194,7 @@ export class CoreLocalFileComponent implements OnInit { } catch { try { // File doesn't exist, move it. - const fileEntry = await CoreFile.moveFile(this.relativePath!, newPath); + const fileEntry = await CoreFile.moveFile(this.relativePath, newPath); CoreForms.triggerFormSubmittedEvent(this.formElement, false, CoreSites.getCurrentSiteId()); @@ -219,7 +227,7 @@ export class CoreLocalFileComponent implements OnInit { modal = await CoreDomUtils.showModalLoading('core.deleting', true); - await CoreFile.removeFile(this.relativePath!); + await CoreFile.removeFile(this.relativePath); this.onDelete.emit(); } catch (error) { diff --git a/src/core/features/course/components/module-info/core-course-module-info.html b/src/core/features/course/components/module-info/core-course-module-info.html index 2ff034ce9..62ccf0e34 100644 --- a/src/core/features/course/components/module-info/core-course-module-info.html +++ b/src/core/features/course/components/module-info/core-course-module-info.html @@ -14,43 +14,39 @@
- - - +
+ +
- - +
-
-
+

{{ date.label }} {{ date.timestamp * 1000 | coreFormatDate:'strftimedatetime' }}

+ -
+
-
- - +
- - - +
+ +
diff --git a/src/core/features/course/components/module-info/course-module-info.scss b/src/core/features/course/components/module-info/course-module-info.scss index 6091e0b2f..8b6c8feb0 100644 --- a/src/core/features/course/components/module-info/course-module-info.scss +++ b/src/core/features/course/components/module-info/course-module-info.scss @@ -23,27 +23,46 @@ } - .core-module-dates-availabilityinfo { + .core-module-info-box { background: var(--light); border-radius: var(--small-radius); - padding: 8px; margin: 8px; - font-size: 90%; - ion-icon { - position: static; - @include margin-horizontal(null, 8px); + padding: 8px; + + ::ng-deep ion-item { + --ion-item-background: var(--light); + --background: var(--light); } - p, - ul { - margin-top: 4px; - margin-bottom: 4px; + ::ng-deep ion-card.card-file { + --ion-card-horizontal-margin: 0px; } - } - .core-module-dates + .core-module-availabilityinfo { - border-top: 1px solid var(--stroke); - padding-top: 8px; + .core-module-info-box-section + .core-module-info-box-section { + border-top: 1px solid var(--stroke); + margin-top: 8px; + padding-top: 8px; + } + + .core-module-dates ion-icon { + margin-left: 4px; + margin-right: 4px; + } + + .core-module-dates, + .core-module-availabilityinfo { + font-size: 90%; + ion-icon { + position: static; + @include margin-horizontal(null, 8px); + } + + p, + ul { + margin-top: 4px; + margin-bottom: 4px; + } + } } core-course-module-completion ::ng-deep ion-button { diff --git a/src/core/features/sharedfiles/components/list/list.html b/src/core/features/sharedfiles/components/list/list.html index e3ae1898e..96174712a 100644 --- a/src/core/features/sharedfiles/components/list/list.html +++ b/src/core/features/sharedfiles/components/list/list.html @@ -13,10 +13,8 @@ (onDelete)="fileDeleted(idx)" (onRename)="fileRenamed(idx, $event)"> - - + + {{ file.name }} diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss index dcc90ee4e..681843dd4 100644 --- a/src/theme/theme.base.scss +++ b/src/theme/theme.base.scss @@ -706,10 +706,35 @@ body.core-iframe-fullscreen ion-router-outlet { .item.item-file { ion-thumbnail { - --size: 32px; + --size: 24px; width: var(--size); height: var(--size); } + + p.item-heading { + font-size: 14px; + } + + p { + font-size: 12px; + } + + ion-label { + margin-top: 8px; + margin-bottom: 8px; + } + + ion-button { + --a11y-min-target-size: 40px; + } + + &.item-directory ion-icon { + @include margin-horizontal(0px, 16px); + } + + [slot=end] { + @include margin-horizontal(16px, null); + } } .item-dimmed {