WIP: edit participants modal

misago/static/misago/css/misago/participants.less

@@ -25,3 +25,155 @@
     }
   }
 }
+
+
+// Participants field
+//
+//==
+.thread-participants-input {
+  background: @input-bg;
+  border: 2px solid @input-border;
+  border-radius: @border-radius-large;
+
+  input {
+    border: none;
+    .box-shadow(none);
+    margin: 0px;
+  }
+
+  ul {
+    float: left;
+    margin: 0px;
+
+    li {
+      background: darken(@input-bg, 5%);
+      border-radius: @border-radius-small;
+      float: left;
+      margin-left: 2px;
+      margin-right: @line-height-computed / 2;
+      margin-top: 2px;
+      padding: @padding-small-vertical @padding-small-horizontal;
+      padding-left: @padding-small-vertical + 1px;
+
+      font-weight: bold;
+
+      img {
+        border-radius: @border-radius-small;
+        height: 20px;
+        margin-right: @line-height-computed / 5;
+        margin-bottom: -2px;
+        position: relative;
+        bottom: 2px;
+      }
+
+      .btn {
+        background: transparent;
+        border-color: transparent;
+        margin-left: @line-height-computed / 4;
+        height: 17px;
+        width: 17px;
+        padding: 0px;
+        position: relative;
+        bottom: 2px;
+
+        text-align: center;
+
+        .fa {
+          position: relative;
+          left: 0px;
+          bottom: 1px;
+
+          font-size: 14px;
+        }
+      }
+    }
+  }
+
+  .user-input {
+    float: left;
+    border: none;
+    .box-shadow(none);
+  }
+
+  .twitter-typeahead {
+    margin-bottom: -5px;
+
+    .tt-dropdown-menu {
+      background-color: @dropdown-bg;
+      border-radius: @border-radius-base;
+      box-shadow: 0px 0px 0px 4px @dropdown-shadow;
+      min-width: 160px;
+      padding: @padding-base-vertical 0px;
+
+      &:after {
+        border: solid transparent;
+        border-bottom-color: @dropdown-bg;
+        border-width: 4px;
+        content: "";
+        height: 0;
+        position: absolute;
+        pointer-events: none;
+        left: 12px;
+        top: -8px;
+        width: 0;
+      }
+
+      .tt-suggestion {
+        display: block;
+        padding: @padding-base-vertical @padding-large-horizontal;
+
+        color: @dropdown-link-color;
+        font-weight: bold;
+
+        cursor: pointer;
+
+        img {
+          border-radius: @border-radius-small;
+          position: relative;
+          bottom: 1px;
+        }
+
+        &.tt-cursor {
+          &, a:hover, a:active {
+            background-color: darken(@dropdown-bg, 10%);
+
+            color: @dropdown-link-color;
+          }
+        }
+      }
+    }
+  }
+}
+
+// Edit thread participants
+//
+//==
+.modal-edit-participants {
+  .users-list-compact {
+    margin-bottom: @line-height-computed * 1.5;
+  }
+
+  .invite-form {
+    display: table;
+    width: 100%;
+
+    .input {
+      display: table-cell;
+      width: 100%;
+
+      .thread-participants-input {
+        margin: 0px;
+      }
+    }
+
+    .button {
+      display: table-cell;
+      padding-left: @line-height-computed / 3;
+      vertical-align: top;
+
+      .btn {
+        margin: 0px;
+      }
+    }
+  }
+}

misago/static/misago/css/misago/posting.less

@@ -79,113 +79,8 @@
     }
   }
 
