styles(#62): reference and hierarchies icons

lukashornych · Nov 4, 2023 · 31c0810 · 31c0810
1 parent b60ca1b
commit 31c0810
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 25 deletions.
diff --git a/...ents/lab/editor/result-visualiser/facet-summary/LabEditorResultVisualiserFacetSummary.vue b/...ents/lab/editor/result-visualiser/facet-summary/LabEditorResultVisualiserFacetSummary.vue
@@ -51,6 +51,7 @@ function getCountForReference(referenceSchema: ReferenceSchema, groupStatisticsR
     <VExpansionPanels v-if="referencesWithGroupStatisticsResults && referencesWithGroupStatisticsResults.length > 0" variant="accordion">
         <VExpansionPanel v-for="referenceWithGroup in referencesWithGroupStatisticsResults" :key="referenceWithGroup[0].name">
             <VExpansionPanelTitle>
+                <VIcon class="mr-8">mdi-link-variant</VIcon>
                 {{ referenceWithGroup[0].name }} ({{ getCountForReference(referenceWithGroup[0], referenceWithGroup[1]) }})
             </VExpansionPanelTitle>
             <VExpansionPanelText>

diff --git a/src/components/lab/editor/result-visualiser/hierarchy/LabEditorResultVisualiserHierarchy.vue b/src/components/lab/editor/result-visualiser/hierarchy/LabEditorResultVisualiserHierarchy.vue
@@ -45,7 +45,8 @@ function getPanelKey(referenceSchema: ReferenceSchema | undefined): string {
 <template>
     <VExpansionPanels v-if="referencesWithNamedHierarchiesResults && referencesWithNamedHierarchiesResults.length > 0" variant="accordion">
         <VExpansionPanel v-for="referenceWithNamedHierarchResult in referencesWithNamedHierarchiesResults" :key="getPanelKey(referenceWithNamedHierarchResult[0])">
-            <VExpansionPanelTitle>
+            <VExpansionPanelTitle class="d-flex">
+                <VIcon class="mr-8">mdi-link-variant</VIcon>
                 {{ referenceWithNamedHierarchResult[0]?.name ?? `${entitySchema.name} (self)` }} ({{ Object.values(referenceWithNamedHierarchResult[1]).length }})
             </VExpansionPanelTitle>
             <VExpansionPanelText>

diff --git a/...onents/lab/editor/result-visualiser/hierarchy/LabEditorResultVisualiserNamedHierarchy.vue b/...onents/lab/editor/result-visualiser/hierarchy/LabEditorResultVisualiserNamedHierarchy.vue
@@ -47,32 +47,37 @@ function initialize(): void {
     <VListGroup>
         <template #activator="{ props }">
             <VListItem v-bind="props" @click="initialize">
-                <VListItemTitle class="group-title">
-                    <span>{{ name }}</span>
+                <template #prepend>
+                    <VIcon>mdi-file-tree</VIcon>
+                </template>
+                <template #title>
+                    <VListItemTitle class="named-hierarchy-title">
+                        <span>{{ name }}</span>
+
+                        <VLazy>
+                            <VChipGroup>
+                                <VChip prepend-icon="mdi-file-tree">
+                                    <span>
+                                        {{ namedHierarchy?.count }}
+                                        <VTooltip activator="parent">
+                                            <!-- todo jno is this what we want to display? At this point we don't have total number of children. -->
+                                            <span>The number of actually fetched nodes.</span>
+                                        </VTooltip>
+                                    </span>
+                                </VChip>
 
-                    <VLazy>
-                        <VChipGroup>
-                            <VChip prepend-icon="mdi-file-tree">
-                                <span>
-                                    {{ namedHierarchy?.count }}
+                                <VChip v-if="namedHierarchy?.requestedNode" prepend-icon="mdi-target">
+                                    {{ namedHierarchy?.requestedNode?.primaryKey != undefined ? `${namedHierarchy?.requestedNode?.primaryKey}: ` : '' }}
+                                    {{ namedHierarchy?.requestedNode?.title }}
                                     <VTooltip activator="parent">
-                                        <!-- todo jno is this what we want to display? At this point we don't have total number of children. -->
-                                        <span>The number of actually fetched nodes.</span>
+                                        <!-- todo jno review explanation -->
+                                        <VMarkdown source="An entity representing a hierarchy node in this tree that was filtered by `hierarchyWithin`." />
                                     </VTooltip>
-                                </span>
-                            </VChip>
-
-                            <VChip v-if="namedHierarchy?.requestedNode" prepend-icon="mdi-target">
-                                {{ namedHierarchy?.requestedNode?.primaryKey != undefined ? `${namedHierarchy?.requestedNode?.primaryKey}: ` : '' }}
-                                {{ namedHierarchy?.requestedNode?.title }}
-                                <VTooltip activator="parent">
-                                    <!-- todo jno review explanation -->
-                                    <VMarkdown source="An entity representing a hierarchy node in this tree that was filtered by `hierarchyWithin`." />
-                                </VTooltip>
-                            </VChip>
-                        </VChipGroup>
-                    </VLazy>
-                </VListItemTitle>
+                                </VChip>
+                            </VChipGroup>
+                        </VLazy>
+                    </VListItemTitle>
+                </template>
             </VListItem>
         </template>
 
@@ -95,7 +100,7 @@ function initialize(): void {
 
 <style lang="scss" scoped>
 // todo lho better handling for small widths
-.group-title {
+.named-hierarchy-title {
     display: flex;
     gap: 0.5rem;
     align-items: center;