diff --git a/index.d.ts b/index.d.ts
index 65e20c0a38ae00b6b84d933792061f1f680b77aa..3a51ad6d552cef9452bab4b6b54ac66cf2302059 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -1,2 +1,3 @@
declare module "*.png";
declare module "*.jpg";
+declare module "*.svg";
diff --git a/src/display/components/search_icon.svg b/src/display/components/search_icon.svg
new file mode 100644
index 0000000000000000000000000000000000000000..2fb8c6f9e6e4a8ac30152a79a9a360f050ce1276
--- /dev/null
+++ b/src/display/components/search_icon.svg
@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ width="120"
+ height="120"
+ viewBox="0 0 120 120"
+ version="1.1"
+ id="svg5"
+ inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
+ sodipodi:docname="search_icon.svg"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <sodipodi:namedview
+ id="namedview7"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:showpageshadow="2"
+ inkscape:pageopacity="0.0"
+ inkscape:pagecheckerboard="0"
+ inkscape:deskcolor="#d1d1d1"
+ inkscape:document-units="px"
+ showgrid="false"
+ inkscape:zoom="4.9320698"
+ inkscape:cx="71.977895"
+ inkscape:cy="52.107941"
+ inkscape:window-width="1920"
+ inkscape:window-height="1017"
+ inkscape:window-x="1912"
+ inkscape:window-y="-8"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="layer1" />
+ <defs
+ id="defs2">
+ <inkscape:path-effect
+ effect="fillet_chamfer"
+ id="path-effect3234"
+ is_visible="true"
+ lpeversion="1"
+ nodesatellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,4.8172043,0,1 @ F,0,0,1,0,6,0,1 @ F,0,0,1,0,0,0,1"
+ unit="px"
+ method="auto"
+ mode="F"
+ radius="2"
+ chamfer_steps="1"
+ flexible="false"
+ use_knot_distance="true"
+ apply_no_radius="true"
+ apply_with_radius="true"
+ only_selected="false"
+ hide_knots="false" />
+ </defs>
+ <g
+ inkscape:label="Ebene 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <ellipse
+ style="opacity:1;fill:none;fill-opacity:1;stroke:#000000;stroke-width:9.87419;stroke-linecap:butt;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+ id="path111"
+ cx="46.960567"
+ cy="46.803272"
+ rx="41.023472"
+ ry="40.866177" />
+ <path
+ style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+ id="rect3232"
+ width="55.890984"
+ height="8.4167461"
+ x="111.04586"
+ y="-4.606051"
+ sodipodi:type="rect"
+ d="m 111.04586,-4.606051 h 51.07378 a 4.8172043,4.8172043 45 0 1 4.8172,4.81720433 4.9475601,4.9475601 149.03946 0 1 -6,3.59954187 l -49.89098,0 z"
+ inkscape:path-effect="#path-effect3234"
+ transform="rotate(45)" />
+ </g>
+</svg>
diff --git a/src/display/components/searchbar.css b/src/display/components/searchbar.css
index 023db32d145c4e9a2b430e536cf396d843f9ca49..0ad095fb09f726423f962ec57ae0799e3c6ebf08 100644
--- a/src/display/components/searchbar.css
+++ b/src/display/components/searchbar.css
@@ -15,10 +15,20 @@
outline: none;
}
-.searchbar-icon {
+.searchbar-icon-div {
cursor: pointer;
- font-size: 30px;
opacity: 0.7;
+ width: 30px;
+ height: 30px;
+}
+
+.searchbar-icon {
+ max-width: 100%;
+ transition: all 0.5s;
+}
+
+.searchbar-icon-white {
+ filter: invert(100%);
}
.searchbar-form {
diff --git a/src/display/components/searchbar.tsx b/src/display/components/searchbar.tsx
index db79b15b8b60f8358d7214bb9de362fa8eb862b5..1bab05da5d688a2dc90731066e059417e72e8541 100644
--- a/src/display/components/searchbar.tsx
+++ b/src/display/components/searchbar.tsx
@@ -1,6 +1,7 @@
import React, { useEffect, useRef, useState } from "react";
import "./searchbar.css";
+import searchicon from "./search_icon.svg";
import { NodeData } from "../../common/graph";
interface SearchBarProps {
@@ -60,8 +61,14 @@ function SearchBar({
style={{ backgroundColor: isMinified ? "" : "white" }}
>
<div className={"searchbar"}>
- <div className={"searchbar-icon"} onClick={toggleMinified}>
- 🔍
+ <div className={"searchbar-icon-div"} onClick={toggleMinified}>
+ <img
+ className={`searchbar-icon ${
+ isMinified ? "searchbar-icon-white" : ""
+ }`}
+ src={searchicon}
+ alt={"Searchbar"}
+ />
</div>
<div></div>
<div
diff --git a/src/display/display.css b/src/display/display.css
index a06f052b1bd69e57dd9109429b81fcf7e691134b..048addba8e98154769e9a1c7fa2a8fed72aeef69 100644
--- a/src/display/display.css
+++ b/src/display/display.css
@@ -25,13 +25,19 @@
gap: 10px;
background-color: rgba(150, 150, 150, 0.35);
border-bottom-right-radius: 20px;
+ transition: all 0.5s;
}
.display-fullscreen-button {
pointer-events: all;
cursor: pointer;
- font-size: 30px;
- transform: rotate(-45deg);
- margin-top: -13px;
- color: lightgray;
+ opacity: 0.7;
+ width: 30px;
+ height: 30px;
+}
+
+.display-fullscreen-icon {
+ filter: invert(100%);
+ max-width: 100%;
+ padding: 2px;
}
\ No newline at end of file
diff --git a/src/display/display.tsx b/src/display/display.tsx
index 69f5f7b0cfca3d9c42a0d170cd52c7c1abdab0c5..13ec325f2f50e42f7e93aeecb4c175cc0bc4deb8 100644
--- a/src/display/display.tsx
+++ b/src/display/display.tsx
@@ -10,6 +10,7 @@ import { loadGraphJson } from "../common/datasets";
import NodeInfoBar from "./components/nodeinfo/nodeinfobar";
import FilterMenu from "./components/nodefilter/filtermenu";
import SearchBar from "./components/searchbar";
+import expandicon from "./expand_icon.svg";
/**
* This component manages and renders a 3d-force-graph with additional menus to navigate, filter and view information on nodes.
@@ -121,7 +122,11 @@ class Display extends React.Component<
title={"Vollbild"}
onClick={this.toggleFullscreen.bind(this)}
>
- ⟷
+ <img
+ className={"display-fullscreen-icon"}
+ src={expandicon}
+ alt={"Toggle Fullscreen"}
+ />
</div>
{this.state.graph && (
<SearchBar
diff --git a/src/display/expand_icon.svg b/src/display/expand_icon.svg
new file mode 100644
index 0000000000000000000000000000000000000000..bec2869191c0c6084d9bdc48d40686d5cda585a9
--- /dev/null
+++ b/src/display/expand_icon.svg
@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ width="120"
+ height="120"
+ viewBox="0 0 120 120"
+ version="1.1"
+ id="svg5"
+ inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
+ sodipodi:docname="expand_icon.svg"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <sodipodi:namedview
+ id="namedview7"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:showpageshadow="2"
+ inkscape:pageopacity="0.0"
+ inkscape:pagecheckerboard="0"
+ inkscape:deskcolor="#d1d1d1"
+ inkscape:document-units="px"
+ showgrid="false"
+ inkscape:zoom="4.9320698"
+ inkscape:cx="71.977895"
+ inkscape:cy="52.107941"
+ inkscape:window-width="1920"
+ inkscape:window-height="1017"
+ inkscape:window-x="1912"
+ inkscape:window-y="-8"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="layer1" />
+ <defs
+ id="defs2">
+ <inkscape:path-effect
+ effect="fillet_chamfer"
+ id="path-effect3234"
+ is_visible="true"
+ lpeversion="1"
+ nodesatellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,4.8172043,0,1 @ F,0,0,1,0,6,0,1 @ F,0,0,1,0,0,0,1"
+ unit="px"
+ method="auto"
+ mode="F"
+ radius="2"
+ chamfer_steps="1"
+ flexible="false"
+ use_knot_distance="true"
+ apply_no_radius="true"
+ apply_with_radius="true"
+ only_selected="false"
+ hide_knots="false" />
+ </defs>
+ <g
+ inkscape:label="Ebene 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <g
+ id="path3378">
+ <path
+ style="color:#000000;fill:#000000;fill-rule:evenodd;-inkscape-stroke:none"
+ d="M 109.46289,4.7929687 4.7929687,109.46289 10.902344,115.57227 115.57227,10.902344 Z"
+ id="path9185" />
+ <g
+ id="g9171">
+ <path
+ style="color:#000000;fill:#000000;stroke-linecap:round;-inkscape-stroke:none"
+ d="m 77.388672,2 a 4.3200002,4.3200002 0 0 0 -4.320313,4.3203125 4.3200002,4.3200002 0 0 0 4.320313,4.3203125 h 32.337888 v 32.335937 a 4.3200002,4.3200002 0 0 0 4.31836,4.320313 4.3200002,4.3200002 0 0 0 4.32031,-4.320313 V 2 Z"
+ id="path9179" />
+ <path
+ style="color:#000000;fill:#000000;stroke-linecap:round;-inkscape-stroke:none"
+ d="m 42.976576,118.29491 a 4.3200002,4.3200002 0 0 0 4.320039,-4.31862 4.3200002,4.3200002 0 0 0 -4.320306,-4.32031 l -32.335669,2.7e-4 5e-6,-32.335932 A 4.3200002,4.3200002 0 0 0 6.320333,73 4.3200002,4.3200002 0 0 0 2.000013,77.32032 L 2,118.29491 Z"
+ id="path9173" />
+ </g>
+ </g>
+ </g>
+</svg>