Merge pull request #812 from ICRAR/eagle-1372

Eagle 1372
ICRAR · Jan 16, 2025 · b15da00 · b15da00
2 parents 6a2f6ac + 3ebbda2
commit b15da00
Show file tree

Hide file tree

Showing 19 changed files with 159 additions and 128 deletions.
diff --git a/e2e/creatingASimpleGraph.spec.ts b/e2e/creatingASimpleGraph.spec.ts
@@ -59,7 +59,7 @@ test('Creating a Simple Graph', async ({ page }) => {
 
   //wait for bootstrap modal then close
   await page.waitForTimeout(500);
-  await page.locator('.parameterTable').getByRole('button', { name: 'Close' }).click();
+  await page.locator('.closeBottomWindowBtn').getByRole('button').click();
 
   await page.close();
 });
diff --git a/e2e/parameterTableAndKeyboardShortcuts.spec.ts b/e2e/parameterTableAndKeyboardShortcuts.spec.ts
@@ -88,7 +88,7 @@ test('Parameter Tables and keyboard Shortcuts', async ({ page }) => {
 
   //close the parameter table modal
   await page.waitForTimeout(800);
-  await page.locator('.parameterTableCloseButton').click();
+  await page.locator('.closeBottomWindowBtn button').click();
 
   //open the key graph parameter table modal
   await page.locator('#openGraphConfigurationTable').click();

diff --git a/src/EagleConfig.ts b/src/EagleConfig.ts
@@ -105,9 +105,12 @@ const colors: { name: string; color: string; }[] = [
     },{
         name: 'graphWarning',
         color: '#ffa500'
+    },{
+
+    //eagle colors
+        name: 'hoverHighlight',
+        color: '#feb609'
     }
-
-
 ]
 
 export class EagleConfig {
@@ -171,5 +174,6 @@ export class EagleConfig {
         $("#logicalGraphParent").get(0).style.setProperty("--matchingEdgeColor", EagleConfig.getColor('edgeAutoComplete'));
         $("#logicalGraphParent").get(0).style.setProperty("--nodeOutputColor", EagleConfig.getColor('nodeOutputPort'));
         $("#logicalGraphParent").get(0).style.setProperty("--nodeInputColor", EagleConfig.getColor('nodeInputPort'));
+        $("html").get(0).style.setProperty("--hoverHighlight", EagleConfig.getColor('hoverHighlight'));
     }
 }
diff --git a/static/assets/img/settings_white_24dp.svg b/static/assets/img/settings_white_24dp.svg
diff --git a/static/base.css b/static/base.css
@@ -1,5 +1,6 @@
 html {
-    height:100%
+    height:100%;
+    --hoverHighlight:red;
 }
 
 body {
@@ -71,6 +72,17 @@ body {
     margin:.3rem 0;
 }
 
+.navbar #settings{
+    width: 40px;
+    position: relative;
+}
+
+.navbar #settings i{
+    position: absolute;
+    font-size: 20px;
+    top: 10px;
+}
+
 #checkGraphWarnings span{
     top: -3px;
 }
@@ -437,12 +449,6 @@ color: #00bb00;}
     box-shadow: none;
 }
 
-#inspector .headerButtons button:hover,.inspectorTitleBtns button:hover, #inspector i.clickable:hover {
-    color: #b4d4ff;
-    background-color: transparent;
-    cursor:pointer;
-}
-
 #inspector .headerButtons button.btn:focus, .inspectorTitleBtns button:focus {
     box-shadow: none;
     background-color:transparent;
@@ -632,14 +638,15 @@ color: #00bb00;}
     height: 48px;
     top: 0px;
     left: -48px;
-    background-color: #002e5f;
+    background-color: #002e5f !important;
     z-index: 2;
     text-align: center;
     line-height: 48px;
     border-bottom-left-radius: 0.5rem;
     border-top-left-radius: 0.5rem;
     cursor: pointer;
     color:white;
+    user-select: none;
 }
 
 .dropDropDownParent{
@@ -1321,13 +1328,13 @@ select.form-control{
 #paletteList palette-component button, #paletteList palette-component span {
     height: 100%;
     width: 100%;
+    color:white;
 }
 
 #paletteList palette-component i {
     margin-left:50%;
     transform: translateX(-50%);
     pointer-events: none;
-    color:white;
     font-size: 24px;
 }
 
