Skip to content

Commit f6da5e8

Browse files
cb-spidercb-spider
authored
Merge pull request #1636 from cloud-barista/feature/admin-overlay-close-buttons
[Admin Web] Improve and unify the overlay UI/UX
2 parents 4586244 + 637e26d commit f6da5e8

File tree

13 files changed

+717
-345
lines changed

13 files changed

+717
-345
lines changed

‎api-runtime/rest-runtime/admin-web/html/cluster.html‎

Lines changed: 89 additions & 70 deletions
Large diffs are not rendered by default.

‎api-runtime/rest-runtime/admin-web/html/connection.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,19 @@
6969
position: relative;
7070
z-index: 2001;
7171
}
72+
.overlay-close-btn {
73+
background-color: #f0f0f0;
74+
color: #d9534f;
75+
border: 1px solid #ccc;
76+
border-radius: 4px;
77+
cursor: pointer;
78+
position: absolute;
79+
top: 10px;
80+
right: 10px;
81+
}
82+
.overlay-close-btn:hover {
83+
background-color: #e0e0e0;
84+
}
7285
.fixed-header {
7386
position: fixed;
7487
top: 0;
@@ -947,6 +960,7 @@ <h2>{{$provider}}</h2>
947960

948961
<div id="overlay" class="overlay">
949962
<div class="overlay-content" style="max-width: 90%; max-height: 80vh; overflow-y: auto;">
963+
<button type="button" class="overlay-close-btn" onclick="hideOverlay()">X</button>
950964
<h2>[<span id="overlayProviderName"></span>] Add Connection Info</h2>
951965
<div style="margin-bottom: 15px; text-align: right;">
952966
<button class="first-button" type="button" onclick="selectFirstPerRegion()">1st</button>
@@ -963,6 +977,7 @@ <h2>[<span id="overlayProviderName"></span>] Add Connection Info</h2>
963977
<!-- Driver Selection Overlay -->
964978
<div id="driverOverlay" class="overlay">
965979
<div class="overlay-content">
980+
<button type="button" class="overlay-close-btn" onclick="hideDriverOverlay()">X</button>
966981
<h2>Select Driver</h2>
967982
<ul id="driverList">
968983
<!-- Driver list items will be appended here -->
@@ -974,6 +989,7 @@ <h2>Select Driver</h2>
974989
<!-- Credential Selection Overlay -->
975990
<div id="credentialOverlay" class="overlay">
976991
<div class="overlay-content">
992+
<button type="button" class="overlay-close-btn" onclick="hideCredentialOverlay()">X</button>
977993
<h2>Select Credential</h2>
978994
<ul id="credentialList">
979995
<!-- Credential list items will be appended here -->
@@ -985,6 +1001,7 @@ <h2>Select Credential</h2>
9851001
<!-- Region Selection Overlay -->
9861002
<div id="regionOverlay" class="overlay">
9871003
<div class="overlay-content">
1004+
<button type="button" class="overlay-close-btn" onclick="hideRegionOverlay()">X</button>
9881005
<h2>Select Region</h2>
9891006
<ul id="regionList">
9901007
<!-- Region list items will be appended here -->

‎api-runtime/rest-runtime/admin-web/html/credential.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,20 @@
7171
padding: 20px;
7272
border-radius: 5px;
7373
text-align: left;
74+
position: relative;
75+
}
76+
.overlay-close-btn {
77+
background-color: #f0f0f0;
78+
color: #d9534f;
79+
border: 1px solid #ccc;
80+
border-radius: 4px;
81+
cursor: pointer;
82+
position: absolute;
83+
top: 10px;
84+
right: 10px;
85+
}
86+
.overlay-close-btn:hover {
87+
background-color: #e0e0e0;
7488
}
7589
.fixed-header {
7690
position: fixed;
@@ -664,6 +678,7 @@ <h2>{{$provider}}</h2>
664678

665679
<div id="overlay" class="overlay">
666680
<div class="overlay-content">
681+
<button type="button" class="overlay-close-btn" onclick="hideOverlay()">X</button>
667682
<h2>[<span id="overlayProviderName"></span>] Add Credential Info</h2>
668683
<div class="drop-zone">Drag & Drop a credential file here (or manually enter the details below)</div>
669684
<form id="addCredentialForm" onsubmit="event.preventDefault(); postCredential();">

‎api-runtime/rest-runtime/admin-web/html/disk.html‎

Lines changed: 31 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,7 @@
183183
text-align: left;
184184
font-family: Arial, sans-serif;
185185
font-size: 12px;
186+
position: relative;
186187
}
187188
.tag-container {
188189
display: inline-block;
@@ -230,6 +231,10 @@
230231
margin-bottom: 10px;
231232
}
232233

