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

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

Browse source
This commit is contained in:
Vanessa 2023-04-28 12:02:08 +08:00
parent 9cb6e9ec25
commit 509a53a4bf
9 changed files with 121 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -93,12 +93,14 @@ html {
border-radius: 0;
& > .protyle-breadcrumb,
& > .block__icons { // 关系图
& > .block__icons { // 关系图、card
padding-left: var(--b3-toolbar-left-mac);
height: 32px;
min-height: 32px;
}
.protyle-breadcrumb > .protyle-breadcrumb__space {
.protyle-breadcrumb > .protyle-breadcrumb__space,
& > .block__icons > .fn__flex-1{
-webkit-app-region: drag;
min-width: 32px;

9
app/src/assets/scss/business/_card.scss
View file

@ -4,15 +4,6 @@
box-sizing: border-box;
max-height: 100%;
background-color: var(--b3-theme-surface);
&.fullscreen > .card__header {
padding: 2px 8px 2px var(--b3-toolbar-left-mac);
}
}
&__header {
display: flex;
padding: 8px 8px 8px 12px;
}
&__empty {

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

@ -58,13 +58,6 @@ body {
padding: 0 0 0 5px;
}
.card__main.fullscreen > .card__header {
padding: 2px 108px 2px 12px;
& > .fn__flex-1 {
-webkit-app-region: drag;
}
}
.fullscreen {
& > .protyle-breadcrumb,
& > .block__icons {

84
app/src/card/newCardTab.ts
View file

@ -2,7 +2,6 @@ import {Wnd} from "../layout/Wnd";
import {getInstanceById, getWndByLayout} from "../layout/util";
import {Tab} from "../layout/Tab";
import {Custom} from "../layout/dock/Custom";
import {Dialog} from "../dialog";
import {bindCardEvent, genCardHTML} from "./openCard";
import {fetchPost} from "../util/fetch";
import {Protyle} from "../protyle";
@ -10,7 +9,6 @@ import {Protyle} from "../protyle";
export const newCardTab = (options: {
cardType: TCardType,
id: string,
dialog: Dialog,
title?: string
}) => {
let wnd: Wnd;
@ -21,53 +19,85 @@ export const newCardTab = (options: {
if (!wnd) {
wnd = getWndByLayout(window.siyuan.layout.centerLayout);
}
let editor: Protyle
const tab = new Tab({
icon: "iconRiffCard",
title: window.siyuan.languages.spaceRepetition,
callback(tab) {
const custom = new Custom({
type: "card",
tab.addModel(newCardModel({
tab,
data: {
title: options.title,
cardType: options.cardType,
id: options.id
},
init(element) {
fetchPost(options.cardType === "all" ? "/api/riff/getRiffDueCards" :
(options.cardType === "doc" ? "/api/riff/getTreeRiffDueCards" : "/api/riff/getNotebookRiffDueCards"), {
rootID: options.id,
deckID: options.id,
notebook: options.id,
}, (response) => {
element.innerHTML = genCardHTML({
id: options.id,
cardType: options.cardType,
title: options.title
}
}));
}
});
wnd.split("lr").addTab(tab);
}
export const newCardModel = (options: {
tab: Tab,
data: {
cardType: TCardType,
id: string,
title?: string
}
}) => {
let editor: Protyle;
const custom = new Custom({
type: "card",
tab: options.tab,
data: options.data,
init() {
fetchPost(this.data.cardType === "all" ? "/api/riff/getRiffDueCards" :
(this.data.cardType === "doc" ? "/api/riff/getTreeRiffDueCards" : "/api/riff/getNotebookRiffDueCards"), {
rootID: this.data.id,
deckID: this.data.id,
notebook: this.data.id,
}, (response) => {
this.element.innerHTML = genCardHTML({
id: this.data.id,
cardType: this.data.cardType,
blocks: response.data.cards,
isTab: true,
});
editor = bindCardEvent({
element,
id: options.id,
title: options.title,
cardType: options.cardType,
element: this.element,
id: this.data.id,
title: this.data.title,
cardType: this.data.cardType,
blocks: response.data.cards,
dialog: options.dialog,
})
});
});
},
destroy() {
if (editor) {
editor.destroy();
}
},
resize(){
resize() {
if (editor) {
editor.resize();
}
},
update() {
fetchPost(this.data.cardType === "all" ? "/api/riff/getRiffDueCards" :
(this.data.cardType === "doc" ? "/api/riff/getTreeRiffDueCards" : "/api/riff/getNotebookRiffDueCards"), {
rootID: this.data.id,
deckID: this.data.id,
notebook: this.data.id,
}, (response) => {
this.element.innerHTML = genCardHTML({
id: this.data.id,
cardType: this.data.cardType,
blocks: response.data.cards,
isTab: true,
});
});
tab.addModel(custom);
}
});
wnd.split("lr").addTab(tab);
options.dialog.destroy();
return custom
}

12
app/src/card/openCard.ts
View file

@ -20,8 +20,8 @@ export const genCardHTML = (options: {
isTab: boolean
}) => {
return `<div class="card__main">
<div class="card__header">
<span class="fn__flex-1 fn__flex-center">${window.siyuan.languages.riffCard}</span>
<div class="block__icons">
${options.isTab ? '<div class="fn__flex-1"></div>' : `<span class="fn__flex-1 fn__flex-center">${window.siyuan.languages.riffCard}</span>`}
<span class="fn__space"></span>
<div data-type="count" class="ft__on-surface ft__smaller fn__flex-center${options.blocks.length === 0 ? " fn__none" : ""}">1/${options.blocks.length}</span></div>
<div class="fn__space"></div>
@ -97,7 +97,7 @@ export const bindCardEvent = (options: {
blocks: ICard[],
cardType: TCardType,
id?: string,
dialog: Dialog,
dialog?: Dialog,
}) => {
let index = 0;
const editor = new Protyle(options.element.querySelector("[data-type='render']") as HTMLElement, {
@ -188,16 +188,20 @@ export const bindCardEvent = (options: {
newCardTab({
cardType: filterElement.getAttribute("data-cardtype") as TCardType,
id: filterElement.getAttribute("data-id"),
dialog: options.dialog,
title: options.title
});
if (options.dialog) {
options.dialog.destroy();
}
event.stopPropagation();
event.preventDefault();
return;
}
const closeElement = hasClosestByAttribute(target, "data-type", "close");
if (closeElement) {
if (options.dialog) {
options.dialog.destroy();
}
event.stopPropagation();
event.preventDefault();
return;

5
app/src/dialog/processSystem.ts
View file

@ -109,6 +109,11 @@ export const reloadSync = (data: { upsertRootIDs: string[], removeRootIDs: strin
allModels.search.forEach(item => {
item.parent.panelElement.querySelector("#searchInput").dispatchEvent(new CustomEvent("input"));
});
allModels.custom.forEach(item => {
if (item.update) {
item.update();
}
});
/// #endif
};

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

@ -648,8 +648,10 @@ export class Wnd {
}
}
if (model instanceof Custom) {
if (model.destroy) {
model.destroy();
}
}
model.send("closews", {});
}

30
app/src/layout/dock/Custom.ts
View file

@ -4,42 +4,34 @@ import {Model} from "../Model";
export class Custom extends Model {
private element: Element;
public data: any;
public init: () => void;
public destroy: () => void;
public resize: () => void;
public update: () => void;
constructor(options: {
tab: Tab,
data: any,
destroy?: () => void,
resize?: () => void,
update?: () => void,
type: string, // 同一类型的唯一标识
init: (element: Element) => void
init: () => void
}) {
super({id: options.tab.id});
if (window.siyuan.config.fileTree.openFilesUseCurrentTab) {
options.tab.headElement.classList.add("item--unupdate");
}
this.element = options.tab.panelElement;
options.init(this.element);
this.data = options.data;
this.element.addEventListener("click", () => {
setPanelFocus(this.element.parentElement.parentElement);
});
this.data = options.data;
this.init = options.init;
this.destroy = options.destroy;
this.resize = options.resize;
}
public destroy() {
if (this.destroy) {
this.destroy();
}
}
public resize() {
if (this.resize) {
this.resize();
}
}
private update() {
// TODO
this.update = options.update;
this.init();
}
}

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

@ -33,6 +33,8 @@ import {setTabPosition} from "../window/setHeader";
/// #endif
import {showMessage} from "../dialog/message";
import {getIdZoomInByPath} from "../util/pathName";
import {Custom} from "./dock/Custom";
import {newCardModel} from "../card/newCardTab";
export const setPanelFocus = (element: Element) => {
if (element.classList.contains("layout__tab--active") || element.classList.contains("layout__wnd--active")) {
@ -334,6 +336,11 @@ export const JSONToCenter = (json: any, layout?: Layout | Wnd | Tab | Model, isS
tab: (layout as Tab),
config: json.config
}));
} else if (json.instance === "Custom") {
(layout as Tab).addModel(newCardModel({
tab: (layout as Tab),
data: json.data
}));
}
if (json.children) {
if (Array.isArray(json.children)) {
@ -462,6 +469,9 @@ export const layoutToJSON = (layout: Layout | Wnd | Tab | Model, json: any) => {
} else if (layout instanceof Search) {
json.instance = "Search";
json.config = layout.config;
} else if (layout instanceof Custom) {
json.instance = "Custom";
json.data = layout.data;
}
if (layout instanceof Layout || layout instanceof Wnd) {
@ -548,8 +558,10 @@ export const resizeTabs = () => {
});
});
models.custom.forEach(item => {
if (item.resize) {
item.resize();
})
}
});
pdfResize();
hideAllElements(["gutter"]);
}, 200);
@ -606,6 +618,11 @@ export const copyTab = (tab: Tab) => {
tab: newTab,
config: tab.model.config
});
} else if (tab.model instanceof Custom) {
model = newCardModel({
tab,
data: tab.model.data
});
} else if (!tab.model && tab.headElement) {
const initData = JSON.parse(tab.headElement.getAttribute("data-initdata") || "{}");
model = new Editor({