diff --git a/README.md b/README.md index 425146c..cc51945 100644 --- a/README.md +++ b/README.md @@ -39,8 +39,8 @@ sorting-spec: | --- ``` -Click the ribbon button (![Inactive](./docs/icons/icon-inactive.png)) to tell the plugin to read the sorting specification and apply it. -The ribbon icon should turn (![Active](./docs/icons/icon-active.png)) and the sorting should be applied to the folder +Click the ribbon button (![Inactive](./docs/icons/icon-inactive.png) or ![Static icon](./docs/icons/icon-mobile-initial.png) on phone) to tell the plugin to read the sorting specification and apply it. +The sorting should be applied to the folder. On desktops and tablets the ribbon icon should turn (![Active](./docs/icons/icon-active.png)) !!! **Done!** !!! @@ -115,16 +115,30 @@ Refer to the [TL;DR section of advanced README.md](./advanced-README.md#tldr-usa Click the ribbon icon to toggle the plugin between enabled and suspended states. -States of the ribbon icon: +States of the ribbon icon on large-screen devices (desktops, laptops and tablets like iPad): - ![Inactive](./docs/icons/icon-inactive.png) Plugin suspended. Custom sorting NOT applied. - ![Active](./docs/icons/icon-active.png) Plugin active, custom sorting applied. - ![Error](./docs/icons/icon-error.png) Syntax error in custom sorting configuration. - ![General Error](./docs/icons/icon-general-error.png) Plugin suspended. General error. -- ![Sorting not applied](./docs/icons/icon-not-applied.png) Plugin enabled but the custom sorting was not applied. +- ![Sorting not applied](./docs/icons/icon-not-applied.png) Plugin enabled, but the custom sorting was not applied. +- ![Static icon](./docs/icons/icon-mobile-initial.png) (Only on large-screen mobile devices like iPad). + Plugin enabled. but the custom sorting was not applied. + +On small-screen mobile devices (phones) the icon is static: + +- ![Static icon](./docs/icons/icon-mobile-initial.png) The icon acts as a button to toggle between enabled and disabled. Its appearance doesn't change For more details on the icon states refer to [Ribbon icon section of the advanced-README.md](./advanced-README.md#ribbon-icon) +## Small screen mobile devices remarks + +- enable mobile-specific notifications +- use the 'sort on' Obsidian command palette being easily available + (swipe down gesture on small-screen mobiles) allows for quick steering of the plugin via commands: sort-on and sort-off + +could need to activate separately, even if on shared vault and active on desktop + ## Installing the plugin ### From the official Obsidian Community Plugins page diff --git a/advanced-README.md b/advanced-README.md index 5131b8d..3e6d472 100644 --- a/advanced-README.md +++ b/advanced-README.md @@ -72,11 +72,11 @@ can be the root folder. Ensure the exact file name is `sortspec.md`. That file c > > ![sortspec.md](./docs/img/sortspec-md-dark.jpg) > 2. Enable the plugin in obsidian. > -> 3. Click the ribbon button (![Inactive](./docs/icons/icon-inactive.png)) to tell the plugin to read the sorting +> 3. Click the ribbon button (![Inactive](./docs/icons/icon-inactive.png) or ![Mobile](./docs/icons/icon-mobile-initial.png) on phone) to tell the plugin to read the sorting specification from `sortspec` note (the `sortspec.md` file which you downloaded a second ago). -> - The observable effect should be the change of appearance of the ribbon button to -(![Active](./docs/icons/icon-active.png)) and reordering -of items in root vault folder to reverse alphabetical with folders and files treated equally. +> - The observable effect should be reordering of items in root vault folder to reverse alphabetical with folders and files treated equally. +And on computers and tablets be the change of appearance of the ribbon button to +![Active](./docs/icons/icon-active.png) (on desktop and tablet only) and > - The notification balloon should confirm success: ![Success](./docs/icons/parsing-succeeded.png) > 4. Click the ribbon button again to suspend the plugin. The ribbon button should toggle its appearance again and the order of files and folders in the root folder of your vault should get back to the order selected in @@ -570,7 +570,7 @@ reference. Click the ribbon icon to toggle the plugin between enabled and suspended states. -States of the ribbon icon: +States of the ribbon icon on large-screen devices (desktops, laptops and tablets like iPad): - ![Inactive](./docs/icons/icon-inactive.png) Plugin suspended. Custom sorting NOT applied. - Click to enable and apply custom sorting. @@ -591,6 +591,14 @@ States of the ribbon icon: - ![Sorting not applied](./docs/icons/icon-not-applied.png) Plugin enabled but the custom sorting was not applied. - This can happen when reinstalling the plugin and in similar cases - Click the ribbon icon twice to re-enable the custom sorting. +- ![Static icon](./docs/icons/icon-mobile-initial.png) Only on large-screen mobile devices like iPad. + - Plugin enabled. but the custom sorting was not applied. + +On small-screen mobile devices (phones) the icon is static: + +- ![Static icon](./docs/icons/icon-mobile-initial.png) The icon acts as a button to toggle between enabled and disabled. Its appearance doesn't change + - Click to enable and apply custom sorting or to disable custom sorting + - To get notified about custom sort plugin state, enable the mobile-specific notifications in plugin settings ## Installing the plugin diff --git a/docs/icons/icon-mobile-initial.png b/docs/icons/icon-mobile-initial.png new file mode 100644 index 0000000..6dde367 Binary files /dev/null and b/docs/icons/icon-mobile-initial.png differ diff --git a/src/custom-sort/icons.ts b/src/custom-sort/icons.ts index 1e0a7c0..5991501 100644 --- a/src/custom-sort/icons.ts +++ b/src/custom-sort/icons.ts @@ -1,6 +1,7 @@ import {addIcon} from "obsidian"; export const ICON_SORT_ENABLED_ACTIVE: string = 'custom-sort-icon-active' +export const ICON_SORT_MOBILE_INITIAL: string = 'custom-sort-icon-mobile-initial' export const ICON_SORT_SUSPENDED: string = 'custom-sort-icon-suspended' export const ICON_SORT_ENABLED_NOT_APPLIED: string = 'custom-sort-icon-enabled-not-applied' export const ICON_SORT_SUSPENDED_SYNTAX_ERROR: string = 'custom-sort-icon-syntax-error' @@ -13,6 +14,12 @@ export function addIcons() { +` + ) + addIcon(ICON_SORT_MOBILE_INITIAL, + ` + + ` ) addIcon(ICON_SORT_SUSPENDED, diff --git a/src/main.ts b/src/main.ts index 2396c7c..11ea059 100644 --- a/src/main.ts +++ b/src/main.ts @@ -4,6 +4,7 @@ import { MetadataCache, Notice, normalizePath, + Platform, Plugin, PluginSettingTab, sanitizeHTMLToDom, @@ -23,6 +24,7 @@ import { addIcons, ICON_SORT_ENABLED_ACTIVE, ICON_SORT_ENABLED_NOT_APPLIED, + ICON_SORT_MOBILE_INITIAL, ICON_SORT_SUSPENDED, ICON_SORT_SUSPENDED_GENERAL_ERROR, ICON_SORT_SUSPENDED_SYNTAX_ERROR @@ -33,13 +35,15 @@ interface CustomSortPluginSettings { suspended: boolean statusBarEntryEnabled: boolean notificationsEnabled: boolean + mobileNotificationsEnabled: boolean } const DEFAULT_SETTINGS: CustomSortPluginSettings = { additionalSortspecFile: '', suspended: true, // if false by default, it would be hard to handle the auto-parse after plugin install statusBarEntryEnabled: true, - notificationsEnabled: true + notificationsEnabled: true, + mobileNotificationsEnabled: false } const SORTSPEC_FILE_NAME: string = 'sortspec.md' @@ -53,8 +57,8 @@ type MonkeyAroundUninstaller = () => void export default class CustomSortPlugin extends Plugin { settings: CustomSortPluginSettings statusBarItemEl: HTMLElement - ribbonIconEl: HTMLElement - ribbonIconStateInaccurate: boolean + ribbonIconEl: HTMLElement // On small-screen mobile devices this is useless (ribbon is re-created on-the-fly) + ribbonIconStateInaccurate: boolean // each time when displayed sortSpecCache?: SortSpecsCollection | null initialAutoOrManualSortingTriggered: boolean @@ -62,7 +66,7 @@ export default class CustomSortPlugin extends Plugin { fileExplorerFolderPatched: boolean showNotice(message: string, timeout?: number) { - if (this.settings.notificationsEnabled) { + if (this.settings.notificationsEnabled || (Platform.isMobile && this.settings.mobileNotificationsEnabled)) { new Notice(message, timeout) } } @@ -202,6 +206,8 @@ export default class CustomSortPlugin extends Plugin { } if (updateRibbonBtnIcon) { + // REMARK: on small-screen mobile devices this is void, the handle to ribbon
Element is useless, + // as the ribbon (and its icons) get re-created each time when re-displayed (expanded) setIcon(this.ribbonIconEl, iconToSet) } @@ -222,8 +228,14 @@ export default class CustomSortPlugin extends Plugin { addIcons(); // Create an icon button in the left ribbon. + // REMARK: on small-screen mobile devices, the ribbon is dynamically re-created each time when displayed + // in result, the handle to the ribbon
Element is useless this.ribbonIconEl = this.addRibbonIcon( - this.settings.suspended ? ICON_SORT_SUSPENDED : ICON_SORT_ENABLED_NOT_APPLIED, + Platform.isDesktop ? + (this.settings.suspended ? ICON_SORT_SUSPENDED : ICON_SORT_ENABLED_NOT_APPLIED) + : + ICON_SORT_MOBILE_INITIAL // REMARK: on small-screen mobile devices this icon stays permanent + , 'Toggle custom sorting', (evt: MouseEvent) => { // Clicking the icon toggles between the states of custom sort plugin this.switchPluginStateTo(this.settings.suspended) @@ -454,5 +466,15 @@ class CustomSortSettingTab extends PluginSettingTab { this.plugin.settings.notificationsEnabled = value; await this.plugin.saveSettings(); })); + + new Setting(containerEl) + .setName('Enable notifications of plugin state changes for mobile devices only') + .setDesc('See above.') + .addToggle(toggle => toggle + .setValue(this.plugin.settings.mobileNotificationsEnabled) + .onChange(async (value) => { + this.plugin.settings.mobileNotificationsEnabled = value; + await this.plugin.saveSettings(); + })); } }