-  .thread-participants {
-    background: @input-bg;
-    border: 2px solid @input-border;
-    border-radius: @border-radius-large;
+  .thread-participants-input {
     margin-bottom: @line-height-computed / 2;
-
-    ul {
-      float: left;
-
-      li {
-        background: darken(@input-bg, 5%);
-        border-radius: @border-radius-small;
-        float: left;
-        margin-left: 2px;
-        margin-right: @line-height-computed / 2;
-        margin-top: 2px;
-        padding: @padding-small-vertical @padding-small-horizontal;
-        padding-left: @padding-small-vertical + 1px;
-
-        font-weight: bold;
-
-        img {
-          border-radius: @border-radius-small;
-          height: 20px;
-          margin-right: @line-height-computed / 5;
-          margin-bottom: -2px;
-          position: relative;
-          bottom: 2px;
-        }
-
-        .btn {
-          background: transparent;
-          border-color: transparent;
-          margin-left: @line-height-computed / 4;
-          height: 17px;
-          width: 17px;
-          padding: 0px;
-          position: relative;
-          bottom: 2px;
-
-          text-align: center;
-
-          .fa {
-            position: relative;
-            left: 0px;
-            bottom: 1px;
-
-            font-size: 14px;
-          }
-        }
-      }
-    }
-
-    .user-input {
-      float: left;
-      border: none;
-      .box-shadow(none);
-    }
-
-    .twitter-typeahead {
-      margin-bottom: -5px;
-
-      .tt-dropdown-menu {
-        background-color: @dropdown-bg;
-        border-radius: @border-radius-base;
-        box-shadow: 0px 0px 0px 4px @dropdown-shadow;
-        min-width: 160px;
-        padding: @padding-base-vertical 0px;
-
-        &:after {
-          border: solid transparent;
-          border-bottom-color: @dropdown-bg;
-          border-width: 4px;
-          content: "";
-          height: 0;
-          position: absolute;
-          pointer-events: none;
-          left: 12px;
-          top: -8px;
-          width: 0;
-        }
-
-        .tt-suggestion {
-          display: block;
-          padding: @padding-base-vertical @padding-large-horizontal;
-
-          color: @dropdown-link-color;
-          font-weight: bold;
-
-          cursor: pointer;
-
-          img {
-            border-radius: @border-radius-small;
-            position: relative;
-            bottom: 1px;
-          }
-
-          &.tt-cursor {
-            &, a:hover, a:active {
-              background-color: darken(@dropdown-bg, 10%);
-
-              color: @dropdown-link-color;
-            }
-          }
-        }
-      }
-    }
   }
 
   .editor-preview {

misago/static/misago/css/misago/userslists.less

@@ -109,3 +109,31 @@
     }
   }
 }
+
+
+// Compact users list for use in modals and stuff
+//
+//==
+.users-list-compact {
+  &>li {
+    border-bottom: 1px solid @hr-border;
+    padding: @line-height-computed / 2 0px;
+
+    &:last-child {
+    	border-bottom: none;
+    }
+
+    img {
+      border-radius: @border-radius-small;
+      height: 24px;
+    }
+
+    .item-title {
+      font-weight: bold;
+    }
+
+    .btn {
+      margin-top: -3px;
+    }
+  }
+}

misago/static/misago/js/misago-posting-participants.js

