changing the toggle button depending on the new setting

ICRAR · Dec 19, 2024 · a856adb · a856adb
1 parent a2aad52
commit a856adb
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 8 deletions.
diff --git a/static/tables.css b/static/tables.css
@@ -265,7 +265,7 @@ td:first-child input {
     font-size: 14px;
 }
 
-#showOverwriteSeperately{
+.showBothValues{
     background-color: transparent;
     color: white;
     border: none;
@@ -277,19 +277,27 @@ td:first-child input {
     padding: unset;
 }
 
-#showOverwriteSeperately div{
+.showBothValues div{
     position: relative;
     width: 100%;
     height: 100%;
 }
 
-#showOverwriteSeperately i{
+.showBothValues i{
     position:  absolute;
     top: 50%;
     transform: translateY(-50%);
     left: 0px;
 }
 
+#showBothValuesOn{
+    width: 40px;
+}
+
+#showBothValuesOn i{
+    font-size: 40px;
+}
+
 .eagleTableWrapper i{
     font-size:20px;
 }

diff --git a/templates/node_parameter_table.html b/templates/node_parameter_table.html
@@ -96,11 +96,21 @@ <h5 class="bottomWindowHeader">Fields Table: </h5>
                                     <!-- ko if: ParameterTable.getActiveColumnVisibility().value() -->
                                         <th class="parameter_table_value" data-bind="eagleTooltip:'The value of this parameter'" data-bs-placement="top">
                                             <span>Value</span>
-                                            <button id="showOverwriteSeperately" data-bind="click: Setting.find(Setting.NODE_PARAMS_TABLE_DUAL_VALUE_DISPLAY).toggle">
-                                                <div>
-                                                    <i class="material-icons-outlined">check_box_outline_blank</i>
-                                                </div>
-                                            </button>
+                                            <!-- ko ifnot: Setting.findValue(Setting.NODE_PARAMS_TABLE_DUAL_VALUE_DISPLAY) -->
+                                                <button class="showBothValues" data-bind="click: Setting.find(Setting.NODE_PARAMS_TABLE_DUAL_VALUE_DISPLAY).toggle">
+                                                    <div>
+                                                        <i class="material-icons-outlined">check_box_outline_blank</i>
+                                                    </div>
+                                                </button>
+                                            <!-- /ko -->
+                                            <!-- ko if: Setting.findValue(Setting.NODE_PARAMS_TABLE_DUAL_VALUE_DISPLAY) -->
+                                                <button class="showBothValues" id="showBothValuesOn" data-bind="click: Setting.find(Setting.NODE_PARAMS_TABLE_DUAL_VALUE_DISPLAY).toggle">
+                                                    <div>
+                                                        <i class="icon-overwrite"></i>
+                                                    </div>
+                                                </button>
+                                            <!-- /ko -->
+
                                             <div data-bind="css: {resizer: ParameterTable.setUpColumnResizer('parameter_table_value') === true}"></div>
                                         </th>
                                     <!-- /ko -->