All icons for the label popover

dariuszdawidowski · Sep 17, 2024 · 32a0543 · 32a0543
1 parent 875402d
commit 32a0543
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 14 deletions.
diff --git a/nodes/node-label.css b/nodes/node-label.css
@@ -109,7 +109,7 @@
 
 .metaviz-node-label.style-bubble.color-0 .metaviz-control-input {
     color: var(--paper-2);
-    caret-color: black;
+    caret-color: var(--paper-2);
 }
 
 /* Color 1 */
@@ -395,3 +395,52 @@
     font-family: "Source Code Pro";
     font-size: 13px;
 }
+
+/* Popover */
+
+.popover-icon-label-basic {
+    width: 20px;
+    height: 14px;
+    color: var(--font-color-2);
+    background-color: var(--paper-1);
+    border: 1px solid #d3d3d3;
+    border-radius: 3px;
+    font-size: 12px;
+}
+
+.popover-icon-label-bubble {
+    position: relative;
+    width: 20px;
+    height: 14px;
+    color: var(--paper-2);
+    background-color: transparent;
+    border: 1px solid var(--paper-2);
+    border-radius: 8px;
+    font-size: 12px;
+}
+
+.popover-icon-label-bubble::before {
+    content: '';
+    position: absolute;
+    left: -2px;
+    top: -2px;
+    width: 20px;
+    height: 14px;
+    border-radius: 8px;
+    border: 2px solid var(--paper-2);
+}
+
+.popover-icon-label-text {
+    width: 20px;
+    height: 20px;
+    font-size: 15px;
+    color: var(--paper-2);
+}
+
+.popover-icon-label-underline {
+    width: 20px;
+    height: 20px;
+    font-size: 15px;
+    color: var(--paper-2);
+    text-decoration: underline;
+}
diff --git a/nodes/node-label.js b/nodes/node-label.js
@@ -52,10 +52,10 @@ class MetavizNodeLabel extends MetavizNode {
             style: new TotalProMenuSelect({
                 placeholder: _('Style'),
                 options: {
-                    'label': {icon: '<i class="fa-solid fa-user-tie"></i>', text: _('Style') + ': ' + _('Label')},
-                    'bubble': {icon: '<i class="fa-solid fa-user-tie"></i>', text: _('Style') + ': ' + _('Bubble')},
-                    'text': {icon: '<i class="fa-solid fa-user-tie"></i>', text: _('Style') + ': ' + _('Only text')},
-                    'underline': {icon: '<i class="fa-solid fa-user-tie"></i>', text: _('Style') + ': ' + _('Underline')},
+                    'label': {text: _('Style') + ': ' + _('Label')},
+                    'bubble': {text: _('Style') + ': ' + _('Bubble')},
+                    'text': {text: _('Style') + ': ' + _('Only text')},
+                    'underline': {text: _('Style') + ': ' + _('Underline')},
                 },
                 value: this.params.style,
                 onChange: (value) => {
@@ -97,14 +97,14 @@ class MetavizNodeLabel extends MetavizNode {
             font: new TotalProMenuSelect({
                 placeholder: _('Font'),
                 options: {
-                    'Roboto': {icon: '<i class="fa-solid fa-font"></i>', text: _('Font') + ': Roboto'},
-                    'Playfair Display': {icon: '<i class="fa-solid fa-font"></i>', text: _('Font') + ': Playfair Display'},
-                    'Source Code Pro': {icon: '<i class="fa-solid fa-font"></i>', text: _('Font') + ': Source Code Pro'},
-                    'Allura': {icon: '<i class="fa-solid fa-font"></i>', text: _('Font') + ': Allura'},
-                    'Mansalva': {icon: '<i class="fa-solid fa-font"></i>', text: _('Font') + ': Mansalva'},
-                    'Oswald': {icon: '<i class="fa-solid fa-font"></i>', text: _('Font') + ': Oswald'},
-                    'Bangers': {icon: '<i class="fa-solid fa-font"></i>', text: _('Font') + ': Bangers'},
-                    'Lemon': {icon: '<i class="fa-solid fa-font"></i>', text: _('Font') + ': Lemon'},
+                    'Roboto': {text: _('Font') + ': Roboto'},
+                    'Playfair Display': {text: _('Font') + ': Playfair Display'},
+                    'Source Code Pro': {text: _('Font') + ': Source Code Pro'},
+                    'Allura': {text: _('Font') + ': Allura'},
+                    'Mansalva': {text: _('Font') + ': Mansalva'},
+                    'Oswald': {text: _('Font') + ': Oswald'},
+                    'Bangers': {text: _('Font') + ': Bangers'},
+                    'Lemon': {text: _('Font') + ': Lemon'},
                 },
                 value: this.params.font,
                 onChange: (value) => {
@@ -120,6 +120,32 @@ class MetavizNodeLabel extends MetavizNode {
 
         });
 
+        // Popover options
+        this.addPopovers({
+
+            // Style
+            style: new MetavizPopoverTextSelect({
+                options: {
+                    'label': {icon: '<div class="popover-icon popover-icon-label-basic">S</div>', text: _('Style') + ': ' + _('Label')},
+                    'bubble': {icon: '<div class="popover-icon popover-icon-label-bubble">S</div>', text: _('Style') + ': ' + _('Bubble')},
+                    'text': {icon: '<div class="popover-icon popover-icon-label-text">S</div>', text: _('Style') + ': ' + _('Only text')},
+                    'underline': {icon: '<div class="popover-icon popover-icon-label-underline">S</div>', text: _('Style') + ': ' + _('Underline')},
+                },
+                value: this.params.style,
+                onChange: (value) => {
+                    metaviz.editor.history.store({
+                        action: 'param',
+                        node: {id: this.id},
+                        params: {style: value},
+                        prev: {style: this.params.style}
+                    });
+                    this.params.set('style', value);
+                    this.setSize({border: this.getBorder()});
+                }
+            }),
+
+        });
+
         // Font
         this.controls.input.element.style.fontFamily = this.params.font;
 

diff --git a/nodes/node-text.js b/nodes/node-text.js
@@ -257,7 +257,7 @@ class MetavizNodeText extends MetavizNode {
             }),
 
             // Color picker
-            colors: new MetavizPopoverColorPicker({
+            palette: new MetavizPopoverColorPicker({
                 options: ['var(--paper-2)', 'var(--color-sky)', 'rgb(0, 117, 188)', 'rgb(0, 67, 136)', 'var(--color-jade)', 'rgb(254, 192, 11)'],
                 value: this.params.palette,
                 onChange: (value) => {