From 6d96cdbeabbfc4404d6203ba769151e362972a95 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?L=C3=B3na=20Lore?= Date: Fri, 4 Nov 2016 18:06:36 +0100 Subject: [PATCH] Custom layout for dashboard with 10 droppable areas. --- e107_admin/includes/infopanel.php | 265 ++++++++++------------ e107_themes/bootstrap3/admin_style.css | 5 +- e107_themes/bootstrap3/admin_template.php | 47 ++-- e107_themes/bootstrap3/js/bootstrap3.js | 76 +++++-- e107_web/js/core/admin.jquery.js | 18 +- 5 files changed, 220 insertions(+), 191 deletions(-) diff --git a/e107_admin/includes/infopanel.php b/e107_admin/includes/infopanel.php index 3736c2985..541b00b37 100644 --- a/e107_admin/includes/infopanel.php +++ b/e107_admin/includes/infopanel.php @@ -82,53 +82,23 @@ class adminstyle_infopanel $mes = e107::getMessage(); $pref = e107::getPref(); $frm = e107::getForm(); - - - // XXX Check Bootstrap bug is fixed. - /* - echo ' - - '; - */ - //TODO LANs throughout. + $droppableAreaContent1 = ''; + $droppableAreaContent2 = ''; + $droppableAreaContent3 = ''; + $droppableAreaContent4 = ''; + $droppableAreaContent5 = ''; + $droppableAreaContent6 = ''; + $droppableAreaContent7 = ''; + $droppableAreaContent8 = ''; + $droppableAreaContent9 = ''; + $droppableAreaContent10 = ''; + + // TODO LANs throughout. global $style, $user_pref; - // ---------------------- Start Panel -------------------------------- - -// $text = "
"; + // ---------------------- Start Panel ----------------------------- if (getperms('0') && !vartrue($user_pref['core-infopanel-mye107'])) // Set default icons. { $defArray = array ( @@ -147,143 +117,136 @@ class adminstyle_infopanel 12 => 'e-userclass2', 13 => 'e-users', 14 => 'e-wmessage' - ); + ); + $user_pref['core-infopanel-mye107'] = vartrue($pref['core-infopanel-default'],$defArray); - } - - - - // "
"; - + $tp->parseTemplate("{SETSTYLE=core-infopanel}"); - - // Personalized Panel + + // --------------------- Personalized Panel ----------------------- // Rendering the saved configuration. - $mainPanel = " -
- "; - - /* - $mainPanel .= ' - -
- -
    -
  • '.$this->render_infopanel_icons().'
    • -
-
- - '; - - */ - - // print_a($user_pref['core-infopanel-mye107']); - - $mainPanel .= " - - - - - -
"; - - foreach ($this->iconlist as $key=>$val) + $mainPanel = "
"; + $mainPanel .= "
"; + 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'])) - { - $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 .= "
 
