RavenDB-21021 Add indent-* classes with colors

ml054 · Nov 28, 2023 · 9b0bc8e · 9b0bc8e
1 parent eb994ed
commit 9b0bc8e
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/src/Raven.Studio/wwwroot/App/views/database/query/query.html b/src/Raven.Studio/wwwroot/App/views/database/query/query.html
@@ -193,7 +193,7 @@ <h2 class="on-base-background">
                 <div class="panel-body" data-bind="visible: showVirtualTable()">
                     <virtual-grid class="resizable" params="controller: gridController, emptyTemplate: 'empty-query-template'"></virtual-grid>
                 </div>
-                <div class="panel-body absolute-fill" data-bind="visible: currentTab() === 'queryPlan'">
+                <div class="panel-body queryPlan absolute-fill" data-bind="visible: currentTab() === 'queryPlan'">
                     <pre data-bind="text: queryPlan" class="h-100"></pre>
                 </div>
                 <div class="panel-body js-timings-container timings absolute-fill" data-bind="visible: currentTab() === 'timings'">

diff --git a/src/Raven.Studio/wwwroot/Content/css/pages/query.less b/src/Raven.Studio/wwwroot/Content/css/pages/query.less
@@ -255,6 +255,22 @@
     }
 }
 
+.queryPlan {
+    pre {
+        @color-list: @color-1, @color-1-2, @color-2, @color-2-2, @color-3, @color-3-2, @color-4, @color-4-2, @color-5, @color-5-2;
+        .loop(@index) when (@index > 0) {
+            @color: extract(@color-list, @index);
+
+            .indent-@{index} {
+                color: @color;
+            }
+
+            .loop(@index - 1);
+        }
+        .loop(length(@color-list));
+    }
+}
+
 .js-timings-container {
     .timing-legend-item {
         div {