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() {
$('[data-location="drafts"]').insertAfter($('[data-location="drafts"]').closest('.tab-content'));
$('#widgets .available-widgets .panel').draggable({
$('#widgets .available-widgets .widget-panel').draggable({
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,
connectToSortable: ".widget-area"
@ -66,9 +66,9 @@ define('forum/admin/extend/widgets', function() {
},
connectWith: "div"
}).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() {
var panel = $(this).parents('.panel');
var panel = $(this).parents('.widget-panel');
bootbox.confirm('Are you sure you wish to delete this widget?', function(confirm) {
if (confirm) {
@ -76,7 +76,7 @@ define('forum/admin/extend/widgets', 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);
@ -92,7 +92,7 @@ define('forum/admin/extend/widgets', function() {
area = el.children('.widget-area'),
widgets = [];
area.find('.panel[data-widget]').each(function() {
area.find('.widget-panel[data-widget]').each(function() {
var widgetData = {},
data = $(this).find('form').serializeArray();

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

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

Write Preview
Loading…
Cancel
Save