// click on the drop down and selects the move to trash option
cy.get('.table-actions button.dropdown-toggle').first().click();
- cy.get('li.move-to-trash').click();
+ cy.get('button.move-to-trash').click();
cy.contains('button', 'Move Image').should('be.visible').click();
cy.contains('button', 'Restore').click();
// wait for pop-up to be visible (checks for title of pop-up)
- cy.get('#name').should('be.visible');
+ cy.get('cd-modal #name').should('be.visible');
// If a new name for the image is passed, it changes the name of the image
if (newName !== undefined) {
// click name box and send new name
- cy.get('#name').clear().type(newName);
+ cy.get('cd-modal #name').clear().type(newName);
}
cy.contains('button', 'Restore Image').click();
filterTable(name: string, option: string) {
this.waitDataTableToLoad();
- cy.get('.tc_filter_name > a').click();
+ cy.get('.tc_filter_name > button').click();
cy.contains(`.tc_filter_name .dropdown-item`, name).click();
- cy.get('.tc_filter_option > a').click();
+ cy.get('.tc_filter_option > button').click();
cy.contains(`.tc_filter_option .dropdown-item`, option).click();
}
// Clicks on table Delete button
cy.get('.table-actions button.dropdown-toggle').first().click(); // open submenu
- cy.get('li.delete a').click(); // click on "delete" menu item
+ cy.get('button.delete').click(); // click on "delete" menu item
// Confirms deletion
- cy.get('.custom-control-label').click();
- cy.contains('button', 'Delete').click();
+ cy.get('cd-modal .custom-control-label').click();
+ cy.contains('cd-modal button', 'Delete').click();
// Wait for modal to close
cy.get('cd-modal').should('not.exist');
import { JwtModule } from '@auth0/angular-jwt';
import { I18n } from '@ngx-translate/i18n-polyfill';
import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
-
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { ToastrModule } from 'ngx-toastr';
import { AppRoutingModule } from './app-routing.module';
CoreModule,
SharedModule,
CephModule,
- BsDropdownModule.forRoot(),
JwtModule.forRoot({
config: {
tokenGetter: jwtTokenGetter
import { TreeModule } from 'angular-tree-component';
import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { ModalModule } from 'ngx-bootstrap/modal';
import { ActionLabels, URLVerbs } from '../../shared/constants/app.constants';
FormsModule,
ReactiveFormsModule,
NgbNavModule,
- BsDropdownModule.forRoot(),
BsDatepickerModule.forRoot(),
NgbTooltipModule,
ModalModule.forRoot(),
const tempData = this.metadata[node.data.cdId] || {};
if (node.data.cdId === 'root') {
- this.detailTable?.toggleColumn({ target: { name: 'default', checked: true } });
+ this.detailTable?.toggleColumn({ prop: 'default', isHidden: true });
this.data = _.map(this.settings.target_default_controls, (value, key) => {
value = this.format(value);
return {
});
}
} else if (node.data.cdId.toString().startsWith('disk_')) {
- this.detailTable?.toggleColumn({ target: { name: 'default', checked: true } });
+ this.detailTable?.toggleColumn({ prop: 'default', isHidden: true });
this.data = _.map(this.settings.disk_default_controls[tempData.backstore], (value, key) => {
value = this.format(value);
return {
}
});
} else {
- this.detailTable?.toggleColumn({ target: { name: 'default', checked: false } });
+ this.detailTable?.toggleColumn({ prop: 'default', isHidden: false });
this.data = _.map(tempData, (value, key) => {
return {
displayName: key,
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
-
import { configureTestBed, i18nProviders } from '../../../../../testing/unit-test-helper';
import { SharedModule } from '../../../../shared/shared.module';
import { MirrorHealthColorPipe } from '../mirror-health-color.pipe';
configureTestBed({
declarations: [DaemonListComponent, MirrorHealthColorPipe],
- imports: [
- BrowserAnimationsModule,
- SharedModule,
- BsDropdownModule.forRoot(),
- HttpClientTestingModule
- ],
+ imports: [BrowserAnimationsModule, SharedModule, HttpClientTestingModule],
providers: i18nProviders
});
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgbNavModule, NgbProgressbarModule } from '@ng-bootstrap/ng-bootstrap';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { configureTestBed, i18nProviders } from '../../../../../testing/unit-test-helper';
import { SharedModule } from '../../../../shared/shared.module';
imports: [
BrowserAnimationsModule,
SharedModule,
- BsDropdownModule.forRoot(),
NgbNavModule,
NgbProgressbarModule,
HttpClientTestingModule
import { NgbNavModule, NgbProgressbarModule } from '@ng-bootstrap/ng-bootstrap';
import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { ModalModule } from 'ngx-bootstrap/modal';
import { SharedModule } from '../../../shared/shared.module';
FormsModule,
ReactiveFormsModule,
NgbProgressbarModule,
- BsDropdownModule.forRoot(),
ModalModule.forRoot(),
NgBootstrapFormValidationModule
],
import { RouterTestingModule } from '@angular/router/testing';
import { NgbNavModule, NgbProgressbarModule } from '@ng-bootstrap/ng-bootstrap';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { ToastrModule } from 'ngx-toastr';
import { configureTestBed, i18nProviders } from '../../../../../testing/unit-test-helper';
imports: [
BrowserAnimationsModule,
SharedModule,
- BsDropdownModule.forRoot(),
NgbNavModule,
NgbProgressbarModule,
HttpClientTestingModule,
import { RouterTestingModule } from '@angular/router/testing';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { ToastrModule } from 'ngx-toastr';
import { configureTestBed, i18nProviders } from '../../../../../testing/unit-test-helper';
imports: [
BrowserAnimationsModule,
SharedModule,
- BsDropdownModule.forRoot(),
HttpClientTestingModule,
RouterTestingModule,
ToastrModule.forRoot()
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterTestingModule } from '@angular/router/testing';
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { ChartsModule } from 'ng2-charts';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { configureTestBed, i18nProviders } from '../../../../testing/unit-test-helper';
import { ComponentsModule } from '../../../shared/components/components.module';
NgxDatatableModule,
RouterTestingModule,
ComponentsModule,
- BsDropdownModule.forRoot(),
+ NgbDropdownModule,
ChartsModule,
PipesModule
],
import { RouterTestingModule } from '@angular/router/testing';
import { NgbNavModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { ModalModule } from 'ngx-bootstrap/modal';
import { ToastrModule } from 'ngx-toastr';
import { BehaviorSubject, of } from 'rxjs';
imports: [
BrowserAnimationsModule,
SharedModule,
- BsDropdownModule.forRoot(),
NgbNavModule,
ModalModule.forRoot(),
NgbTooltipModule,
import { TreeModule } from 'angular-tree-component';
import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { ModalModule } from 'ngx-bootstrap/modal';
import { TimepickerModule } from 'ngx-bootstrap/timepicker';
RouterModule,
FormsModule,
ReactiveFormsModule,
- BsDropdownModule.forRoot(),
BsDatepickerModule.forRoot(),
ModalModule.forRoot(),
NgbTooltipModule,
import { RouterTestingModule } from '@angular/router/testing';
import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { ToastrModule } from 'ngx-toastr';
import {
imports: [
BrowserAnimationsModule,
HttpClientTestingModule,
- BsDropdownModule.forRoot(),
NgBootstrapFormValidationModule.forRoot(),
RouterTestingModule,
CephModule,
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterTestingModule } from '@angular/router/testing';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { ToastrModule } from 'ngx-toastr';
import { of } from 'rxjs';
CephSharedModule,
SharedModule,
HttpClientTestingModule,
- BsDropdownModule.forRoot(),
RouterTestingModule,
ToastrModule.forRoot(),
CephModule,
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterTestingModule } from '@angular/router/testing';
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
import * as _ from 'lodash';
import { BsModalService } from 'ngx-bootstrap/modal';
import { ToastrModule } from 'ngx-toastr';
ToastrModule.forRoot(),
CephModule,
ReactiveFormsModule,
+ NgbDropdownModule,
RouterTestingModule,
CoreModule,
RouterTestingModule
const tableActionElement = fixture.debugElement.query(By.directive(TableActionsComponent));
const toClassName = TestBed.inject(TableActionsComponent).toClassName;
const getActionClasses = (action: CdTableAction) =>
- tableActionElement.query(By.css(`.${toClassName(action.name)} .dropdown-item`)).classes;
+ tableActionElement.query(By.css(`[ngbDropdownItem].${toClassName(action.name)}`)).classes;
component.tableActions.forEach((action) => {
if (action.name === 'Create') {
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterTestingModule } from '@angular/router/testing';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { BsModalRef, BsModalService, ModalModule } from 'ngx-bootstrap/modal';
import { ToastrModule } from 'ngx-toastr';
import { of } from 'rxjs';
imports: [
BrowserAnimationsModule,
SharedModule,
- BsDropdownModule.forRoot(),
ModalModule.forRoot(),
ToastrModule.forRoot(),
RouterTestingModule,
import { NgbNavModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { ActionLabels, URLVerbs } from '../../shared/constants/app.constants';
import { SharedModule } from '../../shared/shared.module';
SharedModule,
RouterModule,
ReactiveFormsModule,
- BsDropdownModule,
NgbTooltipModule,
BlockModule,
NgBootstrapFormValidationModule
import { NgbNavModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { ModalModule } from 'ngx-bootstrap/modal';
import { ActionLabels, URLVerbs } from '../../shared/constants/app.constants';
FormsModule,
ReactiveFormsModule,
PerformanceCounterModule,
- BsDropdownModule.forRoot(),
NgbNavModule,
ModalModule.forRoot(),
RouterModule,
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { RouterTestingModule } from '@angular/router/testing';
import { SharedModule } from '../../../shared/shared.module';
declarations: [LoginLayoutComponent],
imports: [
BrowserAnimationsModule,
- BsDropdownModule.forRoot(),
BsDatepickerModule.forRoot(),
HttpClientTestingModule,
RouterTestingModule,
-<div dropdown
- class="btn-group"
+<div ngbDropdown
+ placement="bottom-right"
*ngIf="userPermission.read">
- <a dropdownToggle
+ <a ngbDropdownToggle
class="dropdown-toggle"
i18n-title
title="Dashboard Settings">
<span i18n
class="d-md-none">Dashboard Settings</span>
</a>
- <ul *dropdownMenu
- class="dropdown-menu dropdown-menu-right"
- role="menu">
- <li *ngIf="userPermission.read">
- <a i18n
- class="dropdown-item"
- routerLink="/user-management">User management</a>
- </li>
- <li *ngIf="configOptPermission.read">
- <a i18n
- class="dropdown-item"
- routerLink="/telemetry">Telemetry configuration</a>
- </li>
- </ul>
+ <div ngbDropdownMenu>
+ <button ngbDropdownItem
+ *ngIf="userPermission.read"
+ routerLink="/user-management"
+ i18n>User management</button>
+ <button ngbDropdownItem
+ *ngIf="configOptPermission.read"
+ routerLink="/telemetry"
+ i18n>Telemetry configuration</button>
+ </div>
</div>
name="token" />
</form>
-<div class="btn-group"
- dropdown>
- <a dropdownToggle
- class="dropdown-toggle"
+<div ngbDropdown
+ placement="bottom-right">
+ <a ngbDropdownToggle
i18n-title
title="Help">
<i [ngClass]="[icons.questionCircle]"></i>
<span i18n
class="d-md-none">Help</span>
</a>
- <ul *dropdownMenu
- class="dropdown-menu dropdown-menu-right"
- role="menu">
- <li>
- <a i18n
- class="dropdown-item"
- [ngClass]="{'disabled': !docsUrl}"
- href="{{ docsUrl }}"
- target="_blank">Documentation</a>
- </li>
- <li>
- <a i18n
- class="dropdown-item"
- (click)="goToApiDocs()">API</a>
- </li>
- <li>
- <a i18n
- class="dropdown-item"
- (click)="openAboutModal()">About</a>
- </li>
- </ul>
+ <div ngbDropdownMenu>
+ <a ngbDropdownItem
+ [ngClass]="{'disabled': !docsUrl}"
+ href="{{ docsUrl }}"
+ target="_blank"
+ i18n>Documentation</a>
+ <button ngbDropdownItem
+ (click)="goToApiDocs()"
+ i18n>API</button>
+ <button ngbDropdownItem
+ (click)="openAboutModal()"
+ i18n>About</button>
+ </div>
</div>
-<div dropdown
- class="btn-group">
- <a dropdownToggle
- class="dropdown-toggle"
+<div ngbDropdown
+ placement="bottom-right">
+ <a ngbDropdownToggle
i18n-title
title="Logged in user">
<i [ngClass]="[icons.user]"></i>
<span i18n
class="d-md-none">Logged in user</span>
</a>
- <ul *dropdownMenu
- class="dropdown-menu dropdown-menu-right"
- role="menu">
- <li class="disabled"
- role="menuitem">
- <a i18n
- class="dropdown-item disabled"
- href="#">Signed in as
- <strong>{{ username }}</strong></a>
- </li>
+ <div ngbDropdownMenu>
+ <button ngbDropdownItem
+ disabled
+ i18n>Signed in as <strong>{{ username }}</strong></button>
<li class="dropdown-divider"></li>
- <li *ngIf="!sso"
- role="menuitem">
- <a class="dropdown-item"
- routerLink="/user-profile/edit">
- <i [ngClass]="[icons.lock]"></i>
- <span i18n>Change password</span>
- </a>
- </li>
- <li role="menuitem">
- <a class="dropdown-item"
- (click)="logout()">
- <i [ngClass]="[icons.signOut]"></i>
- <span i18n>Sign out</span>
- </a>
- </li>
- </ul>
+ <button ngbDropdownItem
+ *ngIf="!sso"
+ routerLink="/user-profile/edit">
+ <i [ngClass]="[icons.lock]"></i>
+ <span i18n>Change password</span>
+ </button>
+ <button ngbDropdownItem
+ (click)="logout()">
+ <i [ngClass]="[icons.signOut]"></i>
+ <span i18n>Sign out</span>
+ </button>
+ </div>
</div>
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
import { CollapseModule } from 'ngx-bootstrap/collapse';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { SimplebarAngularModule } from 'simplebar-angular';
import { AppRoutingModule } from '../../app-routing.module';
CommonModule,
AuthModule,
CollapseModule.forRoot(),
- BsDropdownModule.forRoot(),
+ NgbDropdownModule,
AppRoutingModule,
SharedModule,
SimplebarAngularModule,
}
}
- .navbar-nav > li > .cd-navbar > [dropdown] > a,
+ .navbar-nav > li > .cd-navbar > [ngbDropdown] > a,
.navbar-nav > li > .cd-navbar > a,
.navbar-nav > li > a {
color: $color-nav-links;
color: $color-nav-links;
}
- .navbar-nav > li > .cd-navbar > [dropdown] > a:hover,
- .navbar-nav > li > .cd-navbar > [dropdown].open > a,
+ .navbar-nav > li > .cd-navbar > [ngbDropdown] > a:hover,
+ .navbar-nav > li > .cd-navbar > [ngbDropdown].open > a,
.navbar-nav > li > .cd-navbar > a:hover,
.navbar-nav > li > a:hover,
.navbar-nav > li:hover {
background-color: $color-nav-links-hover;
}
- .navbar-nav > .open > .cd-navbar > [dropdown] > a,
- .navbar-nav > .open > .cd-navbar > [dropdown] > a:hover,
+ .navbar-nav > .open > .cd-navbar > [ngbDropdown] > a,
+ .navbar-nav > .open > .cd-navbar > [ngbDropdown] > a:hover,
.navbar-nav > .open > .cd-navbar > a,
.navbar-nav > .open > .cd-navbar > a:focus,
.navbar-nav > .open > .cd-navbar > a:hover,
import {
NgbAlertModule,
+ NgbDropdownModule,
NgbPopoverModule,
NgbProgressbarModule,
NgbTooltipModule
import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
import { ClickOutsideModule } from 'ng-click-outside';
import { ChartsModule } from 'ng2-charts';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { ModalModule } from 'ngx-bootstrap/modal';
import { SimplebarAngularModule } from 'simplebar-angular';
PipesModule,
ModalModule.forRoot(),
DirectivesModule,
- BsDropdownModule,
+ NgbDropdownModule,
NgBootstrapFormValidationModule,
ClickOutsideModule,
SimplebarAngularModule,
-<div dropdown
- class="btn-group"
+<div ngbDropdown
+ placement="bottom-right"
*ngIf="isDropdown">
- <a dropdownToggle
- class="dropdown-toggle"
- data-toggle="dropdown"
+ <a ngbDropdownToggle
i18n-title
title="Select a Language">
{{ supportedLanguages[selectedLanguage] }}
</a>
- <ul *dropdownMenu
- class="dropdown-menu dropdown-menu-right">
- <li *ngFor="let lang of supportedLanguages | keyvalue">
- <a class="dropdown-item"
- (click)="changeLanguage(lang.key)">{{ lang.value }}</a>
- </li>
- </ul>
+ <div ngbDropdownMenu>
+ <ng-container *ngFor="let lang of supportedLanguages | keyvalue">
+ <button ngbDropdownItem
+ (click)="changeLanguage(lang.key)">
+ {{ lang.value }}
+ </button>
+ </ng-container>
+ </div>
</div>
<select *ngIf="!isDropdown"
@Input()
isDropdown = true;
- supportedLanguages: Record<string, any> = SupportedLanguages;
+ supportedLanguages: Record<string, any> = {};
selectedLanguage: string;
constructor(private localeService: BsLocaleService, private languageService: LanguageService) {}
ngOnInit() {
this.selectedLanguage = this.languageService.getLocale();
+
this.defineUsedLanguage();
this.languageService.getLanguages().subscribe((langs) => {
- this.supportedLanguages = _.pick(this.supportedLanguages, langs) as Object;
+ this.supportedLanguages = _.pick(SupportedLanguages, langs) as Object;
});
}
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { ComponentsModule } from '../components/components.module';
import { PipesModule } from '../pipes/pipes.module';
CommonModule,
NgxDatatableModule,
FormsModule,
- BsDropdownModule.forRoot(),
+ NgbDropdownModule,
PipesModule,
ComponentsModule,
RouterModule
-<div class="btn-group"
- dropdown>
+<div class="btn-group">
<ng-container *ngIf="getCurrentButton() as action">
<button type="button"
class="btn btn-{{btnColor}}"
(click)="useClickAction(action)"
[routerLink]="useRouterLink(action)"
[preserveFragment]="action.preserveFragment ? '' : null">
- <i [ngClass]="[action.icon]"></i><span>{{ action.name }}</span>
+
+ <i [ngClass]="[action.icon]"></i>
+ <span>{{ action.name }}</span>
</button>
</ng-container>
- <button type="button"
- dropdownToggle
- *ngIf="showDropDownActions()"
- class="btn btn-{{btnColor}} dropdown-toggle dropdown-toggle-split">
- <ng-container *ngIf="dropDownOnly">{{ dropDownOnly }} </ng-container>
- <span *ngIf="!dropDownOnly"
- class="sr-only"></span>
- </button>
- <ul *dropdownMenu
- class="dropdown-menu"
- role="menu">
- <ng-container *ngFor="let action of dropDownActions">
- <li role="menuitem"
- class="{{ toClassName(action['name']) }}"
- data-toggle="tooltip"
- title="{{ useDisableDesc(action) }}">
- <a class="dropdown-item"
- (click)="useClickAction(action)"
- [routerLink]="useRouterLink(action)"
- [preserveFragment]="action.preserveFragment ? '' : null"
- [ngClass]="{'disabled': disableSelectionAction(action)}">
- <i [ngClass]="[action.icon]"></i><span>{{ action.name }}</span>
- </a>
- </li>
- </ng-container>
- </ul>
+ <div class="btn-group"
+ ngbDropdown
+ placement="bottom-right"
+ role="group"
+ aria-label="Button group with nested dropdown">
+ <button class="btn btn-{{btnColor}} dropdown-toggle-split"
+ *ngIf="showDropDownActions()"
+ ngbDropdownToggle>
+ <ng-container *ngIf="dropDownOnly">{{ dropDownOnly }} </ng-container>
+ <span *ngIf="!dropDownOnly"
+ class="sr-only"></span>
+ </button>
+ <div class="dropdown-menu"
+ ngbDropdownMenu>
+ <ng-container *ngFor="let action of dropDownActions">
+ <button ngbDropdownItem
+ class="{{ toClassName(action['name']) }}"
+ (click)="useClickAction(action)"
+ [routerLink]="useRouterLink(action)"
+ [preserveFragment]="action.preserveFragment ? '' : null"
+ [disabled]="disableSelectionAction(action)">
+ <i [ngClass]="[action.icon]"></i>
+ <span>{{ action.name }}</span>
+ </button>
+ </ng-container>
+ </div>
+ </div>
</div>
import { FormsModule } from '@angular/forms';
import { RouterTestingModule } from '@angular/router/testing';
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { configureTestBed } from '../../../../testing/unit-test-helper';
import { ComponentsModule } from '../../components/components.module';
NgxDatatableModule,
ComponentsModule,
RouterTestingModule,
- BsDropdownModule.forRoot(),
+ NgbDropdownModule,
PipesModule
]
});
<!-- column filters -->
<div *ngIf="columnFilters.length !== 0"
class="btn-group widget-toolbar">
- <div dropdown
- class="btn-group tc_filter_name">
- <a dropdownToggle
- class="btn btn-light dropdown-toggle"
- data-toggle="dropdown">
+ <div ngbDropdown
+ placement="bottom-right"
+ class="tc_filter_name">
+ <button ngbDropdownToggle
+ class="btn btn-light">
<i [ngClass]="[icons.large, icons.filter]"></i>
{{ selectedFilter.column.name }}
- </a>
- <ul *dropdownMenu
- class="dropdown-menu px-1"
- role="menu">
- <li *ngFor="let filter of columnFilters"
- role="menuitem">
- <a href=""
- class="dropdown-item"
- (click)="onSelectFilter(filter); false">{{ filter.column.name }}</a>
- </li>
- </ul>
+ </button>
+ <div ngbDropdownMenu>
+ <ng-container *ngFor="let filter of columnFilters">
+ <button ngbDropdownItem
+ (click)="onSelectFilter(filter); false">{{ filter.column.name }}</button>
+ </ng-container>
+ </div>
</div>
- <div dropdown
- class="btn-group tc_filter_option">
- <a dropdownToggle
- class="btn btn-light dropdown-toggle"
- [class.disabled]="selectedFilter.options.length === 0"
- data-toggle="dropdown">
- {{ selectedFilter.value ? selectedFilter.value.formatted: 'Any' }}
- </a>
- <ul *dropdownMenu
- class="dropdown-menu px-1"
- role="menu">
- <li *ngFor="let option of selectedFilter.options"
- role="menuitem">
- <a href=""
- class="dropdown-item"
- (click)="onChangeFilter(selectedFilter, option); false">{{ option.formatted }}
+
+ <div ngbDropdown
+ placement="bottom-right"
+ class="tc_filter_option">
+ <button ngbDropdownToggle
+ class="btn btn-light"
+ [class.disabled]="selectedFilter.options.length === 0">
+ {{ selectedFilter.value ? selectedFilter.value.formatted: 'Any' }}
+ </button>
+ <div ngbDropdownMenu>
+ <ng-container *ngFor="let option of selectedFilter.options">
+ <button ngbDropdownItem
+ (click)="onChangeFilter(selectedFilter, option); false">
+ {{ option.formatted }}
<i *ngIf="selectedFilter.value !== undefined && (selectedFilter.value.raw === option.raw)"
[ngClass]="[icons.check]"></i>
- </a>
- </li>
- </ul>
+ </button>
+ </ng-container>
+ </div>
</div>
</div>
<!-- end column filters -->
*ngIf="searchField">
<span class="input-group-prepend">
<span class="input-group-text">
- <i [ngClass]="[icons.search]"></i>
+ <i [ngClass]="[icons.search]"></i>
</span>
</span>
<input class="form-control"
<!-- show hide columns -->
<div class="widget-toolbar">
- <div dropdown
- [autoClose]="false"
- class="dropdown tc_menuitem tc_menuitem_cluster">
- <a dropdownToggle
- class="btn btn-light dropdown-toggle tc_columnBtn"
- data-toggle="dropdown">
+ <div ngbDropdown
+ autoClose="outside"
+ class="tc_menuitem">
+ <button ngbDropdownToggle
+ class="btn btn-light tc_columnBtn">
<i [ngClass]="[icons.large, icons.table]"></i>
- </a>
- <ul *dropdownMenu
- class="dropdown-menu px-3">
+ </button>
+ <div ngbDropdownMenu>
<ng-container *ngFor="let column of columns">
- <li *ngIf="column.name !== ''" >
- <div class="custom-control custom-checkbox">
+ <button ngbDropdownItem
+ *ngIf="column.name !== ''"
+ (click)="toggleColumn(column); false;">
+ <div class="custom-control custom-checkbox py-0">
<input class="custom-control-input"
type="checkbox"
- (change)="toggleColumn($event)"
[name]="column.prop"
[id]="column.prop"
[checked]="!column.isHidden">
<label class="custom-control-label"
[for]="column.prop">{{ column.name }}</label>
</div>
- </li>
+ </button>
</ng-container>
- </ul>
+ </div>
</div>
</div>
<!-- end show hide columns -->
}
}
- .dropdown-menu {
- white-space: nowrap;
- & li {
- cursor: default;
- & label {
- width: 100%;
- margin-bottom: 0;
- padding-left: 0;
- padding-right: 0;
- cursor: pointer;
- &:hover {
- background-color: $color-table-dropdown-bg;
- }
- & input {
- cursor: pointer;
- }
- }
- }
- }
.dataTables_length > input {
line-height: 25px;
text-align: right;
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterTestingModule } from '@angular/router/testing';
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import * as _ from 'lodash';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { configureTestBed } from '../../../../testing/unit-test-helper';
import { ComponentsModule } from '../../components/components.module';
FormsModule,
ComponentsModule,
RouterTestingModule,
- BsDropdownModule.forRoot(),
+ NgbDropdownModule,
PipesModule
]
});
describe('after ngInit', () => {
const toggleColumn = (prop: string, checked: boolean) => {
component.toggleColumn({
- target: {
- name: prop,
- checked: checked
- }
+ prop: prop,
+ isHidden: checked
});
};
this.updateSelection.emit(_.clone(this.selection));
}
- toggleColumn($event: any) {
- const prop: TableColumnProp = $event.target.name;
- const hide = !$event.target.checked;
+ toggleColumn(column: CdTableColumn) {
+ const prop: TableColumnProp = column.prop;
+ const hide = !column.isHidden;
if (hide && this.tableColumns.length === 1) {
- $event.target.checked = true;
+ column.isHidden = true;
return;
}
_.find(this.localColumns, (c: CdTableColumn) => c.prop === prop).isHidden = hide;
.dropdown-menu {
min-width: 50px;
z-index: 999999;
+
+ button.dropdown-item:focus {
+ outline: none;
+ }
}
.dropdown-menu > li > a {
color: $color-dropdown-menu;
projects / ceph-ci.git / commitdiff