0ct0pu5/siyuan
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

💄 https://github.com/siyuan-note/siyuan/issues/6197

Browse source
This commit is contained in:
Vanessa 2022-10-14 22:29:40 +08:00
parent 8832304eeb
commit 19e2bd2ab8
21 changed files with 81 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
app/appearance/themes/daylight/theme.css
View file

@ -26,6 +26,11 @@
--b3-font-family-emoji: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "Android Emoji";
--b3-font-family-math: KaTeX_Math;
/* 顶部工具栏 */
--b3-toolbar-background: #292a2d;
--b3-toolbar-blur-background: #3f4041;
--b3-toolbar-color: #9aa0a6;
/* 线条 */
--b3-border-color: rgba(0, 0, 0, .06);

7
app/appearance/themes/midnight/theme.css
View file

@ -26,8 +26,13 @@
--b3-font-family-emoji: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "Android Emoji";
--b3-font-family-math: KaTeX_Math;
/* 顶部工具栏 */
--b3-toolbar-background: #292a2d;
--b3-toolbar-blur-background: #3f4041;
--b3-toolbar-color: #9aa0a6;
/* 线条 */
--b3-border-color: rgba(230, 230, 230, .06);
--b3-border-color: #0e0f10;
/* 滚动条 */
--b3-scroll-color: rgba(230, 230, 230, .2);

4
app/src/assets/scss/_block.scss
View file

@ -95,10 +95,6 @@
height: 30px;
flex-shrink: 0;
&--active {
background-color: var(--b3-list-hover);
}
&--border {
background-color: var(--b3-theme-surface);
}

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

