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

MOBILE-3637 core: Add tag list and navigation bar components

main
Pau Ferrer Ocaña 2021-02-08 15:45:55 +01:00
parent 97592c431a
commit 5a15fca0a9
8 changed files with 159 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/core/components/components.module.ts
View File

@ -44,6 +44,7 @@ import { CoreDynamicComponent } from './dynamic-component/dynamic-component';
import { CoreNavBarButtonsComponent } from './navbar-buttons/navbar-buttons';
import { CoreSendMessageFormComponent } from './send-message-form/send-message-form';
import { CoreTimerComponent } from './timer/timer';
import { CoreNavigationBarComponent } from './navigation-bar/navigation-bar';
import { CoreDirectivesModule } from '@directives/directives.module';
import { CorePipesModule } from '@pipes/pipes.module';
@ -76,6 +77,7 @@ import { CorePipesModule } from '@pipes/pipes.module';
CoreDynamicComponent,
CoreSendMessageFormComponent,
CoreTimerComponent,
CoreNavigationBarComponent,
],
imports: [
CommonModule,
@ -112,6 +114,7 @@ import { CorePipesModule } from '@pipes/pipes.module';
CoreDynamicComponent,
CoreSendMessageFormComponent,
CoreTimerComponent,
CoreNavigationBarComponent,
],
})
export class CoreComponentsModule {}

25
src/core/components/navigation-bar/core-navigation-bar.html 100644
View File

@ -0,0 +1,25 @@
<ion-grid class="ion-no-padding ion-padding-bottom" *ngIf="previous || info || next">
<ion-row>
<ion-col class="ion-text-start" size="4">
<ion-button *ngIf="previous" class="core-navigation-bar-arrow" color="light"
[title]="previousTitle || ('core.previous' | translate)" (click)="action?.emit(previous)">
<ion-icon name="fas-arrow-left" [slot]="previousTitle ? 'start' : 'icon-only'"></ion-icon>
<core-format-text *ngIf="previousTitle" [text]="previousTitle" [component]="component" [componentId]="componentId"
[contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"></core-format-text>
</ion-button>
</ion-col>
<ion-col class="ion-text-center ion-padding-horizontal" size="4">
<ion-button fill="clear" *ngIf="info" (click)="showInfo()" [title]="title">
<ion-icon slot="icon-only" name="fas-info-circle"></ion-icon>
</ion-button>
</ion-col>
<ion-col class="ion-text-end" size="4">
<ion-button *ngIf="next" class="core-navigation-bar-arrow" [title]="nextTitle || ('core.next' | translate)"
(click)="action?.emit(next)">
<core-format-text *ngIf="nextTitle" [text]="nextTitle" [component]="component" [componentId]="componentId"
[contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"></core-format-text>
<ion-icon name="fas-arrow-right" [slot]="nextTitle ? 'end' : 'icon-only'"></ion-icon>
</ion-button>
</ion-col>
</ion-row>
</ion-grid>

12
src/core/components/navigation-bar/navigation-bar.scss 100644
View File

@ -0,0 +1,12 @@
.core-navigation-bar-arrow {
text-transform: none;
max-width: 100%;
ion-icon {
flex-shrink: 0;
}
core-format-text {
overflow: hidden;
text-overflow: ellipsis;
}
}

59
src/core/components/navigation-bar/navigation-bar.ts 100644
View File

@ -0,0 +1,59 @@
// (C) Copyright 2015 Moodle Pty Ltd.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { CoreTextUtils } from '@services/utils/text';
/**
* Component to show a "bar" with arrows to navigate forward/backward and a "info" icon to display more data.
*
* This directive will show two arrows at the left and right of the screen to navigate to previous/next item when clicked.
* If no previous/next item is defined, that arrow won't be shown. It will also show a button to show more info.
*
* Example usage:
* <core-navigation-bar [previous]="prevItem" [next]="nextItem" (action)="goTo($event)"></core-navigation-bar>
*/
@Component({
selector: 'core-navigation-bar',
templateUrl: 'core-navigation-bar.html',
styleUrls: ['navigation-bar.scss'],
})
export class CoreNavigationBarComponent {
@Input() previous?: unknown; // Previous item. If not defined, the previous arrow won't be shown.
@Input() previousTitle?: string; // Previous item title. If not defined, only the arrow will be shown.
@Input() next?: unknown; // Next item. If not defined, the next arrow won't be shown.
@Input() nextTitle?: string; // Next item title. If not defined, only the arrow will be shown.
@Input() info = ''; // Info to show when clicking the info button. If not defined, the info button won't be shown.
@Input() title = ''; // Title to show when seeing the info (new page).
@Input() component?: string; // Component the bar belongs to.
@Input() componentId?: number; // Component ID.
@Input() contextLevel?: string; // The context level.
@Input() contextInstanceId?: number; // The instance ID related to the context.
@Input() courseId?: number; // Course ID the text belongs to. It can be used to improve performance with filters.
@Output() action?: EventEmitter<unknown> =
new EventEmitter<unknown>(); // Function to call when arrow is clicked. Will receive as a param the item to load.
showInfo(): void {
CoreTextUtils.instance.viewText(this.title, this.info, {
component: this.component,
componentId: this.componentId,
filter: true,
contextLevel: this.contextLevel,
instanceId: this.contextInstanceId,
courseId: this.courseId,
});
}
}

3
src/core/features/tag/components/components.module.ts
View File

@ -19,10 +19,12 @@ import { TranslateModule } from '@ngx-translate/core';
import { CoreTagFeedComponent } from './feed/feed';
import { CoreSharedModule } from '@/core/shared.module';
import { CoreTagListComponent } from './list/list';
@NgModule({
declarations: [
CoreTagFeedComponent,
CoreTagListComponent,
],
imports: [
CommonModule,
@ -34,6 +36,7 @@ import { CoreSharedModule } from '@/core/shared.module';
],
exports: [
CoreTagFeedComponent,
CoreTagListComponent,
],
})
export class CoreTagComponentsModule {}

3
src/core/features/tag/components/list/core-tag-list.html 100644
View File

@ -0,0 +1,3 @@
<ng-container *ngFor="let tag of tags">
<ion-badge (click)="openTag(tag)" class="core-tag-list-tag">{{ tag.rawname }}</ion-badge>
</ng-container>

7
src/core/features/tag/components/list/list.scss 100644
View File

@ -0,0 +1,7 @@
:host {
line-height: 1.6;
ion-badge {
cursor: pointer;
}
}

47
src/core/features/tag/components/list/list.ts 100644
View File

@ -0,0 +1,47 @@
// (C) Copyright 2015 Moodle Pty Ltd.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import { Component, Input } from '@angular/core';
import { CoreTagItem } from '@features/tag/services/tag';
import { Params } from '@angular/router';
import { CoreNavigator } from '@services/navigator';
/**
* Component that displays the list of tags of an item.
*/
@Component({
selector: 'core-tag-list',
templateUrl: 'core-tag-list.html',
styleUrls: ['list.scss'],
})
export class CoreTagListComponent {
@Input() tags: CoreTagItem[] = [];
/**
* Go to tag index page.
*/
openTag(tag: CoreTagItem): void {
const params: Params = {
tagId: tag.id,
tagName: tag.rawname,
collectionId: tag.tagcollid,
fromContextId: tag.taginstancecontextid,
};
// @todo: Check split view to navigate on the outlet if any.
CoreNavigator.instance.navigate('/tag/index', { params });
}
}