mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-05-24 17:24:55 +01:00
4c2f22c2b1
I misunderstood the purpose of a ko.foreach() loop in my changes back in #534. This re-introduces the loop.
89 lines
3.6 KiB
HTML
89 lines
3.6 KiB
HTML
<div id="content" class="flexContainer hideOverflows" data-bind="visible: openedTabs && openedTabs().length > 0">
|
|
<!-- Tabs - Start -->
|
|
<div class="nav-tabs-margin">
|
|
<ul class="nav nav-tabs level navTabHeight" id="navTabs" role="tablist">
|
|
<!-- ko foreach: openedTabs -->
|
|
<li
|
|
class="tabList"
|
|
data-bind="
|
|
attr: {
|
|
title: $data.tabPath,
|
|
'aria-selected': $data.isActive,
|
|
'aria-expanded': $data.isActive,
|
|
'aria-controls': $data.tabId
|
|
},
|
|
css:{
|
|
active: $data.isActive
|
|
},
|
|
hasFocus: $data.hasFocus,
|
|
event: { keypress: onKeyPressActivate },
|
|
click: $data.onTabClick,"
|
|
tabindex="0"
|
|
role="tab"
|
|
>
|
|
<span class="tabNavContentContainer">
|
|
<a data-toggle="tab" data-bind="attr: { href: '#' + $data.tabId }" tabindex="-1">
|
|
<div class="tab_Content">
|
|
<span class="statusIconContainer">
|
|
<div
|
|
class="errorIconContainer"
|
|
id="errorStatusIcon"
|
|
title="Click to view more details"
|
|
role="button"
|
|
data-bind="
|
|
click: onErrorDetailsClick,
|
|
event: { keypress: onErrorDetailsKeyPress },
|
|
attr: { tabindex: errorDetailsTabIndex },
|
|
css: { actionsEnabled: isActive },
|
|
visible: isExecutionError"
|
|
>
|
|
<span class="errorIcon"></span>
|
|
</div>
|
|
<img
|
|
class="loadingIcon"
|
|
title="Loading"
|
|
src="/circular_loader_black_16x16.gif"
|
|
data-bind="visible: $data.isExecuting"
|
|
alt="Loading"
|
|
/>
|
|
</span>
|
|
<span class="tabNavText" data-bind="text: $data.tabTitle"></span>
|
|
<span class="tabIconSection">
|
|
<span
|
|
aria-label="Close Tab"
|
|
role="button"
|
|
class="cancelButton"
|
|
data-bind="
|
|
click: $data.onCloseTabButtonClick,
|
|
event: { keypress: onKeyPressClose },
|
|
attr: { tabindex: $data.closeButtonTabIndex },
|
|
visible: $data.isActive() || $data.isMouseOver()"
|
|
title="Close"
|
|
>
|
|
<span class="tabIcon close-Icon" data-bind="visible: $data.isActive() || $data.isMouseOver()">
|
|
<img src="../../../images/close-black.svg" title="Close" alt="Close" />
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</a>
|
|
</span>
|
|
</li>
|
|
<!-- /ko -->
|
|
</ul>
|
|
</div>
|
|
<!-- Tabs -- End -->
|
|
|
|
<!-- Tabs Panes -- Start -->
|
|
<div class="tabPanesContainer">
|
|
<!-- ko foreach: openedTabs -->
|
|
<div class="tabs-container" data-bind="visible: $data.isActive">
|
|
<span
|
|
data-bind="class: $data.constructor.component.name, component: { name: $data.constructor.component.name, params: $data }"
|
|
></span>
|
|
</div>
|
|
<!-- /ko -->
|
|
</div>
|
|
<!-- Tabs Panes - End -->
|
|
</div>
|