forked from deblan/side_menu
generate default colors using theming colors
This commit is contained in:
parent
506fa22f4b
commit
1cbdca87df
|
@ -27,6 +27,8 @@ use OCP\AppFramework\Http\Response;
|
||||||
use OCP\AppFramework\Http\TemplateResponse;
|
use OCP\AppFramework\Http\TemplateResponse;
|
||||||
use OCP\IRequest;
|
use OCP\IRequest;
|
||||||
use OCP\IUserSession;
|
use OCP\IUserSession;
|
||||||
|
use OCA\Theming\ThemingDefaults;
|
||||||
|
use OCA\SideMenu\Service\Color;
|
||||||
|
|
||||||
class CssController extends Controller
|
class CssController extends Controller
|
||||||
{
|
{
|
||||||
|
@ -40,12 +42,30 @@ class CssController extends Controller
|
||||||
*/
|
*/
|
||||||
protected $user;
|
protected $user;
|
||||||
|
|
||||||
public function __construct(string $appName, IRequest $request, ConfigProxy $config)
|
/**
|
||||||
|
* @var ThemingDefaults
|
||||||
|
*/
|
||||||
|
protected $theming;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @var Color
|
||||||
|
*/
|
||||||
|
protected $color;
|
||||||
|
|
||||||
|
public function __construct(
|
||||||
|
string $appName,
|
||||||
|
IRequest $request,
|
||||||
|
ConfigProxy $config,
|
||||||
|
ThemingDefaults $theming,
|
||||||
|
Color $color
|
||||||
|
)
|
||||||
{
|
{
|
||||||
parent::__construct($appName, $request);
|
parent::__construct($appName, $request);
|
||||||
|
|
||||||
$this->user = OC::$server[IUserSession::class]->getUser();
|
$this->user = OC::$server[IUserSession::class]->getUser();
|
||||||
$this->config = $config;
|
$this->config = $config;
|
||||||
|
$this->theming = $theming;
|
||||||
|
$this->color = $color;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -90,23 +110,29 @@ class CssController extends Controller
|
||||||
|
|
||||||
$isDarkMode = ($isAccessibilityAppEnabled && $isDarkThemeUserEnabled) || ($isBreezeDarkAppEnabled && $isBreezeDarkUserEnabled);
|
$isDarkMode = ($isAccessibilityAppEnabled && $isDarkThemeUserEnabled) || ($isBreezeDarkAppEnabled && $isBreezeDarkUserEnabled);
|
||||||
|
|
||||||
|
$primaryColor = $this->theming->getColorPrimary();
|
||||||
|
$lightenPrimaryColor = $this->color->adjustBrightness($primaryColor, 0.2);
|
||||||
|
$darkenPrimaryColor = $this->color->adjustBrightness($primaryColor, -0.2);
|
||||||
|
$darkenPrimaryColor2 = $this->color->adjustBrightness($primaryColor, -0.3);
|
||||||
|
$textColor = $this->theming->getTextColorPrimary();
|
||||||
|
|
||||||
if ($isDarkMode) {
|
if ($isDarkMode) {
|
||||||
$backgroundColor = $this->config->getAppValue('dark-mode-background-color', '#333333');
|
$backgroundColor = $this->config->getAppValue('dark-mode-background-color', $darkenPrimaryColor);
|
||||||
$backgroundColorTo = $this->config->getAppValue('dark-mode-background-color-to', $backgroundColor);
|
$backgroundColorTo = $this->config->getAppValue('dark-mode-background-color-to', $darkenPrimaryColor);
|
||||||
$currentAppBackgroundColor = $this->config->getAppValue('dark-mode-current-app-background-color', '#444444');
|
$currentAppBackgroundColor = $this->config->getAppValue('dark-mode-current-app-background-color', $darkenPrimaryColor2);
|
||||||
$loaderColor = $this->config->getAppValue('dark-mode-loader-color', '#cccccc');
|
$loaderColor = $this->config->getAppValue('dark-mode-loader-color', $lightenPrimaryColor);
|
||||||
$textColor = $this->config->getAppValue('dark-mode-text-color', '#FFFFFF');
|
$textColor = $this->config->getAppValue('dark-mode-text-color', $textColor);
|
||||||
$iconInvertFilter = abs($this->config->getAppValueInt('dark-mode-icon-invert-filter', '0')).'%';
|
$iconInvertFilter = abs($this->config->getAppValueInt('dark-mode-icon-invert-filter', '0')).'%';
|
||||||
$iconOpacity = abs($this->config->getAppValueInt('dark-mode-icon-opacity', '100') / 100);
|
$iconOpacity = abs($this->config->getAppValueInt('dark-mode-icon-opacity', '100') / 100);
|
||||||
$opener = $this->config->getAppValue('dark-mode-opener', 'side-menu-opener');
|
$opener = $this->config->getAppValue('dark-mode-opener', 'side-menu-opener');
|
||||||
|
|
||||||
$backgroundOpacity = dechex($this->config->getAppValueInt('dark-mode-background-color-opacity', '100') * 255 / 100);
|
$backgroundOpacity = dechex($this->config->getAppValueInt('dark-mode-background-color-opacity', '100') * 255 / 100);
|
||||||
} else {
|
} else {
|
||||||
$backgroundColor = $this->config->getAppValue('background-color', '#333333');
|
$backgroundColor = $this->config->getAppValue('background-color', $darkenPrimaryColor);
|
||||||
$backgroundColorTo = $this->config->getAppValue('background-color-to', $backgroundColor);
|
$backgroundColorTo = $this->config->getAppValue('background-color-to', $darkenPrimaryColor);
|
||||||
$currentAppBackgroundColor = $this->config->getAppValue('current-app-background-color', '#444444');
|
$currentAppBackgroundColor = $this->config->getAppValue('current-app-background-color', $darkenPrimaryColor2);
|
||||||
$loaderColor = $this->config->getAppValue('loader-color', '#0e75ac');
|
$loaderColor = $this->config->getAppValue('loader-color', $lightenPrimaryColor);
|
||||||
$textColor = $this->config->getAppValue('text-color', '#FFFFFF');
|
$textColor = $this->config->getAppValue('text-color', $textColor);
|
||||||
$iconInvertFilter = abs($this->config->getAppValueInt('icon-invert-filter', '0')).'%';
|
$iconInvertFilter = abs($this->config->getAppValueInt('icon-invert-filter', '0')).'%';
|
||||||
$iconOpacity = abs($this->config->getAppValueInt('icon-opacity', '100') / 100);
|
$iconOpacity = abs($this->config->getAppValueInt('icon-opacity', '100') / 100);
|
||||||
$opener = $this->config->getAppValue('opener', 'side-menu-opener');
|
$opener = $this->config->getAppValue('opener', 'side-menu-opener');
|
||||||
|
|
34
lib/Service/Color.php
Normal file
34
lib/Service/Color.php
Normal file
|
@ -0,0 +1,34 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
namespace OCA\SideMenu\Service;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* class Color.
|
||||||
|
*
|
||||||
|
* @author Simon Vieille <simon@deblan.fr>
|
||||||
|
*/
|
||||||
|
class Color
|
||||||
|
{
|
||||||
|
/**
|
||||||
|
* @thanks https://stackoverflow.com/posts/54393956/revision
|
||||||
|
*/
|
||||||
|
public function adjustBrightness(string $hexCode, float $adjustPercent): string
|
||||||
|
{
|
||||||
|
$hexCode = ltrim($hexCode, '#');
|
||||||
|
|
||||||
|
if (3 == strlen($hexCode)) {
|
||||||
|
$hexCode = $hexCode[0].$hexCode[0].$hexCode[1].$hexCode[1].$hexCode[2].$hexCode[2];
|
||||||
|
}
|
||||||
|
|
||||||
|
$hexCode = array_map('hexdec', str_split($hexCode, 2));
|
||||||
|
|
||||||
|
foreach ($hexCode as &$color) {
|
||||||
|
$adjustableLimit = $adjustPercent < 0 ? $color : 255 - $color;
|
||||||
|
$adjustAmount = ceil($adjustableLimit * $adjustPercent);
|
||||||
|
|
||||||
|
$color = str_pad(dechex($color + $adjustAmount), 2, '0', STR_PAD_LEFT);
|
||||||
|
}
|
||||||
|
|
||||||
|
return '#'.implode($hexCode);
|
||||||
|
}
|
||||||
|
}
|
|
@ -26,6 +26,8 @@ use OCP\AppFramework\Http\TemplateResponse;
|
||||||
use OCP\IL10N;
|
use OCP\IL10N;
|
||||||
use OCP\ILogger;
|
use OCP\ILogger;
|
||||||
use OCP\Settings\ISettings;
|
use OCP\Settings\ISettings;
|
||||||
|
use OCA\Theming\ThemingDefaults;
|
||||||
|
use OCA\SideMenu\Service\Color;
|
||||||
|
|
||||||
class Admin implements ISettings
|
class Admin implements ISettings
|
||||||
{
|
{
|
||||||
|
@ -54,18 +56,32 @@ class Admin implements ISettings
|
||||||
*/
|
*/
|
||||||
private $categoryRepository;
|
private $categoryRepository;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @var ThemingDefaults
|
||||||
|
*/
|
||||||
|
protected $theming;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @var Color
|
||||||
|
*/
|
||||||
|
protected $color;
|
||||||
|
|
||||||
public function __construct(
|
public function __construct(
|
||||||
IL10N $l,
|
IL10N $l,
|
||||||
ILogger $logger,
|
ILogger $logger,
|
||||||
ConfigProxy $config,
|
ConfigProxy $config,
|
||||||
AppRepository $appRepository,
|
AppRepository $appRepository,
|
||||||
CategoryRepository $categoryRepository
|
CategoryRepository $categoryRepository,
|
||||||
|
ThemingDefaults $theming,
|
||||||
|
Color $color
|
||||||
) {
|
) {
|
||||||
$this->l = $l;
|
$this->l = $l;
|
||||||
$this->logger = $logger;
|
$this->logger = $logger;
|
||||||
$this->config = $config;
|
$this->config = $config;
|
||||||
$this->appRepository = $appRepository;
|
$this->appRepository = $appRepository;
|
||||||
$this->categoryRepository = $categoryRepository;
|
$this->categoryRepository = $categoryRepository;
|
||||||
|
$this->theming = $theming;
|
||||||
|
$this->color = $color;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -73,29 +89,35 @@ class Admin implements ISettings
|
||||||
*/
|
*/
|
||||||
public function getForm()
|
public function getForm()
|
||||||
{
|
{
|
||||||
$backgroundColor = $this->config->getAppValue('background-color', '#333333');
|
$primaryColor = $this->theming->getColorPrimary();
|
||||||
$backgroundColorTo = $this->config->getAppValue('background-color-to', $backgroundColor);
|
$lightenPrimaryColor = $this->color->adjustBrightness($primaryColor, 0.2);
|
||||||
|
$darkenPrimaryColor = $this->color->adjustBrightness($primaryColor, -0.2);
|
||||||
|
$darkenPrimaryColor2 = $this->color->adjustBrightness($primaryColor, -0.3);
|
||||||
|
$textColor = $this->theming->getTextColorPrimary();
|
||||||
|
|
||||||
$darkModeBackgroundColor = $this->config->getAppValue('dark-mode-background-color', '#333333');
|
$backgroundColor = $this->config->getAppValue('background-color', $darkenPrimaryColor);
|
||||||
$darkModeBackgroundColorTo = $this->config->getAppValue('dark-mode-background-color-to', $darkModeBackgroundColor);
|
$backgroundColorTo = $this->config->getAppValue('background-color-to', $darkenPrimaryColor);
|
||||||
|
|
||||||
|
$darkModeBackgroundColor = $this->config->getAppValue('dark-mode-background-color', $darkenPrimaryColor);
|
||||||
|
$darkModeBackgroundColorTo = $this->config->getAppValue('dark-mode-background-color-to', $darkenPrimaryColor);
|
||||||
|
|
||||||
$parameters = [
|
$parameters = [
|
||||||
'background-color' => $backgroundColor,
|
'background-color' => $backgroundColor,
|
||||||
'background-color-to' => $backgroundColorTo,
|
'background-color-to' => $backgroundColorTo,
|
||||||
'background-color-opacity' => $this->config->getAppValueInt('background-color-opacity', '100'),
|
'background-color-opacity' => $this->config->getAppValueInt('background-color-opacity', '100'),
|
||||||
'current-app-background-color' => $this->config->getAppValue('current-app-background-color', '#444444'),
|
'current-app-background-color' => $this->config->getAppValue('current-app-background-color', $darkenPrimaryColor2),
|
||||||
'loader-color' => $this->config->getAppValue('loader-color', '#0e75ac'),
|
'loader-color' => $this->config->getAppValue('loader-color', $lightenPrimaryColor),
|
||||||
'icon-invert-filter' => $this->config->getAppValueInt('icon-invert-filter', '0'),
|
'icon-invert-filter' => $this->config->getAppValueInt('icon-invert-filter', '0'),
|
||||||
'icon-opacity' => $this->config->getAppValueInt('icon-opacity', '100'),
|
'icon-opacity' => $this->config->getAppValueInt('icon-opacity', '100'),
|
||||||
'text-color' => $this->config->getAppValue('text-color', '#FFFFFF'),
|
'text-color' => $this->config->getAppValue('text-color', $textColor),
|
||||||
'dark-mode-background-color' => $darkModeBackgroundColor,
|
'dark-mode-background-color' => $darkModeBackgroundColor,
|
||||||
'dark-mode-background-color-to' => $darkModeBackgroundColorTo,
|
'dark-mode-background-color-to' => $darkModeBackgroundColorTo,
|
||||||
'dark-mode-background-color-opacity' => $this->config->getAppValueInt('dark-mode-background-color-opacity', '100'),
|
'dark-mode-background-color-opacity' => $this->config->getAppValueInt('dark-mode-background-color-opacity', '100'),
|
||||||
'dark-mode-current-app-background-color' => $this->config->getAppValue('dark-mode-current-app-background-color', '#444444'),
|
'dark-mode-current-app-background-color' => $this->config->getAppValue('dark-mode-current-app-background-color', $darkenPrimaryColor2),
|
||||||
'dark-mode-loader-color' => $this->config->getAppValue('dark-mode-loader-color', '#cccccc'),
|
'dark-mode-loader-color' => $this->config->getAppValue('dark-mode-loader-color', $textColor),
|
||||||
'dark-mode-icon-invert-filter' => $this->config->getAppValueInt('dark-mode-icon-invert-filter', '0'),
|
'dark-mode-icon-invert-filter' => $this->config->getAppValueInt('dark-mode-icon-invert-filter', '0'),
|
||||||
'dark-mode-icon-opacity' => $this->config->getAppValueInt('dark-mode-icon-opacity', '100'),
|
'dark-mode-icon-opacity' => $this->config->getAppValueInt('dark-mode-icon-opacity', '100'),
|
||||||
'dark-mode-text-color' => $this->config->getAppValue('dark-mode-text-color', '#FFFFFF'),
|
'dark-mode-text-color' => $this->config->getAppValue('dark-mode-text-color', $textColor),
|
||||||
'dark-mode-opener' => $this->config->getAppValue('dark-mode-opener', 'side-menu-opener'),
|
'dark-mode-opener' => $this->config->getAppValue('dark-mode-opener', 'side-menu-opener'),
|
||||||
'opener' => $this->config->getAppValue('opener', 'side-menu-opener'),
|
'opener' => $this->config->getAppValue('opener', 'side-menu-opener'),
|
||||||
'loader-enabled' => $this->config->getAppValue('loader-enabled', '1'),
|
'loader-enabled' => $this->config->getAppValue('loader-enabled', '1'),
|
||||||
|
|
Loading…
Reference in a new issue