Group UI improvements

flecs-hub · May 16, 2023 · 2814e19 · 2814e19
1 parent edd37c3
commit 2814e19
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 20 deletions.
diff --git a/etc/css/style.css b/etc/css/style.css
@@ -72,7 +72,9 @@
   --ui-blue-30: rgba(79, 149, 255, 0.30);
 
   --steel-transparent-96: rgb(26, 29, 35, 0.96);
-  --steel-transparent-90: rgb(26, 29, 35, 0.80);
+  --steel-transparent-80: rgb(26, 29, 35, 0.80);
+
+  --steel-transparent-dark: rgb(46, 50, 60, 0.30);
   --steel-transparent-light: rgb(46, 50, 60, 0.85);
 
   /* Color assignments */
@@ -94,6 +96,7 @@
   --row-bg: var(--steel-800);
   --cell-bg: var(--steel-transparent-96);
   --cell-bg-hover: var(--steel-transparent-light);
+  --cell-header-bg: var(--steel-transparent-dark);
 
   --primary-text: var(--grey-100);
   --secondary-text: var(--grey-400);
@@ -1042,7 +1045,13 @@ div.query-results-nav {
   justify-content: flex-end;
   background-color: var(--panel-footer-bg);
   padding-top: 3px;
+  padding-bottom: 3px;
   padding-right: 6px;
+  border-style: solid;
+  border-width: 1px;
+  border-left-width: 0px;
+  border-right-width: 0px;
+  border-color: var(--grey-900);
 }
 
 div.query-results-nav span {
@@ -1361,7 +1370,7 @@ div.content-status-visible {
 
 div.content-status-body {
   display: flex;
-  background-color: var(--steel-transparent-90);
+  background-color: var(--steel-transparent-80);
   color: var(--footer-text);
   width: calc(100% - 3px);
   margin-left: 3px;
@@ -1452,6 +1461,7 @@ tr.query-results-group-row {
 
 tr.query-results-group-separator td {
   height: 3px !important;
+  background-color: var(--steel-800) !important;
 }
 
 td.query-results-group {

diff --git a/etc/js/query.js b/etc/js/query.js
@@ -126,17 +126,21 @@ Vue.component('query', {
       this.$emit("panel-update");
     },
     on_prev() {
-      this.offset -= this.limit;
-      if (this.offset < 0) {
-        this.offset = 0;
+      if (this.has_prev) {
+        this.offset -= this.limit;
+        if (this.offset < 0) {
+          this.offset = 0;
+        }
+        this.update_page();
+        this.refresh();
       }
-      this.update_page();
-      this.refresh();
     },
     on_next() {
-      this.offset += this.limit;
-      this.update_page();
-      this.refresh();
+      if (this.has_next) {
+        this.offset += this.limit;
+        this.update_page();
+        this.refresh();
+      }
     },
     on_limit(evt) {
       this.limit = parseInt(evt.target.value);
@@ -275,12 +279,18 @@ Vue.component('query', {
               ref="page"
               v-on:keyup.enter="on_page"
               v-on:blur="on_page"></input>
-            <button :disabled="!has_prev" v-on:click="on_prev" class="noselect">
-              Previous
-            </button>
-            <button :disabled="!has_next" v-on:click="on_next" class="noselect">
-              Next
-            </button>
+            <icon-button 
+              icon="codicons:chevron-left" 
+              :size="28"
+              :active="has_prev"
+              :opacity="0.7"
+              v-on:click="on_prev"></icon-button>
+            <icon-button 
+              icon="codicons:chevron-right" 
+              :size="28"
+              :active="has_next"
+              :opacity="0.7"
+              v-on:click="on_next"></icon-button>
           </div>
         </template>
       </template>

diff --git a/etc/js/query_results.js b/etc/js/query_results.js
@@ -251,7 +251,7 @@ Vue.component('query-results-table', {
           let i = 0;
 
           for (let el of this.columns.data.index) {
-            const var_cur = el.order_by;
+            const var_cur = el.label;
             if ((var_cur !== var_last)) {
               if (var_groups.length) {
                 var_groups[var_groups.length - 1].count = 
@@ -313,8 +313,8 @@ Vue.component('query-results-table', {
       let row_color = color;
 
       if (!color) {
-        left_border_color = "var(--steel-750)";
-        row_color = "var(--row-bg)";
+        left_border_color = "var(--steel-700)";
+        row_color = "var(--steel-500)";
       }
 
       let style = "border-left-color: " + left_border_color + "; ";
@@ -629,10 +629,15 @@ Vue.component('query-results', {
           } else if (this.order_by.kind === 'var') {
             let index = 0;
             const order_by_value = result.vars[this.order_by.index];
+            let label = result.var_labels[this.order_by.index];
+            if (label === 0) {
+              label = result.vars[this.order_by.index];
+            }
             for (let i = 0; i < (result.entities.length || 1); i ++) {
               r.data.index.push({
                 index: index + r.count,
-                order_by: order_by_value
+                order_by: order_by_value,
+                label: label
               });
               index ++;
             }