1
0
mirror of https://github.com/e107inc/e107.git synced 2025-04-20 04:32:01 +02:00

Flexpanel layout picker.

This commit is contained in:
lonalore 2016-11-09 16:06:53 +01:00
parent e5b9d71943
commit 93b993bbb1
10 changed files with 336 additions and 161 deletions

View File

@ -592,7 +592,7 @@ if ($e107_popup != 1)
//removed check strpos(e_SELF.'?'.e_QUERY, 'menus.php?configure') === FALSE
// "flexpanel" style uses its own template!!!
if(defset('e_PAGE') == 'admin.php' && varset($pref['adminstyle']) == 'flexpanel')
if(defset('e_PAGE') == 'admin.php' && varset($pref['adminstyle']) == 'flexpanel' && varset($_GET['mode']) != 'customize')
{
parse_admin($ADMIN_HEADER_FLEXPANEL);
}

View File

@ -43,6 +43,21 @@ class adminstyle_flexpanel extends adminstyle_infopanel
$this->iconlist = $this->getIconList();
e107::js('core', 'core/admin.flexpanel.js', 'jquery', 4);
if(varset($_GET['mode']) == 'customize')
{
e107::css('inline', '.layout-container label.radio { float: left; padding: 0; max-width: 100px; margin: 7px; cursor: pointer; text-align: center; }');
e107::css('inline', '.layout-container label.radio input { width: 100%; margin-left: auto; margin-right: auto; display: block; }');
e107::css('inline', '.layout-container label.radio p { width: 100%; text-align: center; display: block; margin: 20px 0 0 0; }');
}
// Save posted Layout type.
if(varset($_POST['e-flexpanel-layout']))
{
global $user_pref;
$user_pref['core-flexpanel-layout'] = $_POST['e-flexpanel-layout'];
save_prefs('user');
}
}
/**
@ -57,6 +72,16 @@ class adminstyle_flexpanel extends adminstyle_infopanel
$pref = e107::getPref();
$frm = e107::getForm();
if(varset($_GET['mode']) == 'customize')
{
echo $frm->open('infopanel', 'post', e_SELF);
echo $ns->tablerender(LAN_DASHBOARD_LAYOUT, $this->renderLayoutPicker(), 'personalize', true);
echo '<div class="clear">&nbsp;</div>';
echo $this->render_infopanel_options(true);
echo $frm->close();
return;
}
global $user_pref;
// Default menu areas.
@ -116,9 +141,7 @@ class adminstyle_flexpanel extends adminstyle_infopanel
);
$user_pref['core-infopanel-mye107'] = vartrue($pref['core-infopanel-default'], $defArray);
}
$tp->parseTemplate("{SETSTYLE=flexpanel}");
$mainPanel = "<div id='core-infopanel_mye107'>";
$mainPanel .= "<div class='left'>";
foreach($this->iconlist as $key => $val)
@ -130,9 +153,7 @@ class adminstyle_flexpanel extends adminstyle_infopanel
}
$mainPanel .= "</div></div>";
// Rendering the saved configuration.
$tp->parseTemplate("{SETSTYLE=flexpanel}");
$caption = $tp->lanVars(LAN_CONTROL_PANEL, ucwords(USERNAME));
$ns->setUniqueId('core-infopanel_mye107');
$coreInfoPanelMyE107 = $ns->tablerender($caption, $mainPanel, "core-infopanel_mye107", true);
@ -145,6 +166,7 @@ class adminstyle_flexpanel extends adminstyle_infopanel
$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['themeFeed'] = array('caption' => LAN_THEMES, 'text' => "<div id='e-adminfeed-theme'></div>");
$tp->parseTemplate("{SETSTYLE=flexpanel}");
$ns->setUniqueId('core-infopanel_news');
$coreInfoPanelNews = $ns->tablerender(LAN_LATEST_e107_NEWS, e107::getForm()->tabs($newsTabs, array('active' => 'coreFeed')), "core-infopanel_news", true);
$info = $this->getMenuPosition('core-infopanel_news');
@ -152,6 +174,7 @@ class adminstyle_flexpanel extends adminstyle_infopanel
// --------------------- Website Status ---------------------------
$tp->parseTemplate("{SETSTYLE=flexpanel}");
$ns->setUniqueId('core-infopanel_website_status');
$coreInfoPanelWebsiteStatus = $ns->tablerender(LAN_WEBSITE_STATUS, $this->renderWebsiteStatus(), "core-infopanel_website_status", true);
$info = $this->getMenuPosition('core-infopanel_website_status');
@ -165,6 +188,7 @@ class adminstyle_flexpanel extends adminstyle_infopanel
// --------------------- User Selected Menus ----------------------
if(varset($user_pref['core-infopanel-menus']))
{
$tp->parseTemplate("{SETSTYLE=flexpanel}");
foreach($user_pref['core-infopanel-menus'] as $val)
{
// Custom menu.
@ -179,148 +203,49 @@ class adminstyle_flexpanel extends adminstyle_infopanel
$id = $frm->name2id($val);
$inc = $tp->parseTemplate("{PLUGIN=$val|TRUE}");
}
$info = $this->getMenuPosition($id);
$panels[$info['area']][$info['weight']] .= $inc;
}
}
ksort($panels['menu-area-01']);
ksort($panels['menu-area-02']);
ksort($panels['menu-area-03']);
ksort($panels['menu-area-04']);
ksort($panels['menu-area-05']);
ksort($panels['menu-area-06']);
ksort($panels['menu-area-07']);
ksort($panels['menu-area-08']);
ksort($panels['menu-area-09']);
ksort($panels['menu-area-10']);
ksort($panels['menu-area-11']);
ksort($panels['menu-area-12']);
ksort($panels['menu-area-13']);
// Sidebar.
echo '<div class="row">';
echo '<div class="col-md-3 col-lg-2" id="left-panel">';
echo '<div class="draggable-panels" id="menu-area-01">';
echo implode("\n", $panels['menu-area-01']);
echo '</div>';
echo '</div>';
echo '<div class="col-md-9 col-lg-10" id="right-panel">';
if(vartrue($_GET['mode']) != 'customize')
// Sorting panels.
foreach($panels as $key => $value)
{
echo '<div class="row">';
echo '<div class="col-sm-12">';
echo $mes->render();
echo '</div>';
echo '</div>';
echo '<div class="row">';
echo '<div class="col-sm-12">';
echo '<div class="draggable-panels" id="menu-area-02">';
echo implode("\n", $panels['menu-area-02']);
echo '</div>';
echo '</div>';
echo '</div>';
echo '<div class="row">';
echo '<div class="col-sm-4">';
echo '<div class="draggable-panels" id="menu-area-03">';
echo implode("\n", $panels['menu-area-03']);
echo '</div>';
echo '</div>';
echo '<div class="col-sm-4">';
echo '<div class="draggable-panels" id="menu-area-04">';
echo implode("\n", $panels['menu-area-04']);
echo '</div>';
echo '</div>';
echo '<div class="col-sm-4">';
echo '<div class="draggable-panels" id="menu-area-05">';
echo implode("\n", $panels['menu-area-05']);
echo '</div>';
echo '</div>';
echo '</div>';
echo '<div class="row">';
echo '<div class="col-sm-12">';
echo '<div class="draggable-panels" id="menu-area-06">';
echo implode("\n", $panels['menu-area-06']);
echo '</div>';
echo '</div>';
echo '</div>';
echo '<div class="row">';
echo '<div class="col-sm-6">';
echo '<div class="draggable-panels" id="menu-area-07">';
echo implode("\n", $panels['menu-area-07']);
echo '</div>';
echo '</div>';
echo '<div class="col-sm-6">';
echo '<div class="draggable-panels" id="menu-area-08">';
echo implode("\n", $panels['menu-area-08']);
echo '</div>';
echo '</div>';
echo '</div>';
echo '<div class="row">';
echo '<div class="col-sm-12">';
echo '<div class="draggable-panels" id="menu-area-09">';
echo implode("\n", $panels['menu-area-09']);
echo '</div>';
echo '</div>';
echo '</div>';
echo '<div class="row">';
echo '<div class="col-sm-4">';
echo '<div class="draggable-panels" id="menu-area-10">';
echo implode("\n", $panels['menu-area-10']);
echo '</div>';
echo '</div>';
echo '<div class="col-sm-4">';
echo '<div class="draggable-panels" id="menu-area-11">';
echo implode("\n", $panels['menu-area-11']);
echo '</div>';
echo '</div>';
echo '<div class="col-sm-4">';
echo '<div class="draggable-panels" id="menu-area-12">';
echo implode("\n", $panels['menu-area-12']);
echo '</div>';
echo '</div>';
echo '</div>';
echo '<div class="row">';
echo '<div class="col-sm-12">';
echo '<div class="draggable-panels" id="menu-area-13">';
echo implode("\n", $panels['menu-area-13']);
echo '</div>';
echo '</div>';
echo '</div>';
}
else
{
echo $frm->open('infopanel', 'post', e_SELF);
echo $this->render_infopanel_options(true);
echo $frm->close();
ksort($panels[$key]);
}
echo '</div>';
echo '</div>';
$layout = varset($user_pref['core-flexpanel-layout'], 'default');
$layout_file = e_ADMIN . 'includes/layouts/flexpanel_' . $layout . '.php';
if(is_readable($layout_file))
{
include_once($layout_file);
$template = varset($FLEXPANEL_LAYOUT);
$template = str_replace('{MESSAGES}', $mes->render(), $template);
foreach($panels as $key => $value)
{
$token = '{' . strtoupper(str_replace('-', '_', $key)) . '}';
$template = str_replace($token, implode("\n", $value), $template);
}
echo $template;
}
}
/**
* Get selected area and position for a menu item.
*
* @param $id
* Menu ID.
* @return array
* Contains menu area and weight.
*/
function getMenuPosition($id)
{
global $user_pref;
if(varset($user_pref['core-flexpanel-order'][$id]))
{
return $user_pref['core-flexpanel-order'][$id];
@ -370,4 +295,38 @@ class adminstyle_flexpanel extends adminstyle_infopanel
return $default;
}
/**
* Render layout-picker widget.
*
* @return string
*/
function renderLayoutPicker()
{
$tp = e107::getParser();
global $user_pref;
$default = varset($user_pref['core-flexpanel-layout'], 'default');
$html = '<div class="layout-container">';
$html .= '<label class="radio">';
$html .= $tp->toImage('{e_ADMIN}includes/layouts/flexpanel_default.png', array('legacy' => '{e_ADMIN}includes/layouts/', 'w' => 100));
$html .= '<input type="radio" name="e-flexpanel-layout" value="default"' . ($default == 'default' ? ' checked' : '') . '/>';
$html .= '<p>Default</p>';
$html .= '</label>';
$html .= '<label class="radio">';
$html .= $tp->toImage('{e_ADMIN}includes/layouts/flexpanel_wider_sidebar.png', array('legacy' => '{e_ADMIN}includes/layouts/', 'w' => 100));
$html .= '<input type="radio" name="e-flexpanel-layout" value="wider_sidebar"' . ($default == 'wider_sidebar' ? ' checked' : '') . '/>';
$html .= '<p>Wider Sidebar</p>';
$html .= '</label>';
$html .= '<div class="clear"></div>';
$html .= '</div>';
return $html;
}
}

