archive
/
nextcloud
mirror of https://github.com/nextcloud/server.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #34298 from nextcloud/enh/shipped-background-colors

Browse Source 
Use color preset of shipped background as primary color
pull/34438/head
Simon L 2 years ago committed by GitHub
parent 89635e8949 7044191eb6
commit a178d6982d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 131 additions and 77 deletions
Show Stats Download Patch File Download Diff File

21
apps/theming/css/default.css
Unescape Escape View File

@ -1,5 +1,6 @@
:root {
--color-main-background: #ffffff;
--color-main-background-not-plain: #0082c9;
--color-main-background-rgb: 255,255,255;
--color-main-background-translucent: rgba(var(--color-main-background-rgb), .97);
--color-main-background-blur: rgba(var(--color-main-background-rgb), .8);
@ -53,19 +54,19 @@
--background-invert-if-dark: no;
--background-invert-if-bright: invert(100%);
--image-main-background: url('/core/img/app-background.jpg');
--color-primary: #0082c9;
--color-primary: #00639a;
--color-primary-text: #ffffff;
--color-primary-hover: #329bd3;
--color-primary-light: #e5f2f9;
--color-primary-light-text: #003450;
--color-primary-light-hover: #dbe7ee;
--color-primary-hover: #3282ae;
--color-primary-light: #e5eff4;
--color-primary-light-text: #00273d;
--color-primary-light-hover: #dbe4e9;
--color-primary-text-dark: #ededed;
--color-primary-element: #0082c9;
--color-primary-element: #00639a;
--color-primary-element-text: #ffffff;
--color-primary-element-hover: #329bd3;
--color-primary-element-light: #e5f2f9;
--color-primary-element-light-text: #003450;
--color-primary-element-light-hover: #dbe7ee;
--color-primary-element-hover: #3282ae;
--color-primary-element-light: #e5eff4;
--color-primary-element-light-text: #00273d;
--color-primary-element-light-hover: #dbe4e9;
--color-primary-element-text-dark: #ededed;
--gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
}

2
apps/theming/css/settings-admin.css
Unescape Escape View File

