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

fix(editor): toggle switch style (#12436)

Browse Source 
Closes: [BS-2852](https://linear.app/affine-design/issue/BS-2852/ui-bug：-toggle-的组件样式不一样了)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **Style**
  - Updated toggle switch appearance with refined colors and spacing for a more polished look.

- **Bug Fixes**
  - Improved toggle switch functionality in settings menus to ensure correct state display and interaction.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
donteatfriedrice
2025-05-22 06:13:25 +00:00
parent c525ca24fd
commit a3b8aaff61
3 changed files with 11 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
blocksuite/affine/components/src/toggle-switch/index.ts
View File

@@ -1,3 +1,4 @@
import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
import { css, html, LitElement } from 'lit'; import { css, html, LitElement } from 'lit';
import { property } from 'lit/decorators.js'; import { property } from 'lit/decorators.js';
@@ -18,8 +19,7 @@ const styles = css`
text-indent: -9999px; text-indent: -9999px;
width: 38px; width: 38px;
height: 20px; height: 20px;
background: var(--affine-icon-color); background: ${unsafeCSSVarV2('toggle/backgroundOff')};
border: 1px solid var(--affine-black-10);
display: block; display: block;
border-radius: 20px; border-radius: 20px;
position: relative; position: relative;
@@ -28,22 +28,21 @@ const styles = css`
label:after { label:after {
content: ''; content: '';
position: absolute; position: absolute;
top: 1px; top: 2px;
left: 1px; left: 2px;
width: 16px; width: 16px;
height: 16px; height: 16px;
background: var(--affine-white); background: ${unsafeCSSVarV2('toggle/foreground')};
border: 1px solid var(--affine-black-10);
border-radius: 16px; border-radius: 16px;
transition: 0.1s; transition: 0.1s;
} }
label.on { label.on {
background: var(--affine-primary-color); background: ${unsafeCSSVarV2('toggle/background')};
} }
label.on:after { label.on:after {
left: calc(100% - 1px); left: calc(100% - 2px);
transform: translateX(-100%); transform: translateX(-100%);
} }

6
blocksuite/affine/fragments/frame-panel/src/header/frames-setting-menu.ts
View File

@@ -138,7 +138,7 @@ export class FramesSettingMenu extends WithDisposable(LitElement) {
<div class="action-label">Fill Screen</div> <div class="action-label">Fill Screen</div>
<div class="toggle-button"> <div class="toggle-button">
<toggle-switch <toggle-switch
.subscribe=${this.fillScreen} .on=${this.fillScreen}
.onChange=${this._onFillScreenChange} .onChange=${this._onFillScreenChange}
></toggle-switch> ></toggle-switch>
</div> </div>
@@ -153,7 +153,7 @@ export class FramesSettingMenu extends WithDisposable(LitElement) {
<div class="action-label">Dark background</div> <div class="action-label">Dark background</div>
<div class="toggle-button"> <div class="toggle-button">
<toggle-switch <toggle-switch
.subscribe=${this.blackBackground} .on=${this.blackBackground}
.onChange=${this._onBlackBackgroundChange} .onChange=${this._onBlackBackgroundChange}
></toggle-switch> ></toggle-switch>
</div> </div>
@@ -162,7 +162,7 @@ export class FramesSettingMenu extends WithDisposable(LitElement) {
<div class="action-label">Hide toolbar</div> <div class="action-label">Hide toolbar</div>
<div class="toggle-button"> <div class="toggle-button">
<toggle-switch <toggle-switch
.subscribe=${this.hideToolbar} .on=${this.hideToolbar}
.onChange=${this._onHideToolBarChange} .onChange=${this._onHideToolBarChange}
></toggle-switch> ></toggle-switch>
</div> </div>

2
blocksuite/affine/fragments/outline/src/header/outline-setting-menu.ts
View File

@@ -26,7 +26,7 @@ export class OutlineNotePreviewSettingMenu extends SignalWatcher(
<div class=${styles.actionLabel}>Show type icon</div> <div class=${styles.actionLabel}>Show type icon</div>
<div class=${styles.toggleButton}> <div class=${styles.toggleButton}>
<toggle-switch <toggle-switch
.subscribe=${showPreviewIcon} .on=${showPreviewIcon}
.onChange=${() => { .onChange=${() => {
this._context.showIcons$.value = !showPreviewIcon; this._context.showIcons$.value = !showPreviewIcon;
}} }}