Add input button setting to popup

buttercup · Apr 2, 2024 · c10d133 · c10d133
1 parent 353923b
commit c10d133
Show file tree

Hide file tree

Showing 8 changed files with 102 additions and 4 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -61,6 +61,7 @@
     "@blueprintjs/core": "^4.20.2",
     "@blueprintjs/icons": "^4.16.0",
     "@blueprintjs/popover2": "^1.14.11",
+    "@blueprintjs/select": "^4.9.24",
     "@buttercup/channel-queue": "^1.4.0",
     "@buttercup/locust": "^2.2.1",
     "@buttercup/ui": "^6.2.2",

diff --git a/source/background/services/config.ts b/source/background/services/config.ts
@@ -1,8 +1,9 @@
 import { getSyncValue, setSyncValue } from "./storage.js";
-import { Configuration, SyncStorageItem } from "../types.js";
+import { Configuration, InputButtonType, SyncStorageItem } from "../types.js";
 
 const DEFAULTS: Configuration = {
     entryIcons: true,
+    inputButtonDefault: InputButtonType.LargeButton,
     saveNewLogins: true,
     theme: "light",
     useSystemTheme: true

diff --git a/source/popup/components/pages/SettingsPage.tsx b/source/popup/components/pages/SettingsPage.tsx
@@ -1,6 +1,7 @@
 import React, { Fragment, useCallback, useMemo, useState } from "react";
 import styled from "styled-components";
-import { Alert, Button, Callout, Classes, Intent, Switch } from "@blueprintjs/core";
+import { Alert, Button, Callout, Classes, Intent, MenuItem, Switch } from "@blueprintjs/core";
+import { ItemRendererProps, Select } from "@blueprintjs/select";
 import { t } from "../../../shared/i18n/trans.js";
 import { useConfig } from "../../../shared/hooks/config.js";
 import { ErrorMessage } from "../../../shared/components/ErrorMessage.js";
@@ -9,6 +10,11 @@ import { getToaster } from "../../../shared/services/notifications.js";
 import { localisedErrorMessage } from "../../../shared/library/error.js";
 import { useAllLoginCredentials } from "../../hooks/credentials.js";
 import { createNewTab, getExtensionURL } from "../../../shared/library/extension.js";
+import { InputButtonType } from "../../types.js";
+
+interface InputButtonTypeItem {
+    name: string, type: InputButtonType;
+}
 
 const Container = styled.div`
     display: flex;
@@ -26,11 +32,37 @@ const SettingSection = styled(Callout)`
     padding: 9px;
 `;
 
+function renderInputButtonTypeItem(item: InputButtonTypeItem, props: ItemRendererProps) {
+    const { handleClick, handleFocus, modifiers } = props;
+    return (
+        <MenuItem
+            active={modifiers.active}
+            disabled={modifiers.disabled}
+            key={item.type}
+            label={item.type === InputButtonType.LargeButton ? t("config.default-hint") : ""}
+            onClick={handleClick}
+            onFocus={handleFocus}
+            roleStructure="listoption"
+            text={item.name}
+        />
+    );
+}
+
 export function SettingsPage() {
     const [config, configError, setValue] = useConfig();
     const [showConfirmReset, setShowConfirmReset] = useState<boolean>(false);
     const { value: allCredentials } = useAllLoginCredentials();
     const hasSavedCredentials = useMemo(() => Array.isArray(allCredentials) && allCredentials.length > 0, [allCredentials]);
+    const inputButtonItems: Array<InputButtonTypeItem> = useMemo(() => Object.values(InputButtonType).map(type => ({
+        name: t(`config.input-button-type.${type}`),
+        type
+    })), []);
+    const activeInputButtonItem = useMemo(
+        () => inputButtonItems.find(item => item.type === config?.inputButtonDefault),
+        [config, inputButtonItems]);
+    const handleInputButtonItemSelect = useCallback((item: InputButtonTypeItem) => {
+        setValue("inputButtonDefault", item.type);
+    }, [setValue]);
     const handleOpenDisabledDomains = useCallback(async () => {
         try {
             await createNewTab(getExtensionURL("full.html#/disabled-domains"));
@@ -110,6 +142,22 @@ export function SettingsPage() {
                             </Fragment>
                         )}
                     </SettingSection>
+                    <SettingSection title={t("config.section.forms")}>
+                        <Select
+                            activeItem={activeInputButtonItem}
+                            fill
+                            filterable={false}
+                            items={inputButtonItems}
+                            onItemSelect={handleInputButtonItemSelect}
+                            itemRenderer={renderInputButtonTypeItem}
+                        >
+                            <Button
+                                text={t(`config.input-button-type.${config.inputButtonDefault}`)}
+                                rightIcon="double-caret-vertical"
+                                // placeholder="Select a film"
+                            />
+                        </Select>
+                    </SettingSection>
                     <SettingSection title={t("config.section.privacy")}>
                         <Switch
                             checked={config.entryIcons}

diff --git a/source/shared/i18n/translations/en.json b/source/shared/i18n/translations/en.json
@@ -12,13 +12,19 @@
         "title": "Attributions"
     },
     "config": {
+        "default-hint": "(default)",
+        "input-button-type": {
+            "innericon": "Small interior icon",
+            "largebutton": "Large external button"
+        },
         "reset-dialog": {
             "cancel-button": "Cancel",
             "confirm-button": "Reset",
             "message": "Are you sure you wish to reset the application? This clears all cached data, settings and keys."
         },
         "section": {
             "advanced": "Advanced Settings",
+            "forms": "Forms",
             "logins": "Logins",
             "privacy": "Privacy",
             "theme": "Theme"

diff --git a/source/shared/library/version.ts b/source/shared/library/version.ts
@@ -1,4 +1,4 @@
 // Do not edit this file - it is generated automatically at build time
 
-export const BUILD_DATE = "2024-03-27";
-export const VERSION = "3.0.0";
+export const BUILD_DATE = "2024-04-02";
+export const VERSION = "3.1.0";
diff --git a/source/shared/styles/base.sass b/source/shared/styles/base.sass
@@ -1,6 +1,7 @@
 @import "~@blueprintjs/core/lib/css/blueprint.css"
 @import "~@blueprintjs/icons/lib/css/blueprint-icons.css"
 @import "~@blueprintjs/popover2/lib/css/blueprint-popover2.css"
+@import "~@blueprintjs/select/lib/css/blueprint-select.css"
 
 @import "fonts"
 

diff --git a/source/shared/types.ts b/source/shared/types.ts
@@ -95,6 +95,7 @@ export type ChildElements = ChildElement | Array<ChildElement>;
 
 export interface Configuration {
     entryIcons: boolean;
+    inputButtonDefault: InputButtonType;
     saveNewLogins: boolean;
     theme: "light" | "dark";
     useSystemTheme: boolean;
@@ -107,6 +108,11 @@ export interface ElementRect {
     height: number;
 }
 
+export enum InputButtonType {
+    InnerIcon = "innericon",
+    LargeButton = "largebutton"
+}
+
 export enum InputType {
     OTP = "otp",
     UserPassword = "user-password"