Merge pull request #10 from tokuhirom/configurable-box-size

Make box size configurable
tokuhirom · May 12, 2021 · 125137e · 125137e
2 parents 6b8b493 + 2ef0e8d
commit 125137e
Show file tree

Hide file tree

Showing 10 changed files with 131 additions and 5 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,4 +8,7 @@ package-lock.json
 
 # build
 main.js
-*.js.map
+*.js.map
+
+# obsidian
+data.json
diff --git a/src/Settings.ts b/src/Settings.ts
@@ -0,0 +1,53 @@
+import { App, PluginSettingTab, Setting } from "obsidian";
+import TwohopLinksPlugin from "./main";
+
+export interface TwohopPluginSettings {
+  boxWidth: string;
+  boxHeight: string;
+}
+
+export const DEFAULT_SETTINGS: TwohopPluginSettings = {
+  boxWidth: "162px",
+  boxHeight: "178px",
+};
+
+export class TwohopSettingTab extends PluginSettingTab {
+  plugin: TwohopLinksPlugin;
+
+  constructor(app: App, plugin: TwohopLinksPlugin) {
+    super(app, plugin);
+    this.plugin = plugin;
+  }
+
+  display(): void {
+    const containerEl = this.containerEl;
+
+    containerEl.empty();
+
+    new Setting(containerEl)
+      .setName("Box Width")
+      .setDesc("Width of the boxes")
+      .addText((text) =>
+        text
+          .setPlaceholder(DEFAULT_SETTINGS.boxWidth)
+          .setValue(this.plugin.settings.boxWidth)
+          .onChange(async (value) => {
+            this.plugin.settings.boxWidth = value;
+            await this.plugin.saveSettings();
+          })
+      );
+
+    new Setting(containerEl)
+      .setName("Box Height")
+      .setDesc("Height of the boxes")
+      .addText((text) =>
+        text
+          .setPlaceholder(DEFAULT_SETTINGS.boxHeight)
+          .setValue(this.plugin.settings.boxHeight)
+          .onChange(async (value) => {
+            this.plugin.settings.boxHeight = value;
+            await this.plugin.saveSettings();
+          })
+      );
+  }
+}
diff --git a/src/main.tsx b/src/main.tsx
@@ -6,11 +6,20 @@ import { TwohopLink } from "./model/TwohopLink";
 import TwohopLinksRootView from "./ui/TwohopLinksRootView";
 import { TagLinks } from "./model/TagLinks";
 import { path2linkText } from "./utils";
+import {
+  DEFAULT_SETTINGS,
+  TwohopPluginSettings,
+  TwohopSettingTab,
+} from "./Settings";
 
 export default class TwohopLinksPlugin extends Plugin {
+  settings: TwohopPluginSettings;
+
   async onload(): Promise<void> {
     console.debug("------ loading obsidian-twohop-links plugin");
 
+    await this.loadSettings();
+
     this.app.workspace.on("file-open", this.renderTwohopLinks.bind(this));
     this.app.metadataCache.on("resolve", async (file) => {
       const activeFile: TFile = this.app.workspace.getActiveFile();
@@ -20,6 +29,8 @@ export default class TwohopLinksPlugin extends Plugin {
         }
       }
     });
+
+    this.addSettingTab(new TwohopSettingTab(this.app, this));
   }
 
   private async renderTwohopLinks() {
@@ -144,6 +155,8 @@ export default class TwohopLinksPlugin extends Plugin {
         tagLinksList={tagLinksList}
         onClick={this.openFile.bind(this)}
         getPreview={this.readPreview.bind(this)}
+        boxWidth={this.settings.boxWidth}
+        boxHeight={this.settings.boxHeight}
       />,
       container
     );
@@ -328,4 +341,12 @@ export default class TwohopLinksPlugin extends Plugin {
   onunload(): void {
     console.log("unloading plugin");
   }
+
+  private async loadSettings(): Promise<void> {
+    this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
+  }
+
+  async saveSettings(): Promise<void> {
+    return this.saveData(this.settings);
+  }
 }
diff --git a/src/ui/ConnectedLinksView.tsx b/src/ui/ConnectedLinksView.tsx
@@ -6,6 +6,8 @@ interface ConnectedLinksViewProps {
   fileEntities: FileEntity[];
   onClick: (fileEntity: FileEntity) => Promise<void>;
   getPreview: (fileEntity: FileEntity) => Promise<string>;
+  boxWidth: string;
+  boxHeight: string;
 }
 
 export default class ConnectedLinksView extends React.Component<ConnectedLinksViewProps> {
@@ -19,6 +21,10 @@ export default class ConnectedLinksView extends React.Component<ConnectedLinksVi
         <div className="twohop-links-section">
           <div
             className={"twohop-links-box twohop-links-connected-links-header"}
+            style={{
+              width: this.props.boxWidth,
+              height: this.props.boxHeight,
+            }}
           >
             Links
           </div>
@@ -29,6 +35,8 @@ export default class ConnectedLinksView extends React.Component<ConnectedLinksVi
                 key={it.key()}
                 onClick={this.props.onClick}
                 getPreview={this.props.getPreview}
+                boxWidth={this.props.boxWidth}
+                boxHeight={this.props.boxHeight}
               />
             );
           })}

