diff --git a/src/components/components.module.ts b/src/components/components.module.ts index 7d62c20f4..1cf8543a4 100644 --- a/src/components/components.module.ts +++ b/src/components/components.module.ts @@ -37,6 +37,7 @@ import { CoreSitePickerComponent } from './site-picker/site-picker'; import { CoreTabsComponent } from './tabs/tabs'; import { CoreTabComponent } from './tabs/tab'; import { CoreRichTextEditorComponent } from './rich-text-editor/rich-text-editor'; +import { CoreNavBarButtonsComponent } from './navbar-buttons/navbar-buttons'; @NgModule({ declarations: [ @@ -59,7 +60,8 @@ import { CoreRichTextEditorComponent } from './rich-text-editor/rich-text-editor CoreSitePickerComponent, CoreTabsComponent, CoreTabComponent, - CoreRichTextEditorComponent + CoreRichTextEditorComponent, + CoreNavBarButtonsComponent ], entryComponents: [ CoreContextMenuPopoverComponent, @@ -89,7 +91,8 @@ import { CoreRichTextEditorComponent } from './rich-text-editor/rich-text-editor CoreSitePickerComponent, CoreTabsComponent, CoreTabComponent, - CoreRichTextEditorComponent + CoreRichTextEditorComponent, + CoreNavBarButtonsComponent ] }) export class CoreComponentsModule {} diff --git a/src/components/navbar-buttons/navbar-buttons.scss b/src/components/navbar-buttons/navbar-buttons.scss new file mode 100644 index 000000000..d800187c1 --- /dev/null +++ b/src/components/navbar-buttons/navbar-buttons.scss @@ -0,0 +1,3 @@ +core-navbar-buttons, .core-navbar-button-hidden { + display: none !important; +} diff --git a/src/components/navbar-buttons/navbar-buttons.ts b/src/components/navbar-buttons/navbar-buttons.ts new file mode 100644 index 000000000..28c1f9fcf --- /dev/null +++ b/src/components/navbar-buttons/navbar-buttons.ts @@ -0,0 +1,148 @@ +// (C) Copyright 2015 Martin Dougiamas +// +// 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, OnInit, ContentChildren, ElementRef, QueryList } from '@angular/core'; +import { Button } from 'ionic-angular'; +import { CoreDomUtilsProvider } from '../../providers/utils/dom'; + +/** + * Component to add buttons to the app's header without having to place them inside the header itself. This is meant for + * pages that are loaded inside a sub ion-nav, so they don't have a header. + * + * If this component indicates a position (start/end), the buttons will only be added if the header has some buttons in that + * position. If no start/end is specified, then the buttons will be added to the first found in the header. + * + * You can use the [hidden] input to hide all the inner buttons if a certain condition is met. + * + * Example usage: + * + * + * + * + */ +@Component({ + selector: 'core-navbar-buttons', + template: '' +}) +export class CoreNavBarButtonsComponent implements OnInit { + + protected BUTTON_HIDDEN_CLASS = 'core-navbar-button-hidden'; + + // If the hidden input is true, hide all buttons. + @Input('hidden') set hidden(value: boolean) { + this._hidden = value; + if (this._buttons) { + this._buttons.forEach((button: Button) => { + this.showHideButton(button); + }); + } + } + + // Get all the buttons inside this directive. + @ContentChildren(Button) set buttons(buttons: QueryList