Skip to content

Commit 61b8b1b

Browse files
devvaannshdevvaannsh
committed
refactor: improve image gallery UI
1 parent 495dfe1 commit 61b8b1b

File tree

1 file changed

+63
-49
lines changed

1 file changed

+63
-49
lines changed

‎src/LiveDevelopment/BrowserScripts/RemoteFunctions.js‎

Lines changed: 63 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1343,7 +1343,7 @@ function RemoteFunctions(config = {}) {
13431343
`,
13441344

13451345
selectImageFromComputer: `
1346-
<svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
1346+
<svg viewBox="0 0 24 24" fill="currentColor" width="19" height="19">
13471347
<path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/>
13481348
</svg>
13491349
`,
@@ -1355,13 +1355,13 @@ function RemoteFunctions(config = {}) {
13551355
`,
13561356

13571357
folderSettings: `
1358-
<svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16">
1358+
<svg viewBox="0 0 24 24" fill="currentColor" width="17" height="17">
13591359
<path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/>
13601360
</svg>
13611361
`,
13621362

13631363
close: `
1364-
<svg viewBox="0 0 24 24" fill="currentColor" width="15" height="15">
1364+
<svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16">
13651365
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" stroke="currentColor" stroke-width="1" stroke-linecap="round"/>
13661366
</svg>
13671367
`,
@@ -1370,6 +1370,12 @@ function RemoteFunctions(config = {}) {
13701370
<svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
13711371
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
13721372
</svg>
1373+
`,
1374+
1375+
search: `
1376+
<svg viewBox="0 0 20 16" fill="currentColor" width="17" height="17">
1377+
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
1378+
</svg>
13731379
`
13741380
};
13751381

@@ -2261,7 +2267,7 @@ function RemoteFunctions(config = {}) {
22612267
22622268
.phoenix-ribbon-container {
22632269
width: 100% !important;
2264-
height: 156px !important;
2270+
height: 164px !important;
22652271
border: 1px solid rgba(255, 255, 255, 0.2) !important;
22662272
position: relative !important;
22672273
}
@@ -2272,19 +2278,19 @@ function RemoteFunctions(config = {}) {
22722278
overflow: hidden !important;
22732279
scroll-behavior: smooth !important;
22742280
padding: 6px !important;
2275-
top: 30px !important;
2281+
top: 36px !important;
22762282
}
22772283
22782284
.phoenix-ribbon-row {
22792285
display: flex !important;
2280-
gap: 2px !important;
2286+
gap: 4px !important;
22812287
}
22822288
22832289
.phoenix-ribbon-thumb {
22842290
flex: 0 0 auto !important;
22852291
width: 112px !important;
22862292
height: 112px !important;
2287-
border-radius: 14px !important;
2293+
border-radius: 4px !important;
22882294
overflow: hidden !important;
22892295
position: relative !important;
22902296
cursor: pointer !important;
@@ -2395,70 +2401,68 @@ function RemoteFunctions(config = {}) {
23952401
}
23962402
23972403
.phoenix-ribbon-search {
2398-
display: flex !important;
2399-
align-items: stretch !important;
2400-
border-radius: 6px !important;
24012404
margin-left: 8px !important;
2402-
border: 1px solid rgba(255,255,255,0.14) !important;
2403-
}
2404-
2405-
.phoenix-ribbon-search:hover {
2406-
border: 1px solid rgba(0, 0, 0, 0.24) !important;
2407-
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
2408-
}
2409-
2410-
.phoenix-ribbon-search:focus-within {
2411-
border: 1px solid rgba(0, 0, 0, 0.24) !important;
2412-
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
2405+
flex: 1 !important;
2406+
max-width: 200px !important;
2407+
position: relative !important;
24132408
}
24142409
24152410
.phoenix-ribbon-search input {
2416-
background: transparent !important;
2417-
border: none !important;
2411+
width: 100% !important;
2412+
height: 27px !important;
2413+
padding: 5px 32px 5px 5px !important;
2414+
box-sizing: border-box !important;
2415+
background: #555555 !important;
2416+
border: 1px solid #202020 !important;
2417+
border-radius: 3px !important;
2418+
color: #fff !important;
2419+
font-size: 13px !important;
24182420
outline: none !important;
2419-
color: #c5c5c5 !important;
2420-
width: 150px !important;
2421-
padding: 4px 8px !important;
2422-
border-radius: 4px 0 0 4px !important;
2423-
transition: background 0.2s ease !important;
2424-
}
2425-
2426-
.phoenix-ribbon-search input:focus {
2427-
background: rgba(255, 255, 255, 0.03) !important;
24282421
}
24292422
24302423
.phoenix-ribbon-search input::placeholder {
2431-
color: #a0a0a0 !important;
2432-
opacity: 0.7 !important;
2424+
color: #b4b4b4 !important;
24332425
}
24342426
24352427
.phoenix-ribbon-search input::-webkit-input-placeholder {
2436-
color: #a0a0a0 !important;
2437-
opacity: 0.7 !important;
2428+
color: #b4b4b4 !important;
24382429
}
24392430
24402431
.phoenix-ribbon-search input::-moz-placeholder {
2441-
color: #a0a0a0 !important;
2442-
opacity: 0.7 !important;
2432+
color: #b4b4b4 !important;
2433+
}
2434+
2435+
.phoenix-ribbon-search input:focus {
2436+
border: 1px solid #2893ef !important;
2437+
box-shadow: 0 0 0 1px #94ceff !important;
24432438
}
24442439
24452440
.phoenix-ribbon-search-btn {
2441+
position: absolute !important;
2442+
right: 2px !important;
2443+
top: 50% !important;
2444+
transform: translateY(-50%) !important;
24462445
background: transparent !important;
24472446
border: 1px solid transparent !important;
2448-
border-left: 1px solid gray !important;
24492447
color: #a0a0a0 !important;
2448+
border-radius: 2px !important;
24502449
cursor: pointer !important;
2451-
padding: 2px 6px !important;
2452-
border-radius: 0 4px 4px 0 !important;
2453-
font-size: 12px !important;
2454-
font-weight: 500 !important;
2450+
padding: 4px !important;
2451+
display: flex !important;
2452+
align-items: center !important;
2453+
justify-content: center !important;
24552454
transition: all 0.2s ease !important;
2456-
margin-left: 0 !important;
2455+
height: 25px !important;
2456+
width: 25px !important;
24572457
}
24582458
2459-
.phoenix-ribbon-search-btn:hover {
2460-
border: 1px solid rgba(0, 0, 0, 0.24) !important;
2461-
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
2459+
.phoenix-ribbon-search-btn:hover:not(:disabled) {
2460+
background: rgba(255, 255, 255, 0.1) !important;
2461+
}
2462+
2463+
.phoenix-ribbon-search-btn:disabled {
2464+
opacity: 0.3 !important;
2465+
cursor: not-allowed !important;
24622466
}
24632467
24642468
.phoenix-ribbon-select {
@@ -2645,7 +2649,9 @@ function RemoteFunctions(config = {}) {
26452649
<div class="phoenix-ribbon-header-left">
26462650
<div class="phoenix-ribbon-search">
26472651
<input type="text" placeholder="${config.strings.imageGallerySearchPlaceholder}" />
2648-
<button class="phoenix-ribbon-search-btn">${config.strings.imageGallerySearchButton}</button>
2652+
<button class="phoenix-ribbon-search-btn" disabled>
2653+
${ICONS.search}
2654+
</button>
26492655
</div>
26502656
<div class="phoenix-ribbon-select">
26512657
<button class="phoenix-select-image-btn" title="${config.strings.imageGallerySelectFromComputer}">
@@ -2943,7 +2949,13 @@ function RemoteFunctions(config = {}) {
29432949
}
29442950
};
29452951

2946-
searchButton.addEventListener('click', performSearch);
2952+
// disable/enable search button as per input container text
2953+
const updateSearchButtonState = () => {
2954+
searchButton.disabled = searchInput.value.trim().length === 0;
2955+
};
2956+
2957+
searchInput.addEventListener('input', updateSearchButtonState);
2958+
29472959
searchInput.addEventListener('keydown', (e) => {
29482960
if (e.key === 'Enter') {
29492961
performSearch(e);
@@ -2953,6 +2965,8 @@ function RemoteFunctions(config = {}) {
29532965
searchInput.addEventListener('click', (e) => {
29542966
e.stopPropagation();
29552967
});
2968+
2969+
searchButton.addEventListener('click', performSearch);
29562970
}
29572971

29582972
if (selectImageBtn && fileInput) {

0 commit comments

Comments
 (0)