feat(ui): redesign image generator floating composer and settings panel
Compact the floating composer with an auto-resizing prompt editor and a scrollable settings popover, add a titled settings panel, and show the resolved image size in the settings summary. Add the imageCountLabel string for the count section. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,36 +1,47 @@
|
||||
.image-generator-floating-composer {
|
||||
position: absolute;
|
||||
z-index: 36;
|
||||
min-height: 188px;
|
||||
border: 1px solid #cbd2dc;
|
||||
border-radius: 28px;
|
||||
min-height: 150px;
|
||||
overflow: hidden;
|
||||
border: 0.5px solid #d7d9de;
|
||||
border-radius: 24px;
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
box-shadow: 0 18px 45px rgba(17, 24, 39, 0.14);
|
||||
box-shadow: 0 18px 45px rgba(17, 24, 39, 0.13);
|
||||
backdrop-filter: blur(18px);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.image-generator-reference-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
min-height: 72px;
|
||||
margin: 14px 16px 0;
|
||||
padding: 6px;
|
||||
gap: 8px;
|
||||
min-height: 68px;
|
||||
margin: 8px 8px 0;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.image-generator-reference-row::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.image-generator-reference-tile,
|
||||
.image-generator-reference-preview {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 20px;
|
||||
width: 56px;
|
||||
height: 68px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.image-generator-reference-tile {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
gap: 6px;
|
||||
color: #a6abb5;
|
||||
gap: 5px;
|
||||
flex: 0 0 auto;
|
||||
color: rgba(20, 20, 20, 0.46);
|
||||
background: #f4f4f4;
|
||||
font-size: 12px;
|
||||
font-size: 11px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.image-generator-reference-tile span {
|
||||
@@ -48,7 +59,7 @@
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 20px;
|
||||
border-radius: 16px;
|
||||
object-fit: cover;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
@@ -77,23 +88,26 @@
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
min-height: 92px;
|
||||
margin: 10px 0 0;
|
||||
padding: 0 32px;
|
||||
height: auto;
|
||||
min-height: 44px;
|
||||
max-height: 176px;
|
||||
margin: 2px 0 0;
|
||||
padding: 1px 16px 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
resize: none;
|
||||
color: #1f2937;
|
||||
overflow-y: hidden;
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
background: transparent;
|
||||
caret-color: #111827;
|
||||
font-family: inherit;
|
||||
font-size: 18px;
|
||||
font-weight: 520;
|
||||
line-height: 26px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.image-generator-prompt-editor::placeholder {
|
||||
color: #a6acb6;
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@@ -111,8 +125,8 @@
|
||||
.image-generator-composer-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
padding: 8px 14px 13px 28px;
|
||||
gap: 4px;
|
||||
padding: 4px 8px 8px;
|
||||
}
|
||||
|
||||
.image-generator-settings-chip,
|
||||
@@ -121,17 +135,21 @@
|
||||
height: 36px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 6px;
|
||||
flex: 0 0 auto;
|
||||
border-radius: 999px;
|
||||
color: #222831;
|
||||
background: #fff;
|
||||
font-size: 15px;
|
||||
font-weight: 560;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.image-generator-settings-chip {
|
||||
padding: 0 8px;
|
||||
height: 32px;
|
||||
max-width: 220px;
|
||||
padding: 0 8px 0 10px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.image-generator-settings-chip:hover,
|
||||
@@ -150,11 +168,13 @@
|
||||
|
||||
.image-generator-composer-spacer {
|
||||
flex: 1;
|
||||
min-width: 6px;
|
||||
}
|
||||
|
||||
.image-generator-model-button {
|
||||
max-width: 162px;
|
||||
padding: 0 10px;
|
||||
height: 32px;
|
||||
max-width: 140px;
|
||||
padding: 0 6px 0 8px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -166,9 +186,10 @@
|
||||
}
|
||||
|
||||
.image-generator-send-button {
|
||||
min-width: 58px;
|
||||
height: 32px;
|
||||
min-width: 56px;
|
||||
justify-content: center;
|
||||
padding: 0 18px;
|
||||
padding: 0 12px;
|
||||
color: #fff;
|
||||
background: #222;
|
||||
font-weight: 760;
|
||||
@@ -179,3 +200,144 @@
|
||||
background: #efefef;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.composer-settings-popover.image-generator-settings-popover-panel {
|
||||
width: min(312px, calc(100vw - 24px));
|
||||
max-height: min(480px, calc(100vh - 40px));
|
||||
overflow: auto;
|
||||
padding: 0;
|
||||
border: 0.5px solid #d9dce2;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 14px 36px rgba(17, 24, 39, 0.14);
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(16, 24, 40, 0.28) transparent;
|
||||
}
|
||||
|
||||
.image-generator-settings-popover-panel::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.image-generator-settings-popover-panel::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.image-generator-settings-popover-panel::-webkit-scrollbar-thumb {
|
||||
min-height: 42px;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 999px;
|
||||
background: rgba(16, 24, 40, 0.28);
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
.image-generator-settings-popover-panel::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(16, 24, 40, 0.38);
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
.image-generator-settings-popover-panel .composer-settings-panel {
|
||||
gap: 16px;
|
||||
padding: 14px 16px 16px;
|
||||
}
|
||||
|
||||
.image-generator-settings-popover-panel .composer-settings-panel h3 {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.image-generator-settings-popover-panel .composer-settings-panel section {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.image-generator-settings-popover-panel .composer-settings-panel h4 {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.image-generator-settings-popover-panel .composer-quality-control {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
overflow: visible;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.image-generator-settings-popover-panel .composer-quality-control button,
|
||||
.image-generator-settings-popover-panel .composer-count-grid button {
|
||||
height: 32px;
|
||||
border: 1px solid #d8dbe1;
|
||||
border-radius: 999px;
|
||||
background: #fff;
|
||||
color: #262b34;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.image-generator-settings-popover-panel .composer-quality-control button.selected {
|
||||
border-color: #2d3036;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.image-generator-settings-popover-panel .composer-dimensions {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.image-generator-settings-popover-panel .composer-dimensions label {
|
||||
height: 32px;
|
||||
gap: 6px;
|
||||
padding: 0 8px;
|
||||
border-radius: 8px;
|
||||
background: #f3f3f3;
|
||||
}
|
||||
|
||||
.image-generator-settings-popover-panel .composer-dimensions input {
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.image-generator-settings-popover-panel .composer-dimensions i {
|
||||
width: 32px;
|
||||
color: #7c828c;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.image-generator-settings-popover-panel .composer-ratio-grid,
|
||||
.image-generator-settings-popover-panel .composer-count-grid {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.image-generator-settings-popover-panel .composer-ratio-grid button {
|
||||
aspect-ratio: auto;
|
||||
height: 72px;
|
||||
gap: 6px;
|
||||
padding: 8px;
|
||||
border-radius: 12px;
|
||||
color: #262b34;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.image-generator-settings-popover-panel .composer-ratio-grid button.selected,
|
||||
.image-generator-settings-popover-panel .composer-count-grid button.selected {
|
||||
border-color: #d3d6dd;
|
||||
background: #eeeeee;
|
||||
}
|
||||
|
||||
.image-generator-settings-popover-panel .ratio-glyph {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-width: 2px;
|
||||
border-color: #525862;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.image-generator-settings-popover-panel .ratio-glyph.wide {
|
||||
width: 24px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.image-generator-settings-popover-panel .ratio-glyph.portrait {
|
||||
width: 16px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user