fernando/luos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in marcoAntonioNina/processmaker/dashboards2 (pull request #2296)

Browse Source 
Add tooltips dashboards view
This commit is contained in:
Dante Loayza
2015-06-02 17:32:46 -04:00
parent 1c09be6c84 e23d613ff6
commit 0e4cfd9940
4 changed files with 51 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
workflow/engine/js/strategicDashboard/viewDashboardView.js
View File

@@ -396,7 +396,12 @@ $(document).ready(function() {
fillSpecialIndicatorSecondView(viewModel);
});
});
initialDraw();
$('[data-toggle="tooltip"]').tooltip({
animated: 'fade',
placement: 'bottom'
});
initialDraw();
});
var hideScrollIfAllDivsAreVisible = function(){

23
workflow/engine/templates/strategicDashboard/viewDashboard.html
View File

@@ -51,11 +51,11 @@
<a data-toggle="collapse" href="#efficiencyindex" aria-expanded="false" aria-controls="efficiencyindex">
<div class="panel-heading" >
<div class="row">
<div class="col-xs-3">
<div class="col-xs-3" data-toggle="tooltip" data-original-title={translate label="ID_DASH_HELP_IND_VALUE"}>
<div class="huge ind-value-selector"><%- indicator.value %></div>
</div>
<div class="col-xs-9 text-right"><i class="ind-symbol-selector fa fa-chevron-up fa-3x"></i>
<div class="small ind-comparative-selector">
<div class="col-xs-9 text-right"><i class="ind-symbol-selector fa fa-chevron-up fa-3x" data-toggle="tooltip" data-original-title={translate label="ID_DASH_HELP_SYMBOL_SELECTOR"}></i>
<div class="small ind-comparative-selector" data-toggle="tooltip" data-original-title={translate label="ID_DASH_HELP_IND_COMPARE"}>
<%- indicator.comparative %> <%- indicator.percentComparative %>
</div>
</div>
@@ -74,7 +74,8 @@
id="indicatorButton-<%- indicator.id %>"
data-indicator-id="<%- indicator.id %>"
data-indicator-type="<%- indicator.type %>"
data-gs-min-width="3" data-gs-min-height="2" data-gs-max-height="2">
data-gs-min-width="3" data-gs-min-height="2" data-gs-max-height="2"
data-toggle="tooltip" data-original-title={translate label="ID_DASH_HELP_INBOX_STATUS"}>
<div class="ind-container-selector panel grid-stack-item-content" style="min-width:200px;">
<a data-toggle="collapse" href="#efficiencyindex" aria-expanded="false" aria-controls="efficiencyindex">
<div class="panel-heading status-indicator-low"
@@ -148,17 +149,17 @@
data-gs-no-resize="true"
style="clear:both;position:relative;height:auto;">
<div class="panel-heading bluebg sind-title-selector"">
<div class="panel-heading bluebg sind-title-selector">
<ol class="breadcrumb">
</ol>
</div>
<div class="text-center huge">
<div class="col-xs-3 vcenter">
<div class="blue"><%- indicator.efficiencyIndexToShow %></div>
<div class="blue" data-toggle="tooltip" data-original-title={translate label="ID_DASH_HELP_IND_EFFICIENCY"}><%- indicator.efficiencyIndexToShow %></div>
<div class="small grey sind-index-selector ellipsis"></div>
</div>
<div class="col-xs-3 vcenter" style="margin-right:40px">
<div class="col-xs-3 vcenter" style="margin-right:40px" data-toggle="tooltip" data-original-title={translate label="ID_DASH_HELP_IND_COST"}>
<div class="red sind-cost-number-selector">{$unitCost} <%- indicator.inefficiencyCostToShow %></div>
<div class="small grey sind-cost-selector ellipsis"></div>
</div>
@@ -192,11 +193,11 @@
</div>
<div class="text-center huge">
<div class="col-xs-12 vcenter-task">
<div class="col-xs-6 ">
<div class="col-xs-6 " data-toggle="tooltip" data-original-title={translate label="ID_DASH_HELP_IND_EFFICIENCY"}>
<div class="blue small"><%- detailData.efficiencyIndexToShow%></div>
<div class="smallB grey detail-efficiency-selector ellipsis"></div>
</div>
<div class="col-xs-6 ">
<div class="col-xs-6" data-toggle="tooltip" data-original-title={translate label="ID_DASH_HELP_IND_COST"}>
<div class="small detail-cost-number-selector">{$unitCost}&nbsp;<%- detailData.inefficiencyCostToShow%></div>
<div class="smallB grey detail-cost-selector ellipsis"></div>
</div>
@@ -358,16 +359,18 @@
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="span4 pull-left">
<a class="btn btn-primary dashboard-button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
<i class="fa fa-bar-chart fa-2x"></i>
<i class="fa fa-chevron-down fa-1x"></i>
</a>
</div>
<h4 id="titleH4" class="header-dashboard"></h4>
<div class="pull-right dashboard-right container-fluid">
<div id="compareIndicators" class="row pull-left">
<div class="span4 pull-left">
<h5 class="pull-left">{translate label="ID_DASH_COMPARE_MONTH"}:</h5>
<h5 class="pull-left" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">{translate label="ID_DASH_COMPARE_MONTH"}:</h5>
</div>
<div class="span4 pull-left">

28
workflow/public_html/css/general.css
View File

@@ -659,20 +659,20 @@ img#topright { top:0; right:0; }
stroke-width: 0;
}
.tooltip { /* NEW */
background: #eee; /* NEW */
box-shadow: 0 0 5px #999999; /* NEW */
color: #333; /* NEW */
display: none; /* NEW */
font-size: 12px; /* NEW */
left: 110px; /* NEW */
padding: 10px; /* NEW */
position: absolute; /* NEW */
text-align: center; /* NEW */
top: 85px; /* NEW */
width: 80px; /* NEW */
z-index: 10; /* NEW */
}
/*.tooltip { /* NEW */
/* background: #eee; /* NEW */
/* box-shadow: 0 0 5px #999999; /* NEW */
/* color: #333; /* NEW */
/* display: none; /* NEW */
/* font-size: 12px; /* NEW */
/* left: 110px; /* NEW */
/* padding: 10px; /* NEW */
/* position: absolute; /* NEW */
/* text-align: center; /* NEW */
/* top: 85px; /* NEW */
/* width: 80px; /* NEW */
/* z-index: 10; /* NEW */
/*}*/
.letter{
background-image: url("../images/logo-proces-marker.png");

20
workflow/public_html/css/sb-admin-2.css
View File

@@ -354,10 +354,10 @@ table.dataTable thead .sorting:after {
color: #606368;
}
.panel-green a:hover {
/*.panel-green a:hover {
color: #1fbc99;
text-decoration: none;
}
}*/
.panel-red {
border-color: #ddd;
@@ -545,6 +545,10 @@ table.dataTable thead .sorting:after {
margin: 11px 17px 0 0;
}
.dashboard-right {
margin: 5px;
}
.dashboard-right h5{
margin: 20px 12px 0 0;
}
@@ -807,3 +811,15 @@ table.dataTable thead .sorting:after {
.bottom{
margin-bottom: 30px;
}
.tooltip > .tooltip-inner {
line-height: 1;
text-align: center;
color: #fff;
width: 150px;
padding: 15px;
font-size: 12px;
background: rgba(0, 0, 0, 0.7);
border-radius: 8px;
pointer-events: none;
}