From cda0286f9b978d9deb5e8fe68b8ad8823bd86cf9 Mon Sep 17 00:00:00 2001 From: Henriette Darge Date: Thu, 13 Jun 2024 14:31:48 +0200 Subject: [PATCH 1/2] Extend the base layout to split into content-header, content-body, and content-body-right. The later is currently reserved to render the split screen of a WP. It may be extended later. This layout is designed to span 100% of the content height, so that the split screen can span until the very bottom of the page (while not overlapping the content-header). In that scope, I removed as much old/obsolete code that was interfering with those elements. --- app/components/projects/table_component.rb | 2 +- app/views/layouts/base.html.erb | 42 ++++++---- app/views/members/index.html.erb | 10 +-- .../pages/viewer/styles/generic.sass | 10 +-- .../wp-breadcrumb/wp-breadcrumb.sass | 1 - .../assets/sass/backlogs/_master_backlog.sass | 22 ----- .../src/assets/sass/backlogs/_taskboard.sass | 7 -- frontend/src/global_styles/content/_grid.sass | 1 - .../src/global_styles/content/_journal.sass | 3 - .../src/global_styles/content/_table.sass | 5 +- .../content/modules/_boards.sass | 3 - .../content/modules/_calendar.sass | 3 - .../global_styles/content/modules/_index.sass | 1 - .../content/modules/_team_planner.sass | 3 - frontend/src/global_styles/layout/_base.sass | 84 +++++++++++++++---- .../global_styles/layout/_base_mobile.sass | 12 ++- .../src/global_styles/layout/_breadcrumb.sass | 3 +- .../src/global_styles/layout/_main_menu.sass | 3 + frontend/src/global_styles/layout/_print.sass | 7 -- .../global_styles/layout/_toolbar_mobile.sass | 57 ++++++------- .../src/global_styles/layout/_zen_mode.sass | 11 --- .../layout/work_packages/_mobile.sass | 11 +-- .../layout/work_packages/_table.sass | 11 ++- .../global_styles/openproject/_generic.sass | 6 ++ .../openproject/_homescreen.sass | 3 +- .../global_styles/openproject/_mixins.sass | 13 ++- .../storages/admin/storages/index.html.erb | 62 +++++++------- 27 files changed, 198 insertions(+), 198 deletions(-) delete mode 100644 frontend/src/global_styles/content/modules/_calendar.sass diff --git a/app/components/projects/table_component.rb b/app/components/projects/table_component.rb index 8828376130cc..e1244dd6003e 100644 --- a/app/components/projects/table_component.rb +++ b/app/components/projects/table_component.rb @@ -52,7 +52,7 @@ def table_id end def container_class - "generic-table--container_visible-overflow" + "generic-table--container_visible-overflow generic-table--container_height-100" end ## diff --git a/app/views/layouts/base.html.erb b/app/views/layouts/base.html.erb index 4f844ca25f2c..afca3f0a3dc9 100644 --- a/app/views/layouts/base.html.erb +++ b/app/views/layouts/base.html.erb @@ -119,15 +119,6 @@ See COPYRIGHT and LICENSE files for more details.
<%= render_primer_banner_message %> <%= render_streameable_primer_banner_message %> - <% if show_decoration %> -
- <%= you_are_here_info %> -
- <%= full_breadcrumbs %> -
- <%= call_hook :view_layouts_base_breadcrumb %> -
- <% end %> <%= render_flash_messages %> <% if show_onboarding_modal? %>
<%= content_tag :div, id: 'content', - class: initial_classes, + class: "#{initial_classes} #{'content--split' if content_for?(:content_body_right)}", data: stimulus_content_data do %> -

<%= t(:label_content) %>

- <%= content_for :content_body %> - <% unless local_assigns[:no_layout_yield] %> - <%= yield %> +

<%= t(:label_content) %>

