This commit is contained in:
Vanessa 2023-11-29 17:19:09 +08:00
parent 447fc0f881
commit de9a686a7c
5 changed files with 15 additions and 5 deletions

View file

@ -106,6 +106,7 @@
/* 动画效果 */
--b3-transition: all .2s cubic-bezier(0, 0, .2, 1) 0ms;
--b3-width-transition: width .2s cubic-bezier(0, 0, .2, 1) 0ms;
--b3-color-transition: color .2s cubic-bezier(0, 0, .2, 1) 0ms;
/* 下拉菜单 */
--b3-select-background: url("data:image/svg+xml;utf8,<svg fill='rgba(95, 99, 104, .68)' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") no-repeat right 2px center var(--b3-theme-background);

View file

@ -106,6 +106,7 @@
/* 动画效果 */
--b3-transition: all .2s cubic-bezier(0, 0, .2, 1) 0ms;
--b3-width-transition: width .2s cubic-bezier(0, 0, .2, 1) 0ms;
--b3-color-transition: color .2s cubic-bezier(0, 0, .2, 1) 0ms;
/* 下拉菜单 */
--b3-select-background: url("data:image/svg+xml;utf8,<svg fill='rgba(154, 160, 166, .68)' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") no-repeat right 2px center var(--b3-theme-background);

View file

@ -63,12 +63,14 @@
&__gutters {
@extend .protyle-gutters;
position: fixed;
top: 0;
left: -44px;
opacity: 0;
display: flex;
z-index: 2;
&--min .av__gutter {
padding: 4px 0;
}
svg {
height: 25px;

View file

@ -71,7 +71,6 @@
border: 0;
background-color: transparent;
padding: 4px;
transition: var(--b3-transition);
cursor: pointer;
position: relative;
@ -98,7 +97,7 @@
color: var(--b3-theme-on-surface-light);
width: 14px;
float: left;
transition: var(--b3-transition);
transition: var(--b3-color-transition);
}
}

View file

@ -1460,7 +1460,14 @@ export class WYSIWYG {
const rowElement = hasClosestByClassName(event.target, "av__row");
if (rowElement && rowElement.dataset.id) {
const guttersElement = rowElement.querySelector(".av__gutters");
guttersElement.setAttribute("style", `left:${rowElement.parentElement.parentElement.getBoundingClientRect().left - guttersElement.clientWidth}px;top:${rowElement.getBoundingClientRect().top}px`);
guttersElement.classList.remove("av__gutters--min")
let guttersLeft = rowElement.parentElement.parentElement.getBoundingClientRect().left - guttersElement.clientWidth;
const contentLeft = protyle.contentElement.getBoundingClientRect().left
if (guttersLeft < contentLeft) {
guttersLeft = contentLeft;
guttersElement.classList.add("av__gutters--min")
}
guttersElement.setAttribute("style", `left:${guttersLeft}px;top:${rowElement.getBoundingClientRect().top}px`);
}
protyle.gutter.render(protyle, nodeElement, this.element);
}