mirror of
https://github.com/e107inc/e107.git
synced 2025-09-03 03:13:34 +02:00
Custom layout for dashboard with 10 droppable areas.
This commit is contained in:
@@ -1176,7 +1176,7 @@ li.rssRow > div {
|
||||
|
||||
.core-mainpanel-link-icon img { margin-bottom: 5px }
|
||||
|
||||
.sidebar-toggle { width: 14px; height:300px; display: block; position: absolute; margin-left: -25px; margin-top:130px }
|
||||
.sidebar-toggle { width: 14px; height:300px; display: block; position: absolute; margin-left: -25px; margin-top:130px; z-index: 1; }
|
||||
.sidebar-toggle a {color:#C6C6C6; height:300px; display:block; width:100%; border-right:7px double #77ACD9; opacity: 0; transition:.5s; z-index:5000; outline:0 }
|
||||
.sidebar-toggle a:hover { opacity: .8; outline:0 }
|
||||
#left-panel.toggled { display: none }
|
||||
@@ -1282,6 +1282,9 @@ li.after-submit:hover { background-color: #337AB7; color:white }
|
||||
#left-panel .panel-title .S24, #left-panel .panel-title img { margin-right:6px; width:24px; height:24px; vertical-align:middle}
|
||||
|
||||
|
||||
/* Dashboard */
|
||||
.draggable-panels .panel-heading { cursor: move; }
|
||||
|
||||
/*
|
||||
|
||||
body { background-color: rgb(68, 68, 68); }
|
||||
|
@@ -260,28 +260,37 @@ $ADMIN_HEADER_DASHBOARD = $ADMIN_HEADER = $ADMIN_MODAL . '
|
||||
|
||||
$ADMIN_HEADER_DASHBOARD .= '
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-12 draggable-panels">
|
||||
{SETSTYLE=admin_menu}
|
||||
{ADMIN_MENU}
|
||||
{ADMIN_PWORD}
|
||||
{ADMIN_MENUMANAGER}
|
||||
|
||||
{SETSTYLE=site_info}
|
||||
{ADMINUI_HELP}
|
||||
{ADMIN_HELP}
|
||||
|
||||
{ADMIN_SITEINFO=creditsonly}
|
||||
{SETSTYLE=admin_menu}
|
||||
{ADMIN_LATEST=infopanel}
|
||||
{ADMIN_STATUS=infopanel}
|
||||
{ADMIN_LOG=request}
|
||||
{ADMIN_MSG=request}
|
||||
{ADMIN_PLUGINS}
|
||||
{SETSTYLE=default}
|
||||
<div class="row">
|
||||
<div class="col-md-2" id="left-panel">
|
||||
<div class="draggable-panels" id="droppable-area-sidebar">
|
||||
{SETSTYLE=admin_menu}
|
||||
{ADMIN_MENU}
|
||||
{ADMIN_PWORD}
|
||||
{ADMIN_MENUMANAGER}
|
||||
|
||||
{SETSTYLE=site_info}
|
||||
{ADMINUI_HELP}
|
||||
{ADMIN_HELP}
|
||||
|
||||
{ADMIN_SITEINFO=creditsonly}
|
||||
{SETSTYLE=admin_menu}
|
||||
{ADMIN_LATEST=infopanel}
|
||||
{ADMIN_STATUS=infopanel}
|
||||
{ADMIN_LOG=request}
|
||||
{ADMIN_MSG=request}
|
||||
{ADMIN_PLUGINS}
|
||||
{SETSTYLE=default}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-10" id="right-panel">
|
||||
<div class="sidebar-toggle">
|
||||
<a href="#" title="Toggle Sidebar" data-toggle-sidebar="true"> </a>
|
||||
</div>
|
||||
<div>
|
||||
';
|
||||
|
||||
$ADMIN_FOOTER_DASHBOARD = '
|
||||
</div>
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
</div><!--/.fluid-container-->
|
||||
|
76
e107_themes/bootstrap3/js/bootstrap3.js
vendored
76
e107_themes/bootstrap3/js/bootstrap3.js
vendored
@@ -4,15 +4,20 @@ var e107 = e107 || {'settings': {}, 'behaviors': {}};
|
||||
{
|
||||
'use strict';
|
||||
|
||||
e107.settings.draggablePanels = {
|
||||
selector: '.draggable-panels',
|
||||
items: '> .panel'
|
||||
};
|
||||
|
||||
/**
|
||||
* Initializes draggable panels on the dashboard.
|
||||
* Behavior to initialize draggable panels on the dashboard.
|
||||
*
|
||||
* @type {{attach: e107.behaviors.adminDashboardDraggablePanels.attach}}
|
||||
*/
|
||||
e107.behaviors.adminDashboardDraggablePanels = {
|
||||
attach: function (context, settings)
|
||||
{
|
||||
var selector = '.draggable-panels';
|
||||
var selector = e107.settings.draggablePanels.selector;
|
||||
var onceKey = 'admin-dashboard-draggable-panels';
|
||||
|
||||
$(context).find(selector).once(onceKey).each(function ()
|
||||
@@ -21,32 +26,69 @@ var e107 = e107 || {'settings': {}, 'behaviors': {}};
|
||||
|
||||
$panel.sortable({
|
||||
connectWith: selector,
|
||||
items: e107.settings.draggablePanels.items,
|
||||
handle: '.panel-heading',
|
||||
accept: e107.settings.draggablePanels.selector,
|
||||
cursor: 'move',
|
||||
placeholder: 'placeholder',
|
||||
placeholder: 'draggable-placeholder',
|
||||
forcePlaceholderSize: true,
|
||||
helper: 'clone',
|
||||
forceHelperSize: true,
|
||||
opacity: 0.4,
|
||||
tolerance: 'pointer',
|
||||
start: function (event, ui)
|
||||
{
|
||||
var $placeholders = $('.draggable-placeholder');
|
||||
var $draggablePanels = $(e107.settings.draggablePanels.selector);
|
||||
|
||||
$placeholders.css('margin', '15px');
|
||||
$placeholders.css('background-color', '#337ab7');
|
||||
|
||||
$draggablePanels.css('min-height', '20px');
|
||||
$draggablePanels.css('border', '1px dashed #CCCCCC');
|
||||
$draggablePanels.css('margin-bottom', '30px');
|
||||
|
||||
$panel.sortable("refreshPositions");
|
||||
},
|
||||
stop: function (event, ui)
|
||||
{
|
||||
var SortOrder = "SortOrder:\n";
|
||||
var i = 0;
|
||||
var $draggablePanels = $(e107.settings.draggablePanels.selector);
|
||||
$draggablePanels.css('min-height', '0');
|
||||
$draggablePanels.css('border', 'none');
|
||||
$draggablePanels.css('margin-bottom', '0');
|
||||
|
||||
$(selector + " .panel-title").each(function ()
|
||||
{
|
||||
i++;
|
||||
var $this = $(this);
|
||||
var title = $this.text();
|
||||
SortOrder += i + " - " + title + "\n";
|
||||
});
|
||||
|
||||
console.log(SortOrder);
|
||||
e107.callbacks.adminDashboardSavePanelOrder();
|
||||
}
|
||||
});
|
||||
|
||||
$panel.disableSelection();
|
||||
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
e107.callbacks.adminDashboardSavePanelOrder = function ()
|
||||
{
|
||||
var selector = e107.settings.draggablePanels.selector;
|
||||
var NewOrder = [];
|
||||
|
||||
$(selector).each(function ()
|
||||
{
|
||||
var $this = $(this);
|
||||
var key = $this.attr('id');
|
||||
|
||||
if(key)
|
||||
{
|
||||
NewOrder[key] = [];
|
||||
|
||||
$('#' + key + ' ' + e107.settings.draggablePanels.items).each(function ()
|
||||
{
|
||||
var $item = $(this);
|
||||
var title = $item.find('.panel-title').eq(0).text();
|
||||
|
||||
NewOrder[key].push(title);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
console.log(NewOrder);
|
||||
}
|
||||
|
||||
})(jQuery);
|
||||
|
Reference in New Issue
Block a user