Skip to content

Commit 07519b9

Browse files
mrin9mrin9
committed
fixes #742 #755 add additional css-parts for style overrides
1 parent 8f9e3c8 commit 07519b9

File tree

3 files changed

+78
-78
lines changed

3 files changed

+78
-78
lines changed

‎src/templates/endpoint-template.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,8 @@ function onExpandCollapseAll(e, action = 'expand-all') {
4646
/* eslint-disable indent */
4747
function endpointHeadTemplate(path, pathsExpanded = false) {
4848
return html`
49-
<summary @click="${(e) => { toggleExpand.call(this, path, e); }}" class='endpoint-head ${path.method} ${path.deprecated ? 'deprecated' : ''} ${pathsExpanded || path.expanded ? 'expanded' : 'collapsed'}'>
50-
<div class="method ${path.method} ${path.deprecated ? 'deprecated' : ''}"> ${path.method} </div>
49+
<summary @click="${(e) => { toggleExpand.call(this, path, e); }}" part="endpoint-head" class='endpoint-head ${path.method} ${path.deprecated ? 'deprecated' : ''} ${pathsExpanded || path.expanded ? 'expanded' : 'collapsed'}'>
50+
<div part="endpoint-head-method" class="method ${path.method} ${path.deprecated ? 'deprecated' : ''}"> ${path.method} </div>
5151
<div class="path ${path.deprecated ? 'deprecated' : ''}">
5252
${path.path}
5353
${path.isWebhook ? html`<span style="font-family: var(--font-regular); font-size: var(--); font-size: var(--font-size-small); color:var(--primary-color); margin-left: 16px"> Webhook</span>` : ''}
@@ -62,7 +62,7 @@ function endpointHeadTemplate(path, pathsExpanded = false) {
6262
${this.showSummaryWhenCollapsed
6363
? html`
6464
<div class="only-large-screen" style="min-width:60px; flex:1"></div>
65-
<div class="descr">${path.summary || path.shortSummary} </div>`
65+
<div part="endpoint-head-summary" class="descr">${path.summary || path.shortSummary} </div>`
6666
: ''
6767
}
6868
</summary>

‎src/templates/expanded-endpoint-template.js‎

Lines changed: 74 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -37,84 +37,84 @@ export function expandedEndpointBodyTemplate(path, tagName = '') {
3737
return html`
3838
${this.renderStyle === 'read' ? html`<div class='divider' part="operation-divider"></div>` : ''}
3939
<div class='expanded-endpoint-body observe-me ${path.method} ${path.deprecated ? 'deprecated' : ''} ' part="section-operation ${path.elementId}" id='${path.elementId}'>
40-
${(this.renderStyle === 'focused' && tagName !== 'General ⦂') ? html`<h3 class="upper" style="font-weight:bold"> ${tagName} </h3>` : ''}
41-
${path.deprecated ? html`<div class="bold-text red-text"> DEPRECATED </div>` : ''}
42-
${html`
43-
${path.xBadges && path.xBadges?.length > 0
44-
? html`
45-
<div style="display:flex; flex-wrap:wrap; margin-bottom: -24px; font-size: var(--font-size-small);">
46-
${path.xBadges.map((v) => (
47-
html`<span style="margin:1px; margin-right:5px; padding:1px 8px; font-weight:bold; border-radius:12px; background-color: var(--light-${v.color}, var(--input-bg)); color:var(--${v.color}); border:1px solid var(--${v.color})">${v.label}</span>`
48-
))
49-
}
50-
</div>
40+
${(this.renderStyle === 'focused' && tagName !== 'General ⦂') ? html`<h3 class="upper" style="font-weight:bold" part="section-operation-tag"> ${tagName} </h3>` : ''}
41+
${path.deprecated ? html`<div class="bold-text red-text"> DEPRECATED </div>` : ''}
42+
${html`
43+
${path.xBadges && path.xBadges?.length > 0
44+
? html`
45+
<div style="display:flex; flex-wrap:wrap; margin-bottom: -24px; font-size: var(--font-size-small);">
46+
${path.xBadges.map((v) => (
47+
html`<span style="margin:1px; margin-right:5px; padding:1px 8px; font-weight:bold; border-radius:12px; background-color: var(--light-${v.color}, var(--input-bg)); color:var(--${v.color}); border:1px solid var(--${v.color})">${v.label}</span>`
48+
))
49+
}
50+
</div>
51+
`
52+
: ''
53+
}
54+
<h2 part="section-operation-summary"> ${path.shortSummary || `${path.method.toUpperCase()} ${path.path}`}</h2>
55+
${path.isWebhook
56+
? html`<span part="section-operation-webhook style="color:var(--primary-color); font-weight:bold; font-size: var(--font-size-regular);"> WEBHOOK </span>`
57+
: html`
58+
<div class='mono-font part="section-operation-webhook-method" regular-font-size' style='text-align:left; direction:ltr; padding: 8px 0; color:var(--fg3)'>
59+
<span part="label-operation-method" class='regular-font upper method-fg bold-text ${path.method}'>${path.method}</span>
60+
<span part="label-operation-path">${path.path}</span>
61+
</div>
5162
`
52-
: ''
63+
}
64+
<slot name="${path.elementId}"></slot>`
5365
}
54-
<h2> ${path.shortSummary || `${path.method.toUpperCase()} ${path.path}`}</h2>
55-
${path.isWebhook
56-
? html`<span style="color:var(--primary-color); font-weight:bold; font-size: var(--font-size-regular);"> WEBHOOK </span>`
57-
: html`
58-
<div class='mono-font part="section-operation-url" regular-font-size' style='text-align:left; direction:ltr; padding: 8px 0; color:var(--fg3)'>
59-
<span part="label-operation-method" class='regular-font upper method-fg bold-text ${path.method}'>${path.method}</span>
60-
<span part="label-operation-path">${path.path}</span>
61-
</div>
62-
`
63-
}
64-
<slot name="${path.elementId}"></slot>`
65-
}
66-
${path.description ? html`<div class="m-markdown"> ${unsafeHTML(marked(path.description))}</div>` : ''}
67-
${pathSecurityTemplate.call(this, path.security)}
68-
${codeSampleTabPanel}
69-
<div class='expanded-req-resp-container'>
70-
<api-request
71-
class = "${this.renderStyle}-mode"
72-
style = "width:100%;"
73-
method = "${path.method}"
74-
path = "${path.path}"
75-
.security = "${path.security}"
76-
.parameters = "${path.parameters}"
77-
.request_body = "${path.requestBody}"
78-
.api_keys = "${nonEmptyApiKeys}"
79-
.servers = "${path.servers}"
80-
server-url = "${path.servers?.[0]?.url || this.selectedServer.computedUrl}"
81-
fill-request-fields-with-example = "${this.fillRequestFieldsWithExample}"
82-
use-summary-to-list-example = "${this.useSummaryToListExamples}"
83-
allow-try = "${this.allowTry}"
84-
accept = "${accept}"
85-
render-style="${this.renderStyle}"
86-
schema-style = "${this.schemaStyle}"
87-
active-schema-tab = "${this.defaultSchemaTab}"
88-
schema-expand-level = "${this.schemaExpandLevel}"
89-
schema-description-expanded = "${this.schemaDescriptionExpanded}"
90-
allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
91-
schema-hide-read-only = "${path.isWebhook ? false : this.schemaHideReadOnly}"
92-
schema-hide-write-only = "${path.isWebhook ? this.schemaHideWriteOnly : false}"
93-
fetch-credentials = "${this.fetchCredentials}"
94-
exportparts = "btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, btn-clear:btn-clear, btn-clear-resp:btn-clear-resp,
95-
file-input:file-input, textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param,
96-
anchor:anchor, anchor-param-example:anchor-param-example"
97-
> </api-request>
66+
${path.description ? html`<div class="m-markdown"> ${unsafeHTML(marked(path.description))}</div>` : ''}
67+
${pathSecurityTemplate.call(this, path.security)}
68+
${codeSampleTabPanel}
69+
<div class='expanded-req-resp-container'>
70+
<api-request
71+
class = "${this.renderStyle}-mode"
72+
style = "width:100%;"
73+
method = "${path.method}"
74+
path = "${path.path}"
75+
.security = "${path.security}"
76+
.parameters = "${path.parameters}"
77+
.request_body = "${path.requestBody}"
78+
.api_keys = "${nonEmptyApiKeys}"
79+
.servers = "${path.servers}"
80+
server-url = "${path.servers?.[0]?.url || this.selectedServer.computedUrl}"
81+
fill-request-fields-with-example = "${this.fillRequestFieldsWithExample}"
82+
use-summary-to-list-example = "${this.useSummaryToListExamples}"
83+
allow-try = "${this.allowTry}"
84+
accept = "${accept}"
85+
render-style="${this.renderStyle}"
86+
schema-style = "${this.schemaStyle}"
87+
active-schema-tab = "${this.defaultSchemaTab}"
88+
schema-expand-level = "${this.schemaExpandLevel}"
89+
schema-description-expanded = "${this.schemaDescriptionExpanded}"
90+
allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
91+
schema-hide-read-only = "${path.isWebhook ? false : this.schemaHideReadOnly}"
92+
schema-hide-write-only = "${path.isWebhook ? this.schemaHideWriteOnly : false}"
93+
fetch-credentials = "${this.fetchCredentials}"
94+
exportparts = "btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, btn-clear:btn-clear, btn-clear-resp:btn-clear-resp,
95+
file-input:file-input, textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param,
96+
anchor:anchor, anchor-param-example:anchor-param-example"
97+
> </api-request>
9898
99-
${path.callbacks ? callbackTemplate.call(this, path.callbacks) : ''}
99+
${path.callbacks ? callbackTemplate.call(this, path.callbacks) : ''}
100100
101-
<api-response
102-
class = "${this.renderStyle}-mode"
103-
style = "width:100%;"
104-
.responses = "${path.responses}"
105-
render-style = "${this.renderStyle}"
106-
schema-style = "${this.schemaStyle}"
107-
active-schema-tab = "${this.defaultSchemaTab}"
108-
schema-expand-level = "${this.schemaExpandLevel}"
109-
schema-description-expanded = "${this.schemaDescriptionExpanded}"
110-
allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
111-
schema-hide-read-only = "${path.isWebhook ? this.schemaHideReadOnly : false}"
112-
schema-hide-write-only = "${path.isWebhook ? false : this.schemaHideWriteOnly}"
113-
selected-status = "${Object.keys(path.responses || {})[0] || ''}"
114-
exportparts = "btn:btn, btn-response-status:btn-response-status, btn-selected-response-status:btn-selected-response-status, btn-fill:btn-fill, btn-copy:btn-copy"
115-
> </api-response>
101+
<api-response
102+
class = "${this.renderStyle}-mode"
103+
style = "width:100%;"
104+
.responses = "${path.responses}"
105+
render-style = "${this.renderStyle}"
106+
schema-style = "${this.schemaStyle}"
107+
active-schema-tab = "${this.defaultSchemaTab}"
108+
schema-expand-level = "${this.schemaExpandLevel}"
109+
schema-description-expanded = "${this.schemaDescriptionExpanded}"
110+
allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
111+
schema-hide-read-only = "${path.isWebhook ? this.schemaHideReadOnly : false}"
112+
schema-hide-write-only = "${path.isWebhook ? false : this.schemaHideWriteOnly}"
113+
selected-status = "${Object.keys(path.responses || {})[0] || ''}"
114+
exportparts = "btn:btn, btn-response-status:btn-response-status, btn-selected-response-status:btn-selected-response-status, btn-fill:btn-fill, btn-copy:btn-copy"
115+
> </api-response>
116+
</div>
116117
</div>
117-
</div>
118118
`;
119119
}
120120

@@ -123,7 +123,7 @@ export default function expandedEndpointTemplate() {
123123
return html`
124124
${this.resolvedSpec.tags.map((tag) => html`
125125
<section id="${tag.elementId}" part="section-tag" class="regular-font section-gap--read-mode observe-me" style="border-top:1px solid var(--primary-color);">
126-
<div class="title tag" part="label-tag-title">${tag.name}</div>
126+
<div class="title tag" part="section-tag-title label-tag-title">${tag.name}</div>
127127
<slot name="${tag.elementId}"></slot>
128128
<div class="regular-font-size">
129129
${

‎src/templates/overview-template.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export default function overviewTemplate() {
1616
class="observe-me ${this.renderStyle === 'view' ? 'section-gap' : 'section-gap--read-mode'}">
1717
${this.resolvedSpec?.info
1818
? html`
19-
<div id="api-title" part="label-overview-title" style="font-size:32px">
19+
<div id="api-title" part="section-overview-title" style="font-size:32px">
2020
${this.resolvedSpec.info.title}
2121
${!this.resolvedSpec.info.version ? '' : html`
2222
<span style = 'font-size:var(--font-size-small);font-weight:bold'>

0 commit comments

Comments
 (0)