From dc4defd51222d0d04cd42a499173c6e1779e1ab7 Mon Sep 17 00:00:00 2001 From: Heiko Thiel <heiko.thiel@hpi.de> Date: Mon, 3 Sep 2018 00:43:24 +0200 Subject: [PATCH 1/2] Cleanup section implementation in CesiumInspector * Headers are now using h3 elements instead of being just text in a div * Full header is now clickable to collapse/expand section instead of just +/- * +/- symbols before section title are now added via css instead of js, so they can be replaced by designer * Title and content of a section are now grouped together into a container --- .../CesiumInspector/CesiumInspector.css | 23 +++++-- .../CesiumInspector/CesiumInspector.js | 62 +++++++------------ .../CesiumInspectorViewModel.js | 27 -------- 3 files changed, 39 insertions(+), 73 deletions(-) diff --git a/Source/Widgets/CesiumInspector/CesiumInspector.css b/Source/Widgets/CesiumInspector/CesiumInspector.css index 89b8b66ee65e..9ed1a45ea78d 100644 --- a/Source/Widgets/CesiumInspector/CesiumInspector.css +++ b/Source/Widgets/CesiumInspector/CesiumInspector.css @@ -38,10 +38,12 @@ height: 17px; } +.cesium-cesiumInspector-sectionContent, .cesium-cesiumInspector-show { max-height: 500px; } +.cesium-cesiumInspector-section-collapsed .cesium-cesiumInspector-sectionContent, .cesium-cesiumInspector-hide { max-height: 0; padding: 0 !important; @@ -92,6 +94,9 @@ .cesium-cesiumInspector-sectionHeader { font-weight: bold; + font-size: 10pt; + margin: 0; + cursor: pointer; } .cesium-cesiumInspector-pickSection { @@ -101,16 +106,11 @@ margin-bottom: 5px; } -.cesium-cesiumInspector-section { +.cesium-cesiumInspector-sectionContent { margin-bottom: 10px; transition: max-height 0.25s; } -.cesium-cesiumInspector-toggleSwitch { - padding: 3px; - cursor: pointer; -} - .cesium-cesiumInspector-tileText { padding-bottom: 10px; border-bottom: 1px solid #aaa; @@ -119,3 +119,14 @@ .cesium-cesiumInspector-relativeText { padding-top: 10px; } + +.cesium-cesiumInspector-sectionHeader::before { + margin-right: 5px; + content: '+'; + width: 1ch; + display: inline-block; +} + +.cesium-cesiumInspector-section-collapsed .cesium-cesiumInspector-sectionHeader::before { + content: '-'; +} \ No newline at end of file diff --git a/Source/Widgets/CesiumInspector/CesiumInspector.js b/Source/Widgets/CesiumInspector/CesiumInspector.js index 8072c3696e2a..73a2409e1b0b 100644 --- a/Source/Widgets/CesiumInspector/CesiumInspector.js +++ b/Source/Widgets/CesiumInspector/CesiumInspector.js @@ -52,6 +52,24 @@ define([ return checkboxContainer; } + function addSection(headerText, sectionVisibleDataBinding, sectionVisibilityToogleClickEvent) { + var section = document.createElement('div'); + section.className = 'cesium-cesiumInspector-section'; + section.setAttribute('data-bind', 'css: { "cesium-cesiumInspector-section-collapsed": !' + sectionVisibleDataBinding + ' }'); + panel.appendChild(section); + + var sectionHeader = document.createElement('h3'); + sectionHeader.className = 'cesium-cesiumInspector-sectionHeader'; + sectionHeader.appendChild(document.createTextNode(headerText)); + sectionHeader.setAttribute('data-bind', 'click: ' + sectionVisibilityToogleClickEvent); + section.appendChild(sectionHeader); + + var sectionContent = document.createElement('div'); + sectionContent.className = 'cesium-cesiumInspector-sectionContent'; + section.appendChild(sectionContent); + return sectionContent; + } + var performanceContainer = document.createElement('div'); var viewModel = new CesiumInspectorViewModel(scene, performanceContainer); @@ -75,19 +93,7 @@ define([ element.appendChild(panel); // General - var general = document.createElement('div'); - general.className = 'cesium-cesiumInspector-sectionHeader'; - var plus = document.createElement('span'); - plus.className = 'cesium-cesiumInspector-toggleSwitch'; - plus.setAttribute('data-bind', 'click: toggleGeneral, text: generalSwitchText'); - general.appendChild(plus); - general.appendChild(document.createTextNode('General')); - panel.appendChild(general); - - var generalSection = document.createElement('div'); - generalSection.className = 'cesium-cesiumInspector-section'; - generalSection.setAttribute('data-bind', 'css: {"cesium-cesiumInspector-show" : generalVisible, "cesium-cesiumInspector-hide" : !generalVisible}'); - panel.appendChild(generalSection); + var generalSection = addSection('General', 'generalVisible', 'toggleGeneral'); var debugShowFrustums = createCheckBox('checked: frustums', 'Show Frustums'); var frustumStatistics = document.createElement('div'); @@ -142,22 +148,10 @@ define([ depthFrustum.appendChild(gPlusButton); // Primitives - var prim = document.createElement('div'); - prim.className = 'cesium-cesiumInspector-sectionHeader'; - plus = document.createElement('span'); - plus.className = 'cesium-cesiumInspector-toggleSwitch'; - plus.setAttribute('data-bind', 'click: togglePrimitives, text: primitivesSwitchText'); - prim.appendChild(plus); - prim.appendChild(document.createTextNode('Primitives')); - panel.appendChild(prim); - - var primitivesSection = document.createElement('div'); - primitivesSection.className = 'cesium-cesiumInspector-section'; - primitivesSection.setAttribute('data-bind', 'css: {"cesium-cesiumInspector-show" : primitivesVisible, "cesium-cesiumInspector-hide" : !primitivesVisible}'); - panel.appendChild(primitivesSection); + var primSection = addSection('Primitives', 'primitivesVisible', 'togglePrimitives'); var pickPrimRequired = document.createElement('div'); pickPrimRequired.className = 'cesium-cesiumInspector-pickSection'; - primitivesSection.appendChild(pickPrimRequired); + primSection.appendChild(pickPrimRequired); var pickPrimitiveButton = document.createElement('input'); pickPrimitiveButton.type = 'button'; @@ -176,19 +170,7 @@ define([ pickPrimRequired.appendChild(this._primitiveOnly); // Terrain - var terrain = document.createElement('div'); - terrain.className = 'cesium-cesiumInspector-sectionHeader'; - plus = document.createElement('span'); - plus.className = 'cesium-cesiumInspector-toggleSwitch'; - plus.setAttribute('data-bind', 'click: toggleTerrain, text: terrainSwitchText'); - terrain.appendChild(plus); - terrain.appendChild(document.createTextNode('Terrain')); - panel.appendChild(terrain); - - var terrainSection = document.createElement('div'); - terrainSection.className = 'cesium-cesiumInspector-section'; - terrainSection.setAttribute('data-bind', 'css: {"cesium-cesiumInspector-show" : terrainVisible, "cesium-cesiumInspector-hide" : !terrainVisible}'); - panel.appendChild(terrainSection); + var terrainSection = addSection('Terrain', 'terrainVisible', 'toggleTerrain'); var pickTileRequired = document.createElement('div'); pickTileRequired.className = 'cesium-cesiumInspector-pickSection'; terrainSection.appendChild(pickTileRequired); diff --git a/Source/Widgets/CesiumInspector/CesiumInspectorViewModel.js b/Source/Widgets/CesiumInspector/CesiumInspectorViewModel.js index 20c1d23a79a7..61b4cf816392 100644 --- a/Source/Widgets/CesiumInspector/CesiumInspectorViewModel.js +++ b/Source/Widgets/CesiumInspector/CesiumInspectorViewModel.js @@ -280,33 +280,6 @@ define([ */ this.depthFrustumText = ''; - /** - * Gets the text on the general section expand button. This property is computed. - * @type {String} - * @default '-' - */ - this.generalSwitchText = knockout.pureComputed(function() { - return that.generalVisible ? '-' : '+'; - }); - - /** - * Gets the text on the primitives section expand button. This property is computed. - * @type {String} - * @default '+' - */ - this.primitivesSwitchText = knockout.pureComputed(function() { - return that.primitivesVisible ? '-' : '+'; - }); - - /** - * Gets the text on the terrain section expand button. This property is computed. - * @type {String} - * @default '+' - */ - this.terrainSwitchText = knockout.pureComputed(function() { - return that.terrainVisible ? '-' : '+'; - }); - knockout.track(this, [ 'frustums', 'frustumPlanes', From 966ce165d7d62a9e9a939c82c612ad1aee9ae1a3 Mon Sep 17 00:00:00 2001 From: Heiko Thiel <heiko.thiel@hpi.de> Date: Mon, 3 Sep 2018 21:23:53 +0200 Subject: [PATCH 2/2] Fix eslint hint --- Source/Widgets/CesiumInspector/CesiumInspector.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/Source/Widgets/CesiumInspector/CesiumInspector.js b/Source/Widgets/CesiumInspector/CesiumInspector.js index 73a2409e1b0b..013acb92c4a0 100644 --- a/Source/Widgets/CesiumInspector/CesiumInspector.js +++ b/Source/Widgets/CesiumInspector/CesiumInspector.js @@ -52,7 +52,7 @@ define([ return checkboxContainer; } - function addSection(headerText, sectionVisibleDataBinding, sectionVisibilityToogleClickEvent) { + function addSection(panel, headerText, sectionVisibleDataBinding, sectionVisibilityToogleClickEvent) { var section = document.createElement('div'); section.className = 'cesium-cesiumInspector-section'; section.setAttribute('data-bind', 'css: { "cesium-cesiumInspector-section-collapsed": !' + sectionVisibleDataBinding + ' }'); @@ -93,7 +93,7 @@ define([ element.appendChild(panel); // General - var generalSection = addSection('General', 'generalVisible', 'toggleGeneral'); + var generalSection = addSection(panel, 'General', 'generalVisible', 'toggleGeneral'); var debugShowFrustums = createCheckBox('checked: frustums', 'Show Frustums'); var frustumStatistics = document.createElement('div'); @@ -148,7 +148,7 @@ define([ depthFrustum.appendChild(gPlusButton); // Primitives - var primSection = addSection('Primitives', 'primitivesVisible', 'togglePrimitives'); + var primSection = addSection(panel, 'Primitives', 'primitivesVisible', 'togglePrimitives'); var pickPrimRequired = document.createElement('div'); pickPrimRequired.className = 'cesium-cesiumInspector-pickSection'; primSection.appendChild(pickPrimRequired); @@ -170,7 +170,7 @@ define([ pickPrimRequired.appendChild(this._primitiveOnly); // Terrain - var terrainSection = addSection('Terrain', 'terrainVisible', 'toggleTerrain'); + var terrainSection = addSection(panel, 'Terrain', 'terrainVisible', 'toggleTerrain'); var pickTileRequired = document.createElement('div'); pickTileRequired.className = 'cesium-cesiumInspector-pickSection'; terrainSection.appendChild(pickTileRequired);