Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2025-11-09 07:25:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

added containers; drag on top of widgets to set a custom container

Browse Source
This commit is contained in:
psychobunny
2014-02-20 17:12:56 -05:00
parent 1b557d4141
commit 5acf296ada
2 changed files with 58 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
public/src/forum/admin/themes.js
View File

@@ -135,18 +135,34 @@ define(['forum/admin/settings'], function(Settings) {
}
Themes.prepareWidgets = function() {
$('#widgets .panel').draggable({
$('#widgets .available-widgets .panel').draggable({
helper: function(e) {
return $(e.target).parents('.panel').clone().addClass('block').width($(e.target.parentNode).width());
},
connectToSortable: ".widget-area"
});
$('#widgets .available-containers .containers > [data-container]').draggable({
helper: function(e) {
var target = $(e.target);
target = target.attr('data-container') ? target : target.parents('[data-container]');
return target.clone().addClass('block').width(target.width()).css('opacity', '0.5');
}
});
function appendToggle(el) {
if (!el.hasClass('block')) {
el.addClass('block')
.droppable({
drop: function(event, ui) {
$(this).find('.panel-heading small').html(ui.draggable.attr('data-container'));
},
hoverClass: "panel-info"
})
.children('.panel-heading')
.append('<div class="pull-right pointer"><span class="delete-widget"><i class="fa fa-times-circle"></i></span>&nbsp;<span class="toggle-widget"><i class="fa fa-chevron-down"></i></span></div>');
.append('<div class="pull-right pointer"><span class="delete-widget"><i class="fa fa-times-circle"></i></span>&nbsp;<span class="toggle-widget"><i class="fa fa-chevron-down"></i></span></div>')
.children('small').html('');
}
}

39
public/templates/admin/themes.tpl
View File

@@ -54,9 +54,20 @@
<h3>Widgets</h3>
<div class="row">
<div class="col-xs-6 available-widgets">
<div class="col-xs-6 pull-right">
<!-- BEGIN areas -->
<div class="area">
<h4>{areas.name} <small>{areas.template} / {areas.location}</small> <button data-template="{areas.template}" data-location="{areas.location}" class="btn btn-success btn-xs pull-right">Save</button></h4>
<div class="well widget-area">
</div>
</div>
<!-- END areas -->
</div>
<div class="col-xs-6 pull-left">
<div class="available-widgets">
<h4>Available Widgets</h4>
<div class="well">
<div>
<!-- BEGIN widgets -->
<div data-widget="{widgets.widget}" class="panel panel-default pointer">
<div class="panel-heading">
@@ -72,15 +83,25 @@
</div>
</div>
<div class="col-xs-6">
<!-- BEGIN areas -->
<div class="area">
<h4>{areas.name} <small>{areas.template} / {areas.location}</small> <button data-template="{areas.template}" data-location="{areas.location}" class="btn btn-success btn-xs pull-right">Save</button></h4>
<div class="well widget-area">
<div class="available-containers">
<h4>Available Containers</h4>
<div class="containers">
<div class="pointer" style="padding: 20px; border: 1px dotted #dedede; margin-bottom: 20px;" data-container=" ">
None
</div>
<div class="well pointer" data-container="well">
Well
</div>
<div class="panel panel-default pointer" data-container="panel">
<div class="panel-heading">
Panel Header
</div>
<div class="panel-body">
Panel Body
</div>
</div>
</div>
</div>
<!-- END areas -->
</div>
</div>
</div>