template: Updated dashboard. Fixed ajax functionality. Adapted style.

openslides/projector/static/javascript/dashboard.js

@@ -15,11 +15,12 @@ function saveOrder() {
         $.cookie(cookieName, order, { path: "/", expiry: new Date(2012, 1, 1)});
     });
 }
+
 // function that restores the widget list order from a cookie
 function restoreOrder() {
     $(".column").each(function(index, value) {
         var colid = value.id;
-        var cookieName = "cookie-" + colid
+        var cookieName = "cookie-" + colid;
         var cookie = $.cookie(cookieName);
         if ( cookie == null ) { return; }
         var IDs = cookie.split(",");
@@ -38,38 +39,7 @@ $(function() {
         stop: function() { saveOrder(); }
     });
 
-    restoreOrder();
+    // control the projector view
-
-    if ($.browser.msie) {
-        if ($.browser.version >= 8.0 && $.browser.version < 9.0)
-        {
-            /* scaling bug in IE8.. iframe has to be 4 times bigger */
-            $( "#iframe" ).css('width', 1024 * 4);
-            $( "#iframe" ).css('height', 768 * 4);
-        }
-        $( "#iframe" ).css('zoom', '0.25');
-    }
-
-    $('a.overlay').click(function(event) {
-        event.preventDefault();
-        var link = $(this);
-        $.ajax({
-            type: 'GET',
-            url: $(this).attr('href'),
-            dataType: 'json',
-            success: function(data) {
-                if (data['active']) {
-                    $('#' + data['def_name'] + '_active').show();
-                    $('#' + data['def_name'] + '_inactive').hide();
-                } else {
-                    $('#' + data['def_name'] + '_active').hide();
-                    $('#' + data['def_name'] + '_inactive').show();
-                }
-            },
-        });
-    });
-
-    // control the projector
     $('.projector_edit').click(function(event) {
         event.preventDefault();
         var link = $(this);
@@ -87,7 +57,6 @@ $(function() {
         event.preventDefault();
         var link = $(this);
         var requestData = {};
-
         if (link.attr('id') == "countdown_set") {
             requestData = { "countdown_time" : $( "#countdown_time" ).val() };
         }
@@ -109,7 +78,8 @@ $(function() {
         });
     });
 
-    $('.countdown_visible_link').click(function(event) {
+    // activate/deactivate overlay
+    $('.overlay_activate_link').click(function(event) {
         event.preventDefault();
         var link = $(this);
         $.ajax({
@@ -117,13 +87,13 @@ $(function() {
             url: link.attr('href'),
             dataType: 'json',
             success: function(data) {
-                if (data.countdown_visible == "True") {
+                if (data['active']) {
-                    newclass = 'open';
+                    $('#' + data['def_name'] + '_active').show();
+                    $('#' + data['def_name'] + '_inactive').hide();
                 } else {
-                    newclass = 'closed';
+                    $('#' + data['def_name'] + '_active').hide();
+                    $('#' + data['def_name'] + '_inactive').show();
                 }
-                link.removeClass('closed open').addClass(newclass);
-                link.attr('href', data.link);
             }
         });
     });
@@ -134,4 +104,21 @@ $(function() {
             $('#overlay_message_text').val(data['overlay_message']);
         }
     });
+
+/* 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/
+   TODO: use jquery migrate to have $.browser support for IE8;
+
+    if ($.browser.msie) {
+        if ($.browser.version >= 8.0 && $.browser.version < 9.0)
+        {
+            // scaling bug in IE8.. iframe has to be 4 times bigger
+            $( "#iframe" ).css('width', 1024 * 4);
+            $( "#iframe" ).css('height', 768 * 4);
+        }
+        $( "#iframe" ).css('zoom', '0.25');
+    }
+*/
+
+    restoreOrder();
 });

openslides/projector/static/styles/dashboard.css

@@ -54,9 +54,12 @@
     -moz-border-radius: 0 0 5px 5px;
     -webkit-border-radius: 0 0 5px 5px;
 }
-.widget-content li{
+.widget-content li {
     padding: 4px 0;
 }
+.widget-content .overlay_list li {
+    padding-bottom: 10px;
+}
 .widget-content ul {
     list-style: none inside none;
     margin: 0;
@@ -74,15 +77,13 @@
     visibility: hidden;
 }
 
-/*.projector_countdown_spinval {*/
+.overlay_list .form-inline {
+    margin: 5px 0 0 31px;
+}
 
 #countdown_time {
     width: 40px;
 }
-#overlay_message_text {
-    width: 90%;
-    height: 12px;
-}
 
 /* iframe */
 #iframe {
@@ -95,7 +96,6 @@
     width: 1024px;
     height: 768px;
 }
-
 #iframewrapper {
     width: 256px;/*100%;*/
     height: 192px;/*230px;*/
@@ -103,7 +103,6 @@
     overflow: hidden;
     border: 1px solid #D5D5D5;
 }
-
 #iframeoverlay {
     width: 256px;
     height: 192px;
@@ -113,35 +112,3 @@
     display: block;
     z-index: 1;
 }
-
-/* activate link */
-a.activate_link div {
-    background-image: url(../images/icons/accept-grey.png);
-    background-repeat: no-repeat;
-    float: left;
-    width: 16px;
-    height: 16px;
-    padding-right: 12px;
-    position: relative;
-    top: 4px;
-    left: 4px;
-}
-a.activate_link.active div {
-    background-image: url(../images/icons/accept.png);
-}
-
-a.overlay div {
-    background-image: url(../images/icons/accept-grey.png);
-    background-repeat: no-repeat;
-    float: left;
-    width: 16px;
-    height: 16px;
-    padding-right: 16px;
-    position: relative;
-    top: 4px;
-    left: 4px;
-}
-
-a.overlay.active div {
-    background-image: url(../images/icons/accept.png);
-}

openslides/projector/templates/projector/control_countdown.html

@@ -1,24 +1,21 @@
-{% load staticfiles %}
 {% load i18n %}
 {% load tags %}
 
-<span class="projector_countdown_spinbox">
+<div class="form-inline">
-    <div class="form-inline" style="display:inline-block;">
+    <div class="input-append">
-        <div class="input-append">
+        <input class="projector_countdown_spinval" id="countdown_time" name="countdown_time" type="number" min="0" value="{{ countdown_time }}">
-            <input class="projector_countdown_spinval" id="countdown_time" name="countdown_time" type="number" min="0" value="{{ countdown_time }}">
+        <span class="add-on">{% trans "s" context "seconds" %}</span>
-            <span class="add-on">{% trans "s" context "seconds" %}</span>
-        </div>
-        <a id="countdown_set" class="countdown_control btn btn-small" href="{% url 'countdown_set_default' %}" title="{% trans 'Save time as default' %}">
-            <i class="icon-refresh"></i>
-        </a>
-        <a id="countdown_reset" class="countdown_control btn btn-small" href="{% url 'countdown_reset' %}" title="{% trans 'Reset countdown' %}">
-            <i class="icon-fast-backward"></i>
-        </a>
-        <a id="countdown_play" class="countdown_control btn btn-small" href="{% url 'countdown_start' %}" title="{% trans 'Start countdown' %}"{% if countdown_state == 'active' %} style="display:none"{% endif %}>
-            <i class="icon-play"></i>
-        </a>
-        <a id="countdown_stop" class="countdown_control btn btn-small" href="{% url 'countdown_stop' %}" title="{% trans 'Stop countdown' %}"{% if countdown_state == 'inactive' or countdown_state == 'paused' or countdown_state == 'expired' %} style="display:none"{% endif %}>
-            <i class="icon-pause"></i>
-        </a>
     </div>
-</span>
+    <a id="countdown_set" class="countdown_control btn btn-mini" href="{% url 'countdown_set_default' %}" title="{% trans 'Save time as default' %}">
+        <i class="icon-refresh"></i>
+    </a>
+    <a id="countdown_reset" class="countdown_control btn" href="{% url 'countdown_reset' %}" title="{% trans 'Reset countdown' %}">
+        <i class="icon-fast-backward"></i>
+    </a>
+    <a id="countdown_play" class="countdown_control btn" href="{% url 'countdown_start' %}" title="{% trans 'Start countdown' %}"{% if countdown_state == 'active' %} style="display:none"{% endif %}>
+        <i class="icon-play"></i>
+    </a>
+    <a id="countdown_stop" class="countdown_control btn" href="{% url 'countdown_stop' %}" title="{% trans 'Stop countdown' %}"{% if countdown_state == 'inactive' or countdown_state == 'paused' or countdown_state == 'expired' %} style="display:none"{% endif %}>
+        <i class="icon-pause"></i>
+    </a>
+</div>

openslides/projector/templates/projector/control_overlay_message.html

@@ -1,15 +1,14 @@
-{% load staticfiles %}
 {% load i18n %}
 {% load tags %}
 
-<form id="overlay_message" action="{% url 'projector_overlay_message' %}" method="post" style="display:inline-block;">{% csrf_token %}
+<form class="form-inline" id="overlay_message" action="{% url 'projector_overlay_message' %}" method="post">{% csrf_token %}
-    <div class="input-append">
+    <div class="input-append" style="width: 85%;">
-        <input id="overlay_message_text" name='message_text' type='text' value="{% get_config 'projector_message' %}">
+    <input class="input-block-level" id="overlay_message_text" name='message_text' type='text' value="{% get_config 'projector_message' %}">
-        <button type="submit" class="btn btn-mini btn-primary" name="message" title="{% trans 'Apply' %}">
+    <button type="submit" class="btn btn-primary" name="message" title="{% trans 'Apply' %}" style="width: 16px;">
-            <i class="icon-ok icon-white"></i>
+        <i class="icon-ok icon-white"></i>
-        </button>
+    </button>
-        <button type="submit" class="btn btn-mini" name='message-clean' title="{% trans 'Clean message' %}">
+    <button type="submit" class="btn" name='message-clean' title="{% trans 'Clean message' %}" style="width: 16px;">
-            <i class="icon-remove"></i>
+        <i class="icon-delete"></i>
-        </button>
+    </button>
     </div>
 </form>

openslides/projector/templates/projector/custom_slide_widget.html

@@ -1,4 +1,3 @@
-{% load staticfiles %}
 {% load i18n %}
 {% load tags %}
 

openslides/projector/templates/projector/dashboard.html

@@ -9,9 +9,9 @@
 {% endblock %}
 {% block javascript %}
     <script type="text/javascript" src="{% static 'javascript/jquery-ui.min.js' %}"></script>
-    <script type="text/javascript" src="{% static 'javascript/dashboard.js' %}"></script>
     <script type="text/javascript" src="{% static 'javascript/jquery.cookie.js' %}"></script>
     <script type="text/javascript" src="{% static 'javascript/jquery.form.js' %}"></script>
+    <script type="text/javascript" src="{% static 'javascript/dashboard.js' %}"></script>
 {% endblock %}
 
 {% block content %}

openslides/projector/templates/projector/live_view_widget.html

@@ -1,6 +1,5 @@
 {% load i18n %}
 {% load tags %}
-{% load staticfiles %}
 
 <!-- projector control buttons -->
 {% if perms.projector.can_manage_projector %}

openslides/projector/templates/projector/overlay_widget.html

@@ -1,24 +1,29 @@
 {% load i18n %}
 {% load tags %}
 
-<ul>
+<ul class="overlay_list">
     {% for overlay in overlays %}
         <li>
-            <a id="{{ overlay.def_name }}"
+            <a id="{{ overlay.def_name }}_active"
-              href="{% if overlay.active %}{% url 'projector_overlay_deactivate' overlay.def_name %}{% else %}{% url 'projector_overlay_activate' overlay.def_name %}{% endif %}"
+                href="{% url 'projector_overlay_deactivate' overlay.def_name %}"
-              class="overlay btn btn-mini">
+                class="overlay_activate_link btn btn-mini btn-success"
-                <i class="{% if overlay.active %}icon-checked-new{% else %}icon-unchecked-new{% endif %}"></i>
+                style="{% if not overlay.active %}display:none;{% endif %}">
+                <i class="active icon-checked-new"></i>
+            </a>
+            <a id="{{ overlay.def_name }}_inactive"
+                href="{% url 'projector_overlay_activate' overlay.def_name %}"
+                class="overlay_activate_link btn btn-mini"
+                style="{% if overlay.active %}display:none;{% endif %}">
+                <i class="inactive icon-unchecked-new"></i>
             </a>
-
 
             {# TODO: Call the html via overlay.html #}
             {% if overlay.def_name == "Countdown" %}
-                <p>{{ overlay }}:<br>
+                {% trans "Countdown" %}:<br>
                 {% include 'projector/control_countdown.html' %}
-                </p>
             {% endif %}
             {% if overlay.def_name == "Message" %}
-                {{ overlay }}:<br>
+                {% trans "Message" %}:<br>
                 {% include 'projector/control_overlay_message.html' %}
             {% endif %}
         </li>

openslides/static/styles/base.css

@@ -264,7 +264,7 @@ legend + .control-group {
 
 
 /** More glyphicons free icons **/
-.icon-on, .icon-checked-new {
+.status_link .icon-on, .icon-checked-new {
     background-image: url("../img/glyphicons_152_check.png");
     background-position: 0;
 }
@@ -292,7 +292,10 @@ legend + .control-group {
     background-image: url("../img/glyphicons_358_file_import.png");
     background-position: 0;
 }
-
+.icon-delete {
+    background-image: url("../img/glyphicons_256_delete.png");
+    background-position: 0;
+}
 
 /** Responsive **/
 @media (max-width: 767px) {