Merge pull request #18 from OlegLustenko/feature/layout

WIP Layouts improvements

main.ts

@@ -95,7 +95,7 @@ export class BulkRenameSettingsTab extends PluginSettingTab {
   display() {
     const { containerEl } = this;
     containerEl.empty();
-    containerEl.createEl('h2', { text: 'Bulk Rename - Settings' });
+    containerEl.createEl('h1', { text: 'Bulk Rename - Settings' });
     containerEl.addEventListener('keyup', (event) => {
       if (event.key !== 'Enter') {
         return;
@@ -116,9 +116,9 @@ export class BulkRenameSettingsTab extends PluginSettingTab {
 
   renderTabs() {
     new Setting(this.containerEl)
-      .setName('UI will be changed when you click those buttons')
+      .setName('Search by: ')
       .addButton((button) => {
-        button.setButtonText('Search by folder');
+        button.setButtonText('Folder');
         if (isViewTypeFolder(this.plugin.settings)) {
           button.setCta();
         }
@@ -129,7 +129,7 @@ export class BulkRenameSettingsTab extends PluginSettingTab {
         });
       })
       .addButton((button) => {
-        button.setButtonText('Search By Tags');
+        button.setButtonText('Tags');
         if (isViewTypeTags(this.plugin.settings)) {
           button.setCta();
         }
@@ -140,7 +140,7 @@ export class BulkRenameSettingsTab extends PluginSettingTab {
         });
       })
       .addButton((button) => {
-        button.setButtonText('Search by RegExp');
+        button.setButtonText('RegExp');
         if (isViewTypeRegExp(this.plugin.settings)) {
           button.setCta();
         }

src/components/DonateButton.ts

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

src/components/RenderPreviewFiles.ts

@@ -25,7 +25,8 @@ export const renderPreviewFiles = (
 
       const previewLabel = createPreviewElement();
       text.inputEl.insertAdjacentElement('afterend', previewLabel);
-      text.inputEl.addClass('templater_cmd');
+      text.inputEl.addClass('bulk_preview_textarea');
+      text.inputEl.wrap = 'soft';
     })
     .addTextArea((text) => {
       text.setPlaceholder(
@@ -36,7 +37,8 @@ export const renderPreviewFiles = (
       replacedPreviewTextArea = text.inputEl;
       const value = getRenderedFileNamesReplaced(plugin);
       text.setValue(value);
-      text.inputEl.addClass('templater_cmd');
+      text.inputEl.addClass('bulk_preview_textarea');
+      text.inputEl.wrap = 'soft';
     })
     .then((setting) => {
       syncScrolls(existingFilesTextArea, replacedPreviewTextArea, state);

styles.css

@@ -4,6 +4,21 @@
 
 .bulk_rename_preview {
   width: 80%;
+  height: 100%;
+  gap: 0;
+}
+
+.bulk_rename_preview > textarea {
+  height: 360px;
+}
+
+.bulk_preview_textarea {
+  margin-left: 5px;
+  margin-right: 5px;
+  font-size: 14px;
+  width: 100%;
+  /*white-space: nowrap;*/
+  /*overflow: auto;*/
 }
 
 .bulk_button {
@@ -25,11 +40,25 @@
 }
 
 .bulk_regexp_control {
+  background: var(--background-modifier-form-field);
   border: 1px solid var(--background-modifier-border);
+  transition: box-shadow 0.15s ease-in-out, border 0.15s ease-in-out;
+  font-family: inherit;
+  border-radius: var(--input-radius);
+  outline: none;
+}
+
+.bulk_regexp_control:hover,
+.bulk_regexp_control:focus,
+.bulk_regexp_control:focus-visible {
+  box-shadow: 0 0 0 2px var(--background-modifier-border-hover);
+  /*box-shadow: 0 0 0 2px var*/
 }
 
 .bulk_regexp_control > input {
   border: none;
+  margin: 0;
+  padding: 0;
 }
 
 .bulk_regexp,
@@ -37,8 +66,18 @@
   width: 100%;
 }
 
+.bulk_regexp:hover,
+.bulk_regexp:focus,
+.bulk_regexp:focus-visible .bulk_regexp_flags:hover,
+.bulk_regexp_flags:focus,
+.bulk_regexp_flags:focus-visible {
+  border: none !important;
+  box-shadow: none !important;
+}
+
 .bulk_regexp_flags {
   caret-color: transparent;
+  max-width: 80px;
 }
 
 .bulk_regexp_slash {