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

Closes #4748 - Bootstrap5 Theme enhancements. Bootswatch 5.

Browse Source
This commit is contained in:
Cameron
2022-04-05 19:49:08 -07:00
parent 45372f285c
commit 6eff4cb5f7
15 changed files with 152 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
e107_core/templates/header_default.php
View File

@@ -301,9 +301,13 @@ if(defined("PREVIEWTHEME"))
}
else
{
$css_default = "all"; // TODO - default should be defined by the theme
// theme-css.php auto-detection TODO - convert it to constant or anything different from GLOBAL
if (isset($theme_css_php) && $theme_css_php)
$css_default = "all";
if(method_exists('theme', 'css')) // new v2.3.2 theme styles load override.
{
e107::callMethod('theme', 'css');
}
elseif (isset($theme_css_php) && $theme_css_php)
{
//echo "<link rel='stylesheet' href='".THEME_ABS."theme-css.php' type='text/css' />\n";
$e_js->themeCSS('theme-css.php', $css_default);
@@ -352,16 +356,10 @@ $e_js->renderLinks();
// Other CSS - from unknown location, different from core/theme/plugin location or backward compatibility; NOTE - could be removed in the future!!!
//TODO Additional options for 'bootstrap' and 'style' (ie. THEME_STYLE loaded above). Requires changes to js_manager.php
$CSSORDER = deftrue('CSSORDER') ? explode(",",CSSORDER) : array('library', 'other','core','plugin','theme','inline');
/** Experimental - Subject to removal at any time. Use at own risk */
if(method_exists('theme', 'css'))
if(method_exists('theme', 'cssFilter'))
{
$e_js->set('_theme_css_processor', true);
}

4
e107_handlers/e107_class.php
View File

@@ -2652,7 +2652,7 @@ class e107
$jshandler = self::getJs();
$jshandler->setDependency($dep);
if(strpos($data,'http')===0)
if(strpos($data,'http')===0 && ($type !== 'theme'))
{
$type = 'url';
}
@@ -2670,7 +2670,7 @@ class e107
break;
case 'theme':
// data is path relative to current theme
// data is path relative to current theme or URL to load in the 'theme' zone.
$jshandler->themeCSS($data, $media, $preComment, $postComment);
break;

10
e107_handlers/js_manager.php
View File

@@ -1083,7 +1083,7 @@ class e_jsmanager
break;
case 'theme_css':
$file_path = $runtime_location.$this->_sep.'{e_THEME}'.$this->getCurrentTheme().'/'.trim($file_path, '/').$this->_sep.$pre.$this->_sep.$post;
$file_path = $runtime_location.$this->_sep.(strpos($file_path, 'http') !== 0 && strpos($file_path, '//') !== 0 ?'{e_THEME}'.$this->getCurrentTheme().'/'.trim($file_path, '/') : $file_path).$this->_sep.$pre.$this->_sep.$post;
if(!isset($this->_e_css['theme'])) $this->_e_css['theme'] = array();
$registry = &$this->_e_css['theme'];
$runtime = true;
@@ -1291,8 +1291,8 @@ class e_jsmanager
case 'core_css': //e_jslib
if($this->_theme_css_processor)
{
$this->_e_css['core'] = e107::callMethod('theme', 'css', $this->_e_css['core'], 'core');
e107::getMessage()->addDebug('Theme css() method is experimental and is subject to removal at any time. Use at own risk');
$this->_e_css['core'] = e107::callMethod('theme', 'cssFilter', $this->_e_css['core'], 'core');
e107::getMessage()->addDebug('Theme cssFilter() method is experimental and is subject to removal at any time. Use at own risk');
}
$this->renderFile(varset($this->_e_css['core'], array()), $external, 'Core CSS', $mod, false);
unset($this->_e_css['core']);
@@ -1301,7 +1301,7 @@ class e_jsmanager
case 'plugin_css': //e_jslib
if($this->_theme_css_processor)
{
$this->_e_css['plugin'] = e107::callMethod('theme', 'css', $this->_e_css['plugin'], 'plugin');
$this->_e_css['plugin'] = e107::callMethod('theme', 'cssFilter', $this->_e_css['plugin'], 'plugin');
}
$this->renderFile(varset($this->_e_css['plugin'], array()), $external, 'Plugin CSS', $mod, false);
unset($this->_e_css['plugin']);
@@ -1315,7 +1315,7 @@ class e_jsmanager
case 'other_css':
if($this->_theme_css_processor)
{
$this->_e_css['other'] = e107::callMethod('theme', 'css', $this->_e_css['other'], 'other');
$this->_e_css['other'] = e107::callMethod('theme', 'cssFilter', $this->_e_css['other'], 'other');
}
$this->renderFile(varset($this->_e_css['other'], array()), $external, 'Other CSS', $mod, false);
unset($this->_e_css['other']);

88
e107_handlers/theme_handler.php
View File

@@ -166,7 +166,7 @@ class e_theme
/**
* Return an array of theme library or stylesheet values (as defined in theme.xml) that match the desired scope.
* @note New in v2.3.1+
* @param string $type library | stylesheet
* @param string $type library | css
* @param string $scope front | admin | all | auto (as defined in theme.xml)
* @return array
*/
@@ -287,8 +287,7 @@ class e_theme
/**
* Load library dependencies.
*
* @param string $scope
* front | admin | all | auto
* @param string $scope front | admin | all | auto
*/
public function loadLibrary($scope = 'auto')
{
@@ -302,6 +301,8 @@ class e_theme
$loaded = [];
$excludeCSS = (string) $this->cssAttribute('auto', 'exclude'); // current theme style
foreach($libraries as $name => $library)
{
@@ -310,6 +311,11 @@ class e_theme
continue;
}
if($name === $excludeCSS)
{
$library['files'] = 'js'; // load only JS, but not CSS since the style excluded it.
}
if($name === 'bootstrap' && !empty($library['version']))
{
if((int) $library['version'] > 3) // quick fix.
@@ -884,7 +890,7 @@ class e_theme
if(!empty($themeArray[$file]['css']) && count($themeArray[$file]['css']) > 1)
{
$themeArray[$file]['multipleStylesheets'] = true;
}
}
@@ -1348,7 +1354,7 @@ class e_theme
define('THEME_STYLE', $pref['admincss']);
self::initThemeLayout(); // the equivalent for frontend is in header_default.php
}
elseif(!empty($pref['themecss']) && file_exists(THEME.$pref['themecss']))
elseif(!empty($pref['themecss']) && (file_exists(THEME.$pref['themecss']) || strpos($pref['themecss'],'https') === 0))
{
define('THEME_STYLE', $pref['themecss']);
}
@@ -2831,38 +2837,12 @@ class themeHandler
$text .= varset($itext);
// Render skin previews.
if(self::RENDER_ADMINPREFS === $mode)
if($skinText = self::renderSkin($theme, $mode, $pref))
{
$parms = [];
$parms['path'] = e_THEME.$theme['path'].'/';
$parms['block-class'] = 'admin-css-selector col-md-3';
foreach($theme['css'] as $val)
{
$kid = $val['name'];
// $val['description'];
$parms['optArray'][$kid] = array(
'thumbnail' => $val['thumbnail'],
'label' => $val['info']."<br /><small>".$val['description']."</small>",
);
}
$text .= "<tr><td style='vertical-align:top;'><b>".TPVLAN_95.":</b></td>
<td colspan='2' style='vertical-align:top'>
";
$text .= e107::getForm()->radioImage('admincss', vartrue($pref['admincss']), $parms);
$text .= "</td></tr>";
$text .= $skinText;
}
if(array_key_exists("multipleStylesheets", $theme) && $mode && !empty($theme['css']) && self::RENDER_SITEPREFS === $mode)
elseif(!empty($theme['multipleStylesheets']) && $mode && !empty($theme['css']) && self::RENDER_SITEPREFS === $mode)
{
$pLabel = TPVLAN_22;
@@ -3461,8 +3441,48 @@ class themeHandler
}
*/
/**
* @param array $theme
* @param string $mode
* @param mixed $value
* @return array
*/
private static function renderSkin($theme, $mode, $pref)
{
$parms = [];
$parms['path'] = e_THEME . $theme['path'] . '/';
$parms['block-class'] = 'admin-css-selector col-md-3';
foreach($theme['css'] as $val)
{
if(empty($val['thumbnail']))
{
continue;
}
$kid = $val['name'];
// $val['description'];
$parms['optArray'][$kid] = array(
'thumbnail' => $val['thumbnail'],
'label' => $val['info'] . "<br /><small>" . $val['description'] . "</small>",
);
}
if(empty($parms['optArray']))
{
return '';
}
$text = "<tr><td style='vertical-align:top;'><b>" . TPVLAN_95 . ":</b></td>
<td colspan='2' style='vertical-align:top'>
";
$css = ($mode === self::RENDER_ADMINPREFS) ? 'admincss' : 'themecss';
$text .= e107::getForm()->radioImage($css, vartrue($pref[$css]), $parms);
$text .= "</td></tr>";
return $text;
}
}

2
e107_plugins/hero/templates/hero_template.php
View File

@@ -30,7 +30,7 @@ $HERO_TEMPLATE['default']['footer'] = '</div><div class="carousel-controls">
</div>';
$HERO_TEMPLATE['default']['start'] = '<div class="carousel-item item {HERO_SLIDE_ACTIVE}" style="background-image:{HERO_BGIMAGE}">
$HERO_TEMPLATE['default']['start'] = '<div class="carousel-item item {HERO_SLIDE_ACTIVE} bg-dark" style="background-image:{HERO_BGIMAGE}">
<div class="container">
<div class="carousel-caption">

28
e107_tests/tests/unit/e_themeTest.php
View File

@@ -23,7 +23,7 @@ class e_themeTest extends \Codeception\Test\Unit
}
catch(Exception $e)
{
$this->assertTrue(false, "Couldn't load e_theme object");
$this->fail("Couldn't load e_theme object");
}
$this->tm->clearCache();
@@ -31,12 +31,13 @@ class e_themeTest extends \Codeception\Test\Unit
}
/*
public function testCssAttribute()
{
}
public function testCssAttribute()
{
$result = e107::getTheme('bootstrap5')->cssAttribute('front','name');
$this->assertSame('style.css', $result);
}
/*
public function testUpgradeThemeCode()
{
@@ -484,11 +485,18 @@ class e_themeTest extends \Codeception\Test\Unit
{
}
*/
public function testGetThemeInfo()
{
$themeObj = $this->tm;
$data = $themeObj::getThemeInfo('bootstrap3');
$result= !empty($data['stylesheetThumbnails']['admin']);
$this->assertTrue($result);
public function testGetThemeInfo()
{
}*/
$data = $themeObj::getThemeInfo('bootstrap5');
$result= !empty($data['stylesheetThumbnails']['front']);
$this->assertTrue($result);
}
public function testGetThemeLayout()
{

BIN
e107_themes/bootstrap5/images/lux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
e107_themes/bootstrap5/images/quartz.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 162 KiB

BIN
e107_themes/bootstrap5/images/sketchy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
e107_themes/bootstrap5/images/slate.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
e107_themes/bootstrap5/images/superhero.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

12
e107_themes/bootstrap5/style.css
View File

@@ -105,8 +105,18 @@ ul.social-buttons li a {
/* margin-top: 60px;*/
padding: 2rem 1rem;
/* margin-bottom: 2rem;*/
background-color: #e9ecef;
/* background-color: #e9ecef;*/
/* border-radius: .3rem;*/
}
#carousel-hero.carousel {
position: relative;
left: 0;
top: 70px;
width: 100%;
height: 100%;
overflow: hidden;
margin-bottom: 60px;
}
/* CUSTOM Responsive Styles */