234+
.add-tag-overlay-content .tag-overlay-input-group:first-of-type {
235+
margin-top: 30px;
236+
}
237+
233238
.add-tag-overlay-content .tag-overlay-input-group label {
234239
flex: 1;
235240
text-align: right;
@@ -306,14 +311,18 @@
306311
position: relative;
307312
}
308313

309-
.tag-overlay-content .close-btn {
314+
.overlay-close-btn {
315+
background-color: #f0f0f0;
316+
color: #d9534f;
317+
border: 1px solid #ccc;
318+
border-radius: 4px;
319+
cursor: pointer;
310320
position: absolute;
311-
top: 5px;
321+
top: 10px;
312322
right: 10px;
313-
background: none;
314-
border: none;
315-
font-size: 16px;
316-
cursor: pointer;
323+
}
324+
.overlay-close-btn:hover {
325+
background-color: #e0e0e0;
317326
}
318327

319328
.tag-overlay-content .button-group {
@@ -385,15 +394,7 @@
385394
word-wrap: break-word;
386395
}
387396

388-
.system-id-overlay .close-btn {
389-
position: absolute;
390-
top: -15px;
391-
right: -5px;
392-
background: none;
393-
border: none;
394-
font-size: 16px;
395-
cursor: pointer;
396-
}
397+
397398

398399
.copy-btn {
399400
background: none;
@@ -604,6 +605,7 @@ <h1>Disk Management</h1>
604605

605606
<div id="overlay" class="overlay">
606607
<div class="overlay-content">
608+
<button type="button" class="overlay-close-btn" onclick="hideOverlay()">X</button>
607609
<h2>Add New Disk</h2>
608610
<form id="addDiskForm" onsubmit="event.preventDefault(); postDisk();">
609611
<input type="hidden" id="connConfig" value="{{.ConnectionConfig}}">
@@ -652,7 +654,7 @@ <h2>Add New Disk</h2>
652654

653655
<div id="system-id-overlay" class="system-id-overlay">
654656
<div class="system-id-overlay-content">
655-
<button class="close-btn" onclick="closeSystemIdOverlay()">x</button>
657+
<button class="overlay-close-btn" onclick="closeSystemIdOverlay()">X</button>
656658
<h2>System ID (Managed by CSP)</h2>
657659
<p id="fullSystemId"></p>
658660
<button class="copy-btn" onclick="copySystemId()">📋</button>
@@ -981,7 +983,7 @@ <h2>System ID (Managed by CSP)</h2>
981983
});
982984

983985
document.getElementById('overlay').style.display = 'flex';
984-
document.addEventListener('keydown', handleEsc);
986+
document.addEventListener('keydown', handleOverlayEsc);
985987
clearFormFields();
986988
}
987989

@@ -1073,11 +1075,11 @@ <h2>System ID (Managed by CSP)</h2>
10731075

10741076
function hideOverlay() {
10751077
document.getElementById('overlay').style.display = 'none';
1076-
document.removeEventListener('keydown', handleEsc);
1078+
document.removeEventListener('keydown', handleOverlayEsc);
10771079
clearFormFields();
10781080
}
10791081

