Skip to content

Commit e3f425b

Browse files
mrin9mrin9
committed
implemented static css styling
1 parent 4b330b4 commit e3f425b

18 files changed

+747
-742
lines changed

‎src/components/api-request.js‎

Lines changed: 75 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { LitElement, html } from 'lit-element';
1+
import { LitElement, html, css } from 'lit-element';
22
import marked from 'marked';
33
import Prism from 'prismjs';
44

@@ -59,82 +59,86 @@ export default class ApiRequest extends LitElement {
5959
};
6060
}
6161

62-
render() {
63-
return html`
64-
${TableStyles}
65-
${InputStyles}
66-
${FontStyles}
67-
${FlexStyles}
68-
${BorderStyles}
69-
${TabStyles}
70-
${PrismStyles}
71-
<style>
72-
.read-mode{
73-
margin-top:24px;
74-
}
75-
.param-name,
76-
.param-type{
77-
margin: 1px 0;
78-
text-align: right;
79-
line-height: 12px;
80-
}
81-
.param-name{
82-
color: var(--fg);
83-
font-family: var(--font-mono);
84-
}
85-
.param-type{
86-
color: var(--light-fg);
87-
font-family: var(--font-regular);
88-
}
89-
.param-constraint{
90-
min-width:100px;
91-
}
92-
.param-constraint:empty{
93-
display:none;
94-
}
95-
.top-gap{margin-top:24px;}
62+
static get styles() {
63+
return [
64+
TableStyles,
65+
InputStyles,
66+
FontStyles,
67+
FlexStyles,
68+
BorderStyles,
69+
TabStyles,
70+
PrismStyles,
71+
css`
72+
.read-mode{
73+
margin-top:24px;
74+
}
75+
.param-name,
76+
.param-type{
77+
margin: 1px 0;
78+
text-align: right;
79+
line-height: 12px;
80+
}
81+
.param-name{
82+
color: var(--fg);
83+
font-family: var(--font-mono);
84+
}
85+
.param-type{
86+
color: var(--light-fg);
87+
font-family: var(--font-regular);
88+
}
89+
.param-constraint{
90+
min-width:100px;
91+
}
92+
.param-constraint:empty{
93+
display:none;
94+
}
95+
.top-gap{margin-top:24px;}
9696
97-
.textarea {
98-
min-height:220px;
99-
padding:5px;
100-
resize:vertical;
101-
font-family:var(--font-mono);
102-
font-size:var(--font-size-small);
103-
}
104-
.response-message{
105-
font-weight:bold;
106-
text-overflow: ellipsis;
107-
}
108-
.response-message.error {
109-
color:var(--red);
110-
}
111-
.response-message.success {
112-
color:var(--blue);
113-
}
97+
.textarea {
98+
min-height:220px;
99+
padding:5px;
100+
resize:vertical;
101+
font-family:var(--font-mono);
102+
font-size:var(--font-size-small);
103+
}
104+
.response-message{
105+
font-weight:bold;
106+
text-overflow: ellipsis;
107+
}
108+
.response-message.error {
109+
color:var(--red);
110+
}
111+
.response-message.success {
112+
color:var(--blue);
113+
}
114114
115-
.file-input-container {
116-
align-items:flex-end;
117-
}
118-
.file-input-container .input-set:first-child .file-input-remove-btn{
119-
visibility:hidden;
120-
}
115+
.file-input-container {
116+
align-items:flex-end;
117+
}
118+
.file-input-container .input-set:first-child .file-input-remove-btn{
119+
visibility:hidden;
120+
}
121121
122-
.file-input-remove-btn{
123-
font-size:16px;
124-
color:var(--red);
125-
outline: none;
126-
border: none;
127-
background:none;
128-
cursor:pointer;
129-
}
122+
.file-input-remove-btn{
123+
font-size:16px;
124+
color:var(--red);
125+
outline: none;
126+
border: none;
127+
background:none;
128+
cursor:pointer;
129+
}
130130
131-
@media only screen and (min-width: 768px) {
132-
.textarea {
133-
padding:8px;
131+
@media only screen and (min-width: 768px) {
132+
.textarea {
133+
padding:8px;
134+
}
134135
}
135-
}
136+
`,
137+
];
138+
}
136139

137-
</style>
140+
render() {
141+
return html`
138142
<div class="col regular-font request-panel ${'read focused'.includes(this.renderStyle) || this.callback === 'true' ? 'read-mode' : 'view-mode'}">
139143
<div class=" ${this.callback === 'true' ? 'tiny-title' : 'req-res-title'} ">
140144
${this.callback === 'true' ? 'CALLBACK REQUEST' : 'REQUEST'}

‎src/components/api-response.js‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { LitElement, html } from 'lit-element';
1+
import { LitElement, html, css } from 'lit-element';
22
import marked from 'marked';
33
import { unsafeHTML } from 'lit-html/directives/unsafe-html';
44
import { schemaInObjectNotation, generateExample } from '@/utils/schema-utils';
@@ -35,15 +35,15 @@ export default class ApiResponse extends LitElement {
3535
};
3636
}
3737

38-
render() {
39-
return html`
40-
${FontStyles}
41-
${FlexStyles}
42-
${TableStyles}
43-
${InputStyles}
44-
${TabStyles}
45-
${BorderStyles}
46-
<style>
38+
static get styles() {
39+
return [
40+
FontStyles,
41+
FlexStyles,
42+
TabStyles,
43+
TableStyles,
44+
InputStyles,
45+
BorderStyles,
46+
css`
4747
.resp-head{
4848
vertical-align: middle;
4949
padding:16px 0 8px;
@@ -70,8 +70,12 @@ export default class ApiResponse extends LitElement {
7070
padding-top:24px;
7171
margin-top:12px;
7272
border-top: 1px dashed var(--border-color);
73-
}
74-
</style>
73+
}`,
74+
];
75+
}
76+
77+
render() {
78+
return html`
7579
<div class="col regular-font response-panel ${this.renderStyle}-mode">
7680
<div class=" ${this.callback === 'true' ? 'tiny-title' : 'req-res-title'} ">
7781
${this.callback === 'true' ? 'CALLBACK RESPONSE' : 'RESPONSE'}

‎src/components/json-tree.js‎

Lines changed: 59 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { LitElement, html } from 'lit-element';
1+
import { LitElement, html, css } from 'lit-element';
22
import { copyToClipboard } from '@/utils/common-utils';
33
import FontStyles from '@/styles/font-styles';
44
import BorderStyles from '@/styles/border-styles';
@@ -14,63 +14,67 @@ export default class JsonTree extends LitElement {
1414
};
1515
}
1616

17+
static get styles() {
18+
return [
19+
FontStyles,
20+
BorderStyles,
21+
InputStyles,
22+
css`
23+
:host{
24+
display:flex;
25+
}
26+
.json-tree {
27+
font-family: var(--font-mono);
28+
font-size: var(--font-size-small);
29+
display:inline-block;
30+
overflow:hidden;
31+
word-break: break-all;
32+
flex:1;
33+
line-height: 18px;
34+
}
35+
36+
.open-bracket{
37+
display:inline-block;
38+
padding: 0 20px 0 0;
39+
cursor:pointer;
40+
border: 1px solid transparent;
41+
border-radius:3px;
42+
}
43+
.open-bracket:hover{
44+
color:var(--primary-color);
45+
background-color:var(--hover-color);
46+
border: 1px solid var(--border-color);
47+
}
48+
.inside-bracket{
49+
padding-left:12px;
50+
border-left:1px dotted var(--border-color);
51+
}
52+
.open-bracket.collapsed + .inside-bracket,
53+
.open-bracket.collapsed + .inside-bracket + .close-bracket {
54+
display:none;
55+
}
56+
57+
.string{color:var(--green);}
58+
.number{color:var(--blue);}
59+
.null{color:var(--red);}
60+
.boolean{color:var(--purple);}
61+
.object{color:var(--fg)}
62+
.toolbar {
63+
display:flex;
64+
width:100%;
65+
padding: 2px 0;
66+
color:var(--primary-color);
67+
font-family: var(--font-regular);
68+
margin-bottom:4px;
69+
align-items: center;
70+
font-size: calc(var(--font-size-small) - 1px);
71+
}`,
72+
];
73+
}
74+
1775
/* eslint-disable indent */
1876
render() {
1977
return html`
20-
${FontStyles}
21-
${BorderStyles}
22-
${InputStyles}
23-
<style>
24-
:host{
25-
display:flex;
26-
}
27-
.json-tree {
28-
font-family: var(--font-mono);
29-
font-size: var(--font-size-small);
30-
display:inline-block;
31-
overflow:hidden;
32-
word-break: break-all;
33-
flex:1;
34-
line-height: 18px;
35-
}
36-
37-
.open-bracket{
38-
display:inline-block;
39-
padding: 0 20px 0 0;
40-
cursor:pointer;
41-
border: 1px solid transparent;
42-
border-radius:3px;
43-
}
44-
.open-bracket:hover{
45-
color:var(--primary-color);
46-
background-color:var(--hover-color);
47-
border: 1px solid var(--border-color);
48-
}
49-
.inside-bracket{
50-
padding-left:12px;
51-
border-left:1px dotted var(--border-color);
52-
}
53-
.open-bracket.collapsed + .inside-bracket,
54-
.open-bracket.collapsed + .inside-bracket + .close-bracket {
55-
display:none;
56-
}
57-
58-
.string{color:var(--green);}
59-
.number{color:var(--blue);}
60-
.null{color:var(--red);}
61-
.boolean{color:var(--purple);}
62-
.object{color:var(--fg)}
63-
.toolbar {
64-
display:flex;
65-
width:100%;
66-
padding: 2px 0;
67-
color:var(--primary-color);
68-
font-family: var(--font-regular);
69-
margin-bottom:4px;
70-
align-items: center;
71-
font-size: calc(var(--font-size-small) - 1px);
72-
}
73-
</style>
7478
<div class = "json-tree" >
7579
<div class='toolbar'>
7680
<button class="toolbar-btn" @click='${(e) => { copyToClipboard(JSON.stringify(this.data, null, 2), e); }}'> Copy </button>

‎src/components/schema-table.js‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { LitElement, html } from 'lit-element';
1+
import { LitElement, html, css } from 'lit-element';
22
import marked from 'marked';
33
import { unsafeHTML } from 'lit-html/directives/unsafe-html';
44
import FontStyles from '@/styles/font-styles';
@@ -19,12 +19,11 @@ export default class SchemaTable extends LitElement {
1919
if (!this.schemaDescriptionExpanded || !'true false'.includes(this.schemaDescriptionExpanded)) { this.schemaDescriptionExpanded = 'false'; }
2020
}
2121

22-
/* eslint-disable indent */
23-
render() {
24-
return html`
25-
${FontStyles}
26-
${SchemaStyles}
27-
<style>
22+
static get styles() {
23+
return [
24+
FontStyles,
25+
SchemaStyles,
26+
css`
2827
.table {
2928
font-size:var(--font-size-small);
3029
text-align: left;
@@ -73,9 +72,13 @@ export default class SchemaTable extends LitElement {
7372
}
7473
.tr.collapsed + .object-body {
7574
display:none;
76-
}
75+
}`,
76+
];
77+
}
7778

78-
</style>
79+
/* eslint-disable indent */
80+
render() {
81+
return html`
7982
<div class="table ${this.schemaDescriptionExpanded === 'true' ? 'expanded-descr' : 'collapsed-descr'}">
8083
<div class='toolbar'>
8184
<div style="flex:1"></div>

0 commit comments

Comments
 (0)