30
e107_themes/bootstrap5/theme.php
View File

@@ -10,21 +10,16 @@ if(!defined('e107_INIT'))
class theme implements e_theme_render
{
public function init()
{
e107::lan('theme');
e107::meta('viewport', 'width=device-width, initial-scale=1.0'); // added to <head>
// e107::link('rel="preload" href="{THEME}fonts/myfont.woff2?v=2.2.0" as="font" type="font/woff2" crossorigin'); // added to <head>
//e107::meta('apple-mobile-web-app-capable','yes');
if($bootswatch = e107::pref('theme', 'bootswatch', false))
{
e107::css('url', 'https://bootswatch.com/4/' . $bootswatch . '/bootstrap.min.css');
e107::css('url', 'https://bootswatch.com/4/' . $bootswatch . '/bootstrap.min.css');
}
// e107::link('rel="preload" href="{THEME}fonts/myfont.woff2?v=2.2.0" as="font" type="font/woff2" crossorigin'); // added to <head>
// e107::meta('apple-mobile-web-app-capable','yes');
$login_iframe = e107::pref('theme', 'login_iframe', false);
@@ -36,13 +31,23 @@ if(!defined('e107_INIT'))
}
/**
* Override how THEME_STYLE is loaded. Duplicates will be automatically removed.
* @return void
*/
function css()
{
e107::css('theme', THEME_STYLE);
e107::css('theme', 'style.css'); // always load style.css last.
}
/**
* @param string $text
* @return string without p tags added always with bbcodes
* note: this solves W3C validation issue and CSS style problems
* use this carefully, mainly for custom menus, let decision on theme developers
*/
function remove_ptags($text = '') // FIXME this is a bug in e107 if this is required.
{
@@ -72,6 +77,9 @@ if(!defined('e107_INIT'))
$style = 'splash';
break;
case 'news_months_menu':
$style = 'listgroup';
break;
}
echo "\n<!-- tablestyle initial: style=" . $style . " mode=" . $mode . " UniqueId=" . varset($options['uniqueId']) . " -->\n\n";
@@ -131,7 +139,7 @@ if(!defined('e107_INIT'))
echo '<div class=" mb-4">';
if(!empty($caption))
{
echo '<h5 >' . $caption . '</h5>';
echo '<h5>' . $caption . '</h5>';
}
echo $text;
echo '</div>';

12
e107_themes/bootstrap5/theme.xml
View File

@@ -1,5 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<e107Theme name="Bootstrap 5" version="1.0" date="2021-03-22" compatibility="2.3.1">
<e107Theme name="Bootstrap 5" version="1.1" date="2022-04-05" compatibility="2.3.2">
<author name ="e107 Inc" email="e107inc@something.com" url="https://e107.org" />
<summary>Bootstrap 5 basic theme</summary>
<description>A starter template for bootstrap5 themes.</description>
@@ -10,12 +10,14 @@
<plugin name='rss_menu' url='core' />
<plugin name='social' url='core' />
<plugin name='tinymce4' url='core' />
<plugin name='gsitemap' url='core' />
</plugins>
<keywords>
<word>bootstrap</word>
<word>bootstrap5</word>
<word>clean</word>
<word>wireframe</word>
<word>bootswatch</word>
</keywords>
<libraries>
<library name="bootstrap" version="5" scope="front"/>
@@ -24,7 +26,12 @@
<library name="animate.css" scope="front" />
</libraries>
<stylesheets>
<css file="style.css" name="Default" />
<css file="style.css" name="Default" thumbnail='preview_frontend.png' scope='front' />
<css file="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.1.3/lux/bootstrap.min.css" name="Lux" thumbnail='images/lux.png' scope='front' exclude='bootstrap' />
<css file="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.1.3/sketchy/bootstrap.min.css" name="Sketchy" thumbnail='images/sketchy.png' scope='front' exclude='bootstrap' />
<css file="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.1.3/quartz/bootstrap.min.css" name="Quartz" thumbnail='images/quartz.png' scope='front' exclude='bootstrap' />
<css file="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.1.3/slate/bootstrap.min.css" name="Slate" thumbnail='images/slate.png' scope='front' exclude='bootstrap' />
<css file="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.1.3/superhero/bootstrap.min.css" name="Superhero" thumbnail='images/superhero.png' scope='front' exclude='bootstrap' />
</stylesheets>
<screenshots>
<image>preview_frontend.png</image>
@@ -47,7 +54,6 @@
</layouts>
<themePrefs>
<pref name='cardmenu_look'>1</pref>
<pref name='inlinecss'></pref>
<pref name='login_iframe'></pref>
</themePrefs>
</e107Theme>

47
e107_themes/bootstrap5/theme_config.php
View File

@@ -22,33 +22,36 @@ class theme_config implements e_theme_config
{
// v2.2.2
$bootswatch = array(
"cerulean"=> 'Cerulean',
"cosmo"=> 'Cosmo',
"cyborg"=> 'Cyborg',
"darkly"=> 'Darkly',
"flatly"=> 'Flatly',
"journal"=> 'Journal',
"litera"=> 'Litera',
"lumen"=> 'Lumen',
"lux"=> 'Lux',
"materia"=> 'Materia',
"minty"=> 'Minty',
"pulse"=> 'Pulse',
"sandstone"=> 'Sandstone',
"simplex"=> 'Simplex',
"sketchy"=> 'sketchy',
"slate"=> 'Slate',
"solar"=> 'Solar',
"spacelab"=> 'Spacelab',
"superhero"=> 'Superhero',
"united"=> 'United',
"yeti"=> 'Yeti',
"cerulean" => 'Cerulean',
"cosmo" => 'Cosmo',
"cyborg" => 'Cyborg',
"darkly" => 'Darkly',
"flatly" => 'Flatly',
"journal" => 'Journal',
"litera" => 'Litera',
"lumen" => 'Lumen',
"lux" => 'Lux',
"materia" => 'Materia',
"minty" => 'Minty',
'morph' => 'Morph',
"pulse" => 'Pulse',
'quartz' => 'Quartz',
"sandstone" => 'Sandstone',
"simplex" => 'Simplex',
"sketchy" => 'Sketchy',
"slate" => 'Slate',
"solar" => 'Solar',
"spacelab" => 'Spacelab',
"superhero" => 'Superhero',
"united" => 'United',
"yeti" => 'Yeti',
'zephyr' => 'Zephyr',
);
$previewLink = " <a class='btn btn-default btn-secondary e-modal' data-modal-caption=\"Use the 'Themes' menu to view the selection.\" href='http://bootswatch.com/default/'>".LAN_PREVIEW."</a>";
return array(
'bootswatch' => array('title'=>LAN_THEMEPREF_01, 'type'=>'dropdown', 'writeParms'=>array('optArray'=> $bootswatch, 'post'=>$previewLink, 'default'=>LAN_DEFAULT)),
//'bootswatch' => array('title'=>LAN_THEMEPREF_01, 'type'=>'dropdown', 'writeParms'=>array('optArray'=> $bootswatch, 'post'=>$previewLink, 'default'=>LAN_DEFAULT)),
'cardmenu_look' => array('title' => LAN_THEMEPREF_02, 'type'=>'boolean', 'writeParms'=>array(),'help'=>''),
'login_iframe' => array('title' => LAN_THEMEPREF_03, 'type'=>'boolean', 'writeParms'=>array(),'help'=>''),
);