1080-
function handleEsc(event) {
1082+
function handleOverlayEsc(event) {
10811083
if (event.key === "Escape") {
10821084
hideOverlay();
10831085
}
@@ -1105,7 +1107,7 @@ <h2>System ID (Managed by CSP)</h2>
11051107
const tagOverlayContent = document.querySelector('.tag-overlay-content');
11061108

11071109
tagOverlayContent.innerHTML = `
1108-
<button class="close-btn" onclick="closeTagOverlay()">x</button>
1110+
<button class="overlay-close-btn" onclick="closeTagOverlay()">X</button>
11091111
<p>${tag}</p>
11101112
<div class="button-group">
11111113
<button onclick="deleteTag('${tag}', '${resourceType}', '${resourceName}')">Delete</button>
@@ -1115,21 +1117,22 @@ <h2>System ID (Managed by CSP)</h2>
11151117

11161118
tagOverlay.style.display = 'flex';
11171119

1118-
document.addEventListener('keydown', handleEscTagOverlay);
1120+
document.addEventListener('keydown', handleTagOverlayEsc);
11191121
document.addEventListener('click', handleClickOutsideOverlay);
11201122
}
11211123

11221124
function closeTagOverlay() {
11231125
const tagOverlay = document.getElementById('tag-overlay');
11241126
tagOverlay.style.display = 'none';
1125-
document.removeEventListener('keydown', handleEscTagOverlay);
1127+
document.removeEventListener('keydown', handleTagOverlayEsc);
11261128
document.removeEventListener('click', handleClickOutsideOverlay);
11271129
}
11281130

11291131
function showAddTagOverlay(diskName) {
11301132
const addTagOverlay = document.getElementById('add-tag-overlay');
11311133
const addTagOverlayContent = document.querySelector('.add-tag-overlay-content');
11321134
addTagOverlayContent.innerHTML = `
1135+
<button type="button" class="overlay-close-btn" onclick="closeAddTagOverlay()">X</button>
11331136
<div class="tag-overlay-input-group">
11341137
<label for="tagOverlayTagKey">Tag Key:</label>
11351138
<input type="text" id="tagOverlayTagKey" name="tagKey" required>
@@ -1144,16 +1147,16 @@ <h2>System ID (Managed by CSP)</h2>
11441147
</div>
11451148
`;
11461149
addTagOverlay.style.display = 'flex';
1147-
document.addEventListener('keydown', handleEscAddTagOverlay);
1150+
document.addEventListener('keydown', handleAddTagOverlayEsc);
11481151
}
11491152

11501153
function closeAddTagOverlay() {
11511154
const addTagOverlay = document.getElementById('add-tag-overlay');
11521155
addTagOverlay.style.display = 'none';
1153-
document.removeEventListener('keydown', handleEscAddTagOverlay);
1156+
document.removeEventListener('keydown', handleAddTagOverlayEsc);
11541157
}
11551158

1156-
function handleEscAddTagOverlay(event) {
1159+
function handleAddTagOverlayEsc(event) {
11571160
if (event.key === "Escape") {
11581161
closeAddTagOverlay();
11591162
}
@@ -1387,16 +1390,16 @@ <h2>System ID (Managed by CSP)</h2>
13871390
fullSystemIdElement.textContent = systemId;
13881391

13891392
overlay.style.display = 'block';
1390-
document.addEventListener('keydown', handleEscSystemIdOverlay);
1393+
document.addEventListener('keydown', handleSystemIdOverlayEsc);
13911394
}
13921395

13931396
function closeSystemIdOverlay() {
13941397
const overlay = document.getElementById('system-id-overlay');
13951398
overlay.style.display = 'none';
1396-
document.removeEventListener('keydown', handleEscSystemIdOverlay);
1399+
document.removeEventListener('keydown', handleSystemIdOverlayEsc);
13971400
}
13981401

1399-
function handleEscSystemIdOverlay(event) {
1402+
function handleSystemIdOverlayEsc(event) {
14001403
if (event.key === "Escape") {
14011404
closeSystemIdOverlay();
14021405
}

‎api-runtime/rest-runtime/admin-web/html/driver.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,20 @@
7171
padding: 20px;
7272
border-radius: 5px;
7373
text-align: left;
74+
position: relative;
75+
}
76+
.overlay-close-btn {
77+
background-color: #f0f0f0;
78+
color: #d9534f;
79+
border: 1px solid #ccc;
80+
border-radius: 4px;
81+
cursor: pointer;
82+
position: absolute;
83+
top: 10px;
84+
right: 10px;
85+
}
86+
.overlay-close-btn:hover {
87+
background-color: #e0e0e0;
7488
}
7589
.fixed-header {
7690
position: fixed;
@@ -514,6 +528,7 @@ <h2>{{$provider}}</h2>
514528

515529
<div id="overlay" class="overlay">
516530
<div class="overlay-content">
531+
<button type="button" class="overlay-close-btn" onclick="hideOverlay()">X</button>
517532
<h2>[<span id="overlayProviderName"></span>] Add Driver Info</h2>
518533
<form id="addDriverForm" onsubmit="event.preventDefault(); postDriver();">
519534
<div class="form-group">

0 commit comments

Comments
 (0)