0ct0pu5/siyuan
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

🎨 fix https://github.com/siyuan-note/siyuan/issues/4875

Browse source
This commit is contained in:
Vanessa 2022-06-05 11:59:51 +08:00
parent eb78e27d9c
commit f0276da84c
5 changed files with 37 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
app/src/assets/scss/_snackbar.scss
View file

@ -1,25 +1,37 @@
.b3-snackbar {
//transform: translate3d(0, -100px, 0);
//transition: opacity 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms, transform 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms;
margin-bottom: 16px;
position: relative;
&:last-child {
margin-bottom: 0;
&--hide {
transform: translate3d(50vw, 0, 0);
transition: transform 0.52s cubic-bezier(0, 0, 0.2, 1) 0ms;
}
&s {
position: fixed;
right: -2px;
top: 16px;
right: 12px;
top: 22px;
z-index: 502;
max-height: calc(100vh - 32px);
display: flex;
flex-direction: column;
transform: translate3d(50vw, 0, 0);
transition: opacity 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms, transform 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms;
opacity: 0;
&--show {
opacity: 1;
transform: translate3d(0, 0, 0);
}
& > .b3-button {
align-self: flex-end;
margin-right: 18px;
}
& > .fn__flex-1 {
padding: 0 18px;
padding: 0 18px 0 18px;
&::-webkit-scrollbar {
display: none;

2
app/src/assets/template/app/index.tpl
View file

@ -22,7 +22,7 @@
<div id="dockBottom" class="dock"></div>
<div id="commonMenu" class="b3-menu fn__none"></div>
<div id="dragBg" style="z-index:199;pointer-events: none;" class="b3-dialog__scrim fn__none"></div>
<div id="message" class="b3-snackbars fn__none"></div>
<div id="message" class="b3-snackbars"></div>
<script>
setTimeout(() => {
const refreshElement = document.getElementById("loadingRefresh")

2
app/src/assets/template/desktop/index.tpl
View file

@ -20,6 +20,6 @@
<div id="dockBottom" class="dock"></div>
<div id="commonMenu" class="b3-menu fn__none"></div>
<div id="dragBg" style="z-index:199;pointer-events: none;" class="b3-dialog__scrim fn__none"></div>
<div id="message" class="b3-snackbars fn__none"></div>
<div id="message" class="b3-snackbars"></div>
</body>
</html>

2
app/src/assets/template/mobile/index.tpl
View file

@ -50,6 +50,6 @@
</div>
<div id="commonMenu" class="b3-menu fn__none"></div>
<div id="dragBg" style="z-index:199;pointer-events: none;" class="b3-dialog__scrim fn__none"></div>
<div id="message" class="b3-snackbars fn__none"></div>
<div id="message" class="b3-snackbars"></div>
</body>
</html>

23
app/src/dialog/message.ts
View file

@ -3,8 +3,7 @@ import {genUUID} from "../util/genID";
export const initMessage = () => {
const messageElement = document.getElementById("message");
messageElement.innerHTML = `<div class="fn__flex-1"></div>
<div class="fn__hr fn__flex-shrink"></div>
<button class="fn__flex-center b3-button b3-button--outline">
<button class="b3-button b3-button--outline">
<svg><use xlink:href="#iconTrashcan"></use></svg> ${window.siyuan.languages.clearMessage}
</button>`;
messageElement.addEventListener("click", (event) => {
@ -15,7 +14,7 @@ export const initMessage = () => {
event.preventDefault();
break;
} else if (target.isSameNode(messageElement.lastElementChild)) {
target.parentElement.classList.add("fn__none");
target.parentElement.classList.remove("b3-snackbars--show");
target.parentElement.firstElementChild.innerHTML = "";
event.preventDefault();
break;
@ -37,14 +36,17 @@ export const showMessage = (message: string, timeout = 6000, type = "info", mess
}
const messagesElement = document.getElementById("message").firstElementChild;
if (messagesElement.childElementCount === 0) {
messagesElement.parentElement.classList.remove("fn__none");
messagesElement.parentElement.classList.add("b3-snackbars--show");
}
messagesElement.insertAdjacentHTML("afterbegin", messageHTML + "</div>");
if (messagesElement.firstElementChild.nextElementSibling &&
messagesElement.firstElementChild.nextElementSibling.innerHTML === messagesElement.firstElementChild.innerHTML) {
messagesElement.firstElementChild.nextElementSibling.remove();
}
messagesElement.scrollTop = 0;
messagesElement.scrollTo({
top: 0,
behavior: "smooth"
});
return id;
};
@ -52,9 +54,12 @@ export const hideMessage = (id: string) => {
const messagesElement = document.getElementById("message").firstElementChild;
const messageElement = messagesElement.querySelector(`[data-id="${id}"]`);
if (messageElement) {
messageElement.remove();
}
if (messagesElement.childElementCount === 0) {
messagesElement.parentElement.classList.add("fn__none");
messageElement.classList.add("b3-snackbar--hide");
setTimeout(() => {
messageElement.remove();
}, 520);
if (messagesElement.childElementCount < 2) {
messagesElement.parentElement.classList.remove("b3-snackbars--show");
}
}
};