View File

@ -594,37 +594,20 @@ class adminstyle_infopanel
function render_infopanel_options($render = false) //TODO LAN
{
// $frm = e107::getSingleton('e_form');
$frm = e107::getForm();
$mes = e107::getMessage();
$ns = e107::getRender();
$start = "<div>
To customize this page, please <a title = 'Customize Admin' href='".e_SELF."?mode=customize&amp;iframe=1' class='e-modal-iframe'>click here</a>.
</div>
";
if($render == false){ return ""; }
$text2 = "<div id='customize_icons' class='forumheader3' style='border:0px;margin:0px'>
<form method='post' id='e-modal-form' action='".e_SELF."'>";
$text2 .= $ns->tablerender(LAN_PERSONALIZE_ICONS, $this->render_infopanel_icons(),'personalize',true);
$text2 = $ns->tablerender(LAN_PERSONALIZE_ICONS, $this->render_infopanel_icons(),'personalize',true);
$text2 .= "<div class='clear'>&nbsp;</div>";
$text2 .= $ns->tablerender(LAN_PERSONALIZE_MENUS, $this->render_infopanel_menu_options(),'personalize',true);
// $text2 .= render_infopanel_icons();
//$text2 .= "<div class='clear'>&nbsp;</div>";
// $text2 .= "<h3>Menus</h3>";
// $text2 .= render_infopanel_menu_options();
$text2 .= "<div class='clear'>&nbsp;</div>";
$text2 .= "<div id='button' class='buttons-bar center'>";
$text2 .= $frm->admin_button('submit-mye107', LAN_SAVE, 'create');
$text2 .= "</div></form>";
// $text2 .= "</div>";
// $end = "</div>";
$text2 .= "</div>";
return $mes->render().$text2;
}

