@pb33f/cowboy-components 0.7.3 → 0.7.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/changelog/changelog.d.ts +2 -0
- package/dist/components/changelog/changelog.js +10 -8
- package/dist/components/changelog/timeline-item.css.d.ts +2 -0
- package/dist/components/changelog/timeline-item.css.js +51 -0
- package/dist/components/changelog/timeline-item.d.ts +7 -0
- package/dist/components/changelog/timeline-item.js +51 -0
- package/dist/components/changelog/timeline.css.d.ts +2 -0
- package/dist/components/changelog/timeline.css.js +44 -0
- package/dist/components/changelog/timeline.d.ts +7 -0
- package/dist/components/changelog/timeline.js +34 -0
- package/dist/components/the-doctor/nuke-workspace.js +8 -3
- package/dist/components/the-doctor/the-doctor.css.js +0 -12
- package/dist/components/the-doctor/the-doctor.js +3 -3
- package/dist/cowboy-components.umd.cjs +426 -298
- package/dist/css/nuke.css.d.ts +2 -0
- package/dist/css/nuke.css.js +17 -0
- package/package.json +1 -1
|
@@ -11,6 +11,8 @@ import changelogCss from "./changelog.css.js";
|
|
|
11
11
|
import sharedCss from "../../css/shared.css.js";
|
|
12
12
|
import alertsCss from "../../css/alerts.css.js";
|
|
13
13
|
import { ReleaseComponent } from "./release.js";
|
|
14
|
+
import './timeline.js';
|
|
15
|
+
import './timeline-item.js';
|
|
14
16
|
let ChangelogComponent = class ChangelogComponent extends LitElement {
|
|
15
17
|
constructor() {
|
|
16
18
|
super();
|
|
@@ -85,13 +87,13 @@ let ChangelogComponent = class ChangelogComponent extends LitElement {
|
|
|
85
87
|
selectedDetails = release;
|
|
86
88
|
}
|
|
87
89
|
items.push(html `
|
|
88
|
-
<pb33f-timeline-item id="release_${summary.name}">
|
|
90
|
+
<pb33f-timeline-item-ch id="release_${summary.name}">
|
|
89
91
|
<span slot="icon">${icon}</span>
|
|
90
92
|
<span slot="time" class="${milestone ? `major` : null}">${summary.publish_date}</span>
|
|
91
93
|
<div slot="content" style="width: 100%">
|
|
92
94
|
${release}
|
|
93
95
|
</div>
|
|
94
|
-
</pb33f-timeline-item>`);
|
|
96
|
+
</pb33f-timeline-item-ch>`);
|
|
95
97
|
}
|
|
96
98
|
if (selectedDetails) {
|
|
97
99
|
setTimeout(() => {
|
|
@@ -99,24 +101,24 @@ let ChangelogComponent = class ChangelogComponent extends LitElement {
|
|
|
99
101
|
});
|
|
100
102
|
}
|
|
101
103
|
return html `
|
|
102
|
-
<pb33f-timeline>
|
|
104
|
+
<pb33f-timeline-ch>
|
|
103
105
|
${items.map((item) => {
|
|
104
106
|
return item;
|
|
105
107
|
})}
|
|
106
|
-
</pb33f-timeline>
|
|
108
|
+
</pb33f-timeline-ch>
|
|
107
109
|
`;
|
|
108
110
|
}
|
|
109
111
|
else {
|
|
110
112
|
return html `
|
|
111
|
-
<pb33f-timeline>
|
|
112
|
-
<pb33f-timeline-item>
|
|
113
|
+
<pb33f-timeline-ch>
|
|
114
|
+
<pb33f-timeline-item-ch>
|
|
113
115
|
<div slot="content">
|
|
114
116
|
<div class="pb33f-loader">
|
|
115
117
|
<div class="spin"></div>
|
|
116
118
|
fetching changelog for <em>${this.project}</em></div>
|
|
117
119
|
</div>
|
|
118
|
-
</pb33f-timeline-item>
|
|
119
|
-
</pb33f-timeline>
|
|
120
|
+
</pb33f-timeline-item-ch>
|
|
121
|
+
</pb33f-timeline-ch>
|
|
120
122
|
`;
|
|
121
123
|
}
|
|
122
124
|
}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { css } from "lit";
|
|
2
|
+
export default css `
|
|
3
|
+
:host {
|
|
4
|
+
display: flex;
|
|
5
|
+
position: relative;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.icon {
|
|
9
|
+
width: 110px;
|
|
10
|
+
min-height: 80px;
|
|
11
|
+
position: relative;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.icon:first-child {
|
|
15
|
+
min-height: 20px;
|
|
16
|
+
}
|
|
17
|
+
.icon > .timeline {
|
|
18
|
+
width: 40px;
|
|
19
|
+
height: 100%;
|
|
20
|
+
border-right: 2px solid var(--bars-and-borders);
|
|
21
|
+
position: absolute;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.timeline-icon {
|
|
25
|
+
width: 20px;
|
|
26
|
+
height: 20px;
|
|
27
|
+
border-radius: 15px;
|
|
28
|
+
margin: 0 10px;
|
|
29
|
+
text-align: center;
|
|
30
|
+
font-size: 20px;
|
|
31
|
+
position: absolute;
|
|
32
|
+
top: 10px;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.content {
|
|
36
|
+
flex-grow: 2;
|
|
37
|
+
min-height: 50px;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.request-time {
|
|
41
|
+
font-size: 0.7em;
|
|
42
|
+
color: var(--font-color-sub2);
|
|
43
|
+
position: absolute;
|
|
44
|
+
left: 50px;
|
|
45
|
+
top: 15px;
|
|
46
|
+
display: block;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
`;
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
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;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { customElement, property } from "lit/decorators.js";
|
|
8
|
+
import { html, LitElement } from "lit";
|
|
9
|
+
import timelineItemCss from "./timeline-item.css.js";
|
|
10
|
+
let TimelineItemComponent = class TimelineItemComponent extends LitElement {
|
|
11
|
+
constructor() {
|
|
12
|
+
super();
|
|
13
|
+
this.skinny = false;
|
|
14
|
+
}
|
|
15
|
+
render() {
|
|
16
|
+
if (this.skinny) {
|
|
17
|
+
return html `
|
|
18
|
+
|
|
19
|
+
<div class="icon skinny-icon">
|
|
20
|
+
<div class="timeline skinny"></div>
|
|
21
|
+
<div class="timeline-icon skinny-timeline-icon">
|
|
22
|
+
<slot name="icon"></slot>
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
|
25
|
+
<div class="content-skinny">
|
|
26
|
+
<slot name="time" class="request-time skinny-time"></slot>
|
|
27
|
+
<slot name="content" class="timeline-content"></slot>
|
|
28
|
+
</div>
|
|
29
|
+
`;
|
|
30
|
+
}
|
|
31
|
+
return html `
|
|
32
|
+
<div class="icon">
|
|
33
|
+
<div class="timeline"></div>
|
|
34
|
+
<div class="timeline-icon">
|
|
35
|
+
<slot name="icon"></slot>
|
|
36
|
+
</div>
|
|
37
|
+
</div>
|
|
38
|
+
<div class="content">
|
|
39
|
+
<slot name="time" class="request-time"></slot>
|
|
40
|
+
<slot name="content" class="timeline-content"></slot>
|
|
41
|
+
</div>`;
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
TimelineItemComponent.styles = timelineItemCss;
|
|
45
|
+
__decorate([
|
|
46
|
+
property({ type: Boolean })
|
|
47
|
+
], TimelineItemComponent.prototype, "skinny", void 0);
|
|
48
|
+
TimelineItemComponent = __decorate([
|
|
49
|
+
customElement('pb33f-timeline-item-ch')
|
|
50
|
+
], TimelineItemComponent);
|
|
51
|
+
export { TimelineItemComponent };
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { css } from "lit";
|
|
2
|
+
export default css `
|
|
3
|
+
|
|
4
|
+
pb33f-timeline-item {
|
|
5
|
+
width: 100%;
|
|
6
|
+
margin-bottom: 20px;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.start {
|
|
10
|
+
position: relative;
|
|
11
|
+
width: 100%;
|
|
12
|
+
height: 20px;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.ball-start {
|
|
16
|
+
width: 15px;
|
|
17
|
+
height: 15px;
|
|
18
|
+
border-radius: 10px;
|
|
19
|
+
background-color: var(--bars-and-borders);
|
|
20
|
+
position: absolute;
|
|
21
|
+
left: 33px;
|
|
22
|
+
top: 5px;
|
|
23
|
+
z-index: 10;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.ball-end {
|
|
27
|
+
width: 15px;
|
|
28
|
+
height: 15px;
|
|
29
|
+
border-radius: 10px;
|
|
30
|
+
background-color: var(--bars-and-borders);
|
|
31
|
+
position: absolute;
|
|
32
|
+
left: 33px;
|
|
33
|
+
top: 0;
|
|
34
|
+
z-index: 10;
|
|
35
|
+
margin-bottom: 20px;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.end {
|
|
39
|
+
position: relative;
|
|
40
|
+
width: 100%;
|
|
41
|
+
height: 20px;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
`;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
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;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { customElement, property } from "lit/decorators.js";
|
|
8
|
+
import { html, LitElement } from "lit";
|
|
9
|
+
import timelineCss from "./timeline.css.js";
|
|
10
|
+
let TimelineComponent = class TimelineComponent extends LitElement {
|
|
11
|
+
constructor() {
|
|
12
|
+
super();
|
|
13
|
+
this.skinny = false;
|
|
14
|
+
}
|
|
15
|
+
render() {
|
|
16
|
+
return html `
|
|
17
|
+
<div class="start ${this.skinny ? 'skinny' : ''}">
|
|
18
|
+
<div class="ball-start ${this.skinny ? 'skinny' : ''}"></div>
|
|
19
|
+
</div>
|
|
20
|
+
<slot></slot>
|
|
21
|
+
<div class="end ${this.skinny ? 'skinny' : ''}">
|
|
22
|
+
<div class="ball-end ${this.skinny ? 'skinny' : ''}"></div>
|
|
23
|
+
</div>
|
|
24
|
+
`;
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
TimelineComponent.styles = timelineCss;
|
|
28
|
+
__decorate([
|
|
29
|
+
property({ type: Boolean })
|
|
30
|
+
], TimelineComponent.prototype, "skinny", void 0);
|
|
31
|
+
TimelineComponent = __decorate([
|
|
32
|
+
customElement('pb33f-timeline-ch')
|
|
33
|
+
], TimelineComponent);
|
|
34
|
+
export { TimelineComponent };
|
|
@@ -34,12 +34,17 @@ let NukeWorkspaceComponent = class NukeWorkspaceComponent extends LitElement {
|
|
|
34
34
|
<span slot="label" style="color: var(--error-color);"><sl-icon name="radioactive"
|
|
35
35
|
style="vertical-align: middle">
|
|
36
36
|
</sl-icon> Nuke workspace</span>
|
|
37
|
-
<p style="margin-top: 0; padding-top: 0">Things get messed up sometimes.</p>
|
|
37
|
+
<p style="margin-top: 0; padding-top: 0"><h3>Things get messed up sometimes.</h3></p>
|
|
38
38
|
|
|
39
|
+
<p>We keep on introducing new stuff all the time, things might get a bit messed up and you may see some
|
|
40
|
+
errors popping up now and then.
|
|
41
|
+
</p>
|
|
42
|
+
|
|
39
43
|
<p>
|
|
40
|
-
|
|
44
|
+
If you're seeing errors, or things are not behaving correctly, or something has gone wrong. You can reset your
|
|
45
|
+
workspace. Essentially <strong>Nuke</strong> everything, all the files, all the data.
|
|
41
46
|
</p>
|
|
42
|
-
|
|
47
|
+
|
|
43
48
|
<hr/>
|
|
44
49
|
<pb33f-attention-box type="${AttentionType.Warning}" headerText="All changes will be lost">
|
|
45
50
|
The doctor will forget everything you have done and obliterate the workspace.
|
|
@@ -383,10 +383,6 @@ export default css `
|
|
|
383
383
|
color: var(--warn-color)
|
|
384
384
|
}
|
|
385
385
|
|
|
386
|
-
.nuke-session-button {
|
|
387
|
-
font-size: 1.4rem;
|
|
388
|
-
margin: 0 10px 0 10px;
|
|
389
|
-
}
|
|
390
386
|
|
|
391
387
|
.diagnose-button {
|
|
392
388
|
position: absolute;
|
|
@@ -402,14 +398,6 @@ export default css `
|
|
|
402
398
|
line-height: 18px;
|
|
403
399
|
}
|
|
404
400
|
|
|
405
|
-
.nuke-session-button::part(base) {
|
|
406
|
-
padding: 0;
|
|
407
|
-
}
|
|
408
|
-
|
|
409
|
-
.nuke-session-button::part(base):hover {
|
|
410
|
-
color: var(--error-color);
|
|
411
|
-
}
|
|
412
|
-
|
|
413
401
|
pb33f-credit-ticker {
|
|
414
402
|
position: fixed;
|
|
415
403
|
display: inline-block;
|
|
@@ -60,6 +60,7 @@ import { TimeVortex } from "../time-vortex/time-vortex.js";
|
|
|
60
60
|
import { TimelineService } from "../../services/timeline-service.js";
|
|
61
61
|
import { DoctorSettings } from "./settings.js";
|
|
62
62
|
import panelsCss from "../../css/panels.css.js";
|
|
63
|
+
import nukeCss from "../../css/nuke.css";
|
|
63
64
|
export const GraphBag = "pb33f-doctor-graph";
|
|
64
65
|
export const PanelStateBag = "pb33f-doctor-panel-state";
|
|
65
66
|
export const RolodexResponseBag = "pb33f-doctor-rolodex-response";
|
|
@@ -2323,8 +2324,7 @@ let TheDoctor = class TheDoctor extends LitElement {
|
|
|
2323
2324
|
</sl-button>
|
|
2324
2325
|
</sl-tooltip>
|
|
2325
2326
|
<sl-tooltip content="Nuke / reset workspace" placement="top">
|
|
2326
|
-
<sl-icon-button
|
|
2327
|
-
class="nuke-session-button" name="radioactive" @click="${() => {
|
|
2327
|
+
<sl-icon-button class="nuke-session-button" name="radioactive" @click="${() => {
|
|
2328
2328
|
this.nukeWorkspace.show();
|
|
2329
2329
|
}}">
|
|
2330
2330
|
</sl-icon-button>
|
|
@@ -2495,7 +2495,7 @@ let TheDoctor = class TheDoctor extends LitElement {
|
|
|
2495
2495
|
this.historyPanel.click();
|
|
2496
2496
|
}
|
|
2497
2497
|
};
|
|
2498
|
-
TheDoctor.styles = [theDoctorCss, linksCss, dialogCss, buttonCss, radioGroupsCss, tabsCss, formsCss, spinnerCss, tooltipCss, panelsCss];
|
|
2498
|
+
TheDoctor.styles = [theDoctorCss, linksCss, dialogCss, buttonCss, radioGroupsCss, tabsCss, formsCss, spinnerCss, tooltipCss, panelsCss, nukeCss];
|
|
2499
2499
|
__decorate([
|
|
2500
2500
|
query('#overviewPanel')
|
|
2501
2501
|
], TheDoctor.prototype, "overviewPanel", void 0);
|