Skip to content

Commit d304918

Browse files
mrin9mrin9
committed
improved styling, nav-bar-scrolling, fixed default-schema-tab attribute
1 parent 62550cc commit d304918

File tree

7 files changed

+97
-77
lines changed

7 files changed

+97
-77
lines changed

‎src/components/api-request.js‎

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -95,9 +95,7 @@ export default class ApiRequest extends LitElement {
9595
this.responseText = '';
9696
this.responseUrl = '';
9797
this.curlSyntax = '';
98-
// this.activeSchemaTab = this.defaultSchemaTab;
99-
this.activeSchemaTab = 'model';
100-
this.activeResponseTab = 'response';
98+
this.activeResponseTab = 'response'; // allowed values: response, headers, curl
10199
}
102100

103101
static get properties() {
@@ -120,8 +118,7 @@ export default class ApiRequest extends LitElement {
120118
allowTry: { type: String, attribute: 'allow-try' },
121119
renderStyle: { type: String, attribute: 'render-style' },
122120
schemaStyle: { type: String, attribute: 'schema-style' },
123-
defaultSchemaTab: { type: String, attribute: 'default-schema-tab' },
124-
activeSchemaTab: { type: String }, // internal tracking of schema-tab not exposed as a attribute
121+
activeSchemaTab: { type: String, attribute: 'active-schema-tab' },
125122
activeResponseTab: { type: String }, // internal tracking of response-tab not exposed as a attribute
126123
};
127124
}
@@ -388,7 +385,6 @@ export default class ApiRequest extends LitElement {
388385
}
389386
mimeReqCount++;
390387
}
391-
392388
return html`
393389
<div class="table-title top-gap ${isFormDataPresent ? 'form_data' : 'body_data'} ">
394390
${isFormDataPresent ? 'FORM' : 'BODY'} DATA ${this.request_body.required ? '(required)' : ''}
@@ -399,14 +395,8 @@ export default class ApiRequest extends LitElement {
399395
: html`
400396
<div class="tab-panel col" style="border-width:0 0 1px 0;">
401397
<div class="tab-buttons row" @click="${(e) => { this.activeSchemaTab = e.target.dataset.tab; }}">
402-
${this.defaultSchemaTab === 'model'
403-
? html`
404-
<button class="tab-btn ${this.activeSchemaTab === 'model' ? 'active' : ''}" data-tab = 'model' >MODEL</button>
405-
<button class="tab-btn ${this.activeSchemaTab === 'example' ? 'active' : ''}" data-tab = 'example'>EXAMPLE </button>`
406-
: html`
407-
<button class="tab-btn ${this.activeSchemaTab === 'example' ? 'active' : ''}" data-tab = 'example' >EXAMPLE </button>
408-
<button class="tab-btn ${this.activeSchemaTab === 'model' ? 'active' : ''}" data-tab = 'model' >MODEL</button>`
409-
}
398+
<button class="tab-btn ${this.activeSchemaTab === 'model' ? 'active' : ''}" data-tab = 'model' >MODEL</button>
399+
<button class="tab-btn ${this.activeSchemaTab === 'example' ? 'active' : ''}" data-tab = 'example'>EXAMPLE </button>
410400
<div style="flex:1"> </div>
411401
<div style="color:var(--light-fg); align-self:center; font-size:var(--font-size-small); margin-top:8px;">
412402
${mimeReqCount === 1

‎src/components/api-response.js‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ export default class ApiResponse extends LitElement {
1616
this.selectedStatus = '';
1717
this.headersForEachRespStatus = {};
1818
this.mimeResponsesForEachStatus = {};
19-
// this.activeSchemaTab = this.defaultSchemaTab === 'model' ? 'model' : 'example';
2019
this.activeSchemaTab = 'model';
2120
}
2221

@@ -59,7 +58,9 @@ export default class ApiResponse extends LitElement {
5958
}
6059
.read-mode{
6160
padding-top:24px;
62-
border-top: 1px dotted var(--border-color);
61+
margin-top:12px;
62+
border-top: 1px dashed var(--border-color);
63+
6364
}
6465
</style>
6566
<div class="col regular-font response-panel ${this.renderStyle === 'read' ? 'read-mode' : 'view-mode'}">
@@ -77,10 +78,9 @@ export default class ApiResponse extends LitElement {
7778
parser: { type: Object },
7879
schemaStyle: { type: String, attribute: 'schema-style' },
7980
renderStyle: { type: String, attribute: 'render-style' },
80-
defaultSchemaTab: { type: String, attribute: 'default-schema-tab' },
8181
selectedStatus: { type: String },
8282
selectedMimeType: { type: String },
83-
activeSchemaTab: { type: String },
83+
activeSchemaTab: { type: String, attribute: 'active-schema-tab' },
8484
};
8585
}
8686

