fix(simulator ui): fixed broken ui after bootstrap5 upgrade (CircuitV…

…erse#5183) * fix(simulator ui): fixed broken ui after bootstrap5 upgrade
Neerajpathak07 · Dec 3, 2024 · 60e0ebd · 60e0ebd
1 parent 2bf5f9c
commit 60e0ebd
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 116 deletions.
diff --git a/app/assets/stylesheets/footer.scss b/app/assets/stylesheets/footer.scss
@@ -28,10 +28,15 @@
 
 .footer-social-icon {
   width: 28px;
+
+  @media (max-width: 576px) {
+    width: 24px; // Adjust the size for small screens
+  }
 }
 
+
 .footer-social-icons-row {
-  column-gap: 5px;
+  column-gap: 2px;
   margin: inherit;
 }
 
@@ -124,4 +129,4 @@
 .bounce-out-on-hover::after {
   content: '';
   width: 10px;
-}
+}
diff --git a/app/component/footer_component.html.erb b/app/component/footer_component.html.erb
@@ -10,9 +10,11 @@
           </a>
         </div>
         <div class="row">
-          <p class="mt-3  footer-social-icon-text"><%= t("layout.footer.social_icon_text") %></p>
-        </div>
-        <%= render(SocialLinksComponent.new) %>
+  <div class="col-12 text-start">
+    <p class="mt-3 footer-social-icon-text"><%= t("layout.footer.social_icon_text") %></p>
+    <%= render(SocialLinksComponent.new) %>
+  </div>
+</div>
       </div>
       <%= render(FooterLinksComponent.new(@current_user)) %>
       <div class="col-12 col-sm-12 col-md-5 col-lg-5 footer-column">

diff --git a/app/component/social_links_component.html.erb b/app/component/social_links_component.html.erb
@@ -1,6 +1,6 @@
 <div class="d-flex flex-row footer-social-icons-row">
   <% social_links.each do |link| %>
-    <%= link_to link[:url], class: "bounce-out-on-hover me-3", target: "_blank", data: { tooltip: link[:name] }, aria: { label: link[:name] } do %>
+    <%= link_to link[:url], class: "bounce-out-on-hover me-1", target: "_blank", data: { tooltip: link[:name] }, aria: { label: link[:name] } do %>
       <%= image_tag(link[:logo], class: "footer-social-icon", alt: "#{link[:name].capitalize} Logo") %>
     <% end %>
   <% end %>

diff --git a/app/views/simulator/edit.html.erb b/app/views/simulator/edit.html.erb
@@ -152,11 +152,10 @@
    <!--   <div>
         <button type="button" class="quick-btn-redo logixButton" title="Redo" onclick="">
         </button> -->
-        <div class="zoom-slider">
-          <button class="zoom-slider-decrement" id="decrement">-</button>
-          <input type="range" class="form-range" min="0" max="45" step="1" id="customRange1">
-          <span id='slider_value'></span>
-          <button class="zoom-slider-increment" id="increment">+</button>
+        <div class="zoom-slider d-flex align-items-center">
+          <button class="zoom-slider-decrement btn btn-outline-secondary" id="decrement" aria-label="Zoom Out">-</button>
+          <input type="range" class="form-range mx-2" min="0" max="45" step="1" id="customRange1" aria-label="Zoom Level">
+          <button class="zoom-slider-increment btn btn-outline-secondary" id="increment" aria-label="Zoom In">+</button>
         </div>
       </div>
   </div>
@@ -286,7 +285,6 @@
       <button class='custom-btn--primary touch-panel-button' title="Zoom Out"><span class="fas fa-search-minus timing-diagram-zoom-out"></button>
       <button class='custom-btn--primary touch-panel-button' title="Resume Timing Diagram"><span class="fas fa-play timing-diagram-resume"></button>
       <button class='custom-btn--primary touch-panel-button' title="Pause Timing Diagram"><span class="fas fa-pause timing-diagram-pause"></button>
-
        </div>
        <div id="touch-cycle-unit">
        1 cycle =
@@ -299,7 +297,6 @@
     </div>
 </div>
 </div>
-
 <!-- Quick Menu Panel  -->
 <div id="quickmenu-Popover">
   <div id="quickMenu">
@@ -316,23 +313,20 @@
     </div>
   </div>
 </div>
