light9 Changeset - 0a11698fecc4

Changeset - 0a11698fecc4

Parent rev.

Child rev.

[Not reviewed]

default

0 2 0

drewp@bigasterisk.com - 20 months ago 2023-05-30 06:37:08
drewp@bigasterisk.com

look who just read https://lit.dev/docs/components/properties/#boolean-attributes

2 files changed with 4 insertions and 3 deletions:

light9/homepage/ServiceButtonRow.ts

light9/web/ResourceDisplay.ts

0 comments (0 inline, 0 general)

light9/homepage/ServiceButtonRow.ts

➞

Show inline comments

 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 export { StatsLine } from "./StatsLine";
 @customElement("service-button-row")
 export class ServiceButtonRow extends LitElement {
   @property() name: string = "?";
   @property({ attribute: "metrics" }) hasMetrics: boolean = false;
+  @property({ type:Boolean, attribute: "metrics" }) hasMetrics: boolean = false;
   static styles = [
     css`
       :host {
         padding-bottom: 10px;
         border-bottom: 1px solid #333;
+      }
       a {
         color: #7d7dec;
+      }
       div {
         display: flex;
         justify-content: space-between;
         padding: 2px 3px;
+      }
       .left {
         display: inline-block;
         margin-right: 3px;
         flex-grow: 1;
+      }
       .window {
+      }
       .serviceGrid > td {
         border: 5px solid red;
         display: inline-block;
+      }
       .big {
         font-size: 120%;
         display: inline-block;
         padding: 10px 0;
+      }
       :host > div {
         display: inline-block;
         vertical-align: top;
+      }
       :host > div:nth-child(2) {
         width: 9em;
+      }
     `,
   ];
   render() {
     return html`
       <div>
         <div class="left"><a class="big" href="${this.name}/">${this.name}</a></div>
         <div class="window"><button @click="${this.click}">window</button></div>
         ${this.hasMetrics ? html`<div><a href="${this.name}/metrics">metrics</a></div>` : ""}
       </div>

light9/web/ResourceDisplay.ts

➞

Show inline comments

@@ @@ -31,98 +31,99 @@ export class ResourceDisplay extends Lit @@
         border-radius: 5px;
         padding: 1px;
         margin: 2px;
         background: rgb(49, 49, 49);
         display: inline-block;
         text-shadow: 1px 1px 2px black;
+      }
       .resource.minor {
         background: none;
         border: none;
+      }
       .resource a {
         color: rgb(150, 150, 255);
         padding: 1px;
         display: inline-block;
+      }
       .resource.minor a {
         text-decoration: none;
         color: rgb(155, 155, 193);
         padding: 0;
+      }
     `,
   ];
   render() {
     return html` <span class="${this.resClasses()}">
       <a href="${this.href()}" id="uri"> <!-- type icon goes here -->${this.label}</a>
     </span>`;
     // <template is="dom-if" if="{{rename}}">
     //   <button on-click="onRename">Rename</button>
     //   <paper-dialog id="renameDialog" modal on-iron-overlay-closed="onRenameClosed">
     //     <p>
     //       New label:
     //       <input id="renameTo" autofocus type="text" value="{{renameTo::input}}" on-keydown="onRenameKey" />
     //     </p>
     //     <div class="buttons">
     //       <paper-button dialog-dismiss>Cancel</paper-button>
     //       <paper-button dialog-confirm>OK</paper-button>
     //     </div>
     //   </paper-dialog>
     // </template>
     //    `;
+  }
   // callers might set this as string or pass a NamedNode.
   @property() uri?: NamedNode | string;
   @state() label: string = "";
   @property() rename: boolean = false;
   @property() minor: boolean = false;
   @property({type: Boolean}) rename: boolean = false;
   @property({type: Boolean}) minor: boolean = false;
   // @state() renameTo: String; notify: true };
   constructor() {
     super();
     getTopGraph().then((g) => {
       this.graph = g;
       this.runUriHandler();
     });
+  }
   realUri(): NamedNode {
     if (!this.uri) {
       return new NamedNode("");
+    }
     return typeof this.uri === "string" ? new NamedNode(this.uri) : this.uri;
+  }
   href() {
     if (!this.uri) {
       return "javascript:;";
+    }
     return typeof this.uri === "string" ? this.uri : this.uri.value;
+  }
   updated(changedProperties: PropertyValues) {
     if (changedProperties.has("uri")) {
       if (!this.graph) {
         return; /*too soon*/
+      }
       this.runUriHandler();
+    }
+  }
   resClasses() {
     return this.minor ? "resource minor" : "resource";
+  }
   runUriHandler() {
     this.graph.runHandler(this.onUri.bind(this), `rdisplay ${this.href()}` /*needs uniqueness?*/);
+  }
   onUri(patch?: Patch) {
     if (patch && !patch.containsAnyPreds([RDFS_LABEL])) {
       return;
+    }
     if (!this.uri) {
       this.label = "<no uri>";

0 comments (0 inline, 0 general)