ag-admin/OpenSlides
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source 
Fixed widget header style issues.
This commit is contained in:
Emanuel Schuetze 2013-06-16 00:44:41 +02:00
parent fd731d68fa
commit 5237e1d90d
6 changed files with 94 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
openslides/projector/static/img/glyphicons_335_pushpin.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 979 B

10
openslides/projector/static/javascript/dashboard.js
View File

@ -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/

38
openslides/projector/static/styles/dashboard.css
View File

@ -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;
display: inline-block;
margin: 7px 0 7px 14px;
font-size: 14px;
color: #555;
line-height: 18px;
}
.widget-header [class^="icon-"], .widget-header [class*=" icon-"] {
display: inline-block;
margin: -2px 0 0 13px;
margin: -2px 5px 0 0px;
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%;*/
height: 192px;/*230px;*/
width: 256px;
height: 192px;
position: relative;
overflow: hidden;
border: 1px solid #D5D5D5;
margin-bottom: 10px;
}
#iframeoverlay {
width: 256px;

41
openslides/projector/templates/projector/dashboard.html
View File

@ -27,11 +27,24 @@
{% if widget.default_column == 1 %}
<div class="widget" id="widget_{{ widget.get_name }}">
<div class="widget-header">
<h3>
<i class="{% if widget %}icon-{{widget.name}}{% else %}icon-star{% endif %}"></i>
<h3>{% trans widget.get_title %}</h3>
<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="widget-content">
{{ widget.html }}
<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 collapse in" id="widgetcontent_{{ widget.get_name }}">
<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>
<h3>{% trans widget.get_title %}<h3>
<div class="widget-header">
<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="widget-content">
{{ widget.html }}
<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 collapse in" id="widgetcontent_{{ widget.get_name }}">
<br>{{ widget.html }}<br>
</div>
</div>
{% endif %}

50
openslides/projector/templates/projector/live_view_widget.html
View File

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

2
tests/account/test_widgets.py
View File

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