diff --git a/src/ui/LinkView.tsx b/src/ui/LinkView.tsx
@@ -5,6 +5,8 @@ interface LinkViewProps {
   fileEntity: FileEntity;
   onClick: (fileEntity: FileEntity) => Promise<void>;
   getPreview: (fileEntity: FileEntity) => Promise<string>;
+  boxWidth: string;
+  boxHeight: string;
 }
 
 interface LinkViewState {
@@ -32,6 +34,7 @@ export default class LinkView extends React.Component<
         onClick={async () => this.props.onClick(this.props.fileEntity)}
         // To overwrite CodeMirror's handler
         onMouseDown={async () => this.props.onClick(this.props.fileEntity)}
+        style={{ width: this.props.boxWidth, height: this.props.boxHeight }}
       >
         <div className="twohop-links-box-title">
           {this.props.fileEntity.linkText}

diff --git a/src/ui/NewLinksView.tsx b/src/ui/NewLinksView.tsx
@@ -6,6 +6,8 @@ interface NewLinksViewProps {
   fileEntities: FileEntity[];
   onClick: (fileEntity: FileEntity) => Promise<void>;
   getPreview: (fileEntity: FileEntity) => Promise<string>;
+  boxWidth: string;
+  boxHeight: string;
 }
 
 export default class NewLinksView extends React.Component<NewLinksViewProps> {
@@ -17,7 +19,13 @@ export default class NewLinksView extends React.Component<NewLinksViewProps> {
     if (this.props.fileEntities.length > 0) {
       return (
         <div className="twohop-links-section">
-          <div className={"twohop-links-box twohop-links-new-links-header"}>
+          <div
+            className={"twohop-links-box twohop-links-new-links-header"}
+            style={{
+              width: this.props.boxWidth,
+              height: this.props.boxHeight,
+            }}
+          >
             New links
           </div>
           {this.props.fileEntities.map((it) => {
@@ -27,6 +35,8 @@ export default class NewLinksView extends React.Component<NewLinksViewProps> {
                 key={it.key()}
                 onClick={this.props.onClick}
                 getPreview={this.props.getPreview}
+                boxWidth={this.props.boxWidth}
+                boxHeight={this.props.boxHeight}
               />
             );
           })}

diff --git a/src/ui/TagLinksListView.tsx b/src/ui/TagLinksListView.tsx
@@ -7,6 +7,8 @@ interface TagLinksListViewProps {
   tagLinksList: TagLinks[];
   onClick: (fileEntity: FileEntity) => Promise<void>;
   getPreview: (fileEntity: FileEntity) => Promise<string>;
+  boxWidth: string;
+  boxHeight: string;
 }
 
 export default class TagLinksListView extends React.Component<TagLinksListViewProps> {
@@ -19,7 +21,13 @@ export default class TagLinksListView extends React.Component<TagLinksListViewPr
       <div>
         {this.props.tagLinksList.map((link) => (
           <div className="twohop-links-section" key={link.tag}>
-            <div className={"twohop-links-tag-header twohop-links-box"}>
+            <div
+              className={"twohop-links-tag-header twohop-links-box"}
+              style={{
+                width: this.props.boxWidth,
+                height: this.props.boxHeight,
+              }}
+            >
               {link.tag}
             </div>
             {link.fileEntities.map((it) => (
@@ -28,6 +36,8 @@ export default class TagLinksListView extends React.Component<TagLinksListViewPr
                 key={link.tag + it.key()}
                 onClick={this.props.onClick}
                 getPreview={this.props.getPreview}
+                boxWidth={this.props.boxWidth}
+                boxHeight={this.props.boxHeight}
               />
             ))}
           </div>

diff --git a/src/ui/TwohopLinksRootView.tsx b/src/ui/TwohopLinksRootView.tsx
@@ -16,6 +16,8 @@ interface TwohopLinksRootViewProps {
   tagLinksList: TagLinks[];
   onClick: (fileEntity: FileEntity) => Promise<void>;
   getPreview: (fileEntity: FileEntity) => Promise<string>;
+  boxWidth: string;
+  boxHeight: string;
 }
 
 export default class TwohopLinksRootView extends React.Component<TwohopLinksRootViewProps> {
@@ -30,28 +32,38 @@ export default class TwohopLinksRootView extends React.Component<TwohopLinksRoot
           fileEntities={this.props.connectedLinks}
           onClick={this.props.onClick}
           getPreview={this.props.getPreview}
+          boxWidth={this.props.boxWidth}
+          boxHeight={this.props.boxHeight}
         />
         <TwohopLinksView
           twoHopLinks={this.props.unresolvedTwoHopLinks}
           resolved={false}
           onClick={this.props.onClick}
           getPreview={this.props.getPreview}
+          boxWidth={this.props.boxWidth}
+          boxHeight={this.props.boxHeight}
         />
         <TwohopLinksView
           twoHopLinks={this.props.resolvedTwoHopLinks}
           resolved={true}
           onClick={this.props.onClick}
           getPreview={this.props.getPreview}
+          boxWidth={this.props.boxWidth}
+          boxHeight={this.props.boxHeight}
         />
         <NewLinksView
           fileEntities={this.props.newLinks}
           onClick={this.props.onClick}
           getPreview={this.props.getPreview}
+          boxWidth={this.props.boxWidth}
+          boxHeight={this.props.boxHeight}
         />
         <TagLinksListView
           tagLinksList={this.props.tagLinksList}
           onClick={this.props.onClick}
           getPreview={this.props.getPreview}
+          boxWidth={this.props.boxWidth}
+          boxHeight={this.props.boxHeight}
         />
       </div>
     );

diff --git a/src/ui/TwohopLinksView.tsx b/src/ui/TwohopLinksView.tsx
@@ -9,6 +9,8 @@ interface TwohopLinksViewProps {
   resolved: boolean;
   onClick: (fileEntity: FileEntity) => Promise<void>;
   getPreview: (fileEntity: FileEntity) => Promise<string>;
+  boxWidth: string;
+  boxHeight: string;
 }
 
 export default class TwohopLinksView extends React.Component<TwohopLinksViewProps> {
@@ -33,6 +35,10 @@ export default class TwohopLinksView extends React.Component<TwohopLinksViewProp
               className={"twohop-links-twohop-header twohop-links-box"}
               onClick={async () => this.props.onClick(link.link)}
               onMouseDown={async () => this.props.onClick(link.link)}
+              style={{
+                width: this.props.boxWidth,
+                height: this.props.boxHeight,
+              }}
             >
               {link.link.linkText.replace(/\.md$/, "")}
             </div>
@@ -42,6 +48,8 @@ export default class TwohopLinksView extends React.Component<TwohopLinksViewProp
                 key={link.link.linkText + it.key()}
                 onClick={this.props.onClick}
                 getPreview={this.props.getPreview}
+                boxWidth={this.props.boxWidth}
+                boxHeight={this.props.boxHeight}
               />
             ))}
           </div>

diff --git a/styles.css b/styles.css
@@ -16,8 +16,6 @@
   float: left;
   padding: 3px;
   margin: 8px;
-  height: 162px;
-  width: 178px;
   color: #224433;
   background-color: antiquewhite;
   border-radius: 4px;