Refine image metadata selection styling and action layout
This commit is contained in:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user