-
 <!-- Live Menu button  -->
 <div id='liveMenu'>
   <ul><i class="fas fa-compress-arrows-alt liveMenuIcon"></i></ul>
   <ul><i class="fas fa-trash-alt liveMenuIcon"></i></ul>
   <ul><i class="fas fa-undo liveMenuIcon"></i></ul>
   <ul><i class="fas fa-redo liveMenuIcon"></i></ul>
 </div>
-
 <!-- /.Potriad Mode Lock -->
 <div id="potraidLockBg">
 </div>
 <div id="lockPortaidMode">
 <span class="portaidIcon"> </span>
 <span id="portaidModeText">Please switch to the landscape mode and refresh to access the simulator</span>
 </div>
-
 <div class="noSelect defaultCursor layoutElementPanel draggable-panel draggable-panel-css ">
   <div class="panel-header">Layout Elements
   <span class="fas fa-minus-square minimize"></span>
@@ -440,7 +434,6 @@
   <span class="fas fa-minus-square minimize"></span>
   <span class="fas fa-external-link-square-alt maximize"></span>
   </div>
-
   <div class="panel-body">
     <div class="layout-body">
       <button class="largeButton btn logixButton btn-xs custom-btn--tertiary" id="resetVerilogCode">Reset Code</button>
@@ -450,7 +443,6 @@
       </div>
     </div>
   </div>
-
   <div class="panel-header text-center">Apply Themes</div>
   <div class="panel-body">
     <div class="layout-body">
@@ -478,7 +470,6 @@
     </div>
   </div>
 </div>
-
 <div class="moduleProperty noSelect effect1 properties-panel draggable-panel draggable-panel-css  guide_2" id="moduleProperty">
   <div id="moduleProperty-title" class="noSelect panel-header">Properties
   <span class="fas fa-minus-square minimize"></span>
@@ -487,123 +478,89 @@
   <div class='panel-body'> <div id="moduleProperty-inner"></div></div>
 </div>
 <div id="customShortcutDialog" title="Keybinding Preference"></div>
-<div id="layoutDialog" class="draggable-panel draggable-panel-css ">
-  <div class="panel-header">Layout
-      <span class="fas fa-minus-square minimize"></span>
-      <span class="fas fa-external-link-square-alt maximize"></span>
+<div id="layoutDialog" class="draggable-panel draggable-panel-css">
+  <div class="panel-header d-flex justify-content-between align-items-center">
+      Layout
+      <span class="fas fa-minus-square minimize" aria-label="Minimize dialog"></span>
+      <span class="fas fa-external-link-square-alt maximize" aria-label="Maximize dialog"></span>
   </div>
   <div class="layout-body panel-body" id="layout-body">
-    <div class="">
-      <button
-        class="zoomButton btn-lg"
-        id="decreaseLayoutWidth"
-        title="Decrease Width">
+    <div class="d-flex align-items-center justify-content-between mb-2">
+      <button class="zoomButton btn btn-lg" id="decreaseLayoutWidth" title="Decrease Width" aria-label="Decrease Width">
         <span class="fa fa-minus" aria-hidden="true"></span>
       </button>
       <span>Width</span>
-      <button
-        class="zoomButton btn-lg"
-        id="increaseLayoutWidth"
-        title="Increase Width">
+      <button class="zoomButton btn btn-lg" id="increaseLayoutWidth" title="Increase Width" aria-label="Increase Width">
         <span class="fa fa-plus" aria-hidden="true"></span>
       </button>
     </div>
-    <div class="">
-      <button
-        class="zoomButton btn-lg"
-        id="decreaseLayoutHeight"
-        title="Decrease Height">
+    <div class="d-flex align-items-center justify-content-between mb-2">
+      <button class="zoomButton btn btn-lg" id="decreaseLayoutHeight" title="Decrease Height" aria-label="Decrease Height">
         <span class="fa fa-minus" aria-hidden="true"></span>
       </button>
       <span>Height</span>
-      <button
-        class="zoomButton btn-lg"
-        id="increaseLayoutHeight"
-        title="Increase Height">
+      <button class="zoomButton btn btn-lg" id="increaseLayoutHeight" title="Increase Height" aria-label="Increase Height">
         <span class="fa fa-plus" aria-hidden="true"></span>
       </button>
     </div>
-    <div class="">
+    <div class="d-flex align-items-center justify-content-center mb-2">
       <span>Reset all nodes:</span>
-      <button
-        class="zoomButton btn-lg"
-        id="layoutResetNodes">
+      <button class="zoomButton btn btn-lg" aria-label="Reset all nodes" id="layoutResetNodes">
         <span class="fa fa-sync" aria-hidden="true" title="Reset"></span>
       </button>
     </div>
