Skip to content
This repository has been archived by the owner on Dec 13, 2022. It is now read-only.

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

Merged
merged 2 commits into from
Jan 16, 2019
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8662b5a
fix(ui): Dropdown menu fix when click on icon in header
Jan 15, 2019
24adf45
fix(ui): Layout changes for header submenu
Jan 15, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 6 additions & 7 deletions www/front_src/src/components/hostMenu/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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">
Expand Down
10 changes: 5 additions & 5 deletions www/front_src/src/components/pollerMenu/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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
Expand Down
13 changes: 6 additions & 7 deletions www/front_src/src/components/serviceStatusMenu/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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">
Expand Down Expand Up @@ -200,7 +200,6 @@ class ServiceStatusMenu extends Component {
}
}


const mapStateToProps = ({ navigation, intervals }) => ({
navigationData: navigation,
refreshTime: intervals ? parseInt(intervals.AjaxTimeReloadMonitoring)*1000 : false
Expand Down
19 changes: 16 additions & 3 deletions www/front_src/src/styles/partials/_header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,12 @@
.wrap {
&-left {
&-icon {
&.pollers {
cursor: pointer;
position: absolute !important;
left: 20px;
top: 6px;
}
&:first-child {
margin-right: 11px;
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down