View File

@ -0,0 +1,115 @@
<?php
/**
* @file
* Default layout for "flexpanel" admin dashboard style.
*/
$FLEXPANEL_LAYOUT = '
<div class="row">
<div class="col-md-3 col-lg-2 admin-left-panel">
<div class="draggable-panels" id="menu-area-01">
{MENU_AREA_01}
</div>
</div>
<div class="col-md-9 col-lg-10 admin-right-panel">
<div class="sidebar-toggle">
<a href="#" title="Toggle Sidebar" data-toggle-sidebar="true">&nbsp;</a>
</div>
<div>
<div class="row">
<div class="col-sm-12">
{MESSAGES}
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="draggable-panels" id="menu-area-02">
{MENU_AREA_02}
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="draggable-panels" id="menu-area-03">
{MENU_AREA_03}
</div>
</div>
<div class="col-sm-4">
<div class="draggable-panels" id="menu-area-04">
{MENU_AREA_04}
</div>
</div>
<div class="col-sm-4">
<div class="draggable-panels" id="menu-area-05">
{MENU_AREA_05}
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="draggable-panels" id="menu-area-06">
{MENU_AREA_06}
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="draggable-panels" id="menu-area-07">
{MENU_AREA_07}
</div>
</div>
<div class="col-sm-6">
<div class="draggable-panels" id="menu-area-08">
{MENU_AREA_08}
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="draggable-panels" id="menu-area-09">
{MENU_AREA_09}
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="draggable-panels" id="menu-area-10">
{MENU_AREA_10}
</div>
</div>
<div class="col-sm-4">
<div class="draggable-panels" id="menu-area-11">
{MENU_AREA_11}
</div>
</div>
<div class="col-sm-4">
<div class="draggable-panels" id="menu-area-12">
{MENU_AREA_12}
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="draggable-panels" id="menu-area-13">
{MENU_AREA_13}
</div>
</div>
</div>
</div>
</div>
</div>
';

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