-    <div class="layout-title">
+    <div class="layout-title mb-2">
       <span>Title</span>
-      <div class="layout--btn-group">
-        <button
-          class="zoomButton-up btn-lg no-select"
-          id="layoutTitleUp">
-        <svg id="Group_304" data-name="Group 304" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
-          <g id="Rectangle_1072" data-name="Rectangle 1072" fill="none" stroke="#f1f9ff" stroke-width="2">
-            <rect width="30" height="30" rx="10" stroke="none" />
-            <rect x="1" y="1" width="28" height="28" rx="9" fill="none" />
-          </g>
-          <path id="Path_36" data-name="Path 36" d="M4.7,6.1,0,1.4,1.4,0,4.7,3.3,8,0,9.4,1.4Z" transform="translate(19.4 17.755) rotate(180)" fill="#fff" />
-        </svg>
-
-      </button>
-        <button
-          class="zoomButton-down btn-lg no-select"
-          id="layoutTitleDown">
-        <svg id="Group_305" data-name="Group 305" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
-          <g id="Rectangle_1072" data-name="Rectangle 1072" fill="none" stroke="#f1f9ff" stroke-width="2">
-            <rect width="30" height="30" rx="10" stroke="none" />
-            <rect x="1" y="1" width="28" height="28" rx="9" fill="none" />
-          </g>
-          <path id="Path_36" data-name="Path 36" d="M4.7,6.1,0,1.4,1.4,0,4.7,3.3,8,0,9.4,1.4Z" transform="translate(10 11.655)" fill="#fff" />
-        </svg>
-
-      </button>
-        <button
-          class="zoomButton-left btn-lg no-select"
-          id="layoutTitleLeft">
-        <svg id="Group_306" data-name="Group 306" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
-          <g id="Rectangle_1072" data-name="Rectangle 1072" fill="none" stroke="#f1f9ff" stroke-width="2">
-            <rect width="30" height="30" rx="10" stroke="none" />
-            <rect x="1" y="1" width="28" height="28" rx="9" fill="none" />
-          </g>
-          <path id="Path_36" data-name="Path 36" d="M4.7,6.1,0,1.4,1.4,0,4.7,3.3,8,0,9.4,1.4Z" transform="translate(18.1 9.655) rotate(90)" fill="#fff" />
-        </svg>
+      <div class="layout--btn-group d-flex gap-2">
+        <!-- Title Control Buttons with SVGs and aria-labels -->
+        <button class="zoomButton-up btn btn-lg no-select" id="layoutTitleUp" aria-label="Move title up">
+          <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
+            <g fill="none" stroke="#f1f9ff" stroke-width="2">
+              <rect width="30" height="30" rx="10" stroke="none" />
+              <rect x="1" y="1" width="28" height="28" rx="9" fill="none" />
+            </g>
+            <path d="M4.7,6.1,0,1.4,1.4,0,4.7,3.3,8,0,9.4,1.4Z" transform="translate(19.4 17.755) rotate(180)" fill="#fff" />
+          </svg>
         </button>
