TDT4290-group-4 · mariewah · Oct 24, 2025 · Oct 13, 2025 · Oct 13, 2025 · Oct 14, 2025
diff --git a/cypress/e2e/filtering.cy.js b/cypress/e2e/filtering.cy.js
@@ -0,0 +1,24 @@
+/**Testing whether the Accepted components excists or not  */
+describe('Accepted filtering', () => {
+  it('test accepted filter button', function () {
+    cy.visit('http://localhost:5173/#')
+    cy.get('#doAcceptedFilter').click()
+  })
+})
+
+/**Testing whether the Elevation components excists or not  */
+describe('Elevation Control', () => {
+  it('test elevation control', function () {
+    cy.visit('http://localhost:5173/#')
+    cy.get('#btnDoElevationControl').click()
+
+    cy.get(
+      '#elevation_gradient_scheme_selection span:nth-child(8) rect'
+    ).click()
+    cy.get(
+      '#elevation_gradient_scheme_selection span:nth-child(3) rect'
+    ).click()
+
+    cy.get('#sldHeightRange').click()
+  })
+})
diff --git a/index.html b/index.html
@@ -39,6 +39,7 @@
       href="/src/MeasurementControl/measurementsPanel.css"
     />
     <link rel="stylesheet" href="/src/AnnotationControl/annotationPanel.css" />
+    <link rel="stylesheet" href="src/AcceptedFiltering/threePanels.css" />
   </head>
 
   <body>

diff --git a/src/AcceptedFiltering/threePanels.css b/src/AcceptedFiltering/threePanels.css
@@ -0,0 +1,149 @@
+/* ---------- Buttons (shared look) ---------- */
+/* Reuse your accepted button style for all four */
+#btnDoElevationControl,
+#doAcceptedFiltering,
+#btnTHU,
+#btnTVU,
+#btnTHUFilter {
+  display: flex;
+  width: 100%;
+  margin: 6px 0 10px;
+  padding: 10px 10px;
+  font-size: 13px;
+  font-weight: 500;
+  background-color: #636262;
+  color: #ffffff;
+  border: 1px solid #555;
+  border-radius: 4px;
+  cursor: pointer;
+  transition:
+    background-color 0.2s ease,
+    transform 0.1s ease;
+}
+
+#btnDoElevationControl:hover,
+#doAcceptedFiltering:hover,
+#btnTHU:hover,
+#btnTVU:hover,
+#btnTHUFilter:hover {
+  background-color: #8f8f8f;
+}
+
+#btnDoElevationControl:active,
+#doAcceptedFiltering:active,
+#btnTHU:active,
+#btnTVU:active,
+#btnTHUFilter:active {
+  transform: scale(0.97);
+  background-color: #a8a6a6;
+}
+
+/* Optional: “active mode” outline if you toggle a class via JS */
+#btnDoElevationControl.active,
+#doAcceptedFiltering.active,
+#btnTHU.active,
+#btnTVU.active,
+#btnTHUFilter:active {
+  outline: 2px solid #7ba8ff;
+  outline-offset: 1px;
+}
+
+/* THU/TVU side-by-side */
+#thu_tvu_list .thu-tvu-row {
+  display: flex;
+  gap: 6px;
+}
+#thu_tvu_list .thu-tvu-row > button {
+  flex: 1 1 50%;
+  margin: 0;
+}
+
+/* ---------- Panels / moved containers ---------- */
+/* Keep Potree’s moved subtrees neat and full-width inside our panels */
+#elevation2_list [id='materials.elevation_container'],
+#thu_tvu_list [id='materials.extra_container'] {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 6px 8px; /* small breathing room since we moved it out of Appearance */
+}
+
+/* Slight spacing inside our panel lists (under the button) */
+#elevation2_list,
+#accepted_list_host,
+#thu_tvu_list {
+  display: block;
+  padding: 4px 0;
+}
+
+/* A small notice style used when an attribute/panel isn’t available */
+.panel-notice {
+  font-size: 13px;
+  color: #ddd;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px dashed #666;
+  border-radius: 4px;
+  padding: 8px;
+  margin: 6px 0;
+}
+
+/* ---------- Elevation label + slider tweaks ---------- */
+#lblHeightRange {
+  display: inline-block;
+  font-size: 12px;
+  color: #ddd;
+  margin: 4px 0 6px 2px;
+}
+
+/* Make sure the jQuery-UI slider has a little vertical room */
+#sldHeightRange {
+  margin: 6px 4px 10px 4px;
+}
+
+/* ---------- Accordions / headers (light touch) ---------- */
+/* Don’t fight jQuery-UI’s theme. Just small spacing adjustments. */
+#menu_elevation2 + .pv-menu-list,
+#menu_accepted + .pv-menu-list,
+#menu_thu_tvu + .pv-menu-list {
+  padding-top: 6px;
+}
+
+/* Optional: header label color alignment with dark UI */
+#menu_elevation2 span,
+#menu_accepted span,
+#menu_thu_tvu span {
+  color: #e6e6e6;
+  font-weight: 600;
+  letter-spacing: 0.2px;
+}
+
+/* Legend container */
+#accepted_legend {
+  margin-top: 10px;
+  padding-left: 4px;
+}
+
+/* Legend rows */
+#accepted_legend .legend-row {
+  display: flex;
+  align-items: center;
+  margin: 3px 0;
+  font-size: 13px;
+  color: #ddd; /* visible text */
+}
+
+/* Color boxes */
+#accepted_legend .legend-color {
+  width: 16px;
+  height: 16px;
+  border: 1px solid #777;
+  margin-right: 8px;
+  border-radius: 2px;
+}
+
+#accepted_legend .legend-color.accepted {
+  background-color: #fff;
+}
+
+#accepted_legend .legend-color.not-accepted {
+  background-color: #000;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -39,6 +39,7 @@ @@
           href="/src/MeasurementControl/measurementsPanel.css"
         />
         <link rel="stylesheet" href="/src/AnnotationControl/annotationPanel.css" />
+        <link rel="stylesheet" href="src/AcceptedFiltering/threePanels.css" />
       </head>
       <body>
@@ Expand Down @@