From 544d82216b59073429a904a7a373345896f9a62d Mon Sep 17 00:00:00 2001 From: Vanessa Date: Sat, 11 Jan 2025 12:22:44 +0800 Subject: [PATCH] :recycle: https://github.com/siyuan-note/siyuan/issues/13785 --- app/src/assets/scss/base.scss | 34 ----------- app/src/assets/scss/business/_av.scss | 30 +++++----- app/src/assets/scss/business/_drag.scss | 35 ------------ app/src/assets/scss/component/_list.scss | 36 +++++++++++- app/src/assets/scss/mobile.scss | 1 - app/src/assets/scss/protyle/_wysiwyg.scss | 70 +++++++++++++++++------ app/src/assets/scss/util/_reset.scss | 2 +- app/src/boot/globalEvent/click.ts | 4 +- app/src/layout/dock/Outline.ts | 32 ++++++++--- 9 files changed, 130 insertions(+), 114 deletions(-) delete mode 100644 app/src/assets/scss/business/_drag.scss diff --git a/app/src/assets/scss/base.scss b/app/src/assets/scss/base.scss index f6c64a737..1605c7ab4 100644 --- a/app/src/assets/scss/base.scss +++ b/app/src/assets/scss/base.scss @@ -17,7 +17,6 @@ @import "business/graph"; @import "business/layout"; @import "business/block"; -@import "business/drag"; @import "util/reset"; @import "component/card"; @import "component/menu"; @@ -324,39 +323,6 @@ html { overflow: hidden; transition: var(--b3-transition); } - - &.sy__outline, - &.sy__file { - .dragover::after { - width: calc(100% - var(--file-toggle-width)); - left: var(--file-toggle-width); - } - - .dragover__top, - .dragover__bottom { - box-shadow: none !important; - } - - .dragover__top::after, - .dragover__bottom::after { - content: ""; - position: absolute; - height: 4px; - width: calc(100% - var(--file-toggle-width)); - left: var(--file-toggle-width); - background-color: var(--b3-theme-primary-lighter); - z-index: 1; - pointer-events: none; - } - - .dragover__top::after { - top: -3px; - } - - .dragover__bottom::after { - bottom: -2px; - } - } } .counter { diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss index 7a60949a6..538d01721 100644 --- a/app/src/assets/scss/business/_av.scss +++ b/app/src/assets/scss/business/_av.scss @@ -126,11 +126,6 @@ position: relative; font-size: 87.5%; - &.dragover__top, - &.dragover__bottom { - box-shadow: none !important; - } - &.dragover__top::after, &.dragover__bottom::after { content: ''; @@ -316,13 +311,23 @@ display: none; } - &.dragover__right { - border-right-color: var(--b3-theme-primary-lighter); + &.dragover__left::after, + &.dragover__right::after { + top: 0; + bottom: 0; + width: 4px; + content: ''; + position: absolute; + background-color: var(--b3-theme-primary-lighter); + z-index: 3; } - &.dragover__left, - &.dragover__right { - z-index: 2; + &.dragover__left::after { + left: -2.5px; + } + + &.dragover__right::after { + right: -2.5px; } &--select { @@ -552,11 +557,6 @@ cursor: not-allowed; } - &.dragover__bottom, - &.dragover__top { - box-shadow: none !important; - } - &.dragover__top::after, &.dragover__bottom::after { content: ''; diff --git a/app/src/assets/scss/business/_drag.scss b/app/src/assets/scss/business/_drag.scss deleted file mode 100644 index 019784eec..000000000 --- a/app/src/assets/scss/business/_drag.scss +++ /dev/null @@ -1,35 +0,0 @@ -.dragover { - - &::after { - background-color: var(--b3-theme-primary-lightest); - position: absolute; - width: 100%; - height: 100%; - content: " "; - left: 0; - top: 0; - z-index: 3; - pointer-events: none; - } - - // 需要 !important，否则拖拽到闪卡无效果 - &__top { - border-radius: 0 !important; - box-shadow: 0 -3px 0 var(--b3-theme-primary-lighter), inset 0 1px 0 var(--b3-theme-primary-lighter) !important; - } - - &__bottom { - border-radius: 0 !important; - box-shadow: 0 2px 0 var(--b3-theme-primary-lighter), inset 0 -2px 0 var(--b3-theme-primary-lighter) !important; - } - - &__left { - border-radius: 0 !important; - box-shadow: -3px 0 0 var(--b3-theme-primary-lighter), inset 1px 0 0 var(--b3-theme-primary-lighter) !important; - } - - &__right { - border-radius: 0 !important; - box-shadow: 1px 0 0 var(--b3-theme-primary-lighter), inset -2px 0 0 var(--b3-theme-primary-lighter) !important; - } -} diff --git a/app/src/assets/scss/component/_list.scss b/app/src/assets/scss/component/_list.scss index 07f8c6603..ae172a694 100644 --- a/app/src/assets/scss/component/_list.scss +++ b/app/src/assets/scss/component/_list.scss @@ -7,10 +7,42 @@ &--background .b3-list-item { border-radius: var(--b3-border-radius); - &:hover:not(.b3-list-item--focus):not(.dragover):not(.dragover__top):not(.dragover__bottom), - &--focus:not(.dragover):not(.dragover__top):not(.dragover__bottom) { + &:hover:not(.b3-list-item--focus):not(.dragover):not(.dragover__current):not(.dragover__top):not(.dragover__bottom), + &--focus { background-color: var(--b3-list-hover); } + + &.dragover::after { + background-color: var(--b3-theme-primary-lightest); + position: absolute; + height: 100%; + content: " "; + top: 0; + z-index: 3; + pointer-events: none; + width: calc(100% - var(--file-toggle-width)); + left: var(--file-toggle-width); + } + + &.dragover__top::after, + &.dragover__bottom::after { + content: ""; + position: absolute; + height: 4px; + width: calc(100% - var(--file-toggle-width)); + left: var(--file-toggle-width); + background-color: var(--b3-theme-primary-lighter); + z-index: 1; + pointer-events: none; + } + + &.dragover__top::after { + top: -3px; + } + + &.dragover__bottom::after { + bottom: -2px; + } } &--empty { diff --git a/app/src/assets/scss/mobile.scss b/app/src/assets/scss/mobile.scss index 7840e85da..2309ea815 100644 --- a/app/src/assets/scss/mobile.scss +++ b/app/src/assets/scss/mobile.scss @@ -14,7 +14,6 @@ @import "business/graph"; @import "business/layout"; @import "business/block"; -@import "business/drag"; @import "util/reset"; @import "util/function"; @import "business/history"; diff --git a/app/src/assets/scss/protyle/_wysiwyg.scss b/app/src/assets/scss/protyle/_wysiwyg.scss index 0079a33e8..7e2d522e0 100644 --- a/app/src/assets/scss/protyle/_wysiwyg.scss +++ b/app/src/assets/scss/protyle/_wysiwyg.scss @@ -21,6 +21,47 @@ [data-node-id] { position: relative; + &.dragover { + &__left::after, + &__right::after, + &__top::after, + &__bottom::after { + content: ''; + position: absolute; + background-color: var(--b3-theme-primary-lighter); + } + + &__top::after, + &__bottom::after { + left: 0; + right: 0; + height: 4px; + } + + &__top::after { + top: -4px; + } + + &__bottom::after { + bottom: -4px; + } + + &__left::after, + &__right::after { + top: 0; + bottom: 0; + width: 4px; + } + + &__left::after { + left: -4px; + } + + &__right::after { + right: -4px; + } + } + &[custom-riff-decks] { box-shadow: 2px 0 0 0 var(--b3-protyle-inline-mark-background) inset; } @@ -445,13 +486,18 @@ } } - &--select, - &--hl { - @extend .dragover; - - &::after { - border-radius: var(--b3-border-radius); - } + &--select::after, + &--hl::after { + background-color: var(--b3-theme-primary-lightest); + position: absolute; + width: 100%; + height: 100%; + content: " "; + left: 0; + top: 0; + z-index: 3; + pointer-events: none; + border-radius: var(--b3-border-radius); } &--hl { @@ -463,16 +509,6 @@ display: none; } - .dragover { - &__top { - box-shadow: 0 -4px 0 0 var(--b3-theme-primary-lighter) !important; - } - - &__bottom { - box-shadow: 0 4px 0 0 var(--b3-theme-primary-lighter) !important - } - } - &--attr .protyle-attr { opacity: 1; diff --git a/app/src/assets/scss/util/_reset.scss b/app/src/assets/scss/util/_reset.scss index 8e48432c2..89d85ad1e 100644 --- a/app/src/assets/scss/util/_reset.scss +++ b/app/src/assets/scss/util/_reset.scss @@ -42,7 +42,7 @@ body { } &__tab--active { - .b3-list--background .b3-list-item--focus:not(.dragover) { + .b3-list--background .b3-list-item--focus { background-color: var(--b3-list-hover); } diff --git a/app/src/boot/globalEvent/click.ts b/app/src/boot/globalEvent/click.ts index bcf9f050a..1fed945f9 100644 --- a/app/src/boot/globalEvent/click.ts +++ b/app/src/boot/globalEvent/click.ts @@ -22,8 +22,8 @@ export const globalClick = (event: MouseEvent & { target: HTMLElement }) => { if (startElement) { startElement.style.opacity = ""; } - ghostElement.parentElement.querySelectorAll(".dragover__top, .dragover__bottom, .dragover").forEach((item: HTMLElement) => { - item.classList.remove("dragover__top", "dragover__bottom", "dragover"); + ghostElement.parentElement.querySelectorAll(".dragover__top, .dragover__bottom, .dragover, .dragover__current").forEach((item: HTMLElement) => { + item.classList.remove("dragover__top", "dragover__bottom", "dragover", "dragover__current"); item.style.opacity = ""; }); } diff --git a/app/src/layout/dock/Outline.ts b/app/src/layout/dock/Outline.ts index 48c2402f1..9cbfeb29f 100644 --- a/app/src/layout/dock/Outline.ts +++ b/app/src/layout/dock/Outline.ts @@ -232,6 +232,7 @@ export class Outline extends Model { return true; } }); + const contentRect = this.element.getBoundingClientRect(); documentSelf.onmousemove = (moveEvent: MouseEvent) => { if (!editor || editor.disabled || Math.abs(moveEvent.clientY - event.clientY) < 3 && Math.abs(moveEvent.clientX - event.clientX) < 3) { @@ -249,13 +250,29 @@ export class Outline extends Model { } ghostElement.style.top = moveEvent.clientY + "px"; ghostElement.style.left = moveEvent.clientX + "px"; - selectItem = hasClosestByClassName(moveEvent.target as HTMLElement, "b3-list-item") as HTMLElement; - if (!selectItem || selectItem.tagName !== "LI" || selectItem.isSameNode(item) || selectItem.style.position === "fixed" || !this.element.contains(selectItem)) { + if (!this.element.contains(moveEvent.target as Element)) { + this.element.querySelectorAll(".dragover__top, .dragover__bottom, .dragover, .dragover__current").forEach(item => { + item.classList.remove("dragover__top", "dragover__bottom", "dragover", "dragover__current"); + }); return; } - this.element.querySelectorAll(".dragover__top, .dragover__bottom, .dragover").forEach(item => { - item.classList.remove("dragover__top", "dragover__bottom", "dragover"); + if (moveEvent.clientY < contentRect.top + Constants.SIZE_SCROLL_TB || moveEvent.clientY > contentRect.bottom - Constants.SIZE_SCROLL_TB) { + this.element.scroll({ + top: this.element.scrollTop + (moveEvent.clientY < contentRect.top + Constants.SIZE_SCROLL_TB ? -Constants.SIZE_SCROLL_STEP : Constants.SIZE_SCROLL_STEP), + behavior: "smooth" + }); + } + selectItem = hasClosestByClassName(moveEvent.target as HTMLElement, "b3-list-item") as HTMLElement; + if (!selectItem || selectItem.tagName !== "LI" || selectItem.style.position === "fixed") { + return; + } + this.element.querySelectorAll(".dragover__top, .dragover__bottom, .dragover, .dragover__current").forEach(item => { + item.classList.remove("dragover__top", "dragover__bottom", "dragover", "dragover__current"); }); + if (selectItem.isSameNode(item)) { + selectItem.classList.add("dragover__current"); + return; + } const selectRect = selectItem.getBoundingClientRect(); if (moveEvent.clientY > selectRect.bottom - 10) { selectItem.classList.add("dragover__bottom"); @@ -278,7 +295,8 @@ export class Outline extends Model { selectItem = this.element.querySelector(".dragover__top, .dragover__bottom, .dragover"); } let hasChange = true; - if (selectItem && selectItem.className.indexOf("dragover") > -1 && editor) { + if (selectItem && editor && + (selectItem.classList.contains("dragover__top") || selectItem.classList.contains("dragover__bottom") || selectItem.classList.contains("dragover"))) { let previousID; let parentID; const undoPreviousID = (item.previousElementSibling && item.previousElementSibling.tagName === "UL") ? item.previousElementSibling.previousElementSibling.getAttribute("data-node-id") : item.previousElementSibling?.getAttribute("data-node-id"); @@ -331,8 +349,8 @@ export class Outline extends Model { return true; } } - this.element.querySelectorAll(".dragover__top, .dragover__bottom, .dragover").forEach(item => { - item.classList.remove("dragover__top", "dragover__bottom", "dragover"); + this.element.querySelectorAll(".dragover__top, .dragover__bottom, .dragover, .dragover__current").forEach(item => { + item.classList.remove("dragover__top", "dragover__bottom", "dragover", "dragover__current"); }); }; });