From 00eb003d475348e20188891ed5c34d0259c46f00 Mon Sep 17 00:00:00 2001 From: Janne Savolainen Date: Thu, 13 Oct 2022 14:12:45 +0300 Subject: [PATCH] Introduce competition for editor preference tab Co-authored-by: Mikko Aspiala Signed-off-by: Janne Savolainen --- ...-font-family-preference-item.injectable.ts | 23 +++++++ .../editor-font-family/editor-font-family.tsx | 37 +++++++++++ ...or-font-size-preference-item.injectable.ts | 23 +++++++ .../editor-font-size/editor-font-size.tsx | 39 ++++++++++++ .../editor-preference-page.injectable.ts | 23 +++++++ .../editor/editor-preference-page.tsx | 14 +++++ .../editor-preference-tab.injectable.ts | 24 ++++++++ ...line-numbers-preference-item.injectable.ts | 23 +++++++ .../editor/line-numbers/line-numbers.tsx | 51 ++++++++++++++++ .../minimap-preference-item.injectable.ts | 23 +++++++ .../editor/minimap/minimap.tsx | 61 +++++++++++++++++++ .../tab-size-preference-item.injectable.ts | 23 +++++++ .../editor/tab-size/tab-size.tsx | 39 ++++++++++++ 13 files changed, 403 insertions(+) create mode 100644 src/features/preferences/renderer/preference-items/editor/editor-font-family/editor-font-family-preference-item.injectable.ts create mode 100644 src/features/preferences/renderer/preference-items/editor/editor-font-family/editor-font-family.tsx create mode 100644 src/features/preferences/renderer/preference-items/editor/editor-font-size/editor-font-size-preference-item.injectable.ts create mode 100644 src/features/preferences/renderer/preference-items/editor/editor-font-size/editor-font-size.tsx create mode 100644 src/features/preferences/renderer/preference-items/editor/editor-preference-page.injectable.ts create mode 100644 src/features/preferences/renderer/preference-items/editor/editor-preference-page.tsx create mode 100644 src/features/preferences/renderer/preference-items/editor/editor-preference-tab.injectable.ts create mode 100644 src/features/preferences/renderer/preference-items/editor/line-numbers/line-numbers-preference-item.injectable.ts create mode 100644 src/features/preferences/renderer/preference-items/editor/line-numbers/line-numbers.tsx create mode 100644 src/features/preferences/renderer/preference-items/editor/minimap/minimap-preference-item.injectable.ts create mode 100644 src/features/preferences/renderer/preference-items/editor/minimap/minimap.tsx create mode 100644 src/features/preferences/renderer/preference-items/editor/tab-size/tab-size-preference-item.injectable.ts create mode 100644 src/features/preferences/renderer/preference-items/editor/tab-size/tab-size.tsx diff --git a/src/features/preferences/renderer/preference-items/editor/editor-font-family/editor-font-family-preference-item.injectable.ts b/src/features/preferences/renderer/preference-items/editor/editor-font-family/editor-font-family-preference-item.injectable.ts new file mode 100644 index 0000000000..49ab2fe491 --- /dev/null +++ b/src/features/preferences/renderer/preference-items/editor/editor-font-family/editor-font-family-preference-item.injectable.ts @@ -0,0 +1,23 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ +import { getInjectable } from "@ogre-tools/injectable"; +import { preferenceItemInjectionToken } from "../../preference-item-injection-token"; +import { EditorFontFamily } from "./editor-font-family"; + +const editorFontFamilyPreferenceItemInjectable = getInjectable({ + id: "editor-font-family-preference-item", + + instantiate: () => ({ + kind: "item" as const, + id: "editor-font-family", + parentId: "editor-page", + orderNumber: 50, + Component: EditorFontFamily, + }), + + injectionToken: preferenceItemInjectionToken, +}); + +export default editorFontFamilyPreferenceItemInjectable; diff --git a/src/features/preferences/renderer/preference-items/editor/editor-font-family/editor-font-family.tsx b/src/features/preferences/renderer/preference-items/editor/editor-font-family/editor-font-family.tsx new file mode 100644 index 0000000000..50e3989ed6 --- /dev/null +++ b/src/features/preferences/renderer/preference-items/editor/editor-font-family/editor-font-family.tsx @@ -0,0 +1,37 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ +import React from "react"; +import { SubTitle } from "../../../../../../renderer/components/layout/sub-title"; +import { withInjectables } from "@ogre-tools/injectable-react"; +import type { UserStore } from "../../../../../../common/user-store"; +import userStoreInjectable from "../../../../../../common/user-store/user-store.injectable"; +import { Input } from "../../../../../../renderer/components/input"; +import { observer } from "mobx-react"; + +interface Dependencies { + userStore: UserStore; +} + +const NonInjectedEditorFontFamily = observer(({ userStore: { editorConfiguration }}: Dependencies) => ( +
+ + editorConfiguration.fontFamily = value} + /> +
+)); + +export const EditorFontFamily = withInjectables( + NonInjectedEditorFontFamily, + + { + getProps: (di) => ({ + userStore: di.inject(userStoreInjectable), + }), + }, +); diff --git a/src/features/preferences/renderer/preference-items/editor/editor-font-size/editor-font-size-preference-item.injectable.ts b/src/features/preferences/renderer/preference-items/editor/editor-font-size/editor-font-size-preference-item.injectable.ts new file mode 100644 index 0000000000..ec2d485dc1 --- /dev/null +++ b/src/features/preferences/renderer/preference-items/editor/editor-font-size/editor-font-size-preference-item.injectable.ts @@ -0,0 +1,23 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ +import { getInjectable } from "@ogre-tools/injectable"; +import { preferenceItemInjectionToken } from "../../preference-item-injection-token"; +import { EditorFontSize } from "./editor-font-size"; + +const editorFontSizePreferenceItemInjectable = getInjectable({ + id: "editor-font-size-preference-item", + + instantiate: () => ({ + kind: "item" as const, + id: "editor-font-size", + parentId: "editor-page", + orderNumber: 40, + Component: EditorFontSize, + }), + + injectionToken: preferenceItemInjectionToken, +}); + +export default editorFontSizePreferenceItemInjectable; diff --git a/src/features/preferences/renderer/preference-items/editor/editor-font-size/editor-font-size.tsx b/src/features/preferences/renderer/preference-items/editor/editor-font-size/editor-font-size.tsx new file mode 100644 index 0000000000..7fe83ec6aa --- /dev/null +++ b/src/features/preferences/renderer/preference-items/editor/editor-font-size/editor-font-size.tsx @@ -0,0 +1,39 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ +import React from "react"; +import { SubTitle } from "../../../../../../renderer/components/layout/sub-title"; +import { withInjectables } from "@ogre-tools/injectable-react"; +import type { UserStore } from "../../../../../../common/user-store"; +import userStoreInjectable from "../../../../../../common/user-store/user-store.injectable"; +import { Input, InputValidators } from "../../../../../../renderer/components/input"; +import { observer } from "mobx-react"; + +interface Dependencies { + userStore: UserStore; +} + +const NonInjectedEditorFontSize = observer(({ userStore: { editorConfiguration }}: Dependencies) => ( +
+ + editorConfiguration.fontSize = Number(value)} + /> +
+)); + +export const EditorFontSize = withInjectables( + NonInjectedEditorFontSize, + + { + getProps: (di) => ({ + userStore: di.inject(userStoreInjectable), + }), + }, +); diff --git a/src/features/preferences/renderer/preference-items/editor/editor-preference-page.injectable.ts b/src/features/preferences/renderer/preference-items/editor/editor-preference-page.injectable.ts new file mode 100644 index 0000000000..c130af6fd7 --- /dev/null +++ b/src/features/preferences/renderer/preference-items/editor/editor-preference-page.injectable.ts @@ -0,0 +1,23 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ +import { getInjectable } from "@ogre-tools/injectable"; +import { preferenceItemInjectionToken } from "../preference-item-injection-token"; +import { EditorPreferencePage } from "./editor-preference-page"; + +const editorPreferencePageInjectable = getInjectable({ + id: "editor-preference-page", + + instantiate: () => ({ + kind: "page" as const, + id: "editor-page", + parentId: "editor-tab", + orderNumber: 0, + Component: EditorPreferencePage, + }), + + injectionToken: preferenceItemInjectionToken, +}); + +export default editorPreferencePageInjectable; diff --git a/src/features/preferences/renderer/preference-items/editor/editor-preference-page.tsx b/src/features/preferences/renderer/preference-items/editor/editor-preference-page.tsx new file mode 100644 index 0000000000..4f301b02be --- /dev/null +++ b/src/features/preferences/renderer/preference-items/editor/editor-preference-page.tsx @@ -0,0 +1,14 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ +import React from "react"; +import type { PreferenceItemComponent } from "../preference-item-injection-token"; + +export const EditorPreferencePage: PreferenceItemComponent = ({ children }) => ( +
+

Editor configuration

+ + {children} +
+); diff --git a/src/features/preferences/renderer/preference-items/editor/editor-preference-tab.injectable.ts b/src/features/preferences/renderer/preference-items/editor/editor-preference-tab.injectable.ts new file mode 100644 index 0000000000..26d2d3c7b9 --- /dev/null +++ b/src/features/preferences/renderer/preference-items/editor/editor-preference-tab.injectable.ts @@ -0,0 +1,24 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ +import { getInjectable } from "@ogre-tools/injectable"; +import { preferenceItemInjectionToken } from "../preference-item-injection-token"; + +const editorPreferenceTabInjectable = getInjectable({ + id: "editor-preference-tab", + + instantiate: () => ({ + kind: "tab" as const, + id: "editor-tab", + parentId: "preference-tabs" as const, + pathId: "editor", + testId: "editor-preferences-page", + label: "Editor", + orderNumber: 30, + }), + + injectionToken: preferenceItemInjectionToken, +}); + +export default editorPreferenceTabInjectable; diff --git a/src/features/preferences/renderer/preference-items/editor/line-numbers/line-numbers-preference-item.injectable.ts b/src/features/preferences/renderer/preference-items/editor/line-numbers/line-numbers-preference-item.injectable.ts new file mode 100644 index 0000000000..e09ca37c89 --- /dev/null +++ b/src/features/preferences/renderer/preference-items/editor/line-numbers/line-numbers-preference-item.injectable.ts @@ -0,0 +1,23 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ +import { getInjectable } from "@ogre-tools/injectable"; +import { preferenceItemInjectionToken } from "../../preference-item-injection-token"; +import { LineNumbers } from "./line-numbers"; + +const lineNumbersPreferenceItemInjectable = getInjectable({ + id: "line-numbers-preference-item", + + instantiate: () => ({ + kind: "item" as const, + id: "line-numbers", + parentId: "editor-page", + orderNumber: 20, + Component: LineNumbers, + }), + + injectionToken: preferenceItemInjectionToken, +}); + +export default lineNumbersPreferenceItemInjectable; diff --git a/src/features/preferences/renderer/preference-items/editor/line-numbers/line-numbers.tsx b/src/features/preferences/renderer/preference-items/editor/line-numbers/line-numbers.tsx new file mode 100644 index 0000000000..10cc508baa --- /dev/null +++ b/src/features/preferences/renderer/preference-items/editor/line-numbers/line-numbers.tsx @@ -0,0 +1,51 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ +import React from "react"; +import { SubTitle } from "../../../../../../renderer/components/layout/sub-title"; +import { withInjectables } from "@ogre-tools/injectable-react"; +import type { UserStore } from "../../../../../../common/user-store"; +import userStoreInjectable from "../../../../../../common/user-store/user-store.injectable"; +import { Select } from "../../../../../../renderer/components/select"; +import { defaultEditorConfig } from "../../../../../../common/user-store/preferences-helpers"; +import { capitalize } from "lodash/fp"; +import { observer } from "mobx-react"; + +interface Dependencies { + userStore: UserStore; +} + +const lineNumberOptions = ([ + "on", + "off", + "relative", + "interval", +] as const).map(lineNumbers => ({ + value: lineNumbers, + label: capitalize(lineNumbers), +})); + +const NonInjectedLineNumbers = observer(({ userStore: { editorConfiguration }}: Dependencies) => ( +
+ + editorConfiguration.minimap.side = option?.value} + /> + + +
+)); + +export const Minimap = withInjectables( + NonInjectedMinimap, + + { + getProps: (di) => ({ + userStore: di.inject(userStoreInjectable), + }), + }, +); diff --git a/src/features/preferences/renderer/preference-items/editor/tab-size/tab-size-preference-item.injectable.ts b/src/features/preferences/renderer/preference-items/editor/tab-size/tab-size-preference-item.injectable.ts new file mode 100644 index 0000000000..f8b179bbfc --- /dev/null +++ b/src/features/preferences/renderer/preference-items/editor/tab-size/tab-size-preference-item.injectable.ts @@ -0,0 +1,23 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ +import { getInjectable } from "@ogre-tools/injectable"; +import { preferenceItemInjectionToken } from "../../preference-item-injection-token"; +import { TabSize } from "./tab-size"; + +const tabSizePreferenceItemInjectable = getInjectable({ + id: "tab-size-preference-item", + + instantiate: () => ({ + kind: "item" as const, + id: "tab-size", + parentId: "editor-page", + orderNumber: 30, + Component: TabSize, + }), + + injectionToken: preferenceItemInjectionToken, +}); + +export default tabSizePreferenceItemInjectable; diff --git a/src/features/preferences/renderer/preference-items/editor/tab-size/tab-size.tsx b/src/features/preferences/renderer/preference-items/editor/tab-size/tab-size.tsx new file mode 100644 index 0000000000..575044a954 --- /dev/null +++ b/src/features/preferences/renderer/preference-items/editor/tab-size/tab-size.tsx @@ -0,0 +1,39 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ +import React from "react"; +import { SubTitle } from "../../../../../../renderer/components/layout/sub-title"; +import { withInjectables } from "@ogre-tools/injectable-react"; +import type { UserStore } from "../../../../../../common/user-store"; +import userStoreInjectable from "../../../../../../common/user-store/user-store.injectable"; +import { Input, InputValidators } from "../../../../../../renderer/components/input"; +import { observer } from "mobx-react"; + +interface Dependencies { + userStore: UserStore; +} + +const NonInjectedTabSize = observer(({ userStore: { editorConfiguration }}: Dependencies) => ( +
+ + editorConfiguration.tabSize = Number(value)} + /> +
+)); + +export const TabSize = withInjectables( + NonInjectedTabSize, + + { + getProps: (di) => ({ + userStore: di.inject(userStoreInjectable), + }), + }, +);