From 0ab1777046164d69eab1ec1ec0198ece2383a828 Mon Sep 17 00:00:00 2001 From: Felix Ableitner <me@nutomic.com> Date: Fri, 25 Feb 2022 14:35:17 +0100 Subject: [PATCH] Add option to set site default theme (fixes #559) --- package.json | 2 +- src/shared/components/app/app.tsx | 2 +- src/shared/components/app/theme.tsx | 24 +++++---------- src/shared/components/home/site-form.tsx | 37 ++++++++++++++++++++++-- yarn.lock | 8 ++--- 5 files changed, 48 insertions(+), 25 deletions(-) diff --git a/package.json b/package.json index 1134d48..01d23c7 100644 --- a/package.json +++ b/package.json @@ -74,7 +74,7 @@ "eslint-plugin-prettier": "^4.0.0", "husky": "^7.0.4", "import-sort-style-module": "^6.0.0", - "lemmy-js-client": "0.15.1-rc.1", + "lemmy-js-client": "0.15.4-rc.2", "lint-staged": "^12.1.2", "mini-css-extract-plugin": "^2.4.5", "node-fetch": "^2.6.1", diff --git a/src/shared/components/app/app.tsx b/src/shared/components/app/app.tsx index bac634e..52e47a1 100644 --- a/src/shared/components/app/app.tsx +++ b/src/shared/components/app/app.tsx @@ -26,7 +26,7 @@ export class App extends Component<AppProps, any> { <> <Provider i18next={i18n}> <div> - <Theme myUserInfo={siteRes.my_user} /> + <Theme myUserInfo={siteRes.my_user} site={siteRes.site_view.site} /> {siteRes && siteRes.site_view && this.props.siteRes.site_view.site.icon && ( diff --git a/src/shared/components/app/theme.tsx b/src/shared/components/app/theme.tsx index bf5289b..e048046 100644 --- a/src/shared/components/app/theme.tsx +++ b/src/shared/components/app/theme.tsx @@ -1,9 +1,10 @@ import { Component } from "inferno"; import { Helmet } from "inferno-helmet"; -import { MyUserInfo } from "lemmy-js-client"; +import { MyUserInfo, Site } from "lemmy-js-client"; interface Props { myUserInfo: MyUserInfo | undefined; + site: Site; } export class Theme extends Component<Props> { @@ -20,22 +21,11 @@ export class Theme extends Component<Props> { href={`/static/assets/css/themes/${user.local_user_view.local_user.theme}.min.css`} /> ) : ( - [ - <link - rel="stylesheet" - type="text/css" - href="/static/assets/css/themes/litely.min.css" - id="default-light" - media="(prefers-color-scheme: light)" - />, - <link - rel="stylesheet" - type="text/css" - href="/static/assets/css/themes/darkly.min.css" - id="default-dark" - media="(prefers-color-scheme: no-preference), (prefers-color-scheme: dark)" - />, - ] + <link + rel="stylesheet" + type="text/css" + href={`/static/assets/css/themes/${this.props.site.default_theme}.min.css`} + /> )} </Helmet> ); diff --git a/src/shared/components/home/site-form.tsx b/src/shared/components/home/site-form.tsx index ba1ce38..d37d712 100644 --- a/src/shared/components/home/site-form.tsx +++ b/src/shared/components/home/site-form.tsx @@ -3,7 +3,12 @@ import { Prompt } from "inferno-router"; import { CreateSite, EditSite, Site } from "lemmy-js-client"; import { i18n } from "../../i18next"; import { WebSocketService } from "../../services"; -import { authField, capitalizeFirstLetter, wsClient } from "../../utils"; +import { + authField, + capitalizeFirstLetter, + themes, + wsClient, +} from "../../utils"; import { Spinner } from "../common/icon"; import { ImageUploadForm } from "../common/image-upload-form"; import { MarkdownTextArea } from "../common/markdown-textarea"; @@ -31,6 +36,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> { require_application: null, application_question: null, private_instance: null, + default_theme: null, auth: authField(), }, loading: false, @@ -66,6 +72,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> { require_application: site.require_application, application_question: site.application_question, private_instance: site.private_instance, + default_theme: site.default_theme, auth: authField(), }; } @@ -314,6 +321,27 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> { </div> </div> </div> + <div class="form-group row"> + <div class="col-12"> + <label + class="form-check-label" + htmlFor="create-site-default-theme" + > + {i18n.t("theme")} + </label> + <select + id="create-site-default-theme" + value={this.state.siteForm.default_theme} + onChange={linkEvent(this, this.handleSiteDefaultTheme)} + class="custom-select w-auto" + > + <option value="browser">{i18n.t("browser_default")}</option> + {themes.map(theme => ( + <option value={theme}>{theme}</option> + ))} + </select> + </div> + </div> <div class="form-group row"> <div class="col-12"> <div class="form-check"> @@ -321,7 +349,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> { class="form-check-input" id="create-site-private-instance" type="checkbox" - checked={this.state.siteForm.private_instance} + value={this.state.siteForm.default_theme} onChange={linkEvent(this, this.handleSitePrivateInstance)} /> <label @@ -434,6 +462,11 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> { i.setState(i.state); } + handleSiteDefaultTheme(i: SiteForm, event: any) { + i.state.siteForm.default_theme = event.target.value; + i.setState(i.state); + } + handleCancel(i: SiteForm) { i.props.onCancel(); } diff --git a/yarn.lock b/yarn.lock index b787a30..fe0e7f2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4624,10 +4624,10 @@ lcid@^1.0.0: dependencies: invert-kv "^1.0.0" -lemmy-js-client@0.15.1-rc.1: - version "0.15.1-rc.1" - resolved "https://registry.yarnpkg.com/lemmy-js-client/-/lemmy-js-client-0.15.1-rc.1.tgz#9d914098eefc25834f077c4690d4e3e2ab4f2c57" - integrity sha512-rs80HTzwayt2EpjQ+ruQM82bZydjk9kZUUjZidYzwmy1FBkWpG5+OBnW3X6YQ5ebswiobL8HraNfnWMm0zqvjQ== +lemmy-js-client@0.15.4-rc.2: + version "0.15.4-rc.2" + resolved "https://registry.yarnpkg.com/lemmy-js-client/-/lemmy-js-client-0.15.4-rc.2.tgz#cee9115cc8ada3a6f480b595d797b474b9d051cc" + integrity sha512-+plQKqczw0mpnNYSfXRlM3ODH00b7jfH5hpaJAYMmQ0eaXHhKOoWqR8rpl3xXr3alkkhqQQ+lQPnMQO2ghe+WQ== levn@^0.4.1: version "0.4.1" -- 2.44.1