diff --git a/src/components/popover.riot b/src/components/popover.riot index c550434..7cb701f 100644 --- a/src/components/popover.riot +++ b/src/components/popover.riot @@ -2,6 +2,12 @@
+
+ + + + +
@@ -44,5 +50,18 @@ box-shadow: 0 2px 4px rgb(0 0 0 / 20%), 0 -1px 0 rgb(0 0 0 / 2%); cursor: default; } + .popover-close { + position: absolute; + top: 0; + right: 0; + margin: 0.25em 0.5em; + padding: 0.5em; + line-height: 0; + border-radius: 0.375rem; + cursor: pointer; + } + .popover-close:hover { + background-color: rgba(0, 0, 0, 0.1); + } diff --git a/src/components/render-item.riot b/src/components/render-item.riot index 72158d7..0fc29a9 100644 --- a/src/components/render-item.riot +++ b/src/components/render-item.riot @@ -1,5 +1,5 @@ - + @@ -15,6 +15,10 @@ onClick(e) { this.update({ popover: !this.state.popover }); }, + onClose(e) { + this.update({ popover: false }); + e.stopPropagation(); + }, applyStyles(container, style) { if (!container || !container.style || !style) { return;