fernando/luos
1
0
Fork 0
Code Releases Activity

Add tooltips dashboards view

Browse Source
This commit is contained in:
Marco Antonio Nina Mena
2015-06-02 12:29:07 -04:00
parent e7487eb4a8
commit e23d613ff6
4 changed files with 51 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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"> <a data-toggle="collapse" href="#efficiencyindex" aria-expanded="false" aria-controls="efficiencyindex">
<div class="panel-heading" > <div class="panel-heading" >
<div class="row"> <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 class="huge ind-value-selector"><%- indicator.value %></div>
</div> </div>
<div class="col-xs-9 text-right"><i class="ind-symbol-selector fa fa-chevron-up fa-3x"></i> <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"> <div class="small ind-comparative-selector" data-toggle="tooltip" data-original-title={translate label="ID_DASH_HELP_IND_COMPARE"}>
<%- indicator.comparative %> <%- indicator.percentComparative %> <%- indicator.comparative %> <%- indicator.percentComparative %>
</div> </div>
</div> </div>
@@ -74,7 +74,8 @@
id="indicatorButton-<%- indicator.id %>" id="indicatorButton-<%- indicator.id %>"
data-indicator-id="<%- indicator.id %>" data-indicator-id="<%- indicator.id %>"
data-indicator-type="<%- indicator.type %>" 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;"> <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"> <a data-toggle="collapse" href="#efficiencyindex" aria-expanded="false" aria-controls="efficiencyindex">
<div class="panel-heading status-indicator-low" <div class="panel-heading status-indicator-low"
@@ -148,17 +149,17 @@
data-gs-no-resize="true" data-gs-no-resize="true"
style="clear:both;position:relative;height:auto;"> 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 class="breadcrumb">
</ol> </ol>
</div> </div>
<div class="text-center huge"> <div class="text-center huge">
<div class="col-xs-3 vcenter"> <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 class="small grey sind-index-selector ellipsis"></div>
</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="red sind-cost-number-selector">{$unitCost} <%- indicator.inefficiencyCostToShow %></div>
<div class="small grey sind-cost-selector ellipsis"></div> <div class="small grey sind-cost-selector ellipsis"></div>
</div> </div>
@@ -192,11 +193,11 @@
</div> </div>
<div class="text-center huge"> <div class="text-center huge">
<div class="col-xs-12 vcenter-task"> <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="blue small"><%- detailData.efficiencyIndexToShow%></div>
<div class="smallB grey detail-efficiency-selector ellipsis"></div> <div class="smallB grey detail-efficiency-selector ellipsis"></div>
</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="small detail-cost-number-selector">{$unitCost}&nbsp;<%- detailData.inefficiencyCostToShow%></div>
<div class="smallB grey detail-cost-selector ellipsis"></div> <div class="smallB grey detail-cost-selector ellipsis"></div>
</div> </div>
@@ -358,16 +359,18 @@
<div class="col-lg-12"> <div class="col-lg-12">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-body"> <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"> <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-bar-chart fa-2x"></i>
<i class="fa fa-chevron-down fa-1x"></i> <i class="fa fa-chevron-down fa-1x"></i>
</a> </a>
</div>
<h4 id="titleH4" class="header-dashboard"></h4> <h4 id="titleH4" class="header-dashboard"></h4>
<div class="pull-right dashboard-right container-fluid"> <div class="pull-right dashboard-right container-fluid">
<div id="compareIndicators" class="row pull-left"> <div id="compareIndicators" class="row pull-left">
<div class="span4 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>
<div class="span4 pull-left"> <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; stroke-width: 0;
} }
.tooltip { /* NEW */ /*.tooltip { /* NEW */
background: #eee; /* NEW */ /* background: #eee; /* NEW */
box-shadow: 0 0 5px #999999; /* NEW */ /* box-shadow: 0 0 5px #999999; /* NEW */
color: #333; /* NEW */ /* color: #333; /* NEW */
display: none; /* NEW */ /* display: none; /* NEW */
font-size: 12px; /* NEW */ /* font-size: 12px; /* NEW */
left: 110px; /* NEW */ /* left: 110px; /* NEW */
padding: 10px; /* NEW */ /* padding: 10px; /* NEW */
position: absolute; /* NEW */ /* position: absolute; /* NEW */
text-align: center; /* NEW */ /* text-align: center; /* NEW */
top: 85px; /* NEW */ /* top: 85px; /* NEW */
width: 80px; /* NEW */ /* width: 80px; /* NEW */
z-index: 10; /* NEW */ /* z-index: 10; /* NEW */
} /*}*/
.letter{ .letter{
background-image: url("../images/logo-proces-marker.png"); 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; color: #606368;
} }
.panel-green a:hover { /*.panel-green a:hover {
color: #1fbc99; color: #1fbc99;
text-decoration: none; text-decoration: none;
} }*/
.panel-red { .panel-red {
border-color: #ddd; border-color: #ddd;
@@ -545,6 +545,10 @@ table.dataTable thead .sorting:after {
margin: 11px 17px 0 0; margin: 11px 17px 0 0;
} }
.dashboard-right {
margin: 5px;
}
.dashboard-right h5{ .dashboard-right h5{
margin: 20px 12px 0 0; margin: 20px 12px 0 0;
} }
@@ -807,3 +811,15 @@ table.dataTable thead .sorting:after {
.bottom{ .bottom{
margin-bottom: 30px; 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;
}