@pb33f/cowboy-components 0.7.2 → 0.7.4

package/dist/components/changelog/changelog.d.ts

@@ -1,4 +1,6 @@
 import { LitElement, TemplateResult } from "lit";
+import './timeline.js';
+import './timeline-item.js';
 export declare class ChangelogComponent extends LitElement {
     static styles: import("lit").CSSResult[];
     apiURL: string;

package/dist/components/changelog/changelog.js

@@ -11,6 +11,8 @@ import changelogCss from "./changelog.css.js";
 import sharedCss from "../../css/shared.css.js";
 import alertsCss from "../../css/alerts.css.js";
 import { ReleaseComponent } from "./release.js";
+import './timeline.js';
+import './timeline-item.js';
 let ChangelogComponent = class ChangelogComponent extends LitElement {
     constructor() {
         super();
@@ -85,13 +87,13 @@ let ChangelogComponent = class ChangelogComponent extends LitElement {
                     selectedDetails = release;
                 }
                 items.push(html `
-                    <pb33f-timeline-item id="release_${summary.name}">
+                    <pb33f-timeline-item-ch id="release_${summary.name}">
                         <span slot="icon">${icon}</span>
                         <span slot="time" class="${milestone ? `major` : null}">${summary.publish_date}</span>
                         <div slot="content" style="width: 100%">
                           ${release}
                         </div>
-                    </pb33f-timeline-item>`);
+                    </pb33f-timeline-item-ch>`);
             }
             if (selectedDetails) {
                 setTimeout(() => {
@@ -99,24 +101,24 @@ let ChangelogComponent = class ChangelogComponent extends LitElement {
                 });
             }
             return html `
-                <pb33f-timeline>
+                <pb33f-timeline-ch>
                     ${items.map((item) => {
                 return item;
             })}
-                </pb33f-timeline>
+                </pb33f-timeline-ch>
             `;
         }
         else {
             return html `
-                <pb33f-timeline>
-                    <pb33f-timeline-item>
+                <pb33f-timeline-ch>
+                    <pb33f-timeline-item-ch>
                         <div slot="content">
                             <div class="pb33f-loader">
                                 <div class="spin"></div>
                                 fetching changelog for <em>${this.project}</em></div>
                         </div>
-                    </pb33f-timeline-item>
-                </pb33f-timeline>
+                    </pb33f-timeline-item-ch>
+                </pb33f-timeline-ch>
             `;
         }
     }

package/dist/components/changelog/timeline-item.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/changelog/timeline-item.css.js

@@ -0,0 +1,51 @@
+import { css } from "lit";
+export default css `
+    :host {
+        display: flex;
+        position: relative;
+    }
+
+    .icon {
+        width: 110px;
+        min-height: 80px;
+        position: relative;
+    }
+
+    .icon:first-child {
+        min-height: 20px;
+    }
+    .icon > .timeline {
+        width: 40px;
+        height: 100%;
+        border-right: 2px solid var(--bars-and-borders);
+        position: absolute;
+    }
+
+    .timeline-icon {
+        width: 20px;
+        height: 20px;
+        border-radius: 15px;
+        margin: 0 10px;
+        text-align: center;
+        font-size: 20px;
+        position: absolute;
+        top: 10px;
+    }
+
+    .content {
+        flex-grow: 2;
+        min-height: 50px;
+    }
+
+    .request-time {
+        font-size: 0.7em;
+        color: var(--font-color-sub2);
+        position: absolute;
+        left: 50px;
+        top: 15px;
+        display: block;
+    }
+
+
+
+`;

package/dist/components/changelog/timeline-item.d.ts

@@ -0,0 +1,7 @@
+import { LitElement } from "lit";
+export declare class TimelineItemComponent extends LitElement {
+    static styles: import("lit").CSSResult;
+    skinny: boolean;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/components/changelog/timeline-item.js

@@ -0,0 +1,51 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement, property } from "lit/decorators.js";
+import { html, LitElement } from "lit";
+import timelineItemCss from "./timeline-item.css.js";
+let TimelineItemComponent = class TimelineItemComponent extends LitElement {
+    constructor() {
+        super();
+        this.skinny = false;
+    }
+    render() {
+        if (this.skinny) {
+            return html `
+              
+                    <div class="icon skinny-icon">
+                        <div class="timeline skinny"></div>
+                        <div class="timeline-icon skinny-timeline-icon">
+                            <slot name="icon"></slot>
+                        </div>
+                    </div>
+                    <div class="content-skinny">
+                        <slot name="time" class="request-time skinny-time"></slot>
+                        <slot name="content" class="timeline-content"></slot>
+                    </div>
+          `;
+        }
+        return html `
+            <div class="icon">
+                <div class="timeline"></div>
+                <div class="timeline-icon">
+                    <slot name="icon"></slot>
+                </div>
+            </div>
+            <div class="content">
+                <slot name="time" class="request-time"></slot>
+                <slot name="content" class="timeline-content"></slot>
+            </div>`;
+    }
+};
+TimelineItemComponent.styles = timelineItemCss;
+__decorate([
+    property({ type: Boolean })
+], TimelineItemComponent.prototype, "skinny", void 0);
+TimelineItemComponent = __decorate([
+    customElement('pb33f-timeline-item-ch')
+], TimelineItemComponent);
+export { TimelineItemComponent };

package/dist/components/changelog/timeline.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/changelog/timeline.css.js

@@ -0,0 +1,44 @@
+import { css } from "lit";
+export default css `
+
+    pb33f-timeline-item {
+        width: 100%;
+        margin-bottom: 20px;
+    }
+
+    .start {
+        position: relative;
+        width: 100%;
+        height: 20px;
+    }
+
+    .ball-start {
+        width: 15px;
+        height: 15px;
+        border-radius: 10px;
+        background-color: var(--bars-and-borders);
+        position: absolute;
+        left: 33px;
+        top: 5px;
+        z-index: 10;
+    }
+
+    .ball-end {
+        width: 15px;
+        height: 15px;
+        border-radius: 10px;
+        background-color: var(--bars-and-borders);
+        position: absolute;
+        left: 33px;
+        top: 0;
+        z-index: 10;
+        margin-bottom: 20px;
+    }
+
+    .end {
+        position: relative;
+        width: 100%;
+        height: 20px;
+    }
+
+`;

package/dist/components/changelog/timeline.d.ts

@@ -0,0 +1,7 @@
+import { LitElement } from "lit";
+export declare class TimelineComponent extends LitElement {
+    static styles: import("lit").CSSResult;
+    skinny: boolean;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/components/changelog/timeline.js

@@ -0,0 +1,34 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement, property } from "lit/decorators.js";
+import { html, LitElement } from "lit";
+import timelineCss from "./timeline.css.js";
+let TimelineComponent = class TimelineComponent extends LitElement {
+    constructor() {
+        super();
+        this.skinny = false;
+    }
+    render() {
+        return html `
+            <div class="start ${this.skinny ? 'skinny' : ''}">
+                <div class="ball-start ${this.skinny ? 'skinny' : ''}"></div>
+            </div>
+            <slot></slot>
+            <div class="end ${this.skinny ? 'skinny' : ''}">
+                <div class="ball-end ${this.skinny ? 'skinny' : ''}"></div>
+            </div>
+        `;
+    }
+};
+TimelineComponent.styles = timelineCss;
+__decorate([
+    property({ type: Boolean })
+], TimelineComponent.prototype, "skinny", void 0);
+TimelineComponent = __decorate([
+    customElement('pb33f-timeline-ch')
+], TimelineComponent);
+export { TimelineComponent };

package/dist/components/the-doctor/nuke-workspace.js

@@ -34,12 +34,17 @@ let NukeWorkspaceComponent = class NukeWorkspaceComponent extends LitElement {
                 <span slot="label" style="color: var(--error-color);"><sl-icon name="radioactive"
                                                                                style="vertical-align: middle">
                 </sl-icon> Nuke workspace</span>
-                <p style="margin-top: 0; padding-top: 0">Things get messed up sometimes.</p>
+                <p style="margin-top: 0; padding-top: 0"><h3>Things get messed up sometimes.</h3></p>
 
+                <p>We keep on introducing new stuff all the time, things might get a bit messed up and you may see some 
+                errors popping up now and then.
+                </p>
+                
                 <p>
-                    To <strong>reset</strong> the workspace back to factory default, you can <strong>nuke it</strong>.
+                    If you're seeing errors, or things are not behaving correctly, or something has gone wrong. You can reset your
+                    workspace. Essentially <strong>Nuke</strong> everything, all the files, all the data.
                 </p>
-
+                
                 <hr/>
                 <pb33f-attention-box type="${AttentionType.Warning}" headerText="All changes will be lost">
                     The doctor will forget everything you have done and obliterate the workspace.

package/dist/components/the-doctor/the-doctor.css.js

@@ -383,10 +383,6 @@ export default css `
         color: var(--warn-color)
     }
     
-    .nuke-session-button {
-        font-size: 1.4rem;
-        margin: 0 10px 0 10px;
-    }
     
     .diagnose-button {
         position: absolute;
@@ -402,14 +398,6 @@ export default css `
         line-height: 18px;
     }
     
-    .nuke-session-button::part(base) {
-        padding: 0;
-    }
-
-    .nuke-session-button::part(base):hover {
-        color: var(--error-color);
-    }
-
     pb33f-credit-ticker {
         position: fixed;
         display: inline-block;

package/dist/components/the-doctor/the-doctor.js

@@ -60,6 +60,7 @@ import { TimeVortex } from "../time-vortex/time-vortex.js";
 import { TimelineService } from "../../services/timeline-service.js";
 import { DoctorSettings } from "./settings.js";
 import panelsCss from "../../css/panels.css.js";
+import nukeCss from "../../css/nuke.css";
 export const GraphBag = "pb33f-doctor-graph";
 export const PanelStateBag = "pb33f-doctor-panel-state";
 export const RolodexResponseBag = "pb33f-doctor-rolodex-response";
@@ -2323,8 +2324,7 @@ let TheDoctor = class TheDoctor extends LitElement {
                                 </sl-button>
                             </sl-tooltip>
                             <sl-tooltip content="Nuke / reset workspace" placement="top">
-                                <sl-icon-button style="${!this.importDisabled ? 'display: none' : ''}"
-                                                class="nuke-session-button" name="radioactive" @click="${() => {
+                                <sl-icon-button class="nuke-session-button" name="radioactive" @click="${() => {
             this.nukeWorkspace.show();
         }}">
                                 </sl-icon-button>
@@ -2495,7 +2495,7 @@ let TheDoctor = class TheDoctor extends LitElement {
         this.historyPanel.click();
     }
 };
-TheDoctor.styles = [theDoctorCss, linksCss, dialogCss, buttonCss, radioGroupsCss, tabsCss, formsCss, spinnerCss, tooltipCss, panelsCss];
+TheDoctor.styles = [theDoctorCss, linksCss, dialogCss, buttonCss, radioGroupsCss, tabsCss, formsCss, spinnerCss, tooltipCss, panelsCss, nukeCss];
 __decorate([
     query('#overviewPanel')
 ], TheDoctor.prototype, "overviewPanel", void 0);

package/dist/components/time-vortex/tardis-control.css.js

@@ -93,11 +93,42 @@ export default css `
     }
 
 
+    #loading-spinner {
+        padding: 5px 50px 5px 50px;
+        text-align: center;
+    }
+
+    .spinner-icon {
+        display: block;
+        margin: 20px auto 0 auto;
+        width: 200px;
+        color: var(--primary-color);
+        font-size: 6rem;
+        animation: spin 2s linear infinite;
+    }
+
+    @keyframes spin {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+
     .tardis-split-panel {
         --min: 300px;
         --max: calc(100vh - 400px);
         height: calc(100vh - 160px);
     }
-
+    .loading {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        background: var(--background-color-withopacity);
+        z-index: 10
+    }
 
 `;

package/dist/components/time-vortex/tardis-control.d.ts

@@ -15,6 +15,7 @@ export declare class TardisControl extends Colorful {
     changeGraph?: GraphResponse;
     history?: ChangeHistory;
     chartOptions?: any;
+    loading: boolean;
     changeDoughnut: DoughnutChart;
     breakingDoughnut: DoughnutChart;
     specSummary: SpecSummary | null;

package/dist/components/time-vortex/tardis-control.js

@@ -30,6 +30,7 @@ let TardisControl = class TardisControl extends Colorful {
         this.explorer.renderEqualizer = false;
         this.explorer.equalizer.renderEqualizer = false;
         this.timelineView = new TimelineView();
+        this.loading = false;
         //@ts-ignore
         this.addEventListener(ExplorerNodeClicked, this.explorerNodeClicked.bind(this));
     }
@@ -53,11 +54,8 @@ let TardisControl = class TardisControl extends Colorful {
             });
         }
     }
-    // firstUpdated() {
-    //     super.firstUpdated()
-    //     this.fetchHistory()
-    // }
     fetchHistory() {
+        this.loading = true;
         TimelineService.fetchHistory().then((history) => {
             this.history = history;
             if (history.changeData) {
@@ -73,7 +71,7 @@ let TardisControl = class TardisControl extends Colorful {
                 this.timelineView.qualityLabels = history.qualityData?.labels;
             }
             this.timelineView.requestUpdate();
-            this.requestUpdate();
+            this.loading = false;
         }).catch((e) => {
             this.dispatchEvent(new CustomEvent(AddToast, {
                 bubbles: true,
@@ -130,6 +128,18 @@ let TardisControl = class TardisControl extends Colorful {
             ${timelineItem}`;
     }
     render() {
+        const loading = html `
+            <div class="loading">
+
+                <div class="loader">
+                    <div id="loading-spinner">
+                        <sl-icon name="circle-half" class="spinner-icon"></sl-icon>
+                        <h3>Jumping across the timeline</h3>
+                    </div>
+                </div>
+
+
+            </div>`;
         if (!this.changeReport && !this.history) {
             return html `
                 <div class="pb33f-loader">
@@ -141,9 +151,11 @@ let TardisControl = class TardisControl extends Colorful {
         }
         if (!this.changeReport && this.history) {
             return html `
+                ${this.loading ? loading : ''}
                 <div class="timeline-view">
                     ${this.timelineView}
-                </div>`;
+                </div>
+            `;
         }
         let changelist = [];
         this.changeReport?.changes?.forEach(change => {
@@ -179,13 +191,14 @@ let TardisControl = class TardisControl extends Colorful {
                 </sl-split-panel>`;
         }
         return html `
-
+            ${this.loading ? loading : ''}
             <header>
                 <strong>${changelist.length}</strong> ${changelist.length > 1 ? 'changes' : 'change'} made</strong>
                 <span style="color: var(--font-color-sub1"> on
                     <sl-format-date time-zone="${userTimeZone}" date="${this.specSummary?.created}"
                                     time-zone-name="short" month="long" day="numeric" year="numeric" hour="2-digit"
-                                    minute="numeric" second="numeric"></sl-format-date> <em>(<sl-relative-time date="${this.specSummary?.created}"></sl-relative-time>)</em> <br/>
+                                    minute="numeric" second="numeric"></sl-format-date> <em>(<sl-relative-time
+                            date="${this.specSummary?.created}"></sl-relative-time>)</em> <br/>
                 </span>
             </header>
             <div class="changes-container">
@@ -236,9 +249,11 @@ let TardisControl = class TardisControl extends Colorful {
     set summary(summary) {
         this.specSummary = summary;
         if (summary.changeId) {
+            this.loading = true;
             TimelineService.fetchChange(summary.changeId)
                 .then(this.handleChange.bind(this))
                 .catch((e) => {
+                this.loading = false;
                 this.dispatchEvent(new CustomEvent(AddToast, {
                     bubbles: true,
                     composed: true,
@@ -258,6 +273,7 @@ let TardisControl = class TardisControl extends Colorful {
         this.changeReport = resp;
         this.explorer.updateGraphResponse(resp);
         this.explorer.buildGraph();
+        this.loading = false;
     }
 };
 TardisControl.styles = [specSummaryTimelineItemCss,
@@ -274,6 +290,9 @@ __decorate([
 __decorate([
     state()
 ], TardisControl.prototype, "chartOptions", void 0);
+__decorate([
+    state()
+], TardisControl.prototype, "loading", void 0);
 __decorate([
     query('pb33f-doughnut-chart#change-doughnut')
 ], TardisControl.prototype, "changeDoughnut", void 0);