mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-12-21 09:51:11 +00:00
79 lines
3.1 KiB
HTML
79 lines
3.1 KiB
HTML
<div data-bind="visible: visible">
|
|
<div
|
|
class="contextual-pane-out"
|
|
data-bind="
|
|
click: cancel,
|
|
clickBubble: false"
|
|
></div>
|
|
<div class="contextual-pane" id="tablecolumnoptionspane">
|
|
<!-- Table Column Options form - Start -->
|
|
<div class="contextual-pane-in">
|
|
<form
|
|
class="paneContentContainer"
|
|
data-bind="
|
|
submit: submit"
|
|
>
|
|
<!-- Table Column Options header - Start -->
|
|
<div class="firstdivbg headerline">
|
|
Column Options
|
|
<div
|
|
class="closeImg"
|
|
role="button"
|
|
aria-label="Close pane"
|
|
tabindex="0"
|
|
data-bind="
|
|
click: cancel"
|
|
>
|
|
<img src="../../../../images/close-black.svg" title="Close" alt="Close" />
|
|
</div>
|
|
</div>
|
|
<!-- Table Column Options header - End -->
|
|
<div class="paneMainContent paneContentContainer">
|
|
<div><span>Choose the columns and the order in which you want to display them in the table.</span></div>
|
|
<div class="column-options">
|
|
<div class="columns-border">
|
|
<input class="all-select-check" type="checkbox" data-bind="checked: allSelected" />
|
|
<label
|
|
style="font-weight: 700"
|
|
id="availableColumnsLabel"
|
|
data-bind="text: availableColumnsLabel"
|
|
></label>
|
|
<span class="column-arrows-svg" data-bind="click: moveDown, enable: canMoveDown">
|
|
<img class="column-opt-arrow-Img" src="/Down.svg" alt="Move down" />
|
|
</span>
|
|
<span class="column-arrows-svg" data-bind="click: moveUp, enable: canMoveUp">
|
|
<img class="column-opt-arrow-Img" src="/Up.svg" alt="Move up" />
|
|
</span>
|
|
</div>
|
|
<div class="content">
|
|
<section>
|
|
<ul data-bind="foreach: columnOptions" aria-labelledby="availableColumnsLabel" tabindex="0">
|
|
<li
|
|
class="list-item columns-border"
|
|
data-bind="attr: { title: columnName }, click: $parent.handleClick "
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
for="columnName"
|
|
data-bind="attr: { title: columnName, 'aria-selected': (selected()? 'true': 'false') }, checked: selected"
|
|
/>
|
|
<label id="columnName" data-bind="text: columnName"></label>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row-label" data-bind="style: { visibility: anyColumnSelected() ? 'hidden': 'visible' }">
|
|
<label class="warning" role="alert" aria-atomic="true" data-bind="text: noColumnSelectedWarning"></label>
|
|
</div>
|
|
</div>
|
|
<div class="paneFooter">
|
|
<div class="leftpanel-okbut"><input type="submit" value="OK" class="btncreatecoll1" /></div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- Table Column Options form - End -->
|
|
</div>
|
|
</div>
|