styled tag moderation UI

6 files changed, 230 insertions, 59 deletions

diff --git a/askbot/skins/common/media/js/tag_moderation.js b/askbot/skins/common/media/js/tag_moderation.js
new file mode 100644
index 00000000..cf1ea64f
--- /dev/null
+++ b/askbot/skins/common/media/js/tag_moderation.js
@@ -0,0 +1,89 @@
+/**
+ * @constructor
+ */
+var PerThreadTagModerator = function() {
+    WrappedElement.call(this);
+    this._tagId = undefined;
+    this._threadId = undefined;
+};
+inherits(PerThreadTagModerator, WrappedElement);
+
+PerThreadTagModerator.prototype.setTagId = function(id) {
+    this._tagId = id;
+};
+
+PerThreadTagModerator.prototype.decorate = function(element) {
+    this._element = element;
+    this._threadId = element.data('threadId');
+
+    var acceptBtn = element.find('button.accept');
+    var rejectBtn = element.find('button.reject');
+
+    var mouseEnterHandler = function() {
+        acceptBtn.fadeIn('fast');
+        rejectBtn.fadeIn('fast');
+        return false;
+    };
+    var mouseLeaveHandler = function() {
+        acceptBtn.stop().hide();
+        rejectBtn.stop().hide();
+        return false;
+    };
+
+    element.mouseenter(mouseEnterHandler);
+    element.mouseleave(mouseLeaveHandler);
+    //threadInfo.hover(mouseEnterHandler, mouseLeaveHandler);
+    //element.hover(mouseEnterHandler, mouseLeaveHandler);
+};
+
+var AllThreadsTagModerator = function() {
+    WrappedElement.call(this);
+    this._controls_template = undefined;
+};
+inherits(AllThreadsTagModerator, WrappedElement);
+
+AllThreadsTagModerator.prototype.decorate = function(element) {
+    this._element = element;
+
+    //var controls = new TagModerationControls();
+    //controls.setParent(this);
+
+    //var tagId = $(element).data('tagId');
+    //controls.setTagId(tagId);
+
+    var threads_data = [];
+    $(element).find('.thread-info').each(function(idx, element) {
+        var id = $(element).data('threadId');
+        var title = $(element).data('threadTitle');
+        threads_data.push([id, title]);
+    });
+
+    var buttons = element.find('button');
+    /*element.prev().hover(
+        function(){ buttons.show();},
+        function(){ buttons.hide() }
+    );*/
+    //controls.setThreadsData(threads_data);
+    //add data to controls
+
+    //var controls_element = $(element).find('controls');
+    //controls_element.append(controls.getElement());
+
+};
+
+(function() {
+    $('.suggested-tag-row').each(function(idx, element) {
+        var tagEntry = $(element);
+        var tagId = tagEntry.data('tagId');
+
+        var mod = new AllThreadsTagModerator();
+        mod.decorate(tagEntry.next());
+
+        $('.thread-info').each(function(idx, element) {
+            var mod = new PerThreadTagModerator();
+            mod.setTagId(tagId);
+            mod.decorate($(element));
+        });
+
+    });
+})();
diff --git a/askbot/skins/default/media/style/prettify.css b/askbot/skins/default/media/style/prettify.css
index 10a37577..fabfd3b8 100644
--- a/askbot/skins/default/media/style/prettify.css
+++ b/askbot/skins/default/media/style/prettify.css
@@ -1,27 +1,27 @@
 /* Pretty printing styles. Used with prettify.js. */
 
