diff --git a/main.ts b/main.ts index 45ab1e7..d137091 100644 --- a/main.ts +++ b/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(); } diff --git a/src/components/DonateButton.ts b/src/components/DonateButton.ts index f87d3bf..1d15386 100644 --- a/src/components/DonateButton.ts +++ b/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'); diff --git a/src/components/RenderPreviewFiles.ts b/src/components/RenderPreviewFiles.ts index 0d31151..f06ad53 100644 --- a/src/components/RenderPreviewFiles.ts +++ b/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); diff --git a/styles.css b/styles.css index 3210dbf..4a6ed30 100644 --- a/styles.css +++ b/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 {