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

This commit is contained in:
Emanuel Schuetze 2013-02-05 11:24:41 +01:00
parent 6db0210ef3
commit 80b0ab5252
10 changed files with 80 additions and 124 deletions

View File

@ -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();
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
// control the projector view
$('.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") {
newclass = 'open';
if (data['active']) {
$('#' + 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();
});

View File

@ -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);
}

View File

@ -1,24 +1,21 @@
{% load staticfiles %}
{% load i18n %}
{% load tags %}
<span class="projector_countdown_spinbox">
<div class="form-inline" style="display:inline-block;">
<div class="input-append">
<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>
</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 class="form-inline">
<div class="input-append">
<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>
</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>

View File

@ -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 %}
<div class="input-append">
<input 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' %}">
<i class="icon-ok icon-white"></i>
</button>
<button type="submit" class="btn btn-mini" name='message-clean' title="{% trans 'Clean message' %}">
<i class="icon-remove"></i>
</button>
<form class="form-inline" id="overlay_message" action="{% url 'projector_overlay_message' %}" method="post">{% csrf_token %}
<div class="input-append" style="width: 85%;">
<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-primary" name="message" title="{% trans 'Apply' %}" style="width: 16px;">
<i class="icon-ok icon-white"></i>
</button>
<button type="submit" class="btn" name='message-clean' title="{% trans 'Clean message' %}" style="width: 16px;">
<i class="icon-delete"></i>
</button>
</div>
</form>

View File

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

View File

@ -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 %}

View File

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

View File

@ -1,24 +1,29 @@
{% load i18n %}
{% load tags %}
<ul>
<ul class="overlay_list">
{% for overlay in overlays %}
<li>
<a id="{{ overlay.def_name }}"
href="{% if overlay.active %}{% url 'projector_overlay_deactivate' overlay.def_name %}{% else %}{% url 'projector_overlay_activate' overlay.def_name %}{% endif %}"
class="overlay btn btn-mini">
<i class="{% if overlay.active %}icon-checked-new{% else %}icon-unchecked-new{% endif %}"></i>
<a id="{{ overlay.def_name }}_active"
href="{% url 'projector_overlay_deactivate' overlay.def_name %}"
class="overlay_activate_link btn btn-mini btn-success"
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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 992 B

View File

@ -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) {