Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-23 18:10:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

♻️ https://github.com/siyuan-note/siyuan/issues/13785

Browse source
This commit is contained in:
Vanessa 2025-01-11 12:22:44 +08:00
parent 87c8db09a0
commit 544d82216b
9 changed files with 130 additions and 114 deletions
Download patch file Download diff file Expand all files Collapse all files

34
app/src/assets/scss/base.scss
View file

@ -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 {

30
app/src/assets/scss/business/_av.scss
View file

@ -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: '';

35
app/src/assets/scss/business/_drag.scss
View file

@ -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;
}
}

36
app/src/assets/scss/component/_list.scss
View file

@ -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 {

1
app/src/assets/scss/mobile.scss
View file

@ -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";

68
app/src/assets/scss/protyle/_wysiwyg.scss
View file

@ -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,14 +486,19 @@
}
}
&--select,
&--hl {
@extend .dragover;
&::after {
&--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 {
transition: var(--b3-background-transition);
@ -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;

2
app/src/assets/scss/util/_reset.scss
View file

@ -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);
}

4
app/src/boot/globalEvent/click.ts
View file

@ -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 = "";
});
}

32
app/src/layout/dock/Outline.ts
View file

@ -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");
});
};
});