Skip to content

Commit 725d646

Browse files
cesar-tonnoircesar-tonnoir
committed
add directive info-panel
1 parent a8957f0 commit 725d646

File tree

6 files changed

+142
-10
lines changed

6 files changed

+142
-10
lines changed

‎src/components/widgets-common/info-panel/info-panel.directive.coffee

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
module = angular.module('impac.components.widgets-common.info-panel',[])
2+
3+
module.directive('commonInfoPanel', ($templateCache) ->
4+
return {
5+
restrict: 'A'
6+
scope: {
7+
parentWidget: '='
8+
onToggle: '&'
9+
}
10+
template: $templateCache.get('widgets-common/info-panel.tmpl.html')
11+
12+
link: (scope) ->
13+
14+
w = scope.parentWidget
15+
16+
scope.hideInfoPanel = true
17+
scope.toggleInfoPanel = ->
18+
scope.hideInfoPanel = !scope.hideInfoPanel
19+
scope.onToggle()
20+
21+
scope.getWidgetTemplateName = ->
22+
cat_array = (w.metadata.template || w.category).split('/')
23+
cat_array = cat_array.slice(cat_array.length - 2, cat_array.length)
24+
result = "#{cat_array[0]} - #{cat_array[1].replace('_', ' ')}"
25+
return result
26+
27+
scope.isEnabled = ->
28+
w && w.content? && w.content.info? && w.content.info.length > 0
29+
}
30+
)

‎src/components/widgets-common/info-panel/info-panel.less

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
.analytics .widget-item .info-panel {
2+
3+
position: absolute;
4+
bottom: @impac-padding-between-widgets + 1px;
5+
left: @impac-padding-between-widgets + 1px;
6+
7+
&.displayed {
8+
bottom: 0;
9+
top: 70px;
10+
left: 10%;
11+
width: 80%;
12+
max-height: ~"calc(100% - 120px)";
13+
}
14+
15+
.i-label {
16+
& > i {
17+
cursor: pointer;
18+
padding: 5px;
19+
color: white;
20+
background-color: @impac-widget-reverse-color;
21+
border-top-right-radius: 4px;
22+
border-bottom-left-radius: 4px;
23+
opacity: 0.5;
24+
25+
&:hover { opacity: 1; }
26+
}
27+
}
28+
29+
.i-content {
30+
background-color: white;
31+
box-shadow: 0px 0px 15px 0px;
32+
33+
display: flex;
34+
flex-direction: column;
35+
height: 100%;
36+
37+
.i-header {
38+
.fa { font-size: 18px; }
39+
.fa-info-circle { float: left; }
40+
.fa-times-circle { cursor: pointer; float: right; }
41+
42+
background-color: @impac-widget-reverse-color;
43+
color: white;
44+
padding: 8px;
45+
}
46+
47+
.i-text {
48+
.scrollable();
49+
padding: 5px;
50+
text-align: justify;
51+
flex: 1;
52+
53+
.row {
54+
margin-bottom: 6px;
55+
padding-bottom: 6px;
56+
border-bottom: solid 1px @impac-dashboard-borders-color;
57+
58+
&:last-child {
59+
margin-bottom: 0;
60+
padding-bottom: 0;
61+
border-bottom: none;
62+
}
63+
64+
.key {
65+
@media (max-width: @screen-sm-max) { text-align: center; }
66+
text-align: right;
67+
font-variant: small-caps;
68+
}
69+
70+
.value { text-align: justify; }
71+
}
72+
}
73+
}
74+
}

‎src/components/widgets-common/info-panel/info-panel.tmpl.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<div class="info-panel text-center" ng-class="{displayed: !hideInfoPanel}" ng-if="isEnabled()">
2+
<div class="i-label text-left" ng-show="hideInfoPanel">
3+
<i class="fa fa-info-circle" ng-click="toggleInfoPanel()" />
4+
</div>
5+
6+
<div class="i-content text-left" ng-hide="hideInfoPanel">
7+
<div class="i-header text-center">
8+
<i class="fa fa-info-circle" />
9+
<i class="fa fa-times-circle" ng-click="toggleInfoPanel()" />
10+
Information on widget "<b>{{ getWidgetTemplateName() | titleize }}</b>"
11+
</div>
12+
13+
<div class="i-text">
14+
<div class="row text-left" ng-repeat="i in parentWidget.content.info">
15+
16+
<div class="col-md-3 key">
17+
{{i.key}}
18+
</div>
19+
20+
<div class="col-md-9 value">
21+
{{i.value}}
22+
</div>
23+
24+
</div>
25+
</div>
26+
</div>
27+
</div>

