changeset 2814:c8c498da08dd

rework layout of tickets view, move tags list from left side to top, add show/hide tags button
author RogerHaase <haaserd@gmail.com>
date Fri, 10 Oct 2014 13:22:43 -0700
parents 91567b869c36
children 811a17e35399
files MoinMoin/static/css/common.css MoinMoin/static/js/tickets.js MoinMoin/templates/tickets.html MoinMoin/themes/basic/static/css/theme.css MoinMoin/themes/basic/static/custom-less/theme.less MoinMoin/themes/modernized/static/css/stylus/theme.styl MoinMoin/themes/modernized/static/css/theme.css
diffstat 7 files changed, 147 insertions(+), 252 deletions(-) [+]
line wrap: on
line diff
--- a/MoinMoin/static/css/common.css	Wed Oct 08 09:21:37 2014 -0700
+++ b/MoinMoin/static/css/common.css	Fri Oct 10 13:22:43 2014 -0700
@@ -106,7 +106,7 @@
     text-decoration: underline;
 }
 .moin-searchoptions > table > tbody > tr > td {
-    valign: top;
+    vertical-align: top;
     padding-right: 20px;
     width: 20%;
 }
@@ -128,6 +128,91 @@
     display: inline;
 }
 
+/* tickets */
+.moin-existing-tags {
+    display: inline;
+}
+.moin-ticket-create-link,
+.moin-ticket-search {
+    display: inline;
+    float: right;
+}
+#ticket-table-tip {
+    color: #4e7da9;
+}
+#ticket-summary {
+    width: 50%;
+}
+.tickets-sort-button.dropdown {
+    z-index: 500;
+}
+.tickets-sort-button.dropdown ul.dropdown-menu {
+    background-color: #aed4fa;
+    padding: 0;
+    margin: 0;
+    display: none;
+    position: absolute;
+}
+.tickets-sort-button.dropdown ul.dropdown-menu li {
+    list-style-type: none;
+    display: block;
+    position: relative;
+}
+.tickets-sort-button.dropdown ul.dropdown-menu li a {
+    display: inline;
+}
+.tickets-sort-button.dropdown:hover ul.dropdown-menu {
+    display: inline-block;
+}
+.moin-ticket-tags {
+    border-bottom: none;
+    clear: both;
+}
+.tickets-sort-button.dropdown {
+    display: inline;
+    padding-left: 8px
+}
+.moin-ticketsearch-form {
+    display: inline
+}
+#moin-ticketsearch-query {
+    background-image: url("../../../static/img/search.png");
+    background-repeat: no-repeat;
+    background-position: 5px;
+    padding-left: 24px;
+    width: 150px;
+    margin-left: 7px;
+}
+.moin-ticket-tags {
+    margin-top: 1em;
+    display: none;
+}
+#ticket-list thead th:hover {
+    background-color: #e8e8e8; cursor: pointer;
+}
+#ticket-list tbody tr:hover {
+    background-color: #e8e8e8;
+}
+#ticket-list tr td:first-child a {
+    font-family: monospace;
+}
+.ticket-query-button {
+    background: #aed4fa;
+    padding: 1px 7px;
+    text-shadow: 0 1px 0 #fff;
+    border: 1px solid transparent;
+}
+.ticket-query-button.active,
+.ticket-tags-button.active,
+.ticket-tags-button:hover,
+.ticket-query-button:hover {
+    background-color:#008b8b;
+    color: #333;
+    box-sizing: border-box;
+    border: 1px solid transparent;
+    border-radius: 3px;
+}
+
 /* tags tab */
 ul.moin-tags {
     display: block;
--- a/MoinMoin/static/js/tickets.js	Wed Oct 08 09:21:37 2014 -0700
+++ b/MoinMoin/static/js/tickets.js	Fri Oct 10 13:22:43 2014 -0700
@@ -1,17 +1,34 @@
-$(document).ready(function(){
-
+$(document).ready(function () {
+    "use strict";
     $("table").tablesorter({
-    widgets: ["resizable"],
-    widgetOptions : {
-        // css class name applied to the sticky header
-        resizable : false
-    },
-    headers: {
-        // remove sorting option for tags column
-        7: { sorter: false }
+        widgets: ["resizable"],
+        widgetOptions : {
+            // css class name applied to the sticky header
+            resizable : false
+        },
+        headers: {
+            // remove sorting option for tags column
+            7: { sorter: false }
+        }
+    });
+
+    $('.moin-loginsettings').addClass('navbar-right');
+
+    // executed when user clicks tickets tab tags button and conditionally on page load
+    $('.ticket-tags-toggle').click(function () {
+        // Toggle visibility tags
+        var tags = $('.moin-ticket-tags');
+        if (tags.is(':hidden')) {
+            tags.show();
+            $('.ticket-tags-toggle').attr('title', _("Hide tags")).addClass('active');
+        } else {
+            tags.hide();
+            $('.ticket-tags-toggle').attr('title', _("Show all tags")).removeClass('active');
+            location.search = '';
+        }
+    });
+    // ticket tags are initially hidden by css; if a tag is selected: show the tags
+    if (location.search.indexOf("selected_tags") >= 0) {
+        $('.ticket-tags-toggle').click();
     }
-  });
-
-  $('.moin-loginsettings').addClass('navbar-right');
-
 });
--- a/MoinMoin/templates/tickets.html	Wed Oct 08 09:21:37 2014 -0700
+++ b/MoinMoin/templates/tickets.html	Fri Oct 10 13:22:43 2014 -0700
@@ -6,15 +6,17 @@
     <h1>{{_("Tickets")}}</h1>
 
     {% set status_values = ['all', 'open', 'closed']  %}
-    {{_("Filter:")}}
+    <span>{{_("Filter:")}}</span>
     {% for status_value in status_values %}
         <form action="{{ url_for('frontend.tickets', selected_tags=list(), time_sorting=time_sorting if time_sorting) }}" method="post" class='moin-ticketsearch-form'>
             <input type="hidden" name="q" value="" >
-            &nbsp;<input type="hidden" name="status" value="{{ status_value }}">
+            <input type="hidden" name="status" value="{{ status_value }}">
             <input type="submit" value="{{ status_value.capitalize() }}" title="{{ _('Show %(status)s tickets', status=status_value) }}" class="{{ 'ticket-query-button active' if status == status_value  else 'ticket-query-button'}}">
         </form>
     {% endfor %}
 
+    <input type="button" class="ticket-tags-button ticket-tags-toggle" title="{{_("Show all tags")}}" value="{{_("Tags")}}">
+
     <div class="tickets-sort-button dropdown">
         <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
             {% if time_sorting == 'new' %}
@@ -47,16 +49,31 @@
         </ul>
     </div>
 
-    {# This is just a workaround for creating tickets #}
-    <a id="moin-ticket-create-link" href="{{ url_for('frontend.modify_item', itemtype='ticket', item_name='ticket_'+current_timestamp ) }}" >
-        <button class="btn btn-primary btn-lg btn-block">{{ _("Create ticket") }}</button>
-    </a>
+    <form class="moin-ticket-search" action="{{ url_for('frontend.tickets',selected_tags=list(selected_tags), time_sorting=time_sorting if time_sorting) }}" method="post">
+        <input type="hidden" name="status" value="{{ status }}">
+        <input type="text" name="q" value="{{ query if query }}" id="moin-ticketsearch-query" placeholder="{{_('Find tickets')}}">
+    </form>
 
-    <form action="{{ url_for('frontend.tickets',selected_tags=list(selected_tags), time_sorting=time_sorting if time_sorting) }}" method="post">
-        <input type="hidden" name="status" value="{{ status }}">
-        <input type="text" name="q" value="{{ query if query }}" id="moin-ticketsearch-query" class="form-control" placeholder="{{_('Find tickets')}}">
+    {# TODO: This is a workaround that creates named tickets, rework when there is a means of creating unnamed tickets #}
+    <form method="get" class="moin-ticket-create-link" action="{{ url_for('frontend.modify_item', item_name='ticket_'+current_timestamp ) }}">
+        <input type="submit" value="{{ _('Create ticket') }}">
+        <input type="hidden" name="itemtype" value="ticket">
     </form>
 
+    <div class="moin-ticket-tags">
+        <span>{{_("Tags:")}}</span>
+        {% for tag in tags %}
+            {# If user clicks on the tag then it gets selected if it is not already selected #}
+            {# If that tag is already selected then it gets deselected #}
+            {% set selected_tags_value = list(selected_tags.difference([tag]) if tag in selected_tags else selected_tags.union([tag])) %}
+            <form class="moin-existing-tags" action="{{ url_for('frontend.tickets', selected_tags=selected_tags_value, time_sorting=time_sorting if time_sorting) }}" method="post">
+                <input type="hidden" name="q" value="{{ query if query }}" >
+                <input type="hidden" name="status" value="{{ status }}">
+                <input type="submit" value="{{ tag }}" class="{{ 'ticket-tags-button btn btn-primary active' if tag in selected_tags else 'ticket-tags-button btn btn-default' }}">
+            </form>
+        {% endfor %}
+    </div>
+
     {% if results %}
         <p>{{ _("%(result_len)d Tickets found.", result_len=results|length) }}</p>
         <table class="table table-hover" id="ticket-list">
@@ -116,18 +133,6 @@
         {{ _("No Ticket found.") }}
     {% endif %}
 
-    <h3 class="moin-ticket-tags">{{_("Tags")}}</h3>
-    {% for tag in tags %}
-        {# If user clicks on the tag then it gets selected if it is not already selected #}
-        {# If that tag is already selected then it gets deselected #}
-        {% set selected_tags_value = list(selected_tags.difference([tag]) if tag in selected_tags else selected_tags.union([tag])) %}
-        <form action="{{ url_for('frontend.tickets', selected_tags=selected_tags_value, time_sorting=time_sorting if time_sorting) }}" method="post">
-            <input type="hidden" name="q" value="{{ query if query }}" >
-            <input type="hidden" name="status" value="{{ status }}">
-            <input type="submit" value="{{ tag }}" class="{{ 'ticket-tags-button btn btn-primary active' if tag in selected_tags else 'ticket-tags-button btn btn-default' }}">
-        </form>
-    {% endfor %}
-
 {% endblock %}
 {% block body_scripts %}
     {{ super() }}
--- a/MoinMoin/themes/basic/static/css/theme.css	Wed Oct 08 09:21:37 2014 -0700
+++ b/MoinMoin/themes/basic/static/css/theme.css	Fri Oct 10 13:22:43 2014 -0700
@@ -7263,43 +7263,6 @@
     padding-left: 30px;
   }
 }
-#moin-ticketsearch-query {
-  background-image: url('../../../../static/img/search.png');
-  background-repeat: no-repeat;
-  background-position: 5px;
-  padding-left: 24px;
-  width: 200px;
-  right: 40px;
-  top: 80px;
-  position: absolute;
-}
-#ticket-list thead th:hover {
-  background-color: #e8e8e8;
-}
-#ticket-list tr td,
-#ticket-list thead th {
-  cursor: pointer;
-}
-#ticket-list tr td:first-child a {
-  font-family: monospace;
-}
-.ticket-query-button {
-  background: #ffffff;
-  padding: 1px 7px;
-  text-shadow: 0 1px 0 #fff;
-  border: 1px solid transparent;
-}
-.ticket-query-button.active,
-.ticket-query-button:hover {
-  background: -webkit-linear-gradient(top, #cccccc 0, #dddddd 13%);
-  color: #333;
-  box-sizing: border-box;
-  border: 1px solid transparent;
-  border-radius: 3px;
-}
-.moin-ticketsearch-form {
-  display: inline;
-}
 .tablesorter-header {
   background-image: url('../../../../static/img/bg.png');
   background-repeat: no-repeat;
@@ -7315,41 +7278,12 @@
   background-image: None;
 }
 .tablesorter-header-inner {
-  padding-left: 20px;
+  padding-left: 10px;
   cursor: pointer;
 }
 .sorter-false > .tablesorter-header-inner {
   padding-left: 0px;
 }
-#ticket-summary {
-  width: 50%;
-}
-#ticket-list {
-  float: right;
-  width: 90%;
-}
-.ticket-tags-button {
-  padding: 4px;
-  width: 100px;
-}
-#ticket-table-tip {
-  float: right;
-  color: #999999;
-}
-.tickets-sort-button.dropdown {
-  display: inline;
-}
-#moin-ticket-create-link {
-  display: inline;
-  position: absolute;
-  right: 90px;
-  top: 40px;
-}
-#moin-ticket-create-link button {
-  width: 150px;
-  height: 35px;
-  padding-top: 6px;
-}
 html {
   overflow-y: scroll;
 }
