consistent styling

trilogy-data · Apr 5, 2024 · 014a113 · 014a113
1 parent 38beaf5
commit 014a113
Show file tree

Hide file tree

Showing 8 changed files with 111 additions and 29 deletions.
diff --git a/frontend/src/components/sidebar/ConnectionManager.vue b/frontend/src/components/sidebar/ConnectionManager.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="connection-manager py-0">
-        <div class="header">
+        <div class="sidebar-header">
             Connections
         </div>
         <div class="connection-list">
@@ -60,13 +60,6 @@
     font-size: .6rem;
 }
 
-.header {
-    color: var(--text-lighter);
-    font-size: 1.0rem;
-    height: 30px;
-    min-height: 30px;
-    line-height: 30px;
-}
 
 .footer {
     --height: 20px;

diff --git a/frontend/src/components/sidebar/GenAIManager.vue b/frontend/src/components/sidebar/GenAIManager.vue
@@ -0,0 +1,81 @@
+<template>
+    <div class="history-manager py-0">
+        <div class="sidebar-header">
+            GenAI Connections
+        </div>
+    </div>
+</template>
+<style local>
+
+.failed {
+    color: var(--text-error);
+}
+
+.footer {
+    --height: 20px;
+    font-size: 0.8rem;
+    background-color: black;
+    height: var(--height);
+    min-height: var(--height);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    color: var(--text-lighter);
+
+}
+
+.history-list-item {
+    align-items: right;
+    text-align: center;
+    height: 25px;
+}
+
+.history-list {
+    display: 'flex';
+    align-items: left;
+    text-align: left;
+    width: 100%;
+    height: 100%;
+    background-color: var(--light-bg-color-2);
+    background-color: var(--main-bg-color);
+
+}
+
+
+.history-manager {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    flex-basis: 100%;
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex: 1 1 100%;
+    flex-wrap: nowrap;
+    width: 100%;
+    font-size: .8rem;
+}
+
+
+</style>
+<script lang="ts">
+// @ts-ignore
+import GlowingDot from '/src/components/generic/GlowingDot.vue';
+export default {
+    name: "GenAIManager",
+    components: {
+        GlowingDot,
+    },
+    data() {
+        return {
+            modalVisible: false,
+        };
+    },
+    computed: {
+    },
+    methods: {
+    },
+    mounted() {
+    },
+};
+</script>
diff --git a/frontend/src/components/sidebar/HistoryManager.vue b/frontend/src/components/sidebar/HistoryManager.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="history-manager py-0">
-        <div class="header">
+        <div class="sidebar-header">
             History
         </div>
         <modal v-if="modalVisible" @close="modalVisible = false" :data="modalData"/>
@@ -29,13 +29,7 @@
     </div>
 </template>
 <style local>
-.header {
-    color: var(--text-lighter);
-    font-size: 1.0rem;
-    height: 30px;
-    min-height: 30px;
-    line-height: 30px;
-}
+
 .failed {
     color: var(--text-error);
 }

diff --git a/frontend/src/components/sidebar/ModelManager.vue b/frontend/src/components/sidebar/ModelManager.vue
@@ -1,11 +1,13 @@
 <template>
     <div class="connection-manager py-0">
-        <div v-if="activeModelFromConnection" class="header">
-            {{ activeModelFromConnection.name }}
+        <div class="sidebar-header">
+            Model Management
         </div>
-        <div v-else class="header">
+        <div class="sidebar-subheader" v-if="activeModelFromConnection" >{{ activeModelFromConnection.name }}</div>
+        <div class="sidebar-subheader" v-else >
             No active model
         </div>
+       <div></div>
         <v-select theme="dark" variant="solo" density="compact" class="minimal-select" v-model="selectedModel"
             label="Change Connection Model" :items="models" item-title="name"
             @update:modelValue="changeConnectionModel">
@@ -60,14 +62,13 @@
     </div>
 </template>
 <style local>
-.header {
-    color: var(--text-lighter);
-    font-size: .8rem;
-    height: 30px;
-    min-height: 30px;
-    line-height: 30px;
+
+.sidebar-subheader {
+  color: var(--text-lighter);
+  font-size: .75rem;
 }
 
+
 /* .minimal-select {
     font-size: 1.0rem;
     height:50px;
@@ -88,7 +89,6 @@
 }
 
 
-
 .editor-list {
     align-items: right;
     text-align: center;

diff --git a/frontend/src/components/sidebar/SidebarComponent.vue b/frontend/src/components/sidebar/SidebarComponent.vue
@@ -8,6 +8,7 @@
                 <ConnectionManager v-if="activeSidebar == 'connections'" />
                 <HistoryManager v-if="activeSidebar == 'history'" />
                 <ModelManager v-if="activeSidebar == 'models'" />
+                <GenAIManager v-if="activeSidebar == 'genai'" />
             </div>
         </div>
         <SidebarFooter class="footer" />
@@ -54,6 +55,7 @@
 import ConnectionManager from './ConnectionManager.vue'
 import HistoryManager from './HistoryManager.vue'
 import ModelManager from './ModelManager.vue'
+import GenAIManager from './GenAIManager.vue'
 import SidebarFooter from './SidebarFooter.vue'
 import SidebarSelector from './SidebarSelector.vue'
 import { mapGetters } from 'vuex';
@@ -65,7 +67,7 @@ export default {
         return {
         };
     },
-    components: { ConnectionManager, HistoryManager, SidebarFooter, SidebarSelector, ModelManager },
+    components: { ConnectionManager, HistoryManager, SidebarFooter, SidebarSelector, ModelManager, GenAIManager },
     computed: {
         ...mapGetters(['activeSidebar'])
 

diff --git a/frontend/src/components/sidebar/SidebarSelector.vue b/frontend/src/components/sidebar/SidebarSelector.vue
@@ -39,7 +39,7 @@ export default {
             { 'name': 'History', 'address': 'history', 'icon': 'mdi-history' },
             { 'name': "Models", 'address': 'models', 'icon': 'mdi-table' },
             { 'name': 'Other', 'address': 'other', 'icon': 'mdi-dots-horizontal' },
-            { 'name': 'Natural Language', 'address': 'nlp', 'icon': 'mdi-dots-horizontal' },
+            { 'name': 'GenAI', 'address': 'genai', 'icon': 'mdi-brain' },
 
             ],
             selectedItem: 'connections'

diff --git a/frontend/src/components/sidebar/model/ModelConcept.vue b/frontend/src/components/sidebar/model/ModelConcept.vue
@@ -61,7 +61,8 @@ export default defineComponent({
 
 <template>
   <v-list-item v-if="density === 'compact'" class="ma-0 pa-0" :density="density" :key="key" :title="key"
-    @click="propogateModelClick">
+    @click="propogateModelClick"
+    @contextmenu.prevent="console.log(key)">
     <template v-slot:prepend>
       <v-icon class="mr-0 concept-icon"> <v-tooltip > {{ concept.purpose }}</v-tooltip> {{ icon }} </v-icon>
     </template></v-list-item>

diff --git a/frontend/src/style.css b/frontend/src/style.css
@@ -113,7 +113,18 @@ button:focus-visible {
 }
 
 
+
 /* sidebar CSS */
+.sidebar-header {
+  color: var(--text-lighter);
+  font-size: 1.0rem;
+  height: 30px;
+  min-height: 30px;
+  line-height: 30px;
+}
+
+
+
 .sidebar-button-list {
   display: 'flex';
   width: '100%';