+ <% if content_for?(:content_header) %> +
+ <%= content_for :content_header %> +
+ <% end %> + +
+ <% if show_decoration %> +
+ <%= you_are_here_info %> +
+ <%= full_breadcrumbs %> +
+ <%= call_hook :view_layouts_base_breadcrumb %> +
+ <% end %> + <%= content_for :content_body %> + <% unless local_assigns[:no_layout_yield] %> + <%= yield %> + <% end %> +
+ <% if content_for?(:content_body_right) %> +
+ <%= content_for :content_body_right %> +
<% end %> - <%= call_hook :view_layouts_base_content %> <% end %>
diff --git a/app/views/members/index.html.erb b/app/views/members/index.html.erb index 11b53e2f7c4f..0469594c432d 100644 --- a/app/views/members/index.html.erb +++ b/app/views/members/index.html.erb @@ -28,9 +28,9 @@ See COPYRIGHT and LICENSE files for more details. ++#%> <% html_title t(:label_member_plural) -%> -
+<% content_controller "members-form", dynamic: true %> +<% content_for :content_header do %> <%= render ::Members::IndexPageHeaderComponent.new(project: @project) %> <%= render ::Members::IndexSubHeaderComponent.new(project: @project, filter_options: @members_filter_options) %> @@ -47,8 +47,8 @@ See COPYRIGHT and LICENSE files for more details. <%= link_to I18n.t('button_back'), :back, class: 'button' %> <% end %>
+<% end %> -
- <%= render ::Members::TableComponent.new(rows: @members, **@members_table_options) %> -
+
+ <%= render ::Members::TableComponent.new(rows: @members, **@members_table_options) %>
diff --git a/frontend/src/app/features/bim/ifc_models/pages/viewer/styles/generic.sass b/frontend/src/app/features/bim/ifc_models/pages/viewer/styles/generic.sass index f9f52da862f3..f7424e94585c 100644 --- a/frontend/src/app/features/bim/ifc_models/pages/viewer/styles/generic.sass +++ b/frontend/src/app/features/bim/ifc_models/pages/viewer/styles/generic.sass @@ -12,21 +12,15 @@ @import "tooltips" @import "pivot_point" -// The IFC viewer shall fill the viewport to the bottom. -// This is different to how we style #content else where. .controller-bim\/ifc_models\/ifc_viewer overflow: hidden - &.action-show - #content - height: 100% - - // Override default behavior to let the viewer span the whole height + // Override default behavior to let the viewer be at the top of the table/cards @media only screen and (max-width: $breakpoint-sm) @include extended-content--right @include extended-content--left #content-wrapper - height: calc(100vh - 55px) + height: calc(100vh - #{var(--header-height)}) .work-packages-partitioned-page--content-container flex-direction: column diff --git a/frontend/src/app/features/work-packages/components/wp-breadcrumb/wp-breadcrumb.sass b/frontend/src/app/features/work-packages/components/wp-breadcrumb/wp-breadcrumb.sass index 2c92544764d4..2dacdc0e867a 100644 --- a/frontend/src/app/features/work-packages/components/wp-breadcrumb/wp-breadcrumb.sass +++ b/frontend/src/app/features/work-packages/components/wp-breadcrumb/wp-breadcrumb.sass @@ -2,7 +2,6 @@ .op-wp-breadcrumb @include global-breadcrumb-styles - margin: 0 height: initial &--ellipsed diff --git a/frontend/src/assets/sass/backlogs/_master_backlog.sass b/frontend/src/assets/sass/backlogs/_master_backlog.sass index f25a565ef1a7..21e1cf04a474 100644 --- a/frontend/src/assets/sass/backlogs/_master_backlog.sass +++ b/frontend/src/assets/sass/backlogs/_master_backlog.sass @@ -57,16 +57,6 @@ margin: 0 0 10px 0 width: 100% -/* - *this adds space at the bottom of the main content div to leave enough space - *for the menu without cutting it even if the bottom backlog does not contain - *any elements - */ - -.controller-rb_master_backlogs - .action-index #content - padding-bottom: 180px - #rb #backlogs_container .backlog .header background-color: var(--bgColor-muted) @@ -330,17 +320,5 @@ float: right width: 10% -/* In-place Story Editor */ - -.controller-rb_master_backlogs.action-show - #main, #content, #rb #backlogs_container .backlog .stories - overflow: visible - div.calendar - z-index: 10000 - .backlog font-size: 0.9rem - -/* Hide the button text in the ui-dialog */ -.ui-dialog-titlebar-close - overflow: hidden diff --git a/frontend/src/assets/sass/backlogs/_taskboard.sass b/frontend/src/assets/sass/backlogs/_taskboard.sass index 1d3cd2dffc6f..b889c60dcef7 100644 --- a/frontend/src/assets/sass/backlogs/_taskboard.sass +++ b/frontend/src/assets/sass/backlogs/_taskboard.sass @@ -48,10 +48,6 @@ white-space: nowrap text-overflow: ellipsis - -.controller-rb_taskboards.action-show #main - overflow: visible - #rb .task color: #484848 line-height: inherit @@ -225,9 +221,6 @@ background-color: none border: none -.ui-dialog-titlebar-close - overflow: hidden - .dark #task_editor label, .subject, .assigned_to_id, div color: #FFFFFF diff --git a/frontend/src/global_styles/content/_grid.sass b/frontend/src/global_styles/content/_grid.sass index 112234567cdd..2f69daa35487 100644 --- a/frontend/src/global_styles/content/_grid.sass +++ b/frontend/src/global_styles/content/_grid.sass @@ -9,7 +9,6 @@ $grid--widget-padding: 20px 20px 20px 20px display: grid body.widget-grid-layout - #content-wrapper, #content background-color: var(--grid-background-color) diff --git a/frontend/src/global_styles/content/_journal.sass b/frontend/src/global_styles/content/_journal.sass index 93346a3d0416..682b684dc397 100644 --- a/frontend/src/global_styles/content/_journal.sass +++ b/frontend/src/global_styles/content/_journal.sass @@ -26,9 +26,6 @@ // See COPYRIGHT and LICENSE files for more details. //++ -#content #history - padding-bottom: 11px - #history width: 700px margin: diff --git a/frontend/src/global_styles/content/_table.sass b/frontend/src/global_styles/content/_table.sass index 1d92a73aca99..bd33ef17b77d 100644 --- a/frontend/src/global_styles/content/_table.sass +++ b/frontend/src/global_styles/content/_table.sass @@ -41,7 +41,7 @@ $input-elements: input, 'input.form--text-field', select, 'select.form--select', .generic-table--container position: relative - height: 100% + height: initial width: 100% overflow: x: hidden @@ -53,6 +53,9 @@ $input-elements: input, 'input.form--text-field', select, 'select.form--select', &_visible-overflow overflow: visible + &_height-100 + height: 100% + .generic-table--results-container height: 100% overflow: diff --git a/frontend/src/global_styles/content/modules/_boards.sass b/frontend/src/global_styles/content/modules/_boards.sass index 103a8a2e0b74..4fbdeda32225 100644 --- a/frontend/src/global_styles/content/modules/_boards.sass +++ b/frontend/src/global_styles/content/modules/_boards.sass @@ -2,6 +2,3 @@ .router--boards-full-view @media only screen and (min-width: 680px) @include extended-content--left - - #content - height: 100% diff --git a/frontend/src/global_styles/content/modules/_calendar.sass b/frontend/src/global_styles/content/modules/_calendar.sass deleted file mode 100644 index 9146a088ecfb..000000000000 --- a/frontend/src/global_styles/content/modules/_calendar.sass +++ /dev/null @@ -1,3 +0,0 @@ -.router--calendar - #content - height: 100% diff --git a/frontend/src/global_styles/content/modules/_index.sass b/frontend/src/global_styles/content/modules/_index.sass index 5981374ff14c..4b393435a122 100644 --- a/frontend/src/global_styles/content/modules/_index.sass +++ b/frontend/src/global_styles/content/modules/_index.sass @@ -4,7 +4,6 @@ @import 'avatars' @import 'bim' @import 'boards' -@import 'calendar' @import 'costs' @import 'documents' @import '2fa' diff --git a/frontend/src/global_styles/content/modules/_team_planner.sass b/frontend/src/global_styles/content/modules/_team_planner.sass index 2c3e7ccb1a9a..1c64df7a7a83 100644 --- a/frontend/src/global_styles/content/modules/_team_planner.sass +++ b/frontend/src/global_styles/content/modules/_team_planner.sass @@ -3,9 +3,6 @@ $view-select-dropdown-width: 8rem .router--team-planner - #content - height: 100% - &.router--work-packages-partitioned-split-view-details, &.router--work-packages-partitioned-split-view-new full-calendar.op-team-planner--calendar .fc-header-toolbar diff --git a/frontend/src/global_styles/layout/_base.sass b/frontend/src/global_styles/layout/_base.sass index 20e965a07ccc..e03c169969c3 100644 --- a/frontend/src/global_styles/layout/_base.sass +++ b/frontend/src/global_styles/layout/_base.sass @@ -38,7 +38,6 @@ overflow: auto &.nomenus - padding-bottom: 0 overflow: hidden &.nosidebar @@ -56,29 +55,82 @@ background-color: var(--body-background) position: relative - &.nosidebar - margin-left: 0 - &.nomenus - margin: 0 - padding: 0 +// ----------- BEGIN Content definition -------------- + +// The content is structured as grid and should ideally look like this +// -------------------------------------------------------- +// | content-header | +// -------------------------------------------------------- +// | | | +// | | | +// | | | +// | content-body | content- | +// | | bodyRight | +// | | | +// | | | +// | | | +// -------------------------------------------------------- + +// This layout is designed to show the WP split screen on any rails page. +// Because of that, there are three things to keep in mind +// 1. The content-bodyRight is optional. If it is not shown, the content-body should fill the available space. +// 2. The WP split screen requires a 100% layout, meaning that the content-bodyRight needs to be +// "glued" to the right side and the bottom of the screen without any additional paddings or margins. +// 3. Not all pages already follow that desired structure. Older pages render all their content inside content-body. +// The design most cover that case in which the content-body needs to span the whole available height and width. + +// Because of those requirements, the #content element cannot take care of the paddings. +// Instead the children elements have to do that themselves depending on which elements are present + +$top-space: 10px +$right-space: 20px +$bottom-space: 10px +$left-space: 20px #content - padding: 10px 20px + display: grid + grid-template-columns: 1fr auto + grid-template-rows: auto 1fr + grid-template-areas: "header header" "body bodyRight" + padding: 0 margin: 0 width: 100% + height: 100% + overflow: auto + @include styled-scroll-bar z-index: 10 background-color: var(--body-background) - &.api-docs - height: 100% - padding: 0 + &.content--split + overflow: hidden + +#content-header + grid-area: header + padding-right: $right-space + padding-top: $top-space + padding-left: $left-space + +#content-body + grid-area: body + padding-bottom: $bottom-space + padding-left: $left-space -.content-overlay - display: none + // Special rules for pages that still follow the old layout and render everything inside the content-body + .accessibility-helper ~ & + padding-top: $top-space + &:last-child + padding-right: $right-space -.-draggable - cursor: grab + .content--split & + overflow: auto + @include styled-scroll-bar + +#content-bodyRight + grid-area: bodyRight + padding: 0 + width: 580px + overflow: auto + @include styled-scroll-bar -a - text-decoration: var(--link-text-decoration) +// ----------- END Content definition -------------- diff --git a/frontend/src/global_styles/layout/_base_mobile.sass b/frontend/src/global_styles/layout/_base_mobile.sass index 4359d1578a71..bfdc02b09680 100644 --- a/frontend/src/global_styles/layout/_base_mobile.sass +++ b/frontend/src/global_styles/layout/_base_mobile.sass @@ -44,7 +44,8 @@ #wrapper, #content-wrapper, - #content + #content-body, + #content-bodyRight overflow: hidden #main @@ -60,8 +61,13 @@ min-height: calc(100vh - var(--header-height)) // ------------------- END CHANGED SCROLL BEHAVIOR - #content - padding: 10px 15px + #content-body, + #content-header + padding-left: 15px + padding-right: 15px + + #content-bodyRight + display: none #main grid-template-columns: auto diff --git a/frontend/src/global_styles/layout/_breadcrumb.sass b/frontend/src/global_styles/layout/_breadcrumb.sass index 15a25e360bf5..e423c9bedaf2 100644 --- a/frontend/src/global_styles/layout/_breadcrumb.sass +++ b/frontend/src/global_styles/layout/_breadcrumb.sass @@ -29,8 +29,7 @@ #breadcrumb @include global-breadcrumb-styles min-height: var(--breadcrumb-height) - padding: 10px 20px - padding-bottom: 0 + padding: 0 li white-space: nowrap diff --git a/frontend/src/global_styles/layout/_main_menu.sass b/frontend/src/global_styles/layout/_main_menu.sass index f5b96e2f97a9..ccd16383f440 100644 --- a/frontend/src/global_styles/layout/_main_menu.sass +++ b/frontend/src/global_styles/layout/_main_menu.sass @@ -400,3 +400,6 @@ $badge_offset: 4px #main-menu-toggle .icon-close display: none + +.content-overlay + display: none diff --git a/frontend/src/global_styles/layout/_print.sass b/frontend/src/global_styles/layout/_print.sass index fa183e598347..d57deb0f148f 100644 --- a/frontend/src/global_styles/layout/_print.sass +++ b/frontend/src/global_styles/layout/_print.sass @@ -27,16 +27,9 @@ #content-wrapper width: 100vw - margin: 0 - border: 0 background: #fff overflow: visible !important - #content-wrapper.hidden-navigation, - #content.hidden-navigation - width: 99% !important - margin-left: 0 !important - .autoscroll overflow-x: visible diff --git a/frontend/src/global_styles/layout/_toolbar_mobile.sass b/frontend/src/global_styles/layout/_toolbar_mobile.sass index e644ac548208..f1b4415cbf2c 100644 --- a/frontend/src/global_styles/layout/_toolbar_mobile.sass +++ b/frontend/src/global_styles/layout/_toolbar_mobile.sass @@ -27,36 +27,29 @@ //++ @media screen and (max-width: $breakpoint-md) - #content - .toolbar-container - .title-container:not(editable-toolbar-title) - margin-right: 10px - - .toolbar-items - display: flex - flex-wrap: nowrap - justify-content: flex-end - margin-right: 0 - - .toolbar-item - margin: 0 0 0 10px - - // Hide toolbar button texts on mobile - .button--text:not(.button--text_without_icon), - .icon-pulldown, - .spot-icon_dropdown - display: none - - .op-icon--wrapper - margin: 0 - - > li - .button - width: 100% - white-space: nowrap - - .spot-action-bar .button - width: auto - - > form input.button + .toolbar-container + .title-container:not(editable-toolbar-title) + margin-right: 10px + + .toolbar-items + display: flex + flex-wrap: nowrap + justify-content: flex-end + margin-right: 0 + + .toolbar-item + margin: 0 0 0 10px + + // Hide toolbar button texts on mobile + .button--text:not(.button--text_without_icon), + .icon-pulldown, + .spot-icon_dropdown + display: none + + .op-icon--wrapper + margin: 0 + + > li + .button width: 100% + white-space: nowrap diff --git a/frontend/src/global_styles/layout/_zen_mode.sass b/frontend/src/global_styles/layout/_zen_mode.sass index aebb385bb168..c679d6a68cc9 100644 --- a/frontend/src/global_styles/layout/_zen_mode.sass +++ b/frontend/src/global_styles/layout/_zen_mode.sass @@ -2,20 +2,9 @@ body.zen-mode #main-menu display: none #content-wrapper - margin-left: 0px height: 100vh width: 100vw #main - top: 0px height: 100% grid-template-columns: auto - - &.controller-wiki #content - margin: 0 auto - - @media only screen and (max-width: $breakpoint-xl) - max-width: 90vw - - @include breakpoint(xl) - max-width: 60vw diff --git a/frontend/src/global_styles/layout/work_packages/_mobile.sass b/frontend/src/global_styles/layout/work_packages/_mobile.sass index ce7401d65250..873a30365d81 100644 --- a/frontend/src/global_styles/layout/work_packages/_mobile.sass +++ b/frontend/src/global_styles/layout/work_packages/_mobile.sass @@ -101,9 +101,6 @@ @media screen and (max-width: $breakpoint-sm) .router--work-packages-full-view - #content - position: relative - .wp-show--header-container grid-template-columns: auto 1fr grid-template-rows: auto auto 1fr @@ -120,9 +117,9 @@ .router--work-packages-partitioned-split-view // Ensure the WP cards can span the complete width on mobile - #content + #content-body padding: 15px 0 !important - .toolbar-container, - .work-packages--filters-optional-container - margin-left: 15px + .toolbar-container, + .work-packages--filters-optional-container + margin-left: 15px diff --git a/frontend/src/global_styles/layout/work_packages/_table.sass b/frontend/src/global_styles/layout/work_packages/_table.sass index e310b7fee1ff..cb8c488597da 100644 --- a/frontend/src/global_styles/layout/work_packages/_table.sass +++ b/frontend/src/global_styles/layout/work_packages/_table.sass @@ -53,9 +53,11 @@ // // This makes use of more specific rules overwriting less specific ones. // Per default, the height is always 100 -.openproject-base--ui-view, -.work-packages-page--ui-view - height: 100% +// TODO: remove this whole block once the angular router is removed +body[class*="router--"] + .openproject-base--ui-view, + .work-packages-page--ui-view + height: 100% .work-packages-partitioned-query-space--container > .toolbar-container @@ -134,9 +136,6 @@ contain: strict .router--work-packages-base - #content - height: 100% - .work-packages-partitioned-page--content-left overflow: hidden diff --git a/frontend/src/global_styles/openproject/_generic.sass b/frontend/src/global_styles/openproject/_generic.sass index e9ede8321f45..2d5c9fc4ee67 100644 --- a/frontend/src/global_styles/openproject/_generic.sass +++ b/frontend/src/global_styles/openproject/_generic.sass @@ -26,6 +26,9 @@ // See COPYRIGHT and LICENSE files for more details. //++ +a + text-decoration: var(--link-text-decoration) + .no-padding-bottom padding-bottom: 0 !important @@ -104,6 +107,9 @@ .-placeholder & direction: ltr +.-draggable + cursor: grab + .drop-zone.-dragged-over background-color: #eaeaea60 diff --git a/frontend/src/global_styles/openproject/_homescreen.sass b/frontend/src/global_styles/openproject/_homescreen.sass index 1011a9fce9ec..bb3c656e8393 100644 --- a/frontend/src/global_styles/openproject/_homescreen.sass +++ b/frontend/src/global_styles/openproject/_homescreen.sass @@ -28,10 +28,9 @@ @import mixins -.controller-homescreen #content-wrapper +.controller-homescreen .widget-boxes .widget-box box-shadow: none - border: 1px solid var(--borderColor-default) &.upsale background: var(--bgColor-accent-muted) diff --git a/frontend/src/global_styles/openproject/_mixins.sass b/frontend/src/global_styles/openproject/_mixins.sass index f3ebb5063696..857ba0da4f21 100644 --- a/frontend/src/global_styles/openproject/_mixins.sass +++ b/frontend/src/global_styles/openproject/_mixins.sass @@ -243,16 +243,13 @@ $scrollbar-size: 10px bottom: 0 z-index: 900 -@mixin extended-content--top - #content - padding-top: 0 - @mixin extended-content--bottom - #content + #content-body padding-bottom: 0 @mixin extended-content--left - #content + #content-body, + #content-header padding-left: 0 .toolbar-container @@ -261,7 +258,8 @@ $scrollbar-size: 10px margin-left: 20px @mixin extended-content--right - #content + #content-body, + #content-header padding-right: 0 .toolbar-container @@ -307,7 +305,6 @@ $scrollbar-size: 10px line-height: 36px !important @mixin global-breadcrumb-styles - margin-top: 10px display: none @include default-transition overflow: hidden diff --git a/modules/storages/app/views/storages/admin/storages/index.html.erb b/modules/storages/app/views/storages/admin/storages/index.html.erb index db38dbc49303..479409a1f35d 100644 --- a/modules/storages/app/views/storages/admin/storages/index.html.erb +++ b/modules/storages/app/views/storages/admin/storages/index.html.erb @@ -6,41 +6,43 @@ I18n.t("storages.label_storage") end %> -<%= render(Primer::OpenProject::PageHeader.new) do |header| %> - <% header.with_title { t("external_file_storages") } %> - <% header.with_description { t("storages.page_titles.file_storages.subtitle") } %> - <% header.with_breadcrumbs([{ href: admin_index_path, text: t("label_administration") }, - { href: admin_settings_storages_path, text: t("project_module_storages") }, - t("external_file_storages")]) %> -<% end %> +<% content_for :content_header do %> + <%= render(Primer::OpenProject::PageHeader.new) do |header| %> + <% header.with_title { t("external_file_storages") } %> + <% header.with_description { t("storages.page_titles.file_storages.subtitle") } %> + <% header.with_breadcrumbs([{ href: admin_index_path, text: t("label_administration") }, + { href: admin_settings_storages_path, text: t("project_module_storages") }, + t("external_file_storages")]) %> + <% end %> -<%= render(Primer::OpenProject::SubHeader.new) do |subheader| - subheader.with_action_component do - render(Primer::Alpha::ActionMenu.new(test_selector: 'storages-select-provider-action-menu', - anchor_align: :end)) do |menu| - menu.with_show_button(scheme: :primary, - aria: { label: I18n.t("storages.label_add_new_storage") }, - test_selector: "storages-create-new-provider-button") do |button| - button.with_leading_visual_icon(icon: :plus) - button.with_trailing_action_icon(icon: :"triangle-down") - I18n.t("storages.label_storage") - end + <%= render(Primer::OpenProject::SubHeader.new) do |subheader| + subheader.with_action_component do + render(Primer::Alpha::ActionMenu.new(test_selector: 'storages-select-provider-action-menu', + anchor_align: :end)) do |menu| + menu.with_show_button(scheme: :primary, + aria: { label: I18n.t("storages.label_add_new_storage") }, + test_selector: "storages-create-new-provider-button") do |button| + button.with_leading_visual_icon(icon: :plus) + button.with_trailing_action_icon(icon: :"triangle-down") + I18n.t("storages.label_storage") + end - ::Storages::Storage::PROVIDER_TYPES.each do |provider_type| - short_provider_type = ::Storages::Storage.shorten_provider_type(provider_type) + ::Storages::Storage::PROVIDER_TYPES.each do |provider_type| + short_provider_type = ::Storages::Storage.shorten_provider_type(provider_type) - menu.with_item( - label: I18n.t("storages.provider_types.#{short_provider_type}.name"), - href: url_helpers.select_provider_admin_settings_storages_path(provider: short_provider_type) - ) do |item| - item.with_trailing_visual_icon( - icon: "op-enterprise-addons", - classes: "upsale-colored" - ) if ::Storages::Storage::one_drive_without_ee_token?(provider_type) + menu.with_item( + label: I18n.t("storages.provider_types.#{short_provider_type}.name"), + href: url_helpers.select_provider_admin_settings_storages_path(provider: short_provider_type) + ) do |item| + item.with_trailing_visual_icon( + icon: "op-enterprise-addons", + classes: "upsale-colored" + ) if ::Storages::Storage::one_drive_without_ee_token?(provider_type) + end end end end - end -end %> + end %> +<% end %> <%= render(::Storages::Admin::StorageListComponent.new(@storages)) %> From d291d722376d1634167cc22a4a647bb099352219 Mon Sep 17 00:00:00 2001 From: Henriette Darge Date: Tue, 18 Jun 2024 13:29:30 +0200 Subject: [PATCH 2/2] Fix the height for the IFC viewer page. Otherwise the xeokit viewer will iteratively grow with no limit --- .../features/bim/ifc_models/pages/viewer/styles/generic.sass | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/frontend/src/app/features/bim/ifc_models/pages/viewer/styles/generic.sass b/frontend/src/app/features/bim/ifc_models/pages/viewer/styles/generic.sass index f7424e94585c..bcd4ad75b180 100644 --- a/frontend/src/app/features/bim/ifc_models/pages/viewer/styles/generic.sass +++ b/frontend/src/app/features/bim/ifc_models/pages/viewer/styles/generic.sass @@ -15,6 +15,11 @@ .controller-bim\/ifc_models\/ifc_viewer overflow: hidden + // Do not remove this, without checking the BCF module. + // The container of the xeokit viewer needs a fixed height. Otherwise it will grow without end. + #content-body + height: calc(100vh - #{var(--header-height)}) + // Override default behavior to let the viewer be at the top of the table/cards @media only screen and (max-width: $breakpoint-sm) @include extended-content--right