CHORE: Componentizing label node #23

dev-dist/sw.js

@@ -82,7 +82,7 @@ define(['./workbox-b5f7729d'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.aa9k6jaggd8"
+    "revision": "0.mssp4j9o56g"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

src/assets/main.css

@@ -6,4 +6,5 @@
   border: none;
   text-decoration: none;
   box-sizing: border-box;
+  font-family: "Montserrat";
 }

src/components/graph/label/DefaultLabel.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { useNodeStore, useTemplateStore } from '@/stores';
+import { CategoryLabel, ArticleName, AuthorName } from '@/components';
+
+const nodeStore = useNodeStore();
+const templateStore = useTemplateStore();
+</script>
+
+<template>
+  <div ref="tooltip" class="tooltip" :style="{
+    opacity: templateStore.tooltipOpacity,
+    position: 'absolute',
+    top: nodeStore.currentNodePosition.y + 'px',
+    left: nodeStore.currentNodePosition.x + 'px',
+  }">
+    <CategoryLabel />
+    <ArticleName />
+    <AuthorName />
+  </div>
+</template>
+
+<style scoped>
+.tooltip {
+  top: 0;
+  left: 0;
+  opacity: 1;
+  position: absolute;
+  width: 400px;
+  height: auto;
+  box-shadow: #75767a56 0px 1px 16px 0px;
+  background-color: #ffffff;
+  border-left: 20px solid #324CD6;
+  transition: opacity 0.2s linear;
+  pointer-events: none;
+  padding: 15px;
+  border-radius: 15px;
+  font-weight: 500;
+}
+</style>

src/components/graph/label/author/AuthorName.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import { AccountOutline } from '@/components/icons';
+import { useNodeStore } from '@/stores';
+
+
+const nodeStore = useNodeStore();
+</script>
+
+<template>
+    <div class="node-author">
+      <AccountOutline class="icon-author" size="15" />
+      {{  nodeStore.currentNode.node.author }}
+    </div>
+</template>
+
+<style scoped>
+.node-author {
+  font-size: 13px;
+  color: #22262F;
+  margin: 8px 0 0 0px;
+  display: flex;
+}
+.icon-author {
+  margin: 0 4px 0 8px;
+  align-items: baseline;
+}
+</style>

src/components/graph/label/category/CategoryLabel.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { useNodeStore } from '@/stores';
+
+const nodeStore = useNodeStore();
+</script>
+
+<template>
+    <div class="category-position">
+        <div class="node-category" v-for="(categoria, index) in nodeStore.currentNode.node.categoria" :key="index">
+            {{ categoria }}
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.node-category {
+    font-size: 13px;
+    color: #324CD6;
+    margin: 2px 0 10px 0;
+    border-right: 1px solid #000000;
+    padding: 0 5px 0 5px;
+}
+
+.node-category:last-child {
+    border-right: none;
+}
+
+.category-position {
+    display: flex;
+    flex-direction: row;
+}
+</style>

src/components/graph/label/name/ArticleName.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { useNodeStore } from '@/stores';
+
+const nodeStore = useNodeStore();
+</script>
+
+<template>
+     <div class="node-name">
+      {{ nodeStore.currentNode.node.name }}
+    </div>
+</template>
+
+<style scoped>
+.node-name {
+  font-size: 14px;
+  margin-left: 10px;
+}
+</style>

src/components/index.ts

@@ -1,12 +1,15 @@
 import GraphContainer from "./graph/GraphContainer.vue";
-import NodeLabel from "./graph/label/NodeLabel.vue";
+import NodeLabel from "./graph/label/DefaultLabel.vue";
 import PainelControl from "./painel/PainelControl.vue";
 import DesktopHeader from './header/DesktopHeader.vue';
 import MobileHeader from './header/MobileHeader.vue';
 import ListTitles from './header/titles/ListTitles.vue';
 import TextLogo from './header/logo/TextLogo.vue';
 import LoginButton from './header/buttons/LoginButton.vue';
 import DefaultHeader from './header/DefaultHeader.vue'
+import CategoryLabel from './graph/label/category/CategoryLabel.vue'
+import ArticleName from './graph/label/name/ArticleName.vue'
+import AuthorName from './graph/label/author/AuthorName.vue'
 
 export {
     GraphContainer,
@@ -17,5 +20,8 @@ export {
     TextLogo,
     LoginButton,
     DefaultHeader,
-    NodeLabel
+    NodeLabel,
+    CategoryLabel,
+    ArticleName,
+    AuthorName
 };