@@ -1,4 +1,4 @@
-Misago.participants = function($e) {
+Misago.Participants = function($e) {
 
   this.$users = $e.find('.users-list');
   this.$input = $e.find('.user-input');

misago/static/misago/js/misago-thread-participants.js

@@ -2,9 +2,63 @@ MisagoThreadParticipants = function() {
 
     var _this = this;
 
+    this.clear = function() {
+
+      this.$container = null;
+      this.max_participants = 1;
+
+    }
+
+    this.init = function($container) {
+
+      this.$container = $container;
+
+      this.$users = $container.find('ul');
+      this.$message = $container.find('.message');
+      this.$form = $container.find('.invite-form');
+
+      this.max_participants = parseInt($container.data('max-participants'));
+
+      this.$message.hide();
+      this.$form.hide();
+
+      if (this.$users.find('li').length < this.max_participants) {
+        this.$form.show();
+      } else {
+        this.$message.show();
+      }
+
+      // suppress default submission handling
+      this.$container.find('form').submit(function(e) {
+        e.preventDefault();
+        return false;
+      })
+
+      this.participants = new Misago.Participants(this.$form.find('.thread-participants-input'));
+
+    }
+
+    this.update_form_visibility = function() {
+
+      if (this.$users.find('li').length < this.max_participants) {
+        this.$message.hide();
+        this.$form.fadeIn();
+      } else {
+        this.$form.hide();
+        this.$message.fadeIn();
+      }
+
+    }
+
     this.open = function(options) {
 
-      console.log(options)
+      this.clear();
+
+      Misago.Modal.get(options.api_url, function(data) {
+
+        _this.init($('.modal-edit-participants'));
+
+      });
 
     }
 

misago/templates/misago/posting/threadparticipantsform.html

@@ -1,5 +1,5 @@
 {% load i18n %}
-<div class="thread-participants">
+<div class="thread-participants-input">
   <input id="{{ form.users.auto_id }}" name="{{ form.users.html_name }}" type="hidden">
   <ul class="list-unstyled users-list"></ul>
   <input class="textinput textInput form-control user-input" type="text" placeholder="{% trans "User to message..." %}" data-api-url="{% url 'misago:api_suggestion_engine' %}">

misago/templates/misago/privatethreads/list.html

@@ -94,7 +94,7 @@
       Misago.Posting.load({
         api_url: "{% url 'misago:start_private_thread' %}",
         on_load: function() {
-          var participants = new Misago.participants($('.thread-participants'));
+          var participants = new Misago.Participants($('.thread-participants-input'));
         }
       });
     });

misago/templates/misago/privatethreads/participants_modal.html

@@ -0,0 +1,54 @@
+{% load i18n misago_avatars %}
+<div class="modal-header">
+  <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">{% trans "Close" %}</span></button>
+  <h4 class="modal-title" id="ajaxModalLabel">
+    <span class="fa fa-users fa-fw fa-lg"></span>
+    {% trans "Edit participants" %}
+  </h4>
+</div>
+<div class="modal-body modal-edit-participants" data-max-participants="{{ user.acl.max_private_thread_participants }}">
+
+  <h4>{% trans "Thread participants" %}</h4>
+
+  <ul class="list-unstyled users-list-compact">
+    {% for participant in participants %}
+    <li>
+      <a href="{{ participant.user.get_absolute_url }}"><img src="{{ participant.user|avatar:100 }}" alt="{% trans "Avatar" %}" class="user-avatar"></a>
+      <a href="{{ participant.user.get_absolute_url }}" class="item-title">{{ participant.user }}</a>
+      {% if participant.user != user %}
+      <button type="button" class="btn btn-default btn-sm pull-right btn-remove-participant" data-remove-url="">
+        {% trans "Remove" %}
+      </button>
+      {% endif %}
+    </li>
+    {% endfor %}
+  </ul>
+
+  <h4>{% trans "Add participants" %}</h4>
+
+  <p class="lead message">
+    {% trans "You can't add more participants to this thread." %}
+  </p>
+
+  <form method="POST">
+    {% csrf_token %}
+    <div class="invite-form">
+
+      <div class="input">
+        <div class="thread-participants-input">
+          <input type="hidden">
+          <ul class="list-unstyled users-list"></ul>
+          <input class="textinput textInput form-control user-input" type="text" placeholder="{% trans "User to message..." %}" data-api-url="{% url 'misago:api_suggestion_engine' %}">
+        </div>
+      </div>
+
+      <div class="button">
+        <button type="button" class="btn btn-primary">
+          {% trans "Add" %}
+        </button>
+      </div>
+
+    </div>
+  </form>
+
+</div>

misago/templates/misago/privatethreads/thread.html

@@ -61,7 +61,7 @@
     {% if 'participants' in thread_actions %}
     $('.action-participants').click(function() {
       Misago.ParticipantsEditor.open({
-        api_url: 'kitties!'
+        api_url: '{% url "misago:private_thread_edit_participants" thread_id=thread.id thread_slug=thread.slug %}'
       })
     });
     {% endif %}

misago/templates/misago/profile/base.html

@@ -70,7 +70,7 @@
       Misago.Posting.load({
         api_url: "{% url 'misago:start_private_thread' %}",
         on_load: function() {
-          var participants = new Misago.participants($('.thread-participants'));
+          var participants = new Misago.Participants($('.thread-participants-input'));
           participants.add_user({
             username: "{{ profile.username }}",
             avatar: {30: "{{ profile|avatar:30 }}"}

misago/templates/misago/thread/gotolists/moderated.html

@@ -1,6 +1,6 @@
 {% load i18n %}
 <div class="modal-header">
-  <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+  <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">{% trans "Close" %}</span></button>
   <h4 class="modal-title" id="ajaxModalLabel">
     <span class="fa fa-question-circle fa-fw fa-lg"></span>
     {% blocktrans trimmed count posts=posts_count %}

misago/templates/misago/thread/gotolists/reported.html

@@ -1,6 +1,6 @@
 {% load i18n %}
 <div class="modal-header">
-  <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+  <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">{% trans "Close" %}</span></button>
   <h4 class="modal-title" id="ajaxModalLabel">
     <span class="fa fa-exclamation-triangle fa-fw fa-lg"></span>
     {% blocktrans trimmed count posts=posts_count %}

misago/threads/urls/privatethreads.py

@@ -40,9 +40,11 @@ urlpatterns += patterns('',
 
 
 # participants views
-from misago.threads.views.privatethreads import ThreadParticipantsView
+from misago.threads.views.privatethreads import (ThreadParticipantsView,
+                                                 EditThreadParticipantsView)
 urlpatterns += patterns('',
     url(r'^private-thread/(?P<thread_slug>[\w\d-]+)-(?P<thread_id>\d+)/participants/$', ThreadParticipantsView.as_view(), name='private_thread_participants'),
+    url(r'^private-thread/(?P<thread_slug>[\w\d-]+)-(?P<thread_id>\d+)/edit-participants/$', EditThreadParticipantsView.as_view(), name='private_thread_edit_participants'),
 )