Skip to content

Commit

Permalink
💄 backlink and graph input
Browse files Browse the repository at this point in the history
  • Loading branch information
@Vanessa219
Vanessa219 committed Jul 7, 2023
1 parent e70caed commit 718eacd
Show file tree
Hide file tree
Showing 5 changed files with 31 additions and 34 deletions.
1 change: 1 addition & 0 deletions app/src/assets/scss/business/_block.scss
View file
Expand Up @@ -117,6 +117,7 @@
flex-shrink: 0;
}

white-space: nowrap;
margin-right: 8px;
display: flex;
align-items: center;
Expand Down
0 app/src/assets/scss/business/resize.scss → app/src/assets/scss/business/_resize.scss
View file
File renamed without changes.
23 changes: 3 additions & 20 deletions app/src/assets/scss/business/_search.scss
View file
Expand Up @@ -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 {
Expand Down
26 changes: 16 additions & 10 deletions app/src/layout/dock/Backlink.ts
View file
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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();
Expand Down Expand Up @@ -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"));
Expand Down
15 changes: 11 additions & 4 deletions app/src/layout/dock/Graph.ts
View file
Expand Up @@ -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>
Expand Down Expand Up @@ -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") {
Expand All @@ -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;
Expand Down

0 comments on commit 718eacd

Please sign in to comment.