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

♻️ scss

Browse source
This commit is contained in:
Vanessa 2023-02-24 10:01:40 +08:00
parent 406c820432
commit fc9768fb43
12 changed files with 111 additions and 102 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -29,6 +29,8 @@
@import "business/search";
@import "pickr/pcr";
@import "viewerjs/viewer";
@import "business/export";
@import "business/card";
/*
.status: 3
@ -417,5 +419,27 @@ html {
}
}
.switch-doc {
max-height: 70vh;
width: 520px;
.b3-list:last-child {
border-left: 1px solid var(--b3-theme-surface-lighter);
max-height: calc(70vh - 35px)
}
&__path {
padding: 4px 8px;
border-top: 1px solid var(--b3-theme-surface-lighter);
color: var(--b3-theme-on-surface);
font-size: 12px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
line-height: 18px;
min-height: 18px;
}
}
// 需放置最后，否则 https://github.com/siyuan-note/siyuan/issues/7056
@import "util/responsive";

53
app/src/assets/scss/business/_card.scss Normal file
View file

@ -0,0 +1,53 @@
.card {
&__empty {
display: flex;
justify-content: center;
flex-direction: column;
flex: 1;
text-align: center;
background-color: var(--b3-theme-background);
font-size: 16px;
& > div {
font-size: 64px;
margin-bottom: 16px;
}
}
&__action {
padding: 16px 24px;
& > div > span {
display: block;
color: var(--b3-theme-on-surface);
text-align: center;
line-height: 15px;
font-size: 10px;
}
}
&__block {
.protyle-wysiwyg [data-node-id][custom-riff-decks] {
box-shadow: none;
}
&--hide {
.protyle-wysiwyg > .sb > div:nth-of-type(n+2):not(.protyle-attr) {
display: none;
}
.li > .list {
display: none;
}
span[data-type~=mark] {
transition: var(--b3-transition);
color: transparent !important;
}
}
}
}

5
app/src/assets/scss/business/_export.scss Normal file
View file

@ -0,0 +1,5 @@
.export-img.protyle-wysiwyg [data-node-id].li[fold="1"] > .protyle-action:after {
background-color: transparent;
border: 1px solid var(--b3-list-hover);
box-sizing: border-box;
}

7
app/src/assets/scss/business/_history.scss
View file

@ -42,4 +42,11 @@
color: var(--b3-theme-on-surface);
background: var(--b3-theme-background);
}
&__diff {
width: 200px;
border-right: 1px solid var(--b3-border-color);
padding: 8px 0;
overflow: auto;
}
}

82
app/src/assets/scss/component/_dialog.scss
View file

@ -82,86 +82,4 @@
height: 16px;
width: 16px;
}
&--switch {
max-height: 70vh;
width: 520px;
.b3-list:last-child {
border-left: 1px solid var(--b3-theme-surface-lighter);
max-height: calc(70vh - 35px)
}
.dialog__path {
padding: 4px 8px;
border-top: 1px solid var(--b3-theme-surface-lighter);
color: var(--b3-theme-on-surface);
font-size: 12px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
line-height: 18px;
min-height: 18px;
}
}
&__diff {
width: 200px;
border-right: 1px solid var(--b3-border-color);
padding: 8px 0;
overflow: auto;
}
&__cardempty {
display: flex;
justify-content: center;
flex-direction: column;
flex: 1;
text-align: center;
background-color: var(--b3-theme-background);
font-size: 16px;
& > div {
font-size: 64px;
margin-bottom: 16px;
}
}
&__cardaction {
padding: 16px 24px;
& > div > span {
display: block;
color: var(--b3-theme-on-surface);
text-align: center;
line-height: 15px;
font-size: 10px;
}
}
&__cardblock {
.protyle-wysiwyg [data-node-id][custom-riff-decks] {
box-shadow: none;
}
&--hide {
.protyle-wysiwyg > .sb > div:nth-of-type(n+2):not(.protyle-attr) {
display: none;
}
.li > .list {
display: none;
}
span[data-type~=mark] {
transition: var(--b3-transition);
color: transparent !important;
}
}
}
&__exportimg.protyle-wysiwyg [data-node-id].li[fold="1"] > .protyle-action:after {
background-color: transparent;
border: 1px solid var(--b3-list-hover);
}
}

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

@ -21,6 +21,8 @@
@import "protyle/protyle";
@import "component/typography";
@import "viewerjs/viewer";
@import "business/export";
@import "business/card";
.block__popover {
width: 80vw;

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

@ -48,17 +48,17 @@ export const openCardByData = (cardsData: ICard[], html = "") => {
<span class="fn__flex-1 fn__flex-center">${window.siyuan.languages.riffCard}</span>
${html}
</div>
<div class="b3-dialog__cardblock b3-dialog__cardblock--hide fn__flex-1${blocks.length === 0 ? " fn__none" : ""}" data-type="render"></div>
<div class="b3-dialog__cardempty${blocks.length === 0 ? "" : " fn__none"}" data-type="empty">
<div class="card__block card__block--hide fn__flex-1${blocks.length === 0 ? " fn__none" : ""}" data-type="render"></div>
<div class="card__empty${blocks.length === 0 ? "" : " fn__none"}" data-type="empty">
<div>🔮</div>
${window.siyuan.languages.noDueCard}
</div>
<div class="fn__flex b3-dialog__cardaction${blocks.length === 0 ? " fn__none" : ""}">
<div class="fn__flex card__action${blocks.length === 0 ? " fn__none" : ""}">
<span class="fn__flex-1"></span>
<button data-type="-1" class="b3-button">Show (S)</button>
<span class="fn__flex-1"></span>
</div>
<div class="fn__flex b3-dialog__cardaction fn__none">
<div class="fn__flex card__action fn__none">
<div>
<span></span>
<button data-type="0" aria-label="1 / j" class="b3-button b3-button--error b3-tooltips__s b3-tooltips">
@ -114,7 +114,7 @@ export const openCardByData = (cardsData: ICard[], html = "") => {
(dialog.element.firstElementChild as HTMLElement).style.zIndex = "200";
dialog.element.setAttribute("data-key", window.siyuan.config.keymap.general.riffCard.custom);
const countElement = dialog.element.querySelector('[data-type="count"]');
const actionElements = dialog.element.querySelectorAll(".b3-dialog__cardaction");
const actionElements = dialog.element.querySelectorAll(".card__action");
dialog.element.addEventListener("click", (event) => {
const viewElement = hasClosestByAttribute(event.target as HTMLElement, "data-type", "view");
if (viewElement) {
@ -159,7 +159,7 @@ export const openCardByData = (cardsData: ICard[], html = "") => {
event.stopPropagation();
hideElements(["toolbar", "hint", "util"], editor.protyle);
if (type === "-1") {
editor.protyle.element.classList.remove("b3-dialog__cardblock--hide");
editor.protyle.element.classList.remove("card__block--hide");
actionElements[0].classList.add("fn__none");
actionElements[1].querySelectorAll(".b3-button").forEach((element, btnIndex) => {
element.previousElementSibling.textContent = blocks[index].nextDues[btnIndex];
@ -174,7 +174,7 @@ export const openCardByData = (cardsData: ICard[], html = "") => {
rating: parseInt(type)
}, () => {
index++;
editor.protyle.element.classList.add("b3-dialog__cardblock--hide");
editor.protyle.element.classList.add("card__block--hide");
if (index > blocks.length - 1) {
countElement.classList.add("fn__none");
editor.protyle.element.classList.add("fn__none");
@ -204,7 +204,7 @@ export const openCardByData = (cardsData: ICard[], html = "") => {
fetchPost("/api/riff/getRiffDueCards", {deckID: selectElement.value}, (cardsChangeResponse) => {
blocks = cardsChangeResponse.data;
index = 0;
editor.protyle.element.classList.add("b3-dialog__cardblock--hide");
editor.protyle.element.classList.add("card__block--hide");
if (blocks.length > 0) {
countElement.lastElementChild.innerHTML = `<span>1</span>/${blocks.length}`;
countElement.classList.remove("fn__none");

2
app/src/card/viewCards.ts
View file

@ -34,7 +34,7 @@ export const viewCards = (deckID: string, title: string, cb:(response:IWebSocket
${renderViewItem(response.data.blocks)}
</ul>
<div id="cardPreview" class="fn__flex-1 fn__none"></div>
<div class="fn__flex-1 b3-dialog__cardempty">${window.siyuan.languages.emptyContent}</div>
<div class="fn__flex-1 card__empty">${window.siyuan.languages.emptyContent}</div>
</div>
</div>`,
width: isMobile() ? "98vw" : "80vw",

6
app/src/history/diff.ts
View file

@ -27,7 +27,7 @@ const genItem = (data: [], data2?: { title: string, fileID: string }[]) => {
let leftEditor: Protyle;
let rightEditor: Protyle;
const renderCompare = (element: HTMLElement) => {
const listElement = hasClosestByClassName(element, "b3-dialog__diff");
const listElement = hasClosestByClassName(element, "history__diff");
if (!listElement) {
return;
}
@ -112,7 +112,7 @@ export const showDiff = (data: { id: string, time: string }[]) => {
const dialog = new Dialog({
title: window.siyuan.languages.compare,
content: `<div class="fn__flex" style="height: 100%">
<div class="b3-dialog__diff">
<div class="history__diff">
<ul class="b3-list b3-list--background">
<li class="b3-list-item">
<span class="b3-list-item__toggle b3-list-item__toggle--hl">
@ -172,7 +172,7 @@ export const showDiff = (data: { id: string, time: string }[]) => {
if (target.classList.contains("b3-list-item--focus")) {
return;
}
dialog.element.querySelector(".b3-dialog__diff .b3-list-item--focus")?.classList.remove("b3-list-item--focus");
dialog.element.querySelector(".history__diff .b3-list-item--focus")?.classList.remove("b3-list-item--focus");
target.classList.add("b3-list-item--focus");
renderCompare(target);
}

2
app/src/protyle/breadcrumb/index.ts
View file

@ -409,7 +409,7 @@ export class Breadcrumb {
}
this.id = id;
const excludeTypes: string[] = [];
if (this.element.parentElement?.parentElement && this.element.parentElement.parentElement.classList.contains("b3-dialog__cardblock")) {
if (this.element.parentElement?.parentElement && this.element.parentElement.parentElement.classList.contains("card__block")) {
// 闪卡面包屑不能显示答案
excludeTypes.push("NodeTextMark-mark");
}

2
app/src/protyle/export/util.ts
View file

@ -38,7 +38,7 @@ export const exportImage = (id: string) => {
</div>
`,
content: `<div class="b3-dialog__content" style="max-height: 70vh;overflow: auto;${isMobile() ? "padding:8px;" : ""};background-color: var(--b3-theme-background)">
<div style="${isMobile() ? "padding: 16px;margin: 16px 0" : "padding: 48px;margin: 8px 0 24px"};border: 1px solid var(--b3-border-color);border-radius: 10px;" class="b3-dialog__exportimg protyle-wysiwyg${window.siyuan.config.editor.displayBookmarkIcon ? " protyle-wysiwyg--attr" : ""}" id="preview"></div>
<div style="${isMobile() ? "padding: 16px;margin: 16px 0" : "padding: 48px;margin: 8px 0 24px"};border: 1px solid var(--b3-border-color);border-radius: 10px;" class="export-img protyle-wysiwyg${window.siyuan.config.editor.displayBookmarkIcon ? " protyle-wysiwyg--attr" : ""}" id="preview"></div>
<div class="ft__smaller ft__on-surface fn__flex"><img style="height: 18px;margin: 0 8px" src="stage/icon.png">${window.siyuan.languages.exportBySiYuan}</div>
<div class="fn__hr--b"></div>
<div class="fn__hr--b"></div>

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

@ -474,12 +474,12 @@ export const globalShortcut = () => {
hideElements(["dialog"]);
switchDialog = new Dialog({
title: window.siyuan.languages.switchTab,
content: `<div class="fn__flex-column b3-dialog--switch">
content: `<div class="fn__flex-column switch-doc">
<div class="fn__hr"><input style="opacity: 0;height: 1px;box-sizing: border-box"></div>
<div class="fn__flex">${dockHtml}
<ul${!isTabWindow ? "" : ' style="border-left:0"'} class="b3-list b3-list--background fn__flex-1">${tabHtml}</ul>
</div>
<div class="dialog__path"></div>
<div class="switch-doc__path"></div>
</div>`,
destroyCallback: () => {
if (range && range.getBoundingClientRect().height !== 0) {
@ -967,12 +967,12 @@ ${unicode2Emoji(item.icon || Constants.SIYUAN_IMAGE_FILE, false, "b3-list-item__
}
const dialog = new Dialog({
title: window.siyuan.languages.recentDocs,
content: `<div class="fn__flex-column b3-dialog--switch">
content: `<div class="fn__flex-column switch-doc">
<div class="fn__hr"><input style="opacity: 0;height: 1px;box-sizing: border-box"></div>
<div class="fn__flex">${dockHtml}
<ul${!isWindow() ? "" : ' style="border-left:0"'} class="b3-list b3-list--background fn__flex-1">${tabHtml}</ul>
</div>
<div class="dialog__path"></div>
<div class="switch-doc__path"></div>
</div>`,
destroyCallback: () => {
if (range && range.getBoundingClientRect().height !== 0) {
@ -984,10 +984,10 @@ ${unicode2Emoji(item.icon || Constants.SIYUAN_IMAGE_FILE, false, "b3-list-item__
fetchPost("/api/filetree/getFullHPathByID", {
id: response.data[0].rootID
}, (response) => {
dialog.element.querySelector(".dialog__path").innerHTML = escapeHtml(response.data);
dialog.element.querySelector(".switch-doc__path").innerHTML = escapeHtml(response.data);
});
} else {
dialog.element.querySelector(".dialog__path").innerHTML = dialog.element.querySelector(".b3-list-item--focus").textContent;
dialog.element.querySelector(".switch-doc__path").innerHTML = dialog.element.querySelector(".b3-list-item--focus").textContent;
}
dialog.element.querySelector("input").focus();
dialog.element.setAttribute("data-key", window.siyuan.config.keymap.general.recentDocs.custom);