@@ -1560,14 +1567,15 @@ select.form-control{
     height: 48px;
     top: 0px;
     right: -48px;
-    background-color: #002e5f;
+    background-color: #002e5f !important;
     color:white;
     z-index: 2;
     text-align: center;
     line-height: 48px;
     border-bottom-right-radius: 0.5rem;
     border-top-right-radius: 0.5rem;
     cursor: pointer;
+    user-select: none;
 }
 
 .leftWindow .leftWindowHandle span i {
@@ -1635,16 +1643,6 @@ select.form-control{
     background: rgb(211, 211, 211);
 }
 
-.navbar-center .navbar-btn:hover{
-    color: #002349 !important;
-    background: white;
-}
-
-.nodeSettingsBtn{
-    text-align: right;
-    color: #0059a5;
-}
-
 #repositoryList ul.repositories {
     list-style-type: none;
     padding: 0px;
@@ -2744,6 +2742,19 @@ palette-component input.form-control.selected {
 
 /* re-usable classes for various things */
 
+.iconHoverEffect, .iconHoverEffect:focus, .iconHoverEffect:active, .iconHoverEffect:hover{
+    background: transparent;
+    border:0px;
+    box-shadow: none !important;
+}
+
+.iconHoverEffect:hover {
+    color: var(--hoverHighlight) !important;
+    cursor: pointer;
+    border-color: var(--hoverHighlight) !important;
+    text-shadow: -1px -1px 0 #4b4b4b, 0 -1px 0 #4b4b4b, 1px -1px 0 #4b4b4b, 1px 0 0 #4b4b4b, 1px 1px 0 #4b4b4b, 0 1px 0 #4b4b4b, -1px 1px 0 #4b4b4b, -1px 0 0 #4b4b4b;
+}
+
 .linearTransition250{
     transition: ease-in-out 250ms !important; /*this requires an important tag to over ride existing transition effects for a few moments */
 }
diff --git a/static/components/palette-component.html b/static/components/palette-component.html
@@ -3,7 +3,7 @@
         <div class="input-group mb-1 rightClick_paletteComponent"  data-bind="attr: {id: 'palette_'  + $parentContext.$parentContext.$index() + '_' + $data.getPaletteComponentId()}, click: $root.paletteComponentClick, eagleTooltip: {content: $data.getHelpHTML(),size: '500px'}, eagleRightClick: {data:$data,type:'rightClick_paletteComponent'}">
             <div class="input-group-prepend">
                 <button class="nodeBtn" type="button" data-bind="click: function(){$root.addNodeToLogicalGraph($data, '', Eagle.AddNodeMode.Default, null)}, clickBubble: false, attr: {id: 'addPaletteNode' + $data.getNoWhiteSpaceName()}">
-                    <span class="input-group-text" data-bind="style: {'background-color': $data.color}">
+                    <span class="input-group-text iconHoverEffect" data-bind="style: {'background-color': $data.color}">
                         <i data-bind="class: $data.getIcon()"></i>
                     </span>
                 </button>

diff --git a/static/components/repository-file.html b/static/components/repository-file.html
@@ -16,10 +16,10 @@
         </div>
         <div class="col col-2 repo-actions">
             <!-- ko if: getIconUrl() === "device_hub" -->
-                <i class="material-icons md-18" data-bs-placement="left" style="cursor:pointer;top:3px;" data-bind="click: $root.insertRemoteFile, eagleTooltip: 'Insert'">add_box</i>
+                <i class="material-icons md-18 iconHoverEffect" data-bs-placement="left" style="cursor:pointer;top:3px;" data-bind="click: $root.insertRemoteFile, eagleTooltip: 'Insert'">add_box</i>
             <!-- /ko -->
             <!-- ko if: type === Eagle.FileType.Daliuge || type === Eagle.FileType.Graph || type === Eagle.FileType.Palette -->
-                <i class="material-icons md-18" data-bs-placement="left" style="cursor:pointer;top:3px;" data-bind="click: $root.deleteRemoteFile, eagleTooltip: 'Delete'">delete</i>
+                <i class="material-icons md-18 iconHoverEffect" data-bs-placement="left" style="cursor:pointer;top:3px;" data-bind="click: $root.deleteRemoteFile, eagleTooltip: 'Delete'">delete</i>
             <!-- /ko -->
         </div>
     </div>

diff --git a/static/components/repository.html b/static/components/repository.html
@@ -6,8 +6,8 @@
             </div>
             <!-- /ko -->
             <!-- ko ifnot: isFetching -->
-            <i class="material-icons md-18 interactive" data-bind="click: refresh,visible: folders().length == 0 && files().length==0 && fetched">cloud_off</i>
-            <i class="material-icons md-18 interactive" data-bs-placement="bottom" data-bind="click: refresh, visible: (folders().length != 0 || files().length != 0)&& fetched, eagleTooltip: 'Refresh'">cloud_done</i>
+            <i class="material-icons md-18 interactive iconHoverEffect" data-bind="click: refresh,visible: folders().length == 0 && files().length==0 && fetched">cloud_off</i>
+            <i class="material-icons md-18 interactive iconHoverEffect" data-bs-placement="bottom" data-bind="click: refresh, visible: (folders().length != 0 || files().length != 0)&& fetched, eagleTooltip: 'Refresh'">cloud_done</i>
 
             <!-- ko ifnot: fetched -->
             <!-- ko if: service === Repository.Service.GitHub -->
@@ -26,7 +26,7 @@
         </div>
         <!-- ko ifnot: isBuiltIn -->
         <div class="col col-1">
-            <i class="material-icons md-18 interactive" data-bind="click: remove, attr: {id: htmlId() + '-eject'}">eject</i>
+            <i class="material-icons md-18 interactive iconHoverEffect" data-bind="click: remove, attr: {id: htmlId() + '-eject'}">eject</i>
         </div>
         <!-- /ko -->
         <!-- ko if: expanded -->

diff --git a/static/tables.css b/static/tables.css
@@ -345,6 +345,18 @@ td:first-child input {
     padding:11px;
 }
 
+.closeBottomWindowBtn {
+    position: absolute;
+    top: 27px;
+    transform:translateY(-50%)
+}
+
+.closeBottomWindowBtn button, .closeBottomWindowBtn button:focus, .closeBottomWindowBtn button:active, .closeBottomWindowBtn button:hover{
+    background: transparent;
+    border:0px;
+    box-shadow: none !important;
+}
+
 .eagleTableDisplay  input, #editFieldModal  .dropdown input{
     border: none;
 }
@@ -452,7 +464,7 @@ td:first-child input {
     overflow-y: auto;
 }
 
-.eagleTableDisplay  .typesInput{
+.eagleTableDisplay .typesInput{
     padding: 0px;
     height: 35px;
     width: 100%;
@@ -462,7 +474,7 @@ td:first-child input {
     border-right: solid 1px #bbbbbb;
 }
 
-.eagleTableDisplay  .input-group{
+.eagleTableDisplay .input-group{
     border:black solid 1px;
     border-radius: 2px;
     flex-wrap: unset;
@@ -471,6 +483,10 @@ td:first-child input {
     padding-left:2px;
 }
 
+.eagleTableDisplay .input-group span{
+    margin: -2px;
+}
+
 .eagleTableDisplay  td button, #editFieldModal .dropdown-menu button{
     border: none;
     background-color: transparent;
@@ -482,11 +498,11 @@ td:first-child input {
     border-radius: 10px;
 }
 
-.eagleTableDisplay  td button:disabled{
+.eagleTableDisplay td button:disabled{
     color: rgb(113 113 113);
 }
 
-.eagleTableDisplay  td button.parameterTableDescriptionBtn, .eagleTableDisplay  td button.parameterTableCommentBtn {
+.eagleTableDisplay td button.parameterTableDescriptionBtn, .eagleTableDisplay td button.parameterTableCommentBtn {
     position: absolute;
     right: 4px;
     top: 4px;
@@ -497,7 +513,7 @@ td:first-child input {
     font-size: 12px;
 }
 
-.eagleTableDisplay  td button.parameterTableDescriptionBtn::before, .eagleTableDisplay  td button.parameterTableCommentBtn::before {
+.eagleTableDisplay td button.parameterTableDescriptionBtn::before, .eagleTableDisplay td button.parameterTableCommentBtn::before {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);

diff --git a/templates/Errors.html b/templates/Errors.html
@@ -5,10 +5,9 @@ <h5 class="bottomWindowHeader">Graph Issues</h5>
     </div>
 
     <div class="header-center">
-        <button id= 'errorModalFixAll' class="btn btn-primary" data-bind="click: Errors.fixAll, eagleTooltip: Errors.getNumFixableIssues() + ' fix(es) available'">Fix All
+        <button id= 'errorModalFixAll' class="btn btn-primary iconHoverEffect" data-bind="click: Errors.fixAll, eagleTooltip: Errors.getNumFixableIssues() + ' fix(es) available'">Fix All
             <span data-bind="text: KeyboardShortcut.idToText('fix_all', true)"></span>
         </button>
-        <button type="button" class="btn btn-primary" data-bind="click:  function(){SideWindow.toggleShown('bottom')}, clickBubble:false"><span>Close</span></button>
     </div> 
     <div class="issuesBody">
         <div class='accordion' id='issuesDisplayAccordion'>