画布底部工具栏不再横向滚动,工具放不下就换行
- packages/image-canvas-react:共享工具栏去掉 overflow-x/scrollbar-width 的「滚动容器」语义与滚动条隐藏,改为 flex-wrap 换行,尾部工具不再被裁掉 - src/index.css:画布底部工具栏宽度上限 34rem 提到 42rem,13 个工具在桌面宽度下回到一行,窄屏按共享能力换行并居中 - apps/ai-game-creator-shell:资源画布底部工具栏删掉与共享默认重复的 overflow/flex-wrap 覆盖,只保留限宽
This commit is contained in:
@@ -1269,10 +1269,9 @@
|
||||
/* 共享 chrome 的 `.genarrative-image-canvas__toolbar` 是横向滚动条(`overflow-x:auto`),
|
||||
会把它自己弹出的二级菜单(`bottom:100%+6px`)裁掉。这里改成换行、不裁切:
|
||||
「生成规范」的二级菜单必须可见,窄屏用换行兜底而不是横向滚动。 */
|
||||
/* 换行与不裁剪已由共享工具栏保证(`@genarrative/image-canvas-react`),这里只限宽。 */
|
||||
.game-resource-bottom-toolbar-strip {
|
||||
max-width: 100%;
|
||||
overflow: visible;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.game-resource-bottom-toolbar-action {
|
||||
|
||||
@@ -80,7 +80,11 @@ export type CanvasToolbarProps = Omit<
|
||||
surface?: 'plain' | 'floating';
|
||||
};
|
||||
|
||||
/** 画布宿主共享的横向工具栏容器。 */
|
||||
/**
|
||||
* 画布宿主共享的工具栏容器。
|
||||
*
|
||||
* 放不下时换行,不做横向滚动:工具栏是导航,任何被滚出视野的工具都等于不存在。
|
||||
*/
|
||||
export const CanvasToolbar = forwardRef<HTMLDivElement, CanvasToolbarProps>(
|
||||
function CanvasToolbar(
|
||||
{ label, children, surface = 'plain', className, ...toolbarProps },
|
||||
|
||||
@@ -152,16 +152,18 @@
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* 工具栏是「工具导航」不是内容区:放不下时必须换行让所有工具继续可见。
|
||||
* 曾经的 `overflow-x: auto` + `scrollbar-width: thin` 会把尾部工具裁掉且几乎看不出
|
||||
* 可滚动,用户看到的是「工具少了一个」而不是「这里能滚」。
|
||||
*/
|
||||
.genarrative-image-canvas__toolbar {
|
||||
display: inline-flex;
|
||||
min-width: 0;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
box-sizing: border-box;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
overscroll-behavior-x: contain;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.genarrative-image-canvas__toolbar--floating {
|
||||
|
||||
+7
-1
@@ -6695,12 +6695,18 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
);
|
||||
}
|
||||
|
||||
/*
|
||||
* 画布底部工具栏:13 个工具 + 3 个分隔符在 34rem 上限下会溢出,溢出后的横向滚动
|
||||
* 会把尾部工具整段裁掉(滚动条按设计不可见)。这里给足一行放得下的宽度,并在窄屏
|
||||
* 交给共享工具栏的换行能力,取「换行」不取「滚动」。
|
||||
*/
|
||||
.image-canvas-editor__bottom-toolbar {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0.85rem;
|
||||
z-index: 18;
|
||||
max-width: min(calc(100% - 6.6rem), 34rem);
|
||||
max-width: min(calc(100% - 6.6rem), 42rem);
|
||||
justify-content: center;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user