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

💄 backlink and graph input

Browse source
This commit is contained in:
Vanessa 2023-07-07 15:51:00 +08:00
parent e70caed46a
commit 718eacdd2a
5 changed files with 31 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

1
app/src/assets/scss/business/_block.scss
View file

@ -117,6 +117,7 @@
flex-shrink: 0;
}
white-space: nowrap;
margin-right: 8px;
display: flex;
align-items: center;

0
app/src/assets/scss/business/resize.scss → app/src/assets/scss/business/_resize.scss
View file

23
app/src/assets/scss/business/_search.scss
View file

@ -73,26 +73,9 @@
}
&__label {
cursor: pointer;
flex: 1;
&:hover {
color: var(--b3-theme-on-background);
}
.b3-form__icon-input {
width: 0;
transition: var(--b3-transition);
border-color: transparent;
box-sizing: border-box;
padding-right: 0;
&:focus,
&.search__input--block {
width: 100%;
border-color: var(--b3-theme-primary);
}
}
position: absolute;
right: 8px;
z-index: 1;
}
&__preview {

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

@ -83,12 +83,11 @@ export class Backlink extends Model {
<svg><use xlink:href="#iconLink"></use></svg>
${window.siyuan.languages.backlinks}
</div>
<span class="counter listCount"></span>
<span class="counter listCount" style="margin-left: 0"></span>
<span class="fn__flex-1"></span>
<span class="fn__space"></span>
<label class="b3-form__icon b3-form__icon--small search__label">
<svg class="b3-form__icon-icon"><use xlink:href="#iconFilter"></use></svg>
<input class="b3-text-field b3-text-field--small b3-form__icon-input" placeholder="${window.siyuan.languages.filterKeywordEnter}" />
</label>
<input class="b3-text-field search__label fn__none fn__size200" placeholder="${window.siyuan.languages.filterKeywordEnter}" />
<span data-type="search" class="block__icon b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.filter}"><svg><use xlink:href='#iconFilter'></use></svg></span>
<span class="fn__space"></span>
<span data-type="refresh" class="block__icon b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.refresh}"><svg><use xlink:href='#iconRefresh'></use></svg></span>
<span class="fn__space"></span>
@ -110,12 +109,11 @@ export class Backlink extends Model {
<svg><use xlink:href="#iconLink"></use></svg>
${window.siyuan.languages.mentions}
</div>
<span class="counter listMCount"></span>
<span class="counter listMCount" style="margin-left: 0;"></span>
<span class="fn__flex-1"></span>
<span class="fn__space"></span>
<label class="b3-form__icon b3-form__icon--small search__label">
<svg class="b3-form__icon-icon"><use xlink:href="#iconFilter"></use></svg>
<input class="b3-text-field b3-text-field--small b3-form__icon-input" placeholder="${window.siyuan.languages.filterKeywordEnter}" />
</label>
<input class="b3-text-field search__label fn__none fn__size200" placeholder="${window.siyuan.languages.filterKeywordEnter}" />
<span data-type="search" class="block__icon b3-tooltips b3-tooltips__nw" aria-label="${window.siyuan.languages.filter}"><svg><use xlink:href='#iconFilter'></use></svg></span>
<span class="fn__space"></span>
<span data-type="mSort" data-sort="3" class="block__icon b3-tooltips b3-tooltips__nw" aria-label="${window.siyuan.languages.sort}"><svg><use xlink:href='#iconSort'></use></svg></span>
<span class="fn__space"></span>
@ -135,6 +133,10 @@ export class Backlink extends Model {
this.inputsElement = this.element.querySelectorAll("input");
this.inputsElement.forEach((item) => {
item.addEventListener("blur", (event: KeyboardEvent) => {
const inputElement = event.target as HTMLInputElement;
inputElement.classList.add("fn__none");
});
item.addEventListener("keydown", (event: KeyboardEvent) => {
if (!event.isComposing && event.key === "Enter") {
this.searchBacklinks();
@ -292,6 +294,10 @@ export class Backlink extends Model {
case "min":
getDockByType("backlink").toggleModel("backlink");
break;
case "search":
target.previousElementSibling.classList.remove("fn__none");
(target.previousElementSibling as HTMLInputElement).select();
break;
case "sort":
case "mSort":
this.showSortMenu(type, target.getAttribute("data-sort"));

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

@ -259,10 +259,10 @@ export class Graph extends Model {
<svg><use xlink:href="#icon${this.type === "global" ? "GlobalGraph" : "Graph"}"></use></svg>
${this.type === "global" ? window.siyuan.languages.globalGraph : window.siyuan.languages.graphView}
</div>
<label class="b3-form__icon b3-form__icon--small search__label">
<svg class="b3-form__icon-icon"><use xlink:href="#iconSearch"></use></svg>
<input class="b3-form__icon-input b3-text-field b3-text-field--small" placeholder="${window.siyuan.languages.search}" />
</label>
<span class="fn__flex-1"></span>
<span class="fn__space"></span>
<input class="b3-text-field search__label fn__size200 fn__none" placeholder="${window.siyuan.languages.search}" />
<span data-type="search" class="block__icon b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.search}"><svg><use xlink:href='#iconFilter'></use></svg></span>
<span class="fn__space"></span>
<span data-type="refresh" class="block__icon b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.refresh}"><svg><use xlink:href='#iconRefresh'></use></svg></span>
<div class="fn__space"></div>
@ -314,6 +314,9 @@ export class Graph extends Model {
target.classList.add("ft__primary");
this.panelElement.style.right = "0";
}
} else if (dataType === "search") {
target.previousElementSibling.classList.remove("fn__none");
(target.previousElementSibling as HTMLInputElement).select();
} else if (dataType === "refresh") {
this.searchGraph(false);
} else if (dataType === "fullscreen") {
@ -334,6 +337,10 @@ export class Graph extends Model {
this.searchGraph(false);
this.inputElement.classList.add("search__input--block");
});
this.inputElement.addEventListener("blur", (event: InputEvent) => {
const inputElement = event.target as HTMLInputElement;
inputElement.classList.add("fn__none");
});
this.inputElement.addEventListener("input", (event: InputEvent) => {
if (event.isComposing) {
return;