diff --git a/nodes/node-label.css b/nodes/node-label.css index 9127741..fec365c 100644 --- 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 index 269f33b..cf73596 100644 --- 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: '', text: _('Style') + ': ' + _('Label')}, - 'bubble': {icon: '', text: _('Style') + ': ' + _('Bubble')}, - 'text': {icon: '', text: _('Style') + ': ' + _('Only text')}, - 'underline': {icon: '', 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: '', text: _('Font') + ': Roboto'}, - 'Playfair Display': {icon: '', text: _('Font') + ': Playfair Display'}, - 'Source Code Pro': {icon: '', text: _('Font') + ': Source Code Pro'}, - 'Allura': {icon: '', text: _('Font') + ': Allura'}, - 'Mansalva': {icon: '', text: _('Font') + ': Mansalva'}, - 'Oswald': {icon: '', text: _('Font') + ': Oswald'}, - 'Bangers': {icon: '', text: _('Font') + ': Bangers'}, - 'Lemon': {icon: '', 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: '
S
', text: _('Style') + ': ' + _('Label')}, + 'bubble': {icon: '
S
', text: _('Style') + ': ' + _('Bubble')}, + 'text': {icon: '
S
', text: _('Style') + ': ' + _('Only text')}, + 'underline': {icon: '
S
', 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 index d665efa..c029275 100644 --- 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) => {