Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-15 05:37:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(editor): responsive edgeless toolbar pen menu (#11150)

Browse Source 
close BS-2855
This commit is contained in:
CatsJuice
2025-03-27 08:53:27 +00:00
parent 2c4278058b
commit e855197acf
2 changed files with 38 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/common/slide-menu.ts
View File

@@ -29,21 +29,26 @@ export class EdgelessSlideMenu extends WithDisposable(LitElement) {
align-items: center; align-items: center;
width: fit-content; width: fit-content;
max-width: 100%; max-width: 100%;
overflow-x: auto;
overscroll-behavior: none;
scrollbar-width: none;
position: relative; position: relative;
height: calc(var(--menu-height) + 1px); height: calc(var(--menu-height) + 1px);
box-sizing: border-box; box-sizing: border-box;
padding: 0 10px; padding-left: 10px;
scroll-snap-type: x mandatory; scroll-snap-type: x mandatory;
} }
.menu-container-scrollable {
overflow-x: auto;
overscroll-behavior: none;
scrollbar-width: none;
height: 100%;
padding-right: 10px;
}
.slide-menu-content { .slide-menu-content {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%; height: 100%;
transition: left 0.5s ease-in-out; transition: left 0.5s ease-in-out;
width: fit-content;
} }
.next-slide-button, .next-slide-button,
.previous-slide-button { .previous-slide-button {
@@ -109,7 +114,7 @@ export class EdgelessSlideMenu extends WithDisposable(LitElement) {
const menuWidth = this._menuContainer.clientWidth; const menuWidth = this._menuContainer.clientWidth;
const leftMin = 0; const leftMin = 0;
const leftMax = this._slideMenuContent.clientWidth - menuWidth + 2; // border is 2 const leftMax = this._slideMenuContent.clientWidth - menuWidth;
this.showPrevious = scrollLeft > leftMin; this.showPrevious = scrollLeft > leftMin;
this.showNext = scrollLeft < leftMax; this.showNext = scrollLeft < leftMax;
} }
@@ -140,8 +145,11 @@ export class EdgelessSlideMenu extends WithDisposable(LitElement) {
class="menu-container" class="menu-container"
style=${styleMap({ '--menu-height': this.height })} style=${styleMap({ '--menu-height': this.height })}
> >
<div class="slide-menu-content" @wheel=${this._handleWheel}> <slot name="prefix"></slot>
<slot></slot> <div class="menu-container-scrollable">
<div class="slide-menu-content" @wheel=${this._handleWheel}>
<slot></slot>
</div>
</div> </div>
</div> </div>
<div <div
@@ -155,7 +163,7 @@ export class EdgelessSlideMenu extends WithDisposable(LitElement) {
`; `;
} }
@query('.menu-container') @query('.menu-container-scrollable')
private accessor _menuContainer!: HTMLDivElement; private accessor _menuContainer!: HTMLDivElement;
@query('.slide-menu-content') @query('.slide-menu-content')

42
blocksuite/affine/gfx/brush/src/toolbar/components/pen/pen-menu.ts
View File

@@ -25,11 +25,13 @@ export class EdgelessPenMenu extends EdgelessToolbarToolMixin(
} }
.pens { .pens {
position: fixed;
display: flex; display: flex;
padding: 0 4px;
align-items: center;
.pen-wrapper { .pen-wrapper {
display: flex; display: flex;
min-width: 38px;
height: 64px; height: 64px;
align-items: flex-end; align-items: flex-end;
justify-content: center; justify-content: center;
@@ -55,7 +57,7 @@ export class EdgelessPenMenu extends EdgelessToolbarToolMixin(
menu-divider { menu-divider {
height: 24px; height: 24px;
margin: 0 9px 0 70px; margin: 0 9px;
} }
`; `;
@@ -93,26 +95,26 @@ export class EdgelessPenMenu extends EdgelessToolbarToolMixin(
return html` return html`
<edgeless-slide-menu> <edgeless-slide-menu>
<div class="menu-content"> <div class="pens" slot="prefix">
<div class="pens"> <div
<div class="pen-wrapper edgeless-brush-button"
class="pen-wrapper edgeless-brush-button" ?data-active="${pen === 'brush'}"
?data-active="${pen === 'brush'}" style=${styleMap({ color: brushColor })}
style=${styleMap({ color: brushColor })} @click=${() => this._onPickPen('brush')}
@click=${() => this._onPickPen('brush')} >
> ${brushIcon}
${brushIcon} </div>
</div> <div
<div class="pen-wrapper edgeless-highlighter-button"
class="pen-wrapper edgeless-highlighter-button" ?data-active="${pen === 'highlighter'}"
?data-active="${pen === 'highlighter'}" style=${styleMap({ color: highlighterColor })}
style=${styleMap({ color: highlighterColor })} @click=${() => this._onPickPen('highlighter')}
@click=${() => this._onPickPen('highlighter')} >
> ${highlighterIcon}
${highlighterIcon}
</div>
</div> </div>
<menu-divider .vertical=${true}></menu-divider> <menu-divider .vertical=${true}></menu-divider>
</div>
<div class="menu-content">
<edgeless-color-panel <edgeless-color-panel
class="one-way" class="one-way"
@select=${this._onPickColor} @select=${this._onPickColor}