--- a/MoinMoin/themes/basic/static/custom-less/theme.less	Wed Oct 08 09:21:37 2014 -0700
+++ b/MoinMoin/themes/basic/static/custom-less/theme.less	Fri Oct 10 13:22:43 2014 -0700
@@ -646,42 +646,6 @@
   }
 }
 
-// special formatting for tickets with basic theme
-#moin-ticketsearch-query {
-  background-image: url('../../../../static/img/search.png');
-  background-repeat: no-repeat;
-  background-position: 5px;
-  padding-left: 24px;
-  width: 200px;
-  right: 40px;
-  top: 80px;
-  position: absolute;
-}
-#ticket-list thead th:hover {
-  background-color: #e8e8e8;
-}
-#ticket-list tr td, #ticket-list thead th {
-  cursor: pointer;
-}
-#ticket-list tr td:first-child a {
-  font-family: monospace;
-}
-.ticket-query-button {
-  background: @white;
-  padding: 1px 7px;
-  text-shadow: 0 1px 0 #fff;
-  border: 1px solid transparent;
-}
-.ticket-query-button.active, .ticket-query-button:hover {
-  background: -webkit-linear-gradient(top, #cccccc 0, #dddddd 13%);
-  color: #333;
-  box-sizing: border-box;
-  border: 1px solid transparent;
-  border-radius: 3px;
-}
-.moin-ticketsearch-form {
-  display: inline;
-}
 .tablesorter-header {
   background-image: url('../../../../static/img/bg.png');
   background-repeat: no-repeat;
@@ -697,42 +661,12 @@
   background-image: None;
 }
 .tablesorter-header-inner {
-  padding-left: 20px;
+  padding-left: 10px;
   cursor: pointer;
 }
 .sorter-false > .tablesorter-header-inner {
   padding-left:0px;
 }
-#ticket-summary {
-  width: 50%;
-}
-#ticket-list {
-  float: right;
-  width: 90%;
-}
-.ticket-tags-button {
-  padding: 4px;
-  width: 100px;
-}
-#ticket-table-tip {
-  float: right;
-  color: #999999;
-}
-.tickets-sort-button.dropdown {
-  display: inline;
-}
-#moin-ticket-create-link {
-  display: inline;
-  position: absolute;
-  right: 90px;
-  top: 40px;
-}
-#moin-ticket-create-link button {
-  width: 150px;
-  height: 35px;
-  padding-top: 6px;
-}
-// end special formatting for tickets with basic theme
 
 html{
   overflow-y: scroll;
--- a/MoinMoin/themes/modernized/static/css/stylus/theme.styl	Wed Oct 08 09:21:37 2014 -0700
+++ b/MoinMoin/themes/modernized/static/css/stylus/theme.styl	Fri Oct 10 13:22:43 2014 -0700
@@ -1549,31 +1549,8 @@
 ul.moin-bcs-item li:hover ul.moin-bcs-subitems
     display block
 
-.tickets-sort-button.dropdown
-    display inline
-    padding-left 8px
-
-#ticket-list
-    float right
-    width 85%
-
-.moin-ticketsearch-form
-    display inline
-
-#moin-ticketsearch-query
-    background-image url('../../../../static/img/search.png')
-    background-repeat no-repeat
-    background-position 5px
-    padding-left 24px
-    width 150px
-    height 25px
-    right 40px
-    position absolute
-
 .tablesorter-header-inner
-    padding-left 20px
-    cursor pointer
-
+    padding-left 10px
 .sorter-false > .tablesorter-header-inner
     padding-left 0px
 
@@ -1593,47 +1570,5 @@
 .tablesorter-header.sorter-false
     background-image None
 
-#ticket-table-tip
-    float right
-    color border_color
-
-#ticket-summary
-    width 50%
-
-.ticket-query-button.active, .ticket-tags-button.active
-    background-color visited_color
-
-.tickets-sort-button.dropdown
-    z-index 500
-
-.tickets-sort-button.dropdown ul.dropdown-menu
-    background-color base_color
-    padding 0
-    margin 0
-    display none
-    position absolute
-    li
-        list-style-type none
-        display block
-        position relative
-        a
-            display inline
-
-.tickets-sort-button.dropdown:hover ul.dropdown-menu
-    display inline-block
-
-.moin-ticket-tags
-    border-bottom none
-
-#moin-ticket-create-link
-    display inline
-    position absolute
-    right 70px
-    top 190px
-
-#moin-ticket-create-link button
-  width 150px
-  height 35px
-
 .zebra .tablesorter-header
     background-color header_bg_color
--- a/MoinMoin/themes/modernized/static/css/theme.css	Wed Oct 08 09:21:37 2014 -0700
+++ b/MoinMoin/themes/modernized/static/css/theme.css	Fri Oct 10 13:22:43 2014 -0700
@@ -674,25 +674,10 @@
 ul.moin-bcs-item li{position:relative}
 ul.moin-bcs-item li ul.moin-bcs-subitems{display:none;position:absolute}
 ul.moin-bcs-item li:hover ul.moin-bcs-subitems{display:block}
-.tickets-sort-button.dropdown{display:inline;padding-left:8px}
-#ticket-list{float:right;width:85%}
-.moin-ticketsearch-form{display:inline}
-#moin-ticketsearch-query{background-image:url("../../../../static/img/search.png");background-repeat:no-repeat;background-position:5px;padding-left:24px;width:150px;height:25px;right:40px;position:absolute}
-.tablesorter-header-inner{padding-left:20px;cursor:pointer}
+.tablesorter-header-inner{padding-left:10px}
 .sorter-false > .tablesorter-header-inner{padding-left:0}
 .tablesorter-header{background-image:url("../../../../static/img/bg.png");background-repeat:no-repeat;background-position:left center;background-color:#d8dfe9;color:#000}
 .tablesorter-headerAsc{background-image:url("../../../../static/img/asc.png")}
 .tablesorter-headerDesc{background-image:url("../../../../static/img/desc.png")}
 .tablesorter-header.sorter-false{background-image:None}
-#ticket-table-tip{float:right;color:#4e7da9}
-#ticket-summary{width:50%}
-.ticket-query-button.active,.ticket-tags-button.active{background-color:#008b8b}
-.tickets-sort-button.dropdown{z-index:500}
-.tickets-sort-button.dropdown ul.dropdown-menu{background-color:#aed4fa;padding:0;margin:0;display:none;position:absolute;}
-.tickets-sort-button.dropdown ul.dropdown-menu li{list-style-type:none;display:block;position:relative;}
-.tickets-sort-button.dropdown ul.dropdown-menu li a{display:inline}
-.tickets-sort-button.dropdown:hover ul.dropdown-menu{display:inline-block}
-.moin-ticket-tags{border-bottom:none}
-#moin-ticket-create-link{display:inline;position:absolute;right:70px;top:190px}
-#moin-ticket-create-link button{width:150px;height:35px}
 .zebra .tablesorter-header{background-color:#00417f}