119 lines
4.8 KiB
HTML
119 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86">
|
|
<link rel="shortcut icon" href="/favicon.ico">
|
|
<link rel="stylesheet" href="https://www.gnusocial.rocks//assets/css/reset.css">
|
|
<link rel="stylesheet" href="https://www.gnusocial.rocks//assets/css/blog.css">
|
|
<link rel='stylesheet' type='text/css' href="https://www.gnusocial.rocks//assets/fonts/opensans/opensans.css"><title>Milestone: Actor colour theme plugin - GNU social V3</title>
|
|
</head><body>
|
|
<header>
|
|
<div class="home-menu menu menu-horizontal menu-fixed">
|
|
<a class="menu-heading" href="https://gnusocial.rocks/">
|
|
<img src="../assets/img/gnu-social-logo-invert.svg" alt="GNU social">
|
|
<b>gnu</b>social
|
|
</a>
|
|
</div>
|
|
<div class="sidebar">
|
|
<ul class="menu-list">
|
|
<li class="menu-item menu-selected"><a href="index.html" class="menu-link">Blog Index</a></li>
|
|
<li class="menu-item"><a href="https://code.gnusocial.rocks/" class="menu-link">Repository</a></li>
|
|
<li class="menu-item"><a href="https://coverage.gnusocial.rocks/" class="menu-link">Code Coverage</a></li>
|
|
<li class="menu-item"><a href="https://docs.gnusocial.rocks/" class="menu-link">Documentation</a></li>
|
|
<li class="menu-item"><a href="https://agile.gnusocial.rocks/" class="menu-link">Wiki</a></li>
|
|
<li class="menu-item"><a href="https://kanban.undefinedhackers.net/?controller=BoardViewController&action=readonly&token=d2293e55cabae7cceff9fb496c651328195357d392b9e61a9f229ed6d463" class="menu-link">Roadmap</a></li>
|
|
</ul>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="content-wrapper">
|
|
<div class="content">
|
|
</div></div></div>
|
|
<div id="template-wrapper"><div class="template-unit">
|
|
<!-- entry begin -->
|
|
<h3><a class="ablack" href="milestone-actor-colour-theme-plugin.html">
|
|
Milestone: Actor colour theme plugin
|
|
</a></h3>
|
|
<!-- bashblog_timestamp: #202112091458.35# -->
|
|
<div class="subtitle">December 09, 2021 —
|
|
GNU social development team
|
|
</div>
|
|
<!-- text begin -->
|
|
|
|
<p>Actors are now able to set their own colours, through a brand new plugin: "Oomox".
|
|
Those accustomed to customising their own desktop should know where the name comes from ;)</p>
|
|
|
|
<h2>Here's how it works!</h2>
|
|
|
|
<p>The Oomox plugin main class catches the "PopulateProfileSettingsTabs" event upon visiting user panel.</p>
|
|
|
|
<pre><code>public function onPopulateProfileSettingsTabs(Request $request, array &$tabs): bool
|
|
{
|
|
$tabs[] = [
|
|
'title' => 'Light theme colours',
|
|
'desc' => 'Change the theme colours.',
|
|
'controller' => C\Oomox::oomoxSettingsLight($request),
|
|
];
|
|
|
|
$tabs[] = [
|
|
'title' => 'Dark theme colours',
|
|
'desc' => 'Change the theme colours.',
|
|
'controller' => C\Oomox::oomoxSettingsDark($request),
|
|
];
|
|
|
|
return Event::next;
|
|
}
|
|
</code></pre>
|
|
|
|
<p>As made evident by the code, two new tabs are added to profile settings, light and dark theme colours.
|
|
Since the page styling follows the system theme, actors may want to style each theme differently, therefore they are treated separately.</p>
|
|
|
|
<p>The actor's defined colours are then saved in the respective entity and cached.
|
|
Finally, the colour preferences are used to render the corresponding CSS file which defines the various colour variables used:</p>
|
|
|
|
<pre><code>public function oomoxCSS(): Response
|
|
{
|
|
$user = Common::ensureLoggedIn();
|
|
|
|
$oomox_table = PluginOomox::getEntity($user);
|
|
if (is_null($oomox_table)) {
|
|
throw new ClientException(_m('No custom colours defined', 404));
|
|
}
|
|
|
|
$content = Formatting::twigRenderFile('/oomox/root_override.css.twig', ['oomox' => $oomox_table]);
|
|
return new Response($content, status: 200, headers: ['content-type' => 'text/css']);
|
|
}
|
|
</code></pre>
|
|
|
|
<p>Please note, upon rendering for the first time, page render may be blocked until the resulting file is served. Nonetheless, subsequent page renders
|
|
won't experience the issue again. That is, if the file is cached by the browser.</p>
|
|
|
|
<h2>How it looks</h2>
|
|
|
|
<p>Tabs added using the "PopulateProfileSettingsTabs" event:
|
|
<img src="assets/actor_colour_theme_plugin/settings_change_theme_colours.png" alt="User panel Oomox sections" title="" /></p>
|
|
|
|
<p>Changing the dark theme colours!
|
|
<img src="assets/actor_colour_theme_plugin/settings_change_theme_colours3.png" alt="Dark theme colours selection" title="" /></p>
|
|
|
|
<p>The result of given changes, please note it's no longer a 'dark' theme.
|
|
Given a valid colour, it's the actor's responsibility whether or not the colours make sense. So, go wild!
|
|
<img src="assets/actor_colour_theme_plugin/settings_change_theme_colours4.png" alt="The resulting colours in action!" title="" /></p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- text end -->
|
|
<!-- entry end -->
|
|
</div>
|
|
</div></div>
|
|
<footer class="footer l-box is-center">
|
|
This site's source is
|
|
<a href="https://code.undefinedhackers.net/GNUsocial/gnusocial.rocks">hosted here</a>.
|
|
</footer></body></html>
|