Merge pull request #3363 from mabashian/dashboard-dropdowns

Fix dashboard dropdowns after bootstrap upgrade

Reviewed-by: https://github.com/softwarefactory-project-zuul[bot]
This commit is contained in:
softwarefactory-project-zuul[bot]
2019-03-07 15:38:11 +00:00
committed by GitHub
3 changed files with 33 additions and 27 deletions

View File

@@ -99,6 +99,10 @@
text-transform: uppercase; text-transform: uppercase;
transition: background-color 0.2s; transition: background-color 0.2s;
width: 100%; width: 100%;
> span {
width: 100%;
}
} }
.DashboardGraphs-filterDropdownText:hover { .DashboardGraphs-filterDropdownText:hover {
@@ -110,6 +114,8 @@
font-size: 12px; font-size: 12px;
width: 20px; width: 20px;
padding: 0 10px; padding: 0 10px;
float: right;
margin-top: 1px;
} }
.DashboardGraphs-filterDropdownItems { .DashboardGraphs-filterDropdownItems {

View File

@@ -12,7 +12,10 @@
data-target="#" data-target="#"
href="/page.html" href="/page.html"
class="DashboardGraphs-filterDropdownText"> class="DashboardGraphs-filterDropdownText">
<translate>Past Month</translate> <i class="fa fa-angle-down DashboardGraphs-filterIcon"></i> <span id="period-dropdown-display">
<span translate>Past Month</span>
<i class="fa fa-angle-down DashboardGraphs-filterIcon"></i>
</span>
</a> </a>
<ul class="dropdown-menu DashboardGraphs-filterDropdownItems <ul class="dropdown-menu DashboardGraphs-filterDropdownItems
DashboardGraphs-filterDropdownItems--period" role="menu" aria-labelledby="period-dropdown"> DashboardGraphs-filterDropdownItems--period" role="menu" aria-labelledby="period-dropdown">
@@ -34,7 +37,10 @@
<a id="type-dropdown" role="button" data-toggle="dropdown" data-target="#" class="DashboardGraphs-filterDropdownText" <a id="type-dropdown" role="button" data-toggle="dropdown" data-target="#" class="DashboardGraphs-filterDropdownText"
href="/page.html"> href="/page.html">
<translate>All</translate> <i class="fa fa-angle-down DashboardGraphs-filterIcon"></i> <span id="type-dropdown-display">
<span translate>All</span>
<i class="fa fa-angle-down DashboardGraphs-filterIcon"></i>
</span>
</a> </a>
<ul class="dropdown-menu DashboardGraphs-filterDropdownItems <ul class="dropdown-menu DashboardGraphs-filterDropdownItems
@@ -62,10 +68,10 @@
data-target="#" data-target="#"
href="/page.html" href="/page.html"
class="DashboardGraphs-filterDropdownText"> class="DashboardGraphs-filterDropdownText">
<translate>All</translate> <span id="status-dropdown-display">
<i class="fa fa-angle-down <span translate>All</span>
DashboardGraphs-filterIcon"> <i class="fa fa-angle-down DashboardGraphs-filterIcon"></i>
</i> </span>
</a> </a>
<ul class="dropdown-menu DashboardGraphs-filterDropdownItems <ul class="dropdown-menu DashboardGraphs-filterDropdownItems

View File

@@ -126,13 +126,11 @@ function JobStatusGraph($window, adjustGraphSize, templateUrl, i18n, moment, gra
$('.n').off('click').on("click", function(){ $('.n').off('click').on("click", function(){
period = this.getAttribute("id"); period = this.getAttribute("id");
$('#period-dropdown') $('#period-dropdown-display')
.replaceWith(` .html(`
<a id="period-dropdown" class="DashboardGraphs-filterDropdownText DashboardGraphs-filterDropdownItems--period" role="button" <span>${this.text}</span>
data-toggle="dropdown" data-target="#" href="/page.html"> <i class="fa fa-angle-down DashboardGraphs-filterIcon"></i>
<span>${this.text}</span> `);
<i class="fa fa-angle-down DashboardGraphs-filterIcon"></i>
</a>`);
scope.$parent.isFailed = true; scope.$parent.isFailed = true;
scope.$parent.isSuccessful = true; scope.$parent.isSuccessful = true;
@@ -143,13 +141,11 @@ function JobStatusGraph($window, adjustGraphSize, templateUrl, i18n, moment, gra
$('.m').off('click').on("click", function(){ $('.m').off('click').on("click", function(){
job_type = this.getAttribute("id"); job_type = this.getAttribute("id");
$('#type-dropdown') $('#type-dropdown-display')
.replaceWith(` .html(`
<a id="type-dropdown" class="DashboardGraphs-filterDropdownText DashboardGraphs-filterDropdownItems--jobType" role="button" <span>${this.text}</span>
data-toggle="dropdown" data-target="#" href="/page.html"> <i class="fa fa-angle-down DashboardGraphs-filterIcon"></i>
<span>${this.text}</span> `);
<i class="fa fa-angle-down DashboardGraphs-filterIcon"></i>
</a>`);
scope.$parent.isFailed = true; scope.$parent.isFailed = true;
scope.$parent.isSuccessful = true; scope.$parent.isSuccessful = true;
@@ -159,13 +155,11 @@ function JobStatusGraph($window, adjustGraphSize, templateUrl, i18n, moment, gra
$('.o').off('click').on('click', function() { $('.o').off('click').on('click', function() {
var job_status = this.getAttribute('id'); var job_status = this.getAttribute('id');
$('#status-dropdown') $('#status-dropdown-display')
.replaceWith(` .html(`
<a id="status-dropdown" class="DashboardGraphs-filterDropdownText DashboardGraphs-filterDropdownItems--status" role="button" <span>${this.text}</span>
data-toggle="dropdown" data-target="#" href="/page.html"> <i class="fa fa-angle-down DashboardGraphs-filterIcon"></i>
<span>${this.text}</span> `);
<i class="fa fa-angle-down DashboardGraphs-filterIcon"></i>
</a>`);
recreateGraph(scope.period, scope.jobType, job_status); recreateGraph(scope.period, scope.jobType, job_status);
}); });