luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix(editor): list toggle position offset (#10448)

Browse Source 
Before:

![image](https://github.com/user-attachments/assets/fbddc396-1078-4c1e-8e2c-c26c6e4a6d61)

After:

<img width="579" alt="image" src="https://github.com/user-attachments/assets/7b049b53-269b-484e-ba76-fa6f46a2004c" />

This centering approach won't affect heading blocks:

<img width="267" alt="image" src="https://github.com/user-attachments/assets/3f3217e3-7e23-43fc-a7e5-33b6eadccc88" />
This commit is contained in:
doodlewind
2025-02-26 12:09:00 +00:00
parent ce87dcf58e
commit 589622043c
1 changed files with 5 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
blocksuite/affine/components/src/toggle-button/toggle-button.ts
View File

@@ -13,8 +13,11 @@ export class ToggleButton extends WithDisposable(ShadowlessElement) {
.toggle-icon { .toggle-icon {
display: flex; display: flex;
align-items: start; align-items: start;
margin-top: 0.45em; justify-content: start;
position: absolute; position: absolute;
width: 16px;
height: 16px;
top: calc((1em - 16px) / 2 + 5px);
left: 0; left: 0;
transform: translateX(-100%); transform: translateX(-100%);
border-radius: 4px; border-radius: 4px;
@@ -22,6 +25,7 @@ export class ToggleButton extends WithDisposable(ShadowlessElement) {
opacity: 0; opacity: 0;
transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out;
} }
.toggle-icon:hover { .toggle-icon:hover {
background: var(--affine-hover-color); background: var(--affine-hover-color);
} }