hyperzlib
/
nodebb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

widgets page first pass

Browse Source
v1.18.x
psychobunny 11 years ago
parent 52229113b6
commit 05ff80b2e0
2 changed files with 101 additions and 85 deletions
Show Stats Download Patch File Download Diff File

12
public/src/forum/admin/extend/widgets.js
Unescape Escape View File

@ -23,9 +23,9 @@ define('forum/admin/extend/widgets', function() {
function prepareWidgets() { function prepareWidgets() {
$('[data-location="drafts"]').insertAfter($('[data-location="drafts"]').closest('.tab-content')); $('[data-location="drafts"]').insertAfter($('[data-location="drafts"]').closest('.tab-content'));
$('#widgets .available-widgets .panel').draggable({ $('#widgets .available-widgets .widget-panel').draggable({
helper: function(e) { helper: function(e) {
return $(e.target).parents('.panel').clone().addClass('block').width($(e.target.parentNode).width()); return $(e.target).parents('.widget-panel').clone().addClass('block').width($(e.target.parentNode).width());
}, },
distance: 10, distance: 10,
connectToSortable: ".widget-area" connectToSortable: ".widget-area"
@ -66,9 +66,9 @@ define('forum/admin/extend/widgets', function() {
}, },
connectWith: "div" connectWith: "div"
}).on('click', '.toggle-widget', function() { }).on('click', '.toggle-widget', function() {
$(this).parents('.panel').children('.panel-body').toggleClass('hidden'); $(this).parents('.widget-panel').children('.panel-body').toggleClass('hidden');
}).on('click', '.delete-widget', function() { }).on('click', '.delete-widget', function() {
var panel = $(this).parents('.panel'); var panel = $(this).parents('.widget-panel');
bootbox.confirm('Are you sure you wish to delete this widget?', function(confirm) { bootbox.confirm('Are you sure you wish to delete this widget?', function(confirm) {
if (confirm) { if (confirm) {
@ -76,7 +76,7 @@ define('forum/admin/extend/widgets', function() {
} }
}); });
}).on('dblclick', '.panel-heading', function() { }).on('dblclick', '.panel-heading', function() {
$(this).parents('.panel').children('.panel-body').toggleClass('hidden'); $(this).parents('.widget-panel').children('.panel-body').toggleClass('hidden');
}); });
$('#widgets .save').on('click', saveWidgets); $('#widgets .save').on('click', saveWidgets);
@ -92,7 +92,7 @@ define('forum/admin/extend/widgets', function() {
area = el.children('.widget-area'), area = el.children('.widget-area'),
widgets = []; widgets = [];
area.find('.panel[data-widget]').each(function() { area.find('.widget-panel[data-widget]').each(function() {
var widgetData = {}, var widgetData = {},
data = $(this).find('form').serializeArray(); data = $(this).find('form').serializeArray();

174
src/views/admin/extend/widgets.tpl
Unescape Escape View File

@ -1,97 +1,113 @@
<div id="widgets"> <div id="widgets">
<h3>Widgets</h3> <div class="col-md-7">
<div class="panel panel-default">
<div class="row"> <div class="panel-heading">Widget Areas</div>
<div class="col-xs-6 pull-right"> <div class="panel-body">
<ul class="nav nav-pills"> <div class="row">
<!-- BEGIN templates --> <ul class="nav nav-pills">
<li class="<!-- IF @first -->active<!-- ENDIF @first -->"><a href="#" data-template="{templates.template}" data-toggle="pill">{templates.template}</a></li> <!-- BEGIN templates -->
<!-- END templates --> <li class="<!-- IF @first -->active<!-- ENDIF @first -->"><a href="#" data-template="{templates.template}" data-toggle="pill">{templates.template}</a></li>
</ul> <!-- END templates -->
</ul>
<div class="tab-content"> <div class="tab-content">
<!-- BEGIN templates --> <!-- BEGIN templates -->
<div class="tab-pane <!-- IF @first -->active<!-- ENDIF @first -->" data-template="{templates.template}"> <div class="tab-pane <!-- IF @first -->active<!-- ENDIF @first -->" data-template="{templates.template}">
<!-- BEGIN areas --> <!-- BEGIN areas -->
<div class="area" data-template="{templates.template}" data-location="{templates.areas.location}"> <div class="area" data-template="{templates.template}" data-location="{templates.areas.location}">
<h4>{templates.areas.name} <small>{templates.template} / {templates.areas.location}</small></h4> <h4>{templates.areas.name} <small>{templates.template} / {templates.areas.location}</small></h4>
<div class="well widget-area"> <div class="well widget-area">
</div>
</div>
<!-- END areas -->
</div> </div>
<!-- END templates -->
</div> </div>
<!-- END areas -->
<button class="btn btn-success save pull-right">Save</button>
</div> </div>
<!-- END templates -->
</div> </div>
<button class="btn btn-success save pull-right">Save</button>
</div> </div>
<div class="col-xs-6 pull-left"> </div>
<div class="available-widgets">
<h4>Available Widgets <small>Drag and drop widgets into templates</small></h4> <div class="col-md-5">
<!-- IF !widgets.length --> <div class="panel panel-default">
<div class="alert alert-info">No widgets found! Activate the essential widgets plugin in the <a href="/admin/plugins">plugins</a> control panel.</div> <div class="panel-heading">Available Widgets</div>
<!-- ENDIF !widgets.length --> <div class="panel-body">
<div class="row"> <div class="available-widgets">
<!-- BEGIN widgets --> <p>Drag and drop widgets into templates</p>
<div class="col-lg-6 col-md-12"> <!-- IF !widgets.length -->
<div data-widget="{widgets.widget}" class="panel panel-default pointer"> <div class="alert alert-info">No widgets found! Activate the essential widgets plugin in the <a href="/admin/plugins">plugins</a> control panel.</div>
<div class="panel-heading"> <!-- ENDIF !widgets.length -->
<strong>{widgets.name}</strong> <div class="row">
<small><br />{widgets.description}</small> <!-- BEGIN widgets -->
</div> <div class="col-lg-3 col-md-12">
<div class="panel-body hidden"> <div data-widget="{widgets.widget}" class="panel widget-panel panel-default pointer">
<form> <div class="panel-heading">
{widgets.content} <strong>{widgets.name}</strong>
</form> <small><br />{widgets.description}</small>
</div>
<div class="panel-body hidden">
<form>
{widgets.content}
</form>
</div>
</div> </div>
</div> </div>
<!-- END widgets -->
</div> </div>
<!-- END widgets -->
</div> </div>
</div> </div>
<hr /> </div>
<div class="available-containers"> <div class="panel panel-default">
<h4>Available Containers <small>Drag and drop on top of any widget</small></h4> <div class="panel-heading">Available Containers</div>
<div class="containers"> <div class="panel-body">
<div class="pointer" style="padding: 20px; border: 1px dotted #dedede; margin-bottom: 20px;" data-container-html=" "> <div class="available-widgets">
None <p>Drag and drop on top of any active widget</p>
</div> <div class="available-containers">
<div class="well pointer" data-container-html='<div class="well">{body}</div>'> <h4>Available Containers <small>Drag and drop on top of any widget</small></h4>
Well <div class="containers">
</div> <div class="pointer" style="padding: 20px; border: 1px dotted #dedede; margin-bottom: 20px;" data-container-html=" ">
<div class="jumbotron pointer" data-container-html='<div class="jumbotron">{body}</div>'> None
Jumbotron </div>
</div> <div class="well pointer" data-container-html='<div class="well">{body}</div>'>
<div class="panel" data-container-html='<div class="panel"><div class="panel-body">{body}</div></div>'> Well
<div class="panel-body pointer"> </div>
Panel <div class="jumbotron pointer" data-container-html='<div class="jumbotron">{body}</div>'>
</div> Jumbotron
</div> </div>
<div class="panel panel-default pointer" data-container-html='<div class="panel panel-default"><div class="panel-heading">{title}</div><div class="panel-body">{body}</div></div>'> <div class="panel" data-container-html='<div class="panel"><div class="panel-body">{body}</div></div>'>
<div class="panel-heading"> <div class="panel-body pointer">
Panel Header Panel
<div class="pull-right color-selector"> </div>
<button data-class="panel-default" class="btn btn-xs">&nbsp;&nbsp;</button> </div>
<button data-class="panel-primary" class="btn btn-xs btn-primary">&nbsp;&nbsp;</button> <div class="panel panel-default pointer" data-container-html='<div class="panel panel-default"><div class="panel-heading">{title}</div><div class="panel-body">{body}</div></div>'>
<button data-class="panel-success" class="btn btn-xs btn-success">&nbsp;&nbsp;</button> <div class="panel-heading">
<button data-class="panel-info" class="btn btn-xs btn-info">&nbsp;&nbsp;</button> Panel Header
<button data-class="panel-warning" class="btn btn-xs btn-warning">&nbsp;&nbsp;</button> <div class="pull-right color-selector">
<button data-class="panel-danger" class="btn btn-xs btn-danger">&nbsp;&nbsp;</button> <button data-class="panel-default" class="btn btn-xs">&nbsp;&nbsp;</button>
<button data-class="panel-primary" class="btn btn-xs btn-primary">&nbsp;&nbsp;</button>
<button data-class="panel-success" class="btn btn-xs btn-success">&nbsp;&nbsp;</button>
<button data-class="panel-info" class="btn btn-xs btn-info">&nbsp;&nbsp;</button>
<button data-class="panel-warning" class="btn btn-xs btn-warning">&nbsp;&nbsp;</button>
<button data-class="panel-danger" class="btn btn-xs btn-danger">&nbsp;&nbsp;</button>
</div>
</div>
<div class="panel-body">
Panel Body
</div>
</div> </div>
</div>
<div class="panel-body">
Panel Body
</div>
</div>
<div class="alert alert-info pointer" data-container-html='<div class="alert alert-info">{body}</div>'> <div class="alert alert-info pointer" data-container-html='<div class="alert alert-info">{body}</div>'>
Alert Alert
<div class="pull-right color-selector"> <div class="pull-right color-selector">
<button data-class="alert-success" class="btn btn-xs btn-success">&nbsp;&nbsp;</button> <button data-class="alert-success" class="btn btn-xs btn-success">&nbsp;&nbsp;</button>
<button data-class="alert-info" class="btn btn-xs btn-info">&nbsp;&nbsp;</button> <button data-class="alert-info" class="btn btn-xs btn-info">&nbsp;&nbsp;</button>
<button data-class="alert-warning" class="btn btn-xs btn-warning">&nbsp;&nbsp;</button> <button data-class="alert-warning" class="btn btn-xs btn-warning">&nbsp;&nbsp;</button>
<button data-class="alert-danger" class="btn btn-xs btn-danger">&nbsp;&nbsp;</button> <button data-class="alert-danger" class="btn btn-xs btn-danger">&nbsp;&nbsp;</button>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save