Mercurial > code > home > repos > streamed-graph

changeset 83:b973d7f95fdf

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
bake out the stylus to plain css; add this https://ziga-petek.medium.com/using-fonts-in-web-components-6aba251ed4e5 to make fonts work
author drewp@bigasterisk.com
date Wed, 17 Nov 2021 16:42:59 -0800
parents 43e016fa302e
children 067d66a45a51
files demo/index.html src/index.ts src/style.js src/style.styl
diffstat 4 files changed, 167 insertions(+), 137 deletions(-) [+]
line wrap: on
line diff
--- a/demo/index.html	Wed Nov 17 15:37:45 2021 -0800
+++ b/demo/index.html	Wed Nov 17 16:42:59 2021 -0800
@@ -4,7 +4,11 @@
     <script type="module">
       import { StreamedGraph } from 'streamed-graph';
       </script>
+
   <body>
-    here's a streamed-graph: <streamed-graph url="http://dash:9075/graph/environment/events"></streamed-graph>
+    <style>body {background: black; color:  white; }
+
+    </style>
+    here's a streamed-graph: <streamed-graph expanded url="http://dash:9075/graph/environment/events"></streamed-graph>
   </body>
 </html>
--- a/src/index.ts	Wed Nov 17 15:37:45 2021 -0800
+++ b/src/index.ts	Wed Nov 17 16:42:59 2021 -0800
@@ -6,7 +6,7 @@
 
 // import { GraphView } from './graph_view';
 import { StreamedGraphClient } from './streamed_graph_client';
-// import style from './style.styl';
+import { style, addFontToRootPage } from './style';
 
 // export * from "./graph_queries";
 
