Fixed #745 and #744: Make widgets fixable and collapsable.

Fixed widget header style issues.

openslides/projector/static/javascript/dashboard.js

@@ -104,6 +104,16 @@ $(function() {
             $('#overlay_message_text').val(data['overlay_message']);
         }
     });
+    $('.fixbutton button').click(function (event) {
+        event.preventDefault();
+        if($(this).hasClass('active')) {
+            $(this).closest('.widget').removeClass('affix');
+            $(this).closest('.widget').removeAttr('data-spy');
+        } else {
+            $(this).closest('.widget').addClass('affix');
+            $(this).closest('.widget').attr('data-spy', 'affix');
+        }
+    });
 
 /* comment out this function because '$.browser' has been removed from jquery 1.9, see:
    http://blog.jquery.com/2013/01/15/jquery-1-9-final-jquery-2-0-beta-migrate-final-released/

openslides/projector/static/styles/dashboard.css

@@ -14,8 +14,15 @@
 .widget {
     margin: 0 10px 10px 0;
 }
+.widget.affix {
+    position: fixed;
+    z-index: 100;
+    right: 20px;
+    top: 42px;
+    max-width: 40%;
+}
 .widget-header {
-    height: 30px;
+    min-height: 30px;
     background: #E9E9E9;
     background:-moz-linear-gradient(top, #FAFAFA 0%, #E9E9E9 100%); /* FF3.6+ */
     background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#FAFAFA), color-stop(100%,#E9E9E9)); /* Chrome,Safari4+ */
@@ -27,27 +34,31 @@
     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9')";
     border: 1px solid #D5D5D5;
     border-radius: 5px 5px 0 0;
-    -moz-border-radius: 5px 5px 0 0;
-    -webkit-border-radius: 5px 5px 0 0;
-
 }
 .widget-header h3 {
-    padding-left: 7px;
+    margin: 7px 0 7px 14px;
-    margin: 7px 0;
-    display: inline-block;
     font-size: 14px;
     color: #555;
     line-height: 18px;
 }
-
 .widget-header [class^="icon-"], .widget-header [class*=" icon-"] {
-    display: inline-block;
+    margin: -2px 5px 0 0px;
-    margin: -2px 0 0 13px;
     color: #555;
     vertical-align: middle;
 }
+.widget-header .collapsebutton, .widget-header .fixbutton{
+    margin: -2px 4px 0 0px;
+}
+.widget-header .fixbutton{
+    margin-left: 6px;
+}
+.widget-header .icon-pushpin {
+    background-image: url("../img/glyphicons_335_pushpin.png");
+    background-position: 0 center;
+    margin-left:4px !important;
+}
 .widget-content {
-    padding: 20px 15px 15px 13px;
+    padding: 0px 15px 0px 13px;
     background: #FFF;
     border: 1px solid #D5D5D5;
     border-radius: 0 0 5px 5px;
@@ -97,11 +108,12 @@
     height: 768px;
 }
 #iframewrapper {
-    width: 256px;/*100%;*/
+    width: 256px;
-    height: 192px;/*230px;*/
+    height: 192px;
     position: relative;
     overflow: hidden;
     border: 1px solid #D5D5D5;
+    margin-bottom: 10px;
 }
 #iframeoverlay {
     width: 256px;

openslides/projector/templates/projector/dashboard.html

@@ -27,11 +27,24 @@
             {% if widget.default_column == 1 %}
                 <div class="widget" id="widget_{{ widget.get_name }}">
                     <div class="widget-header">
-                        <i class="{% if widget %}icon-{{widget.name}}{% else %}icon-star{% endif %}"></i>
+                        <h3>
-                        <h3>{% trans widget.get_title %}</h3>
+                            <i class="{% if widget %}icon-{{widget.name}}{% else %}icon-star{% endif %}"></i>
+                            <div class="collapsebutton btn-group right" data-toggle="buttons-checkbox">
+                                <button type="button" class="btn btn-mini"
+                                    data-toggle="collapse" data-target="#widgetcontent_{{ widget.get_name }}"
+                                    title="{% trans 'Collapse widget content' %}">
+                                    _</button>
+                            </div>
+                            <div class="fixbutton btn-group right" data-toggle="buttons-checkbox">
+                                <button type="button" class="btn btn-mini" style="width: 20px;"
+                                    title="{% trans 'Fix widget position' %}">
+                                    <i class="icon-pushpin"></i></button>
+                            </div>
+                            {% trans widget.get_title %}
+                        </h3>
                     </div>
-                    <div class="widget-content">
+                    <div class="widget-content collapse in" id="widgetcontent_{{ widget.get_name }}">
-                        {{ widget.html }}
+                        <br>{{ widget.html }}<br>
                     </div>
                 </div>
             {% endif %}
