mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-02-20 03:05:39 +00:00
Remove old panel component
This commit is contained in:
parent
92891a4878
commit
a636c70ce8
@ -20,10 +20,6 @@ describe("Component Registerer", () => {
|
||||
expect(ko.components.isRegistered("graph-style")).toBe(true);
|
||||
});
|
||||
|
||||
it("should register collapsible-panel component", () => {
|
||||
expect(ko.components.isRegistered("collapsible-panel")).toBe(true);
|
||||
});
|
||||
|
||||
it("should register json-editor component", () => {
|
||||
expect(ko.components.isRegistered("json-editor")).toBe(true);
|
||||
});
|
||||
|
@ -1,7 +1,6 @@
|
||||
import * as ko from "knockout";
|
||||
import * as PaneComponents from "./Panes/PaneComponents";
|
||||
import * as TabComponents from "./Tabs/TabComponents";
|
||||
import { CollapsiblePanelComponent } from "./Controls/CollapsiblePanel/CollapsiblePanelComponent";
|
||||
import { DiffEditorComponent } from "./Controls/DiffEditor/DiffEditorComponent";
|
||||
import { DynamicListComponent } from "./Controls/DynamicList/DynamicListComponent";
|
||||
import { EditorComponent } from "./Controls/Editor/EditorComponent";
|
||||
@ -18,7 +17,6 @@ ko.components.register("input-typeahead", new InputTypeaheadComponent());
|
||||
ko.components.register("new-vertex-form", NewVertexComponent);
|
||||
ko.components.register("error-display", new ErrorDisplayComponent());
|
||||
ko.components.register("graph-style", GraphStyleComponent);
|
||||
ko.components.register("collapsible-panel", new CollapsiblePanelComponent());
|
||||
ko.components.register("editor", new EditorComponent());
|
||||
ko.components.register("json-editor", new JsonEditorComponent());
|
||||
ko.components.register("diff-editor", new DiffEditorComponent());
|
||||
|
@ -1,56 +0,0 @@
|
||||
import * as ko from "knockout";
|
||||
import template from "./collapsible-panel-component.html";
|
||||
|
||||
/**
|
||||
* Helper class for ko component registration
|
||||
*/
|
||||
export class CollapsiblePanelComponent {
|
||||
constructor() {
|
||||
return {
|
||||
viewModel: CollapsiblePanelViewModel,
|
||||
template
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Parameters for this component
|
||||
*/
|
||||
interface CollapsiblePanelParams {
|
||||
collapsedTitle: ko.Observable<string>;
|
||||
expandedTitle: ko.Observable<string>;
|
||||
isCollapsed?: ko.Observable<boolean>;
|
||||
collapseToLeft?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Collapsible panel:
|
||||
* Contains a header with [>] button to collapse and an title ("expandedTitle").
|
||||
* Collapsing the panel:
|
||||
* - shrinks width to narrow amount
|
||||
* - hides children
|
||||
* - shows [<]
|
||||
* - shows vertical title ("collapsedTitle")
|
||||
* - the default behavior is to collapse to the right (ie, place this component on the right or use "collapseToLeft" parameter)
|
||||
*
|
||||
* How to use in your markup:
|
||||
* <collapsible-panel params="{ collapsedTitle:'Properties', expandedTitle:'Expanded properties' }">
|
||||
* <!-- add your markup here: the ko context is the same as outside of collapsible-panel (ie $data) -->
|
||||
* </collapsible-panel>
|
||||
*
|
||||
* Use the optional "isCollapsed" parameter to programmatically collapse/expand the pane from outside the component.
|
||||
* Use the optional "collapseToLeft" parameter to collapse to the left.
|
||||
*/
|
||||
class CollapsiblePanelViewModel {
|
||||
private params: CollapsiblePanelParams;
|
||||
private isCollapsed: ko.Observable<boolean>;
|
||||
|
||||
public constructor(params: CollapsiblePanelParams) {
|
||||
this.params = params;
|
||||
this.isCollapsed = params.isCollapsed || ko.observable(false);
|
||||
}
|
||||
|
||||
private toggleCollapse(): void {
|
||||
this.isCollapsed(!this.isCollapsed());
|
||||
}
|
||||
}
|
@ -1,44 +0,0 @@
|
||||
<div class="collapsiblePanel" data-bind="css: { paneCollapsed:isCollapsed() }">
|
||||
<div class="panelHeader" data-bind="visible: !isCollapsed()">
|
||||
<span
|
||||
class="collapsedIconContainer collapseExpandButton"
|
||||
data-bind="click:toggleCollapse, css: { 'pull-right':params.collapseToLeft }"
|
||||
>
|
||||
<img
|
||||
class="collapsedIcon imgVerticalAlignment"
|
||||
src="/imgarrowlefticon.svg"
|
||||
alt="Collapse"
|
||||
data-bind="css: { expanded:!isCollapsed(), iconMirror:params.collapseToLeft }"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="expandedTitle"
|
||||
data-bind="text: params.expandedTitle, css:{ iconSpacer:!params.collapseToLeft }"
|
||||
></span>
|
||||
</div>
|
||||
|
||||
<div class="collapsibleNav nav" data-bind="visible:isCollapsed">
|
||||
<ul class="nav">
|
||||
<li class="collapsedBtn collapseExpandButton">
|
||||
<span class="collapsedIconContainer" data-bind="click: toggleCollapse">
|
||||
<img
|
||||
class="collapsedIcon"
|
||||
src="/imgarrowlefticon.svg"
|
||||
data-bind="css: { expanded:!isCollapsed(), iconMirror:params.collapseToLeft }"
|
||||
alt="Expand"
|
||||
/>
|
||||
</span>
|
||||
<span class="rotatedInner" data-bind="click: toggleCollapse">
|
||||
<span data-bind="text: params.collapsedTitle"></span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="panelContent" data-bind="visible:!isCollapsed()">
|
||||
<!-- ko with:$parent -->
|
||||
<!-- ko template: { nodes: $componentTemplateNodes } -->
|
||||
<!-- /ko -->
|
||||
<!-- /ko -->
|
||||
</div>
|
||||
</div>
|
Loading…
x
Reference in New Issue
Block a user