Skip to content

Commit a5e5016

Browse files
mrin9mrin9
committed
added atrributes to allow custimize nav-bar
1 parent d304918 commit a5e5016

File tree

1 file changed

+54
-24
lines changed

1 file changed

+54
-24
lines changed

‎src/rapidoc.js‎

Lines changed: 54 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -29,35 +29,56 @@ export default class RapiDoc extends LitElement {
2929

3030
static get properties() {
3131
return {
32+
// Logo & Heading
33+
headingText: { type: String, attribute: 'heading-text' },
34+
logoUrl: { type: String, attribute: 'logo-url' },
35+
36+
// Spec
3237
specUrl: { type: String, attribute: 'spec-url' },
3338
specFile: { type: String, attribute: false },
39+
40+
// UI Layouts
41+
layout: { type: String },
42+
schemaStyle: { type: String, attribute: 'schema-style' },
43+
apiListStyle: { type: String, attribute: 'api-list-style' },
44+
renderStyle: { type: String, attribute: 'render-style' },
45+
defaultSchemaTab: { type: String, attribute: 'default-schema-tab' },
46+
47+
// API Server
48+
apiKeyName: { type: String, attribute: 'api-key-name' },
49+
apiKeyValue: { type: String, attribute: 'api-key-value' },
50+
apiKeyLocation: { type: String, attribute: 'api-key-location' },
51+
selectedServer: { type: String, attribute: 'default-api-server' },
3452
serverUrl: { type: String, attribute: 'server-url' },
35-
matchPaths: { type: String, attribute: 'match-paths' },
36-
headingText: { type: String, attribute: 'heading-text' },
37-
headerColor: { type: String, attribute: 'header-color' },
38-
primaryColor: { type: String, attribute: 'primary-color' },
39-
regularFont: { type: String, attribute: 'regular-font' },
40-
monoFont: { type: String, attribute: 'mono-font' },
53+
54+
// Hide/Show Sections & Enable Disable actions
4155
showHeader: { type: String, attribute: 'show-header' },
4256
showInfo: { type: String, attribute: 'show-info' },
4357
allowAuthentication: { type: String, attribute: 'allow-authentication' },
4458
allowTry: { type: String, attribute: 'allow-try' },
45-
allowServerSelection: { type: String, attribute: 'allow-server-selection' },
4659
allowSpecUrlLoad: { type: String, attribute: 'allow-spec-url-load' },
4760
allowSpecFileLoad: { type: String, attribute: 'allow-spec-file-load' },
4861
allowSearch: { type: String, attribute: 'allow-search' },
4962
allowApiListStyleSelection: { type: String, attribute: 'allow-api-list-style-selection' },
50-
layout: { type: String },
51-
schemaStyle: { type: String, attribute: 'schema-style' },
63+
allowServerSelection: { type: String, attribute: 'allow-server-selection' },
64+
65+
// Main Colors and Font
5266
theme: { type: String },
53-
logoUrl: { type: String, attribute: 'logo-url' },
54-
apiKeyName: { type: String, attribute: 'api-key-name' },
55-
apiKeyValue: { type: String, attribute: 'api-key-value' },
56-
apiKeyLocation: { type: String, attribute: 'api-key-location' },
57-
apiListStyle: { type: String, attribute: 'api-list-style' },
58-
renderStyle: { type: String, attribute: 'render-style' },
59-
defaultSchemaTab: { type: String, attribute: 'default-schema-tab' },
60-
selectedServer: { type: String, attribute: 'default-api-server' },
67+
headerColor: { type: String, attribute: 'header-color' },
68+
primaryColor: { type: String, attribute: 'primary-color' },
69+
regularFont: { type: String, attribute: 'regular-font' },
70+
monoFont: { type: String, attribute: 'mono-font' },
71+
72+
// Nav Bar Colors
73+
navBgColor: { type: String, attribute: 'nav-bg-color' },
74+
navTextColor: { type: String, attribute: 'nav-text-color' },
75+
navHoverBgColor: { type: String, attribute: 'nav-hover-bg-color' },
76+
navHoverTextColor: { type: String, attribute: 'nav-hover-text-color' },
77+
navAccentColor: { type: String, attribute: 'nav-accent-color' },
78+
79+
// Filters
80+
matchPaths: { type: String, attribute: 'match-paths' },
81+
6182
};
6283
}
6384

@@ -161,7 +182,14 @@ export default class RapiDoc extends LitElement {
161182
--header-fg:${this.headerColor ? `${ColorUtils.color.invert(this.headerColor)}` : '#ccc'};
162183
--layout:${this.layout ? `${this.layout}` : 'row'};
163184
--font-mono:${this.monoFont ? `${this.monoFont}` : 'Monaco, "Andale Mono", "Roboto Mono", Consolas'};
164-
--font-regular:${this.regularFont ? `${this.regularFont}` : 'rapidoc, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" '};
185+
--font-regular:${this.regularFont ? `${this.regularFont}` : 'rapidoc, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'};
186+
187+
--nav-bg-color:${this.navBgColor ? `${this.navBgColor}` : 'var(--bg3)'};
188+
--nav-text-color:${this.navTextColor ? `${this.navTextColor}` : 'var(--fg3)'};
189+
--nav-hover-bg-color:${this.navHoverBgColor ? `${this.navHoverBgColor}` : 'var(--hover-color)'};
190+
--nav-hover-text-color:${this.navHoverTextColor ? `${this.navHoverTextColor}` : 'var(--fg3)'};
191+
--nav-accent-color:${this.navAccentColor ? `${this.navAccentColor}` : 'var(--primary-color)'};
192+
165193
--font-size-mono:13px;
166194
--font-size-regular:14px;
167195
--font-size-small:12px;
@@ -191,12 +219,12 @@ export default class RapiDoc extends LitElement {
191219
width:0;
192220
height:100%;
193221
overflow: hidden;
194-
background-color: var(--bg3);
222+
color:var(--nav-text-color);
223+
background-color: var(--nav-bg-color);
195224
border-right: 1px solid var(--light-border-color);
196225
box-sizing:border-box;
197226
line-height: 16px;
198227
display:none;
199-
color:var(--fg3);
200228
position:relative;
201229
flex-direction:column;
202230
flex-wrap:nowrap;
@@ -226,6 +254,7 @@ export default class RapiDoc extends LitElement {
226254
227255
.nav-bar-tag {
228256
font-size: var(--font-size-regular);
257+
border-left:4px solid transparent;
229258
font-weight:bold;
230259
padding: 30px 10px 7px 10px;
231260
text-transform: capitalize;
@@ -251,13 +280,15 @@ export default class RapiDoc extends LitElement {
251280
.nav-bar-info.active,
252281
.nav-bar-path.active {
253282
font-weight:bold;
254-
border-left:4px solid var(--primary-color);
255-
background-color:var(--hover-color);
283+
border-left:4px solid var(--nav-accent-color);
284+
color:var(--nav-hover-text-color);
285+
background-color:var(--nav-hover-bg-color);
256286
}
257287
258288
.nav-bar-info:hover,
259289
.nav-bar-path:hover {
260-
background-color:var(--hover-color);
290+
color:var(--nav-hover-text-color);
291+
background-color:var(--nav-hover-bg-color);
261292
}
262293
263294
.main-content {
@@ -500,7 +531,6 @@ export default class RapiDoc extends LitElement {
500531
return true;
501532
}).map((p) => html`
502533
<div class='nav-bar-path' data-goto_container='${tag.name.replace(/\s/g, '')}' id='${p.method}${p.path.replace(/\//g, '')}' @click='${(e) => this.scrollToEl(e)}'>
503-
<span class="upper method-fg ${p.method}" style='display:inline-block; flex: 0 0 45px; font-size:10px'> ${p.method} </span>
504534
<span> ${p.summary || p.path} </span>
505535
</div>`)}
506536
`)}

0 commit comments

Comments
 (0)