Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add descriptions for background pictures #41216

Closed
wants to merge 11 commits into from
Closed

add descriptions for background pictures #41216

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
18b1247
add descriptions for background pictures
szaimen Oct 31, 2023
7dc91c4
WIP - move it to puublic function instead of const
szaimen Oct 31, 2023
513efdc
WIP2
szaimen Oct 31, 2023
2a974aa
WIP3
szaimen Oct 31, 2023
773fe16
WIP4
szaimen Oct 31, 2023
a6cf2ea
WIP5
szaimen Oct 31, 2023
95dac5b
Revert "WIP5"
szaimen Oct 31, 2023
810dd5e
WIP6
szaimen Nov 1, 2023
b45aa3a
WIP7
szaimen Nov 1, 2023
46e7941
WIP8
szaimen Nov 1, 2023
732dbbd
WIP9
szaimen Nov 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions apps/theming/lib/Listener/BeforeTemplateRenderedListener.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,19 +45,22 @@ class BeforeTemplateRenderedListener implements IEventListener {
private ThemeInjectionService $themeInjectionService;
private IUserSession $userSession;
private IConfig $config;
private BackgroundService $backgroundService;

public function __construct(
IInitialState $initialState,
ContainerInterface $container,
ThemeInjectionService $themeInjectionService,
IUserSession $userSession,
IConfig $config
IConfig $config,
BackgroundService $backgroundService,
) {
$this->initialState = $initialState;
$this->container = $container;
$this->themeInjectionService = $themeInjectionService;
$this->userSession = $userSession;
$this->config = $config;
$this->backgroundService = $backgroundService;
}

public function handle(Event $event): void {
Expand Down Expand Up @@ -112,7 +115,7 @@ public function handle(Event $event): void {
/** List of all shipped backgrounds */
$this->initialState->provideInitialState(
'shippedBackgrounds',
BackgroundService::SHIPPED_BACKGROUNDS,
$this->backgroundService->getShippedBackgrounds(),
);
}

Expand Down
238 changes: 132 additions & 106 deletions apps/theming/lib/Service/BackgroundService.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@
use OCP\Files\SimpleFS\ISimpleFile;
use OCP\Files\SimpleFS\ISimpleFolder;
use OCP\IConfig;
use OCP\IL10N;
use OCP\Lock\LockedException;
use OCP\PreConditionNotMetException;

Expand All @@ -54,121 +55,20 @@ class BackgroundService {
public const BACKGROUND_DISABLED = 'disabled';

public const DEFAULT_BACKGROUND_IMAGE = 'kamil-porembinski-clouds.jpg';
public const SHIPPED_BACKGROUNDS = [
'hannah-maclean-soft-floral.jpg' => [
'attribution' => 'Soft floral (Hannah MacLean, CC0)',
'attribution_url' => 'https://stocksnap.io/photo/soft-floral-XOYWCCW5PA',
'theming' => self::THEMING_MODE_DARK,
'primary_color' => '#9f652f',
],
'ted-moravec-morning-fog.jpg' => [
'attribution' => 'Morning fog (Ted Moravec, Public Domain)',
'attribution_url' => 'https://flickr.com/photos/tmoravec/52392410261',
'theming' => self::THEMING_MODE_DARK,
'primary_color' => '#114c3b',
],
'stefanus-martanto-setyo-husodo-underwater-ocean.jpg' => [
'attribution' => 'Underwater ocean (Stefanus Martanto Setyo Husodo, CC0)',
'attribution_url' => 'https://stocksnap.io/photo/underwater-ocean-TJA9LBH4WS',
'primary_color' => '#04577e',
],
'zoltan-voros-rhythm-and-blues.jpg' => [
'attribution' => 'Rhythm and blues (Zoltán Vörös, CC BY)',
'attribution_url' => 'https://flickr.com/photos/v923z/51634409289/',
'primary_color' => '#1c243c',
],
'anatoly-mikhaltsov-butterfly-wing-scale.jpg' => [
'attribution' => 'Butterfly wing scale (Anatoly Mikhaltsov, CC BY-SA)',
'attribution_url' => 'https://commons.wikimedia.org/wiki/File:%D0%A7%D0%B5%D1%88%D1%83%D0%B9%D0%BA%D0%B8_%D0%BA%D1%80%D1%8B%D0%BB%D0%B0_%D0%B1%D0%B0%D0%B1%D0%BE%D1%87%D0%BA%D0%B8.jpg',
'primary_color' => '#a53c17',
],
'bernie-cetonia-aurata-take-off-composition.jpg' => [
'attribution' => 'Cetonia aurata take off composition (Bernie, Public Domain)',
'attribution_url' => 'https://commons.wikimedia.org/wiki/File:Cetonia_aurata_take_off_composition_05172009.jpg',
'theming' => self::THEMING_MODE_DARK,
'primary_color' => '#56633d',
],
'dejan-krsmanovic-ribbed-red-metal.jpg' => [
'attribution' => 'Ribbed red metal (Dejan Krsmanovic, CC BY)',
'attribution_url' => 'https://www.flickr.com/photos/dejankrsmanovic/42971456774/',
'primary_color' => '#9c4236',
],
'eduardo-neves-pedra-azul.jpg' => [
'attribution' => 'Pedra azul milky way (Eduardo Neves, CC BY-SA)',
'attribution_url' => 'https://commons.wikimedia.org/wiki/File:Pedra_Azul_Milky_Way.jpg',
'primary_color' => '#4f6071',
],
'european-space-agency-barents-bloom.jpg' => [
'attribution' => 'Barents bloom (European Space Agency, CC BY-SA)',
'attribution_url' => 'https://www.esa.int/ESA_Multimedia/Images/2016/08/Barents_bloom',
'primary_color' => '#396475',
],
'hannes-fritz-flippity-floppity.jpg' => [
'attribution' => 'Flippity floppity (Hannes Fritz, CC BY-SA)',
'attribution_url' => 'http://hannes.photos/flippity-floppity',
'primary_color' => '#98415a',
],
'hannes-fritz-roulette.jpg' => [
'attribution' => 'Roulette (Hannes Fritz, CC BY-SA)',
'attribution_url' => 'http://hannes.photos/roulette',
'primary_color' => '#845334',
],
'hannes-fritz-sea-spray.jpg' => [
'attribution' => 'Sea spray (Hannes Fritz, CC BY-SA)',
'attribution_url' => 'http://hannes.photos/sea-spray',
'primary_color' => '#4f6071',
],
'kamil-porembinski-clouds.jpg' => [
'attribution' => 'Clouds (Kamil Porembiński, CC BY-SA)',
'attribution_url' => 'https://www.flickr.com/photos/paszczak000/8715851521/',
'primary_color' => self::DEFAULT_COLOR,
],
'bernard-spragg-new-zealand-fern.jpg' => [
'attribution' => 'New zealand fern (Bernard Spragg, CC0)',
'attribution_url' => 'https://commons.wikimedia.org/wiki/File:NZ_Fern.(Blechnum_chambersii)_(11263534936).jpg',
'primary_color' => '#316b26',
],
'rawpixel-pink-tapioca-bubbles.jpg' => [
'attribution' => 'Pink tapioca bubbles (Rawpixel, CC BY)',
'attribution_url' => 'https://www.flickr.com/photos/byrawpixel/27665140298/in/photostream/',
'theming' => self::THEMING_MODE_DARK,
'primary_color' => '#7b4e7e',
],
'nasa-waxing-crescent-moon.jpg' => [
'attribution' => 'Waxing crescent moon (NASA, Public Domain)',
'attribution_url' => 'https://www.nasa.gov/image-feature/a-waxing-crescent-moon',
'primary_color' => '#005ac1',
],
'tommy-chau-already.jpg' => [
'attribution' => 'Cityscape (Tommy Chau, CC BY)',
'attribution_url' => 'https://www.flickr.com/photos/90975693@N05/16910999368',
'primary_color' => '#6a2af4',
],
'tommy-chau-lion-rock-hill.jpg' => [
'attribution' => 'Lion rock hill (Tommy Chau, CC BY)',
'attribution_url' => 'https://www.flickr.com/photos/90975693@N05/17136440246',
'theming' => self::THEMING_MODE_DARK,
'primary_color' => '#7f4f70',
],
'lali-masriera-yellow-bricks.jpg' => [
'attribution' => 'Yellow bricks (Lali Masriera, CC BY)',
'attribution_url' => 'https://www.flickr.com/photos/visualpanic/3982464447',
'theming' => self::THEMING_MODE_DARK,
'primary_color' => '#7f5700',
],
];

private IRootFolder $rootFolder;
private IAppData $appData;
private IConfig $config;
private string $userId;
private ThemingDefaults $themingDefaults;
protected IL10N $l10n;

public function __construct(IRootFolder $rootFolder,
IAppData $appData,
IConfig $config,
?string $userId,
ThemingDefaults $themingDefaults) {
ThemingDefaults $themingDefaults,
IL10N $l10n) {
if ($userId === null) {
return;
}
Expand All @@ -178,6 +78,7 @@ public function __construct(IRootFolder $rootFolder,
$this->userId = $userId;
$this->appData = $appData;
$this->themingDefaults = $themingDefaults;
$this->l10n = $l10n;
}

public function setDefaultBackground(): void {
Expand Down Expand Up @@ -209,11 +110,11 @@ public function setFileBackground($path): void {
}

public function setShippedBackground($fileName): void {
if (!array_key_exists($fileName, self::SHIPPED_BACKGROUNDS)) {
if (!array_key_exists($fileName, $this->getShippedBackgrounds())) {
throw new InvalidArgumentException('The given file name is invalid');
}
$this->config->setUserValue($this->userId, Application::APP_ID, 'background_image', $fileName);
$this->setColorBackground(self::SHIPPED_BACKGROUNDS[$fileName]['primary_color']);
$this->setColorBackground($this->getShippedBackgrounds()[$fileName]['primary_color']);
}

public function setColorBackground(string $color): void {
Expand Down Expand Up @@ -257,4 +158,129 @@ private function getAppDataFolder(): ISimpleFolder {
return $rootFolder->newFolder($this->userId);
}
}

public function getShippedBackgrounds(): array {
return [
'hannah-maclean-soft-floral.jpg' => [
'attribution' => $this->l10n->t('Soft floral (Hannah MacLean, CC0)'),
'description' => $this->l10n->t('Abstract picture in yellow and white color whith a flower on it'),
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For reviewers: Please review each description carefully. Does the text look fine?

'attribution_url' => 'https://stocksnap.io/photo/soft-floral-XOYWCCW5PA',
'theming' => self::THEMING_MODE_DARK,
'primary_color' => '#9f652f',
],
'ted-moravec-morning-fog.jpg' => [
'attribution' => $this->l10n->t('Morning fog (Ted Moravec, Public Domain)'),
'description' => $this->l10n->t('Picture of a forest shrouded in fog'),
'attribution_url' => 'https://flickr.com/photos/tmoravec/52392410261',
'theming' => self::THEMING_MODE_DARK,
'primary_color' => '#114c3b',
],
'stefanus-martanto-setyo-husodo-underwater-ocean.jpg' => [
'attribution' => $this->l10n->t('Underwater ocean (Stefanus Martanto Setyo Husodo, CC0)'),
'description' => $this->l10n->t('Picture of an underwater ocean'),
'attribution_url' => 'https://stocksnap.io/photo/underwater-ocean-TJA9LBH4WS',
'primary_color' => '#04577e',
],
'zoltan-voros-rhythm-and-blues.jpg' => [
'attribution' => $this->l10n->t('Rhythm and blues (Zoltán Vörös, CC BY)'),
'description' => $this->l10n->t('Abstract picture of sand dunes during night'),
'attribution_url' => 'https://flickr.com/photos/v923z/51634409289/',
'primary_color' => '#1c243c',
],
'anatoly-mikhaltsov-butterfly-wing-scale.jpg' => [
'attribution' => $this->l10n->t('Butterfly wing scale (Anatoly Mikhaltsov, CC BY-SA)'),
'description' => $this->l10n->t('Picture of a red-ish butterfly wing under microscope'),
'attribution_url' => 'https://commons.wikimedia.org/wiki/File:%D0%A7%D0%B5%D1%88%D1%83%D0%B9%D0%BA%D0%B8_%D0%BA%D1%80%D1%8B%D0%BB%D0%B0_%D0%B1%D0%B0%D0%B1%D0%BE%D1%87%D0%BA%D0%B8.jpg',
'primary_color' => '#a53c17',
],
'bernie-cetonia-aurata-take-off-composition.jpg' => [
'attribution' => $this->l10n->t('Cetonia aurata take off composition (Bernie, Public Domain)'),
'description' => $this->l10n->t('Montage of a cetonia aurata bug that takes off with white background'),
'attribution_url' => 'https://commons.wikimedia.org/wiki/File:Cetonia_aurata_take_off_composition_05172009.jpg',
'theming' => self::THEMING_MODE_DARK,
'primary_color' => '#56633d',
],
'dejan-krsmanovic-ribbed-red-metal.jpg' => [
'attribution' => $this->l10n->t('Ribbed red metal (Dejan Krsmanovic, CC BY)'),
'description' => $this->l10n->t('Abstract picture of red ribbed metal with two horizontal white elements on top of it'),
'attribution_url' => 'https://www.flickr.com/photos/dejankrsmanovic/42971456774/',
'primary_color' => '#9c4236',
],
'eduardo-neves-pedra-azul.jpg' => [
'attribution' => $this->l10n->t('Pedra azul milky way (Eduardo Neves, CC BY-SA)'),
'description' => $this->l10n->t('Picture of the milky way during night with a mountain in front of it'),
'attribution_url' => 'https://commons.wikimedia.org/wiki/File:Pedra_Azul_Milky_Way.jpg',
'primary_color' => '#4f6071',
],
'european-space-agency-barents-bloom.jpg' => [
'attribution' => $this->l10n->t('Barents bloom (European Space Agency, CC BY-SA)'),
'description' => $this->l10n->t('Abstract picture of blooming barents in blue and green colors'),
'attribution_url' => 'https://www.esa.int/ESA_Multimedia/Images/2016/08/Barents_bloom',
'primary_color' => '#396475',
],
'hannes-fritz-flippity-floppity.jpg' => [
'attribution' => $this->l10n->t('Flippity floppity (Hannes Fritz, CC BY-SA)'),
'description' => $this->l10n->t('Abstract picture of many pairs of flip flops hanging on a wall in multiple colors'),
'attribution_url' => 'http://hannes.photos/flippity-floppity',
'primary_color' => '#98415a',
],
'hannes-fritz-roulette.jpg' => [
'attribution' => $this->l10n->t('Roulette (Hannes Fritz, CC BY-SA)'),
'description' => $this->l10n->t('Picture of a rotating giant wheel during night'),
'attribution_url' => 'http://hannes.photos/roulette',
'primary_color' => '#845334',
],
'hannes-fritz-sea-spray.jpg' => [
'attribution' => $this->l10n->t('Sea spray (Hannes Fritz, CC BY-SA)'),
'description' => $this->l10n->t('Picture of a stone coast with fog and sea behind it'),
'attribution_url' => 'http://hannes.photos/sea-spray',
'primary_color' => '#4f6071',
],
'kamil-porembinski-clouds.jpg' => [
'attribution' => $this->l10n->t('Clouds (Kamil Porembiński, CC BY-SA)'),
'description' => $this->l10n->t('Picture of white clouds on in front of a blue sky'),
'attribution_url' => 'https://www.flickr.com/photos/paszczak000/8715851521/',
'primary_color' => self::DEFAULT_COLOR,
],
'bernard-spragg-new-zealand-fern.jpg' => [
'attribution' => $this->l10n->t('New zealand fern (Bernard Spragg, CC0)'),
'description' => $this->l10n->t('Abstract picture of fern leafes'),
'attribution_url' => 'https://commons.wikimedia.org/wiki/File:NZ_Fern.(Blechnum_chambersii)_(11263534936).jpg',
'primary_color' => '#316b26',
],
'rawpixel-pink-tapioca-bubbles.jpg' => [
'attribution' => $this->l10n->t('Pink tapioca bubbles (Rawpixel, CC BY)'),
'description' => $this->l10n->t('Abstract picture of pink tapioca bubbles'),
'attribution_url' => 'https://www.flickr.com/photos/byrawpixel/27665140298/in/photostream/',
'theming' => self::THEMING_MODE_DARK,
'primary_color' => '#7b4e7e',
],
'nasa-waxing-crescent-moon.jpg' => [
'attribution' => $this->l10n->t('Waxing crescent moon (NASA, Public Domain)'),
'description' => $this->l10n->t('Picture of glowing earth in foreground and moon in the background'),
'attribution_url' => 'https://www.nasa.gov/image-feature/a-waxing-crescent-moon',
'primary_color' => '#005ac1',
],
'tommy-chau-already.jpg' => [
'attribution' => $this->l10n->t('Cityscape (Tommy Chau, CC BY)'),
'description' => $this->l10n->t('Picture of a skyscraper city during night'),
'attribution_url' => 'https://www.flickr.com/photos/90975693@N05/16910999368',
'primary_color' => '#6a2af4',
],
'tommy-chau-lion-rock-hill.jpg' => [
'attribution' => $this->l10n->t('Lion rock hill (Tommy Chau, CC BY)'),
'description' => $this->l10n->t('Picture of mountains during sunset or sunrise'),
'attribution_url' => 'https://www.flickr.com/photos/90975693@N05/17136440246',
'theming' => self::THEMING_MODE_DARK,
'primary_color' => '#7f4f70',
],
'lali-masriera-yellow-bricks.jpg' => [
'attribution' => $this->l10n->t('Yellow bricks (Lali Masriera, CC BY)'),
'description' => $this->l10n->t('Picture of yellow bricks with some yellow tubes'),
'attribution_url' => 'https://www.flickr.com/photos/visualpanic/3982464447',
'theming' => self::THEMING_MODE_DARK,
'primary_color' => '#7f5700',
],
];
}
}
6 changes: 3 additions & 3 deletions apps/theming/lib/Themes/CommonThemeTrait.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ protected function generateGlobalBackgroundVariables(): array {
/**
* Generate user theming background-related variables
*/
protected function generateUserBackgroundVariables(): array {
protected function generateUserBackgroundVariables(BackgroundService $backgroundService): array {
$user = $this->userSession->getUser();
if ($user !== null
&& !$this->themingDefaults->isUserThemingDisabled()
Expand Down Expand Up @@ -162,11 +162,11 @@ protected function generateUserBackgroundVariables(): array {
}

// The user picked a shipped background
if (isset(BackgroundService::SHIPPED_BACKGROUNDS[$backgroundImage])) {
if (isset($backgroundService->getShippedBackgrounds()[$backgroundImage])) {
return [
'--image-background' => "url('" . $this->urlGenerator->linkTo(Application::APP_ID, "img/background/$backgroundImage") . "')",
'--color-background-plain' => $this->themingDefaults->getColorPrimary(),
'--background-image-invert-if-bright' => BackgroundService::SHIPPED_BACKGROUNDS[$backgroundImage]['theming'] ?? null === BackgroundService::THEMING_MODE_DARK ? 'invert(100%)' : 'no',
'--background-image-invert-if-bright' => $backgroundService->getShippedBackgrounds()[$backgroundImage]['theming'] ?? null === BackgroundService::THEMING_MODE_DARK ? 'invert(100%)' : 'no',
];
}
}
Expand Down
7 changes: 5 additions & 2 deletions apps/theming/lib/Themes/DefaultTheme.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ class DefaultTheme implements ITheme {
public IConfig $config;
public IL10N $l;
public IAppManager $appManager;
public BackgroundService $backgroundService;

public string $defaultPrimaryColor;
public string $primaryColor;
Expand All @@ -57,7 +58,8 @@ public function __construct(Util $util,
ImageManager $imageManager,
IConfig $config,
IL10N $l,
IAppManager $appManager) {
IAppManager $appManager,
BackgroundService $backgroundService) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So this is now breaking many tests (34 afaics). @ChristophWurst Any other idea how I can do this without having to refactor everything? Adding backgroundservice to this constructor at least does not seem to work...

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't have any other ideas.

Can you adjust/fix the tests?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What if I would move the commonthemetrait? Do you think this would make the logic easier?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Try

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lets see #41235

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could I ask you to try your changes locally? Using CI for trial and error is really expensive and slows down real builds.

$this->util = $util;
$this->themingDefaults = $themingDefaults;
$this->userSession = $userSession;
Expand All @@ -66,6 +68,7 @@ public function __construct(Util $util,
$this->config = $config;
$this->l = $l;
$this->appManager = $appManager;
$this->backgroundService = $backgroundService;

$this->defaultPrimaryColor = $this->themingDefaults->getDefaultColorPrimary();
$this->primaryColor = $this->themingDefaults->getColorPrimary();
Expand Down Expand Up @@ -210,7 +213,7 @@ public function getCSSVariables(): array {
// Primary variables
$variables = array_merge($variables, $this->generatePrimaryVariables($colorMainBackground, $colorMainText));
$variables = array_merge($variables, $this->generateGlobalBackgroundVariables());
$variables = array_merge($variables, $this->generateUserBackgroundVariables());
$variables = array_merge($variables, $this->generateUserBackgroundVariables($this->backgroundService));

return $variables;
}
Expand Down
2 changes: 1 addition & 1 deletion apps/theming/src/components/BackgroundSettings.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@
<button v-for="shippedBackground in shippedBackgrounds"
:key="shippedBackground.name"
:title="shippedBackground.details.attribution"
:aria-label="shippedBackground.details.attribution"
:aria-label="shippedBackground.details.description"
:aria-pressed="backgroundImage === shippedBackground.name"
:class="{
'background background__shipped': true,
Expand Down
Loading