-.str { color: #080; }
-.kwd { color: #008; }
-.com { color: #800; }
-.typ { color: #606; }
-.lit { color: #066; }
-.pun { color: #660; }
-.pln { color: #000; }
-.tag { color: #008; }
-.atn { color: #606; }
-.atv { color: #080; }
-.dec { color: #606; }
+pre .str { color: #080; }
+pre .kwd { color: #008; }
+pre .com { color: #800; }
+pre .typ { color: #606; }
+pre .lit { color: #066; }
+pre .pun { color: #660; }
+pre .pln { color: #000; }
+pre .tag { color: #008; }
+pre .atn { color: #606; }
+pre .atv { color: #080; }
+pre .dec { color: #606; }
 pre.prettyprint { padding: 3px; border: 0px solid #888; }
 
 @media print {
-  .str { color: #060; }
-  .kwd { color: #006; font-weight: bold; }
-  .com { color: #600; font-style: italic; }
-  .typ { color: #404; font-weight: bold; }
-  .lit { color: #044; }
-  .pun { color: #440; }
-  .pln { color: #000; }
-  .tag { color: #006; font-weight: bold; }
-  .atn { color: #404; }
-  .atv { color: #060; }
+  pre .str { color: #060; }
+  pre .kwd { color: #006; font-weight: bold; }
+  pre .com { color: #600; font-style: italic; }
+  pre .typ { color: #404; font-weight: bold; }
+  pre .lit { color: #044; }
+  pre .pun { color: #440; }
+  pre .pln { color: #000; }
+  pre .tag { color: #006; font-weight: bold; }
+  pre .atn { color: #404; }
+  pre .atv { color: #060; }
 }
diff --git a/askbot/skins/default/media/style/style.less b/askbot/skins/default/media/style/style.less
index 8d6b4afb..8b8bcf2b 100644
--- a/askbot/skins/default/media/style/style.less
+++ b/askbot/skins/default/media/style/style.less
@@ -1223,6 +1223,10 @@ ul#related-tags li {
 .tags-page,
 .groups-page,
 .moderate-tags-page {
+    th {
+        padding-bottom: 5px;
+        font-weight: normal;
+    }
     h1 {
         float: left;
         padding-top: 7px;
@@ -1230,11 +1234,54 @@ ul#related-tags li {
 }
 
 .moderate-tags-page {
+    button {
+        line-height: 18px;
+    }
+    table {
+        border-spacing: 0;
+    }
+    table.suggested-tags-table {
+        width: 100%;
+    }
+    th {
+        font-style: italic;
+    }
     th, tr {
         vertical-align: top;
         text-align: left;
         padding-right: 20px;
     }
+    td.per-thread-controls {
+        width: 120px;/* 20px more to compensate for the padding */
+        height: 30px;
+        button {
+            display: none;
+        }
+    }
+    th.decision-col,
+    th.tags-col,
+    th.users-col {
+        width: 100px;
+    }
+    tr.per-tag-controls {
+        height: 30px;
+        text-align: center;
+    }
+    tr.thread-info {
+        a {
+            line-height: 18px;
+        }
+    }
+    tr.thread-info td {
+        padding-bottom: 5px;
+    }
+    td.tags-col,
+    td.users-col {
+        padding-top: 7px
+    }
+    td.thread-links-col {
+        padding-top: 5px;
+    }
 }
 
 .main-page h1 {
@@ -3372,30 +3419,34 @@ a.edit {
     color: #145bff;
 }
 
-.str { color: #080; }
-.kwd { color: #008; }
-.com { color: #800; }
-.typ { color: #606; }
-.lit { color: #066; }
-.pun { color: #660; }
-.pln { color: #000; }
-.tag { color: #008; }/* name conflict here */
-.atn { color: #606; }
-.atv { color: #080; }
-.dec { color: #606; }
+pre {
+    .str { color: #080; }
+    .kwd { color: #008; }
+    .com { color: #800; }
+    .typ { color: #606; }
+    .lit { color: #066; }
+    .pun { color: #660; }
+    .pln { color: #000; }
+    .tag { color: #008; }/* name conflict here with tags */
+    .atn { color: #606; }
+    .atv { color: #080; }
+    .dec { color: #606; }
+}
 pre.prettyprint { clear:both;padding: 3px; border: 0px solid #888; }
 
 @media print {
-  .str { color: #060; }
-  .kwd { color: #006; font-weight: bold; }
-  .com { color: #600; font-style: italic; }
-  .typ { color: #404; font-weight: bold; }
-  .lit { color: #044; }
-  .pun { color: #440; }
-  .pln { color: #000; }
-  .tag { color: #006; font-weight: bold; }
-  .atn { color: #404; }
-  .atv { color: #060; }
+    pre {
+        .str { color: #060; }
+        .kwd { color: #006; font-weight: bold; }
+        .com { color: #600; font-style: italic; }
+        .typ { color: #404; font-weight: bold; }
+        .lit { color: #044; }
+        .pun { color: #440; }
+        .pln { color: #000; }
+        .tag { color: #006; font-weight: bold; }
+        .atn { color: #404; }
+        .atv { color: #060; }
+    }
 }
 
 #leading-sidebar {
diff --git a/askbot/skins/default/templates/moderate_tags.html b/askbot/skins/default/templates/moderate_tags.html
index 59aa239a..fbf43d5e 100644
--- a/askbot/skins/default/templates/moderate_tags.html
+++ b/askbot/skins/default/templates/moderate_tags.html
@@ -1,33 +1,55 @@
 {% extends "two_column_body.html" %}
 {% import "macros.html" as macros %}
 <!-- tags.html -->
-{% block title %}{% spaceless %}{% trans %}Moderated Tags{% endtrans %}{% endspaceless %}{% endblock %}
+{% block title %}{{ page_title }}{% endblock %}
 {% block content %}
     {% include "tags/header.html" %}
     {% if tags %}
-        <table>
+        <table class="suggested-tags-table">
             <thead>
                 <tr>
-                    <th>{% trans %}Name{% endtrans %}</th>
-                    <th>{% trans %}Used count{% endtrans %}</th>
-                    <th>{% trans %}Suggested by{% endtrans %}</th>
-                    <th>{% trans %}In questions{% endtrans %}</th>
+                    <th class="tags-col">{% trans %}Tag{% endtrans %}</th>
+                    <th class="users-col">{% trans %}Suggested by{% endtrans %}</th>
+                    <th class="decision-col">{% trans %}Your decision{% endtrans %}</th>
+                    <th>{% trans %}Suggested tag was used for questions{% endtrans %}</th>
                 </tr>
             </thead>
             <tbody>
             {% for tag in tags %}
-                <tr>
-                    <td>{{ tag.name }}</td>
-                    <td>{{ tag.used_count }}</td>
-                    <td>
+                <tr class="suggested-tag-row" data-tag-id="{{ tag.id }}">
+                    <td class="tags-col">
+                        {{ macros.tag_widget(tag.name, is_link = False) }}
+                        <span class="tag-number">&#215;{{ tag.used_count }}</span>
+                    </td>
+                    <td class="users-col">
                         {% for user in tag.users.all() %}
                             <p>{{ user.get_profile_link() }}</p>
                         {% endfor %}
                     </td>
-                    <td>
+                    <td colspan="2">
+                        <table>{# inner table for the list of questions #}
                         {% for thread in tag.threads.all() %}
-                            <p><a href="{{ thread.get_absolute_url() }}">{{ thread.title|escape }}</a></p>
+                            <tr class="thread-info" data-thread-id="{{ thread.id }}">
+                                <td class="per-thread-controls">
+                                    <button class="btn accept">{% trans %}Accept{% endtrans %}</button>
+                                    <button class="btn reject">{% trans %}Reject{% endtrans %}</button>
+                                </td>
+                                <td class="thread-links-col">
+                                    <a title="{{ thread._question_post().summary|escape }}"
+                                        href="{{ thread.get_absolute_url() }}"
+                                    >{{ thread.title|escape }}</a>
+                                </td>
+                            </tr>
                         {% endfor %}
+                        </table>
+                    </td>
+                </tr>
+                <tr class="per-tag-controls" data-tag-id="{{ tag.id }}">
+                    <td colspan="4">
+                        {% if tag.threads.count() > 1 %}
+                            <button class="btn">{% trans name=tag.name %}Apply tag "{{ name }}" to all above questions{% endtrans %}</button>
+                            <button class="btn">{% trans %}Reject tag{% endtrans %}</button>
+                        {% endif %}
                     </td>
                 </tr>
             {% endfor %}
@@ -37,3 +59,6 @@
         <span>{% trans %}Nothing found{% endtrans %}</span>
     {% endif %}
 {% endblock %}
+{% block endjs %}
+    <script type="text/javascript" src="{{ '/js/tag_moderation.js'|media }}"></script>
+{% endblock %}
diff --git a/askbot/skins/default/templates/tags/header.html b/askbot/skins/default/templates/tags/header.html
index 4f614f30..61a54cca 100644
--- a/askbot/skins/default/templates/tags/header.html
+++ b/askbot/skins/default/templates/tags/header.html
@@ -1,8 +1,12 @@
 <div id="content-header">
-    {% if stag %}
-        <h1 class="section-title">{% trans %}Tags, matching "{{ stag }}"{% endtrans %}</h1>
+    {% if page_title %}
+            <h1 class="section-title">{{ page_title }}</h1>
     {% else %}
-        <h1 class="section-title">{% trans %}Tags{% endtrans %}</h1>
+        {% if stag %}
+            <h1 class="section-title">{% trans %}Tags, matching "{{ stag }}"{% endtrans %}</h1>
+        {% else %}
+            <h1 class="section-title">{% trans %}Tags{% endtrans %}</h1>
+        {% endif %}
     {% endif %}
     <div class="tabBar tabBar-tags">
         <div class="tabsA">
@@ -23,9 +27,9 @@
                 {% if request.user.is_authenticated() and request.user.is_administrator_or_moderator() %}
                     <a 
                         href="{% url moderate_tags %}"
-                        {% if tab_id == 'used' %}class="on"{% endif %}
+                        {% if tab_id == 'suggested' %}class="on"{% endif %}
                         title="{% trans %}suggested{% endtrans %}"
-                    ><span>{% trans %}moderated{% endtrans %}</span></a>
+                    ><span>{% trans %}suggested{% endtrans %}</span></a>
                 {% endif %}
             {% endif %}
         </div>
diff --git a/askbot/views/meta.py b/askbot/views/meta.py
index f9cbe602..fd7cb3e2 100644
--- a/askbot/views/meta.py
+++ b/askbot/views/meta.py
@@ -189,7 +189,9 @@ def moderate_tags(request):
     data = {
         'tags': page.object_list,
         'active_tab': 'tags',
+        'tab_id': 'suggested',
         'page_class': 'moderate-tags-page',
+        'page_title': _('Suggested tags'),
         'paginator_context' : paginator_context,
     }
     return render_into_skin('moderate_tags.html', data, request)