Refine image metadata selection styling and action layout

This commit is contained in:
Dariusz L
2026-10-05 18:17:34 +02:00
parent b0b466cfc0
commit 6895aa83a3
2 changed files with 48 additions and 5 deletions
+42
View File
@@ -4871,6 +4871,10 @@ button.mr-info-link:disabled {
gap: var(--mr-spacing-8);
}
#model-resolver-modal .mr-image-inspector-actions .mr-image-inspector-clear {
margin-left: auto;
}
.mr-image-inspector-textarea {
width: 100%;
min-height: 76px;
@@ -5023,6 +5027,14 @@ button.mr-info-link:disabled {
content: "";
}
.mr-image-prompt-row.is-negative.is-selected {
background: linear-gradient(90deg, rgba(240, 180, 100, 0.12), rgba(240, 180, 100, 0.035) 55%, transparent);
}
.mr-image-prompt-row.is-negative.is-selected::before {
background: rgb(240, 180, 100);
}
.mr-image-prompt-row-header {
display: flex;
align-items: center;
@@ -5052,6 +5064,14 @@ button.mr-info-link:disabled {
outline-offset: 2px;
}
.mr-image-prompt-row.is-negative .mr-image-prompt-role-option input {
accent-color: rgb(240, 180, 100);
}
.mr-image-prompt-row.is-negative .mr-image-prompt-role-option input:focus-visible {
outline-color: rgb(240, 180, 100);
}
.mr-image-prompt-role-option input:disabled {
cursor: not-allowed;
opacity: 0.55;
@@ -5234,6 +5254,7 @@ button.mr-info-link:disabled {
}
.mr-image-transfer-mode-option {
align-items: center;
padding: var(--mr-spacing-10);
border: 1px solid var(--mr-border);
border-radius: var(--mr-radius-lg);
@@ -5281,6 +5302,22 @@ button.mr-info-link:disabled {
font-weight: 650;
}
.mr-image-transfer-selection-tools {
display: flex;
align-items: center;
gap: var(--mr-spacing-8);
margin-left: auto;
}
#model-resolver-modal .mr-image-transfer-activity .mr-image-transfer-clear-selection {
margin: 0;
padding: 2px 8px;
height: 24px;
min-height: 24px;
font-size: var(--mr-font-xs);
line-height: 1;
}
.mr-image-transfer-activity-option {
display: inline-flex;
align-items: center;
@@ -5356,6 +5393,11 @@ button.mr-info-link:disabled {
accent-color: var(--mr-accent);
}
.mr-image-transfer-mode-option input {
margin-top: 0;
margin-bottom: 0;
}
.mr-image-transfer-node-list {
padding: 0;
max-height: 520px;
@@ -206,9 +206,6 @@ export const imageMetadataMethods = {
<div class="mr-loaded-title-block">
<h3 class="mr-loaded-models-title">Image Metadata ${this.getMetadataTooltipBadge('Paste JSON or drop a supported file anywhere in this panel.', 'Image metadata help')}</h3>
</div>
<div class="mr-image-inspector-header-actions">
<button type="button" class="mr-btn mr-btn-secondary mr-btn-sm" data-image-inspector-action="clear">Clear</button>
</div>
</div>
<div class="mr-image-inspector-tools">
<input type="file" accept="image/png,image/jpeg,image/webp,application/json,.json" hidden data-image-inspector-input="file">
@@ -217,6 +214,7 @@ export const imageMetadataMethods = {
<div class="mr-image-inspector-actions">
<button type="button" class="mr-btn mr-btn-secondary mr-btn-sm" data-image-inspector-action="analyze-paste" disabled>Analyze JSON</button>
<button type="button" class="mr-btn mr-btn-primary mr-btn-sm" data-image-inspector-action="choose-file">Load file</button>
<button type="button" class="mr-btn mr-btn-secondary mr-btn-sm mr-image-inspector-clear" data-image-inspector-action="clear" data-tooltip="Clear imported metadata and refresh model information for the current workflow. Pasted JSON and the current workflow remain unchanged.">Clear</button>
</div>
</div>
</div>
@@ -1899,11 +1897,10 @@ export const imageMetadataMethods = {
<section class="mr-image-transfer">
<div class="mr-image-transfer-header">
<div>
<h3 class="mr-loaded-models-title">Transfer models to current workflow <span class="mr-loaded-total">${selectedTargetCount}/${allTargetNodeKeys.size}</span>${this.getMetadataTooltipBadge(transferHelpText, 'Model transfer help')}</h3>
<h3 class="mr-loaded-models-title">Transfer models to current workflow ${this.getMetadataTooltipBadge(transferHelpText, 'Model transfer help')}</h3>
</div>
<div class="mr-image-inspector-header-actions">
${undoButton}
<button type="button" class="mr-btn mr-btn-secondary mr-btn-sm" data-image-inspector-action="clear-transfer-targets">Clear selection</button>
</div>
</div>
<div class="mr-image-transfer-mode" role="group" aria-label="Transfer mode">
@@ -1928,6 +1925,10 @@ export const imageMetadataMethods = {
<span>${label}</span>
</label>
`).join('')}
<div class="mr-image-transfer-selection-tools">
<span class="mr-loaded-total">${selectedTargetCount}/${allTargetNodeKeys.size}</span>
<button type="button" class="mr-btn mr-btn-secondary mr-btn-sm mr-image-transfer-clear-selection" data-image-inspector-action="clear-transfer-targets">Clear selection</button>
</div>
</div>
<div class="mr-image-transfer-category-list">${targetRows}</div>
<div class="mr-image-transfer-actions">