@@ -42,11 +55,25 @@
         {% for name, widget in widgets.items %}
             {% if widget.default_column == 2 %}
                 <div class="widget" id="widget_{{ widget.get_name }}">
-                    <div class="widget-header"><i class="{% if widget %}icon-{{widget.name}}{% else %}icon-star{% endif %}"></i>
+                    <div class="widget-header">
-                        <h3>{% trans widget.get_title %}<h3>
+                        <h3>
+                            <i class="{% if widget %}icon-{{widget.name}}{% else %}icon-star{% endif %}"></i>
+                            <div class="collapsebutton btn-group right" data-toggle="buttons-checkbox">
+                                <button type="button" class="btn btn-mini"
+                                    data-toggle="collapse" data-target="#widgetcontent_{{ widget.get_name }}"
+                                    title="{% trans 'Collapse widget content' %}">
+                                    _</button>
+                            </div>
+                            <div class="fixbutton btn-group right" data-toggle="buttons-checkbox">
+                                <button type="button" class="btn btn-mini" style="width: 20px;"
+                                    title="{% trans 'Fix widget position' %}">
+                                    <i class="icon-pushpin"></i></button>
+                            </div>
+                            {% trans widget.get_title %}
+                        </h3>
                     </div>
-                    <div class="widget-content">
+                    <div class="widget-content collapse in" id="widgetcontent_{{ widget.get_name }}">
-                        {{ widget.html }}
+                        <br>{{ widget.html }}<br>
                     </div>
                 </div>
             {% endif %}

openslides/projector/templates/projector/live_view_widget.html

@@ -1,32 +1,5 @@
 {% load i18n %}
 
-<!-- projector control buttons -->
-{% if perms.projector.can_manage_projector %}
-    <div style="float: right;">
-        <p>
-        <a class="projector_edit btn btn-mini" href="{% url 'projector_bigger' %}" title="{% trans 'Zoom in' %}">
-            <i class="icon-zoom-in"></i>
-        </a><br>
-        <a class="projector_edit btn btn-mini" href="{% url 'projector_smaller' %}" title="{% trans 'Zoom out' %}">
-            <i class="icon-zoom-out"></i>
-        </a>
-        </p>
-        <p>
-        <a class="projector_edit btn btn-mini" href="{% url 'projector_up' %}" title="{% trans 'Scroll visible view up' %}">
-            <i class="icon-arrow-up"></i>
-        </a><br>
-        <a class="projector_edit btn btn-mini" href="{% url 'projector_down' %}" title="{% trans 'Scroll visible view down' %}">
-            <i class="icon-arrow-down"></i>
-        </a>
-        </p>
-        <p>
-        <a class="projector_edit btn btn-mini" href="{% url 'projector_clean' %}" title="{% trans 'Reset projector view' %}">
-            <i class="icon-resize-small"></i>
-        </a>
-        </p>
-    </div>
-{% endif %}
-
 <!-- projector live view -->
 <a href="{% url 'projector_show' %}" target="_blank">
     <div id="iframewrapper">
@@ -34,3 +7,26 @@
         <div id="iframeoverlay"></div>
     </div>
 </a>
+
+<!-- projector control buttons -->
+{% if perms.projector.can_manage_projector %}
+    <p>
+        <a class="projector_edit btn btn-mini" href="{% url 'projector_bigger' %}" title="{% trans 'Zoom in' %}">
+            <i class="icon-zoom-in"></i>
+        </a>
+        <a class="projector_edit btn btn-mini" href="{% url 'projector_smaller' %}" title="{% trans 'Zoom out' %}">
+            <i class="icon-zoom-out"></i>
+        </a>
+        &nbsp;&nbsp;
+        <a class="projector_edit btn btn-mini" href="{% url 'projector_up' %}" title="{% trans 'Scroll visible view up' %}">
+            <i class="icon-arrow-up"></i>
+        </a>
+        <a class="projector_edit btn btn-mini" href="{% url 'projector_down' %}" title="{% trans 'Scroll visible view down' %}">
+            <i class="icon-arrow-down"></i>
+        </a>
+        &nbsp;&nbsp;
+        <a class="projector_edit btn btn-mini" href="{% url 'projector_clean' %}" title="{% trans 'Reset projector view' %}">
+            <i class="icon-resize-small"></i>
+        </a>
+    </p>
+{% endif %}

tests/account/test_widgets.py

@@ -60,7 +60,7 @@ class PersonalInfoWidget(TestCase):
 
     def test_widget_appearance(self):
         response = self.client.get('/projector/dashboard/')
-        self.assertContains(response, '<h3>My items, motions and elections</h3>', status_code=200)
+        self.assertContains(response, 'My items, motions and elections', status_code=200)
 
     def test_item_list(self):
         agenda = self.import_agenda()