Rust implementation of NextGraph, a Decentralized and local-first web 3.0 ecosystem
https://nextgraph.org
byzantine-fault-tolerancecrdtsdappsdecentralizede2eeeventual-consistencyjson-ldlocal-firstmarkdownocapoffline-firstp2pp2p-networkprivacy-protectionrdfrich-text-editorself-hostedsemantic-websparqlweb3collaboration
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
63 lines
1.6 KiB
63 lines
1.6 KiB
<!--
|
|
// Copyright (c) 2022-2024 Niko Bonnieure, Par le Peuple, NextGraph.org developers
|
|
// All rights reserved.
|
|
// Licensed under the Apache License, Version 2.0
|
|
// <LICENSE-APACHE2 or http://www.apache.org/licenses/LICENSE-2.0>
|
|
// or the MIT license <LICENSE-MIT or http://opensource.org/licenses/MIT>,
|
|
// at your option. All files in the project carrying such
|
|
// notice may not be copied, modified, or distributed except
|
|
// according to those terms.
|
|
-->
|
|
|
|
<!--
|
|
@component Logo
|
|
The NextGraph Logo svg with color changing between blue and gray,
|
|
depending on connection status:
|
|
- connected: blue
|
|
- connecting: pulse between blue and gray
|
|
- disconnected: gray
|
|
|
|
Provide classes using the `className` prop.
|
|
-->
|
|
|
|
<script lang="ts">
|
|
import { connection_status } from "../../store";
|
|
// @ts-ignore
|
|
import Logo from "../assets/nextgraph.svg?component";
|
|
|
|
export let className: string = "";
|
|
|
|
// Color is adjusted to connection status.
|
|
let connection_status_class = ""; // Default is blue.
|
|
if ($connection_status === "connecting") {
|
|
connection_status_class = "logo-pulse";
|
|
} else if ($connection_status === "disconnected") {
|
|
connection_status_class = "logo-gray";
|
|
}
|
|
</script>
|
|
|
|
<Logo class={`${className} ${connection_status_class}`} />
|
|
|
|
<style>
|
|
@keyframes pulse-logo-color {
|
|
0%,
|
|
100% {
|
|
stroke: rgb(73, 114, 165); /* Default color */
|
|
fill: rgb(73, 114, 165);
|
|
}
|
|
50% {
|
|
stroke: #888; /* Mid-transition color */
|
|
fill: #888;
|
|
}
|
|
}
|
|
|
|
.logo-pulse path {
|
|
animation: pulse-logo-color 2s infinite;
|
|
animation-timing-function: cubic-bezier(0.65, 0.01, 0.59, 0.83);
|
|
}
|
|
|
|
.logo-gray {
|
|
fill: #888;
|
|
stroke: #888;
|
|
}
|
|
</style>
|
|
|