Skip to content

Commit 5c53972

Browse files
author
Matteo Rossi
committed
v0.2.12
Add icon option
1 parent b053c31 commit 5c53972

9 files changed

+93
-25
lines changed

‎README.md

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
# mrFeedback - 0.2.11
1+
# mrFeedback - 0.2.12
22

33
`mrFeedback` - Create box feedback for your Angular App: simple, complete, personalized. With this plugin you can create and show a "box feedback" to the user. You can set "title" and "message" to show, add buttons that run connected functions when clicked, ecc... With new theme "notification" you could use it for real time notification too!
44

55
## Installation
6-
* Download the latest release: [v0.2.11](https://github.com/teorossi82/mrFeedback/archive/master.zip)
6+
* Download the latest release: [v0.2.12](https://github.com/teorossi82/mrFeedback/archive/master.zip)
77
* Clone the repository: `git clone https://github.com/teorossi82/mrFeedback.git`
88
* Install with [Bower](http://bower.io): `bower install mrFeedback`
99

@@ -18,6 +18,9 @@ The plugin requires
1818
Open site [http://teorossi82.github.io/mrFeedback](http://teorossi82.github.io/mrFeedback/)
1919

2020
## News
21+
v0.2.12
22+
* Add option `icon`, utils to add an icon at the left side of the box's body.
23+
2124
v0.2.11
2225
* Add option `customClass`, utils to add a class to the box with you can customize your mrFeedback's style.
2326

‎bower.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mrFeedback",
3-
"version": "0.2.11",
3+
"version": "0.2.12",
44
"homepage": "http://teorossi82.github.io/mrFeedback/",
55
"authors": [
66
"Matteo Rossi <teorossi82@yahoo.it>"

‎build/mrFeedback.js

+16-5
Original file line numberDiff line numberDiff line change
@@ -73,10 +73,10 @@
7373
var template = '<div ng-if="mrFeedback.feedback.modal" class="mrFeedbackLayout"></div>' +
7474
'<div class="mrFeedback" ng-class="mrFeedback.theme">' +
7575
'<div class="box-feedback {{mrFeedback.notificationType}} {{mrFeedback.feedback.customClass}}">' +
76-
'<div class="box-left">' +
77-
'<i class="fa fa-exclamation-triangle"></i>' +
76+
'<div class="box-left" ng-if="mrFeedback.showLeft">' +
77+
'<i class="fa fa-exclamation-triangle" ng-if="mrFeedback.showPostItIcon"></i>' +
7878
'</div>' +
79-
'<div class="box-content">' +
79+
'<div class="box-content" ng-class="{\'with-left-icon\':mrFeedback.showLeft}">' +
8080
'<div class="box-header" ng-if="mrFeedback.showHeader">' +
8181
'<div class="title">' +
8282
'{{mrFeedback.feedback.title}}' +
@@ -86,8 +86,14 @@
8686
'</div>' +
8787
'</div>' +
8888
'<div class="box-body">' +
89-
'<div class="box-header-body">{{mrFeedback.feedback.title}}</div>' +
90-
'<div class="box-msg-body" ng-bind-html="mrFeedback.feedback.msg"></div>' +
89+
'<div class="box-body-left" ng-if="mrFeedback.showBodyLeftIcon">' +
90+
'<img ng-src=\"{{mrFeedback.feedback.icon.src}}\" ng-if="mrFeedback.showBodyLeftIconImg"/>' +
91+
'<i class="body-icon {{mrFeedback.feedback.icon.class}}" ng-if="mrFeedback.showBodyLeftIconClass"></i>' +
92+
'</div>' +
93+
'<div class="box-body-right" ng-class="{\'with-left-icon\':mrFeedback.showBodyLeftIcon}">' +
94+
'<div class="box-header-body">{{mrFeedback.feedback.title}}</div>' +
95+
'<div class="box-msg-body" ng-bind-html="mrFeedback.feedback.msg"></div>' +
96+
'</div>' +
9197
'</div>' +
9298
'<div class="buttons-feedback">' +
9399
'<div class="box-btnAction" ng-if="mrFeedback.feedback.btnAction">' +
@@ -194,6 +200,11 @@
194200
vm.close();
195201
},notDelay)
196202
}
203+
vm.showLeft = vm.feedback && vm.feedback.theme==="post-it-alert"? true : false;
204+
vm.showPostItIcon = vm.feedback.theme==="post-it-alert";
205+
vm.showBodyLeftIcon = vm.feedback && vm.feedback.icon;
206+
vm.showBodyLeftIconImg = vm.showBodyLeftIcon && vm.feedback.icon.type==="img";
207+
vm.showBodyLeftIconClass = vm.showBodyLeftIcon && vm.feedback.icon.type==="class";
197208
};
198209
var animation = vm.feedback && vm.feedback.animation ? "animation-" + vm.feedback.animation : "animation-fade";
199210
vm.notificationType = vm.feedback && vm.feedback.theme === "notification" ? vm.feedback.notificationType || "" : "";

‎build/mrFeedback.less

+63-14
Original file line numberDiff line numberDiff line change
@@ -100,12 +100,48 @@
100100
display: none;
101101
}
102102
}
103+
.box-left{
104+
display: block;
105+
float: left;
106+
width: 50px;
107+
text-align:center;
108+
i{
109+
font-size: 40px;
110+
}
111+
img{
112+
max-width: 30px;
113+
max-height:30px;
114+
}
115+
}
116+
.box-content{
117+
&.with-left-icon{
118+
margin-left: 50px;
119+
}
120+
}
103121
.box-body {
104122
padding: 10px;
105123
color: #000;
106124
.box-header-body{
107125
display: none;
108126
}
127+
.box-body-left{
128+
display: block;
129+
float: left;
130+
width: 30px;
131+
text-align:center;
132+
img{
133+
max-width: 30px;
134+
max-height:30px;
135+
}
136+
.body-icon{
137+
font-size: 30px;
138+
}
139+
}
140+
.box-body-right{
141+
&.with-left-icon{
142+
margin-left: 35px;
143+
}
144+
}
109145
}
110146
.box-btnAction{
111147
display: inline-block;
@@ -120,9 +156,9 @@
120156
padding: 10px;
121157
cursor:pointer;
122158
}
123-
.box-left{
124-
display: none;
125-
}
159+
// .box-left{
160+
// display: none;
161+
// }
126162
&.dark{
127163
.box-feedback {
128164
background: rgba(0,0,0,0.7);
@@ -151,6 +187,11 @@
151187
.box-body {
152188
color: #000;
153189
text-align: left;
190+
.box-body-right{
191+
&.with-left-icon{
192+
line-height: 35px;
193+
}
194+
}
154195
}
155196
}
156197
&-alert{
@@ -160,9 +201,6 @@
160201
box-shadow: 3px 3px 6px 2px rgba(200, 200, 200, 0.5);
161202
text-align: left;
162203
padding: 10px;
163-
.box-content{
164-
margin-left: 50px;
165-
}
166204
.box-header {
167205
background: #FFFFCC;
168206
color:#000;
@@ -171,14 +209,10 @@
171209
.box-body {
172210
color: #000;
173211
text-align: left;
174-
}
175-
.box-left{
176-
display: block;
177-
float: left;
178-
width: 50px;
179-
text-align:center;
180-
i{
181-
font-size: 40px;
212+
.box-body-right{
213+
&.with-left-icon{
214+
line-height: 35px;
215+
}
182216
}
183217
}
184218
}
@@ -243,6 +277,11 @@
243277
font-size:13px;
244278
line-height: 16px;
245279
padding:15px 10px;
280+
.box-body-right{
281+
&.with-left-icon{
282+
line-height: 35px;
283+
}
284+
}
246285
}
247286
.buttons-feedback{
248287
background: #F3F3F3;
@@ -379,6 +418,11 @@
379418
font-weight: 100;
380419
border-right:10px solid #5A93BB;
381420
border-left:10px solid #5A93BB;
421+
.box-body-right{
422+
&.with-left-icon{
423+
line-height: 35px;
424+
}
425+
}
382426
}
383427
.buttons-feedback{
384428
background: #F0F0F0;
@@ -465,6 +509,11 @@
465509
font-size:16px;
466510
line-height: 20px;
467511
padding:15px 20px;
512+
.box-body-right{
513+
&.with-left-icon{
514+
line-height: 35px;
515+
}
516+
}
468517
}
469518
.buttons-feedback{
470519
background: #F5F5F5;

0 commit comments

Comments
 (0)