feat: show pin icon

hdykokd · Jul 9, 2023 · ffd9041 · ffd9041
1 parent 496733e
commit ffd9041
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 18 deletions.
diff --git a/src/main.ts b/src/main.ts
@@ -31,7 +31,7 @@ export default class VerticalTabsView extends Plugin {
 
   registerViewExtension() {
     this.registerView(VIEW_TYPE_VERTICAL_TABS, (leaf) => {
-      return new VerticalTabsViewView(leaf);
+      return new VerticalTabsViewView(this, leaf);
     });
     this.addCommand({
       id: 'vertical-tabs-view-show',

diff --git a/src/setting.ts b/src/setting.ts
@@ -1,6 +1,6 @@
 import { PluginSettingTab, App } from 'obsidian';
 import VerticalTabsView from './main';
-import { createSelect } from './util/setting';
+import { createSelect, createToggle } from './util/setting';
 
 export const DEFAULT_POSITION_OPTIONS = {
   left: 'left',
@@ -10,10 +10,14 @@ export const DEFAULT_POSITION_OPTIONS = {
 // eslint-disable-next-line
 export interface VerticalTabsViewSettings {
   defaultPosition: (typeof DEFAULT_POSITION_OPTIONS)[keyof typeof DEFAULT_POSITION_OPTIONS];
+  showPinnedIcon: boolean;
+  showPinIconIfNotPinned: boolean;
 }
 
 export const DEFAULT_SETTINGS: VerticalTabsViewSettings = {
   defaultPosition: 'left',
+  showPinnedIcon: true,
+  showPinIconIfNotPinned: true,
 };
 
 export class VerticalTabsViewSettingTab extends PluginSettingTab {
@@ -42,5 +46,19 @@ export class VerticalTabsViewSettingTab extends PluginSettingTab {
         this.plugin.saveSettings();
       },
     );
+    createToggle(containerEl, 'Show pinned icon', '', this.plugin.settings.showPinnedIcon, (value) => {
+      this.plugin.settings.showPinnedIcon = value;
+      this.plugin.saveSettings();
+    });
+    createToggle(
+      containerEl,
+      'Show pin icon if not pinned',
+      '',
+      this.plugin.settings.showPinIconIfNotPinned,
+      (value) => {
+        this.plugin.settings.showPinIconIfNotPinned = value;
+        this.plugin.saveSettings();
+      },
+    );
   }
 }
diff --git a/src/view.ts b/src/view.ts
@@ -1,4 +1,5 @@
 import { ItemView, setIcon, WorkspaceLeaf } from 'obsidian';
+import VerticalTabsView from './main';
 
 const VIEW_PREFIX = 'vertical-tabs-view';
 const VIEW_CONTAINER_ID = VIEW_PREFIX + '-container';
@@ -7,8 +8,11 @@ const VIEW_CONTENT_ID = VIEW_PREFIX + '-content';
 export const VIEW_TYPE_VERTICAL_TABS = 'view-type-vertical-tabs-view';
 
 export class VerticalTabsViewView extends ItemView {
-  constructor(leaf: WorkspaceLeaf) {
+  plugin: VerticalTabsView;
+
+  constructor(plugin: VerticalTabsView, leaf: WorkspaceLeaf) {
     super(leaf);
+    this.plugin = plugin;
 
     this.updateView();
 
@@ -77,6 +81,14 @@ export class VerticalTabsViewView extends ItemView {
     // @ts-expect-error
     const leaves = this.app.workspace.getLeavesOfType('markdown').filter((l) => leavesInMain.includes(l.id));
 
+    const createPinIcon = (icon: 'pin' | 'pin-off', onClick: GlobalEventHandlers['onclick']) => {
+      const pinBtn = document.createElement('div');
+      pinBtn.className = `vertical-tabs-view-list-item-pin-btn vertical-tabs-view-list-item-pin-btn-${icon}`;
+      setIcon(pinBtn, icon);
+      pinBtn.onclick = onClick;
+      return pinBtn;
+    };
+
     leaves.forEach((leaf) => {
       const listItem = document.createElement('li');
       listItem.className = 'vertical-tabs-view-list-item';
@@ -89,36 +101,55 @@ export class VerticalTabsViewView extends ItemView {
         this.app.workspace.setActiveLeaf(leaf);
       };
 
+      const listItemLeftContainer = document.createElement('div');
+      listItemLeftContainer.className = 'vertical-tabs-view-list-item-left-container';
+      listItemLeftContainer.setChildrenInPlace([]);
+      const listItemRightContainer = document.createElement('div');
+      listItemRightContainer.className = 'vertical-tabs-view-list-item-right-container';
+      listItemRightContainer.setChildrenInPlace([]);
+
       // close button
       const closeBtn = document.createElement('div');
       closeBtn.className = 'vertical-tabs-view-list-item-close-btn';
       setIcon(closeBtn, 'x');
       closeBtn.onclick = () => {
         leaf.detach();
       };
-      listItem.appendChild(closeBtn);
 
+      // dir / title
       const listItemNameContainer = document.createElement('div');
       listItemNameContainer.className = 'vertical-tabs-view-list-item-name-container';
 
+      // @ts-expect-error
+      const file = leaf.view.file;
+
       const dirname = document.createElement('span');
       dirname.className = 'vertical-tabs-view-list-item-dirname';
-      // @ts-expect-error
-      dirname.innerText = leaf.view.file.parent.path;
+      dirname.innerText = file.parent.path;
       const title = document.createElement('span');
       title.className = 'vertical-tabs-view-list-item-title';
-      // @ts-expect-error
-      title.innerText = leaf.view.file.name.split('.').slice(0, -1);
+      title.innerText = file.name.split('.').slice(0, -1);
       listItemNameContainer.setChildrenInPlace([dirname, title]);
 
-      listItem.appendChild(listItemNameContainer);
+      listItemLeftContainer.setChildrenInPlace([closeBtn, listItemNameContainer]);
+
+      // pin button
+      // @ts-expect-error
+      const pinned = leaf.pinned;
+      if (this.plugin.settings.showPinnedIcon && pinned) {
+        const pinnedBtn = createPinIcon('pin', () => {
+          leaf.setPinned(false);
+        });
+        listItemRightContainer.appendChild(pinnedBtn);
+      }
+      if (this.plugin.settings.showPinIconIfNotPinned && !pinned) {
+        const pinnedBtn = createPinIcon('pin-off', () => {
+          leaf.setPinned(true);
+        });
+        listItemRightContainer.appendChild(pinnedBtn);
+      }
 
-      // if (leaf.pinned) {
-      //   const pinBtn = document.createElement('div');
-      //   pinBtn.className = 'vertical-tabs-view-list-item-pin-btn';
-      //   setIcon(pinBtn, 'pin');
-      //   listItem.appendChild(pinBtn);
-      // }
+      listItem.setChildrenInPlace([listItemLeftContainer, listItemRightContainer]);
 
       ul.appendChild(listItem);
     });

diff --git a/styles.css b/styles.css
@@ -13,7 +13,7 @@ ul.vertical-tabs-view-list {
 .vertical-tabs-view-list li {
   display: flex;
   flex-direction: row;
-  align-items: center;
+  justify-content: space-between;
   color: var(--tab-text-color);
   font-size: var(--tab-font-size);
   font-weight: var(--tab-font-weight);
@@ -25,19 +25,38 @@ ul.vertical-tabs-view-list {
   text-overflow: ellipsis;
 }
 
+.vertical-tabs-view-list li .vertical-tabs-view-list-item-left-container,
+.vertical-tabs-view-list li .vertical-tabs-view-list-item-right-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.vertical-tabs-view-list li .vertical-tabs-view-list-item-right-container {
+  margin-top: 0.5em;
+  margin-right: 0.5em;
+}
+
 .vertical-tabs-view-list li:hover {
   color: var(--tab-text-color-focused);
   background-color: var(--tab-background-active);
 }
 
-.vertical-tabs-view-list li .vertical-tabs-view-list-item-close-btn {
+.vertical-tabs-view-list li .vertical-tabs-view-list-item-close-btn,
+.vertical-tabs-view-list li .vertical-tabs-view-list-item-pin-btn {
   color: var(--tab-text-color);
 }
-.vertical-tabs-view-list li .vertical-tabs-view-list-item-close-btn:hover {
+.vertical-tabs-view-list li .vertical-tabs-view-list-item-close-btn:hover,
+.vertical-tabs-view-list li .vertical-tabs-view-list-item-pin-btn:hover {
   color: var(--tab-text-color-focused);
   background-color: var(--tab-background-active);
 }
 
+.vertical-tabs-view-list li .vertical-tabs-view-list-item-pin-btn {
+  --icon-size: var(--icon-xs);
+  --icon-stroke: var(--icon-xs-stroke-width);
+}
+
 .vertical-tabs-view-list li.focused {
   color: var(--tab-text-color-focused);
   background-color: var(--tab-background-active);