From aa5ab6138c0f6a4493d4a774173f0be2477ad5e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christina=20T=C3=B6gl?= <toegl@tugraz.at>
Date: Tue, 14 Sep 2021 16:08:57 +0200
Subject: [PATCH] Add new information-circle icon and use it in info-tooltip
component
---
.../common/assets/icons/information-circle.svg | 14 ++++++++++++++
packages/tooltip/src/info-tooltip.js | 17 ++++++++---------
2 files changed, 22 insertions(+), 9 deletions(-)
create mode 100644 packages/common/assets/icons/information-circle.svg
diff --git a/packages/common/assets/icons/information-circle.svg b/packages/common/assets/icons/information-circle.svg
new file mode 100644
index 00000000..4facedf0
--- /dev/null
+++ b/packages/common/assets/icons/information-circle.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="lni_lni-checkmark-circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+ x="0px" y="0px" viewBox="0 0 52 52" style="enable-background:new 0 0 52 52;" xml:space="preserve">
+<g>
+ <path d="M26,51C12.2,51,1.1,39.8,1.1,26S12.2,1.1,26,1.1S51,12.2,51,26S39.8,51,26,51z M26,3.9C13.8,3.9,3.9,13.8,3.9,26
+ S13.8,48.2,26,48.2s22.2-10,22.2-22.2S38.2,3.9,26,3.9z"/>
+</g>
+<g>
+ <circle cx="25.6" cy="12.4" r="2"/>
+ <path d="M29.6,39.8H27V19.5c0-1.2-0.9-2.1-2.1-2.1h-2.4c-0.5,0-0.9,0.4-0.9,0.9s0.4,0.9,0.9,0.9h2.4c0.2,0,0.3,0.1,0.3,0.3v20.2
+ h-2.6c-0.5,0-0.9,0.4-0.9,0.9s0.4,0.9,0.9,0.9h7.1c0.5,0,0.9-0.4,0.9-0.9S30.1,39.8,29.6,39.8z"/>
+</g>
+</svg>
diff --git a/packages/tooltip/src/info-tooltip.js b/packages/tooltip/src/info-tooltip.js
index d3324301..1d7ee19c 100644
--- a/packages/tooltip/src/info-tooltip.js
+++ b/packages/tooltip/src/info-tooltip.js
@@ -5,6 +5,7 @@ import * as commonStyles from '@dbp-toolkit/common/styles';
import DBPLitElement from '@dbp-toolkit/common/dbp-lit-element';
import tippy from 'tippy.js';
import tippy2CSSPath from 'tippy.js/dist/tippy.css';
+import {Icon} from '@dbp-toolkit/common';
export class InfoTooltip extends ScopedElementsMixin(DBPLitElement) {
@@ -15,6 +16,12 @@ export class InfoTooltip extends ScopedElementsMixin(DBPLitElement) {
this.interactive = false;
}
+ static get scopedElements() {
+ return {
+ 'dbp-icon': Icon,
+ };
+ }
+
static get properties() {
return {
...super.properties,
@@ -44,9 +51,6 @@ export class InfoTooltip extends ScopedElementsMixin(DBPLitElement) {
.info-icon {
display: inline;
- opacity: 0.7;
- top: 2px;
- position: relative;
}
a {
@@ -67,12 +71,7 @@ export class InfoTooltip extends ScopedElementsMixin(DBPLitElement) {
return html`
<link rel="stylesheet" href="${tippy2CSS}">
<div class="info-icon">
- <!-- https://icons.getbootstrap.com/icons/info-circle/ -->
- <svg id="info-tooltip-icon"
- xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
- <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
- <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
- </svg>
+ <dbp-icon name="information-circle" id="info-tooltip-icon"></dbp-icon>
</div>
`;
--
GitLab