Show Symbol use #163

weave-cms · Sep 3, 2022 · 59ae332 · 59ae332
1 parent 6924cc0
commit 59ae332
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 9 deletions.
diff --git a/editor/package-lock.json b/editor/package-lock.json
diff --git a/editor/package.json b/editor/package.json
@@ -2,7 +2,7 @@
   "name": "@primo-app/primo",
   "version": "1.6.0",
   "description": "primo is an all-in-one ide, cms, component library, and static site generator",
-  "main": "dist/index.js",
+  "main": "src/index.js",
   "svelte": "src/index.js",
   "keywords": [
     "primo",
@@ -36,6 +36,7 @@
     "@lezer/highlight": "^1.0.0",
     "@lezer/html": "^1.0.1",
     "@lezer/lr": "^1.2.0",
+    "@popperjs/core": "^2.11.6",
     "@tiptap/core": "^2.0.0-beta.174",
     "@tiptap/extension-blockquote": "^2.0.0-beta.26",
     "@tiptap/extension-bubble-menu": "^2.0.0-beta.55",

diff --git a/editor/src/stores/helpers.ts b/editor/src/stores/helpers.ts
@@ -1,7 +1,7 @@
 import { unionBy, find as _find, uniqBy, chain as _chain, flattenDeep as _flattenDeep } from 'lodash-es'
 import _ from 'lodash-es'
 import { get } from 'svelte/store'
-import { site as activeSite, symbols, fields as siteFields } from './data/draft'
+import { pages, site as activeSite, symbols, fields as siteFields } from './data/draft'
 import activePage, { id, fields as pageFields, code as pageCode, sections } from './app/activePage'
 import { locale } from './app/misc'
 import { processCode, processCSS, getPlaceholderValue, getEmptyValue, LoremIpsum } from '../utils'
@@ -15,6 +15,19 @@ export function resetActivePage() {
   pageCode.set(Page().code)
 }
 
+export function getSymbolUseInfo(symbolID) {
+  const info = { pages: [], frequency: 0 }
+  get(pages).forEach(page => {
+    page.sections.forEach(section => {
+      if (section.symbolID === symbolID) {
+        info.frequency++
+        if (!info.pages.includes(page.id)) info.pages.push(page.name)
+      }
+    })
+  })
+  return info
+}
+
 export function getAllFields(componentFields: any[] = [], exclude = () => true) {
   return unionBy(componentFields, get(pageFields).filter(exclude), get(siteFields), "key").filter(exclude);
 }

diff --git a/editor/src/views/modal/ComponentLibrary/SymbolContainer.svelte b/editor/src/views/modal/ComponentLibrary/SymbolContainer.svelte
@@ -1,10 +1,12 @@
 <script>
   import { createEventDispatcher, onMount, getContext } from 'svelte';
   import { chain as _chain } from 'lodash-es'
+  import Icon from '@iconify/svelte'
   import { fade } from 'svelte/transition';
   const dispatch = createEventDispatcher();
   import { LoremIpsum } from "lorem-ipsum";
-  import {getComponentData} from '../../../stores/helpers'
+  import * as Popper from '@popperjs/core'
+  import {getComponentData, getSymbolUseInfo} from '../../../stores/helpers'
 
   import IFrame from './IFrame.svelte';
   import {
@@ -61,6 +63,15 @@
     error = res.error;
     componentApp = res.js;
   }
+  
+  const info = getSymbolUseInfo(symbol.id)
+  let button_node
+  let tooltip_node
+  $: if (tooltip_node) {
+    Popper.createPopper(button_node, tooltip_node, {
+      placement: 'top',
+    });
+  }
 
   let active;
 
@@ -150,6 +161,17 @@
               {/if}
             </label>
           </form>
+          <span bind:this={button_node} class="info" title="Used {info.frequency} times on site">
+            <Icon icon="akar-icons:info" width="1.25rem" height="100%" />
+          </span>
+          <div bind:this={tooltip_node} class="info-tooltip">
+            <div id="arrow" data-popper-arrow></div>
+            {#if info.frequency === 0}
+              <span>Unused</span>
+            {:else}
+              <span>Used on {info.pages.join(', ')} {info.frequency} {info.frequency === 1 ? 'time' : 'times'}</span>
+            {/if}
+          </div>
         {:else if name}
           <div class="action-name">
             <span>{name}</span>
@@ -312,6 +334,45 @@
           font-size: 0.75rem;
         }
       }
+      
+      .info {
+        padding: 0 1rem;
+        font-size: 3rem;
+        
+        &:hover + .info-tooltip {
+          opacity: 1;
+        }
+      }
+      
+      .info-tooltip {
+        font-weight: 500;
+        background: var(--color-gray-9);
+        padding: 0.25rem 0.5rem;
+        max-width: 250px;
+        opacity: 0;
+        transition: 0.1s opacity;
+        pointer-events: none;
+        translate: 0 -6px;
+        
+        [data-popper-arrow],
+        [data-popper-arrow]::before {
+          position: absolute;
+          width: 8px;
+          height: 8px;
+          background: inherit;
+        }
+        
+        [data-popper-arrow] {
+          visibility: hidden;
+          bottom: -4px;
+        }
+        
+        [data-popper-arrow]::before {
+          visibility: visible;
+          content: '';
+          transform: rotate(45deg);
+        }
+      }
 
       .buttons {
         display: flex;