Show "Layout save" button on "LED Layout Preview" if keystone correct…

…ion is shown (useful in fullscreen mode)
anteo · Sep 18, 2023 · 7a94871 · 7a94871
1 parent 9c1db21
commit 7a94871
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 5 deletions.
diff --git a/assets/webconfig/content/conf_leds.html b/assets/webconfig/content/conf_leds.html
@@ -414,7 +414,8 @@ <h4 class="panel-title">
               <button type="button" class="btn btn-danger" id="leds_prev_toggle_num"><i class="fa fa-info fa-fw"></i><span data-i18n="main_ledsim_btn_togglelednumber">toggle led numbers</span></button>
               <button type="button" class="btn btn-danger" id="leds_prev_toggle_live_video"><i class="fa fa-fw fa-television"></i><span data-i18n="main_ledsim_btn_togglelivevideo">toggle live video</span></button>
               <button type="button" class="btn btn-danger" id="leds_prev_toggle_keystone_correction_area" style="display:none;"><i class="mdi mdi-vector-square" style="margin-right:5px;"></i><span data-i18n="conf_leds_layout_btn_keystone">toggle keystone correction</span></button>
-              <button type="button" class="btn btn-primary pull-right" id="leds_prev_checklist"><i class="fa fa-info-circle fa-fw"></i><span data-i18n="conf_leds_layout_btn_checklist">show checklist</span></button>
+              <button type="button" class="btn btn-primary" id="leds_prev_checklist"><i class="fa fa-info-circle fa-fw"></i><span data-i18n="conf_leds_layout_btn_checklist">show checklist</span></button>
+              <button type="button" class="btn btn-primary" id="leds_prev_save" style="display:none;"><i class="fa fa-fw fa-save"></i><span data-i18n="conf_leds_layout_button_savelay">Save layout</span></button>
             </div>
           </div>
         </div>

diff --git a/assets/webconfig/css/hyperion.css b/assets/webconfig/css/hyperion.css
@@ -1048,3 +1048,19 @@ input[type="checkbox"] .styled:checked + label::after,
 input[type="radio"] .styled:checked + label::after {
   color: #fff;
 }
+
+#layout_preview .panel-footer, #ledsim_dialog .modal-footer {
+  display: flex;
+  gap: 3px;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+#layout_preview .panel-footer .btn, #ledsim_dialog .modal-footer .btn {
+  margin: 0;
+  flex-grow: 1;
+}
+
+#ledsim_dialog .modal-footer:before, #ledsim_dialog .modal-footer:after {
+  content: none;
+}
diff --git a/assets/webconfig/js/content_leds.js b/assets/webconfig/js/content_leds.js
@@ -802,19 +802,19 @@ $(document).ready(function () {
 
   $('#collapse1').on('shown.bs.collapse', function () {
     configPanel = "classic";
-    $("#leds_prev_toggle_keystone_correction_area").show();
+    $("#leds_prev_toggle_keystone_correction_area,#leds_prev_save").show();
     createClassicLeds();
   });
 
   $('#collapse2').on('shown.bs.collapse', function () {
     configPanel = "matrix";
-    $("#leds_prev_toggle_keystone_correction_area").hide();
+    $("#leds_prev_toggle_keystone_correction_area,#leds_prev_save").hide();
     createMatrixLeds();
   });
 
   $('#collapse5').on('shown.bs.collapse', function () {
     configPanel = "text";
-    $("#leds_prev_toggle_keystone_correction_area").hide();
+    $("#leds_prev_toggle_keystone_correction_area,#leds_prev_save").hide();
     createLedPreview(finalLedArray);
     aceEdt.set(finalLedArray);
   });
@@ -878,7 +878,7 @@ $(document).ready(function () {
   });
 
   // save led layout, the generated textfield configuration always represents the latest layout
-  $("#btn_ma_save, #btn_cl_save, #btn_bl_save, #leds_custom_save").off().on("click", function () {
+  $("#btn_ma_save, #btn_cl_save, #btn_bl_save, #leds_custom_save, #leds_prev_save").off().on("click", function () {
     var hardwareLedCount = conf_editor.getEditor("root.generalOptions.hardwareLedCount").getValue();
     var layoutLedCount = aceEdt.get().length;
 
@@ -1302,6 +1302,7 @@ $(document).ready(function () {
       window.readOnlyMode ? $('#btn_cl_save').prop('disabled', true) : $('#btn_submit').prop('disabled', false);
       window.readOnlyMode ? $('#btn_ma_save').prop('disabled', true) : $('#btn_submit').prop('disabled', false);
       window.readOnlyMode ? $('#leds_custom_save').prop('disabled', true) : $('#btn_submit').prop('disabled', false);
+      window.readOnlyMode ? $('#leds_prev_save').prop('disabled', true) : $('#btn_submit').prop('disabled', false);
     });
 
     conf_editor.watch('root.specificOptions.hostList', () => {