@@ -152,14 +152,8 @@ export default class ApiResponse extends LitElement {
152152
: html`
153153
<div class="tab-panel col">
154154
<div class="tab-buttons row" >
155-
${this.defaultSchemaTab === 'model'
156-
? html`
157-
<button class="tab-btn ${this.activeSchemaTab === 'model' ? 'active' : ''}" data-tab = 'model' @click="${(e) => { this.activeSchemaTab = e.target.dataset.tab; }}" >MODEL</button>
158-
<button class="tab-btn ${this.activeSchemaTab === 'example' ? 'active' : ''}" data-tab = 'example' @click="${(e) => { this.activeSchemaTab = e.target.dataset.tab; }}">EXAMPLE </button>`
159-
: html`
160-
<button class="tab-btn ${this.activeSchemaTab === 'example' ? 'active' : ''}" data-tab = 'example' @click="${(e) => { this.activeSchemaTab = e.target.dataset.tab; }}" >EXAMPLE </button>
161-
<button class="tab-btn ${this.activeSchemaTab === 'model' ? 'active' : ''}" data-tab = 'model' @click="${(e) => { this.activeSchemaTab = e.target.dataset.tab; }}">MODEL</button>`
162-
}
155+
<button class="tab-btn ${this.activeSchemaTab === 'model' ? 'active' : ''}" data-tab = 'model' @click="${(e) => { this.activeSchemaTab = e.target.dataset.tab; }}" >MODEL</button>
156+
<button class="tab-btn ${this.activeSchemaTab === 'example' ? 'active' : ''}" data-tab = 'example' @click="${(e) => { this.activeSchemaTab = e.target.dataset.tab; }}">EXAMPLE </button>
163157
<div style="flex:1"></div>
164158
${Object.keys(this.mimeResponsesForEachStatus[status]).length === 1
165159
? html`<span class='small-font-size gray-text' style='align-self:center; margin-top:8px;'> ${Object.keys(this.mimeResponsesForEachStatus[status])[0]} </span>`

‎src/components/end-point.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,13 +77,15 @@ export default class EndPoint extends LitElement {
7777
selected-server = "${this.selectedServer}"
7878
.parameters = "${this.path.parameters}"
7979
.request_body = "${this.path.requestBody}"
80+
active-schema-tab = "${this.defaultSchemaTab}"
8081
allow-try = "${this.allowTry}"
8182
accept = "${this.accept}"
8283
schema-style = "${this.schemaStyle}"
8384
> </api-request>
8485
8586
<api-response
8687
class="response"
88+
active-schema-tab = "${this.defaultSchemaTab}"
8789
schema-style="${this.schemaStyle}"
8890
.responses="${this.path.responses}"
8991
> </api-response>
@@ -108,6 +110,7 @@ export default class EndPoint extends LitElement {
108110
allowTry: { type: String, attribute: 'allow-try' },
109111
renderStyle: { type: String, attribute: 'render-style' },
110112
schemaStyle: { type: String, attribute: 'schema-style' },
113+
defaultSchemaTab: { type: String, attribute: 'default-schema-tab' },
111114
};
112115
}
113116

‎src/components/end-points-expanded.js‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,15 @@ export default class EndPointsExpanded extends LitElement {
1212
${FontStyles}
1313
<style>
1414
.endpoint-body{
15-
border-top: 1px solid var(--light-border-color);
16-
padding:24px 8px;
15+
padding:24px 0px;
1716
}
18-
.endpoint-body:nth-child(even){
19-
background-color:var(--bg2);
17+
.divider {
18+
border-top:2px solid var(--primary-color);
19+
width:100%;
2020
}
21-
2221
@media only screen and (min-width: 768px) {
23-
.endpoint-body{
24-
border-top: 1px solid var(--light-border-color);
25-
padding:36px 48px;
22+
.endpoint-body {
23+
padding:36px 0 48px 0;
2624
}
2725
}
2826
</style>
@@ -32,13 +30,14 @@ export default class EndPointsExpanded extends LitElement {
3230

3331
endpointBodyTemplate(path) {
3432
return html`
33+
<div class='divider'></div>
3534
<div class='endpoint-body anchor ${path.method}' id='${path.method}${path.path.replace(/\//g, '')}' >
3635
${html`
3736
<h1> ${path.summary || html`<span class='upper method-fg ${path.method}'> ${path.method}</span> ${path.path}`} </h1>
3837
${path.summary
3938
? html`
4039
<div class='mono-font regular-font-size' style='padding: 8px 0; color:var(--fg3)'>
41-
<span class='regular-font upper method-fg ${path.method}'>${path.method}</span>
40+
<span class='regular-font upper bold-text method-fg ${path.method}'>${path.method}</span>
4241
${path.path}
4342
</div>`
4443
: ''
@@ -52,7 +51,6 @@ export default class EndPointsExpanded extends LitElement {
5251
</div>`
5352
: ''
5453
}
55-
5654
<div class='req-resp-container'>
5755
<api-request class="request-panel"
5856
method = "${path.method}",
@@ -67,17 +65,18 @@ export default class EndPointsExpanded extends LitElement {
6765
accept = "${this.accept}"
6866
render-style="${this.renderStyle}"
6967
schema-style = "${this.schemaStyle}"
70-
default-schema-tab = "${this.defaultSchemaTab}"
68+
active-schema-tab = "${this.defaultSchemaTab}"
7169
> </api-request>
7270
<api-response
7371
class = 'response-panel'
7472
schema-style="${this.schemaStyle}"
7573
render-style="${this.renderStyle}"
76-
default-schema-tab = "${this.defaultSchemaTab}"
74+
active-schema-tab = "${this.defaultSchemaTab}"
7775
.responses="${path.responses}"
7876
> </api-response>
7977
</div>
80-
</div>`;
78+
</div>
79+
`;
8180
}
8281
/* eslint-enable indent */
8382

‎src/components/schema-tree.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,9 +74,9 @@ export default class SchemaTree extends LitElement {
7474
.inside-bracket.array {
7575
border-left: 1px dotted var(--border-color);
7676
}
77-
.inside-bracket.xxx-of{
77+
.inside-bracket.xxx-of {
7878
padding:5px 0px;
79-
border-style: solid;
79+
border-style: dotted;
8080
border-width: 0 0 1px 0;
8181
border-color:var(--primary-color);
8282
}

0 commit comments

Comments
 (0)