temp save

Author: iamhyc

entry/src/main/ets/common/settings.ets

@@ -4,6 +4,7 @@ export type UserPreferences = Map<string, ValueType>;
 
 export type AppLanguage = 'default' | 'zh-Hans' | 'en-Latn-US';
 export type DarkMode = 'default' | 'light' | 'dark';
+export type ViewMode = 'compact' | 'normal' | 'large';
 export type DigitGroup = '2' | '3' | '4' | 'even' | 'none';
 export type ShowAccountName = 'always' | 'smart' | 'off';
 export type AuthTypePriority = 'face' | 'touch' | 'pin';
@@ -19,6 +20,7 @@ export const DefaultUserPreferences: UserPreferences = new Map<string, ValueType
     // outlook
     ['AppLanguage',     'default' as AppLanguage],
     ['DarkMode',        'default' as DarkMode],
+    ['ViewMode',        'compact' as ViewMode],
     ['DigitGroup',      '3' as DigitGroup],
     ['ShowAccountName', 'always' as ShowAccountName],
     ['ItemSortOrder',   'custom' as ItemSortOrder],

entry/src/main/ets/pages/Index.ets

@@ -35,7 +35,8 @@ import { unifiedDataChannel } from '@kit.ArkData';
 import { pasteboard } from '@kit.BasicServicesKit';
 import { AuthTypePriority, DigitGroup, ItemSortOrder,
     PasswordReminderPeriod,
-    ShowAccountName } from '../common/settings';
+    ShowAccountName,
+    ViewMode} from '../common/settings';
 import { IconManager } from '../common/icons';
 import { IssuerIcon } from '../components/icons';
 import { decodeOtpauthMigrationLink } from '../crypto/googleAuth';
@@ -48,6 +49,28 @@ import { DummyOTPItemInfo } from '../common/dummies';
 const REFRESH_INTERVAL = 100;//ms
 const storage = LocalStorage.getShared();
 
