Commit 295bf68738080b29ab4930affc9a121dd8bc47c1
1 parent
c426f2ed
Exists in
master
and in
3 other branches
Adding comment mark users
Showing
7 changed files
with
178 additions
and
6 deletions
Show diff stats
amadeus/static/css/base/amadeus.css
@@ -975,7 +975,7 @@ li.item .notify_badge { | @@ -975,7 +975,7 @@ li.item .notify_badge { | ||
975 | .mural .post_make .panel-body { | 975 | .mural .post_make .panel-body { |
976 | padding: 0; | 976 | padding: 0; |
977 | } | 977 | } |
978 | -.mural .post_make .user-img, .post .post-img { | 978 | +.mural .post_make .user-img, .post .post-img, .suggestions .suggested-user .user-img { |
979 | padding: 0; | 979 | padding: 0; |
980 | display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ | 980 | display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ |
981 | display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ | 981 | display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ |
@@ -1097,6 +1097,25 @@ li.item .notify_badge { | @@ -1097,6 +1097,25 @@ li.item .notify_badge { | ||
1097 | font-size: 15px; | 1097 | font-size: 15px; |
1098 | } | 1098 | } |
1099 | 1099 | ||
1100 | +#adduser_field { | ||
1101 | + margin-bottom: 0px; | ||
1102 | +} | ||
1103 | + | ||
1104 | +.suggestions { | ||
1105 | + position: absolute; | ||
1106 | + width: 100%; | ||
1107 | + z-index: 9; | ||
1108 | +} | ||
1109 | + | ||
1110 | +.suggestions .suggested-user { | ||
1111 | + padding-bottom: 5px; | ||
1112 | + padding-top: 5px; | ||
1113 | +} | ||
1114 | + | ||
1115 | +.marked_user { | ||
1116 | + font-weight: 700; | ||
1117 | +} | ||
1118 | + | ||
1100 | .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus { | 1119 | .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus { |
1101 | outline: none; | 1120 | outline: none; |
1102 | } | 1121 | } |
1103 | \ No newline at end of file | 1122 | \ No newline at end of file |
amadeus/static/css/themes/green.css
@@ -512,7 +512,7 @@ a.add-row { | @@ -512,7 +512,7 @@ a.add-row { | ||
512 | color: #1d8fe0; | 512 | color: #1d8fe0; |
513 | } | 513 | } |
514 | 514 | ||
515 | -.post .post-user, .comment .comment-user { | 515 | +.post .post-user, .comment .comment-user, .marked_user { |
516 | color: #4caf50; | 516 | color: #4caf50; |
517 | } | 517 | } |
518 | 518 | ||
@@ -570,6 +570,10 @@ a.add-row { | @@ -570,6 +570,10 @@ a.add-row { | ||
570 | color: #FF0000; | 570 | color: #FF0000; |
571 | } | 571 | } |
572 | 572 | ||
573 | +.suggestions { | ||
574 | + background: #FFFFFF; | ||
575 | +} | ||
576 | + | ||
573 | .btn:not(.btn-raised):not(.btn-link):focus, .btn:not(.btn-raised):not(.btn-link):hover, .input-group-btn .btn:not(.btn-raised):not(.btn-link):focus, .input-group-btn .btn:not(.btn-raised):not(.btn-link):hover { | 577 | .btn:not(.btn-raised):not(.btn-link):focus, .btn:not(.btn-raised):not(.btn-link):hover, .input-group-btn .btn:not(.btn-raised):not(.btn-link):focus, .input-group-btn .btn:not(.btn-raised):not(.btn-link):hover { |
574 | background-color: initial; | 578 | background-color: initial; |
575 | } | 579 | } |
mural/templates/mural/_form_comment.html
@@ -70,16 +70,87 @@ | @@ -70,16 +70,87 @@ | ||
70 | </div> | 70 | </div> |
71 | </div> | 71 | </div> |
72 | 72 | ||
73 | +<div id="add-user-modal" style="display:none"> | ||
74 | + <div class="modal-dialog" role="document"> | ||
75 | + <div class="modal-content"> | ||
76 | + <div class="modal-header"> | ||
77 | + <h3>{% trans 'Mark user in comment' %}</h3> | ||
78 | + </div> | ||
79 | + <div class="modal-body"> | ||
80 | + <p>{% trans 'Type the user name in the field below' %}</p> | ||
81 | + <div class="form-group"> | ||
82 | + <input type="text" class="form-control" id="adduser_field" oninput="typing_search($(this));" /> | ||
83 | + <div class="suggestions list-group" data-url="{% url 'mural:suggest_users' %}" style="display:none"> | ||
84 | + | ||
85 | + </div> | ||
86 | + </div> | ||
87 | + </div> | ||
88 | + <div class="modal-footer"> | ||
89 | + <div class="col-md-12"> | ||
90 | + <button type="button" id="mark_btn" class="btn btn-success btn-raised post-button pull-left">{% trans "Mark" %}</button> | ||
91 | + <button type="button" class="btn btn-raised btn-default pull-right" data-dismiss="modal">{% trans "Cancel" %}</button> | ||
92 | + </div> | ||
93 | + </div> | ||
94 | + </div> | ||
95 | + </div> | ||
96 | +</div> | ||
97 | + | ||
73 | <script type="text/javascript"> | 98 | <script type="text/javascript"> |
74 | $(function () { | 99 | $(function () { |
100 | + var AddUserBtn = function (context) { | ||
101 | + var ui = $.summernote.ui; | ||
102 | + | ||
103 | + // create button | ||
104 | + var button = ui.button({ | ||
105 | + contents: '<i class="fa fa-user"/>', | ||
106 | + tooltip: '{% trans "Mark User" %}', | ||
107 | + click: function () { | ||
108 | + var modal_content = $("#add-user-modal").html(); | ||
109 | + var modal = document.createElement('div'); | ||
110 | + $(modal).addClass('modal'); | ||
111 | + $(modal).attr('id', 'teste-modal'); | ||
112 | + $(modal).html(modal_content); | ||
113 | + | ||
114 | + $(modal).modal('show'); | ||
115 | + | ||
116 | + var btn = $(modal).find("#mark_btn"), | ||
117 | + field = $(modal).find("#adduser_field"); | ||
118 | + | ||
119 | + btn.prop('disabled', true); | ||
120 | + | ||
121 | + btn.click(function () { | ||
122 | + var node = document.createElement('span'), | ||
123 | + value = field.val(); | ||
124 | + | ||
125 | + $(node).addClass('marked_user'); | ||
126 | + $(node).html(value); | ||
127 | + | ||
128 | + var code = context.invoke('code'); | ||
129 | + | ||
130 | + var new_code = $(code).append(node).append(" "); | ||
131 | + | ||
132 | + context.invoke('code', new_code); | ||
133 | + | ||
134 | + $(modal).modal('hide'); | ||
135 | + }); | ||
136 | + } | ||
137 | + }); | ||
138 | + | ||
139 | + return button.render(); // return button as jquery object | ||
140 | + } | ||
141 | + | ||
75 | $('.text_simple_wysiwyg').summernote({ | 142 | $('.text_simple_wysiwyg').summernote({ |
76 | dialogsInBody: true, | 143 | dialogsInBody: true, |
77 | height: 150, | 144 | height: 150, |
78 | toolbar: [ | 145 | toolbar: [ |
79 | // [groupName, [list of button]] | 146 | // [groupName, [list of button]] |
80 | ['style', ['bold', 'italic']], | 147 | ['style', ['bold', 'italic']], |
81 | - ['insert', ['link']] | ||
82 | - ] | 148 | + ['insert', ['link']], |
149 | + ['mybuttons', ['addUser']], | ||
150 | + ], | ||
151 | + buttons: { | ||
152 | + addUser: AddUserBtn | ||
153 | + } | ||
83 | }); | 154 | }); |
84 | 155 | ||
85 | $.material.init(); | 156 | $.material.init(); |
@@ -89,6 +160,53 @@ | @@ -89,6 +160,53 @@ | ||
89 | } | 160 | } |
90 | }); | 161 | }); |
91 | 162 | ||
163 | + var typingSearchTimer; //timer identifier | ||
164 | + var doneTypingSearchInterval = 1000; | ||
165 | + | ||
166 | + function typing_search(field) { | ||
167 | + clearTimeout(typingSearchTimer); | ||
168 | + | ||
169 | + var loading = '<button type="button" class="btn btn-block btn-default btn-sm"><span class="fa fa-spin fa-circle-o-notch"></span></button>'; | ||
170 | + | ||
171 | + if (field.val() != "") { | ||
172 | + typingSearchTimer = setTimeout(function () { searchUsers(field); }, doneTypingSearchInterval); | ||
173 | + | ||
174 | + $('.suggestions').html(loading); | ||
175 | + $('.suggestions').show(); | ||
176 | + } else { | ||
177 | + $('.suggestions').html(""); | ||
178 | + $('.suggestions').hide(); | ||
179 | + } | ||
180 | + | ||
181 | + $("#mark_btn").prop('disabled', true); | ||
182 | + } | ||
183 | + | ||
184 | + function searchUsers (field) { | ||
185 | + var url = $('.suggestions').data('url'), | ||
186 | + param = field.val(); | ||
187 | + | ||
188 | + $.ajax({ | ||
189 | + url: url, | ||
190 | + data: {'param': param}, | ||
191 | + dataType: 'json', | ||
192 | + success: function (response) { | ||
193 | + $('.suggestions').html(response.search_result); | ||
194 | + | ||
195 | + $('.suggestions').find('.is-user').click(function (e) { | ||
196 | + e.preventDefault(); | ||
197 | + | ||
198 | + var user_name = $(this).find('h4').text(); | ||
199 | + | ||
200 | + field.val(user_name); | ||
201 | + | ||
202 | + $('.suggestions').hide(); | ||
203 | + | ||
204 | + $('.suggestions').parent().parent().parent().find("#mark_btn").prop('disabled', false); | ||
205 | + }); | ||
206 | + } | ||
207 | + }); | ||
208 | + } | ||
209 | + | ||
92 | // initialize | 210 | // initialize |
93 | function Init() { | 211 | function Init() { |
94 | var small = $("#id_image"), | 212 | var small = $("#id_image"), |
@@ -0,0 +1,18 @@ | @@ -0,0 +1,18 @@ | ||
1 | +{% load i18n %} | ||
2 | + | ||
3 | +{% if users.count > 0 %} | ||
4 | + {% for user in users %} | ||
5 | + <a href="#" class="list-group-item suggested-user is-user"> | ||
6 | + <div class="col-md-1 user-img"> | ||
7 | + <img src="{{ user.image_url }}" class="img-responsive" /> | ||
8 | + </div> | ||
9 | + <div class="col-md-11"> | ||
10 | + <h4 data-user="{{ user.id }}">{{ user }}</h4> | ||
11 | + </div> | ||
12 | + </a> | ||
13 | + {% endfor %} | ||
14 | +{% else %} | ||
15 | + <a href="#" class="list-group-item suggested-user"> | ||
16 | + <h4 class="text-center">{% trans 'No results found.' %}</h4> | ||
17 | + </a> | ||
18 | +{% endif %} | ||
0 | \ No newline at end of file | 19 | \ No newline at end of file |
mural/templates/mural/_view_comment.html
@@ -10,7 +10,7 @@ | @@ -10,7 +10,7 @@ | ||
10 | <h4 class="comment-user"> | 10 | <h4 class="comment-user"> |
11 | {{ comment.user }} | 11 | {{ comment.user }} |
12 | <span class="user-action"> | 12 | <span class="user-action"> |
13 | - <i class="fa fa-comments-o"></i> | 13 | + <i class="fa fa-commenting-o"></i> |
14 | {% trans 'Comment' %} | 14 | {% trans 'Comment' %} |
15 | </span> | 15 | </span> |
16 | {% if request.user == comment.user or request.user.is_staff %} | 16 | {% if request.user == comment.user or request.user.is_staff %} |
mural/urls.py
@@ -11,4 +11,5 @@ urlpatterns = [ | @@ -11,4 +11,5 @@ urlpatterns = [ | ||
11 | url(r'^comment/(?P<post>[\w_-]+)/$', views.CommentCreate.as_view(), name='create_comment'), | 11 | url(r'^comment/(?P<post>[\w_-]+)/$', views.CommentCreate.as_view(), name='create_comment'), |
12 | url(r'^render_comment/([\w_-]+)/([\w_-]+)/$', views.render_comment, name='render_comment'), | 12 | url(r'^render_comment/([\w_-]+)/([\w_-]+)/$', views.render_comment, name='render_comment'), |
13 | url(r'^render_post/([\w_-]+)/([\w_-]+)/$', views.render_gen_post, name='render_post_general'), | 13 | url(r'^render_post/([\w_-]+)/([\w_-]+)/$', views.render_gen_post, name='render_post_general'), |
14 | + url(r'^suggest_users/$', views.suggest_users, name='suggest_users'), | ||
14 | ] | 15 | ] |
15 | \ No newline at end of file | 16 | \ No newline at end of file |
mural/views.py
@@ -302,4 +302,16 @@ def render_comment(request, comment, msg): | @@ -302,4 +302,16 @@ def render_comment(request, comment, msg): | ||
302 | 302 | ||
303 | html = render_to_string("mural/_view_comment.html", context, request) | 303 | html = render_to_string("mural/_view_comment.html", context, request) |
304 | 304 | ||
305 | - return JsonResponse({'message': msg, 'view': html, 'new_id': comment.id}) | ||
306 | \ No newline at end of file | 305 | \ No newline at end of file |
306 | + return JsonResponse({'message': msg, 'view': html, 'new_id': comment.id}) | ||
307 | + | ||
308 | +def suggest_users(request): | ||
309 | + param = request.GET.get('param', '') | ||
310 | + | ||
311 | + users = User.objects.filter(Q(username__icontains = param) | Q(last_name__icontains = param) | Q(social_name__icontains = param)).exclude(id = request.user.id)[:5] | ||
312 | + | ||
313 | + context = {} | ||
314 | + context['users'] = users | ||
315 | + | ||
316 | + response = render_to_string("mural/_user_suggestions_list.html", context, request) | ||
317 | + | ||
318 | + return JsonResponse({"search_result": response}) | ||
307 | \ No newline at end of file | 319 | \ No newline at end of file |