[Front-end] min-width added to .s-inline-edit

Fixes #1679
[Front-end] Styling for contenteditable span
2017-09-07 16:01:52 -07:00 · 2017-09-07 15:54:32 -07:00 · 2017-09-07 14:27:11 -07:00 · 2017-09-07 14:26:57 -07:00 · 2017-09-07 14:06:57 -07:00 · 2017-09-06 11:18:42 -07:00
23 changed files with 321 additions and 233 deletions
--- a/platform/commonUI/browse/bundle.js
+++ b/platform/commonUI/browse/bundle.js
@@ -26,6 +26,7 @@ define([
    "./src/InspectorPaneController",
    "./src/BrowseObjectController",
    "./src/MenuArrowController",
+    "./src/ObjectHeaderController",
    "./src/navigation/NavigationService",
    "./src/navigation/NavigateAction",
    "./src/navigation/OrphanNavigationHandler",
@@ -48,6 +49,7 @@ define([
    InspectorPaneController,
    BrowseObjectController,
    MenuArrowController,
+    ObjectHeaderController,
    NavigationService,
    NavigateAction,
    OrphanNavigationHandler,
@@ -140,6 +142,13 @@ define([
                        "$location",
                        "$attrs"
                    ]
+                },
+                {
+                    "key": "ObjectHeaderController",
+                    "implementation": ObjectHeaderController,
+                    "depends": [
+                        "$scope"
+                    ]
                }
            ],
            "representations": [
--- a/platform/commonUI/browse/res/templates/browse/object-header.html
+++ b/platform/commonUI/browse/res/templates/browse/object-header.html
@@ -20,9 +20,14 @@
 at runtime from the About dialog for additional information.
 -->
 <span class='type-icon flex-elem {{type.getCssClass()}}'></span>
-<span class="l-elem-wrapper l-flex-row flex-elem grows">
+<span class="l-elem-wrapper l-flex-row flex-elem grows" ng-controller="ObjectHeaderController as controller">
    <span ng-if="parameters.mode" class='action flex-elem'>{{parameters.mode}}</span>
-    <span class='title-label flex-elem holder flex-can-shrink'>{{model.name}}</span>
+    <span contenteditable="true" 
+		class='title-label flex-elem holder flex-can-shrink s-inline-edit'
+		ng-class="{'s-status-editing': inlineEdit}"
+		ng-click="controller.edit()"
+		ng-blur="controller.updateName($event)"
+		ng-keypress="controller.updateName($event)">{{model.name}}</span>
    <span class='t-object-alert t-alert-unsynced flex-elem holder' title='This object is not currently displaying real-time data'></span>
    <mct-representation
        key="'menu-arrow'"
--- a/platform/commonUI/browse/src/ObjectHeaderController.js
+++ b/platform/commonUI/browse/src/ObjectHeaderController.js
@@ -0,0 +1,76 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2017, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+define(
+	[],
+	function () {
+
+		/**
+		 * Controller to provide the ability to inline edit an object name.
+		 *
+		 * @constructor
+		 * @memberof platform/commonUI/browse
+		 */
+		function ObjectHeaderController($scope) {
+			this.$scope = $scope;
+			this.$scope.inlineEdit = false;
+		}
+
+		/**
+		 * Handler for the blur and enter/return key press events
+		 * to update the object name.
+		 *
+		 * @param event the mouse event
+		 */
+		ObjectHeaderController.prototype.updateName = function (event) {
+			if (event && (event.type === 'blur' || event.which === 13)) {
+				var name = event.currentTarget.innerHTML;
+
+				if (name.length === 0) {
+					name = "Unnamed " + this.$scope.domainObject.getCapability("type").typeDef.name;
+					event.currentTarget.innerHTML = name;
+				}
+
+				if (name !== this.$scope.domainObject.model.name) {
+					this.$scope.domainObject.getCapability('mutation').mutate(function (model) {
+						model.name = name;
+					});
+				}
+
+				this.$scope.inlineEdit = false;
+
+				if (event.which === 13) {
+					event.currentTarget.blur();
+				}
+			}
+		};
+
+		/**
+		 * Handler for the click event to mark the filed as inline edit.
+		 */
+		ObjectHeaderController.prototype.edit = function () {
+			this.$scope.inlineEdit = true;
+		};
+
+		return ObjectHeaderController;
+	}
+);
--- a/platform/commonUI/browse/test/ObjectHeaderControllerSpec.js
+++ b/platform/commonUI/browse/test/ObjectHeaderControllerSpec.js
@@ -0,0 +1,94 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2017, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+define(
+	["../src/ObjectHeaderController"],
+	function (ObjectHeaderController) {
+
+		describe("The object header controller", function () {
+			var mockScope,
+				mockDomainObject,
+				mockMutationCapability,
+				mockEvent,
+				mockCurrentTarget,
+				controller;
+
+			function getModel() {
+				return {
+					name: 'Test name'
+				};
+			}
+
+			beforeEach(function () {
+				mockMutationCapability = jasmine.createSpyObj("mutation", ["mutate"]);
+
+				mockDomainObject = jasmine.createSpyObj("domainObject", ["getCapability", "model"]);
+				mockDomainObject.model = getModel();
+				mockDomainObject.getCapability.andReturn(mockMutationCapability);
+
+				mockScope = jasmine.createSpyObj("$scope", ["name"]);
+				mockScope.domainObject = mockDomainObject;
+
+				mockCurrentTarget = jasmine.createSpyObj("currentTarget", ["blur"]);
+				mockCurrentTarget.blur.andReturn({ blur: function () {} });
+
+				mockEvent = jasmine.createSpyObj('event', ["which"]);
+				mockEvent.currentTarget = mockCurrentTarget;
+
+				controller = new ObjectHeaderController(mockScope);
+			});
+
+			it("updates the model with new name", function () {
+				mockScope.name = 'New name';
+				controller.updateName();
+
+				expect(mockMutationCapability.mutate).toHaveBeenCalledWith(jasmine.any(Function));
+			});
+
+			it("does not update the model for blank names", function () {
+				mockScope.name = "";
+				controller.updateName();
+
+				expect(mockMutationCapability.mutate).not.toHaveBeenCalled();
+			});
+
+			it("updates the model on enter keypress event only", function () {
+				mockScope.name = 'New name';
+				controller.updateName(mockEvent);
+
+				expect(mockMutationCapability.mutate).not.toHaveBeenCalled();
+
+				mockEvent.which = 13;
+				controller.updateName(mockEvent);
+
+				expect(mockMutationCapability.mutate).toHaveBeenCalled();
+			});
+
+			it("blurs the field on enter key press", function () {
+				mockEvent.which = 13;
+				controller.updateName(mockEvent);
+
+				expect(mockEvent.currentTarget.blur).toHaveBeenCalled();
+			});
+		});
+	}
+);
--- a/platform/commonUI/general/res/fonts/symbols/icomoon-project-openmct-symbols-16px.json
+++ b/platform/commonUI/general/res/fonts/symbols/icomoon-project-openmct-symbols-16px.json
@@ -2,7 +2,7 @@
  "metadata": {
    "name": "openmct-symbols-16px",
    "lastOpened": 0,
-    "created": 1505151140023
+    "created": 1502487054429
  },
  "iconSets": [
    {
@@ -636,29 +636,13 @@
          "code": 921670,
          "tempChar": ""
        },
-        {
-          "order": 138,
-          "id": 115,
-          "name": "icon-import",
-          "prevSize": 24,
-          "code": 921671,
-          "tempChar": ""
-        },
-        {
-          "order": 136,
-          "id": 116,
-          "name": "icon-export",
-          "prevSize": 24,
-          "code": 921672,
-          "tempChar": ""
-        },
        {
          "order": 37,
          "prevSize": 24,
          "name": "icon-activity",
          "id": 32,
          "code": 921856,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 36,
@@ -666,7 +650,7 @@
          "name": "icon-activity-mode",
          "id": 31,
          "code": 921857,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 52,
@@ -674,7 +658,7 @@
          "name": "icon-autoflow-tabular",
          "id": 47,
          "code": 921858,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 55,
@@ -682,7 +666,7 @@
          "name": "icon-clock",
          "id": 50,
          "code": 921859,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 58,
@@ -690,7 +674,7 @@
          "name": "icon-database",
          "id": 53,
          "code": 921860,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 57,
@@ -698,7 +682,7 @@
          "name": "icon-database-query",
          "id": 52,
          "code": 921861,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 17,
@@ -706,7 +690,7 @@
          "name": "icon-dataset",
          "id": 12,
          "code": 921862,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 22,
@@ -714,7 +698,7 @@
          "name": "icon-datatable",
          "id": 17,
          "code": 921863,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 59,
@@ -722,7 +706,7 @@
          "name": "icon-dictionary",
          "id": 54,
          "code": 921864,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 62,
@@ -730,7 +714,7 @@
          "name": "icon-folder",
          "id": 57,
          "code": 921865,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 66,
@@ -738,7 +722,7 @@
          "name": "icon-image",
          "id": 61,
          "code": 921872,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 68,
@@ -746,7 +730,7 @@
          "name": "icon-layout",
          "id": 63,
          "code": 921873,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 77,
@@ -754,7 +738,7 @@
          "name": "icon-object",
          "id": 72,
          "code": 921874,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 78,
@@ -762,7 +746,7 @@
          "name": "icon-object-unknown",
          "id": 73,
          "code": 921875,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 79,
@@ -770,7 +754,7 @@
          "name": "icon-packet",
          "id": 74,
          "code": 921876,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 80,
@@ -778,7 +762,7 @@
          "name": "icon-page",
          "id": 75,
          "code": 921877,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 135,
@@ -786,7 +770,7 @@
          "name": "icon-plot-overlay",
          "prevSize": 24,
          "code": 921878,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 113,
@@ -794,7 +778,7 @@
          "name": "icon-plot-stacked",
          "prevSize": 24,
          "code": 921879,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 10,
@@ -802,7 +786,7 @@
          "name": "icon-session",
          "id": 5,
          "code": 921880,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 24,
@@ -810,7 +794,7 @@
          "name": "icon-tabular",
          "id": 19,
          "code": 921881,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 7,
@@ -818,7 +802,7 @@
          "name": "icon-tabular-lad",
          "id": 2,
          "code": 921888,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 6,
@@ -826,7 +810,7 @@
          "name": "icon-tabular-lad-set",
          "id": 1,
          "code": 921889,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 8,
@@ -834,7 +818,7 @@
          "name": "icon-tabular-realtime",
          "id": 3,
          "code": 921890,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 23,
@@ -842,7 +826,7 @@
          "name": "icon-tabular-scrolling",
          "id": 18,
          "code": 921891,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 112,
@@ -850,7 +834,7 @@
          "name": "icon-telemetry",
          "id": 86,
          "code": 921892,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 90,
@@ -858,7 +842,7 @@
          "name": "icon-telemetry-panel",
          "id": 85,
          "code": 921893,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 93,
@@ -866,7 +850,7 @@
          "name": "icon-timeline",
          "id": 88,
          "code": 921894,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 116,
@@ -874,7 +858,7 @@
          "name": "icon-timer-v1.5",
          "prevSize": 24,
          "code": 921895,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 11,
@@ -882,7 +866,7 @@
          "name": "icon-topic",
          "id": 6,
          "code": 921896,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 115,
@@ -890,7 +874,7 @@
          "name": "icon-box-with-dashed-lines",
          "id": 29,
          "code": 921897,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 126,
@@ -898,7 +882,7 @@
          "name": "icon-summary-widget",
          "prevSize": 24,
          "code": 921904,
-          "tempChar": ""
+          "tempChar": ""
        }
      ],
      "metadata": {
@@ -2699,52 +2683,6 @@
            ]
          }
        },
-        {
-          "id": 115,
-          "paths": [
-            "M832 192.4v639.4c0 0.2-0.2 0.2-0.4 0.4h-319.6v192h320c105.6 0 192-86.4 192-192v-640.2c0-105.6-86.4-192-192-192h-320v192h319.6c0.2 0 0.4 0.2 0.4 0.4z",
-            "M192 704v192l384-384-384-384v192h-192v384z"
-          ],
-          "attrs": [
-            {},
-            {}
-          ],
-          "grid": 16,
-          "tags": [
-            "icon-import"
-          ],
-          "isMulticolor": false,
-          "isMulticolor2": false,
-          "colorPermutations": {
-            "1161751207457516161751": [
-              {},
-              {}
-            ]
-          }
-        },
-        {
-          "id": 116,
-          "paths": [
-            "M192 831.66v-639.32l0.34-0.34h319.66v-192h-320c-105.6 0-192 86.4-192 192v640c0 105.6 86.4 192 192 192h320v-192h-319.66z",
-            "M1024 512l-384-384v192h-192v384h192v192l384-384z"
-          ],
-          "attrs": [
-            {},
-            {}
-          ],
-          "isMulticolor": false,
-          "isMulticolor2": false,
-          "grid": 16,
-          "tags": [
-            "icon-export"
-          ],
-          "colorPermutations": {
-            "1161751207457516161751": [
-              {},
-              {}
-            ]
-          }
-        },
        {
          "paths": [
            "M576 64h-256l320 320h-290.256c-44.264-76.516-126.99-128-221.744-128h-128v512h128c94.754 0 177.48-51.484 221.744-128h290.256l-320 320h256l448-448-448-448z"
--- a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.eot
+++ b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.eot
--- a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.svg
+++ b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.svg
@@ -85,8 +85,6 @@
 <glyph unicode="&#xe1044;" glyph-name="icon-grid-snap-no" d="M768 384h192v-64h-192v64zM256 384h192v-64h-192v64zM0 384h192v-64h-192v64zM640 448h-64v-64h-64v-64h64v-64h64v64h64v64h-64zM576 704h64v-192h-64v192zM576 960h64v-192h-64v192zM576 192h64v-192h-64v192z" />
 <glyph unicode="&#xe1045;" glyph-name="icon-frame-show" d="M0 896v-896h1024v896h-1024zM896 128h-768v640h768v-640zM192 704h384v-128h-384v128z" />
 <glyph unicode="&#xe1046;" glyph-name="icon-frame-hide" d="M128 770h420l104 128h-652v-802.4l128 157.4zM896 130h-420l-104-128h652v802.4l-128-157.4zM832 962l-832-1024h192l832 1024zM392 578l104 128h-304v-128z" />
-<glyph unicode="&#xe1047;" glyph-name="icon-import" d="M832 767.6v-639.4c0-0.2-0.2-0.2-0.4-0.4h-319.6v-192h320c105.6 0 192 86.4 192 192v640.2c0 105.6-86.4 192-192 192h-320v-192h319.6c0.2 0 0.4-0.2 0.4-0.4zM192 256v-192l384 384-384 384v-192h-192v-384z" />
-<glyph unicode="&#xe1048;" glyph-name="icon-export" d="M192 128.34v639.32l0.34 0.34h319.66v192h-320c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h320v192h-319.66zM1024 448l-384 384v-192h-192v-384h192v-192l384 384z" />
 <glyph unicode="&#xe1100;" glyph-name="icon-activity" d="M576 896h-256l320-320h-290.256c-44.264 76.516-126.99 128-221.744 128h-128v-512h128c94.754 0 177.48 51.484 221.744 128h290.256l-320-320h256l448 448-448 448z" />
 <glyph unicode="&#xe1101;" glyph-name="icon-activity-mode" d="M512 960c-214.866 0-398.786-132.372-474.744-320h90.744c56.86 0 107.938-24.724 143.094-64h240.906l-192 192h256l320-320-320-320h-256l192 192h-240.906c-35.156-39.276-86.234-64-143.094-64h-90.744c75.958-187.628 259.878-320 474.744-320 282.77 0 512 229.23 512 512s-229.23 512-512 512z" />
 <glyph unicode="&#xe1102;" glyph-name="icon-autoflow-tabular" d="M192 960c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h64v1024h-64zM384 960h256v-1024h-256v1024zM832 960h-64v-704h256v512c0 105.6-86.4 192-192 192z" />
--- a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.ttf
+++ b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.ttf
--- a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.woff
+++ b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.woff
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -21,7 +21,7 @@
 *****************************************************************************/

 /************************** FEATURES */
-$enableImageryThumbs: true; // Set to true if historical imagery thumbnails are supported
+$enableImageryThumbs: false; // Set to true if historical imagery thumbnails are supported

 /************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
 $bodyMargin: 10px;
@@ -82,7 +82,7 @@ $tabularTdPadTB: 2px;
 /*************** Imagery */
 $imageMainControlBarH: 25px;
 $imageThumbsD: 120px;
-$imageThumbsWrapperH: 155px;
+$imageThumbsWrapperH: $imageThumbsD * 1.4;
 $imageThumbPad: 1px;
 /*************** Ticks */
 $ticksH: 25px;
@@ -111,7 +111,9 @@ $bubbleMaxW: 300px;
 $reqSymbolW: 15px;
 $reqSymbolM: $interiorMargin * 2;
 $reqSymbolFontSize: 0.75em;
-$inputTextP: 3px 5px;
+$inputTextPTopBtm: 3px;
+$inputTextPLeftRight: 5px;
+$inputTextP: $inputTextPTopBtm $inputTextPLeftRight;
 /*************** Wait Spinner Defaults */
 $waitSpinnerD: 32px;
 $waitSpinnerTreeD: 20px;
--- a/platform/commonUI/general/res/sass/_glyphs.scss
+++ b/platform/commonUI/general/res/sass/_glyphs.scss
@@ -113,8 +113,6 @@ $glyph-icon-grid-snap-to: '\e1043';
 $glyph-icon-grid-snap-no: '\e1044';
 $glyph-icon-frame-show: '\e1045';
 $glyph-icon-frame-hide: '\e1046';
-$glyph-icon-import: '\e1047';
-$glyph-icon-export: '\e1048';
 $glyph-icon-activity: '\e1100';
 $glyph-icon-activity-mode: '\e1101';
 $glyph-icon-autoflow-tabular: '\e1102';
@@ -227,8 +225,6 @@ $glyph-icon-summary-widget: '\e1130';
 .icon-grid-snap-no {  @include glyphBefore($glyph-icon-grid-snap-no); }
 .icon-frame-show {  @include glyphBefore($glyph-icon-frame-show); }
 .icon-frame-hide {  @include glyphBefore($glyph-icon-frame-hide); }
-.icon-import {  @include glyphBefore($glyph-icon-import); }
-.icon-export {  @include glyphBefore($glyph-icon-export); }
 .icon-activity {  @include glyphBefore($glyph-icon-activity); }
 .icon-activity-mode {  @include glyphBefore($glyph-icon-activity-mode); }
 .icon-autoflow-tabular {  @include glyphBefore($glyph-icon-autoflow-tabular); }
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@@ -316,23 +316,25 @@
    text-shadow: $shdwItemText;
 }

-@mixin input-base($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.6) 0 1px 3px) {
+@mixin input-base() {
 	@include appearance(none);
 	border-radius: $controlCr;
 	box-sizing: border-box;
-	box-shadow: inset $shdw;
-	background: $bg;
-	border: none;
-	color: $fg;
-	outline: none;
+    &:focus { outline: 0; }
 	&.error {
 		background-color: $colorFormFieldErrorBg;
        color: $colorFormFieldErrorFg;
 	}
 }

-@mixin nice-input($bg: $colorInputBg, $fg: $colorInputFg) {
-	@include input-base($bg, $fg);
+@mixin nice-input($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.6) 0 1px 3px) {
+	@include input-base();
+    background: $bg;
+    box-shadow: inset $shdw;
+    border: none;
+    color: $fg;
+    outline: none;
+    padding: $inputTextPTopBtm $inputTextPLeftRight;
 }

@mixin contextArrow() {
@@ -344,7 +346,7 @@
 }

@mixin nice-textarea($bg: $colorBodyBg, $fg: $colorBodyFg) {
-    @include input-base($bg, $fg);
+    @include nice-input($bg, $fg);
    padding: $interiorMargin;
 }

--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -243,6 +243,24 @@ input[type="number"] {
    }
 }

+span[contenteditable].s-inline-edit {
+    @include trans-prop-nice((padding), 250ms);
+    @include input-base();
+    border: 1px solid transparent;
+    min-width: 20px;
+    &:hover {
+        border-color: rgba($colorBodyFg, 0.2);
+        padding-left: $inputTextPLeftRight;
+        padding-right: $inputTextPLeftRight;
+    }
+}
+
+span[contenteditable].s-inline-edit.s-status-editing {
+    @include nice-input();
+    vertical-align: baseline;
+    padding: 0 $inputTextPLeftRight;
+}
+
 .l-input-sm {
    input[type="text"],
    input[type="search"],
--- a/platform/commonUI/general/res/sass/features/_imagery.scss
+++ b/platform/commonUI/general/res/sass/features/_imagery.scss
@@ -9,6 +9,7 @@
 	@if $enableImageryThumbs == true {
 		bottom: $interiorMargin*2 +  $imageThumbsWrapperH;
 	}
+	min-height: 100px;
 	min-width: 150px;
 	.l-image-main {
 		background-color: $colorPlotBg;
@@ -21,9 +22,7 @@

 .l-image-thumbs-wrapper {
 	top: auto;
-	min-height: $imageThumbsWrapperH;
-	max-height: 60%;
-	box-sizing: border-box;
+	height: $imageThumbsWrapperH;
 }

 .l-date,
@@ -44,16 +43,14 @@
 .l-image-main-controlbar {
 	font-size: 0.8em;
 	line-height: inherit;
-	.l-datetime-w, .l-controls-w {
+	.left, .right {
 		direction: rtl;
 		overflow: hidden;
 	}
-	.l-datetime-w {
-        @include ellipsize();
-        margin-right: $interiorMarginSm;
+	.left {
 		text-align: left;
 	}
-	.l-controls-w {
+	.right {
 		z-index: 2;
 	}
 	.l-date,
@@ -85,8 +82,9 @@
 /*************************************** THUMBS */

 .l-image-thumbs-wrapper {
-	overflow-x: hidden;
-	overflow-y: auto;
+	//@include test(green);
+	overflow-x: auto;
+	overflow-y: hidden;
 	padding-bottom: $interiorMargin;
 	white-space: nowrap;
 }
@@ -94,17 +92,8 @@
 .l-image-thumb-item {
 	@include transition(background-color, 0.25s);
 	box-sizing: border-box;
-    cursor: pointer;
-    direction: ltr;
-    display: inline-block;
-    float: left;
-    font-size: 0.8em;
 	padding: 1px;
-    margin-left: $interiorMarginSm;
-    position: relative;
-    text-align: left;
-    width: $imageThumbsD + $imageThumbPad*2;
-    white-space: normal;
+	position: relative;
 	.l-thumb,
 	.l-date,
 	.l-time {
@@ -114,7 +103,14 @@
 	.l-time {
 		padding: 2px 3px;
 	}
-
+	cursor: pointer;
+	direction: ltr;
+	display: inline-block;
+	font-size: 0.8em;
+	margin-left: $interiorMarginSm;
+	text-align: left;
+	width: $imageThumbsD + $imageThumbPad*2;
+	white-space: normal;
 	&:hover {
 		background: $colorThumbHoverBg;
 		.l-date,
@@ -140,7 +136,6 @@
 /*************************************** LOCAL CONTROLS */
 .l-local-controls {
    max-width: 200px;
-    min-width: 100px;
    width: 35%;
    input[type="range"] {
        display: block;
@@ -189,8 +184,7 @@
 /*************************************** WHEN IN FRAME */
 .frame .t-imagery {
 	.l-image-main-wrapper {
-		bottom: 0 !important;
-        height: 100% !important;
+		bottom: 0;
 		.l-image-main-controlbar {
 			font-size: 0.7em;
 		}
@@ -200,8 +194,7 @@
 			}
 		}
 	}
-	.l-image-thumbs-wrapper,
-    mct-splitter {
+	.l-image-thumbs-wrapper {
 		display: none;
 	}
 }
--- a/platform/commonUI/general/res/sass/forms/_filter.scss
+++ b/platform/commonUI/general/res/sass/forms/_filter.scss
@@ -129,9 +129,6 @@
 }

 .s-filter {
-    input[type="search"] {
-        @include input-base();
-    }
    .clear-icon,
    .menu-icon,
    &:before {
--- a/platform/commonUI/general/res/sass/user-environ/_frame.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_frame.scss
@@ -142,7 +142,7 @@
 body.desktop .frame {
    // Hide local controls initially and show it them on hover when they're in an element that's in a frame context
    // Frame template is used because we need to target the lowest nested frame
-    .object-browse-bar .btn-bar {
+    .right {
        opacity: 0;
        pointer-events: none;
    }
@@ -150,7 +150,7 @@ body.desktop .frame {
    // Target the first descendant so that we only show the elements in the outermost container.
    // Handles the case where we have layouts in layouts.
    &:hover > .object-browse-bar {
-        .btn-bar {
+        .right {
            opacity: 1;
            pointer-events: inherit;
        }
--- a/platform/commonUI/general/res/templates/controls/input-filter.html
+++ b/platform/commonUI/general/res/templates/controls/input-filter.html
@@ -20,7 +20,7 @@
 at runtime from the About dialog for additional information.
 -->
 <!-- look at action-button for example -->
-<span class="t-filter l-filter s-filter"
+<span class="t-filter l-filter"
      ng-controller="GetterSetterController">
 	<input type="search"
           class="t-filter-input"
--- a/platform/commonUI/general/src/directives/MCTSplitPane.js
+++ b/platform/commonUI/general/src/directives/MCTSplitPane.js
@@ -117,7 +117,9 @@ define(

                // Apply styles to child elements
                function updateChildren(children) {
-                    position = userWidthPreference || position;
+                    if (alias) {
+                        position = userWidthPreference || position;
+                    }

                    // Pick out correct elements to update, flowing from
                    // selected anchor edge.
@@ -180,9 +182,7 @@ define(
                }

                function setUserWidthPreference(value) {
-                    if (alias) {
-                        userWidthPreference = value;
-                    }
+                    userWidthPreference = value;
                }

                function persistToLocalStorage(value) {
--- a/platform/features/imagery/bundle.js
+++ b/platform/features/imagery/bundle.js
@@ -25,12 +25,14 @@ define([
    "./src/controllers/ImageryController",
    "./src/directives/MCTBackgroundImage",
    "text!./res/templates/imagery.html",
+    "text!./res/templates/imageryTimeline.html",
    'legacyRegistry'
 ], function (
    ImageryViewPolicy,
    ImageryController,
    MCTBackgroundImage,
    imageryTemplate,
+    imageryTimelineTemplate,
    legacyRegistry
 ) {

@@ -48,6 +50,17 @@ define([
                        "telemetry"
                    ],
                    "editable": false
+                },
+                {
+                    "name": "Historical Imagery",
+                    "key": "historical-imagery",
+                    "cssClass": "icon-image",
+                    "template": imageryTimelineTemplate,
+                    "priority": "preferred",
+                    "needs": [
+                        "telemetry"
+                    ],
+                    "editable": false
                }
            ],
            "policies": [
--- a/platform/features/imagery/res/templates/imagery.html
+++ b/platform/features/imagery/res/templates/imagery.html
@@ -1,6 +1,5 @@
 <div class="t-imagery" ng-controller="ImageryController as imagery">
-    <mct-split-pane class='abs' anchor="bottom" alias="imagery">
-    <div class="split-pane-component l-image-main-wrapper l-flex-col"
+    <div class="l-image-main-wrapper l-flex-col"
        ng-mouseenter="showLocalControls = true;"
        ng-mouseleave="showLocalControls = false;">
        <div class="l-local-controls s-local-controls s-wrapper-transluc l-flex-row"
@@ -33,12 +32,12 @@
        </div>

        <div class="l-image-main-controlbar flex-elem l-flex-row">
-            <div class="l-datetime-w flex-elem grows">
+            <div class="left flex-elem grows">
                <a class="s-button show-thumbs sm hidden icon-thumbs-strip"
                    ng-click="showThumbsBubble = (showThumbsBubble) ? false:true"></a>
                <span class="l-time">{{imagery.getTime()}}</span>
            </div>
-            <div class="l-controls-w flex-elem">
+            <div class="right flex-elem">
                <a class="s-button pause-play"
                    ng-click="imagery.paused(!imagery.paused())"
                    ng-class="{ paused: imagery.paused() }"></a>
@@ -56,14 +55,4 @@
            </div>
        </div>
    </div>
-    <mct-splitter></mct-splitter>
-    <div class="split-pane-component l-image-thumbs-wrapper">
-        <div class="l-image-thumb-item" ng-class="{selected: image.selected}" ng-repeat="image in imageHistory track by $index" 
-            ng-click="imagery.setSelectedImage(image)"  ng-init="imagery.scrollToBottom()">
-            <img class="l-thumb" 
-                ng-src={{imagery.getImageUrl(image)}}>
-            <div class="l-time">{{imagery.getTime(image)}}</div>
-        </div>
-    </div>
-    </mct-split-pane>
 </div>
--- a/platform/features/imagery/res/templates/imageryTimeline.html
+++ b/platform/features/imagery/res/templates/imageryTimeline.html
@@ -0,0 +1,8 @@
+
+<div class="l-image-thumbs-wrapper" ng-controller="ImageryController as imagery">
+	<div class="l-image-thumb-item" ng-repeat="image in imageHistory track by $index">
+		<img class="l-thumb" ng-init="imagery.scrollToRight()"
+			ng-src={{imagery.getImageUrl(image)}} >
+			<div class="l-time">{{imagery.getTime(image)}}</div>
+	</div>
+</div>
--- a/platform/features/imagery/src/controllers/ImageryController.js
+++ b/platform/features/imagery/src/controllers/ImageryController.js
@@ -48,8 +48,9 @@ define(
            this.zone = "";
            this.imageUrl = "";
            this.requestCount = 0;
-            this.scrollable = $(".l-image-thumbs-wrapper");
+            this.scrollable = $(element[0]);
            this.autoScroll = openmct.time.clock() ? true : false;
+
            this.$scope.imageHistory = [];
            this.$scope.filters = {
                brightness: 100,
@@ -62,7 +63,6 @@ define(
            this.updateHistory = this.updateHistory.bind(this);
            this.onBoundsChange = this.onBoundsChange.bind(this);
            this.onScroll = this.onScroll.bind(this);
-            this.setSelectedImage = this.setSelectedImage.bind(this);

            this.subscribe(this.$scope.domainObject);

@@ -80,10 +80,10 @@ define(
                    var metadata = this.openmct
                        .telemetry
                        .getMetadata(this.domainObject);
-                    this.timeKey = this.openmct.time.timeSystem().key;
+                    var timeKey = this.openmct.time.timeSystem().key;
                    this.timeFormat = this.openmct
                        .telemetry
-                        .getValueFormatter(metadata.value(this.timeKey));
+                        .getValueFormatter(metadata.value(timeKey));
                    this.imageFormat = this.openmct
                        .telemetry
                        .getValueFormatter(metadata.valuesForHints(['image'])[0]);
@@ -161,7 +161,7 @@ define(

        /**
         * Updates displayable values to match those of the most
-         * recently received datum.
+         * recently recieved datum.
         * @param {object} [datum] the datum
         * @private
         */
@@ -170,6 +170,7 @@ define(
                this.nextDatum = datum;
                return;
            }
+
            this.time = this.timeFormat.format(datum);
            this.imageUrl = this.imageFormat.format(datum);

@@ -184,7 +185,8 @@ define(
        ImageryController.prototype.updateHistory = function (datum) {
            if (this.$scope.imageHistory.length === 0 ||
                !_.isEqual(this.$scope.imageHistory.slice(-1)[0], datum)) {
-                var index = _.sortedIndex(this.$scope.imageHistory, datum, this.timeFormat.format.bind(this.timeFormat));
+
+                var index = _.sortedIndex(this.$scope.imageHistory, datum, 'utc');
                this.$scope.imageHistory.splice(index, 0, datum);
                return true;
            }
@@ -194,12 +196,8 @@ define(

        ImageryController.prototype.onScroll = function (event) {
            this.$window.requestAnimationFrame(function () {
-                var thumbnailWrapperHeight = this.scrollable[0].offsetHeight;
-                var thumbnailWrapperWidth = this.scrollable[0].offsetWidth;
                if (this.scrollable[0].scrollLeft <
-                    (this.scrollable[0].scrollWidth - this.scrollable[0].clientWidth) - (thumbnailWrapperWidth) ||
-                    this.scrollable[0].scrollTop <
-                    (this.scrollable[0].scrollHeight - this.scrollable[0].clientHeight) - (thumbnailWrapperHeight)) {
+                    (this.scrollable[0].scrollWidth - this.scrollable[0].clientWidth) - 20) {
                    this.autoScroll = false;
                } else {
                    this.autoScroll = true;
@@ -207,16 +205,12 @@ define(
            }.bind(this));
        };

-        /**
-         *  Force history imagery div to scroll to bottom.
-         */
-        ImageryController.prototype.scrollToBottom = function () {
+        ImageryController.prototype.scrollToRight = function () {
            if (this.autoScroll) {
-                this.scrollable[0].scrollTop = this.scrollable[0].scrollHeight;
+                this.scrollable[0].scrollLeft = this.scrollable[0].scrollWidth;
            }
        };

-
        /**
         * Get the time portion (hours, minutes, seconds) of the
         * timestamp associated with the incoming image telemetry
@@ -249,38 +243,16 @@ define(
         * @returns {boolean} the current state
         */
        ImageryController.prototype.paused = function (state) {
-            if (arguments.length > 0 && state !== this.isPaused) {
-                this.unselectAllImages();
-                this.isPaused = state;
-                if (this.nextDatum) {
-                    this.updateValues(this.nextDatum);
-                    delete this.nextDatum;
+                if (arguments.length > 0 && state !== this.isPaused) {
+                    this.isPaused = state;
+                    if (this.nextDatum) {
+                        this.updateValues(this.nextDatum);
+                        delete this.nextDatum;
+                    }
                }
-                this.autoScroll = true;
-            }
-            return this.isPaused;
-        };
+                return this.isPaused;
+            };

-        /**
-         * Set the selected image on the state for the large imagery div to use.
-         * @param {object} [image] the image object to get url from.
-         */
-        ImageryController.prototype.setSelectedImage = function (image) {
-            this.imageUrl = this.getImageUrl(image);
-            this.time = this.getTime(image);
-            this.paused(true);
-            this.unselectAllImages();
-            image.selected = true;
-        };
-
-        /**
-         * Loop through the history imagery data to set all images to unselected.
-         */
-        ImageryController.prototype.unselectAllImages = function () {
-            for (var i = 0; i < this.$scope.imageHistory.length; i++) {
-                this.$scope.imageHistory[i].selected = false;
-            }
-        };
        return ImageryController;
    }
 );
--- a/platform/features/imagery/test/controllers/ImageryControllerSpec.js
+++ b/platform/features/imagery/test/controllers/ImageryControllerSpec.js
@@ -226,28 +226,6 @@ define(
                    expect(controller.updateHistory(mockDatum)).toBe(false);
                    expect(controller.updateHistory(mockDatum)).toBe(false);
                });
-
-                describe("user clicks on imagery thumbnail", function () {
-                    var mockDatum = { utc: 1434600258123, url: 'some/url', selected: false};
-
-                    it("pauses and adds selected class to imagery thumbnail", function () {
-                        controller.setSelectedImage(mockDatum);
-                        expect(controller.paused()).toBeTruthy();
-                        expect(mockDatum.selected).toBeTruthy();
-                    });
-
-                    it("unselects previously selected image", function () {
-                        $scope.imageHistory = [{ utc: 1434600258123, url: 'some/url', selected: true}];
-                        controller.unselectAllImages();
-                        expect($scope.imageHistory[0].selected).toBeFalsy();
-                    });
-
-                    it("updates larger image url and time", function () {
-                        controller.setSelectedImage(mockDatum);
-                        expect(controller.getImageUrl()).toEqual(controller.getImageUrl(mockDatum));
-                        expect(controller.getTime()).toEqual(controller.timeFormat.format(mockDatum.utc));
-                    });
-                });
            });

            it("initially shows an empty string for date/time", function () {
Author	SHA1	Message	Date
Charles Hacskaylo	889350623a	[Front-end] min-width added to .s-inline-edit Fixes #1679	2017-09-07 16:01:52 -07:00
Charles Hacskaylo	aac1f02bd6	[Front-end] Styling for contenteditable span Fixes #1679 WIP: refactor input-base and nice-input mixins; styling for span[contenteditable].s-status-editing in _controls.scss; removed s-filter class; TODO: figure out baseline text shift on click	2017-09-07 15:54:32 -07:00
Charles Hacskaylo	e759761a04	Merge branch 'inline-edit-issue-1679' of https://github.com/nasa/openmct into inline-edit-issue-1679-styling	2017-09-07 14:27:11 -07:00
Charles Hacskaylo	490567c8e8	[Front-end] Add span contenteditable to input styling Fixes #1679	2017-09-07 14:26:57 -07:00
Pegah Sarram	ede5b85c93	Changed input to a span with conteneditable flag on.	2017-09-07 14:06:57 -07:00
Pegah Sarram	82f32a57f4	Merge remote-tracking branch 'refs/remotes/origin/inline-edit-issue-1679' into inline-edit-issue-1679	2017-09-06 11:18:42 -07:00
Pegah Sarram	0dd6a4eb44	Fixed a lint error.	2017-09-06 10:40:16 -07:00
Pegah Sarram	4c03a3b31d	Fixed checkstyle errors	2017-09-06 10:40:16 -07:00
Pegah Sarram	aaeffb16e3	Added tests. Also, added a check to mutate the name if it's different than the model.	2017-09-06 10:40:16 -07:00
Pegah Sarram	41f6047c96	Changed the title-label span to an input to support inline edit and implemented a controller to handle updaing the name.	2017-09-06 10:40:16 -07:00
Pegah Sarram	c35cdf176f	Added tests. Also, added a check to mutate the name if it's different than the model.	2017-09-05 14:00:29 -07:00
Pegah Sarram	05227286c4	Changed the title-label span to an input to support inline edit and implemented a controller to handle updaing the name.	2017-08-29 15:05:40 -07:00