Skip to content

Commit

Permalink
added tooltips for all the deploy method manager fields
Browse files Browse the repository at this point in the history
  • Loading branch information
Moritz Wicenec authored and Moritz Wicenec committed May 12, 2022
1 parent 6af803b commit fae0364
Show file tree
Hide file tree
Showing 3 changed files with 54 additions and 24 deletions.
25 changes: 15 additions & 10 deletions daliuge-translator/dlg/dropmake/web/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,11 @@ $(document).ready(function () {
})
});

function openSettingsModal(){
//needed for the dropdown option to open the settings modal, the pure bootstrap method used on the settings gear button proved inconsistent
$('#settingsModal').modal("show")
}

function initiateDeploy(method, selected, name){
if (selected === false){
changeSelectedDeployMethod(name)
Expand Down Expand Up @@ -225,15 +230,15 @@ function fillOutSettings() {
}

var deplpoyMethodRow = '<div class="input-group">'+
'<input type="text" placeholder="Deployment Name" class="form-control deployMethodName" value="'+element.name+'">'+
'<input type="text" placeholder="Destination Url" class="form-control deployMethodUrl" value="'+element.url+'">'+
'<select class="form-control deployMethodMethod" name="Deploy Method">'+
'<div class="settingsInputTooltip tooltip tooltipBottom form-control" data-text="Deploy Option Name, This must be unique"><input type="text" placeholder="Deployment Name" class="deployMethodName" value="'+element.name+'"></div>'+
'<div class="settingsInputTooltip tooltip tooltipBottom form-control" data-text="Deploy Option Destination URL"><input type="text" placeholder="Destination Url" class="deployMethodUrl" value="'+element.url+'"></div>'+
'<div class="settingsInputTooltip tooltip tooltipBottom form-control" data-text="Deploy Method"><select class="deployMethodMethod">'+
directOption+
helmOption+
restOption+
'</select>'+
'</select></div>'+
'<input type="text" class="form-control deployMethodActive" value="'+element.active+'">'+
'<button class="btn btn-secondary btn-sm" type="button" onclick="removeDeployMethod(event)"><i class="material-icons md-24">delete</i></button>'+
'<button class="btn btn-secondary btn-sm tooltip tooltipBottom" data-text="Delete Deploy Option" type="button" onclick="removeDeployMethod(event)"><i class="material-icons md-24">delete</i></button>'+
'</div>'
deployMethodManagerDiv.append(deplpoyMethodRow)
});
Expand All @@ -247,15 +252,15 @@ function addDeployMethod(){
var restOption = '<option value="rest">Rest</option>'

var deplpoyMethodRow = '<div class="input-group">'+
'<input type="text" placeholder="Deployment Name" class="form-control deployMethodName" value="">'+
'<input type="text" placeholder="Destination Url" class="form-control deployMethodUrl" value="">'+
'<select class="form-control deployMethodMethod" name="Deploy Method">'+
'<div class="settingsInputTooltip tooltip tooltipBottom form-control" data-text="Deploy Option Name, This must be unique"><input type="text" placeholder="Deployment Name" class=" deployMethodName" value=""></div>'+
'<div class="settingsInputTooltip tooltip tooltipBottom form-control" data-text="Deploy Option Destination URL"><input type="text" placeholder="Destination Url" class="deployMethodUrl"value=""></div>'+
'<div class="settingsInputTooltip tooltip tooltipBottom form-control" data-text="Deploy Method"><select class="deployMethodMethod" name="Deploy Method">'+
directOption+
helmOption+
restOption+
'</select>'+
'</select></div>'+
'<input type="text" class="form-control deployMethodActive" value="false">'+
'<button class="btn btn-secondary btn-sm" type="button" onclick="removeDeployMethod(event)"><i class="material-icons md-24">delete</i></button>'+
'<button class="btn btn-secondary btn-sm tooltip tooltipBottom" data-text="Delete Deploy Option" type="button" onclick="removeDeployMethod(event)"><i class="material-icons md-24">delete</i></button>'+
'</div>'
deployMethodManagerDiv.append(deplpoyMethodRow)
}
Expand Down
4 changes: 2 additions & 2 deletions daliuge-translator/dlg/dropmake/web/pg_viewer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@
</button>
<div class="dropdown-menu">
<!-- dynamically filled out from custom deploy methods -->
<a href="javascript:void(0)" class="dropdown-item" onclick="" data-text="Settings" data-toggle="modal" data-target="#settingsModal">Add Deployment Options</a>
<a href="javascript:void(0)" class="dropdown-item" onclick="openSettingsModal()" >Add Deployment Options</a>
</div>
</div>
</li>
Expand Down Expand Up @@ -148,7 +148,7 @@ <h5 class="modal-title" id="settingsModalLabel">Settings</h5>
<!-- filled out programmatically from local storage -->
</div>
<span id="settingsModalErrorMessage"></span>
<button class="btn btn-primary" id="addDeployMethodBtn" onclick="addDeployMethod()">Add</button>
<button class="btn btn-primary tooltip tooltipBottom" data-text="Add new deploy option" id="addDeployMethodBtn" onclick="addDeployMethod()">Add</button>
</div>
<div class="modal-footer">
<button onClick="" type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
Expand Down
49 changes: 37 additions & 12 deletions daliuge-translator/dlg/dropmake/web/src/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,13 +77,6 @@
box-shadow: none !important;
}

