mirror/php-e107
1
0
Fork 0
mirror of https://github.com/e107inc/e107.git synced 2025-08-04 13:47:31 +02:00
Code Issues Releases Wiki Activity

Custom layout for dashboard with 10 droppable areas.

Browse Source
This commit is contained in:
Lóna Lore
2016-11-04 18:06:36 +01:00
parent c8398db04b
commit 6d96cdbeab
5 changed files with 220 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

235
e107_admin/includes/infopanel.php
View File

@@ -83,52 +83,22 @@ class adminstyle_infopanel
$pref = e107::getPref(); $pref = e107::getPref();
$frm = e107::getForm(); $frm = e107::getForm();
$droppableAreaContent1 = '';
$droppableAreaContent2 = '';
$droppableAreaContent3 = '';
$droppableAreaContent4 = '';
$droppableAreaContent5 = '';
$droppableAreaContent6 = '';
$droppableAreaContent7 = '';
$droppableAreaContent8 = '';
$droppableAreaContent9 = '';
$droppableAreaContent10 = '';
// XXX Check Bootstrap bug is fixed.
/*
echo '
<ul class="thumbnails">
<li class="span4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/360x270" alt="">
</a>
</li>
<li class="span4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/360x270" alt="">
</a>
</li>
<li class="span4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/360x270" alt="">
</a>
</li>
<li class="span4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/360x270" alt="">
</a>
</li>
<li class="span4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/360x270" alt="">
</a>
</li>
<li class="span4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/360x270" alt="">
</a>
</li>
</ul>
';
*/
// TODO LANs throughout. // TODO LANs throughout.
global $style, $user_pref; global $style, $user_pref;
// ---------------------- Start Panel -------------------------------- // ---------------------- Start Panel -----------------------------
// $text = "<div >";
if (getperms('0') && !vartrue($user_pref['core-infopanel-mye107'])) // Set default icons. if (getperms('0') && !vartrue($user_pref['core-infopanel-mye107'])) // Set default icons.
{ {
$defArray = array ( $defArray = array (
@@ -148,47 +118,17 @@ class adminstyle_infopanel
13 => 'e-users', 13 => 'e-users',
14 => 'e-wmessage' 14 => 'e-wmessage'
); );
$user_pref['core-infopanel-mye107'] = vartrue($pref['core-infopanel-default'],$defArray); $user_pref['core-infopanel-mye107'] = vartrue($pref['core-infopanel-default'],$defArray);
} }
// "<form method='post' action='".e_SELF."?".e_QUERY."'>";
$tp->parseTemplate("{SETSTYLE=core-infopanel}"); $tp->parseTemplate("{SETSTYLE=core-infopanel}");
// Personalized Panel // --------------------- Personalized Panel -----------------------
// Rendering the saved configuration. // Rendering the saved configuration.
$mainPanel = " $mainPanel = "<div id='core-infopanel_mye107'>";
<div id='core-infopanel_mye107' > $mainPanel .= "<div class='left'>";
";
/*
$mainPanel .= '<span class="pull-right">
<span class="options">
<div class="btn-group">
<a class="dropdown-toggle" data-toggle="dropdown"><i class="icon-cog"></i></a>
<ul class="dropdown-menu black-box-dropdown dropdown-right">
<li>'.$this->render_infopanel_icons().'</li>
</ul>
</div>
</span>
</span>';
*/
// print_a($user_pref['core-infopanel-mye107']);
$mainPanel .= "
<div class='left'>";
foreach ($this->iconlist as $key=>$val) foreach ($this->iconlist as $key=>$val)
{ {
if (!vartrue($user_pref['core-infopanel-mye107']) || in_array($key, $user_pref['core-infopanel-mye107'])) if (!vartrue($user_pref['core-infopanel-mye107']) || in_array($key, $user_pref['core-infopanel-mye107']))
@@ -196,94 +136,117 @@ class adminstyle_infopanel
$mainPanel .= e107::getNav()->renderAdminButton($val['link'], $val['title'], $val['caption'], $val['perms'], $val['icon_32'], "div"); $mainPanel .= e107::getNav()->renderAdminButton($val['link'], $val['title'], $val['caption'], $val['perms'], $val['icon_32'], "div");
} }
} }
$mainPanel .= "</div></div>";
// $mainPanel .= "<div class='clear'>&nbsp;</div>";
$mainPanel .= "</div>
</div>";
$caption = $tp->lanVars(LAN_CONTROL_PANEL, ucwords(USERNAME)); $caption = $tp->lanVars(LAN_CONTROL_PANEL, ucwords(USERNAME));
$text = $ns->tablerender($caption, $mainPanel, "core-infopanel_mye107",true); $coreInfoPanelMyE107 = $ns->tablerender($caption, $mainPanel, "core-infopanel_mye107",true);
$droppableAreaContent1 .= $coreInfoPanelMyE107;
// ------------------------------- e107 News -------------------------------- // --------------------- e107 News --------------------------------
$newsTabs = array(); $newsTabs = array();
$newsTabs['coreFeed'] = array('caption'=>LAN_GENERAL,'text'=>"<div id='e-adminfeed' style='min-height:300px'></div><div class='right'><a rel='external' href='".ADMINFEEDMORE."'>".LAN_MORE."</a></div>"); $newsTabs['coreFeed'] = array('caption'=>LAN_GENERAL,'text'=>"<div id='e-adminfeed' style='min-height:300px'></div><div class='right'><a rel='external' href='".ADMINFEEDMORE."'>".LAN_MORE."</a></div>");
$newsTabs['pluginFeed'] = array('caption'=>LAN_PLUGIN,'text'=>"<div id='e-adminfeed-plugin'></div>"); $newsTabs['pluginFeed'] = array('caption'=>LAN_PLUGIN,'text'=>"<div id='e-adminfeed-plugin'></div>");
$newsTabs['themeFeed'] = array('caption'=>LAN_THEMES,'text'=>"<div id='e-adminfeed-theme'></div>"); $newsTabs['themeFeed'] = array('caption'=>LAN_THEMES,'text'=>"<div id='e-adminfeed-theme'></div>");
$text2 = $ns->tablerender(LAN_LATEST_e107_NEWS,e107::getForm()->tabs($newsTabs, array('active'=>'coreFeed')),"core-infopanel_news",true); $coreInfoPanelNews = $ns->tablerender(LAN_LATEST_e107_NEWS,e107::getForm()->tabs($newsTabs, array('active'=>'coreFeed')),"core-infopanel_news",true);
$droppableAreaContent2 .= $coreInfoPanelNews;
// --------------------- Website Status ---------------------------
$coreInfoPanelWebsiteStatus = $ns->tablerender(LAN_WEBSITE_STATUS, $this->renderWebsiteStatus(),"",true);
$droppableAreaContent2 .= $coreInfoPanelWebsiteStatus;
// ---------------------Latest Stuff --------------------------- // --------------------- Latest Comments --------------------------
$droppableAreaContent1 .= $this->renderLatestComments();
//require_once (e_CORE."shortcodes/batch/admin_shortcodes.php");
e107::getScBatch('admin');
$text2 .= $ns->tablerender(LAN_WEBSITE_STATUS, $this->renderWebsiteStatus(),"",true);
// $text .= $ns->tablerender(ADLAN_LAT_1,$tp->parseTemplate("{ADMIN_LATEST=norender}"),"core-infopanel_latest",true);
// $text .= $ns->tablerender(LAN_STATUS,$tp->parseTemplate("{ADMIN_STATUS=norender}"),"core-infopanel_latest",true);
/*
$text .= "<li class='span6'>
".$tp->parseTemplate("{ADMIN_LATEST=norender}").
$tp->parseTemplate("{ADMIN_STATUS=norender}")."
</div>";
*/
$text .= $this->renderLatestComments();
// ---------------------- Who's Online ------------------------
// TODO Could use a new _menu item instead.
// $text2 .= $ns->tablerender('Visitors Online : '.vartrue($nOnline), $panelOnline,'core-infopanel_online',true);
// --------------------- User Selected Menus -------------------
// --------------------- User Selected Menus ----------------------
if (varset($pref['core-infopanel-menus'])) if (varset($pref['core-infopanel-menus']))
{ {
foreach ($pref['core-infopanel-menus'] as $val) foreach ($pref['core-infopanel-menus'] as $val)
{ {
$id = $frm->name2id('core-infopanel_'.$val); $id = $frm->name2id('core-infopanel_'.$val);
$inc = $tp->parseTemplate("{PLUGIN=$val|TRUE}"); $inc = $tp->parseTemplate("{PLUGIN=$val|TRUE}");
$text .= $inc; $droppableAreaContent1 .= $inc;
// $text .= $ns->tablerender("", $inc, $id,true);
} }
} }
$droppableAreaContent1 .= $this->render_infopanel_options();
// $text .= "<div class='clear'>&nbsp;</div>";
$text .= $this->render_infopanel_options();
// $text .= "</div>";
if(vartrue($_GET['mode']) != 'customize') if(vartrue($_GET['mode']) != 'customize')
{ {
// $ns->tablerender(ADLAN_47." ".ADMINNAME, $emessage->render().$text); echo '<div class="row">';
// echo $mes->render(); // TODO echo '<div class="col-sm-12">';
echo $text; // Control Panel echo $mes->render();
echo $text2; // Latest e107 News + Website Status echo '</div>';
echo '</div>';
echo '<div class="row">';
echo '<div class="col-sm-12">';
echo '<div class="draggable-panels" id="droppable-area-content-4">';
echo $droppableAreaContent4;
echo '</div>';
echo '</div>';
echo '</div>';
echo '<div class="row">';
echo '<div class="col-sm-4">';
echo '<div class="draggable-panels" id="droppable-area-content-5">';
echo $droppableAreaContent5;
echo '</div>';
echo '</div>';
echo '<div class="col-sm-4">';
echo '<div class="draggable-panels" id="droppable-area-content-6">';
echo $droppableAreaContent6;
echo '</div>';
echo '</div>';
echo '<div class="col-sm-4">';
echo '<div class="draggable-panels" id="droppable-area-content-7">';
echo $droppableAreaContent7;
echo '</div>';
echo '</div>';
echo '</div>';
echo '<div class="row">';
echo '<div class="col-sm-6">';
echo '<div class="draggable-panels" id="droppable-area-content-1">';
echo $droppableAreaContent1; // Control Panel
echo '</div>';
echo '</div>';
echo '<div class="col-sm-6">';
echo '<div class="draggable-panels" id="droppable-area-content-2">';
echo $droppableAreaContent2; // Latest e107 News
echo '</div>';
echo '</div>';
echo '</div>';
echo '<div class="row">';
echo '<div class="col-sm-4">';
echo '<div class="draggable-panels" id="droppable-area-content-8">';
echo $droppableAreaContent8;
echo '</div>';
echo '</div>';
echo '<div class="col-sm-4">';
echo '<div class="draggable-panels" id="droppable-area-content-9">';
echo $droppableAreaContent9;
echo '</div>';
echo '</div>';
echo '<div class="col-sm-4">';
echo '<div class="draggable-panels" id="droppable-area-content-10">';
echo $droppableAreaContent10;
echo '</div>';
echo '</div>';
echo '</div>';
echo '<div class="row">';
echo '<div class="col-sm-12">';
echo '<div class="draggable-panels" id="droppable-area-content-3">';
echo $droppableAreaContent3; // Website Status
echo '</div>';
echo '</div>';
echo '</div>';
} }
else else
{ {

5
e107_themes/bootstrap3/admin_style.css
View File

@@ -1176,7 +1176,7 @@ li.rssRow > div {
.core-mainpanel-link-icon img { margin-bottom: 5px } .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 {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 } .sidebar-toggle a:hover { opacity: .8; outline:0 }
#left-panel.toggled { display: none } #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} #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); } body { background-color: rgb(68, 68, 68); }

11
e107_themes/bootstrap3/admin_template.php
View File

@@ -261,7 +261,8 @@ $ADMIN_HEADER_DASHBOARD = $ADMIN_HEADER = $ADMIN_MODAL . '
$ADMIN_HEADER_DASHBOARD .= ' $ADMIN_HEADER_DASHBOARD .= '
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-md-12 draggable-panels"> <div class="col-md-2" id="left-panel">
<div class="draggable-panels" id="droppable-area-sidebar">
{SETSTYLE=admin_menu} {SETSTYLE=admin_menu}
{ADMIN_MENU} {ADMIN_MENU}
{ADMIN_PWORD} {ADMIN_PWORD}
@@ -279,9 +280,17 @@ $ADMIN_HEADER_DASHBOARD .= '
{ADMIN_MSG=request} {ADMIN_MSG=request}
{ADMIN_PLUGINS} {ADMIN_PLUGINS}
{SETSTYLE=default} {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">&nbsp;</a>
</div>
<div>
'; ';
$ADMIN_FOOTER_DASHBOARD = ' $ADMIN_FOOTER_DASHBOARD = '
</div>
</div><!--/span--> </div><!--/span-->
</div><!--/row--> </div><!--/row-->
</div><!--/.fluid-container--> </div><!--/.fluid-container-->

76
e107_themes/bootstrap3/js/bootstrap3.js vendored
View File

@@ -4,15 +4,20 @@ var e107 = e107 || {'settings': {}, 'behaviors': {}};
{ {
'use strict'; '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}} * @type {{attach: e107.behaviors.adminDashboardDraggablePanels.attach}}
*/ */
e107.behaviors.adminDashboardDraggablePanels = { e107.behaviors.adminDashboardDraggablePanels = {
attach: function (context, settings) attach: function (context, settings)
{ {
var selector = '.draggable-panels'; var selector = e107.settings.draggablePanels.selector;
var onceKey = 'admin-dashboard-draggable-panels'; var onceKey = 'admin-dashboard-draggable-panels';
$(context).find(selector).once(onceKey).each(function () $(context).find(selector).once(onceKey).each(function ()
@@ -21,32 +26,69 @@ var e107 = e107 || {'settings': {}, 'behaviors': {}};
$panel.sortable({ $panel.sortable({
connectWith: selector, connectWith: selector,
items: e107.settings.draggablePanels.items,
handle: '.panel-heading', handle: '.panel-heading',
accept: e107.settings.draggablePanels.selector,
cursor: 'move', cursor: 'move',
placeholder: 'placeholder', placeholder: 'draggable-placeholder',
forcePlaceholderSize: true, forcePlaceholderSize: true,
helper: 'clone',
forceHelperSize: true,
opacity: 0.4, 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) stop: function (event, ui)
{ {
var SortOrder = "SortOrder:\n"; var $draggablePanels = $(e107.settings.draggablePanels.selector);
var i = 0; $draggablePanels.css('min-height', '0');
$draggablePanels.css('border', 'none');
$draggablePanels.css('margin-bottom', '0');
$(selector + " .panel-title").each(function () e107.callbacks.adminDashboardSavePanelOrder();
{
i++;
var $this = $(this);
var title = $this.text();
SortOrder += i + " - " + title + "\n";
});
console.log(SortOrder);
} }
}); });
$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); })(jQuery);

16
e107_web/js/core/admin.jquery.js
View File

@@ -155,8 +155,20 @@ $(document).ready(function()
{ {
e.preventDefault(); e.preventDefault();
$("#left-panel").toggle(1000); var $leftPanel = $("#left-panel");
$("#right-panel").toggleClass("col-md-10 col-md-12"); //XXX Control animation direction? var $rightPanel = $("#right-panel");
if ($rightPanel.hasClass('col-md-12'))
{
$rightPanel.toggleClass("col-md-10 col-md-12");
$leftPanel.toggle(1000);
}
else
{
$leftPanel.toggle(1000, function() {
$rightPanel.toggleClass("col-md-10 col-md-12");
});
}
}); });