@@ -37,6 +37,7 @@
 
   render()  {
     const expandAction = this.expanded ? '-' : '+';
+  static styles=style;
     return html`
          <div id="ui">
            <span class="expander"
@@ -56,6 +57,7 @@
 //     this.graphViewEl = (this.shadowRoot as ShadowRoot).getElementById(
 //       "graphView"
 //     ) as Element;
+    addFontToRootPage();
 
     this._onUrl(this.url); // todo: watch for changes and rebuild
     if (this.expanded) {
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/style.js	Wed Nov 17 16:42:59 2021 -0800
@@ -0,0 +1,159 @@
+import { css } from 'lit';
+
+export function addFontToRootPage() {
+  const content = `
+  @font-face {
+    font-family: 'Allerta';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/allerta/v11/TwMO-IAHRlkbx940YnYXTQ.ttf) format('truetype');
+  }`;
+
+  if (!document.getElementById('allerta-style')) {
+    var head = document.head || document.getElementsByTagName('head')[0],
+      style = document.createElement('style');
+    style.id = 'allerta-style';
+    style.type = 'text/css';
+    style.innerText = content;
+    head.appendChild(style);
+  }
+}
+
+
+export const style = css`
+:host {
+  display: flex;
+  flex-direction: column;
+  padding: 2px 0;
+}
+#ui {
+  display: inline-block;
+  width: 30em;
+}
+#ui button {
+  width: 2em;
+}
+#ui .expander {
+  display: inline-block;
+  padding: 3px;
+}
+#graphView section {
+  padding: 4px;
+}
+#graphView .spoGrid {
+  display: flex;
+  flex-direction: column;
+}
+#graphView .subject,
+#graphView .predicate {
+  display: flex;
+  align-items: baseline;
+}
+#graphView .predicate,
+#graphView .object {
+  margin-left: 5px;
+}
+#graphView .literal {
+  display: inline-block;
+  margin: 3px;
+  padding: 4px;
+}
+#graphView .literalType {
+  vertical-align: super;
+  font-size: 80%;
+}
+#graphView .resource {
+  display: inline-block;
+  margin: 2px;
+  padding: 1px 6px;
+}
+#graphView .predicate > a::before {
+  padding-right: 2px;
+  content: '━';
+  font-weight: bolder;
+  font-size: 125%;
+}
+#graphView .predicate > a::after {
+  content: '🠪';
+}
+#graphView table.typeBlock {
+  border-collapse: collapse;
+}
+#graphView table.typeBlock td {
+  white-space: nowrap;
+}
+#graphView table.typeBlock td .literal {
+  padding-top: 1px;
+  padding-bottom: 1px;
+}
+#graphView .typeBlockScroll {
+  overflow-x: auto;
+  max-width: 100%;
+}
+a {
+  color: #b1b1fd;
+  text-shadow: 1px 1px 0px rgba(4,0,255,0.58);
+  text-decoration-color: rgba(0,0,119,0.078);
+}
+body.rdfBrowsePage {
+  background: #000;
+  color: #fff;
+  font-size: 12px;
+}
+#ui {
+  border: 1px solid #808080;
+  background: #000;
+  color: #fff;
+  font-family: 'Allerta', sans-serif;
+}
+#graphView {
+  background: #000;
+  color: #fff;
+  font-family: 'Allerta', sans-serif;
+}
+#graphView section {
+  border: 1px solid #808080;
+}
+#graphView .subject {
+  border-top: 1px solid #2f2f2f;
+}
+#graphView .literal {
+  border: 1px solid #808080;
+  border-radius: 9px;
+  font-size: 115%;
+  font-family: monospace;
+}
+#graphView .subject > .node {
+  border: 2px solid #448d44;
+}
+#graphView .resource {
+  border-radius: 6px;
+  background: #add8e6;
+}
+#graphView .predicate > a {
+  color: #e49dfb;
+}
+#graphView .comment {
+  color: #008000;
+}
+#graphView table.typeBlock th {
+  border: 2px #333 outset;
+  background: #1f1f1f;
+}
+#graphView table.typeBlock td {
+  border: 2px #4a4a4a outset;
+  background: #2b2b2b;
+}
+/*
+for my pages serving rdf data, not necessarily part of browse/
+*/
+.served-resources {
+  margin-top: 4em;
+  padding-top: 1em;
+  border-top: 1px solid #808080;
+}
+.served-resources a {
+  padding-right: 2em;
+}
+  `;
\ No newline at end of file
--- a/src/style.styl	Wed Nov 17 15:37:45 2021 -0800
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,135 +0,0 @@
-@import url('https://fonts.googleapis.com/css?family=Allerta|Dosis|Jura&display=swap')
-
-:host
-  display: flex
-  flex-direction: column
-  padding: 2px 0
-
-#ui // layout
-  display: inline-block
-  width: 30em
-
-  button
-    width: 2em
-
-  .expander
-    display: inline-block
-    padding: 3px
-
-#graphView // layout
-  section
-    padding: 4px
-
-  .spoGrid
-    display: flex
-    flex-direction: column
-
-  .subject, .predicate
-    display: flex
-    align-items: baseline
-
-  .predicate, .object
-    margin-left: 5px
-
-  .literal
-    display: inline-block
-    margin: 3px
-    padding: 4px
-
-  .literalType
-    vertical-align: super
-    font-size: 80%
-
-  .resource
-    display: inline-block
-    margin: 2px
-    padding: 1px 6px
-
-  .predicate > a::before
-    padding-right: 2px
-    content: '━'
-    font-weight: bolder
-    font-size: 125%
-
-  .predicate > a::after
-    content: '🠪'
-
-  table.typeBlock
-    border-collapse: collapse
-
-  table.typeBlock td
-    white-space: nowrap
-
-  table.typeBlock td .literal
-    padding-top: 1px
-    padding-bottom: 1px
-
-  .typeBlockScroll
-    overflow-x: auto
-    max-width: 100%
-
-// ///////////////////////////////////////////////////////////////////
-a
-  color: #b1b1fd
-  text-shadow: 1px 1px 0px #0400ff94
-  text-decoration-color: #00007714
-
-body.rdfBrowsePage
-  background: black
-  color: white
-  font-size: 12px
-
-#ui // color
-  border: 1px solid gray
-  background: black
-  color: white
-  font-family: 'Allerta', sans-serif
-
-#graphView // color
-  background: black
-  color: white
-  font-family: 'Allerta', sans-serif
-
-  section
-    border: 1px solid gray
-
-  .subject
-    border-top: 1px solid #2f2f2f
-
-  .literal
-    border: 1px solid gray
-    border-radius: 9px
-    font-size: 115%
-    font-family: monospace
-
-  .subject > .node
-    border: 2px solid rgb(68, 141, 68)
-
-  .resource
-    border-radius: 6px
-    background: lightblue
-
-  .predicate > a
-    color: #e49dfb
-
-  .comment
-    color: green
-
-  table.typeBlock th
-    border: 2px #333333 outset
-    background: #1f1f1f
-
-  table.typeBlock td
-    border: 2px #4a4a4a outset
-    background: #2b2b2b
-
-/*
-for my pages serving rdf data, not necessarily part of browse/
-*/
-.served-resources
-  margin-top: 4em
-  padding-top: 1em
-  border-top: 1px solid gray
-
-.served-resources a
-  padding-right: 2em