alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Inline edit object names (#1700)

Browse Source 
* Inline edit object name.

Change the title-label span to a conteneditable span to allow editing object names inline. Implement a controller to handle updaing the name. Add tests.

Fixes #1679

[Front-end] Add span contenteditable to input styling
[Front-end] Styling for contenteditable span
styling for span[contenteditable].s-status-editing in _controls.scss;
removed s-filter class;
[Front-end] min-width added to .s-inline-edit

* [Frontend] Style tweaks, cleanup and simplification

Fixes #1679

Style sanding on .s-inline-edit; added
:focus outline:0 to select in _controls.scss;

New .s-input-inline class; removed ng-class from object-header.html,
uses :focus instead; refactoring of input-related mixins;

Bring Time Conductor real-time inputs into parity

Apply .s-input-inline to TC inputs; finesse .s-input-inline selector;

Prevent nested inline inputs from editing

Fixed nested editing prevention selector

* Create an object header template for objects inside a frame.

Fix code review requests.

Fixes 1679
This commit is contained in:
Pegah Sarram
2017-09-21 11:16:04 -07:00
committed by Pete Richards
parent a3a55d3b48
commit 1419c75503
15 changed files with 314 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
platform/features/conductor/core/res/sass/_constants.scss
View File

@@ -1,7 +1,7 @@
$ueTimeConductorH: (25px, 16px, 20px); // Heights for Ticks, Data Visualization, Controls elements
$ueTimeConductorRtH: (25px, 3px, 20px); // Heights for elements in Real-time mode
$timeCondInputTimeSysDefW: 165px; // Default width for datetime value inputs
$timeCondInputDeltaDefW: 60px; // Default width for delta value inputs, typically 00:00:00
$timeCondInputDeltaDefW: 65px; // Default width for delta value inputs, typically 00:00:00
$timeCondTOIIconD: 12px; // height and width of icon used for TOI indicator
$timeCondTOIValOffset: 0px;
$ticksBlockerFadeW: 50px;

18
platform/features/conductor/core/res/sass/_time-conductor-base.scss
View File

@@ -162,9 +162,6 @@
.l-time-conductor-inputs {
pointer-events: auto;
}
input[type="text"] {
@include trans-prop-nice(padding, 250ms);
}
.time-range-input input[type="text"] {
width: $timeCondInputTimeSysDefW;
}
@@ -290,18 +287,6 @@
.l-time-conductor-inputs-holder {
.l-time-range-input-w {
input[type="text"]:not(.error) {
background: transparent;
box-shadow: none;
border-radius: 0;
padding-left: 0;
padding-right: 0;
&:hover,
&:focus {
@include nice-input();
padding: $inputTextP;
}
}
.icon-calendar {
display: none;
}
@@ -309,8 +294,11 @@
display: none;
}
&.end-date {
// Displays the current time
pointer-events: none;
input[type="text"] {
background: none;
box-shadow: none;
color: pullForward($colorTimeCondKeyBg, 5%);
margin-right: $interiorMargin;
tab-index: -1;

4
platform/features/conductor/core/res/templates/time-conductor.html
View File

@@ -38,7 +38,7 @@
ng-model="boundsModel"
ng-blur="tcController.setOffsetsFromView(boundsModel)"
field="'startOffset'"
class="hrs-min-input">
class="s-input-inline hrs-min-input">
</mct-control>
</span>
</span>
@@ -71,7 +71,7 @@
ng-model="boundsModel"
ng-blur="tcController.setOffsetsFromView(boundsModel)"
field="'endOffset'"
class="hrs-min-input">
class="s-input-inline hrs-min-input">
</mct-control>
</span>
</span>

2
platform/features/layout/res/templates/frame.html
View File

@@ -23,7 +23,7 @@
<div class="abs object-browse-bar l-flex-row">
<div class="left flex-elem l-flex-row grows">
<mct-representation
key="'object-header'"
key="'object-header-frame'"
mct-object="domainObject"
class="l-flex-row flex-elem object-header grows">
</mct-representation>