gnusocial.rocks/v3/milestone-actor-colour-them...

116 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 &mdash;
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 &amp;$tabs): bool
{
$tabs[] = [
'title' =&gt; 'Light theme colours',
'desc' =&gt; 'Change the theme colours.',
'controller' =&gt; C\Oomox::oomoxSettingsLight($request),
];
$tabs[] = [
'title' =&gt; 'Dark theme colours',
'desc' =&gt; 'Change the theme colours.',
'controller' =&gt; 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' =&gt; $oomox_table]);
return new Response($content, status: 200, headers: ['content-type' =&gt; '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>