layot rework

main.ts

@@ -63,6 +63,7 @@ export class BulkRenameSettingsTab extends PluginSettingTab {
   plugin: BulkRenamePlugin;
   state: State;
   filesAndPreview: Setting;
+  totalFiles: HTMLSpanElement;
 
   constructor(app: App, plugin: BulkRenamePlugin) {
     super(app, plugin);
@@ -128,7 +129,7 @@ export class BulkRenameSettingsTab extends PluginSettingTab {
     }
     new Setting(this.containerEl)
       .setName('Folder location')
-      .setDesc('Files in this folder will be available renamed.')
+      .setDesc('Find files within the folder')
       .addSearch((cb) => {
         new FolderSuggest(this.app, cb.inputEl);
         cb.setPlaceholder('Example: folder1/')
@@ -140,10 +141,8 @@ export class BulkRenameSettingsTab extends PluginSettingTab {
           });
         // @ts-ignore
         cb.containerEl.addClass('bulk_rename');
-      })
+        cb.inputEl.addClass('bulk_input');
-      .addButton((button) => {
+        cb.inputEl.onblur = this.reRenderPreview;
-        button.setButtonText('Refresh');
-        button.onClick(this.reRenderPreview);
       });
   }
 
@@ -174,39 +173,32 @@ export class BulkRenameSettingsTab extends PluginSettingTab {
           });
         // @ts-ignore
         cb.containerEl.addClass('bulk_rename');
-      })
+        cb.inputEl.addClass('bulk_input');
-      .addButton((button) => {
+        cb.inputEl.onblur = this.reRenderPreview;
-        button.setButtonText('Refresh');
-        button.onClick(this.reRenderPreview);
       });
   }
 
   renderReplaceSymbol() {
     const { settings } = this.plugin;
-    const desc = document.createDocumentFragment();
 
-    const button = document.createElement('button');
+    const newSettings = new Setting(this.containerEl);
-    button.textContent = 'Preview';
+    newSettings.infoEl.style.display = 'none';
-    button.className = 'mod-cta';
-    button.onclick = this.reRenderPreview;
-
-    desc.appendChild(button);
-
-    const newSettings = new Setting(this.containerEl)
-      .setName('Existing Characters')
-      .setDesc(desc);
 
     newSettings.addText((textComponent) => {
+      const previewLabel = createPreviewElement('Existing');
+      textComponent.inputEl.insertAdjacentElement('beforebegin', previewLabel);
       textComponent.setValue(settings.existingSymbol);
       textComponent.setPlaceholder('existing symbols');
       textComponent.onChange((newValue) => {
         settings.existingSymbol = newValue;
         this.plugin.saveSettings();
       });
+      textComponent.inputEl.addClass('bulk_input');
+      textComponent.inputEl.onblur = this.reRenderPreview;
     });
 
     newSettings.addText((textComponent) => {
-      const previewLabel = createPreviewElement('Replacement symbols');
+      const previewLabel = createPreviewElement('Replacement');
       textComponent.inputEl.insertAdjacentElement('beforebegin', previewLabel);
       textComponent.setValue(settings.replacePattern);
       textComponent.setPlaceholder('replace with');
@@ -215,18 +207,25 @@ export class BulkRenameSettingsTab extends PluginSettingTab {
         this.plugin.saveSettings();
         this.getFilesByFolder();
       });
+      textComponent.inputEl.addClass('bulk_input');
+      textComponent.inputEl.onblur = this.reRenderPreview;
     });
   }
 
   renderFilesAndPreview = () => {
-    this.filesAndPreview = new Setting(this.containerEl).setName(
+    this.containerEl.createEl('h2', { text: 'Preview' }, (el) => {
-      'Files within the folder',
+      el.className = 'bulk_preview_header';
-    );
+    });
+
+    this.filesAndPreview = new Setting(this.containerEl);
+    this.totalFiles = this.containerEl.createEl('span', {
+      text: `Total Files: ${this.plugin.settings.fileNames.length}`,
+    });
+
+    this.filesAndPreview.infoEl.style.display = 'none';
 
     this.filesAndPreview.controlEl.addClass('bulk_rename_preview');
-    this.calculateFileNames();
+    this.reRenderPreview();
-
-    renderPreviewFiles(this.filesAndPreview, this.plugin, this.state);
   };
 
   renderRenameFiles() {
@@ -237,14 +236,20 @@ export class BulkRenameSettingsTab extends PluginSettingTab {
       desc.createEl('b', {
         text: 'Warning: ',
       }),
-      'This plugin in Beta, make sure you verified all files in preview',
+      'Make sure you verified all files in preview',
     );
 
     new Setting(this.containerEl)
       .setDesc(desc)
       .setName('Replace patterns')
       .addButton((button) => {
-        button.buttonEl.style.width = '100%';
+        button.setClass('bulk_button');
+        button.setTooltip("Your files won't be changed");
+        button.setButtonText('Preview');
+        button.onClick(this.reRenderPreview);
+      })
+      .addButton((button) => {
+        button.setClass('bulk_button');
         button.setTooltip(
           "We don't have undone button yet!\r\n Do we need it?",
         );
@@ -264,6 +269,9 @@ export class BulkRenameSettingsTab extends PluginSettingTab {
   reRenderPreview = () => {
     this.calculateFileNames();
     renderPreviewFiles(this.filesAndPreview, this.plugin, this.state);
+    this.totalFiles.setText(
+      `Total Files: ${this.plugin.settings.fileNames.length}`,
+    );
   };
 
   calculateFileNames() {

src/components/DonateButton.ts

@@ -1,5 +1,4 @@
 export const renderDonateButton = (containerEl: HTMLElement) => {
-  containerEl.createEl('br');
   containerEl.createEl('h3', { text: 'Support development' });
 
   const donateText = containerEl.createEl('p');

src/components/PreviewElement.ts

@@ -1,7 +1,6 @@
 export const createPreviewElement = (textContent = '=> => => =>') => {
   const previewLabel = window.document.createElement('span');
-  previewLabel.className = 'previewLabel';
+  previewLabel.className = 'bulk_preview_label';
   previewLabel.textContent = textContent;
-  previewLabel.style.margin = '0 20px';
   return previewLabel;
 };

src/components/RenderPreviewFiles.ts

@@ -14,7 +14,6 @@ export const renderPreviewFiles = (
   let replacedPreviewTextArea: HTMLTextAreaElement;
 
   return setting
-    .setDesc(`Total Files: ${plugin.settings.fileNames.length}`)
     .clear()
     .addTextArea((text) => {
       text.setPlaceholder('Here you will see files under folder location');

styles.css

@@ -5,3 +5,21 @@
 .bulk_rename_preview {
   width: 80%;
 }
+
+.bulk_button {
+  width: 100%;
+}
+
+.bulk_preview_header {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+
+.bulk_input {
+  width: 100%;
+  margin-right: 15px;
+}
+
+.bulk_preview_label {
+  margin-right: 15px;
+}