@ -0,0 +1,115 @@
<?php
/**
* @file
* Layout for "flexpanel" admin dashboard style.
*/
$FLEXPANEL_LAYOUT = '
<div class="row">
<div class="col-md-3 col-lg-3 admin-left-panel">
<div class="draggable-panels" id="menu-area-01">
{MENU_AREA_01}
</div>
</div>
<div class="col-md-9 col-lg-9 admin-right-panel">
<div class="sidebar-toggle">
<a href="#" title="Toggle Sidebar" data-toggle-sidebar="true">&nbsp;</a>
</div>
<div>
<div class="row">
<div class="col-sm-12">
{MESSAGES}
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="draggable-panels" id="menu-area-02">
{MENU_AREA_02}
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="draggable-panels" id="menu-area-03">
{MENU_AREA_03}
</div>
</div>
<div class="col-sm-4">
<div class="draggable-panels" id="menu-area-04">
{MENU_AREA_04}
</div>
</div>
<div class="col-sm-4">
<div class="draggable-panels" id="menu-area-05">
{MENU_AREA_05}
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="draggable-panels" id="menu-area-06">
{MENU_AREA_06}
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="draggable-panels" id="menu-area-07">
{MENU_AREA_07}
</div>
</div>
<div class="col-sm-6">
<div class="draggable-panels" id="menu-area-08">
{MENU_AREA_08}
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="draggable-panels" id="menu-area-09">
{MENU_AREA_09}
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="draggable-panels" id="menu-area-10">
{MENU_AREA_10}
</div>
</div>
<div class="col-sm-4">
<div class="draggable-panels" id="menu-area-11">
{MENU_AREA_11}
</div>
</div>
<div class="col-sm-4">
<div class="draggable-panels" id="menu-area-12">
{MENU_AREA_12}
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="draggable-panels" id="menu-area-13">
{MENU_AREA_13}
</div>
</div>
</div>
</div>
</div>
</div>
';

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

@ -455,3 +455,4 @@ define("LAN_PERSONALIZE", "Personalize");
define("LAN_SELECT_COLUMNS_TO_DISPLAY", "Select columns to display");
define("LAN_DISPLAY_COLUMNS", "Display Columns");
define("LAN_SETTINGS_NOT_SAVED_NO_CHANGES_MADE", "Settings not saved as no changes were made.");
define("LAN_DASHBOARD_LAYOUT", "Dashboard Layout");

View File

@ -268,7 +268,7 @@ $ADMIN_HEADER_FLEXPANEL .= '
// TODO - LANs
$ADMIN_HEADER .= '
<div class="col-md-3 col-lg-2" id="left-panel">
<div class="col-md-3 col-lg-2 admin-left-panel">
{SETSTYLE=admin_menu}
{ADMIN_MENU}
@ -293,7 +293,7 @@ $ADMIN_HEADER .= '
{SETSTYLE=default}
</div>
<div class="col-md-9 col-lg-10" id="right-panel">
<div class="col-md-9 col-lg-10 admin-right-panel">
<div class="sidebar-toggle">
<a href="#" title="Toggle Sidebar" data-toggle-sidebar="true">&nbsp;</a>
</div>

View File

@ -155,18 +155,20 @@ $(document).ready(function()
{
e.preventDefault();
var $leftPanel = $("#left-panel");
var $rightPanel = $("#right-panel");
var $leftPanel = $(".admin-left-panel");
var $rightPanel = $(".admin-right-panel");
if ($rightPanel.hasClass('col-md-12'))
{
$rightPanel.toggleClass("col-md-10 col-md-12");
$rightPanel.toggleClass("col-md-9 col-md-12");
$rightPanel.toggleClass("col-lg-10 col-lg-12");
$leftPanel.toggle(1000);
}
else
{
$leftPanel.toggle(1000, function() {
$rightPanel.toggleClass("col-md-10 col-md-12");
$rightPanel.toggleClass("col-md-9 col-md-12");
$rightPanel.toggleClass("col-lg-10 col-lg-12");
});
}