Modify user detail of usergroup

apps/static/css/plugins/chosen/chosen.css

@@ -2,9 +2,9 @@
 Chosen, a Select Box Enhancer for jQuery and Prototype
 by Patrick Filler for Harvest, http://getharvest.com
 
-Version 1.6.2
+Version 1.1.0
 Full source at https://github.com/harvesthq/chosen
-Copyright (c) 2011-2016 Harvest http://getharvest.com
+Copyright (c) 2011 Harvest http://getharvest.com
 
 MIT License, https://github.com/harvesthq/chosen/blob/master/LICENSE.md
 This file is generated by `grunt build`, do not edit it by hand.
@@ -16,20 +16,20 @@ This file is generated by `grunt build`, do not edit it by hand.
     display: inline-block;
     vertical-align: middle;
     font-size: 13px;
+    zoom: 1;
+    *display: inline;
     -webkit-user-select: none;
     -moz-user-select: none;
     user-select: none;
 }
-.chosen-container * {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
 .chosen-container .chosen-drop {
     position: absolute;
     top: 100%;
     left: -9999px;
     z-index: 1010;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
     width: 100%;
     border: 1px solid #aaa;
     border-top: 0;
@@ -42,19 +42,6 @@ This file is generated by `grunt build`, do not edit it by hand.
 .chosen-container a {
     cursor: pointer;
 }
-.chosen-container .search-choice .group-name, .chosen-container .chosen-single .group-name {
-  margin-right: 4px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  font-weight: normal;
-  color: #999999;
-}
-.chosen-container .search-choice .group-name:after, .chosen-container .chosen-single .group-name:after {
-  content: ":";
-  padding-left: 2px;
-  vertical-align: top;
-}
 
 /* @end */
 /* @group Single Chosen */
@@ -63,15 +50,15 @@ This file is generated by `grunt build`, do not edit it by hand.
     display: block;
     overflow: hidden;
     padding: 0 0 0 8px;
-  height: 25px;
+    height: 23px;
     border: 1px solid #aaa;
     border-radius: 5px;
     background-color: #fff;
     background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #ffffff), color-stop(50%, #f6f6f6), color-stop(52%, #eeeeee), color-stop(100%, #f4f4f4));
-  background: -webkit-linear-gradient(#ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
-  background: -moz-linear-gradient(#ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
-  background: -o-linear-gradient(#ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
-  background: linear-gradient(#ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
+    background: -webkit-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
+    background: -moz-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
+    background: -o-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
+    background: linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
     background-clip: padding-box;
     box-shadow: 0 0 3px white inset, 0 1px 1px rgba(0, 0, 0, 0.1);
     color: #444;
@@ -99,7 +86,7 @@ This file is generated by `grunt build`, do not edit it by hand.
     display: block;
     width: 12px;
     height: 12px;
-  background: url('../../../../../../../Downloads/chosen_v1.6.2/chosen-sprite.png') -42px 1px no-repeat;
+    background: url('chosen-sprite.png') -42px 1px no-repeat;
     font-size: 1px;
 }
 .chosen-container-single .chosen-single abbr:hover {
@@ -120,7 +107,7 @@ This file is generated by `grunt build`, do not edit it by hand.
     display: block;
     width: 100%;
     height: 100%;
-  background: url('../../../../../../../Downloads/chosen_v1.6.2/chosen-sprite.png') no-repeat 0px 2px;
+    background: url('chosen-sprite.png') no-repeat 0px 2px;
 }
 .chosen-container-single .chosen-search {
     position: relative;
@@ -130,14 +117,17 @@ This file is generated by `grunt build`, do not edit it by hand.
     white-space: nowrap;
 }
 .chosen-container-single .chosen-search input[type="text"] {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
     margin: 1px 0;
     padding: 4px 20px 4px 5px;
     width: 100%;
     height: auto;
     outline: 0;
     border: 1px solid #aaa;
-  background: white url('../../../../../../../Downloads/chosen_v1.6.2/chosen-sprite.png') no-repeat 100% -20px;
-  background: url('../../../../../../../Downloads/chosen_v1.6.2/chosen-sprite.png') no-repeat 100% -20px;
+    background: white url('chosen-sprite.png') no-repeat 100% -20px;
+    background: url('chosen-sprite.png') no-repeat 100% -20px;
     font-size: 1em;
     font-family: sans-serif;
     line-height: normal;
@@ -156,7 +146,6 @@ This file is generated by `grunt build`, do not edit it by hand.
 /* @end */
 /* @group Results */
 .chosen-container .chosen-results {
-  color: #444;
     position: relative;
     overflow-x: hidden;
     overflow-y: auto;
@@ -171,7 +160,6 @@ This file is generated by `grunt build`, do not edit it by hand.
     padding: 5px 6px;
     list-style: none;
     line-height: 15px;
-  word-wrap: break-word;
     -webkit-touch-callout: none;
 }
 .chosen-container .chosen-results li.active-result {
@@ -193,7 +181,6 @@ This file is generated by `grunt build`, do not edit it by hand.
     color: #fff;
 }
 .chosen-container .chosen-results li.no-results {
-  color: #777;
     display: list-item;
     background: #f4f4f4;
 }
@@ -213,20 +200,18 @@ This file is generated by `grunt build`, do not edit it by hand.
 /* @end */
 /* @group Multi Chosen */
 .chosen-container-multi .chosen-choices {
-  position: relative;
-  overflow: hidden;
+    -moz-box-sizing: border-box;
+    background-color: #FFFFFF;
+    border: 1px solid #CBD5DD;
+    border-radius: 2px;
+    cursor: text;
+    height: auto !important;
     margin: 0;
-  padding: 0 5px;
+    min-height: 30px;
+    overflow: hidden;
+    padding: 2px;
+    position: relative;
     width: 100%;
-  height: auto;
-  border: 1px solid #aaa;
-  background-color: #fff;
-  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
-  background-image: -webkit-linear-gradient(#eeeeee 1%, #ffffff 15%);
-  background-image: -moz-linear-gradient(#eeeeee 1%, #ffffff 15%);
-  background-image: -o-linear-gradient(#eeeeee 1%, #ffffff 15%);
-  background-image: linear-gradient(#eeeeee 1%, #ffffff 15%);
-  cursor: text;
 }
 .chosen-container-multi .chosen-choices li {
     float: left;
@@ -239,42 +224,39 @@ This file is generated by `grunt build`, do not edit it by hand.
 }
 .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
     margin: 1px 0;
-  padding: 0;
+    padding: 5px;
     height: 25px;
     outline: 0;
     border: 0 !important;
     background: transparent !important;
     box-shadow: none;
-  color: #999;
+    color: #666;
     font-size: 100%;
     font-family: sans-serif;
     line-height: normal;
     border-radius: 0;
 }
+.chosen-container-multi .chosen-choices li.search-field .default {
+    color: #999;
+}
 .chosen-container-multi .chosen-choices li.search-choice {
     position: relative;
-  margin: 3px 5px 3px 0;
+    margin: 3px 0 3px 5px;
     padding: 3px 20px 3px 5px;
     border: 1px solid #aaa;
-  max-width: 100%;
     border-radius: 3px;
-  background-color: #eeeeee;
+    background-color: #e4e4e4;
     background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
     background-image: -webkit-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
     background-image: -moz-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
     background-image: -o-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
     background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
-  background-size: 100% 19px;
-  background-repeat: repeat-x;
     background-clip: padding-box;
     box-shadow: 0 0 2px white inset, 0 1px 0 rgba(0, 0, 0, 0.05);
     color: #333;
     line-height: 13px;
     cursor: default;
 }
-.chosen-container-multi .chosen-choices li.search-choice span {
-  word-wrap: break-word;
-}
 .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
     position: absolute;
     top: 4px;
@@ -282,7 +264,7 @@ This file is generated by `grunt build`, do not edit it by hand.
     display: block;
     width: 12px;
     height: 12px;
-  background: url('../../../../../../../Downloads/chosen_v1.6.2/chosen-sprite.png') -42px 1px no-repeat;
+    background: url('chosen-sprite.png') -42px 1px no-repeat;
     font-size: 1px;
 }
 .chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover {
@@ -293,10 +275,10 @@ This file is generated by `grunt build`, do not edit it by hand.
     border: 1px solid #ccc;
     background-color: #e4e4e4;
     background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
-  background-image: -webkit-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
-  background-image: -moz-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
-  background-image: -o-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
-  background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
+    background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
+    background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
+    background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
+    background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
     color: #666;
 }
 .chosen-container-multi .chosen-choices li.search-choice-focus {
@@ -346,7 +328,7 @@ This file is generated by `grunt build`, do not edit it by hand.
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
 }
 .chosen-container-active .chosen-choices li.search-field input[type="text"] {
-  color: #222 !important;
+    color: #111 !important;
 }
 
 /* @end */
@@ -418,8 +400,8 @@ This file is generated by `grunt build`, do not edit it by hand.
 }
 .chosen-rtl .chosen-search input[type="text"] {
     padding: 4px 5px 4px 20px;
-  background: white url('../../../../../../../Downloads/chosen_v1.6.2/chosen-sprite.png') no-repeat -30px -20px;
-  background: url('../../../../../../../Downloads/chosen_v1.6.2/chosen-sprite.png') no-repeat -30px -20px;
+    background: white url('chosen-sprite.png') no-repeat -30px -20px;
+    background: url('chosen-sprite.png') no-repeat -30px -20px;
     direction: rtl;
 }
 .chosen-rtl.chosen-container-single .chosen-single div b {
@@ -431,7 +413,7 @@ This file is generated by `grunt build`, do not edit it by hand.
 
 /* @end */
 /* @group Retina compatibility */
-@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 1.5dppx) {
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi) {
     .chosen-rtl .chosen-search input[type="text"],
     .chosen-container-single .chosen-single abbr,
     .chosen-container-single .chosen-single div b,
@@ -439,7 +421,7 @@ This file is generated by `grunt build`, do not edit it by hand.
     .chosen-container-multi .chosen-choices .search-choice .search-choice-close,
     .chosen-container .chosen-results-scroll-down span,
     .chosen-container .chosen-results-scroll-up span {
-    background-image: url('../../../../../../../Downloads/chosen_v1.6.2/chosen-sprite@2x.png') !important;
+        background-image: url('chosen-sprite@2x.png') !important;
         background-size: 52px 37px !important;
         background-repeat: no-repeat !important;
     }

apps/static/css/style.css

@@ -981,6 +981,22 @@ button.dim:active:before {
   padding: 3px 20px 3px 5px;
   position: relative;
 }
+
+.chosen-container .chosen-results li.highlighted {
+    background-color: #1ab394;
+    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #1ab394), color-stop(90%, #1ab394));
+    /*background-image: -webkit-linear-gradient(#1ab394 20%, #2a62bc 100%);*/
+    /*background-image: -moz-linear-gradient(#1ab394 20%, #2a62bc 100%);*/
+    /*background-image: -o-linear-gradient(#1ab394 20%, #2a62bc 100%);*/
+    /*background-image: linear-gradient(#1ab394 20%, #2a62bc 100%);*/
+    color: #fff;
+}
+
+.chosen-container-active .chosen-choices {
+    border: 1px solid #1ab394;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+}
+
 /* PAGINATIN */
 .pagination > .active > a,
 .pagination > .active > span,

apps/templates/_head_css_js.html

@@ -5,7 +5,7 @@
 <link href="{% static "css/font-awesome.css" %}" rel="stylesheet">
 {#<link href="{% static "css/plugins/iCheck/custom.css" %}" rel="stylesheet">#}
 {#<link href="{% static "css/animate.css" %}" rel="stylesheet">#}
-<link href="{% static "css/style.css" %}" rel="stylesheet">
+
 {#<link href="{% static "css/colorbox.css" %}" rel="stylesheet">#}
 <link href="{% static "css/plugins/vaildator/jquery.validator.css" %}" rel="stylesheet">
 {#<link href="{% static "css/magnific/magnific-popup.css" %}" rel="stylesheet">#}
@@ -15,7 +15,6 @@
 <!-- scripts -->
 <script src="{% static "js/jquery-2.1.1.js" %}"></script>
 <script src="{% static "js/bootstrap.min.js" %}"></script>
-<script src="{% static "js/base.js" %}"></script>
 
 <!-- validator js -->
 {#<script src="{% static "js/validator/jquery.validator.js" %}"></script>#}

apps/templates/base.html

@@ -11,6 +11,8 @@
     <link rel="shortcut icon" href={% static "img/facio.ico" %} type="image/x-icon">
     {% include '_head_css_js.html' %}
     {% block custom_head_css_js %} {% endblock %}
+    <link href="{% static "css/style.css" %}" rel="stylesheet">
+    <script src="{% static "js/base.js" %}"></script>
 </head>
 
 <body>
@@ -25,5 +27,5 @@
 
 </body>
 {% include '_foot_js.html' %}
-{% block custom_footer_js %} {% endblock %}
+{% block custom_foot_js %} {% endblock %}
 </html>
\ No newline at end of file

apps/users/migrations/0008_auto_20160817_2303.py

+# -*- coding: utf-8 -*-
+# Generated by Django 1.10 on 2016-08-17 15:03
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('users', '0007_auto_20160817_0032'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='user',
+            name='avatar',
+            field=models.ImageField(upload_to='avatar', verbose_name='\u5934\u50cf'),
+        ),
+    ]

apps/users/models.py

@@ -60,7 +60,7 @@ class User(AbstractUser):
     username = models.CharField(max_length=20, unique=True, verbose_name='用户名', help_text='* required')
     name = models.CharField(max_length=20, verbose_name='姓名', help_text='* required')
     email = models.EmailField(max_length=30, unique=True, verbose_name='邮件', help_text='* required')
-    groups = models.ManyToManyField(UserGroup, verbose_name='用户组')
+    groups = models.ManyToManyField(UserGroup, verbose_name='用户组', help_text='* required')
     avatar = models.ImageField(upload_to="avatar", verbose_name='头像')
     wechat = models.CharField(max_length=30, blank=True, verbose_name='微信')
     phone = models.CharField(max_length=20, blank=True, verbose_name='手机号')

apps/users/templates/users/_user.html

@@ -49,7 +49,6 @@
                             </div>
                             <div class="hr-line-dashed"></div>
                             <h3>信息</h3>
-                            {{ form.avatar|bootstrap_horizontal }}
                             {{ form.phone|bootstrap_horizontal }}
                             {{ form.wechat|bootstrap_horizontal }}
                             {{ form.comment|bootstrap_horizontal }}
@@ -67,7 +66,7 @@
         </div>
     </div>
 {% endblock %}
-{% block custom_footer_js %}
+{% block custom_foot_js %}
 <script type="text/javascript">
 {#$(document).ready(function() {#}
 {#    var config = {#}

apps/users/templates/users/user_detail.html

@@ -3,6 +3,10 @@
 {% load users_tags %}
 {% load static %}
 
+{% block custom_head_css_js %}
+    <link href="{% static "css/plugins/chosen/chosen.css" %}" rel="stylesheet">
+    <script src="{% static "js/plugins/chosen/chosen.jquery.min.js" %}"></script>
+{% endblock %}
 {% block content %}
     <div class="wrapper wrapper-content animated fadeInRight">
         <div class="row">
@@ -177,28 +181,38 @@
                             </div>
 
                             <div class="ibox float-e-margins">
-                                <div class="ibox-title bg-primary" style="background: #23c6c8">
+                                <div class="ibox-title bg-primary" style="background: #1ab394">
                                     <span style="color: white">用户组</span>
                                     <div class="ibox-tools">
                                     </div>
                                 </div>
-                                <div class="ibox-content info-panel">
+                                <div class="ibox-content primary-panel">
                                     <table class="table">
                                         <tbody>
-                                        <tr>
-                                            <td>
-                                                
+                                        <form>
+                                            <tr>
+                                                <td colspan="2" class="no-borders">
+                                                    <select data-placeholder="选择用户组" class="chosen-select" style="width: 100%" multiple="" tabindex="4">
+                                                        {% for group in groups %}
+                                                        <option value="{{ group.id }}">{{ group.name }}</option>
+                                                        {% endfor %}
+                                                    </select>
                                                 </td>
 
                                             </tr>
                                             <tr>
-                                            <td width="20%">姓名:</td>
-                                            <td>{{ user.name }}</td>
+                                                <td colspan="2" class="no-borders">
+                                                    <button type="button" class="btn btn-primary btn-small">添加到用户组</button>
+                                                </td>
                                             </tr>
+                                        </form>
+
+                                        {% for group in user.groups.all %}
                                         <tr>
-                                            <td>描述:</td>
-                                            <td>{{ user.comment }}</td>
+                                            <td width="40%"><b>{{ group.name }}</b></td>
+                                            <td></td>
                                         </tr>
+                                        {% endfor %}
                                         </tbody>
                                     </table>
                                 </div>
@@ -212,9 +226,19 @@
     </div>
 
 {% endblock %}
-{% block custom_footer_js %}
+{% block custom_foot_js %}
     <script>
         $(document).ready(function () {
+            var config = {
+                '.chosen-select'           : {},
+                '.chosen-select-deselect'  : {allow_single_deselect:true},
+                '.chosen-select-no-single' : {disable_search_threshold:10},
+                '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
+                '.chosen-select-width'     : {width:"95%"}
+            };
+            for (var selector in config) {
+                $(selector).chosen(config[selector]);
+            }
         })
     </script>
 {% endblock %}
\ No newline at end of file

apps/users/templatetags/users_tags.py

 # ~*~ coding: utf-8 ~*~
 
+import os
 import urllib
 import hashlib
 
 from django import template
 from django.utils import timezone
 from django.conf import settings
-from django.conf.urls.static import static
 
 
 register = template.Library()
@@ -26,13 +26,16 @@ def is_expired(datetime):
 
 
 @register.filter
-def user_avatar_url(user, size=64):
+def user_avatar_url(user):
     if user.avatar:
         return user.avatar.url
-    gravatar_url = "https://www.gravatar.com/avatar/" \
-                   + hashlib.md5(user.email.lower()).hexdigest() + "?"
-    gravatar_url += urllib.urlencode({'d': 'identicon', 's': str(size)})
-    return gravatar_url
+    else:
+        default_dir = os.path.join(settings.MEDIA_ROOT, 'avatar', 'default')
+        if os.path.isdir(default_dir):
+            default_avatar_list = os.listdir(default_dir)
+            default_avatar = default_avatar_list[len(user.username) % len(default_avatar_list)]
+            return os.path.join(settings.MEDIA_URL, 'avatar', 'default',  default_avatar)
+    return 'https://www.gravatar.com/avatar/c6812ab450230979465d7bf288eadce2a?s=120&d=identicon'
 
 
 

apps/users/views.py

@@ -87,5 +87,6 @@ class UserDetailView(DetailView):
 
     def get_context_data(self, **kwargs):
         context = super(UserDetailView, self).get_context_data(**kwargs)
-        context.update({'path1': '用户管理', 'path2': '用户详情', 'title': '用户详情'})
+        groups = [group for group in UserGroup.objects.iterator() if group not in self.object.groups.iterator()]
+        context.update({'path1': '用户管理', 'path2': '用户详情', 'title': '用户详情', 'groups': groups})
         return context