mirror of
https://github.com/OpenBankProject/API-Explorer-II.git
synced 2026-02-06 10:47:04 +00:00
Merge pull request #130 from nemozak1/develop
fix glossary, 'more' button and message docs
This commit is contained in:
Simon Redfern
GitHub
commit
2d8ee2b9eb
@ -33,17 +33,13 @@ import { useRoute } from 'vue-router';
|
||||
import { SEARCH_LINKS_COLOR as searchLinksColorSetting } from '../obp/style-setting';
|
||||
|
||||
const route = useRoute()
|
||||
const activeKeys = ref([])
|
||||
const glossaryKeys = ref([])
|
||||
const alphabet = ref([])
|
||||
const activeKeys = ref<string[]>([])
|
||||
const glossaryKeys = ref<string[]>([])
|
||||
const searchLinksColor = ref(searchLinksColorSetting)
|
||||
const form = reactive({
|
||||
search: ''
|
||||
})
|
||||
|
||||
const alphabetCharCodes = Array.from(Array(26)).map((e, i) => i + 65)
|
||||
alphabet.value = alphabetCharCodes.map((x) => String.fromCharCode(x))
|
||||
|
||||
onBeforeMount(() => {
|
||||
const glossary = inject(obpGlossaryKey)!
|
||||
for (const item of glossary.glossary_items) {
|
||||
@ -60,17 +56,17 @@ onMounted(() => {
|
||||
let hash = route.hash;
|
||||
let elements = document.querySelectorAll(`a[href="${hash}"][class="glossary-router-link"]`)
|
||||
if (elements.length == 1) {
|
||||
elements[0].click()
|
||||
(elements[0] as HTMLElement).click()
|
||||
}
|
||||
})
|
||||
|
||||
const filterKeys = (keys, key) => {
|
||||
return keys.filter((title) => {
|
||||
const filterKeys = (keys: string[], key: string) => {
|
||||
return keys.filter((title: string) => {
|
||||
return title.toLowerCase().includes(key.toLowerCase())
|
||||
})
|
||||
}
|
||||
|
||||
const searchEvent = (event) => {
|
||||
const searchEvent = (event: string) => {
|
||||
if (event) {
|
||||
glossaryKeys.value = filterKeys(activeKeys.value, event).sort()
|
||||
} else {
|
||||
@ -81,52 +77,18 @@ const searchEvent = (event) => {
|
||||
|
||||
<template>
|
||||
<el-input v-model="form.search" class="w-50 m-1" placeholder="Search" :prefix-icon="Search" @input="searchEvent" />
|
||||
<div class="tabs">
|
||||
<div class="alphabet">
|
||||
<div v-for="value of alphabet" :key="value">
|
||||
<a :id="value" class="alphabet-router-link" v-bind:href="`#${value.toLowerCase()}-quick-nav`">
|
||||
<div class="alphabet-link">
|
||||
{{ value }}
|
||||
</div>
|
||||
<div class="tab-items">
|
||||
<div class="el-tabs--right">
|
||||
<div v-for="value of glossaryKeys" :key="value" class="glossary-router-tab">
|
||||
<a class="glossary-router-link" :id="`${value.charAt(0).toLowerCase()}-quick-nav`" v-bind:href="`#${value}`">
|
||||
{{ value }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-items">
|
||||
<div class="el-tabs--right">
|
||||
<div v-for="value of glossaryKeys" :key="value" class="glossary-router-tab">
|
||||
<a class="glossary-router-link" :id="`${value.charAt(0).toLowerCase()}-quick-nav`" v-bind:href="`#${value}`">
|
||||
{{ value }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.tabs {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.alphabet {
|
||||
padding: 10px 5px 5px 5px;
|
||||
min-width: 25px;
|
||||
}
|
||||
|
||||
.alphabet-link {
|
||||
padding: 5px 0px 5px 0px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.alphabet-router-link {
|
||||
font-size: 13px;
|
||||
font-family: 'Roboto';
|
||||
color: #39455f;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.glossary-router-link {
|
||||
margin-left: 15px;
|
||||
font-size: 13px;
|
||||
@ -134,11 +96,18 @@ const searchEvent = (event) => {
|
||||
text-decoration: none;
|
||||
color: #39455f;
|
||||
display: inline-block;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-word;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.glossary-router-tab {
|
||||
border-left: 2px solid var(--el-menu-border-color);
|
||||
line-height: 30px;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.glossary-router-tab:hover,
|
||||
@ -147,14 +116,15 @@ const searchEvent = (event) => {
|
||||
}
|
||||
|
||||
.glossary-router-tab:hover .glossary-router-link,
|
||||
.active-glossary-router-link,
|
||||
.alphabet-router-link:hover,
|
||||
.alphabet-link:hover .alphabet-router-link {
|
||||
.active-glossary-router-link {
|
||||
color: v-bind(searchLinksColor);
|
||||
}
|
||||
|
||||
.tab-items {
|
||||
margin-top: 10px;
|
||||
margin-right: -8px;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-word;
|
||||
max-width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -137,25 +137,31 @@ const getCurrentPath = () => {
|
||||
<a v-if="showObpApiManagerButton && hasObpApiManagerHost" v-bind:href="obpApiManagerHost" class="router-link" id="header-nav-api-manager">
|
||||
{{ $t('header.api_manager') }}
|
||||
</a>
|
||||
<span class="el-dropdown-link">
|
||||
<el-dropdown class="menu-right router-link" id="header-nav-more" @command="handleMore">
|
||||
<span class="el-dropdown-link">
|
||||
{{ $t('header.more') }}
|
||||
<el-icon class="el-icon--right">
|
||||
<arrow-down />
|
||||
</el-icon>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item v-for="value in obpApiVersions" :command="value" key="value">{{
|
||||
value
|
||||
}}</el-dropdown-item>
|
||||
<el-dropdown-item v-for="value in obpMessageDocs" :command="value" key="value">
|
||||
Message Docs for: {{ value }}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</span>
|
||||
<el-dropdown
|
||||
class="menu-right router-link"
|
||||
id="header-nav-more"
|
||||
@command="handleMore"
|
||||
trigger="hover"
|
||||
placement="bottom-end"
|
||||
:teleported="true"
|
||||
max-height="700px"
|
||||
>
|
||||
<span class="el-dropdown-link">
|
||||
{{ $t('header.more') }}
|
||||
<el-icon class="el-icon--right">
|
||||
<arrow-down />
|
||||
</el-icon>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item v-for="value in obpApiVersions" :command="value" :key="value">{{
|
||||
value
|
||||
}}</el-dropdown-item>
|
||||
<el-dropdown-item v-for="value in obpMessageDocs" :command="value" :key="value">
|
||||
Message Docs for: {{ value }}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<!--<span class="el-dropdown-link">
|
||||
<RouterLink class="router-link" id="header-nav-spaces" to="/spaces">{{
|
||||
$t('header.spaces')
|
||||
@ -251,4 +257,17 @@ a.logoff-button {
|
||||
.el-dropdown-menu__item:hover {
|
||||
color: v-bind(headerLinksHoverColor) !important;
|
||||
}
|
||||
|
||||
/* Fix dropdown menu overflow */
|
||||
.el-dropdown-menu {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Ensure dropdown trigger behaves correctly */
|
||||
#header-nav-more .el-dropdown-link {
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -127,10 +127,17 @@ const setDocs = () => {
|
||||
text-decoration: none;
|
||||
color: #39455f;
|
||||
display: inline-block;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-word;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.api-router-tab {
|
||||
border-left: 2px solid var(--el-menu-border-color);
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.api-router-tab:hover,
|
||||
@ -150,11 +157,18 @@ const setDocs = () => {
|
||||
text-decoration: none;
|
||||
color: #39455f;
|
||||
display: inline-block;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-word;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.message-docs-router-tab {
|
||||
border-left: 2px solid var(--el-menu-border-color);
|
||||
line-height: 30px;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.message-docs-router-tab:hover,
|
||||
|
||||
@ -68,12 +68,15 @@ function showDependentEndpoints(value: any) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-container class="root">
|
||||
<el-container class="message-docs-container">
|
||||
<el-aside class="search-nav" width="20%">
|
||||
<SearchNav />
|
||||
<el-scrollbar>
|
||||
<SearchNav />
|
||||
</el-scrollbar>
|
||||
</el-aside>
|
||||
<el-main>
|
||||
<el-container class="main" direction="vertical">
|
||||
<el-main class="message-docs-content">
|
||||
<el-scrollbar>
|
||||
<el-backtop :right="100" :bottom="100" />
|
||||
<div v-for="(group, key) of messageDocs" :key="key">
|
||||
<div v-for="(value, key) of group" :key="value">
|
||||
<el-divider></el-divider>
|
||||
@ -123,8 +126,7 @@ function showDependentEndpoints(value: any) {
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</el-container>
|
||||
</el-scrollbar>
|
||||
</el-main>
|
||||
</el-container>
|
||||
|
||||
@ -177,45 +179,63 @@ function showDependentEndpoints(value: any) {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.root {
|
||||
height: 100%;
|
||||
.message-docs-container {
|
||||
height: calc(100vh - 60px);
|
||||
}
|
||||
|
||||
.main {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
flex-direction: column;
|
||||
.search-nav :deep(.el-scrollbar__wrap) {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.search-nav {
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
overflow: hidden;
|
||||
.search-nav :deep(.el-scrollbar__view) {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
main {
|
||||
margin: 25px;
|
||||
.message-docs-content {
|
||||
color: #39455f;
|
||||
font-family: 'Roboto';
|
||||
padding: 0;
|
||||
}
|
||||
.message-docs-content :deep(.el-scrollbar__wrap) {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.message-docs-content :deep(.el-scrollbar__view) {
|
||||
padding: 25px;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
h2 {
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
|
||||
div {
|
||||
font-size: 14px;
|
||||
section {
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: 'Roboto';
|
||||
}
|
||||
|
||||
.content :deep(strong) {
|
||||
font-family: 'Roboto';
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #39455f;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
div {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.content :deep(strong) {
|
||||
font-family: 'Roboto';
|
||||
}
|
||||
|
||||
/* .content :deep(a) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user