obsidian-plugin/murashit_codex-panel
1
0
Fork 0
mirror of https://github.com/murashit/codex-panel.git synced 2026-07-22 06:57:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Polish chat toolbar alignment

Browse source
This commit is contained in:
murashit 2026-05-23 10:36:05 +09:00
parent ef9218389a
commit f16d5b854d
5 changed files with 23 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/features/chat/ui/composer.ts
View file

@ -108,7 +108,7 @@ export function syncComposerControls(
export function syncComposerHeight(composer: HTMLTextAreaElement | null): void {
syncTextareaHeight(composer, {
minHeightFallback: 52,
minHeightFallback: 56,
maxHeightFallback: composer ? Math.min(208, composer.win.innerHeight * 0.4) : 208,
});
}

3
src/features/chat/ui/toolbar.ts
View file

@ -139,8 +139,7 @@ export function renderToolbar(toolbar: HTMLElement, model: ToolbarViewModel, act
}
function renderHistoryButton(parent: HTMLElement, model: ToolbarViewModel, actions: ToolbarActions): void {
const history = parent.createDiv({ cls: "codex-panel__toolbar-control codex-panel__history-menu" });
const button = createToolbarButton(history, "history", "Chat history");
const button = createToolbarButton(parent, "history", "Chat history");
button.addClass("codex-panel__history-toggle");
if (model.historyOpen) button.addClass("is-active");
button.setAttr("aria-pressed", model.historyOpen ? "true" : "false");

2
src/features/selection-rewrite/popover.ts
View file

@ -326,7 +326,7 @@ export class SelectionRewritePopover {
private syncInstructionHeight(): void {
const instruction = this.elements?.instruction ?? null;
syncTextareaHeight(instruction, {
minHeightFallback: 52,
minHeightFallback: 56,
maxHeightFallback: instruction ? Math.min(180, instruction.win.innerHeight * 0.3) : 180,
});
}

2
src/shared/ui/components.ts
View file

@ -13,7 +13,7 @@ export function createIconButton(parent: HTMLElement, icon: string, label: strin
}
export function createToolbarButton(parent: HTMLElement, icon: string, label: string): HTMLButtonElement {
return createIconButton(parent, icon, label, "nav-action-button codex-panel-ui__toolbar-control codex-panel-ui__icon-button");
return createIconButton(parent, icon, label, "nav-action-button codex-panel-ui__toolbar-control");
}
export function createRememberedDetails(

59
styles.css
View file

@ -1,9 +1,9 @@
.codex-panel,
.codex-panel-settings,
.codex-panel-selection-rewrite {
--codex-panel-top-icon-size: var(--icon-s, 16px);
--codex-panel-icon-button-inline-size: calc(var(--codex-panel-top-icon-size) + var(--size-2-3, 6px) * 2);
--codex-panel-icon-button-block-size: calc(var(--codex-panel-top-icon-size) + var(--size-2-2, 4px) * 2);
--codex-panel-control-icon-size: var(--icon-m, 18px);
--codex-panel-icon-button-inline-size: calc(var(--codex-panel-control-icon-size) + var(--size-2-3, 6px) * 2);
--codex-panel-icon-button-block-size: calc(var(--codex-panel-control-icon-size) + var(--size-2-2, 4px) * 2);
--codex-panel-status-dot-size: var(--size-4-2, 8px);
--codex-panel-meter-bar-height: var(--size-2-2, 4px);
--codex-panel-composer-control-size: var(--codex-panel-icon-button-block-size);
@ -56,8 +56,8 @@
.codex-panel-ui__toolbar-control {
box-sizing: border-box;
--icon-size: var(--codex-panel-top-icon-size);
--icon-stroke: var(--icon-s-stroke-width, 2px);
--icon-size: var(--codex-panel-control-icon-size);
--icon-stroke: var(--icon-m-stroke-width, 1.75px);
min-width: var(--codex-panel-icon-button-inline-size);
width: auto;
height: auto;
@ -68,8 +68,8 @@
.codex-panel-ui__icon-button {
box-sizing: border-box;
--icon-size: var(--codex-panel-top-icon-size);
--icon-stroke: var(--icon-s-stroke-width, 2px);
--icon-size: var(--codex-panel-control-icon-size);
--icon-stroke: var(--icon-m-stroke-width, 1.75px);
min-width: var(--codex-panel-composer-control-size);
width: auto;
height: auto;
@ -118,8 +118,7 @@
}
.codex-panel__toolbar-primary {
display: grid;
grid-template-columns: auto auto minmax(42px, 1fr) auto auto;
display: flex;
gap: var(--codex-panel-toolbar-button-gap);
align-items: center;
min-width: 0;
@ -140,26 +139,16 @@
white-space: nowrap;
}
.codex-panel__toolbar-control,
.codex-panel__runtime-area {
min-width: 0;
}
.codex-panel__history-menu {
grid-column: 1;
}
.codex-panel__toolbar .codex-panel-ui__icon-button {
width: var(--codex-panel-icon-button-inline-size);
}
.codex-panel__auto-review-toggle {
grid-column: 2;
justify-self: start;
flex: 0 0 auto;
}
.codex-panel__runtime-area {
grid-column: 3;
flex: 0 1 auto;
}
.codex-panel__runtime-strip {
@ -390,8 +379,9 @@
}
.codex-panel__status-dot {
grid-column: 4;
cursor: pointer;
flex: 0 0 auto;
margin-left: auto;
position: relative;
}
@ -447,11 +437,11 @@
}
.codex-panel__context-compact {
grid-column: 4;
margin-left: auto;
}
.codex-panel__status-dot {
grid-column: 5;
.codex-panel__context-compact + .codex-panel__status-dot {
margin-left: 0;
}
.codex-panel__meter-compact-bar {
@ -1810,7 +1800,7 @@
@container (max-width: 280px) {
.codex-panel__toolbar-primary {
grid-template-columns: auto auto minmax(0, 1fr) auto;
flex-wrap: wrap;
}
.codex-panel__runtime-strip {
@ -1824,24 +1814,13 @@
}
.codex-panel__runtime-area {
grid-column: 3 / 5;
grid-row: 1;
}
.codex-panel__context-compact {
grid-column: 3;
grid-row: 2;
}
.codex-panel__status-dot {
grid-column: 4;
grid-row: 2;
order: 3;
flex: 1 1 100%;
}
.codex-panel__meter-compact {
justify-self: end;
min-width: 0;
height: var(--codex-panel-top-icon-size);
height: var(--codex-panel-control-icon-size);
padding-left: 0;
}