header component - added admin - page name to header (#5593)

* header component - added admin - page name to header * Make sectionName optional
gocd · Jan 2, 2019 · c05857a · c05857a
1 parent 9563147
commit c05857a
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 3 deletions.
diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml
diff --git a/server/webapp/WEB-INF/rails/webpack/views/components/header_panel/index.scss b/server/webapp/WEB-INF/rails/webpack/views/components/header_panel/index.scss
@@ -40,6 +40,20 @@ $page-item-padding: 30px;
   box-shadow:      0 0 10px $box-shadow-color;
 }
 
+.section-name {
+  display:     inline-block;
+  color:       $go-primary;
+  font-size:   $header-font-size;
+  font-weight: $header-font-weight;
+  margin:      0;
+  &:after {
+    content: "|";
+    color:   $line-color;
+    margin:  0 10px;
+
+  }
+}
+
 .title {
   display:     inline-block;
   color:       $text-color;

diff --git a/server/webapp/WEB-INF/rails/webpack/views/components/header_panel/index.scss.d.ts b/server/webapp/WEB-INF/rails/webpack/views/components/header_panel/index.scss.d.ts
@@ -1,6 +1,7 @@
 // This file is automatically generated by typings-for-css-modules.
 // Please do not change this file!
 export const pageHeader: string;
+export const sectionName: string;
 export const title: string;
 export const page_title: string;
 export const pageTitle: string;
diff --git a/server/webapp/WEB-INF/rails/webpack/views/components/header_panel/index.tsx b/server/webapp/WEB-INF/rails/webpack/views/components/header_panel/index.tsx
@@ -22,6 +22,7 @@ import * as style from "./index.scss";
 
 export interface Attrs {
   title: m.Children;
+  sectionName?: m.Children;
   buttons?: m.Children;
 }
 
@@ -39,9 +40,18 @@ export class HeaderPanel extends MithrilViewComponent<Attrs> {
 
     return (<header className={style.pageHeader}>
       <div class={style.pageTitle}>
+        {this.maybeSection(vnode)}
         <h1 class={style.title} data-test-id="title">{vnode.attrs.title}</h1>
       </div>
       {buttons}
     </header>);
   }
+
+  private maybeSection(vnode: m.Vnode<Attrs>) {
+    if (vnode.attrs.sectionName) {
+      return (
+        <h1 className={style.sectionName} data-test-id="section-name">{vnode.attrs.sectionName}</h1>
+      );
+    }
+  }
 }
diff --git a/server/webapp/WEB-INF/rails/webpack/views/components/site_menu/index.scss b/server/webapp/WEB-INF/rails/webpack/views/components/site_menu/index.scss
@@ -86,7 +86,6 @@
       border-top:   10px solid $site-header;
     }
   }
-
   &:hover {
     @include ie-edge-fix-for-admin-dropdown
   }

diff --git a/server/webapp/WEB-INF/rails/webpack/views/pages/kitchen_sink.tsx b/server/webapp/WEB-INF/rails/webpack/views/pages/kitchen_sink.tsx
@@ -50,7 +50,7 @@ export class KitchenSink extends MithrilViewComponent<null> {
   view(vnode: m.Vnode<null>) {
     return (
       <div>
-        <HeaderPanel title="Kitchen Sink"/>
+        <HeaderPanel title="Kitchen Sink" sectionName={'Admin'}/>
         <FlashMessage type={MessageType.info} message={"This page is awesome!"}/>
         <FlashMessage type={MessageType.success} message={"Everything works as expected!"}/>
         <FlashMessage type={MessageType.warning} message={"This might not work!"}/>