Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2026-01-04 15:58:49 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

🎨 fix https://github.com/siyuan-note/siyuan/pull/7629

Browse source
This commit is contained in:
Vanessa 2023-03-13 21:16:13 +08:00
parent 516303c51f
commit 68c825a10f
4 changed files with 24 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -95,8 +95,8 @@
--b3-width-transition: width .2s cubic-bezier(0, 0, .2, 1) 0ms;
/* 阴影 */
--b3-point-shadow: 0 3px 6px rgba(140,149,159,0.15);
--b3-dialog-shadow: 0 8px 24px rgba(140,149,159,0.2);
--b3-point-shadow: 0 3px 6px rgba(140, 149, 159, 0.15);
--b3-dialog-shadow: 0 8px 24px rgba(140, 149, 159, 0.2);
/* 图表颜色 */
--b3-graph-p-point: #076f7e;
@ -136,6 +136,7 @@
--b3-protyle-inline-s-color: #202124;
--b3-protyle-inline-link-color: #4285f4;
--b3-protyle-inline-mark-background: rgb(252, 212, 126);
--b3-protyle-inline-mark-hl-background: #fffd38;
--b3-protyle-inline-mark-color: #202124;
--b3-protyle-inline-tag-color: #5f6368;
--b3-protyle-inline-blockref-color: #8250df;

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

@ -136,6 +136,7 @@
--b3-protyle-inline-s-color: #e8eaed;
--b3-protyle-inline-link-color: #8ab4f8;
--b3-protyle-inline-mark-background: rgb(50, 89, 61);
--b3-protyle-inline-mark-hl-background: #fffd38;
--b3-protyle-inline-mark-color: #e8eaed;
--b3-protyle-inline-tag-color: #9aa0a6;
--b3-protyle-inline-blockref-color: #8957e5;

6
app/src/assets/scss/protyle/_wysiwyg.scss
View file

@ -186,10 +186,10 @@
span[data-type~="search-mark"] {
background-color: var(--b3-protyle-inline-mark-background);
color: var(--b3-protyle-inline-mark-color);
}
span.current-search-highlight-mark{
background-color:lightgreen;
&.search-mark--hl {
background-color: var(--b3-protyle-inline-mark-hl-background);;
}
}
span[data-type="virtual-block-ref"] {

56
app/src/search/util.ts
View file

@ -486,21 +486,18 @@ export const genSearch = (config: ISearchOption, element: Element, closeCB?: ()
} else if (!target.classList.contains("b3-list-item--focus")) {
searchPanelElement.querySelector(".b3-list-item--focus").classList.remove("b3-list-item--focus");
target.classList.add("b3-list-item--focus");
target.removeAttribute("data-highlight-idx")
getArticle({
edit,
id: target.getAttribute("data-node-id"),
k: getKey(target)
});
searchInputElement.focus();
} else {
// 点击相同搜索结果,根据是否按下ctrl键来决定重置高亮,还是高亮下一个
highlightSearchItem({
} else if (target.classList.contains("b3-list-item--focus")) {
renderNextSearchMark({
edit,
id: target.getAttribute("data-node-id"),
target,
isCtrl:event.ctrlKey
})
});
searchInputElement.focus();
}
}, Constants.TIMEOUT_DBLCLICK);
@ -1119,44 +1116,25 @@ const getKey = (element: HTMLElement) => {
return [...new Set(keys)].join(" ");
};
const highlightSearchItem=(options: {
const renderNextSearchMark = (options: {
id: string,
edit: Protyle,
target?:any,
isCtrl?:boolean
})=>{
target: Element,
}) => {
let matchElement
let target=options.target
// 移除当前高亮的词
options.edit.protyle.wysiwyg.element.querySelector(".current-search-highlight-mark")?.classList.remove("current-search-highlight-mark")
if(target){
let hl_idx_s=target.getAttribute("data-highlight-idx")
let allMatchElements = options.edit.protyle.wysiwyg.element.querySelectorAll(`div[data-node-id="${options.id}"] span[data-type~="search-mark"]`);
if(allMatchElements.length>0){
// 将要高亮的索引
let idx_to_hl
if(!options.isCtrl){
// 重置,回到第一个高亮
idx_to_hl=0
}else {
// 高亮下一个
if (hl_idx_s == null){
idx_to_hl=1
}else {
let hl_idx =parseInt(hl_idx_s)
idx_to_hl=hl_idx+1
}
}
if (idx_to_hl >= allMatchElements.length) {
idx_to_hl=0
}
target.setAttribute("data-highlight-idx",String(idx_to_hl))
matchElement=allMatchElements[idx_to_hl]
const allMatchElements = Array.from(options.edit.protyle.wysiwyg.element.querySelectorAll(`div[data-node-id="${options.id}"] span[data-type~="search-mark"]`));
allMatchElements.find((item, itemIndex) => {
if (item.classList.contains("search-mark--hl")) {
item.classList.remove("search-mark--hl")
matchElement = allMatchElements[itemIndex + 1]
return;
}
})
if (!matchElement) {
matchElement = allMatchElements[0]
}
if (matchElement) {
// 高亮并居中
matchElement.classList.add("current-search-highlight-mark")
matchElement.classList.add("search-mark--hl");
const contentRect = options.edit.protyle.contentElement.getBoundingClientRect();
options.edit.protyle.contentElement.scrollTop = options.edit.protyle.contentElement.scrollTop + matchElement.getBoundingClientRect().top - contentRect.top - contentRect.height / 2;
}
@ -1179,7 +1157,7 @@ const getArticle = (options: {
onGet(getResponse, options.edit.protyle, foldResponse.data ? [Constants.CB_GET_ALL, Constants.CB_GET_HTML] : [Constants.CB_GET_HL, Constants.CB_GET_HTML]);
const matchElement = options.edit.protyle.wysiwyg.element.querySelector(`div[data-node-id="${options.id}"] span[data-type="search-mark"]`);
if (matchElement) {
matchElement.classList.add("current-search-highlight-mark")
matchElement.classList.add("search-mark--hl");
const contentRect = options.edit.protyle.contentElement.getBoundingClientRect();
options.edit.protyle.contentElement.scrollTop = options.edit.protyle.contentElement.scrollTop + matchElement.getBoundingClientRect().top - contentRect.top - contentRect.height / 2;
}