Skip to content

Commit

Permalink
fixes #742 #755 add additional css-parts for style overrides
Browse files Browse the repository at this point in the history
  • Loading branch information
@mrin9
mrin9 committed May 25, 2022
1 parent 8f9e3c8 commit 07519b9
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 78 deletions.
6 changes: 3 additions & 3 deletions src/templates/endpoint-template.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,8 @@ function onExpandCollapseAll(e, action = 'expand-all') {
/* eslint-disable indent */
function endpointHeadTemplate(path, pathsExpanded = false) {
return html`
<summary @click="${(e) => { toggleExpand.call(this, path, e); }}" class='endpoint-head ${path.method} ${path.deprecated ? 'deprecated' : ''} ${pathsExpanded || path.expanded ? 'expanded' : 'collapsed'}'>
<div class="method ${path.method} ${path.deprecated ? 'deprecated' : ''}"> ${path.method} </div>
<summary @click="${(e) => { toggleExpand.call(this, path, e); }}" part="endpoint-head" class='endpoint-head ${path.method} ${path.deprecated ? 'deprecated' : ''} ${pathsExpanded || path.expanded ? 'expanded' : 'collapsed'}'>
<div part="endpoint-head-method" class="method ${path.method} ${path.deprecated ? 'deprecated' : ''}"> ${path.method} </div>
<div class="path ${path.deprecated ? 'deprecated' : ''}">
${path.path}
${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>` : ''}
Expand All @@ -62,7 +62,7 @@ function endpointHeadTemplate(path, pathsExpanded = false) {
${this.showSummaryWhenCollapsed
? html`
<div class="only-large-screen" style="min-width:60px; flex:1"></div>
<div class="descr">${path.summary || path.shortSummary} </div>`
<div part="endpoint-head-summary" class="descr">${path.summary || path.shortSummary} </div>`
: ''
}
</summary>
Expand Down
148 changes: 74 additions & 74 deletions src/templates/expanded-endpoint-template.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,84 +37,84 @@ export function expandedEndpointBodyTemplate(path, tagName = '') {
return html`
${this.renderStyle === 'read' ? html`<div class='divider' part="operation-divider"></div>` : ''}
<div class='expanded-endpoint-body observe-me ${path.method} ${path.deprecated ? 'deprecated' : ''} ' part="section-operation ${path.elementId}" id='${path.elementId}'>
${(this.renderStyle === 'focused' && tagName !== 'General ⦂') ? html`<h3 class="upper" style="font-weight:bold"> ${tagName} </h3>` : ''}
${path.deprecated ? html`<div class="bold-text red-text"> DEPRECATED </div>` : ''}
${html`
${path.xBadges && path.xBadges?.length > 0
? html`
<div style="display:flex; flex-wrap:wrap; margin-bottom: -24px; font-size: var(--font-size-small);">
${path.xBadges.map((v) => (
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>`
))
}
</div>
${(this.renderStyle === 'focused' && tagName !== 'General ⦂') ? html`<h3 class="upper" style="font-weight:bold" part="section-operation-tag"> ${tagName} </h3>` : ''}
${path.deprecated ? html`<div class="bold-text red-text"> DEPRECATED </div>` : ''}
${html`
${path.xBadges && path.xBadges?.length > 0
? html`
<div style="display:flex; flex-wrap:wrap; margin-bottom: -24px; font-size: var(--font-size-small);">
${path.xBadges.map((v) => (
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>`
))
}
</div>
`
: ''
}
<h2 part="section-operation-summary"> ${path.shortSummary || `${path.method.toUpperCase()} ${path.path}`}</h2>
${path.isWebhook
? html`<span part="section-operation-webhook style="color:var(--primary-color); font-weight:bold; font-size: var(--font-size-regular);"> WEBHOOK </span>`
: html`
<div class='mono-font part="section-operation-webhook-method" regular-font-size' style='text-align:left; direction:ltr; padding: 8px 0; color:var(--fg3)'>
<span part="label-operation-method" class='regular-font upper method-fg bold-text ${path.method}'>${path.method}</span>
<span part="label-operation-path">${path.path}</span>
</div>
`
: ''
}
<slot name="${path.elementId}"></slot>`
}
<h2> ${path.shortSummary || `${path.method.toUpperCase()} ${path.path}`}</h2>
${path.isWebhook
? html`<span style="color:var(--primary-color); font-weight:bold; font-size: var(--font-size-regular);"> WEBHOOK </span>`
: html`
<div class='mono-font part="section-operation-url" regular-font-size' style='text-align:left; direction:ltr; padding: 8px 0; color:var(--fg3)'>
<span part="label-operation-method" class='regular-font upper method-fg bold-text ${path.method}'>${path.method}</span>
<span part="label-operation-path">${path.path}</span>
</div>
`
}
<slot name="${path.elementId}"></slot>`
}
${path.description ? html`<div class="m-markdown"> ${unsafeHTML(marked(path.description))}</div>` : ''}
${pathSecurityTemplate.call(this, path.security)}
${codeSampleTabPanel}
<div class='expanded-req-resp-container'>
<api-request
class = "${this.renderStyle}-mode"
style = "width:100%;"
method = "${path.method}"
path = "${path.path}"
.security = "${path.security}"
.parameters = "${path.parameters}"
.request_body = "${path.requestBody}"
.api_keys = "${nonEmptyApiKeys}"
.servers = "${path.servers}"
server-url = "${path.servers?.[0]?.url || this.selectedServer.computedUrl}"
fill-request-fields-with-example = "${this.fillRequestFieldsWithExample}"
use-summary-to-list-example = "${this.useSummaryToListExamples}"
allow-try = "${this.allowTry}"
accept = "${accept}"
render-style="${this.renderStyle}"
schema-style = "${this.schemaStyle}"
active-schema-tab = "${this.defaultSchemaTab}"
schema-expand-level = "${this.schemaExpandLevel}"
schema-description-expanded = "${this.schemaDescriptionExpanded}"
allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
schema-hide-read-only = "${path.isWebhook ? false : this.schemaHideReadOnly}"
schema-hide-write-only = "${path.isWebhook ? this.schemaHideWriteOnly : false}"
fetch-credentials = "${this.fetchCredentials}"
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,
file-input:file-input, textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param,
anchor:anchor, anchor-param-example:anchor-param-example"
> </api-request>
${path.description ? html`<div class="m-markdown"> ${unsafeHTML(marked(path.description))}</div>` : ''}
${pathSecurityTemplate.call(this, path.security)}
${codeSampleTabPanel}
<div class='expanded-req-resp-container'>
<api-request
class = "${this.renderStyle}-mode"
style = "width:100%;"
method = "${path.method}"
path = "${path.path}"
.security = "${path.security}"
.parameters = "${path.parameters}"
.request_body = "${path.requestBody}"
.api_keys = "${nonEmptyApiKeys}"
.servers = "${path.servers}"
server-url = "${path.servers?.[0]?.url || this.selectedServer.computedUrl}"
fill-request-fields-with-example = "${this.fillRequestFieldsWithExample}"
use-summary-to-list-example = "${this.useSummaryToListExamples}"
allow-try = "${this.allowTry}"
accept = "${accept}"
render-style="${this.renderStyle}"
schema-style = "${this.schemaStyle}"
active-schema-tab = "${this.defaultSchemaTab}"
schema-expand-level = "${this.schemaExpandLevel}"
schema-description-expanded = "${this.schemaDescriptionExpanded}"
allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
schema-hide-read-only = "${path.isWebhook ? false : this.schemaHideReadOnly}"
schema-hide-write-only = "${path.isWebhook ? this.schemaHideWriteOnly : false}"
fetch-credentials = "${this.fetchCredentials}"
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,
file-input:file-input, textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param,
anchor:anchor, anchor-param-example:anchor-param-example"
> </api-request>
${path.callbacks ? callbackTemplate.call(this, path.callbacks) : ''}
${path.callbacks ? callbackTemplate.call(this, path.callbacks) : ''}
<api-response
class = "${this.renderStyle}-mode"
style = "width:100%;"
.responses = "${path.responses}"
render-style = "${this.renderStyle}"
schema-style = "${this.schemaStyle}"
active-schema-tab = "${this.defaultSchemaTab}"
schema-expand-level = "${this.schemaExpandLevel}"
schema-description-expanded = "${this.schemaDescriptionExpanded}"
allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
schema-hide-read-only = "${path.isWebhook ? this.schemaHideReadOnly : false}"
schema-hide-write-only = "${path.isWebhook ? false : this.schemaHideWriteOnly}"
selected-status = "${Object.keys(path.responses || {})[0] || ''}"
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"
> </api-response>
<api-response
class = "${this.renderStyle}-mode"
style = "width:100%;"
.responses = "${path.responses}"
render-style = "${this.renderStyle}"
schema-style = "${this.schemaStyle}"
active-schema-tab = "${this.defaultSchemaTab}"
schema-expand-level = "${this.schemaExpandLevel}"
schema-description-expanded = "${this.schemaDescriptionExpanded}"
allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
schema-hide-read-only = "${path.isWebhook ? this.schemaHideReadOnly : false}"
schema-hide-write-only = "${path.isWebhook ? false : this.schemaHideWriteOnly}"
selected-status = "${Object.keys(path.responses || {})[0] || ''}"
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"
> </api-response>
</div>
</div>
</div>
`;
}

Expand All @@ -123,7 +123,7 @@ export default function expandedEndpointTemplate() {
return html`
${this.resolvedSpec.tags.map((tag) => html`
<section id="${tag.elementId}" part="section-tag" class="regular-font section-gap--read-mode observe-me" style="border-top:1px solid var(--primary-color);">
<div class="title tag" part="label-tag-title">${tag.name}</div>
<div class="title tag" part="section-tag-title label-tag-title">${tag.name}</div>
<slot name="${tag.elementId}"></slot>
<div class="regular-font-size">
${
Expand Down
2 changes: 1 addition & 1 deletion src/templates/overview-template.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default function overviewTemplate() {
class="observe-me ${this.renderStyle === 'view' ? 'section-gap' : 'section-gap--read-mode'}">
${this.resolvedSpec?.info
? html`
<div id="api-title" part="label-overview-title" style="font-size:32px">
<div id="api-title" part="section-overview-title" style="font-size:32px">
${this.resolvedSpec.info.title}
${!this.resolvedSpec.info.version ? '' : html`
<span style = 'font-size:var(--font-size-small);font-weight:bold'>
Expand Down

0 comments on commit 07519b9

Please sign in to comment.