.tooltip {
position: relative;
display: inline-block;
font-size: 16px;
opacity: 100%;
}

.inactiveLink {
pointer-events: none;
cursor: default;
Expand All @@ -94,7 +87,7 @@
display: inline-block;
font-size: 16px;
opacity: 100%;
z-index: 10000 !important;
z-index: auto;
}

.tooltipRight:before {
Expand All @@ -117,6 +110,7 @@
background:rgba(0,0,0,0.94);
color: #fff;
text-align:center;
z-index: 1000 !important;

visibility:hidden;
transition: 0s visibility;
Expand Down Expand Up @@ -145,6 +139,9 @@

visibility:hidden;
transition: 0s visibility;
width: 20px;
z-index: 100;
height: 20px;
}

.tooltipRight:hover:before, .tooltipRight:hover:after {
Expand Down Expand Up @@ -173,6 +170,7 @@
background:rgba(0,0,0,0.94);
color: #fff;
text-align:center;
z-index: 1000 !important;

visibility:hidden;
transition: 0s visibility;
Expand Down Expand Up @@ -202,6 +200,9 @@

visibility:hidden;
transition: 0s visibility;
width: 20px;
z-index: 100;
height: 20px;
}

.tooltipTop:hover:before, .tooltipTop:hover:after {
Expand Down Expand Up @@ -229,6 +230,7 @@
background:rgba(0,0,0,0.94);
color: #fff;
text-align:center;
z-index: 1000 !important;

visibility:hidden;
transition: 0s visibility;
Expand Down Expand Up @@ -257,6 +259,9 @@

visibility:hidden;
transition: 0s visibility;
width: 20px;
z-index: 100;
height: 20px;
}

.tooltipLeft:hover:before, .tooltipLeft:hover:after {
Expand All @@ -275,7 +280,7 @@

/* move to bottom */
top:100%;
margin-top:15px; /* and add a small top margin */
margin-top:11px; /* and add a small top margin */

/* basic styles */
width:200px;
Expand All @@ -284,6 +289,7 @@
background:rgba(0,0,0,0.94);
color: #fff;
text-align:center;
z-index: 1000 !important;

visibility:hidden;
transition: 0s visibility;
Expand All @@ -300,7 +306,7 @@

/* position tooltip correctly */
top:100%;
margin-top:-4px;
margin-top:-8px;

/* vertically center */
left: 50%;
Expand All @@ -313,6 +319,9 @@

visibility:hidden;
transition: 0s visibility;
width: 20px;
z-index: 100;
height: 20px;
}

.tooltipBottom:hover:before, .tooltipBottom:hover:after {
Expand All @@ -331,7 +340,7 @@

/* move to bottom */
top:100%;
margin-top:15px; /* and add a small top margin */
margin-top:11px; /* and add a small top margin */

/* basic styles */
width:200px;
Expand All @@ -340,6 +349,7 @@
background:rgba(0,0,0,0.94);
color: #fff;
text-align:center;
z-index: 1000 !important;

visibility:hidden;
transition: 0s visibility;
Expand All @@ -356,7 +366,7 @@

/* position tooltip correctly */
top:100%;
margin-top:-4px;
margin-top:-8px;

/* vertically center */
left: 50%;
Expand All @@ -369,6 +379,9 @@

visibility:hidden;
transition: 0s visibility;
width: 20px;
z-index: 100;
height: 20px;
}

.tooltipBottomLeft:hover:before, .tooltipBottomLeft:hover:after {
Expand Down Expand Up @@ -629,6 +642,18 @@
color:white;
}

#settingsModal .settingsInputTooltip{
display: flex;
padding: 0px;
}

#settingsModal .settingsInputTooltip input, #settingsModal .settingsInputTooltip select{
display: block;
width: 100%;
height: 100%;
border: none;
}

#settingsModal .modal-header{
background: rgb(0,64,133);
background: linear-gradient(90deg, rgba(0,64,133,1) 0%, rgba(0,52,107,1) 20%, rgba(0,35,73,1) 100%);
Expand Down

0 comments on commit fae0364

Please sign in to comment.