Fixes #30344 - use pf4 navigation

theforeman · Apr 26, 2023 · a27fb9a · a27fb9a
1 parent b40d2a0
commit a27fb9a
Show file tree

Hide file tree

Showing 63 changed files with 1,749 additions and 2,465 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -138,6 +138,7 @@
           "stringified",
           "subcomponent",
           "subcomponents",
+          "subnav",
           "subnet",
           "subnets",
           "substate",

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -423,7 +423,7 @@ function set_fullscreen(element) {
     .before("<span id='fullscreen-placeholder'></span>")
     .data('position', $(window).scrollTop())
     .addClass('fullscreen')
-    .appendTo($('.container-pf-nav-pf-vertical'))
+    .appendTo($('#rails-app-content'))
     .resize()
     .after(exit_button);
   $('#content').addClass('hidden');

diff --git a/app/assets/stylesheets/base-pf4.scss b/app/assets/stylesheets/base-pf4.scss
@@ -17,7 +17,6 @@ body {
   font-weight: var(--pf-global--FontWeight--normal);
   line-height: var(--pf-global--LineHeight--md);
   text-align: left;
-  background-color: var(--pf-global--BackgroundColor--100);
 }
 
 a {
@@ -52,30 +51,6 @@ a {
   }
 }
 
-.nav-pf-vertical {
-  .secondary-nav-item-pf {
-    span.list-group-item-value {
-      font-size: 15px;
-      line-height: inherit;
-    }
-
-    .nav-pf-secondary-nav {
-      .nav-item-pf-header {
-        font-size: 18px;
-      }
-
-      .vertical-sub-header-pf {
-        font-size: 15px;
-        font-weight: 900;
-      }
-
-      span.list-group-item-value {
-        font-size: 13px;
-      }
-    }
-  }
-}
-
 .pf-c-alert h4 {
   line-height: var(--pf-global--LineHeight--md);
 }
diff --git a/app/assets/stylesheets/base.scss b/app/assets/stylesheets/base.scss
@@ -2,13 +2,40 @@ html {
   height: 100%;
   width: 100%;
   display: table;
+}
+
+#rails-app-content {
+  position: absolute;
+  top: 70px;
+  left: 0;
+  right: 0;
+  bottom: 0;
   overflow: auto;
+  height: calc(100% - 70px);
+  margin-left: 250px;
+  &.pf-c-page {
+    display: block;
+    grid-template-columns: unset;
+    grid-template-areas: unset;
+  }
 }
 
 body {
   height: 100%;
   width: 100%;
-  display: table-cell;
+}
+
+#react-app-root {
+  height: 100%;
+  width: 100%;
+  .pf-c-page {
+    // pf grid rule stops at @media (min-width: 1200px)
+    display: grid;
+    grid-template-columns: max-content 1fr;
+    grid-template-areas:
+      'header header'
+      'nav main';
+  }
 }
 
 .base li {
@@ -143,8 +170,12 @@ select {
   padding-bottom: 9px;
 }
 
-.title_filter {
-  padding-right: 8px;
+.title_filter_parent {
+  overflow: hidden; // so that the parent will have a height
+  padding-bottom: 0;
+  .title_filter {
+    padding-left: 0;
+  }
 }
 
 #title_action {
@@ -616,6 +647,7 @@ code.transparent {
   max-width: 175px;
 }
 
-td .dropdown-menu > li > a.disabled:hover, td .dropdown-menu > li > a.disabled:focus {
+td .dropdown-menu > li > a.disabled:hover,
+td .dropdown-menu > li > a.disabled:focus {
   cursor: pointer;
 }
diff --git a/app/assets/stylesheets/colors.scss b/app/assets/stylesheets/colors.scss
@@ -1,32 +1,19 @@
 // Colors
 $primary_color: #005c7e;
 $border_color: #0187b6;
-$brand_color: #005c7e;
 
 $primary_gradient_start: #0072a0;
 $primary_gradient_end: #0072a0;
 
-$selected_gradient_start: #005b7e;
-$selected_gradient_end: #006289;
-
 $hover_gradient_start: #005b7e;
 $hover_gradient_end: #006289;
 
-$border_color: #0187b6;
-
-$navbar-default-brand-color: white;
-$navbar-default-brand-hover-color: white;
-
 $navbar-default-link-color: white;
-$navbar-default-link-active-color: white;
-$navbar-default-link-hover-color: white;
-
-$dropdown-link-color: #333;
-$dropdown-link-active-color: white;
-$dropdown-link-hover-color: white;
-$dropdown-link-hover-bg: #08c;
 
 $login-bg-color: $primary_color;
 $login-container-bg-color-rgba: rgba(0, 0, 0, 0.3);
 
 $topbar-default-color: #01749d;
+$nav-pf-vertical-active-bg-color: #026991;
+$nav-pf-vertical-hover-bg-color: #025B7F;
+$nav-pf-vertical-bg-color: #024d6c;
diff --git a/app/assets/stylesheets/navigation.scss b/app/assets/stylesheets/navigation.scss
@@ -11,60 +11,18 @@
 
   .active > a,
   .open > a {
-    background:
-      linear-gradient(
-        to bottom,
-        $hover_gradient_start,
-        $hover_gradient_end
-      );
+    background: linear-gradient(
+      to bottom,
+      $hover_gradient_start,
+      $hover_gradient_end
+    );
   }
 
   .nav > li > a {
     font-size: 14px;
   }
 }
 
-.navbar-pf-vertical .navbar-brand {
-  display: flex;
-  padding-right: 15px;
-  height: inherit;
-
-  span {
-    display: table;
-
-    .navbar-brand-txt {
-      display: table-cell;
-      vertical-align: middle;
-      color: white;
-      text-transform: uppercase;
-      font-weight: bold;
-      font-size: 20px;
-      font-family: 'Open Sans', Helvetica, Arial, sans-serif;
-    }
-  }
-}
-
-.navbar-pf-vertical {
-  background: $topbar-default-color image-url('navbar.png');
-  background-repeat: no-repeat;
-  background-size: cover;
-  width: 100%;
-  height: 60px;
-
-  .pf-c-toolbar__item {
-    .pf-c-context-selector__menu {
-      top: auto;
-    }
-
-    .pf-c-context-selector {
-      &.pf-m-expanded,
-      &:hover {
-        background: rgba(255, 255, 255, 0.24);
-      }
-    }
-
-    .pf-c-context-selector__toggle::before {
-      border-width: 0;
-    }
-  }
+.pf-c-masthead {
+  background: var(--pf-c-masthead--BackgroundColor) image-url('navbar.png');
 }
diff --git a/app/assets/stylesheets/patternfly_and_overrides.scss b/app/assets/stylesheets/patternfly_and_overrides.scss
@@ -8,10 +8,6 @@
   float: left;
 }
 
-#main {
-  padding: 0 40px;
-}
-
 fieldset > div.col-md-1 {
   padding-left: 0;
 }
@@ -111,13 +107,6 @@ a {
   }
 }
 