@ -89,7 +89,7 @@
margin-top: 10px;
margin-bottom: 20px;
cursor: pointer;
background-color: var(--color-primary);
background-color: var(--color-main-background-not-plain, var(--color-primary));
background-image: var(--image-background, var(--image-background-plain, url("../../../core/img/app-background.jpg"), linear-gradient(40deg, #0082c9 0%, #30b6ff 100%)));
}
#theming #theming-preview #theming-preview-logo {

4
apps/theming/css/settings-admin.scss
Unescape Escape View File

@ -100,7 +100,7 @@
margin-top: 10px;
margin-bottom: 20px;
cursor: pointer;
background-color: var(--color-primary);
background-color: var(--color-main-background-not-plain, var(--color-primary));
background-image: var(--image-background, var(--image-background-plain, url('../../../core/img/app-background.jpg'), linear-gradient(40deg, #0082c9 0%, #30b6ff 100%)));
#theming-preview-logo {
@ -145,4 +145,4 @@
svg, img {
transition: 500ms filter linear;
}
}
}

5
apps/theming/lib/Service/BackgroundService.php
Unescape Escape View File

@ -44,6 +44,8 @@ use OCP\PreConditionNotMetException;
class BackgroundService {
// true when the background is bright and need dark icons
public const THEMING_MODE_DARK = 'dark';
public const DEFAULT_COLOR = '#0082c9';
public const DEFAULT_ACCESSIBLE_COLOR = '#00639a';
public const SHIPPED_BACKGROUNDS = [
'anatoly-mikhaltsov-butterfly-wing-scale.jpg' => [
@ -90,8 +92,7 @@ class BackgroundService {
'kamil-porembinski-clouds.jpg' => [
'attribution' => 'Clouds (Kamil Porembiński, CC BY-SA)',
'attribution_url' => 'https://www.flickr.com/photos/paszczak000/8715851521/',
// Originally #0082c9 but adjusted for accessibility
'primary_color' => '#00639a',
'primary_color' => self::DEFAULT_COLOR,
],
'bernard-spragg-new-zealand-fern.jpg' => [
'attribution' => 'New zealand fern (Bernard Spragg, CC0)',

19
apps/theming/lib/Themes/DefaultTheme.php
Unescape Escape View File

@ -27,6 +27,7 @@ namespace OCA\Theming\Themes;
use OCA\Theming\AppInfo\Application;
use OCA\Theming\ImageManager;
use OCA\Theming\ITheme;
use OCA\Theming\Service\BackgroundService;
use OCA\Theming\ThemingDefaults;
use OCA\Theming\Util;
use OCP\App\IAppManager;
@ -41,6 +42,7 @@ class DefaultTheme implements ITheme {
public Util $util;
public ThemingDefaults $themingDefaults;
public IUserSession $userSession;
public IURLGenerator $urlGenerator;
public ImageManager $imageManager;
public IConfig $config;
@ -50,18 +52,22 @@ class DefaultTheme implements ITheme {
public function __construct(Util $util,
ThemingDefaults $themingDefaults,
IUserSession $userSession,
IURLGenerator $urlGenerator,
ImageManager $imageManager,
IConfig $config,
IL10N $l) {
$this->util = $util;
$this->themingDefaults = $themingDefaults;
$this->userSession = $userSession;
$this->urlGenerator = $urlGenerator;
$this->imageManager = $imageManager;
$this->config = $config;
$this->l = $l;
$this->primaryColor = $this->themingDefaults->getColorPrimary();
$initialPrimaryColor = $this->themingDefaults->getColorPrimary();
// Override default color if set to improve accessibility
$this->primaryColor = $initialPrimaryColor === BackgroundService::DEFAULT_COLOR ? BackgroundService::DEFAULT_ACCESSIBLE_COLOR : $initialPrimaryColor;
}
public function getId(): string {
@ -101,6 +107,7 @@ class DefaultTheme implements ITheme {
$variables = [
'--color-main-background' => $colorMainBackground,
'--color-main-background-not-plain' => $this->themingDefaults->getColorPrimary(),
'--color-main-background-rgb' => $colorMainBackgroundRGB,
'--color-main-background-translucent' => 'rgba(var(--color-main-background-rgb), .97)',
'--color-main-background-blur' => 'rgba(var(--color-main-background-rgb), .8)',
@ -221,21 +228,17 @@ class DefaultTheme implements ITheme {
}
$appManager = Server::get(IAppManager::class);
$userSession = Server::get(IUserSession::class);
$user = $userSession->getUser();
$user = $this->userSession->getUser();
if ($appManager->isEnabledForUser(Application::APP_ID) && $user !== null) {
$themingBackground = $this->config->getUserValue($user->getUID(), Application::APP_ID, 'background', 'default');
if ($themingBackground === 'custom') {
// Custom
$variables['--image-main-background'] = "url('" . $this->urlGenerator->linkToRouteAbsolute('theming.userTheme.getBackground') . "')";
} elseif ($themingBackground !== 'default' && substr($themingBackground, 0, 1) !== '#') {
// Shipped background
} elseif (isset(BackgroundService::SHIPPED_BACKGROUNDS[$themingBackground])) {
$variables['--image-main-background'] = "url('" . $this->urlGenerator->linkTo(Application::APP_ID, "/img/background/$themingBackground") . "')";
} elseif (substr($themingBackground, 0, 1) === '#') {
// Color
unset($variables['--image-main-background']);
$variables['--color-main-background-plain'] = $this->primaryColor;
$variables['--color-main-background-plain'] = $this->themingDefaults->getColorPrimary();
}
}

83
apps/theming/lib/ThemingDefaults.php
Unescape Escape View File

@ -40,6 +40,8 @@
*/
namespace OCA\Theming;
use OCA\Theming\AppInfo\Application;
use OCA\Theming\Service\BackgroundService;
use OCP\App\AppPathNotFoundException;
use OCP\App\IAppManager;
use OCP\Files\NotFoundException;
@ -49,47 +51,31 @@ use OCP\IConfig;
use OCP\IL10N;
use OCP\INavigationManager;
use OCP\IURLGenerator;
use OCP\IUserSession;
class ThemingDefaults extends \OC_Defaults {
/** @var IConfig */
private $config;
/** @var IL10N */
private $l;
/** @var ImageManager */
private $imageManager;
/** @var IURLGenerator */
private $urlGenerator;
/** @var ICacheFactory */
private $cacheFactory;
/** @var Util */
private $util;
/** @var IAppManager */
private $appManager;
/** @var INavigationManager */
private $navigationManager;
/** @var string */
private $name;
/** @var string */
private $title;
/** @var string */
private $entity;
/** @var string */
private $productName;
/** @var string */
private $url;
/** @var string */
private $color;
/** @var string */
private $iTunesAppId;
/** @var string */
private $iOSClientUrl;
/** @var string */
private $AndroidClientUrl;
/** @var string */
private $FDroidClientUrl;
private IConfig $config;
private IL10N $l;
private ImageManager $imageManager;
private IUserSession $userSession;
private IURLGenerator $urlGenerator;
private ICacheFactory $cacheFactory;
private Util $util;
private IAppManager $appManager;
private INavigationManager $navigationManager;
private string $name;
private string $title;
private string $entity;
private string $productName;
private string $url;
private string $color;
private string $iTunesAppId;
private string $iOSClientUrl;
private string $AndroidClientUrl;
private string $FDroidClientUrl;
/**
* ThemingDefaults constructor.
@ -97,6 +83,7 @@ class ThemingDefaults extends \OC_Defaults {
* @param IConfig $config
* @param IL10N $l
* @param ImageManager $imageManager
* @param IUserSession $userSession
* @param IURLGenerator $urlGenerator
* @param ICacheFactory $cacheFactory
* @param Util $util
@ -104,6 +91,7 @@ class ThemingDefaults extends \OC_Defaults {
*/
public function __construct(IConfig $config,
IL10N $l,
IUserSession $userSession,
IURLGenerator $urlGenerator,
ICacheFactory $cacheFactory,
Util $util,
@ -115,6 +103,7 @@ class ThemingDefaults extends \OC_Defaults {
$this->config = $config;
$this->l = $l;
$this->imageManager = $imageManager;
$this->userSession = $userSession;
$this->urlGenerator = $urlGenerator;
$this->cacheFactory = $cacheFactory;
$this->util = $util;
@ -229,10 +218,24 @@ class ThemingDefaults extends \OC_Defaults {
* @return string
*/
public function getColorPrimary() {
$color = $this->config->getAppValue('theming', 'color', $this->color);
$user = $this->userSession->getUser();
$color = $this->config->getAppValue(Application::APP_ID, 'color', '');
if ($color === '' && !empty($user)) {
$themingBackground = $this->config->getUserValue($user->getUID(), Application::APP_ID, 'background', 'default');
if ($themingBackground === 'default') {
$this->increaseCacheBuster();
return BackgroundService::DEFAULT_COLOR;
} else if (isset(BackgroundService::SHIPPED_BACKGROUNDS[$themingBackground]['primary_color'])) {
$this->increaseCacheBuster();
return BackgroundService::SHIPPED_BACKGROUNDS[$themingBackground]['primary_color'];
}
}
if (!preg_match('/^\#([0-9a-f]{3}|[0-9a-f]{6})$/i', $color)) {
$color = '#0082c9';
return BackgroundService::DEFAULT_COLOR;
}
return $color;
}

2
apps/theming/src/components/BackgroundSettings.vue
Unescape Escape View File

@ -171,7 +171,7 @@ export default {
}
&.color {
background-color: var(--color-primary);
background-color: var(--color-main-background-not-plain, var(--color-primary));
color: var(--color-primary-text);
}

10
apps/theming/tests/Service/ThemesServiceTest.php
Unescape Escape View File

@ -156,7 +156,7 @@ class ThemesServiceTest extends TestCase {
->method('getUserValue')
->with('user', Application::APP_ID, 'enabled-themes', '[]')
->willReturn(json_encode($enabledThemes));
$this->assertEquals($expectedEnabled, $this->themesService->disableTheme($this->themes[$toDisable]));
}
@ -190,7 +190,7 @@ class ThemesServiceTest extends TestCase {
->method('getUserValue')
->with('user', Application::APP_ID, 'enabled-themes', '[]')
->willReturn(json_encode($enabledThemes));
$this->assertEquals($expected, $this->themesService->isEnabled($this->themes[$themeId]));
}
@ -281,6 +281,7 @@ class ThemesServiceTest extends TestCase {
'default' => new DefaultTheme(
$util,
$this->themingDefaults,
$this->userSession,
$urlGenerator,
$imageManager,
$this->config,
@ -289,6 +290,7 @@ class ThemesServiceTest extends TestCase {
'light' => new LightTheme(
$util,
$this->themingDefaults,
$this->userSession,
$urlGenerator,
$imageManager,
$this->config,
@ -297,6 +299,7 @@ class ThemesServiceTest extends TestCase {
'dark' => new DarkTheme(
$util,
$this->themingDefaults,
$this->userSession,
$urlGenerator,
$imageManager,
$this->config,
@ -305,6 +308,7 @@ class ThemesServiceTest extends TestCase {
'light-highcontrast' => new HighContrastTheme(
$util,
$this->themingDefaults,
$this->userSession,
$urlGenerator,
$imageManager,
$this->config,
@ -313,6 +317,7 @@ class ThemesServiceTest extends TestCase {
'dark-highcontrast' => new DarkHighContrastTheme(
$util,
$this->themingDefaults,
$this->userSession,
$urlGenerator,
$imageManager,
$this->config,
@ -321,6 +326,7 @@ class ThemesServiceTest extends TestCase {
'opendyslexic' => new DyslexiaFont(
$util,
$this->themingDefaults,
$this->userSession,
$urlGenerator,
$imageManager,
$this->config,

8
apps/theming/tests/Settings/PersonalTest.php
Unescape Escape View File

@ -45,6 +45,7 @@ use OCP\AppFramework\Services\IInitialState;
use OCP\IConfig;
use OCP\IL10N;
use OCP\IURLGenerator;
use OCP\IUserSession;
use Test\TestCase;
class PersonalTest extends TestCase {
@ -128,6 +129,7 @@ class PersonalTest extends TestCase {
private function initThemes() {
$util = $this->createMock(Util::class);
$themingDefaults = $this->createMock(ThemingDefaults::class);
$userSession = $this->createMock(IUserSession::class);
$urlGenerator = $this->createMock(IURLGenerator::class);
$imageManager = $this->createMock(ImageManager::class);
$config = $this->createMock(IConfig::class);
@ -141,6 +143,7 @@ class PersonalTest extends TestCase {
'default' => new DefaultTheme(
$util,
$themingDefaults,
$userSession,
$urlGenerator,
$imageManager,
$config,
@ -149,6 +152,7 @@ class PersonalTest extends TestCase {
'light' => new LightTheme(
$util,
$themingDefaults,
$userSession,
$urlGenerator,
$imageManager,
$config,
@ -157,6 +161,7 @@ class PersonalTest extends TestCase {
'dark' => new DarkTheme(
$util,
$themingDefaults,
$userSession,
$urlGenerator,
$imageManager,
$config,
@ -165,6 +170,7 @@ class PersonalTest extends TestCase {
'light-highcontrast' => new HighContrastTheme(
$util,
$themingDefaults,
$userSession,
$urlGenerator,
$imageManager,
$config,
@ -173,6 +179,7 @@ class PersonalTest extends TestCase {
'dark-highcontrast' => new DarkHighContrastTheme(
$util,
$themingDefaults,
$userSession,
$urlGenerator,
$imageManager,
$config,
@ -181,6 +188,7 @@ class PersonalTest extends TestCase {
'opendyslexic' => new DyslexiaFont(
$util,
$themingDefaults,
$userSession,
$urlGenerator,
$imageManager,
$config,

3
apps/theming/tests/Themes/DefaultThemeTest.php
Unescape Escape View File

@ -32,6 +32,7 @@ use OCP\Files\IAppData;
use OCP\IConfig;
use OCP\IL10N;
use OCP\IURLGenerator;
use OCP\IUserSession;
use PHPUnit\Framework\MockObject\MockObject;
use Test\TestCase;
@ -52,6 +53,7 @@ class DefaultThemeTest extends TestCase {
protected function setUp(): void {
$this->themingDefaults = $this->createMock(ThemingDefaults::class);
$this->userSession = $this->createMock(IUserSession::class);
$this->urlGenerator = $this->createMock(IURLGenerator::class);
$this->imageManager = $this->createMock(ImageManager::class);
$this->config = $this->createMock(IConfig::class);
@ -85,6 +87,7 @@ class DefaultThemeTest extends TestCase {
$this->defaultTheme = new DefaultTheme(
$util,
$this->themingDefaults,
$this->userSession,
$this->urlGenerator,
$this->imageManager,
$this->config,

6
apps/theming/tests/Themes/DyslexiaFontTest.php
Unescape Escape View File

@ -56,6 +56,7 @@ class DyslexiaFontTest extends TestCase {
protected function setUp(): void {
$this->themingDefaults = $this->createMock(ThemingDefaults::class);
$this->userSession = $this->createMock(IUserSession::class);
$this->imageManager = $this->createMock(ImageManager::class);
$this->config = $this->createMock(IConfig::class);
$this->l10n = $this->createMock(IL10N::class);
@ -93,6 +94,7 @@ class DyslexiaFontTest extends TestCase {
$this->dyslexiaFont = new DyslexiaFont(
$util,
$this->themingDefaults,
$this->userSession,
$this->urlGenerator,
$this->imageManager,
$this->config,
@ -142,7 +144,7 @@ class DyslexiaFontTest extends TestCase {
/**
* @dataProvider dataTestGetCustomCss
*
*
* Ensure the fonts are always loaded from the web root
* despite having url rewriting enabled or not
*
@ -155,7 +157,7 @@ class DyslexiaFontTest extends TestCase {
->method('getSystemValue')
->with('htaccess.IgnoreFrontController', false)
->willReturn($prettyUrlsEnabled);
$this->assertStringContainsString("'$webRoot/apps/theming/fonts/OpenDyslexic-Regular.woff'", $this->dyslexiaFont->getCustomCss());
$this->assertStringNotContainsString('index.php', $this->dyslexiaFont->getCustomCss());
}

11
apps/theming/tests/ThemingDefaultsTest.php
Unescape Escape View File

@ -46,6 +46,7 @@ use OCP\IConfig;
use OCP\IL10N;
use OCP\INavigationManager;
use OCP\IURLGenerator;
use OCP\IUserSession;
use Test\TestCase;
class ThemingDefaultsTest extends TestCase {
@ -53,6 +54,8 @@ class ThemingDefaultsTest extends TestCase {
private $config;
/** @var IL10N|\PHPUnit\Framework\MockObject\MockObject */
private $l10n;
/** @var IUserSession|\PHPUnit\Framework\MockObject\MockObject */
private $userSession;
/** @var IURLGenerator|\PHPUnit\Framework\MockObject\MockObject */
private $urlGenerator;
/** @var \OC_Defaults|\PHPUnit\Framework\MockObject\MockObject */
@ -78,6 +81,7 @@ class ThemingDefaultsTest extends TestCase {
parent::setUp();
$this->config = $this->createMock(IConfig::class);
$this->l10n = $this->createMock(IL10N::class);
$this->userSession = $this->createMock(IUserSession::class);
$this->urlGenerator = $this->createMock(IURLGenerator::class);
$this->cacheFactory = $this->createMock(ICacheFactory::class);
$this->cache = $this->createMock(ICache::class);
@ -93,6 +97,7 @@ class ThemingDefaultsTest extends TestCase {
$this->template = new ThemingDefaults(
$this->config,
$this->l10n,
$this->userSession,
$this->urlGenerator,
$this->cacheFactory,
$this->util,
@ -419,7 +424,7 @@ class ThemingDefaultsTest extends TestCase {
$this->config
->expects($this->once())
->method('getAppValue')
->with('theming', 'color', $this->defaults->getColorPrimary())
->with('theming', 'color', null)
->willReturn($this->defaults->getColorPrimary());
$this->assertEquals($this->defaults->getColorPrimary(), $this->template->getColorPrimary());
@ -429,7 +434,7 @@ class ThemingDefaultsTest extends TestCase {
$this->config
->expects($this->once())
->method('getAppValue')
->with('theming', 'color', $this->defaults->getColorPrimary())
->with('theming', 'color', null)
->willReturn('#fff');
$this->assertEquals('#fff', $this->template->getColorPrimary());
@ -542,7 +547,7 @@ class ThemingDefaultsTest extends TestCase {
->method('getAppValue')
->withConsecutive(
['theming', 'cachebuster', '0'],
['theming', 'color', $this->defaults->getColorPrimary()],
['theming', 'color', null],
)->willReturnOnConsecutiveCalls(
'15',
$this->defaults->getColorPrimary(),

2
core/css/guest.css
Unescape Escape View File

@ -23,7 +23,7 @@ body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
color: var(--color-text);
text-align: center;
background-color: var(--color-primary);
background-color: var(--color-main-background-not-plain, var(--color-primary));
background-image: var(--image-background, var(--image-background-plain, url('../../../core/img/app-background.jpg'), linear-gradient(40deg, #0082c9 0%, #30b6ff 100%)));
background-attachment: fixed;
min-height: 100%; /* fix sticky footer */

4
dist/theming-theming-settings.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/theming-theming-settings.js.map vendored
View File

File diff suppressed because one or more lines are too long

1
lib/private/Server.php
Unescape Escape View File

@ -1222,6 +1222,7 @@ class Server extends ServerContainer implements IServerContainer {
return new ThemingDefaults(
$c->get(\OCP\IConfig::class),
$c->getL10N('theming'),
$c->get(IUserSession::class),
$c->get(IURLGenerator::class),
$c->get(ICacheFactory::class),
new Util($c->get(\OCP\IConfig::class), $this->get(IAppManager::class), $c->getAppDataDir('theming')),

8
tests/acceptance/features/app-theming.feature
Unescape Escape View File

@ -9,10 +9,12 @@ Feature: app-theming
# The "eventually" part is not really needed here, as the colour is not
# being animated at this point, but there is no need to create a specific
# step just for this.
And I see that the primary color is eventually "#0082C9"
And I see that the primary color is eventually "#00639a"
And I see that the non-plain background color variable is eventually "#0082c9"
When I set the "Color" parameter in the Theming app to "#C9C9C9"
Then I see that the parameters in the Theming app are eventually saved
And I see that the primary color is eventually "#C9C9C9"
And I see that the non-plain background color variable is eventually "#C9C9C9"
Scenario: resetting the color updates the primary color
Given I am logged in as the admin
@ -22,6 +24,8 @@ Feature: app-theming
And I set the "Color" parameter in the Theming app to "#C9C9C9"
And I see that the parameters in the Theming app are eventually saved
And I see that the primary color is eventually "#C9C9C9"
And I see that the non-plain background color variable is eventually "#C9C9C9"
When I reset the "Color" parameter in the Theming app to its default value
Then I see that the parameters in the Theming app are eventually saved
And I see that the primary color is eventually "#0082C9"
And I see that the primary color is eventually "#00639a"
And I see that the non-plain background color variable is eventually "#0082c9"

17
tests/acceptance/features/bootstrap/ThemingAppContext.php
Unescape Escape View File

@ -141,6 +141,23 @@ class ThemingAppContext implements Context, ActorAwareInterface {
}
}
/**
* @Then I see that the non-plain background color variable is eventually :color
*/
public function iSeeThatTheNonPlainBackgroundColorVariableIsEventually($color) {
$colorVariableMatchesCallback = function () use ($color) {
$colorVariable = $this->actor->getSession()->evaluateScript("return getComputedStyle(document.documentElement).getPropertyValue('--color-main-background-not-plain').trim();");
$colorVariable = $this->getRGBArray($colorVariable);
$color = $this->getRGBArray($color);
return $colorVariable == $color;
};
if (!Utils::waitFor($colorVariableMatchesCallback, $timeout = 10 * $this->actor->getFindTimeoutMultiplier(), $timeoutStep = 1)) {
Assert::fail("The non-plain background color variable is not $color yet after $timeout seconds");
}
}
/**
* @Then I see that the parameters in the Theming app are eventually saved
*/

Write Preview
Loading…
Cancel
Save