tpl
/
obsidian-sample-plugin
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add fancy mobile media querries for preview area

This commit is contained in:
Oleh Lustenko 2023-02-18 20:05:33 +02:00
parent 6ea539162b
commit 50648190cc
2 changed files with 37 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
main.ts
View File

@ -106,6 +106,7 @@ export class BulkRenameSettingsTab extends PluginSettingTab {
this.reRenderPreview(); this.reRenderPreview();
}); });
this.containerEl.addClass('bulk_rename_plugin');
this.renderTabs(); this.renderTabs();
this.renderFileLocation(); this.renderFileLocation();
this.renderTagNames(); this.renderTagNames();
@ -214,16 +215,11 @@ export class BulkRenameSettingsTab extends PluginSettingTab {
return; return;
} }
const desc = document.createDocumentFragment(); const settings = new Setting(this.containerEl);
desc.append( settings.infoEl.addClass('bulk_regexp_search');
desc.createEl('b', { settings.setClass('bulk_regexp_container');
text: 'Reg exp will match file Operation System path', settings
}),
);
new Setting(this.containerEl)
.setName('RegExp Search') .setName('RegExp Search')
.setDesc(desc)
.addText((cb) => { .addText((cb) => {
const backslash = createBackslash('/'); const backslash = createBackslash('/');
cb.inputEl.insertAdjacentElement('beforebegin', backslash); cb.inputEl.insertAdjacentElement('beforebegin', backslash);
@ -276,9 +272,9 @@ export class BulkRenameSettingsTab extends PluginSettingTab {
return; return;
} }
const newSettings2 = new Setting(this.containerEl); const newSettings = new Setting(this.containerEl);
newSettings.setClass('bulk_toggle');
newSettings2 newSettings
.setName('Use RegExp For Existing & Replacement?') .setName('Use RegExp For Existing & Replacement?')
.setDesc( .setDesc(
"Only RegExp will work now, however it doesn't prevent you to pass string", "Only RegExp will work now, however it doesn't prevent you to pass string",

30
styles.css
View File

@ -1,3 +1,7 @@
.bulk_rename_plugin {
padding-right: 1rem;
}
.bulk_rename { .bulk_rename {
width: calc(100% - 20px); width: calc(100% - 20px);
} }
@ -8,6 +12,14 @@
gap: 0; gap: 0;
} }
@media screen and (max-width: 983px) {
.bulk_rename_preview {
display: flex;
flex-direction: column;
max-height: 300px;
}
}
.flex { .flex {
display: flex; display: flex;
} }
@ -69,10 +81,26 @@
margin-right: 15px; margin-right: 15px;
} }
.bulk_regexp_search {
padding-right: 1rem;
}
.bulk_toggle {
border-top: none;
}
.bulk_preview_label:first-child { .bulk_preview_label:first-child {
margin-right: 15px; margin-right: 15px;
} }
.bulk_preview_label {
text-align: center;
}
.bulk_regexp_container {
justify-content: space-between;
}
.bulk_regexp_control { .bulk_regexp_control {
background: var(--background-modifier-form-field); background: var(--background-modifier-form-field);
border: 1px solid var(--background-modifier-border); border: 1px solid var(--background-modifier-border);
@ -80,13 +108,13 @@
font-family: inherit; font-family: inherit;
border-radius: var(--input-radius); border-radius: var(--input-radius);
outline: none; outline: none;
max-width: 400px;
} }
.bulk_regexp_control:hover, .bulk_regexp_control:hover,
.bulk_regexp_control:focus, .bulk_regexp_control:focus,
.bulk_regexp_control:focus-visible { .bulk_regexp_control:focus-visible {
box-shadow: 0 0 0 2px var(--background-modifier-border-hover); box-shadow: 0 0 0 2px var(--background-modifier-border-hover);
/*box-shadow: 0 0 0 2px var*/
} }
.bulk_regexp_control > input { .bulk_regexp_control > input {