Merge pull request #7 from razeghi71/improve/search-modal-becomes-form

Make QueryModal a form and widen the search input

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "image-search",
 	"name": "Image Search",
-	"version": "0.0.4",
+	"version": "0.0.5",
 	"minAppVersion": "1.5.12",
 	"description": "Search and insert images using Google API",
 	"author": "Mohammad Razeghi",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "obsidian-image-search",
-	"version": "0.0.4",
+	"version": "0.0.5",
 	"description": "This is image search plugin for Obsidian (https://obsidian.md)",
 	"main": "main.js",
 	"scripts": {

query-modal.ts

@@ -16,25 +16,44 @@ export class QueryModal extends Modal {
   }
 
   onOpen() {
-    this.contentEl.createEl("h1", { text: "What do you want to search for?" });
+    const form = this.contentEl.createEl('form');
+    form.addEventListener('submit', (event) => {
+      event.preventDefault();
+      this.search();
+    });
 
-    new Setting(this.contentEl)
-      .setName("What are you looking for?")
-      .addText(text => text.onChange(value => this.result = value));
+    const input = this.contentEl.createEl('input', {
+      attr: {
+        type: 'text',
+        placeholder: "What are you looking for?"
+      },
+      cls: 'setting-input input-style',
+    });
+    input.addEventListener('input', (event) => {
+      this.result = (event.target as HTMLInputElement).value;
+    });
+    form.appendChild(input);
 
-    new Setting(this.contentEl)
-      .addButton(btn => btn
-        .setButtonText("Search")
-        .setCta()
-        .onClick(() => this.search()));
+    const buttonContainer = this.contentEl.createEl('div', {
+      cls: 'button-container-style'
+    });
+    const button = this.contentEl.createEl('button', {
+      attr: {
+        type: 'submit'
+      },
+      cls: 'mod-cta setting-btn button-style',
+    });
+    button.textContent = "Search Google Images";
+    buttonContainer.appendChild(button);
+    form.appendChild(buttonContainer);
 
     this.imageList = this.contentEl.createEl("ul", { cls: "responsive-gallery" });
   }
 
   private async callApi(query: string): Promise<string[]> {
     const url = `https://www.googleapis.com/customsearch/v1?q=${encodeURIComponent(query)}&cx=${this.settings.searchEngineId}&searchType=image&num=10&key=${this.settings.apiKey}`;
     const response = await requestUrl(url);
-    
+
     if (response.status < 200 || response.status >= 300) {
       throw new Error(`HTTP error! status: ${response.status}`);
     }

styles.css

@@ -64,4 +64,20 @@ ul.responsive-gallery img {
     ul.responsive-gallery li {
         width: calc(100% / 4); /* 4 images per row */
     }
+}
+
+/* Additional styles for input and button alignment */
+.input-style {
+    width: 100%;
+    margin-top: 25px;
+    margin-bottom: 25px;
+}
+
+.button-container-style {
+    text-align: center;
+    width: 100%;
+}
+
+.button-style {
+    margin: auto;
 }

versions.json

@@ -2,5 +2,6 @@
 	"0.0.1": "1.5.12",
 	"0.0.2": "1.5.12",
 	"0.0.3": "1.5.12",
-	"0.0.4": "1.5.12"
+	"0.0.4": "1.5.12",
+	"0.0.5": "1.5.12"
 }