2021-12-09 14:44:20 +00:00
|
|
|
<!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">
|
2022-02-25 21:22:57 +00:00
|
|
|
<link rel="shortcut icon" href="../favicon.ico">
|
|
|
|
|
<link rel="stylesheet" href="../assets/css/reset.css">
|
|
|
|
|
<link rel="stylesheet" href="../assets/css/blog.css">
|
|
|
|
|
<link rel="stylesheet" href="../assets/fonts/opensans/opensans.css">
|
|
|
|
|
<title>Milestone: Actor colour theme plugin - GNU social V3</title>
|
2021-12-09 14:44:20 +00:00
|
|
|
</head><body>
|
|
|
|
|
<header>
|
|
|
|
|
<div class="home-menu menu menu-horizontal menu-fixed">
|
2022-02-25 21:22:57 +00:00
|
|
|
<div class="home-menu menu menu-horizontal menu-fixed">
|
|
|
|
|
<a class="header-main" href="/"><img src="../assets/img/gnu-social-logo-invert.svg" alt="GNU social"><b>gnu</b>social</a>
|
2021-12-09 14:44:20 +00:00
|
|
|
<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>
|
|
|
|
|
|
2021-12-09 16:47:22 +00:00
|
|
|
|
2021-12-09 17:11:27 +00:00
|
|
|
|
2021-12-10 16:35:26 +00:00
|
|
|
|
2022-01-18 00:25:29 +00:00
|
|
|
|
|
|
|
|
|
2022-01-18 01:24:35 +00:00
|
|
|
|
2022-01-18 01:39:46 +00:00
|
|
|
|
2022-01-18 01:58:44 +00:00
|
|
|
|
2022-02-25 21:22:57 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2022-01-18 02:03:04 +00:00
|
|
|
|
2022-01-18 02:11:01 +00:00
|
|
|
|
2022-01-18 11:41:14 +00:00
|
|
|
|
2022-01-18 11:42:04 +00:00
|
|
|
|
2022-01-18 12:37:46 +00:00
|
|
|
|
2022-01-18 02:48:24 +00:00
|
|
|
|
|
|
|
|
|
2022-01-18 13:14:26 +00:00
|
|
|
|
2022-01-18 14:15:23 +00:00
|
|
|
|
2022-01-18 15:54:02 +00:00
|
|
|
|
2021-12-09 14:44:20 +00:00
|
|
|
<!-- text end -->
|
|
|
|
|
<!-- entry end -->
|
|
|
|
|
</div>
|
|
|
|
|
</div></div>
|
2022-02-25 21:22:57 +00:00
|
|
|
<footer>
|
|
|
|
|
This site's source is <a href="https://code.undefinedhackers.net/GNUsocial/gnusocial.rocks">hosted here</a>.
|
|
|
|
|
</footer>
|
|
|
|
|
</body></html>
|
