alphard/ComfyUI-Lora-Manager
1
0
Fork 0
mirror of https://github.com/willmiao/ComfyUI-Lora-Manager.git synced 2026-03-21 21:22:11 -03:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): improve clear button UX in autocomplete text widget

Browse Source 
Move clear button from top-right to bottom-right to avoid

obscuring text content. Add hover visibility for cleaner UI.

Reserve bottom padding in textarea for button placement.
This commit is contained in:
Will Miao
2026-03-07 21:09:59 +08:00
parent 3756f88368
commit 343dd91e4b
3 changed files with 39 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
vue-widgets/src/components/AutocompleteTextWidget.vue
View File

@@ -191,7 +191,7 @@ onUnmounted(() => {
color: var(--input-text, #ddd);
overflow: hidden;
overflow-y: auto;
padding: 2px;
padding: 2px 2px 24px 2px; /* Reserve bottom space for clear button */
resize: none;
border: none;
border-radius: 0;
@@ -204,7 +204,7 @@ onUnmounted(() => {
.text-input.vue-dom-mode {
background-color: var(--color-charcoal-400, #313235);
color: #fff;
padding: 8px 12px;
padding: 8px 12px 30px 12px; /* Reserve bottom space for clear button */
margin: 0 0 4px;
border-radius: 8px;
font-size: 12px;
@@ -218,8 +218,8 @@ onUnmounted(() => {
/* Clear button styles */
.clear-button {
position: absolute;
right: 4px;
top: 4px;
right: 6px;
bottom: 6px; /* Changed from top to bottom */
width: 18px;
height: 18px;
padding: 0;
@@ -232,11 +232,18 @@ onUnmounted(() => {
display: flex;
align-items: center;
justify-content: center;
opacity: 0.7;
opacity: 0; /* Hidden by default */
pointer-events: none; /* Not clickable when hidden */
transition: opacity 0.2s ease, background-color 0.2s ease;
z-index: 10;
}
/* Show clear button when hovering over input wrapper */
.input-wrapper:hover .clear-button {
opacity: 0.7;
pointer-events: auto;
}
.clear-button:hover {
opacity: 1;
background: rgba(255, 100, 100, 0.8);
@@ -250,7 +257,7 @@ onUnmounted(() => {
/* Vue DOM mode adjustments for clear button */
.text-input.vue-dom-mode ~ .clear-button {
right: 8px;
top: 8px;
bottom: 10px; /* Changed from top to bottom, adjusted for Vue DOM padding */
width: 20px;
height: 20px;
background: rgba(107, 114, 128, 0.6);