‎src/impac-angular.less

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,6 @@
2020
* all your less files automatically
2121
*/
2222
/* inject:imports */
23-
<<<<<<< HEAD
24-
=======
2523
@import "components/dashboard/dashboard.less";
2624
@import "components/dashboard-selector/dashboard-selector.less";
2725
@import "components/kpi/kpi.less";
@@ -30,6 +28,7 @@
3028
@import "components/dashboard-settings/currency/currency.less";
3129
@import "components/widgets-common/data-not-found/data-not-found.less";
3230
@import "components/widgets-common/editable-title/editable-title.less";
31+
@import "components/widgets-common/info-panel/info-panel.less";
3332
@import "components/widgets-common/top-buttons/top-buttons.less";
3433
@import "components/widgets/accounts-accounting-values/accounts-accounting-values.less";
3534
@import "components/widgets/accounts-assets-liability-summary/accounts-assets-liability-summary.less";
@@ -86,5 +85,4 @@
8685
@import "components/widgets-settings/params-picker/params-picker.less";
8786
@import "components/widgets-settings/time-range/time-range.less";
8887
@import "components/widgets-settings/width/width.less";
89-
>>>>>>> 1.1
9088
/* endinject */

‎src/impac-angular.module.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -111,9 +111,10 @@ angular.module('impac.components.dashboard-settings',
111111
);
112112
angular.module('impac.components.widgets-common',
113113
[
114-
'impac.components.widgets-common.top-buttons',
115114
'impac.components.widgets-common.data-not-found',
116-
'impac.components.widgets-common.editable-title'
115+
'impac.components.widgets-common.editable-title',
116+
'impac.components.widgets-common.info-panel',
117+
'impac.components.widgets-common.top-buttons'
117118
]
118119
);
119120
/*

‎src/stylesheets/variables.less

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@
4949
//--------------------------------------
5050
@impac-dashboard-padding-top: 50px;
5151
@impac-dashboard-margin-left: 100px;
52+
@impac-dashboard-borders-color: @lightblue;
5253

5354
// Title
5455
@impac-dashboard-title-color: @purple;
@@ -59,7 +60,7 @@
5960

6061
// Dashboard Selector
6162
// Tabs
62-
@impac-dashboard-selector-border: 1px solid @lightblue;
63+
@impac-dashboard-selector-border: 1px solid @impac-dashboard-borders-color;
6364
@impac-dashboard-selector-tabs-margin: 0 2px 0 0;
6465
@impac-dashboard-selector-tabs-padding: 10px 8px 10px 15px;
6566
@impac-dashboard-selector-tabs-background-color: transparent;
@@ -72,7 +73,7 @@
7273
@impac-dashboard-widget-selector-text-color: white;
7374

7475
// Widgets container
75-
@impac-placeholder-border: 2px dashed @lightblue;
76+
@impac-placeholder-border: 2px dashed @impac-dashboard-borders-color;
7677
@impac-widgets-container-side-padding: 0px;
7778
@impac-padding-between-widgets: 12px;
7879
@impac-minimum-widget-size: 250px;
@@ -99,6 +100,7 @@
99100
@impac-widget-borders-color: lighten(@impac-widget-text-color-light,10%); //#f3f4f4
100101
@impac-widget-scrollbar-color: #233845;
101102
@impac-widget-loading-spinner: #67BBE9;
103+
@impac-widget-reverse-color: #1E303B;
102104

103105
// Title
104106
@impac-widget-title-text-color: darken(@impac-widget-text-color,5%);
@@ -121,10 +123,10 @@
121123
@impac-widget-hist-text-size: 12px;
122124
@impac-widget-hist-text-color: @impac-widget-text-color-light;
123125
// Params picker
124-
@impac-widget-params-picker-bg: #1E303B;
126+
@impac-widget-params-picker-bg: @impac-widget-reverse-color;
125127
@impac-widget-params-picker-unchecked-bg: #c2c4c4;
126-
// Limit emtries
127-
@impac-widget-limit-entries-color: #1E303B;
128+
// Limit entries
129+
@impac-widget-limit-entries-color: @impac-widget-reverse-color;
128130

129131
// Globals and Mixins
130132
@impac-widget-selectable-color: @impac-widget-link-color;

0 commit comments

Comments
 (0)