Merge b497631 into d27bfb2

app/assets/stylesheets/admin.scss

@@ -31,14 +31,6 @@ $table-header:   #ecf1f6;
 .admin {
   @include admin-layout;
 
-  > header {
-    border-bottom: 1px solid #eee;
-
-    > * {
-      @include full-width-background($adjust-margin: false, $adjust-padding: true);
-    }
-  }
-
   h2 {
     font-weight: 100;
     margin-bottom: $line-height;
@@ -60,86 +52,6 @@ $table-header:   #ecf1f6;
     float: none;
   }
 
-  .top-links {
-
-    a {
-      line-height: rem-calc($line-height * 1.5);
-    }
-  }
-
-  .top-bar {
-    height: auto;
-    padding-top: $line-height / 2;
-
-    @include breakpoint(small only) {
-
-      .top-bar-left ul {
-        display: inline-block;
-      }
-
-      .top-bar-right {
-
-        > ul {
-          border-bottom: 0;
-          padding-bottom: 0;
-          margin-bottom: 0;
-        }
-
-        .submenu {
-          position: initial;
-        }
-
-        a {
-          font-weight: normal;
-        }
-      }
-
-      [class^="icon-"] {
-        display: none;
-      }
-    }
-
-    [class^="icon-"] {
-      font-size: $base-font-size;
-    }
-
-    h1 {
-      margin-top: $line-height / 2;
-      margin-bottom: 0;
-
-      @include breakpoint(medium) {
-        margin-top: 0;
-      }
-
-      small {
-        color: inherit;
-        text-transform: uppercase;
-      }
-
-      a {
-        color: inherit;
-        display: inline-block;
-        font-family: "Lato" !important;
-        font-size: rem-calc(24);
-        font-weight: lighter;
-        line-height: 1;
-      }
-    }
-  }
-
-  .top-bar .menu > li {
-
-    @include breakpoint(medium) {
-      height: auto !important;
-    }
-  }
-
-  .title-bar {
-    color: inherit;
-    position: absolute;
-    right: 12px;
-  }
-
   .notifications.unread-notifications::after {
     color: $admin-color;
   }

app/assets/stylesheets/layout/admin_header.scss

@@ -0,0 +1,89 @@
+.admin {
+  > header {
+    border-bottom: 1px solid #eee;
+
+    > * {
+      @include full-width-background($adjust-margin: false, $adjust-padding: true);
+    }
+  }
+
+  .top-links {
+
+    a {
+      line-height: rem-calc($line-height * 1.5);
+    }
+  }
+
+  .top-bar {
+    height: auto;
+    padding-top: $line-height / 2;
+
+    @include breakpoint(small only) {
+
+      .top-bar-left ul {
+        display: inline-block;
+      }
+
+      .top-bar-right {
+
+        > ul {
+          border-bottom: 0;
+          padding-bottom: 0;
+          margin-bottom: 0;
+        }
+
+        .submenu {
+          position: initial;
+        }
+
+        a {
+          font-weight: normal;
+        }
+      }
+
+      [class^="icon-"] {
+        display: none;
+      }
+    }
+
+    [class^="icon-"] {
+      font-size: $base-font-size;
+    }
+
+    h1 {
+      margin-top: $line-height / 2;
+      margin-bottom: 0;
+
+      @include breakpoint(medium) {
+        margin-top: 0;
+      }
+
+      small {
+        color: inherit;
+        text-transform: uppercase;
+      }
+
+      a {
+        color: inherit;
+        display: inline-block;
+        font-family: "Lato" !important;
+        font-size: rem-calc(24);
+        font-weight: lighter;
+        line-height: 1;
+      }
+    }
+  }
+
+  .top-bar .menu > li {
+
+    @include breakpoint(medium) {
+      height: auto !important;
+    }
+  }
+
+  .title-bar {
+    color: inherit;
+    position: absolute;
+    right: 12px;
+  }
+}

app/components/layout/account_menu_component.html.erb

@@ -0,0 +1,5 @@
+<ul class="menu" data-responsive-menu="medium-dropdown">
+  <%= render "shared/admin_login_items", current_user: user %>
+  <%= render "layouts/notification_item", current_user: user %>
+  <%= render "devise/menu/login_items", current_user: user %>
+</ul>

app/components/layout/account_menu_component.rb

@@ -0,0 +1,7 @@
+class Layout::AccountMenuComponent < ApplicationComponent
+  attr_reader :user
+
+  def initialize(user)
+    @user = user
+  end
+end

app/components/layout/admin_header_component.html.erb

@@ -0,0 +1,37 @@
+<header class="header">
+  <div class="top-links">
+    <%= render "shared/locale_switcher" %>
+
+    <%= link_to root_path do %>
+      <%= t("admin.dashboard.index.back", org: setting["org_name"]) %>
+    <% end %>
+  </div>
+
+  <div class="expanded row admin-top-bar">
+    <div class="title-bar" data-responsive-toggle="responsive_menu" data-hide-for="medium">
+      <button class="menu-button" type="button" data-toggle="responsive_menu">
+        <span class="menu-icon"></span>
+        <span class="title-bar-title"><%= t("application.menu") %></span>
+      </button>
+    </div>
+
+    <div class="top-bar">
+      <div class="top-bar-left">
+        <h1>
+          <%= link_to namespace_path do %>
+            <%= setting["org_name"] %>
+            <br><small><%= namespaced_header_title %></small>
+          <% end %>
+        </h1>
+      </div>
+
+      <% if show_admin_menu?(user) || namespace != "management" %>
+        <div id="responsive_menu">
+          <div class="top-bar-right">
+            <%= render Layout::AccountMenuComponent.new(user) %>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</header>

app/components/layout/admin_header_component.rb

@@ -0,0 +1,28 @@
+class Layout::AdminHeaderComponent < ApplicationComponent
+  attr_reader :user
+  delegate :namespace, :namespaced_root_path, :show_admin_menu?, to: :helpers
+
+  def initialize(user)
+    @user = user
+  end
+
+  private
+
+    def namespaced_header_title
+      if namespace == "moderation/budgets"
+        t("moderation.header.title")
+      elsif namespace == "management"
+        t("management.dashboard.index.title")
+      else
+        t("#{namespace}.header.title")
+      end
+    end
+
+    def namespace_path
+      if namespace == "officing"
+        "#"
+      else
+        namespaced_root_path
+      end
+    end
+end

app/components/layout/footer_component.rb

@@ -0,0 +1,2 @@
+class Layout::FooterComponent < ApplicationComponent
+end

app/components/layout/subnavigation_component.rb

@@ -0,0 +1,3 @@
+class Layout::SubnavigationComponent < ApplicationComponent
+  delegate :content_block, :layout_menu_link_to, to: :helpers
+end

app/helpers/admin_helper.rb

@@ -3,16 +3,6 @@ def namespaced_root_path
     "/#{namespace}"
   end
 
-  def namespaced_header_title
-    if namespace == "moderation/budgets"
-      t("moderation.header.title")
-    elsif namespace == "management"
-      t("management.dashboard.index.title")
-    else
-      t("#{namespace}.header.title")
-    end
-  end
-
   def official_level_options
     options = [["", 0]]
     (1..5).each do |i|

app/views/layouts/_header.html.erb

@@ -26,15 +26,11 @@
 
     <div id="responsive-menu">
       <div class="top-bar-right">
-        <ul class="menu" data-responsive-menu="medium-dropdown">
-          <%= render "shared/admin_login_items" %>
-          <%= render "layouts/notification_item" %>
-          <%= render "devise/menu/login_items" %>
-        </ul>
+        <%= render Layout::AccountMenuComponent.new(current_user) %>
 
         <div class="show-for-small-only">
           <div class="subnavigation subnavigation-with-top-links">
-            <%= render "shared/subnavigation" %>
+            <%= render Layout::SubnavigationComponent.new %>
             <%= render "shared/top_links" %>
           </div>
         </div>
@@ -44,7 +40,7 @@
 
   <div id="navigation_bar" class="subnavigation">
     <div class="hide-for-small-only">
-      <%= render "shared/subnavigation" %>
+      <%= render Layout::SubnavigationComponent.new %>
     </div>
 
     <%= yield :header_addon %>

app/views/layouts/admin.html.erb

@@ -6,7 +6,7 @@
   </head>
 
   <body class="admin">
-    <%= render "layouts/admin_header" %>
+    <%= render Layout::AdminHeaderComponent.new(current_user) %>
 
     <div class="menu-and-content">
       <%= check_box_tag :show_menu, nil, false, role: "switch" %>

app/views/layouts/application.html.erb

@@ -43,7 +43,7 @@
       <%= yield %>
     </div>
     <div class="footer">
-      <%= render "layouts/footer" %>
+      <%= render Layout::FooterComponent.new %>
     </div>
   </body>
 </html>