+interface OTPItemUISpec {
+    itemHeight: number,
+    iconSize: number,
+}
+const CompactItemUISpec: OTPItemUISpec = {
+    itemHeight: 64,
+    iconSize: 48,
+};
+const NormalItemUISpec: OTPItemUISpec = {
+    itemHeight: 96,
+    iconSize: 64,
+};
+const LargeItemUISpec: OTPItemUISpec = {
+    itemHeight: 128,
+    iconSize: 64,
+};
+const OTPItemUIOptions: Map<ViewMode, OTPItemUISpec> = new Map([
+    ['compact', CompactItemUISpec],
+    ['normal',  NormalItemUISpec],
+    ['large',   LargeItemUISpec],
+]);
+
 class EditState {
     public editPageShow: boolean = false;
     public editKeyAlias: string = '';
@@ -713,6 +736,7 @@ struct OTPItem {
     @StorageProp('settingsPreviewNextToken') PreviewNextToken: boolean = false;
     @StorageProp('settingsItemSortOrder') ItemSortOrder: ItemSortOrder = 'custom';
     @StorageProp('settingsEnableDoubleClickCopy') EnableDoubleClickCopy: boolean = false;
+    @StorageProp('settingsViewMode') ViewMode: ViewMode = 'compact';
     @StorageProp('settingsDigitGroup') DigitGroup: DigitGroup = '3';
     @StorageProp('settingsShowAccountName') ShowAccountName: ShowAccountName = 'always';
     @StorageProp('settingsShowIssuerIcons') ShowIssuerIcons: boolean = true;

entry/src/main/ets/pages/SettingsPage.ets

@@ -6,7 +6,8 @@ import { SettingListItemInfo, SettingListItem, SettingListItemToggle,
     SettingListIconItem} from "../components/settings";
 import { AppLanguage, AuthTypePriority, DarkMode, DigitGroup,
     PasswordReminderPeriod,
-    ShowAccountName, ValueType } from "../common/settings";
+    ShowAccountName, ValueType,
+    ViewMode } from "../common/settings";
 import {
     ChangePasswordInputDialog,
     CustomSelectDialog, NewPasswordInputDialog, PasswordInputDialog } from "../components/dialog";
@@ -38,6 +39,12 @@ const DarkModeSelections: Map<ResourceStr, DarkMode> = new Map([
     [$r('app.string.setting_dark_mode_always_light'), 'light'],
 ]);
 
+const ViewModeSelections: Map<ResourceStr, ViewMode> = new Map([
+    [$r('app.string.setting_view_mode_compact'), 'compact'],
+    [$r('app.string.setting_view_mode_normal'),  'normal'],
+    [$r('app.string.setting_view_mode_large'),   'large'],
+]);
+
 const AppLanguageSelections: Map<ResourceStr, AppLanguage> = new Map<ResourceStr, AppLanguage>([
     [$r('app.string.setting_language_system_default'), 'default'],
     ['简体中文     ', 'zh-Hans'],
@@ -104,6 +111,8 @@ export struct SettingsPage {
     @Watch('onItChanged') AppLanguage: AppLanguage = 'default';
     @StorageProp('settingsDarkMode')
     @Watch('onItChanged') DarkMode: DarkMode = 'default';
+    @StorageProp('settingsViewMode')
+    @Watch('onItChanged') ViewMode: ViewMode = 'compact';
     @StorageProp('settingsDigitGroup')
     @Watch('onItChanged') DigitGroup: DigitGroup = '3';
     @StorageProp('settingsShowAccountName')
@@ -245,6 +254,11 @@ export struct SettingsPage {
                                 selected: this.DarkMode,
                                 entries: DarkModeSelections
                             })
+                            SettingListItemSelect({
+                                title: $r('app.string.setting_view_mode_title'),
+                                selected: this.ViewMode,
+                                entries: ViewModeSelections,
+                            })
                             SettingListItemSelect({
                                 title: $r('app.string.setting_digit_group_title'),
                                 selected: this.DigitGroup,
@@ -453,6 +467,9 @@ export struct SettingsPage {
             case            'DarkMode':
                 value = this.DarkMode;
                 break;
+            case            'ViewMode':
+                value = this.ViewMode;
+                break;
             case            'DigitGroup':
                 value = this.DigitGroup;
                 break;

entry/src/main/resources/base/element/settings.json

@@ -62,6 +62,22 @@
       "name": "setting_dark_mode_always_light",
       "value": "Always Light Mode"
     },
+    {
+      "name": "setting_view_mode_title",
+      "value": "View Mode"
+    },
+    {
+      "name": "setting_view_mode_compact",
+      "value": "Compact"
+    },
+    {
+      "name": "setting_view_mode_normal",
+      "value": "Normal"
+    },
+    {
+      "name": "setting_view_mode_large",
+      "value": "Large"
+    },
     {
       "name": "setting_language",
       "value": "Language"

entry/src/main/resources/en_US/element/settings.json

@@ -62,6 +62,22 @@
       "name": "setting_dark_mode_always_light",
       "value": "Always Light         "
     },
+    {
+      "name": "setting_view_mode_title",
+      "value": "View Mode"
+    },
+    {
+      "name": "setting_view_mode_compact",
+      "value": "Compact     "
+    },
+    {
+      "name": "setting_view_mode_normal",
+      "value": "Normal    "
+    },
+    {
+      "name": "setting_view_mode_large",
+      "value": "Large   "
+    },
     {
       "name": "setting_language",
       "value": "Language"

entry/src/main/resources/zh_CN/element/settings.json

@@ -62,6 +62,22 @@
       "name": "setting_dark_mode_always_light",
       "value": "始终浅色模式        "
     },
+    {
+      "name": "setting_view_mode_title",
+      "value": "视图模式"
+    },
+    {
+      "name": "setting_view_mode_compact",
+      "value": "紧凑模式     "
+    },
+    {
+      "name": "setting_view_mode_normal",
+      "value": "标准模式     "
+    },
+    {
+      "name": "setting_view_mode_large",
+      "value": "宽松模式     "
+    },
     {
       "name": "setting_language",
       "value": "语言"