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

🎨 https://github.com/siyuan-note/siyuan/issues/7375

Browse source
This commit is contained in:
Vanessa 2023-02-18 09:52:26 +08:00
parent abb916e879
commit f5ddff696a
4 changed files with 47 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

9
app/src/assets/scss/_layout.scss
View file

@ -310,6 +310,10 @@
background-color: var(--b3-theme-surface);
box-sizing: border-box;
&:hover .dock__item--pin {
opacity: 1;
}
&#dockLeft {
border-right: .5px solid var(--b3-border-color);
}
@ -356,6 +360,11 @@
border-radius: 6px;
margin: 5px;
&--pin {
opacity: 0;
transition: var(--b3-transition);
}
&:hover,
&--active {
background-color: var(--b3-theme-background-light);

40
app/src/layout/dock/index.ts
View file

@ -53,6 +53,9 @@ export class Dock {
this.pin = options.data.pin;
this.data = {};
if (options.data.data.length === 0) {
this.element.firstElementChild.innerHTML = `<span class="dock__item dock__item--pin b3-tooltips b3-tooltips__${this.getClassDirect(0)}" aria-label="${this.pin ? window.siyuan.languages.unpin : window.siyuan.languages.pin}">
<svg><use xlink:href="#iconPin"></use></svg>
</span>`;
this.element.classList.add("fn__none");
} else {
this.genButton(options.data.data[0], 0);
@ -85,6 +88,11 @@ export class Dock {
this.toggleModel(type, false, true);
event.preventDefault();
break;
} else if (target.classList.contains("dock__item")) {
this.togglePin();
target.setAttribute("aria-label", this.pin ? window.siyuan.languages.unpin : window.siyuan.languages.pin);
event.preventDefault();
break;
}
target = target.parentElement;
}
@ -120,6 +128,28 @@ export class Dock {
}
}
public togglePin() {
this.pin = !this.pin;
const hasActive = this.element.querySelector(".dock__item--active");
if (!this.pin) {
this.resetDockPosition(hasActive ? true : false);
this.resizeElement.classList.add("fn__none");
if (hasActive) {
this.showDock(true);
} else {
this.hideDock(true);
}
} else {
this.layout.element.style.opacity = "";
this.layout.element.style.transform = "";
if (hasActive) {
this.resizeElement.classList.remove("fn__none");
}
}
this.layout.element.classList.toggle("layout--float");
resizeTabs();
}
public resetDockPosition(show: boolean) {
if (this.position === "Left") {
this.layout.element.setAttribute("style", `width:${this.layout.element.clientWidth}px;
@ -414,7 +444,7 @@ ${this.position === "Top" ? "top" : "bottom"}:0`);
sourceElement.setAttribute("data-width", "");
const type = sourceElement.getAttribute("data-type") as TDockType;
const sourceDock = getDockByType(type);
if (sourceDock.element.querySelectorAll(".dock__item").length === 1) {
if (sourceDock.element.querySelectorAll(".dock__item").length === 2) {
sourceDock.element.classList.add("fn__none");
}
const sourceWnd = sourceDock.layout.children[parseInt(sourceElement.getAttribute("data-index"))] as Wnd;
@ -434,9 +464,9 @@ ${this.position === "Top" ? "top" : "bottom"}:0`);
sourceElement.classList.add(`b3-tooltips__${this.getClassDirect(index)}`);
sourceElement.setAttribute("data-index", index.toString());
if (index === 0) {
this.element.firstElementChild.insertAdjacentElement("beforeend", sourceElement);
this.element.firstElementChild.insertAdjacentElement("afterbegin", sourceElement);
} else {
this.element.lastElementChild.insertAdjacentElement("beforeend", sourceElement);
this.element.lastElementChild.insertAdjacentElement("afterbegin", sourceElement);
}
this.element.classList.remove("fn__none");
resetFloatDockSize();
@ -512,7 +542,9 @@ ${this.position === "Top" ? "top" : "bottom"}:0`);
this.data[item.type] = true;
});
if (index === 0) {
this.element.firstElementChild.innerHTML = html;
this.element.firstElementChild.innerHTML = `${html}<span class="dock__item dock__item--pin b3-tooltips b3-tooltips__${this.getClassDirect(index)}" aria-label="${this.pin ? window.siyuan.languages.unpin : window.siyuan.languages.pin}">
<svg><use xlink:href="#iconPin"></use></svg>
</span>`;
} else {
this.element.lastElementChild.innerHTML = html;
}

2
app/src/layout/status.ts
View file

@ -45,7 +45,7 @@ export const initStatus = (isWindow = false) => {
document.querySelectorAll(".dock").forEach(item => {
if (dockIsShow) {
item.classList.add("fn__none");
} else if (item.querySelectorAll(".dock__item").length > 0) {
} else if (item.querySelectorAll(".dock__item").length > 1) {
item.classList.remove("fn__none");
}
});

20
app/src/menus/workspace.ts
View file

@ -24,25 +24,7 @@ const togglePinDock = (dock: Dock, icon: string) => {
icon,
current: !dock.pin,
click() {
dock.pin = !dock.pin;
const hasActive = dock.element.querySelector(".dock__item--active");
if (!dock.pin) {
dock.resetDockPosition(hasActive ? true : false);
dock.resizeElement.classList.add("fn__none");
if (hasActive) {
dock.showDock(true);
} else {
dock.hideDock(true);
}
} else {
dock.layout.element.style.opacity = "";
dock.layout.element.style.transform = "";
if (hasActive) {
dock.resizeElement.classList.remove("fn__none");
}
}
dock.layout.element.classList.toggle("layout--float");
resizeTabs();
dock.togglePin();
}
};
};