Skip to content

Bootstrap - #2126

Merged
lukavdplas merged 124 commits into
developfrom
feature/bootstrap
Oct 8, 2026
Merged

lukavdplas merged 124 commits into
developfrom
feature/bootstrap

Conversation

@lukavdplas

@lukavdplas lukavdplas commented Jul 29, 2026 •

Copy link
Copy Markdown
Contributor

Mega-update to switch from bulma to bootstrap. From here we can also start replacing primeNG components, but I have not started with that yet.

(PrimeNG components still work in the meantime, so they can be replaced one by one.)

This branch is more or less ready, but there are still going to be some small stray issues before it's release-ready. But I think the code should be stable enough that we can pick up different issues in parallel.

Summary of changes:

  • Replaced class names and restructured templates throughout the application.
  • DropdownComponent now builds on NgbDropdown. NgbDropdown handles opening/closing the menu, our own component only needs to manage the current selection. API is slightly changed.
  • MenuDropdownComponent (for navbar dropdowns) is replaced by NgbDropdown.
  • TabsComponent is replaced by NgbNav.
  • BalloonDirective is replaced by NgbTooltip.
  • ToggleComponent is replaced by the switch CSS class.
  • The is-loading CSS class is replaced by LoadingDirective.
  • For buttons, the is-loading CSS class is replaced by ButtonLoadingDirective. This one also blocks Enter/Space events while loading. (The CSS class only blocked pointer events.)
  • ConfirmModalComponent now uses NgbModal; PaginationComponent uses NgbPagination; NotificationsComponent uses NgbToast.
  • The global CSS now includes a tc_theme.scss that imports bootstrap with customisations. This is meant to separate the theme from the generic styles.scss, and should make it easier to provide different theme colours in the future.

Still to do:

  • There are probably some components I forgot to update, layout issues to address, etc.

PrimeNG components to replace:

  • p-dialog -> replace with NgbModal -> Refactor: p-dialog to NgbModal #2165
  • p-datepicker -> replace with NgbDatepicker.
  • p-steps -> use NgbNav (with extra styling) -> remove primeng steps #2139
  • p-autocomplete for query comparison -> build from scratch -> Custom chips component for term comparison #2141
  • p-autoComplete for language selection -> similar, but mix in NgbTypeahead somehow
  • p-multiselect -> Could build this directly on NgbDropdown (without a generic "multiselect" component), or build something analogous to our (single-select) DoprdownComponent.
  • p-slider -> there may be a suitable package for multi-thumb bootstrap sliders. Otherwise build from scratch.
  • p-table -> implement filters and pagination (with NgbPagination) without a "table component".

@lukavdplas
lukavdplas marked this pull request as ready for review August 18, 2026 11:25
@lukavdplas lukavdplas added the frontend changes to the angular frontend label Aug 25, 2026
@XanderVertegaal

Copy link
Copy Markdown
Contributor

I'll pick up p-dialog and p-datepicker before moving to others.

@lukavdplas
lukavdplas merged commit 0a3bf0b into develop Oct 8, 2026
3 of 4 checks passed
@lukavdplas
lukavdplas deleted the feature/bootstrap branch October 8, 2026 13:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

frontend changes to the angular frontend

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants