Modal styling tweaks

manifest.json

@@ -1,7 +1,7 @@
 {
   "id": "workspaces-plus",
   "name": "Workspaces Plus",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "minAppVersion": "0.9.12",
   "description": "Quickly switch and manage workspaces",
   "author": "NothingIsLost",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "obsidian-workspaces-plus",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Quickly switch and manage workspaces",
   "main": "main.js",
   "scripts": {

src/main.ts

@@ -21,6 +21,9 @@ export default class WorkspacesPlus extends Plugin {
       // TODO: dirty hack to delay load and make sure our icon is always in the bottom right
       const WorkspacesPlusStatusBarItem = this.addStatusBarItem();
       WorkspacesPlusStatusBarItem.addClass("mod-clickable");
+      WorkspacesPlusStatusBarItem.ariaLabel = "Switch workspaces"
+      WorkspacesPlusStatusBarItem.setAttribute("aria-label-position", "top");
+      // WorkspacesPlusStatusBarItem.ariaLa = "Workspace Picker"
       const icon = WorkspacesPlusStatusBarItem.createSpan("status-bar-item-segment icon mod-clickable");
       setIcon(icon, "pane-layout"); //pane-layout
 
@@ -32,6 +35,7 @@ export default class WorkspacesPlus extends Plugin {
       WorkspacesPlusStatusBarItem.addEventListener("click", evt => {
         if (evt.shiftKey === true) {
           this.workspacePlugin.saveWorkspace(this.workspacePlugin.activeWorkspace);
+          this.app.workspace.trigger("layout-change");
           new Notice("Successfully saved workspace.");
           return;
         }
@@ -46,7 +50,7 @@ export default class WorkspacesPlus extends Plugin {
     this.addCommand({
       id: "open-workspaces-plus",
       name: "Open Workspaces Plus",
-      callback: () => new WorkspacesPlusPluginModal(this.app, this.settings).open(),
+      callback: () => new WorkspacesPlusPluginModal(this.app, this.settings, true).open(),
     });
   }
 
@@ -69,8 +73,8 @@ export default class WorkspacesPlus extends Plugin {
     var activeWorkspaceName = this.workspacePlugin.activeWorkspace; // active workspace name
     if (!Object.keys(this.workspacePlugin.workspaces).includes(activeWorkspaceName)) return true;
     var savedWorkspace = JSON.parse(JSON.stringify(this.workspacePlugin.workspaces[activeWorkspaceName]));
-    deleteProp(savedWorkspace, ["active", "dimension", "width", "pane-relief:history-v1"]);
-    deleteProp(currentWorkspace, ["active", "dimension", "width", "pane-relief:history-v1"]);
+    deleteProp(savedWorkspace, ["active", "dimension", "width", "pane-relief:history-v1", "eState"]);
+    deleteProp(currentWorkspace, ["active", "dimension", "width", "pane-relief:history-v1", "eState"]);
     return !deepEqual(currentWorkspace, savedWorkspace); // via the fast-equals package
   };
 }

src/modal.ts

@@ -106,20 +106,25 @@ export default class WorkspacesPlusPluginModal extends FuzzySuggestModal<string>
   popper: PopperInstance;
   settings: WorkspacesPlusSettings;
   showInstructions: boolean = false;
+  invokedViaHotkey: boolean;
   emptyStateText: string = "No match found. Use Shift ↵ to save as...";
 
-  constructor(app: App, settings: WorkspacesPlusSettings) {
+  constructor(app: App, settings: WorkspacesPlusSettings, hotkey: boolean = false) {
     super(app);
     this.settings = settings;
+    this.invokedViaHotkey = hotkey;
     //@ts-ignore
     this.bgEl.parentElement.setAttribute("style", "background-color: transparent !important");
-    //@ts-ignore
-    this.bgEl.setAttribute("style", "background-color: transparent");
+    if (!this.invokedViaHotkey) {
+      //@ts-ignore
+      this.bgEl.setAttribute("style", "background-color: transparent");
+      this.modalEl.classList.add("quick-switch");
+    }
     this.modalEl.classList.add("workspaces-plus-modal");
     this.resultContainerEl.on("click", ".workspace-item", this.onSuggestionClick.bind(this));
     this.resultContainerEl.on("mousemove", ".workspace-item", this.onSuggestionMouseover.bind(this));
     this.setPlaceholder("Type workspace name...");
-    if (settings.showInstructions) {
+    if (settings.showInstructions || this.invokedViaHotkey) {
       this.setInstructions([
         {
           command: "Shift ↵",
@@ -181,12 +186,14 @@ export default class WorkspacesPlusPluginModal extends FuzzySuggestModal<string>
   };
 
   open = () => {
-    this.app.keymap.pushScope(this.scope);
+    (<any>this.app).keymap.pushScope(this.scope);
     document.body.appendChild(this.containerEl);
-    this.popper = createPopper(document.body.querySelector(".plugin-workspaces-plus"), this.modalEl, {
-      placement: "top-start",
-      modifiers: [{ name: "offset", options: { offset: [0, 10] } }],
-    });
+    if (!this.invokedViaHotkey) {
+      this.popper = createPopper(document.body.querySelector(".plugin-workspaces-plus"), this.modalEl, {
+        placement: "top-start",
+        modifiers: [{ name: "offset", options: { offset: [0, 10] } }],
+      });
+    }
     this.onOpen();
   };
 
@@ -197,9 +204,11 @@ export default class WorkspacesPlusPluginModal extends FuzzySuggestModal<string>
     let selectedIdx = 0; // default to the first item
     this.chooser.setSelectedItem(selectedIdx);
     this.chooser.suggestions[this.chooser.selectedItem].scrollIntoViewIfNeeded();
-    document.body
-      .querySelector(".workspaces-plus-modal>.prompt-input")
-      .addEventListener("input", () => this.popper.update());
+    if (!this.invokedViaHotkey) {
+      document.body
+        .querySelector(".workspaces-plus-modal>.prompt-input")
+        .addEventListener("input", () => this.popper.update());
+    }
   }
 
   onClose() {
@@ -286,9 +295,13 @@ export default class WorkspacesPlusPluginModal extends FuzzySuggestModal<string>
     const resultEl = document.body.querySelector("div.workspaces-plus-modal div.prompt-results");
     resultEl.appendChild(newDiv);
     const renameIcon = newDiv.createDiv("rename-workspace");
+    renameIcon.ariaLabel = "Rename workspace";
+    renameIcon.setAttribute("aria-label-position", "top");
     renameIcon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16"><path fill="none" d="M0 0h24v24H0z"/><path d="M12.9 6.858l4.242 4.243L7.242 21H3v-4.243l9.9-9.9zm1.414-1.414l2.121-2.122a1 1 0 0 1 1.414 0l2.829 2.829a1 1 0 0 1 0 1.414l-2.122 2.121-4.242-4.242z"/></svg>`;
     renameIcon.addEventListener("click", event => this.onRenameClick(event, el));
     const deleteIcon = newDiv.createDiv("delete-workspace");
+    deleteIcon.ariaLabel = "Delete workspace";
+    deleteIcon.setAttribute("aria-label-position", "top");
     deleteIcon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16"><path fill="none" d="M0 0h24v24H0z"/><path d="M7 4V2h10v2h5v2h-2v15a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6H2V4h5zM6 6v14h12V6H6zm3 3h2v8H9V9zm4 0h2v8h-2V9z"/></svg>`;
     deleteIcon.addEventListener("click", event => this.deleteWorkspace());
   }

src/settings.ts

@@ -26,7 +26,7 @@ export class WorkspacesPlusSettingsTab extends PluginSettingTab {
 
     new Setting(containerEl)
       .setName("Show instructions")
-      .setDesc(`Show instructions on the workspace dropdown that explain the various keyboard shortcuts`)
+      .setDesc(`Show available keyboard shortcuts at the bottom of the workspace quick switcher`)
       .addToggle(toggle =>
         toggle.setValue(this.plugin.settings.showInstructions).onChange(value => {
           this.plugin.settings.showInstructions = value;

styles.css

@@ -1,6 +1,9 @@
 .workspaces-plus-modal {
   box-shadow: 0px 0px 17px 4px var(--background-modifier-box-shadow);
   z-index: var(--layer-menu);
+}
+
+.workspaces-plus-modal.quick-switch {
   width: unset;
 }
 
@@ -41,10 +44,12 @@
   fill: var(--text-accent-hover);
 }
 
-.workspace-results {padding: .1em .1em;}
+.workspace-results {
+  padding: 0.1em 0.1em;
+}
 
-.workspace-item.is-selected~.rename-workspace,
-.workspace-item.is-selected~.delete-workspace {
+.workspace-item.is-selected ~ .rename-workspace,
+.workspace-item.is-selected ~ .delete-workspace {
   opacity: 1;
 }
 
@@ -98,6 +103,6 @@
   box-shadow: 0 0 0 0.1px rgba(0, 0, 0, 0.1), 0 0 0 3px hsla(var(--accent-hsl), 0.15);
 }
 
-.workspace-item[contenteditable="true"]:focus~div {
+.workspace-item[contenteditable="true"]:focus ~ div {
   display: none;
-}
+}

versions.json

@@ -1,4 +1,5 @@
 {
+  "0.1.2": "0.9.12",
   "0.1.1": "0.9.12",
   "0.1.0": "0.9.12",
   "0.0.8": "0.9.12",