diff --git a/src/core/components/components.module.ts b/src/core/components/components.module.ts index d99184c52..9b0bcd00c 100644 --- a/src/core/components/components.module.ts +++ b/src/core/components/components.module.ts @@ -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 {} diff --git a/src/core/components/navigation-bar/core-navigation-bar.html b/src/core/components/navigation-bar/core-navigation-bar.html new file mode 100644 index 000000000..3fdb8a357 --- /dev/null +++ b/src/core/components/navigation-bar/core-navigation-bar.html @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/core/components/navigation-bar/navigation-bar.scss b/src/core/components/navigation-bar/navigation-bar.scss new file mode 100644 index 000000000..c0219d1ac --- /dev/null +++ b/src/core/components/navigation-bar/navigation-bar.scss @@ -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; + } +} diff --git a/src/core/components/navigation-bar/navigation-bar.ts b/src/core/components/navigation-bar/navigation-bar.ts new file mode 100644 index 000000000..9d7eb2ddd --- /dev/null +++ b/src/core/components/navigation-bar/navigation-bar.ts @@ -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: + * + */ +@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 = + new EventEmitter(); // 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, + }); + } + +} diff --git a/src/core/features/tag/components/components.module.ts b/src/core/features/tag/components/components.module.ts index 595a5d3e3..9f3aa671e 100644 --- a/src/core/features/tag/components/components.module.ts +++ b/src/core/features/tag/components/components.module.ts @@ -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 {} diff --git a/src/core/features/tag/components/list/core-tag-list.html b/src/core/features/tag/components/list/core-tag-list.html new file mode 100644 index 000000000..7e6372e20 --- /dev/null +++ b/src/core/features/tag/components/list/core-tag-list.html @@ -0,0 +1,3 @@ + + {{ tag.rawname }} + diff --git a/src/core/features/tag/components/list/list.scss b/src/core/features/tag/components/list/list.scss new file mode 100644 index 000000000..e73e7e8fc --- /dev/null +++ b/src/core/features/tag/components/list/list.scss @@ -0,0 +1,7 @@ +:host { + line-height: 1.6; + + ion-badge { + cursor: pointer; + } +} diff --git a/src/core/features/tag/components/list/list.ts b/src/core/features/tag/components/list/list.ts new file mode 100644 index 000000000..97d4ce83b --- /dev/null +++ b/src/core/features/tag/components/list/list.ts @@ -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 }); + } + +}