Skip to content

Commit 39b6a9a

Browse files
committed
fix(ui): 调整表情和 Callouts 选择器弹窗位置
将 emojiPicker 和 ObsidianCalloutsPicke 弹窗从按钮后方移动到 d-editor-preview-wrapper 容器的第一个位置,改善用户体验
1 parent c23e677 commit 39b6a9a

3 files changed

Lines changed: 14 additions & 4 deletions

File tree

entrypoints/SettingComponents/BasicSettings/MenuObsidianCallouts.vue

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -209,7 +209,10 @@ export default {
209209
) {
210210
document.querySelector(".ObsidianCalloutsPicke").remove();
211211
} else {
212-
ObsidianCalloutsBtn.after(ObsidianCalloutsPicke);
212+
var previewWrapper = document.querySelector('.d-editor-preview-wrapper');
213+
if (previewWrapper) {
214+
previewWrapper.prepend(ObsidianCalloutsPicke);
215+
}
213216
}
214217
ObsidianCalloutsPicke.addEventListener("click", function (e) {
215218
var textAreaObsidianCallouts = document.querySelector(".d-editor-input");

entrypoints/SettingComponents/BasicSettings/ReplyTBEnjoy.vue

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -612,7 +612,10 @@ export default {
612612
if (document.body.contains(document.querySelector('.emojiPicker'))) {
613613
document.querySelector('.emojiPicker').remove();
614614
} else {
615-
emojiButton.after(emojiPicker);
615+
var previewWrapper = document.querySelector('.d-editor-preview-wrapper');
616+
if (previewWrapper) {
617+
previewWrapper.prepend(emojiPicker);
618+
}
616619
}
617620
emojiPicker.addEventListener('click', function (e) {
618621
if (e.target.tagName === 'IMG') {

entrypoints/app.css

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -987,7 +987,7 @@ body.body-preview #main-outlet-wrapper {
987987

988988
.emojiPicker {
989989
top: 0;
990-
left: 100%;
990+
left: 0 !important;
991991
position: absolute;
992992
display: grid;
993993
grid-template-columns: repeat(12, 1fr);
@@ -1250,7 +1250,7 @@ body.body-preview #main-outlet-wrapper {
12501250
.ObsidianCalloutsPicke {
12511251
width: 560px;
12521252
top: 0;
1253-
left: 100%;
1253+
left: 0 !important;
12541254
position: absolute;
12551255
height: 100%;
12561256
overflow: auto;
@@ -1272,4 +1272,8 @@ body.body-preview #main-outlet-wrapper {
12721272
border-radius: var(--d-button-border-radius);
12731273
background-color: var(--d-button-default-bg-color);
12741274
height: 38px;
1275+
}
1276+
1277+
.d-editor-preview-wrapper {
1278+
position: relative;
12751279
}

0 commit comments

Comments
 (0)