Mon 3164 allow to close submenu by clicking on icon (#7127)

* fix(ui): Dropdown menu fix when click on icon in header Resolve MON-3164 * fix(ui): Layout changes for header submenu
centreon · Jan 23, 2019 · dccd60e · dccd60e
1 parent d9c2d3e
commit dccd60e
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 22 deletions.
diff --git a/www/front_src/src/components/hostMenu/index.js b/www/front_src/src/components/hostMenu/index.js
@@ -88,13 +88,6 @@ class HostMenu extends Component {
 
     return (
       <div class={"wrap-right-hosts" + (toggled ? " submenu-active" : "")}>
-        <span class="wrap-right-icon" onClick={this.toggle.bind(this)}>
-          <span class="iconmoon icon-hosts">
-            {data.pending > 0 ? <span class="custom-icon" /> : null}
-          </span>
-          <span class="wrap-right-icon__name"><Translate value="Hosts"/></span>
-        </span>
-
         <Link to={config.urlBase + "main.php?p=20202&o=h_down&search="} class={"wrap-middle-icon round round-small "+ (data.down.unhandled > 0 ? "red" : "red-bordered")}>
           <span class="number">
             <span id="count-host-down">{numeral(data.down.unhandled).format("0a")}</span>
@@ -111,6 +104,12 @@ class HostMenu extends Component {
           </span>
         </Link>
         <div ref={host => this.host = host}>
+          <span class="wrap-right-icon hosts" onClick={this.toggle.bind(this)}>
+            <span class="iconmoon icon-hosts">
+              {data.pending > 0 ? <span class="custom-icon" /> : null}
+            </span>
+            <span class="wrap-right-icon__name"><Translate value="Hosts"/></span>
+          </span>
           <span class="toggle-submenu-arrow" onClick={this.toggle.bind(this)} >{this.props.children}</span>
           <div class="submenu host">
             <div class="submenu-inner">

diff --git a/www/front_src/src/components/pollerMenu/index.js b/www/front_src/src/components/pollerMenu/index.js
@@ -136,12 +136,12 @@ class PollerMenu extends Component {
 
     return (
       <div class={"wrap-left-pollers" + (toggled ? " submenu-active" : "")}>
-        <span class="wrap-left-icon" onClick={this.toggle}>
-          <span class="iconmoon icon-poller" />
-          <span class="wrap-left-icon__name"><Translate value="Pollers"/></span>
-        </span>
         {statusIcon}
         <div ref={poller => this.poller = poller}>
+          <span class="wrap-left-icon pollers" onClick={this.toggle}>
+            <span class="iconmoon icon-poller" />
+            <span class="wrap-left-icon__name"><Translate value="Pollers"/></span>
+          </span>
           <span class="toggle-submenu-arrow" onClick={this.toggle} >{this.props.children}</span>
           <div class="submenu pollers">
             <div class="submenu-inner">
@@ -196,7 +196,7 @@ class PollerMenu extends Component {
                       </li>
                     );
                   })
-                  : null}
+                : null}
                 {allowPollerConfiguration && /* display poller configuration button if user is allowed */
                   <a href={config.urlBase + "main.php?p=" + POLLER_CONFIGURATION_TOPOLOGY_PAGE}>
                     <button

diff --git a/www/front_src/src/components/serviceStatusMenu/index.js b/www/front_src/src/components/serviceStatusMenu/index.js
@@ -88,12 +88,6 @@ class ServiceStatusMenu extends Component {
 
     return (
       <div  class={"wrap-right-services" + (toggled ? " submenu-active" : "")}>
-        <span class="wrap-right-icon" onClick={this.toggle.bind(this)}>
-          <span class="iconmoon icon-services">
-            {data.pending > 0 ? <span class="custom-icon" /> : null}
-          </span>
-          <span class="wrap-right-icon__name">Services</span>
-        </span>
         <Link to={config.urlBase + "main.php?p=20201&o=svc_critical&search="} class={"wrap-middle-icon round round-small " + (data.critical.unhandled > 0 ? "red" : "red-bordered")} >
           <span class="number">
             <span id="count-svc-critical">{numeral(data.critical.unhandled).format("0a")}</span>
@@ -115,6 +109,12 @@ class ServiceStatusMenu extends Component {
           </span>
         </Link>
         <div ref={service => this.service = service}>
+          <span class="wrap-right-icon" onClick={this.toggle.bind(this)}>
+            <span class="iconmoon icon-services">
+              {data.pending > 0 ? <span class="custom-icon" /> : null}
+            </span>
+            <span class="wrap-right-icon__name">Services</span>
+          </span>
           <span ref={this.setWrapperRef} class="toggle-submenu-arrow" onClick={this.toggle.bind(this)} >{this.props.children}</span>
           <div class="submenu services">
             <div class="submenu-inner">
@@ -200,7 +200,6 @@ class ServiceStatusMenu extends Component {
   }
 }
 
-
 const mapStateToProps = ({ navigation, intervals }) => ({
   navigationData: navigation,
   refreshTime: intervals ? parseInt(intervals.AjaxTimeReloadMonitoring)*1000 : false

diff --git a/www/front_src/src/styles/partials/_header.scss b/www/front_src/src/styles/partials/_header.scss
@@ -8,6 +8,12 @@
   .wrap {
     &-left {
       &-icon {
+        &.pollers {
+          cursor: pointer;
+          position: absolute !important;
+          left: 20px;
+          top: 6px;
+        }
         &:first-child {
           margin-right: 11px;
         }
@@ -39,7 +45,7 @@
       &-pollers {
         position: relative;
         box-sizing: border-box;
-        padding: 6px 21px 6px 20px;
+        padding: 10px 21px 11px 63px;
         display: flex;
         flex-wrap: wrap;
         align-items: center;
@@ -154,8 +160,7 @@
      &-services,
      &-user {
        position: relative;
-       padding: 6px 10px 6px;
-       padding-right: 22px;
+       padding: 6px 22px 6px 61px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
@@ -180,18 +185,26 @@
        padding: 6px 22px 6px 35px;
        .iconmoon {
          &.icon-user {
+           cursor: pointer;
           &:before {
             font-size: 2rem;
           }
          }
        }
      }
      &-icon {
+       cursor: pointer;
+       position: absolute !important;
+       left: 10px;
+       top: 8px;
       &:first-child {
         text-align: center;
         position: relative;
         margin-right: 10px;
       }
+      &.hosts {
+        left: 23px;
+      }
       &__name {
       display: block;
       font-size: 0.6875rem;