-        <button
-          class="zoomButton-right btn-lg no-select"
-          id="layoutTitleRight">
-        <svg id="Group_307" data-name="Group 307" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
-          <g id="Rectangle_1072" data-name="Rectangle 1072" fill="none" stroke="#f1f9ff" stroke-width="2">
-            <rect width="30" height="30" rx="10" stroke="none" />
-            <rect x="1" y="1" width="28" height="28" rx="9" fill="none" />
-          </g>
-          <path id="Path_36" data-name="Path 36" d="M4.7,6.1,0,1.4,1.4,0,4.7,3.3,8,0,9.4,1.4Z" transform="translate(12 19.055) rotate(-90)" fill="#fff" />
-        </svg>
-      </button>
-    </div>
+        <button class="zoomButton-down btn btn-lg no-select" id="layoutTitleDown" aria-label="Move title down">
+          <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
+            <g fill="none" stroke="#f1f9ff" stroke-width="2">
+              <rect width="30" height="30" rx="10" stroke="none" />
+              <rect x="1" y="1" width="28" height="28" rx="9" fill="none" />
+            </g>
+            <path d="M4.7,6.1,0,1.4,1.4,0,4.7,3.3,8,0,9.4,1.4Z" transform="translate(10 11.655)" fill="#fff" />
+          </svg>
+        </button>
+        <button class="zoomButton-left btn btn-lg no-select" id="layoutTitleLeft" aria-label="Move title left">
+          <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
+            <g fill="none" stroke="#f1f9ff" stroke-width="2">
+              <rect width="30" height="30" rx="10" stroke="none" />
+              <rect x="1" y="1" width="28" height="28" rx="9" fill="none" />
+            </g>
+            <path d="M4.7,6.1,0,1.4,1.4,0,4.7,3.3,8,0,9.4,1.4Z" transform="translate(18.1 9.655) rotate(90)" fill="#fff" />
+          </svg>
+        </button>
+        <button class="zoomButton-right btn btn-lg no-select" id="layoutTitleRight" aria-label="Move title right">
+          <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
+            <g fill="none" stroke="#f1f9ff" stroke-width="2">
+              <rect width="30" height="30" rx="10" stroke="none" />
+              <rect x="1" y="1" width="28" height="28" rx="9" fill="none" />
+            </g>
+            <path d="M4.7,6.1,0,1.4,1.4,0,4.7,3.3,8,0,9.4,1.4Z" transform="translate(12 19.055) rotate(-90)" fill="#fff" />
+          </svg>
+        </button>
+      </div>
     </div>
-    <div class="layout-title--enable">
+    <div class="layout-title--enable d-flex align-items-center justify-content-between mb-2">
       <span>Title Enabled:</span>
       <label class="switch">
-        <input
-          type="checkbox"
-          checked
-          id="toggleLayoutTitle">
+        <input type="checkbox" checked id="toggleLayoutTitle" aria-label="Toggle title visibility">
         <span class="slider"></span>
       </label>
     </div>
-    <div class="">
-      <button
-        class="Layout-btn custom-btn--primary"
-        id="saveLayout">
-        Save
-      </button>
-
-      <button
-        class="Layout-btn custom-btn--tertiary"
-        id="cancelLayout">
-        Cancel
-      </button>
+    <div class="d-flex justify-content-between mt-3">
+      <button class="Layout-btn custom-btn--primary btn btn-success" id="saveLayout" aria-label="Save layout settings">Save</button>
+      <button class="Layout-btn custom-btn--tertiary btn btn-danger" id="cancelLayout" aria-label="Cancel layout changes">Cancel</button>
     </div>
   </div>
 </div>
@@ -654,7 +611,6 @@
     <label class="option custom-radio inline"><input type="radio" name="resolution" value="4">4x<span></span></label>
   </div>
 </div>
-
 <div id="colorThemesDialog" class='customScroll colorThemesDialog' tabindex="0" style="display: none;" title="Select Theme"></div>
 <div id="CustomColorThemesDialog" class='customScroll' tabindex="0" style="display: none;" title="Custom Theme"></div>
 <input type='file' id="importThemeFile" name='themeFile' style="display:none" multiple>
@@ -725,7 +681,6 @@
     </div>
   </div>
 </div>
-
 <div
   id="ExportCircuitFilesDialog"
   class='customScroll'

diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.6.0",
     "@hotwired/stimulus": "^3.2.2",
+    "@popperjs/core": "^2.11.8",
     "@tarekraafat/autocomplete.js": "^10.2.8",
     "banana-i18n": "^2.3.3",
     "better-docs": "^2.7.3",
@@ -58,7 +59,6 @@
     "jquery-ujs": "^1.2.3",
     "jsdoc-export-default-interop": "^0.3.1",
     "opencollective-postinstall": "^2.0.3",
-    "@popperjs/core": "^2.11.8",
     "sass": "^1.80.3",
     "stimulus": "^3.2.2",
     "stylelint": "^15.11.0",

diff --git a/simulator/src/css/main.stylesheet.css b/simulator/src/css/main.stylesheet.css
@@ -1605,15 +1605,19 @@ input:checked + .slider:before {
 .zoom-slider {
     color: white;
     font-size: 20px;
+    max-width: 150px;
 }
 
 .zoom-slider-increment {
+    color: white;
     position: relative;
-    bottom: 0.3rem;
+    bottom: 0.1rem;
 }
+
 .zoom-slider-decrement {
     position: relative;
-    bottom: 0.4rem;
+    bottom: 0.1rem;
+    color: white;
 }
 
 .custom-range {
@@ -2806,4 +2810,4 @@ canvas {
         width: 200px;
         height: 200px;
     }
-}
+}