@ -1,7 +1,7 @@
.layout {
&__wnd--active {
.layout-tab-bar .item--focus {
box-shadow: inset 0 2px 0 0 var(--b3-theme-background-light) !important;
box-shadow: inset 0 -2px 0 0 var(--b3-theme-primary) !important;
& > .item__text {
color: var(--b3-theme-on-background);
@ -9,6 +9,17 @@
}
}
&__tab--active {
.b3-list--background .b3-list-item--focus:not(.dragover):not(.dragover__top):not(.dragover__bottom) {
background-color: var(--b3-theme-primary-lightest);
}
.graph__svg,
.inbox__list {
background-color: var(--b3-theme-background);
}
}
&__resize {
cursor: row-resize;
margin: -3px 0;
@ -130,7 +141,6 @@
&:hover:not(.item--focus):not(.item--readonly) {
background-color: var(--b3-list-hover);
box-shadow: none;
border-radius: 4px 4px 0 0;
.item__text::after {
background: linear-gradient(90deg, rgba(0, 0, 0, 0.001), var(--b3-list-hover));
@ -160,7 +170,6 @@
&--focus {
background-color: var(--b3-theme-background);
box-shadow: none !important;
border-radius: 4px 4px 0 0;
.item__text::after {
background: linear-gradient(90deg, rgba(0, 0, 0, 0.001), var(--b3-theme-background));

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

@ -8,6 +8,7 @@
&:hover:not(.b3-list-item--focus),
&--focus:not(.dragover):not(.dragover__top):not(.dragover__bottom) {
background-color: var(--b3-list-hover);
border-radius: 4px;
}
}

2
app/src/assets/scss/_protyle.scss
View file

@ -168,7 +168,7 @@
padding: 4px;
line-height: 16px;
height: 16px;
border-radius: 2px;
border-radius: 4px;
margin: 3px 0;
color: var(--b3-theme-on-surface);
max-width: 70%;

8
app/src/assets/scss/_reset.scss
View file

@ -19,6 +19,10 @@ body {
max-height: 100%;
overflow: hidden;
&.body--blur .toolbar {
background: var(--b3-toolbar-blur-background);
}
&.body--win32 {
-webkit-font-smoothing: auto;
@ -26,10 +30,6 @@ body {
padding-left: 0;
}
&.body--blur {
border-top-color: var(--b3-theme-surface);
}
.fullscreen {
& > .protyle-breadcrumb,
& > .block__icons {

10
app/src/assets/scss/_scroll.scss
View file

@ -1,6 +1,6 @@
::-webkit-scrollbar {
width: 10px;
height: 10px;
width: 8px;
height: 8px;
}
::-webkit-scrollbar-corner {
@ -10,10 +10,10 @@
::-webkit-scrollbar-thumb {
box-sizing: content-box;
border: 3px solid transparent;
border-radius: 1024px;
box-shadow: inset 0 0 6px 6px var(--b3-scroll-color);
border-radius: 4px;
box-shadow: inset 0 0 4px 4px var(--b3-scroll-color);
&:hover {
border-width: 1.5px;
border-width: 1px;
}
}

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

@ -159,11 +159,12 @@ progressLoading: 400
}
.toolbar {
background-color: #292a2d;
background-color: var(--b3-toolbar-background);
box-sizing: border-box;
height: 42px;
line-height: 22px;
padding-left: 84px;
box-shadow: inset 0px -1px 1px 0px var(--b3-border-color);
&--browser {
padding-left: 0;
@ -183,7 +184,7 @@ progressLoading: 400
#drag {
-webkit-app-region: drag;
font-size: 14px;
color: #9aa0a6;
color: var(--b3-toolbar-color);
user-select: none;
text-align: center;
white-space: nowrap;
@ -193,7 +194,7 @@ progressLoading: 400
&__item {
flex-shrink: 0;
cursor: pointer;
color: #9aa0a6;
color: var(--b3-toolbar-color);
padding: 12px;
box-sizing: border-box;
transition: var(--b3-transition);

4
app/src/layout/dock/Backlink.ts
View file

@ -233,7 +233,7 @@ export class Backlink extends Model {
if (this.type === "local") {
setPanelFocus(this.element.parentElement.parentElement);
} else {
setPanelFocus(this.element.firstElementChild);
setPanelFocus(this.element);
}
let target = event.target as HTMLElement;
while (target && !target.isEqualNode(this.element)) {
@ -298,7 +298,7 @@ export class Backlink extends Model {
this.searchBacklinks(true);
if (this.type === "pin") {
setPanelFocus(this.element.firstElementChild);
setPanelFocus(this.element);
}
}

4
app/src/layout/dock/Bookmark.ts
View file

@ -178,7 +178,7 @@ export class Bookmark extends Model {
this.tree.expandAll();
});
this.element.addEventListener("click", (event) => {
setPanelFocus(this.element.firstElementChild);
setPanelFocus(this.element);
let target = event.target as HTMLElement;
while (target && !target.isEqualNode(this.element)) {
if (target.classList.contains("block__icon")) {
@ -197,7 +197,7 @@ export class Bookmark extends Model {
});
this.update();
setPanelFocus(this.element.firstElementChild);
setPanelFocus(this.element);
}
public update() {

10
app/src/layout/dock/Files.ts
View file

@ -93,7 +93,7 @@ export class Files extends Model {
this.element = this.actionsElement.nextElementSibling as HTMLElement;
this.closeElement = options.tab.panelElement.lastElementChild as HTMLElement;
this.closeElement.addEventListener("click", (event) => {
setPanelFocus(this.actionsElement);
setPanelFocus(this.element.parentElement);
let target = event.target as HTMLElement;
while (target && !target.isEqualNode(this.closeElement)) {
const type = target.getAttribute("data-type");
@ -180,7 +180,7 @@ export class Files extends Model {
}
target = target.parentElement;
}
setPanelFocus(this.actionsElement);
setPanelFocus(this.element.parentElement);
});
let clickTimeout: number;
this.element.addEventListener("click", (event) => {
@ -245,7 +245,7 @@ export class Files extends Model {
}
} else if (target.getAttribute("data-type") === "navigation-root") {
this.getLeaf(target, notebookId);
setPanelFocus(this.actionsElement);
setPanelFocus(this.element.parentElement);
}
}, Constants.TIMEOUT_DBLCLICK);
} else if (event.detail === 2) {
@ -262,7 +262,7 @@ export class Files extends Model {
}
}
if (needFocus) {
setPanelFocus(this.actionsElement);
setPanelFocus(this.element.parentElement);
}
});
// b3-list-item--focus 样式会遮挡拖拽排序的上下线条
@ -467,7 +467,7 @@ export class Files extends Model {
newElement.classList.remove("dragover", "dragover__bottom", "dragover__top");
});
this.init();
setPanelFocus(this.actionsElement);
setPanelFocus(this.element.parentElement);
}
private genNotebook(item: INotebook) {

4
app/src/layout/dock/Graph.ts
View file

@ -293,7 +293,7 @@ export class Graph extends Model {
if (this.type === "local") {
setPanelFocus(this.element.parentElement.parentElement);
} else {
setPanelFocus(this.element.firstElementChild);
setPanelFocus(this.element);
}
let target = event.target as HTMLElement;
while (target && !target.isEqualNode(this.element)) {
@ -364,7 +364,7 @@ export class Graph extends Model {
});
this.searchGraph(options.type !== "global");
if (this.type !== "local") {
setPanelFocus(this.element.firstElementChild);
setPanelFocus(this.element);
}
}

4
app/src/layout/dock/Inbox.ts
View file

@ -54,7 +54,7 @@ export class Inbox extends Model {
const detailsElement = this.element.querySelector(".inbox__details");
const selectAllElement = this.element.querySelector(".block__icons input") as HTMLInputElement;
this.element.addEventListener("click", (event: MouseEvent) => {
setPanelFocus(this.element.firstElementChild);
setPanelFocus(this.element);
let target = event.target as HTMLElement;
while (target && !target.isEqualNode(this.element)) {
const typeElement = hasClosestByAttribute(target, "data-type", null);
@ -160,7 +160,7 @@ ${(Lute.New()).MarkdownStr("", data.shorthandContent)}
}
);
this.update();
setPanelFocus(this.element.firstElementChild);
setPanelFocus(this.element);
}
private updateAction() {

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

@ -121,7 +121,7 @@ export class Outline extends Model {
if (this.type === "local") {
setPanelFocus(options.tab.panelElement.parentElement.parentElement);
} else {
setPanelFocus(options.tab.panelElement.firstElementChild);
setPanelFocus(options.tab.panelElement);
}
let target = event.target as HTMLElement;
while (target && !target.isEqualNode(options.tab.panelElement)) {
@ -163,7 +163,7 @@ export class Outline extends Model {
});
if (this.type === "pin") {
setPanelFocus(options.tab.panelElement.firstElementChild);
setPanelFocus(options.tab.panelElement);
}
}

4
app/src/layout/dock/Tag.ts
View file

@ -130,7 +130,7 @@ export class Tag extends Model {
this.tree.expandAll();
});
this.element.addEventListener("click", (event: MouseEvent) => {
setPanelFocus(this.element.firstElementChild);
setPanelFocus(this.element);
let target = event.target as HTMLElement;
while (target && !target.isEqualNode(this.element)) {
if (target.classList.contains("block__icon")) {
@ -202,7 +202,7 @@ export class Tag extends Model {
}
});
this.update();
setPanelFocus(this.element.firstElementChild);
setPanelFocus(this.element);
}
private update() {

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

@ -92,7 +92,7 @@ export class Dock {
public toggleModel(type: TDockType, show = false, close = false) {
const target = this.element.querySelector(`[data-type="${type}"]`) as HTMLElement;
if (show && target.classList.contains("dock__item--active")) {
target.classList.remove("dock__item--active");
target.classList.remove("dock__item--active", "dock__item--activefocus");
}
const index = parseInt(target.getAttribute("data-index"));
const wnd = this.layout.children[index] as Wnd;
@ -101,8 +101,8 @@ export class Dock {
let needFocus = false;
Array.from(wnd.element.querySelector(".layout-tab-container").children).find(item => {
if (item.getAttribute("data-id") === target.getAttribute("data-id")) {
if (!item.firstElementChild.classList.contains("block__icons--active")) {
setPanelFocus(item.firstElementChild);
if (!item.classList.contains("layout__tab--active")) {
setPanelFocus(item);
needFocus = true;
}
return true;
@ -113,7 +113,7 @@ export class Dock {
}
}
target.classList.remove("dock__item--active");
target.classList.remove("dock__item--active", "dock__item--activefocus");
// dock 隐藏
if (this.element.querySelectorAll(".dock__item--active").length === 0) {
if (this.position === "Left" || this.position === "Right") {
@ -128,9 +128,9 @@ export class Dock {
}
} else {
this.element.querySelectorAll(`.dock__item--active[data-index="${index}"]`).forEach(item => {
item.classList.remove("dock__item--active");
item.classList.remove("dock__item--active", "dock__item--activefocus");
});
target.classList.add("dock__item--active");
target.classList.add("dock__item--active", "dock__item--activefocus");
if (!target.getAttribute("data-id")) {
let editor: Protyle;
const models = getAllModels();
@ -226,7 +226,7 @@ export class Dock {
Array.from(wnd.element.querySelector(".layout-tab-container").children).forEach(item => {
if (item.getAttribute("data-id") === target.getAttribute("data-id")) {
item.classList.remove("fn__none");
setPanelFocus(item.firstElementChild);
setPanelFocus(item);
} else {
item.classList.add("fn__none");
}

16
app/src/layout/util.ts
View file

@ -28,11 +28,11 @@ import {pdfResize} from "../asset/renderAssets";
import {Backlink} from "./dock/Backlink";
export const setPanelFocus = (element: Element) => {
if (element.classList.contains("block__icons--active") || element.classList.contains("layout__wnd--active")) {
if (element.classList.contains("layout__tab--active") || element.classList.contains("layout__wnd--active")) {
return;
}
document.querySelectorAll(".block__icons--active").forEach(item => {
item.classList.remove("block__icons--active");
document.querySelectorAll(".layout__tab--active").forEach(item => {
item.classList.remove("layout__tab--active");
});
document.querySelectorAll(".dock__item--activefocus").forEach(item => {
item.classList.remove("dock__item--activefocus");
@ -40,10 +40,12 @@ export const setPanelFocus = (element: Element) => {
document.querySelectorAll(".layout__wnd--active").forEach(item => {
item.classList.remove("layout__wnd--active");
});
if (element.classList.contains("block__icons")) {
element.classList.add("block__icons--active");
if (element.getAttribute("data-type") === "wnd") {
element.classList.add("layout__wnd--active");
} else {
element.classList.add("layout__tab--active");
["file", "inbox", "backlink", "tag", "bookmark", "graph", "globalGraph", "outline"].find(item => {
if (element.parentElement.classList.contains("sy__" + item)) {
if (element.classList.contains("sy__" + item)) {
document.querySelector(`.dock__item[data-type="${item}"]`).classList.add("dock__item--activefocus");
return true;
}
@ -55,8 +57,6 @@ export const setPanelFocus = (element: Element) => {
editElement.blur();
}
}
} else {
element.classList.add("layout__wnd--active");
}
};

4
app/src/protyle/index.ts
View file

@ -195,8 +195,8 @@ export class Protyle {
updatePanelByEditor(this.protyle, false);
} else {
// 悬浮层应移除其余面板高亮，否则按键会被面板监听到
document.querySelectorAll(".block__icons--active").forEach(item => {
item.classList.remove("block__icons--active");
document.querySelectorAll(".layout__tab--active").forEach(item => {
item.classList.remove("layout__tab--active");
});
document.querySelectorAll(".layout__wnd--active").forEach(item => {
item.classList.remove("layout__wnd--active");

12
app/src/util/globalShortcut.ts
View file

@ -573,7 +573,7 @@ export const globalShortcut = () => {
// 面板折叠展开操作
if (!event.repeat && (matchHotKey(window.siyuan.config.keymap.editor.general.collapse.custom, event) || matchHotKey(window.siyuan.config.keymap.editor.general.expand.custom, event))) {
let activePanelElement = document.querySelector(".block__icons--active");
let activePanelElement = document.querySelector(".layout__tab--active");
if (!activePanelElement) {
Array.from(document.querySelectorAll(".layout__wnd--active .layout-tab-container > div")).forEach(item => {
if (!item.classList.contains("fn__none")) {
@ -602,10 +602,10 @@ export const globalShortcut = () => {
if (matchHotKey(window.siyuan.config.keymap.general.closeTab.custom, event) && !event.repeat) {
event.preventDefault();
event.stopPropagation();
let activeTabElement = document.querySelector(".block__icons--active");
let activeTabElement = document.querySelector(".layout__tab--active");
if (activeTabElement && activeTabElement.getBoundingClientRect().width > 0) {
let type: TDockType;
Array.from(activeTabElement.parentElement.classList).find(item => {
Array.from(activeTabElement.classList).find(item => {
if (item.startsWith("sy__")) {
type = item.replace("sy__", "") as TDockType;
return true;
@ -756,9 +756,9 @@ const editKeydown = (event: KeyboardEvent) => {
}
protyle = editor.editor.protyle;
}
const activePanelElement = document.querySelector(".block__icons--active");
const activePanelElement = document.querySelector(".layout__tab--active");
let isFileFocus = false;
if (activePanelElement && activePanelElement.parentElement.classList.contains("sy__file")) {
if (activePanelElement && activePanelElement.classList.contains("sy__file")) {
isFileFocus = true;
}
let searchKey = "";
@ -858,7 +858,7 @@ const fileTreeKeydown = (event: KeyboardEvent) => {
dockFile.toggleModel("file", true);
return;
}
if (!files.element.previousElementSibling.classList.contains("block__icons--active")) {
if (!files.element.parentElement.classList.contains("layout__tab--active")) {
return false;
}
let liElement = files.element.querySelector(".b3-list-item--focus");

8
app/src/util/onGetConfig.ts
View file

@ -15,7 +15,6 @@ import {fetchPost} from "./fetch";
import {mountHelp, newDailyNote} from "./mount";
import {MenuItem} from "../menus/Menu";
import {initAssets, loadAssets, renderSnippet, setInlineStyle, setMode} from "./assets";
import {goBack, goForward} from "./backForward";
import {getOpenNotebookCount} from "./pathName";
import {openFileById} from "../editor/util";
import {focusByRange} from "../protyle/util/selection";
@ -314,6 +313,9 @@ const initWindow = () => {
/// #if !BROWSER
const currentWindow = getCurrentWindow();
currentWindow.on("focus", winOnFocus);
currentWindow.on("blur", () => {
document.body.classList.add("body--blur");
});
ipcRenderer.on(Constants.SIYUAN_OPENURL, (event, url) => {
if (!/^siyuan:\/\/blocks\/\d{14}-\w{7}/.test(url)) {
return;
@ -505,10 +507,6 @@ const initWindow = () => {
maxBtnElement.style.display = "none";
});
currentWindow.on("leave-full-screen", toggleMaxRestoreButtons);
currentWindow.on("blur", () => {
document.body.classList.add("body--blur");
});
const minBtnElement = document.getElementById("minWindow");
const closeBtnElement = document.getElementById("closeWindow");
minBtnElement.addEventListener("click", () => {