-.navbar-brand-icon {
-  width: 44px;
-  height: 34px;
-  margin: 0 5px 0 0 !important;
-  max-width: none;
-}
-
 .tab-content {
   min-height: 420px;
 }
@@ -358,16 +347,3 @@ span.btn-action a {
 span.btn-action.btn-primary a {
   color: #fff;
 }
-
-.vertical-sub-header-pf {
-  line-height: 25px;
-  font-size: 12px;
-  margin-left: 20px;
-  font-weight: bold;
-  color: #fff;
-  padding: 20px 0 2px 5px;
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
diff --git a/app/assets/stylesheets/patternfly_colors_overrides.scss b/app/assets/stylesheets/patternfly_colors_overrides.scss
@@ -0,0 +1,25 @@
+@import './colors.scss';
+
+.foreman-theme {
+  .pf-c-page__sidebar {
+    --pf-c-page__sidebar--Width: 250px;
+    --pf-c-page__sidebar--BackgroundColor: #{$nav-pf-vertical-bg-color};
+  }
+  .pf-c-nav__link {
+    --pf-c-nav__link--BackgroundColor: #{$nav-pf-vertical-bg-color};
+    --pf-c-nav__link--m-current--BackgroundColor: #{$nav-pf-vertical-active-bg-color};
+    --pf-c-nav__link--hover--BackgroundColor: #{$nav-pf-vertical-hover-bg-color};
+    --pf-c-nav__link--focus--BackgroundColor: #{$nav-pf-vertical-hover-bg-color};
+    --pf-c-nav__link--active--BackgroundColor: #{$nav-pf-vertical-active-bg-color};
+    --pf-c-nav__link--after--BorderColor: #f0f0f0;
+    --pf-c-nav__link--before--BorderColor: #f0f0f0;
+    --pf-c-nav__link--Color: #{$navbar-default-link-color};
+  }
+
+  .pf-c-nav__subnav {
+    --pf-c-nav--c-divider--BackgroundColor: #{$nav-pf-vertical-active-bg-color};
+  }
+  .pf-c-nav__item {
+    --pf-c-nav__item--before--BorderColor: #{$nav-pf-vertical-active-bg-color};
+  }
+}
diff --git a/app/helpers/layout_helper.rb b/app/helpers/layout_helper.rb
@@ -45,7 +45,7 @@ def fetch_user
 
   def layout_data
     { menu: fetch_menus,
-      logo: image_path("header_logo.svg", :class => "header-logo"),
+      logo: image_path("header_logo.svg"),
       notification_url: main_app.notification_recipients_path,
       stop_impersonation_url: main_app.stop_impersonation_users_path,
       user: fetch_user, brand: 'foreman',
@@ -233,6 +233,11 @@ def per_page(collection)
     [per_page, collection.total_entries].min
   end
 
+  def body_css_classes
+    # so plugins can replace foreman colors by removing foreman-theme
+    "pf-m-redhat-font foreman-theme"
+  end
+
   private
 
   def table_css_classes(classes = '')

diff --git a/app/views/layouts/_application_content.html.erb b/app/views/layouts/_application_content.html.erb
@@ -1,30 +1,34 @@
 <div id="main">
   <div id="content">
     <div id="breadcrumb">
-      <% if content_for?(:breadcrumbs) %>
-        <%= yield(:breadcrumbs) %>
-      <% else %>
-        <%= mount_breadcrumbs %>
-      <% end %>
+      <section class="pf-c-page__main-breadcrumb">
+        <% if content_for?(:breadcrumbs) %>
+          <%= yield(:breadcrumbs) %>
+        <% else %>
+          <%= mount_breadcrumbs %>
+        <% end %>
+      </section>
     </div>
     <%= yield(:before_search_bar) %>
-    <div class="row">
+    <div class="pf-c-page__main-section pf-m-light title_filter_parent">
       <div class="title_filter <%= searchable? ? " col-md-6 " : "col-md-4 " %>">
         <%= mount_search_bar if searchable? %>
-          <%= yield(:search_bar) %>&nbsp;
+        <%= yield(:search_bar) %>&nbsp;
       </div>
       <div id="title_action" class= <%= searchable? ? "col-md-6" : "col-md-8" %>>
         <% if filter_columns? %>
-        <div class="pull-left">
-          <%= mount_column_selector %>
+          <div class="pull-left">
+            <%= mount_column_selector %>
             <%= yield(:column_selector) %>&nbsp;
-        </div>
+          </div>
         <% end %>
         <div class="btn-toolbar pull-right">
           <%=h yield(:title_actions) %>
         </div>
       </div>
     </div>
-    <%= yield %>
+    <div class="pf-c-page__main-section pf-m-light">
+      <%= yield %>
+    </div>
   </div>
 </div>
diff --git a/app/views/layouts/base.html.erb b/app/views/layouts/base.html.erb
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="<%= I18n.locale %>" data-timezone="<%= iana_timezone %>" class="<%= User.current ? "layout-pf layout-pf-fixed" : "no-js"%>">
+<html lang="<%= I18n.locale %>" data-timezone="<%= iana_timezone %>" class="<%= User.current ? "" : "no-js"%>">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
@@ -47,7 +47,7 @@
     <%= yield(:head) %>
   </head>
 
-  <body class="pf-m-redhat-font">
+  <body class='<%= body_css_classes %>'>
     <!--[if lte IE 9]>
       <%= _('You are using an unsupported browser.') %>
     <![endif]-->
@@ -57,7 +57,7 @@
       <% end %>
       <div
         id="rails-app-content"
-        class="container-fluid container-pf-nav-pf-vertical nav-pf-persistent-secondary"
+        class="pf-c-page"
       >
 
       <%= yield(:content) %>

diff --git a/test/integration/notifications_drawer_test.rb b/test/integration/notifications_drawer_test.rb
@@ -47,7 +47,7 @@ def notifications_open_and_close_flow
 
   def navigate_somewhere_with_turbolinks
     # check the outside click with turbolinks
-    page.find('a.navbar-brand').click
+    page.find('a.pf-c-masthead__brand').click
     # wait for loader to dissapear
     page.has_no_selector?('div.spinner')
   end