Fix pins style

This commit is contained in:
barsdeveloper
2022-04-28 22:17:33 +02:00
parent db0e3d0801
commit 125ef34847
9 changed files with 79 additions and 60 deletions

File diff suppressed because one or more lines are too long

View File

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../../scss/style.scss","../../scss/ueb-node.scss","../../scss/ueb-pin.scss","../../scss/ueb-link.scss","../../scss/ueb-type-color.scss"],"names":[],"mappings":"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","file":"ueb-style.css"}
{"version":3,"sourceRoot":"","sources":["../../scss/style.scss","../../scss/ueb-node.scss","../../scss/ueb-pin.scss","../../scss/ueb-link.scss","../../scss/ueb-type-color.scss"],"names":[],"mappings":"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","file":"ueb-style.css"}

20
dist/ueblueprint.js vendored
View File

@@ -2862,11 +2862,11 @@ class PinTemplate extends ITemplate {
${this.renderInput(pin)}
</div>
`;
if (pin.isInput()) {
return icon + content
} else {
return content + icon
}
return html`
<div class="ueb-pin-wrapper">
${pin.isInput() ? icon + content : content + icon}
</div>
`
}
/**
@@ -2890,7 +2890,7 @@ class PinTemplate extends ITemplate {
super.setup(pin);
pin.classList.add(
"ueb-node-" + (pin.isInput() ? "input" : pin.isOutput() ? "output" : "hidden"),
"ueb-pin-" + sanitizeText(pin.getType())
"ueb-pin-type-" + sanitizeText(pin.getType())
);
pin.dataset.id = pin.GetPinIdValue();
if (pin.entity.bAdvancedView) {
@@ -3381,8 +3381,8 @@ class NodeTemplate extends SelectableDraggableTemplate {
render(node) {
return html`
<div class="ueb-node-border">
<div class="ueb-node-content">
<div class="ueb-node-header">
<div class="ueb-node-wrapper">
<div class="ueb-node-top">
<div class="ueb-node-name">
<span class="ueb-node-name-symbol"></span>
<span class="ueb-node-name-text">
@@ -3390,13 +3390,13 @@ class NodeTemplate extends SelectableDraggableTemplate {
</span>
</div>
</div>
<div class="ueb-node-body">
<div class="ueb-node-content">
<div class="ueb-node-inputs"></div>
<div class="ueb-node-outputs"></div>
</div>
${node.entity.EnabledState.toString() == "DevelopmentOnly" ? html`
<div class="ueb-node-developmentonly">Development Only</div>
` : ""}
` : ""}
${node.entity.AdvancedPinDisplay ? html`
<div class="ueb-node-expansion">
<svg

View File

@@ -21,8 +21,8 @@ export default class NodeTemplate extends SelectableDraggableTemplate {
render(node) {
return html`
<div class="ueb-node-border">
<div class="ueb-node-content">
<div class="ueb-node-header">
<div class="ueb-node-wrapper">
<div class="ueb-node-top">
<div class="ueb-node-name">
<span class="ueb-node-name-symbol"></span>
<span class="ueb-node-name-text">
@@ -30,13 +30,13 @@ export default class NodeTemplate extends SelectableDraggableTemplate {
</span>
</div>
</div>
<div class="ueb-node-body">
<div class="ueb-node-content">
<div class="ueb-node-inputs"></div>
<div class="ueb-node-outputs"></div>
</div>
${node.entity.EnabledState.toString() == "DevelopmentOnly" ? html`
<div class="ueb-node-developmentonly">Development Only</div>
` : ""}
` : ""}
${node.entity.AdvancedPinDisplay ? html`
<div class="ueb-node-expansion">
<svg

View File

@@ -44,11 +44,11 @@ export default class PinTemplate extends ITemplate {
${this.renderInput(pin)}
</div>
`
if (pin.isInput()) {
return icon + content
} else {
return content + icon
}
return html`
<div class="ueb-pin-wrapper">
${pin.isInput() ? icon + content : content + icon}
</div>
`
}
/**
@@ -72,7 +72,7 @@ export default class PinTemplate extends ITemplate {
super.setup(pin)
pin.classList.add(
"ueb-node-" + (pin.isInput() ? "input" : pin.isOutput() ? "output" : "hidden"),
"ueb-pin-" + sanitizeText(pin.getType())
"ueb-pin-type-" + sanitizeText(pin.getType())
)
pin.dataset.id = pin.GetPinIdValue()
if (pin.entity.bAdvancedView) {

View File

@@ -0,0 +1,7 @@
// @ts-check
import NodeTemplate from "./NodeTemplate"
export default class VariadicNodeTemplate extends NodeTemplate {
}

View File

@@ -30,7 +30,7 @@ ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] ueb-node {
outline-offset: -6px;
}
.ueb-node-content {
.ueb-node-wrapper {
position: relative;
padding: 1px;
box-shadow: inset 0 0 2px 0 black;
@@ -39,7 +39,7 @@ ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] ueb-node {
overflow: hidden;
}
.ueb-node-header {
.ueb-node-top {
padding: 0.3em 0.7em;
box-shadow: inset 5px 1px 5px -3px #83b37b,
inset 0 1px 0 0 #111311,
@@ -57,7 +57,7 @@ ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] ueb-node {
padding: 0.1em 1.6em;
}
.ueb-node-body {
.ueb-node-content {
display: flex;
padding: 1px 0;
font-weight: 100;
@@ -76,6 +76,7 @@ ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] ueb-node {
.ueb-node-developmentonly {
display: none;
margin-top: 8px;
background: repeating-linear-gradient(-45deg,
transparent 0,
#57590a 1px,

View File

@@ -1,6 +1,14 @@
ueb-pin {
display: block;
margin: 6px 0;
}
ueb-node[data-advanced-display="Hidden"] ueb-pin[data-advanced-view="true"] {
display: none;
}
.ueb-pin-wrapper {
display: inline-block;
margin: 6px 0 0 0;
padding: 2px 2px;
&>* {
@@ -9,11 +17,7 @@ ueb-pin {
}
}
ueb-node[data-advanced-display="Hidden"] ueb-pin[data-advanced-view="true"] {
display: none;
}
ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] ueb-pin:hover {
ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] .ueb-pin-wrapper:hover {
background: var(--ueb-pin-background);
cursor: crosshair;
}

View File

@@ -1,3 +1,13 @@
@mixin pin-style($color) {
--ueb-pin-color : #{$color};
--ueb-pin-background: linear-gradient(90deg,
#{transparentize($color, 0.85)},
#{transparentize($color, 0.2)} 15%,
#{transparentize($color, 0.5)} 60%,
#{transparentize($color, 0.65)} 95%,
transparent);
}
.ueb {
$ueb-pin-color: white;
$ueb-pin-dim-color: #afafaf;
@@ -5,49 +15,46 @@
--ueb-pin-dim-color: #{$ueb-pin-dim-color};
}
.ueb-pin-boolean {
$ueb-pin-color: rgb(30%, 0, 0);
--ueb-pin-color: #{$ueb-pin-color};
.ueb-pin-type-bool {
@include pin-style(#750000);
}
.ueb-pin-class {
$ueb-pin-color: #5800bb;
--ueb-pin-color: #{$ueb-pin-color};
.ueb-pin-type-class {
@include pin-style(#5800bb);
}
.ueb-pin-float {
$ueb-pin-color: #9ffb44;
--ueb-pin-color: #{$ueb-pin-color};
.ueb-pin-type-exec {
@include pin-style(#a7a7a7);
}
.ueb-pin-int {
$ueb-pin-color: #1fe0ad;
--ueb-pin-color: #{$ueb-pin-color};
.ueb-pin-type-int {
@include pin-style(#1fe0ad);
}
.ueb-pin-name {
$ueb-pin-color: #cb81fc;
--ueb-pin-color: #{$ueb-pin-color};
.ueb-pin-type-name {
@include pin-style(#cb81fc);
}
.ueb-pin-object {
$ueb-pin-color: #00a8f2;
$ueb-pin-color: rgba(0%, 40%, 01%);
--ueb-pin-color: #{$ueb-pin-color};
.ueb-pin-type-object {
@include pin-style(#00a8f2);
}
.ueb-pin-rotator {
$ueb-pin-color: #9eb1fc;
--ueb-pin-color: #{$ueb-pin-color};
.ueb-pin-type-real {
@include pin-style(#32bb00);
}
.ueb-pin-string {
$ueb-pin-color: #fc00d2;
--ueb-pin-color : #{$ueb-pin-color};
--ueb-pin-background: linear-gradient(90deg, #fc00d220, #fc00d280 15%, #fc00d250 85%, transparent);
.ueb-pin-type-rotator {
@include pin-style(#9eb1fc);
}
.ueb-pin-vector {
$ueb-pin-color: #fcc823;
--ueb-pin-color: #{$ueb-pin-color};
.ueb-pin-type-string {
@include pin-style(#d500b1);
}
.ueb-pin-type-struct {
@include pin-style(#034ca8);
}
.ueb-pin-type-vector {
@include pin-style(#fcc823);
}