1
0
mirror of https://github.com/e107inc/e107.git synced 2025-07-31 20:00:37 +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 //removed check strpos(e_SELF.'?'.e_QUERY, 'menus.php?configure') === FALSE
// "flexpanel" style uses its own template!!! // "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); parse_admin($ADMIN_HEADER_FLEXPANEL);
} }

View File

@@ -43,6 +43,21 @@ class adminstyle_flexpanel extends adminstyle_infopanel
$this->iconlist = $this->getIconList(); $this->iconlist = $this->getIconList();
e107::js('core', 'core/admin.flexpanel.js', 'jquery', 4); 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(); $pref = e107::getPref();
$frm = e107::getForm(); $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; global $user_pref;
// Default menu areas. // Default menu areas.
@@ -116,9 +141,7 @@ class adminstyle_flexpanel extends adminstyle_infopanel
); );
$user_pref['core-infopanel-mye107'] = vartrue($pref['core-infopanel-default'], $defArray); $user_pref['core-infopanel-mye107'] = vartrue($pref['core-infopanel-default'], $defArray);
} }
$tp->parseTemplate("{SETSTYLE=flexpanel}"); $tp->parseTemplate("{SETSTYLE=flexpanel}");
$mainPanel = "<div id='core-infopanel_mye107'>"; $mainPanel = "<div id='core-infopanel_mye107'>";
$mainPanel .= "<div class='left'>"; $mainPanel .= "<div class='left'>";
foreach($this->iconlist as $key => $val) foreach($this->iconlist as $key => $val)
@@ -130,9 +153,7 @@ class adminstyle_flexpanel extends adminstyle_infopanel
} }
$mainPanel .= "</div></div>"; $mainPanel .= "</div></div>";
// Rendering the saved configuration. // Rendering the saved configuration.
$tp->parseTemplate("{SETSTYLE=flexpanel}"); $tp->parseTemplate("{SETSTYLE=flexpanel}");
$caption = $tp->lanVars(LAN_CONTROL_PANEL, ucwords(USERNAME)); $caption = $tp->lanVars(LAN_CONTROL_PANEL, ucwords(USERNAME));
$ns->setUniqueId('core-infopanel_mye107'); $ns->setUniqueId('core-infopanel_mye107');
$coreInfoPanelMyE107 = $ns->tablerender($caption, $mainPanel, "core-infopanel_mye107", true); $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['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>");
$tp->parseTemplate("{SETSTYLE=flexpanel}");
$ns->setUniqueId('core-infopanel_news'); $ns->setUniqueId('core-infopanel_news');
$coreInfoPanelNews = $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);
$info = $this->getMenuPosition('core-infopanel_news'); $info = $this->getMenuPosition('core-infopanel_news');
@@ -152,6 +174,7 @@ class adminstyle_flexpanel extends adminstyle_infopanel
// --------------------- Website Status --------------------------- // --------------------- Website Status ---------------------------
$tp->parseTemplate("{SETSTYLE=flexpanel}");
$ns->setUniqueId('core-infopanel_website_status'); $ns->setUniqueId('core-infopanel_website_status');
$coreInfoPanelWebsiteStatus = $ns->tablerender(LAN_WEBSITE_STATUS, $this->renderWebsiteStatus(), "core-infopanel_website_status", true); $coreInfoPanelWebsiteStatus = $ns->tablerender(LAN_WEBSITE_STATUS, $this->renderWebsiteStatus(), "core-infopanel_website_status", true);
$info = $this->getMenuPosition('core-infopanel_website_status'); $info = $this->getMenuPosition('core-infopanel_website_status');
@@ -165,6 +188,7 @@ class adminstyle_flexpanel extends adminstyle_infopanel
// --------------------- User Selected Menus ---------------------- // --------------------- User Selected Menus ----------------------
if(varset($user_pref['core-infopanel-menus'])) if(varset($user_pref['core-infopanel-menus']))
{ {
$tp->parseTemplate("{SETSTYLE=flexpanel}");
foreach($user_pref['core-infopanel-menus'] as $val) foreach($user_pref['core-infopanel-menus'] as $val)
{ {
// Custom menu. // Custom menu.
@@ -179,144 +203,45 @@ class adminstyle_flexpanel extends adminstyle_infopanel
$id = $frm->name2id($val); $id = $frm->name2id($val);
$inc = $tp->parseTemplate("{PLUGIN=$val|TRUE}"); $inc = $tp->parseTemplate("{PLUGIN=$val|TRUE}");
} }
$info = $this->getMenuPosition($id); $info = $this->getMenuPosition($id);
$panels[$info['area']][$info['weight']] .= $inc; $panels[$info['area']][$info['weight']] .= $inc;
} }
} }
ksort($panels['menu-area-01']); // Sorting panels.
ksort($panels['menu-area-02']); foreach($panels as $key => $value)
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')
{ {
echo '<div class="row">'; ksort($panels[$key]);
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
$layout = varset($user_pref['core-flexpanel-layout'], 'default');
$layout_file = e_ADMIN . 'includes/layouts/flexpanel_' . $layout . '.php';
if(is_readable($layout_file))
{ {
echo $frm->open('infopanel', 'post', e_SELF); include_once($layout_file);
echo $this->render_infopanel_options(true);
echo $frm->close(); $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 '</div>'; echo $template;
echo '</div>'; }
} }
/**
* Get selected area and position for a menu item.
*
* @param $id
* Menu ID.
* @return array
* Contains menu area and weight.
*/
function getMenuPosition($id) function getMenuPosition($id)
{ {
global $user_pref; global $user_pref;
@@ -370,4 +295,38 @@ class adminstyle_flexpanel extends adminstyle_infopanel
return $default; 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,36 +594,19 @@ class adminstyle_infopanel
function render_infopanel_options($render = false) //TODO LAN function render_infopanel_options($render = false) //TODO LAN
{ {
// $frm = e107::getSingleton('e_form');
$frm = e107::getForm(); $frm = e107::getForm();
$mes = e107::getMessage(); $mes = e107::getMessage();
$ns = e107::getRender(); $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 ""; } if($render == false){ return ""; }
$text2 = "<div id='customize_icons' class='forumheader3' style='border:0px;margin:0px'> $text2 = $ns->tablerender(LAN_PERSONALIZE_ICONS, $this->render_infopanel_icons(),'personalize',true);
<form method='post' id='e-modal-form' action='".e_SELF."'>";
$text2 .= $ns->tablerender(LAN_PERSONALIZE_ICONS, $this->render_infopanel_icons(),'personalize',true);
$text2 .= "<div class='clear'>&nbsp;</div>"; $text2 .= "<div class='clear'>&nbsp;</div>";
$text2 .= $ns->tablerender(LAN_PERSONALIZE_MENUS, $this->render_infopanel_menu_options(),'personalize',true); $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 class='clear'>&nbsp;</div>";
$text2 .= "<div id='button' class='buttons-bar center'>"; $text2 .= "<div id='button' class='buttons-bar center'>";
$text2 .= $frm->admin_button('submit-mye107', LAN_SAVE, 'create'); $text2 .= $frm->admin_button('submit-mye107', LAN_SAVE, 'create');
$text2 .= "</div></form>"; $text2 .= "</div>";
// $text2 .= "</div>";
// $end = "</div>";
return $mes->render().$text2; 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_SELECT_COLUMNS_TO_DISPLAY", "Select columns to display");
define("LAN_DISPLAY_COLUMNS", "Display Columns"); define("LAN_DISPLAY_COLUMNS", "Display Columns");
define("LAN_SETTINGS_NOT_SAVED_NO_CHANGES_MADE", "Settings not saved as no changes were made."); 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 // TODO - LANs
$ADMIN_HEADER .= ' $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} {SETSTYLE=admin_menu}
{ADMIN_MENU} {ADMIN_MENU}
@@ -293,7 +293,7 @@ $ADMIN_HEADER .= '
{SETSTYLE=default} {SETSTYLE=default}
</div> </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"> <div class="sidebar-toggle">
<a href="#" title="Toggle Sidebar" data-toggle-sidebar="true">&nbsp;</a> <a href="#" title="Toggle Sidebar" data-toggle-sidebar="true">&nbsp;</a>
</div> </div>

View File

@@ -155,18 +155,20 @@ $(document).ready(function()
{ {
e.preventDefault(); e.preventDefault();
var $leftPanel = $("#left-panel"); var $leftPanel = $(".admin-left-panel");
var $rightPanel = $("#right-panel"); var $rightPanel = $(".admin-right-panel");
if ($rightPanel.hasClass('col-md-12')) 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); $leftPanel.toggle(1000);
} }
else else
{ {
$leftPanel.toggle(1000, function() { $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");
}); });
} }