mobile status bar

src/baseTypes.ts

@@ -117,6 +117,8 @@ export interface RemotelySavePluginSettings {
 
   obfuscateSettingFile?: boolean;
 
+  enableMobileStatusBar?: boolean;
+
   /**
    * @deprecated
    */

src/langs/en.json

@@ -264,6 +264,8 @@
   "setting_syncdirection_bidirectional_desc": "Bidirectional (default)",
   "setting_syncdirection_incremental_push_only_desc": "Incremental Push Only (aka backup mode)",
   "setting_syncdirection_incremental_pull_only_desc": "Incremental Pull Only",
+  "settings_enablemobilestatusbar": "Enable Mobile Status Bar Or Not",
+  "settings_enablemobilestatusbar_desc": "By default Obsidian mobile hides status bar. But some users want to show it up. So here is a hack.",
   "settings_importexport": "Import and Export Partial Settings",
   "settings_export": "Export",
   "settings_export_desc": "Export not-oauth2 settings by generating a qrcode.",

src/langs/zh_cn.json

@@ -264,6 +264,8 @@
   "setting_syncdirection_bidirectional_desc": "双向同步（默认）",
   "setting_syncdirection_incremental_push_only_desc": "只增量推送（也即：备份模式）",
   "setting_syncdirection_incremental_pull_only_desc": "只增量拉取",
+  "settings_enablemobilestatusbar": "是否显示手机的状态栏",
+  "settings_enablemobilestatusbar_desc": "Obsidian 手机版默认隐藏了状态栏。有些用户希望展示它。这里提供了设置选项。",
   "settings_importexport": "导入导出部分设置",
   "settings_export": "导出",
   "settings_export_desc": "用 QR 码导出非 oauth2 的设置信息。",

src/langs/zh_tw.json

@@ -264,6 +264,8 @@
   "setting_syncdirection_bidirectional_desc": "雙向同步（預設）",
   "setting_syncdirection_incremental_push_only_desc": "只增量推送（也即：備份模式）",
   "setting_syncdirection_incremental_pull_only_desc": "只增量拉取",
+  "settings_enablemobilestatusbar": "是否顯示手機的狀態列",
+  "settings_enablemobilestatusbar_desc": "Obsidian 手機版預設隱藏了狀態列。有些使用者希望展示它。這裡提供了設定選項。",
   "settings_importexport": "匯入匯出部分設定",
   "settings_export": "匯出",
   "settings_export_desc": "用 QR 碼匯出非 oauth2 的設定資訊。",

src/main.ts

@@ -66,7 +66,7 @@ import { SyncAlgoV3Modal } from "./syncAlgoV3Notice";
 
 import AggregateError from "aggregate-error";
 import { exportVaultSyncPlansToFiles } from "./debugMode";
-import { compareVersion } from "./misc";
+import { changeMobileStatusBar, compareVersion } from "./misc";
 
 const DEFAULT_SETTINGS: RemotelySavePluginSettings = {
   s3: DEFAULT_S3_CONFIG,
@@ -96,6 +96,7 @@ const DEFAULT_SETTINGS: RemotelySavePluginSettings = {
   protectModifyPercentage: 50,
   syncDirection: "bidirectional",
   obfuscateSettingFile: true,
+  enableMobileStatusBar: false,
 };
 
 interface OAuth2Info {
@@ -722,8 +723,14 @@ export default class RemotelySavePlugin extends Plugin {
       async () => this.syncRun("manual")
     );
 
-    // Create Status Bar Item (not supported on mobile)
-    if (!Platform.isMobileApp && this.settings.enableStatusBarInfo === true) {
+    this.enableMobileStatusBarIfSet();
+
+    // Create Status Bar Item
+    if (
+      (!Platform.isMobile ||
+        (Platform.isMobile && this.settings.enableMobileStatusBar)) &&
+      this.settings.enableStatusBarInfo === true
+    ) {
       const statusBarItem = this.addStatusBarItem();
       this.statusBarElement = statusBarItem.createEl("span");
       this.statusBarElement.setAttribute("data-tooltip-position", "top");
@@ -900,6 +907,10 @@ export default class RemotelySavePlugin extends Plugin {
       this.settings.obfuscateSettingFile = true;
     }
 
+    if (this.settings.enableMobileStatusBar === undefined) {
+      this.settings.enableMobileStatusBar = false;
+    }
+
     await this.saveSettings();
   }
 
@@ -1135,6 +1146,12 @@ export default class RemotelySavePlugin extends Plugin {
     }
   }
 
+  enableMobileStatusBarIfSet() {
+    if (Platform.isMobile && this.settings.enableMobileStatusBar) {
+      changeMobileStatusBar("enable");
+    }
+  }
+
   async saveAgreeToUseNewSyncAlgorithm() {
     this.settings.agreeToUseSyncV3 = true;
     await this.saveSettings();

src/misc.ts

@@ -503,3 +503,23 @@ export const stringToFragment = (string: string) => {
   wrapper.innerHTML = string;
   return wrapper.content;
 };
+
+/**
+ * https://forum.obsidian.md/t/css-to-show-status-bar-on-mobile-devices/77185
+ * @param op
+ */
+export const changeMobileStatusBar = (op: "enable" | "disable") => {
+  if (op === "enable") {
+    (
+      document.querySelector(
+        ".is-mobile .app-container .status-bar"
+      ) as HTMLElement
+    ).style.setProperty("display", "flex");
+  } else {
+    (
+      document.querySelector(
+        ".is-mobile .app-container .status-bar"
+      ) as HTMLElement
+    ).style.setProperty("display", "none");
+  }
+};

src/settings.ts

@@ -45,7 +45,11 @@ import {
 } from "./remoteForOnedrive";
 import { messyConfigToNormal } from "./configPersist";
 import type { TransItemType } from "./i18n";
-import { checkHasSpecialCharForDir, stringToFragment } from "./misc";
+import {
+  changeMobileStatusBar,
+  checkHasSpecialCharForDir,
+  stringToFragment,
+} from "./misc";
 import { simpleTransRemotePrefix } from "./remoteForS3";
 
 class PasswordModal extends Modal {
@@ -2017,6 +2021,36 @@ export class RemotelySaveSettingTab extends PluginSettingTab {
           });
       });
 
+    if (Platform.isMobile) {
+      new Setting(advDiv)
+        .setName(t("settings_enablemobilestatusbar"))
+        .setDesc(t("settings_enablemobilestatusbar_desc"))
+        .addDropdown(async (dropdown) => {
+          dropdown
+            .addOption("enable", t("enable"))
+            .addOption("disable", t("disable"));
+
+          dropdown
+            .setValue(
+              `${
+                this.plugin.settings.enableMobileStatusBar
+                  ? "enable"
+                  : "disable"
+              }`
+            )
+            .onChange(async (val) => {
+              if (val === "enable") {
+                this.plugin.settings.enableMobileStatusBar = true;
+                changeMobileStatusBar("enable");
+              } else {
+                this.plugin.settings.enableMobileStatusBar = false;
+                changeMobileStatusBar("disable");
+              }
+              await this.plugin.saveSettings();
+            });
+        });
+    }
+
     //////////////////////////////////////////////////
     // below for import and export functions
     //////////////////////////////////////////////////