"; - $mainPanel .= "
- -
"; + } + $mainPanel .= "
"; $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['coreFeed'] = array('caption'=>LAN_GENERAL,'text'=>"
".LAN_MORE."
"); $newsTabs['pluginFeed'] = array('caption'=>LAN_PLUGIN,'text'=>"
"); $newsTabs['themeFeed'] = array('caption'=>LAN_THEMES,'text'=>"
"); - $text2 = $ns->tablerender(LAN_LATEST_e107_NEWS,e107::getForm()->tabs($newsTabs, array('active'=>'coreFeed')),"core-infopanel_news",true); - - - - - // ---------------------Latest Stuff --------------------------- - - //require_once (e_CORE."shortcodes/batch/admin_shortcodes.php"); - e107::getScBatch('admin'); - + $coreInfoPanelNews = $ns->tablerender(LAN_LATEST_e107_NEWS,e107::getForm()->tabs($newsTabs, array('active'=>'coreFeed')),"core-infopanel_news",true); + $droppableAreaContent2 .= $coreInfoPanelNews; - - $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 .= "
  • - ".$tp->parseTemplate("{ADMIN_LATEST=norender}"). - $tp->parseTemplate("{ADMIN_STATUS=norender}")." -
    • "; - - */ - - - $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 ------------------- - - + // --------------------- Website Status --------------------------- + $coreInfoPanelWebsiteStatus = $ns->tablerender(LAN_WEBSITE_STATUS, $this->renderWebsiteStatus(),"",true); + $droppableAreaContent2 .= $coreInfoPanelWebsiteStatus; + + + // --------------------- Latest Comments -------------------------- + $droppableAreaContent1 .= $this->renderLatestComments(); + + + // --------------------- User Selected Menus ---------------------- if (varset($pref['core-infopanel-menus'])) { foreach ($pref['core-infopanel-menus'] as $val) { $id = $frm->name2id('core-infopanel_'.$val); $inc = $tp->parseTemplate("{PLUGIN=$val|TRUE}"); - $text .= $inc; - // $text .= $ns->tablerender("", $inc, $id,true); + $droppableAreaContent1 .= $inc; } } - - - - - - - - // $text .= "
     
    "; - - $text .= $this->render_infopanel_options(); - - - - // $text .= ""; + + $droppableAreaContent1 .= $this->render_infopanel_options(); if(vartrue($_GET['mode']) != 'customize') { - // $ns->tablerender(ADLAN_47." ".ADMINNAME, $emessage->render().$text); - // echo $mes->render(); // TODO - echo $text; // Control Panel - echo $text2; // Latest e107 News + Website Status + echo '
    '; + echo '
    '; + echo $mes->render(); + echo '
    '; + echo '
    '; + + echo '
    '; + echo '
    '; + echo '
    '; + echo $droppableAreaContent4; + echo '
    '; + echo '
    '; + echo '
    '; + + echo '
    '; + echo '
    '; + echo '
    '; + echo $droppableAreaContent5; + echo '
    '; + echo '
    '; + echo '
    '; + echo '
    '; + echo $droppableAreaContent6; + echo '
    '; + echo '
    '; + echo '
    '; + echo '
    '; + echo $droppableAreaContent7; + echo '
    '; + echo '
    '; + echo '
    '; + + echo '
    '; + echo '
    '; + echo '
    '; + echo $droppableAreaContent1; // Control Panel + echo '
    '; + echo '
    '; + echo '
    '; + echo '
    '; + echo $droppableAreaContent2; // Latest e107 News + echo '
    '; + echo '
    '; + echo '
    '; + + echo '
    '; + echo '
    '; + echo '
    '; + echo $droppableAreaContent8; + echo '
    '; + echo '
    '; + echo '
    '; + echo '
    '; + echo $droppableAreaContent9; + echo '
    '; + echo '
    '; + echo '
    '; + echo '
    '; + echo $droppableAreaContent10; + echo '
    '; + echo '
    '; + echo '
    '; + + echo '
    '; + echo '
    '; + echo '
    '; + echo $droppableAreaContent3; // Website Status + echo '
    '; + echo '
    '; + echo '
    '; } else { diff --git a/e107_themes/bootstrap3/admin_style.css b/e107_themes/bootstrap3/admin_style.css index c18976080..316330fcb 100644 --- a/e107_themes/bootstrap3/admin_style.css +++ b/e107_themes/bootstrap3/admin_style.css @@ -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); } diff --git a/e107_themes/bootstrap3/admin_template.php b/e107_themes/bootstrap3/admin_template.php index e00dac553..d182b2232 100644 --- a/e107_themes/bootstrap3/admin_template.php +++ b/e107_themes/bootstrap3/admin_template.php @@ -260,28 +260,37 @@ $ADMIN_HEADER_DASHBOARD = $ADMIN_HEADER = $ADMIN_MODAL . ' $ADMIN_HEADER_DASHBOARD .= '
    -
    -
    - {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} +
    +
    +
    + {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} +
    +
    +
    +
    +   +
    +
    '; $ADMIN_FOOTER_DASHBOARD = ' +
    diff --git a/e107_themes/bootstrap3/js/bootstrap3.js b/e107_themes/bootstrap3/js/bootstrap3.js index 785189583..72e762a75 100644 --- a/e107_themes/bootstrap3/js/bootstrap3.js +++ b/e107_themes/bootstrap3/js/bootstrap3.js @@ -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); diff --git a/e107_web/js/core/admin.jquery.js b/e107_web/js/core/admin.jquery.js index 8d31869fb..e606a5b59 100644 --- a/e107_web/js/core/admin.jquery.js +++ b/e107_web/js/core/admin.jquery.js @@ -154,9 +154,21 @@ $(document).ready(function() $('a[data-toggle-sidebar]').on('click', function(e) { e.preventDefault(); - - $("#left-panel").toggle(1000); - $("#right-panel").toggleClass("col-md-10 col-md-12"); //XXX Control animation direction? + + var $leftPanel = $("#left-panel"); + 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"); + }); + } });