feat: The Big One UI

2026-01-28 08:27:30 +00:00
parent f9e0eb95f8
commit 82785dc8cb
45 changed files with 4147 additions and 143 deletions
--- a/src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.module.css
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.module.css
@@ -0,0 +1,203 @@
+.warnings-sidebar {
+    min-width: auto;
+    max-width: 340px;
+    margin-right: 0;
+    height: 100%;
+    background: canvas;
+    display: flex;
+    flex-direction: row;
+}
+
+.warnings-toggle-bar {
+    background-color: ButtonFace;
+    justify-items: center;
+    align-content: center;
+    width: 1rem;
+    cursor: pointer;
+}
+
+.warnings-toggle-bar.error:first-child:has(.arrow-right){
+    background-color: hsl(from red h s 75%);
+}
+.warnings-toggle-bar.warning:first-child:has(.arrow-right) {
+    background-color: hsl(from orange h s 75%);
+}
+.warnings-toggle-bar.info:first-child:has(.arrow-right) {
+    background-color: hsl(from steelblue h s 75%);
+}
+
+.warnings-toggle-bar:hover {
+    background-color: GrayText !important ;
+    .arrow-left {
+        border-right-color: ButtonFace;
+        transition: transform 0.15s ease-in-out;
+        transform: rotateY(180deg);
+    }
+    .arrow-right {
+        border-left-color: ButtonFace;
+        transition: transform 0.15s ease-in-out;
+        transform: rotateY(180deg);
+    }
+}
+
+
+.warnings-content {
+    width: 320px;
+    flex: 1;
+    flex-direction: column;
+    border-left: 2px solid CanvasText;
+}
+
+.warnings-header {
+    padding: 12px;
+    border-bottom: 2px solid CanvasText;
+}
+
+.severity-tabs {
+    display: flex;
+    gap: 4px;
+}
+
+.severity-tab {
+    flex: 1;
+    padding: 4px;
+    background: ButtonFace;
+    color: GrayText;
+    border: none;
+    cursor: pointer;
+}
+
+.count {
+    padding: 4px;
+    color: GrayText;
+    border: none;
+    cursor: pointer;
+}
+
+.severity-tab.active {
+    color: ButtonText;
+    border: 2px solid currentColor;
+    .count {
+        color: ButtonText;
+    }
+}
+
+.warning-group-header {
+    background: ButtonFace;
+    padding: 6px;
+    font-weight: bold;
+}
+
+.warnings-list {
+    flex: 1;
+    min-height: 0;
+    overflow-y: scroll;
+}
+
+.warnings-empty {
+    margin: auto;
+}
+
+.warning-item {
+    display: flex;
+    flex-direction: column;
+    margin: 5px;
+    gap: 2px;
+    padding: 0;
+    border-radius: 5px;
+    cursor: pointer;
+    color: GrayText;
+}
+
+.warning-item:hover {
+    background: ButtonFace;
+}
+
+.warning-item--error {
+    border: 2px solid red;
+    background-color: hsl(from red h s 96%);
+    .item-header{
+        background-color: red;
+        .type{
+            color: hsl(from red h s 96%);
+        }
+    }
+
+}
+
+.warning-item--error:hover {
+    background-color: hsl(from red h s 75%);
+}
+
+.warning-item--warning {
+    border: 2px solid orange;
+    background-color: hsl(from orange h s 96%);
+    .item-header{
+        background-color: orange;
+        .type{
+            color: hsl(from orange h s 96%);
+        }
+    }
+}
+
+.warning-item--warning:hover {
+    background-color: hsl(from orange h s 75%);
+}
+
+.warning-item--info {
+    border: 2px solid steelblue;
+    background-color: hsl(from steelblue h s 96%);
+    .item-header{
+        background-color: steelblue;
+        .type{
+            color: hsl(from steelblue h s 96%);
+        }
+    }
+}
+
+.warning-item--info:hover {
+    background-color: hsl(from steelblue h s 75%);
+}
+
+.warning-item .item-header {
+    padding: 8px 8px;
+    opacity: 1;
+    font-weight: bolder;
+}
+.warning-item .item-header .type{
+    padding: 2px 8px;
+    font-size: 0.9rem;
+}
+
+.warning-item .description {
+    padding: 5px 10px;
+    font-size: 0.8rem;
+}
+
+.auto-hide {
+    background-color: Canvas;
+    border-top: 2px solid CanvasText;
+    margin-top: auto;
+    width: 100%;
+    height: 2.5rem;
+    display: flex;
+    align-items: center;
+    padding: 0 12px;
+}
+
+/* arrows for toggleBar */
+.arrow-right {
+    width: 0;
+    height: 0;
+    border-top: 0.5rem solid transparent;
+    border-bottom: 0.5rem solid transparent;
+    border-left: 0.6rem solid GrayText;
+}
+
+.arrow-left {
+    width: 0;
+    height: 0;
+    border-top: 0.5rem solid transparent;
+    border-bottom: 0.5rem solid transparent;
+    border-right: 0.6rem solid GrayText;
+}