Add icons for mobile ease of access

alangrainger · Oct 18, 2023 · fc52cda · fc52cda
1 parent faebb0e
commit fc52cda
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 2 deletions.
diff --git a/src/main.ts b/src/main.ts
@@ -1,4 +1,4 @@
-import { Plugin, TFile } from 'obsidian'
+import { Plugin, setIcon, TFile, Workspace } from 'obsidian'
 import { DEFAULT_SETTINGS, ShareSettings, ShareSettingsTab, YamlField } from './settings'
 import Note from './note'
 import API from './api'
@@ -56,6 +56,40 @@ export default class SharePlugin extends Plugin {
       }
     })
 
+    // Add share icons to properties panel
+    this.registerEvent(this.app.workspace.on('active-leaf-change', () => {
+      console.log('icons')
+      // I tried using onLayoutReady() here rather than a timeout, but it did not work.
+      // It seems that the layout is still updating even after it is "ready".
+      setTimeout(() => {
+        document.querySelectorAll(`div.metadata-property[data-property-key="${this.field(YamlField.link)}"]`)
+          .forEach(propertyEl => {
+            const valueEl = propertyEl.querySelector('div.metadata-property-value')
+            if (valueEl && !valueEl.querySelector('div.share-note-icons')) {
+              const iconsEl = document.createElement('div')
+              iconsEl.classList.add('share-note-icons')
+              // Re-share note icon
+              const shareIcon = iconsEl.createEl('span')
+              shareIcon.title = 'Re-share note'
+              setIcon(shareIcon, 'upload')
+              shareIcon.onclick = () => this.uploadNote()
+              // Copy to clipboard icon
+              const copyIcon = iconsEl.createEl('span')
+              copyIcon.title = 'Copy link to clipboard'
+              setIcon(copyIcon, 'copy')
+              copyIcon.onclick = async () => {
+                const link = propertyEl.querySelector('div.metadata-link-inner.external-link') as HTMLElement
+                if (link) {
+                  await navigator.clipboard.writeText(link.innerText)
+                  new StatusMessage('📋 Shared link copied to clipboard')
+                }
+              }
+              valueEl.prepend(iconsEl)
+            }
+          })
+      }, 200)
+    }))
+
     // Add command - Share note
     this.addCommand({
       id: 'share-note',

diff --git a/src/note.ts b/src/note.ts
@@ -1,4 +1,4 @@
-import { CachedMetadata, FileSystemAdapter, moment, requestUrl, TFile, WorkspaceLeaf } from 'obsidian'
+import { CachedMetadata, FileSystemAdapter, moment, requestUrl, setIcon, TFile, WorkspaceLeaf } from 'obsidian'
 import { encryptString, sha1 } from './crypto'
 import SharePlugin from './main'
 import StatusMessage, { StatusType } from './StatusMessage'

diff --git a/styles.css b/styles.css
@@ -12,3 +12,13 @@
     background: #629762;
     color: white
 }
+
+.share-note-icons {
+    display: flex;
+}
+
+.share-note-icons > span {
+    display: flex;
+    margin-left: 5px;
+    cursor: pointer;
+}