Review and integrate UI enhancements (#2078)
* [Frontend] WIP New local-controls classes Fixes #2000 - h-local-controls - Markup in plots changed - Changed reset plot button's icon * [Frontend] WIP local-controls classes Fixes #2000 - Refactoring to use and apply local-control classes consistently; - Plots and imagery done in main view and Display Layout contexts; * [Frontend] WIP local-controls classes Fixes #2000 - Use local-control classes in Timelines; - Group Timeline buttons in l-btn-set; - Use reset icon glyph; * [Frontend] WIP local-controls classes Fixes #2000 - Slight increase in size to buttons in frame context; * [Frontend] local-controls classes Fixes #2000 - Code cleanup; - Update Style Guide content; - Provisionally done, needs unit testing and double-checking; * [Frontend] Better selecting in browse mode Fixes #2000 - Better colors and approach to selecting in browse mode; * [Frontend] Tweaks to pane collapse mini-tabs Fixes #1758 Fixes #2000 - Enlarged mini-tabs and moved to screen top; - Removed duplicative theme-based constants; * [Frontend] Tweaks to "nav up" arrow button Fixes #1758 Fixes #2000 - Increased hit area of .l-back "nav up" arrow in object-browse-bar; * [Frontend] Glyph improvements Fixes #1758 Fixes #2000 - New arrow glyph for view controls; - Increased hit area of view controls in tree for mobile and desktop; - Better "hamburger" menu glyph; * [Frontend] Inspector refactor to CSS grid WIP Fixes #1758 Fixes #2000 - WIP!!!; - Good progress on Properties section; * [Frontend] Inspector refactor to CSS grid WIP Fixes #2000 - Significant mods to CSS and markup; - New grid archetypes classes; - Added title attribs to plot options edit and browse props; - Added value, alarm markers to plot series browse props; - Nearly done (?) but needs unit testing and cleanups; * [Frontend] Minor tweaks to form and form-row Fixes #2000 - Fixing margin problem with .form-row; - h2 instead of div.section-header; * [Frontend] Fixed H2 in Elements pool Fixes #2000 * Refinements to Time Conductor Fixes #2000 - Tweaks size of fixed position grab ticks; - Positioning refinements to ticks and text; - Hide major tick marks; * Hide View Large button for nested hidden-frame Layouts Fixes #2000 - When a layout is nested and has its frame hidden, hide the View Large button; * Better hiding of Time Conductor "Submit" button Fixes #2000 * Re-added new icon-arrow-right-equilateral glyph; Fixes #2000 Fixes #2078 * Remove commented styles/markup Fixes #2000 Fixes #2078 * Repaired approach to hiding Time Conductor Submit button Fixes #2000 Fixes #2078 - Renamed .off to .invisible and added refinements; * Fixed wrong conflict resolutions; polish search Fixes #2000 Fixes #2078 - .invisible instead of .off in search.html; - Minor polishing to search; fixes #1758 fixes #1763 fixes #2011
This commit is contained in:
Charles Hacskaylo
committed by
Pete Richards
Pete Richards
parent
07fb20c32f
commit
9d2c7a6de5
@@ -1,5 +1,5 @@
|
||||
$ueTimeConductorH: (25px, 16px, 20px); // Heights for Ticks, Data Visualization, Controls elements
|
||||
$ueTimeConductorRtH: (25px, 3px, 20px); // Heights for elements in Real-time mode
|
||||
$ueTimeConductorH: (20px, 3px, 20px); // Heights for Ticks, Data Visualization, Controls elements
|
||||
$ueTimeConductorRtH: (20px, 3px, 20px); // Heights for elements in Real-time mode
|
||||
$timeCondInputTimeSysDefW: 165px; // Default width for datetime value inputs
|
||||
$timeCondInputDeltaDefW: 65px; // Default width for delta value inputs, typically 00:00:00
|
||||
$timeCondTOIIconD: 12px; // height and width of icon used for TOI indicator
|
||||
|
||||
@@ -192,15 +192,19 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
> g {
|
||||
// Tick holder
|
||||
font-size: 0.9em;
|
||||
transform: translateY(23px);
|
||||
}
|
||||
path {
|
||||
path,
|
||||
line {
|
||||
// Line beneath ticks
|
||||
display: none;
|
||||
}
|
||||
line {
|
||||
// Tick marks
|
||||
stroke: $c;
|
||||
//stroke: $c;
|
||||
//transform: translateY(-10px);
|
||||
}
|
||||
text {
|
||||
// Tick labels
|
||||
@@ -256,7 +260,7 @@
|
||||
|
||||
.l-time-conductor-controls {
|
||||
align-items: center;
|
||||
margin-top: $interiorMargin;
|
||||
margin-top: $interiorMarginLg;
|
||||
.l-time-conductor-zoom-w {
|
||||
justify-content: flex-end;
|
||||
.time-conductor-zoom {
|
||||
@@ -334,27 +338,25 @@
|
||||
content: $i;
|
||||
}
|
||||
.l-axis-holder {
|
||||
$angle: 90deg;
|
||||
$c0: rgba($colorBodyFg, 0.1);
|
||||
$c1: rgba($colorBodyFg, 0.1);
|
||||
$c2: transparent;
|
||||
$grabTicksH: 3px;
|
||||
$grabTicksXSpace: 4px;
|
||||
$grabTicksYOffset: 0;
|
||||
$grabTicksYOffset: 2px;
|
||||
$grabTicksXSpace: 3px;
|
||||
transition: background 150ms ease-in-out;
|
||||
@include cursorGrab();
|
||||
svg {
|
||||
$c1: rgba($colorBodyFg, 0.2);
|
||||
$angle: 90deg;
|
||||
@include background-image(linear-gradient($angle,
|
||||
$c1 1px, $c2 1px,
|
||||
$c2 100%
|
||||
));
|
||||
background-position: center $grabTicksYOffset;
|
||||
background-repeat: repeat-x;
|
||||
background-size: $grabTicksXSpace $grabTicksH;
|
||||
background-size: $grabTicksXSpace $r1H - ($grabTicksYOffset * 2);
|
||||
}
|
||||
&:hover {
|
||||
@include background-image(linear-gradient(
|
||||
$c0 70%, $c2 100%
|
||||
));
|
||||
background: $c0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -77,7 +77,7 @@
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<input type="submit" class="off">
|
||||
<input type="submit" class="invisible">
|
||||
</form>
|
||||
<conductor-axis class="mobile-hide" view-service="tcController.conductorViewService"></conductor-axis>
|
||||
</div>
|
||||
|
||||
@@ -76,9 +76,8 @@ define(
|
||||
|
||||
this.xAxis = d3Axis.axisTop();
|
||||
|
||||
// draw x axis with labels and move to the bottom of the chart area
|
||||
this.axisElement = vis.append("g")
|
||||
.attr("transform", "translate(0," + (height - PADDING) + ")");
|
||||
// draw x axis with labels. CSS is used to position them.
|
||||
this.axisElement = vis.append("g");
|
||||
|
||||
if (this.timeAPI.timeSystem() !== undefined) {
|
||||
this.changeTimeSystem(this.timeAPI.timeSystem());
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
<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="split-pane-component has-local-controls 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"
|
||||
ng-class="{ 'hide-nice': !showLocalControls }">
|
||||
<div class="h-local-controls h-local-controls-overlay-content h-local-controls-trans s-local-controls local-controls-hidden l-flex-row">
|
||||
<span class="holder flex-elem grows">
|
||||
<input class="icon-brightness" type="range"
|
||||
min="0"
|
||||
@@ -38,18 +37,12 @@
|
||||
ng-click="showThumbsBubble = (showThumbsBubble) ? false:true"></a>
|
||||
<span class="l-time">{{imagery.getTime()}}</span>
|
||||
</div>
|
||||
<div class="l-controls-w flex-elem">
|
||||
<div class="h-local-controls flex-elem">
|
||||
<a class="s-button pause-play"
|
||||
ng-click="imagery.paused(!imagery.paused())"
|
||||
ng-class="{ paused: imagery.paused() }"></a>
|
||||
<a href="{{imagery.getImageUrl()}}"
|
||||
ng-if="imagery.getImageUrl()"
|
||||
target="_blank"
|
||||
title="Open image in new tab."
|
||||
class="s-button icon-new-window">
|
||||
</a>
|
||||
<a href=""
|
||||
class="s-button l-mag s-mag ui-symbol vsm icon-arrows-out"
|
||||
class="s-button l-mag s-mag vsm icon-reset"
|
||||
ng-click="clipped = false"
|
||||
ng-show="clipped === true"
|
||||
title="Not all of image is visible; click to reset."></a>
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
this source code distribution or the Licensing information page available
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<div class="frame frame-template t-frame-inner abs t-object-type-{{ domainObject.getModel().type }}">
|
||||
<div class="frame frame-template t-frame-inner abs has-local-controls t-object-type-{{ domainObject.getModel().type }}">
|
||||
<div class="abs object-browse-bar l-flex-row">
|
||||
<div class="left flex-elem l-flex-row grows">
|
||||
<mct-representation
|
||||
@@ -28,7 +28,7 @@
|
||||
class="l-flex-row flex-elem object-header grows">
|
||||
</mct-representation>
|
||||
</div>
|
||||
<div class="btn-bar right l-flex-row flex-elem flex-justify-end flex-fixed">
|
||||
<div class="btn-bar right l-flex-row flex-elem flex-justify-end flex-fixed h-local-controls local-controls-hidden">
|
||||
<mct-representation
|
||||
key="'switcher'"
|
||||
ng-model="representation"
|
||||
|
||||
@@ -22,12 +22,11 @@
|
||||
|
||||
<div ng-if="domainObject.getCapability('editor').inEditContext()"
|
||||
ng-controller="TableOptionsController"
|
||||
class="l-controls-first flex-elem grows l-inspector-part">
|
||||
<em class="t-inspector-part-header" title="Display properties for this object">Table Options</em>
|
||||
class="flex-elem grows l-inspector-part">
|
||||
<mct-form
|
||||
ng-model="configuration.table.columns"
|
||||
structure="columnsForm"
|
||||
name="columnsFormState"
|
||||
class="flex-elem l-flex-row no-margin">
|
||||
class="flex-elem no-margin">
|
||||
</mct-form>
|
||||
</div>
|
||||
|
||||
@@ -148,14 +148,7 @@
|
||||
$bg: $timelineHeaderColorBg;
|
||||
$l: 5%;
|
||||
@include user-select(none);
|
||||
@include background-image(linear-gradient(-90deg, rgba($bg, 1), rgba($bg, 1) 70%, rgba($bg, 0) 100%));
|
||||
.s-button {
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
.icon {
|
||||
font-size: 0.7rem !important;
|
||||
}
|
||||
}
|
||||
@include background-image(linear-gradient(-90deg, rgba($bg, 1), rgba($bg, 1) 75%, rgba($bg, 0) 100%));
|
||||
}
|
||||
|
||||
.l-timeline-resource-graph {
|
||||
|
||||
@@ -106,30 +106,32 @@
|
||||
|
||||
<!-- TOP PANE GANTT BARS -->
|
||||
<div class="split-pane-component l-timeline-pane t-pane-h l-pane-top t-timeline-gantt l-timeline-gantt s-timeline-gantt">
|
||||
<div class="l-hover-btns-holder s-hover-btns-holder">
|
||||
<div class="h-local-controls l-hover-btns-holder s-hover-btns-holder">
|
||||
<a class="s-button icon-timer"
|
||||
ng-click="scroll.follow = true"
|
||||
ng-show="!toiController.isFollowing() && toiController.isActive()"
|
||||
title="Follow time bounds">
|
||||
</a>
|
||||
|
||||
<a class="s-button icon-arrows-out"
|
||||
ng-click="scroll.follow = false; zoomController.fit()"
|
||||
ng-show="true"
|
||||
title="Zoom to fit">
|
||||
</a>
|
||||
<div class="l-btn-set">
|
||||
<a class="s-button icon-reset"
|
||||
ng-click="scroll.follow = false; zoomController.fit()"
|
||||
ng-show="true"
|
||||
title="Zoom to fit">
|
||||
</a>
|
||||
|
||||
<a class="s-button icon-magnify-in"
|
||||
ng-click="scroll.follow = false; zoomController.zoom(-1)"
|
||||
ng-show="true"
|
||||
title="Zoom in">
|
||||
</a>
|
||||
<a class="s-button icon-magnify-in"
|
||||
ng-click="scroll.follow = false; zoomController.zoom(-1)"
|
||||
ng-show="true"
|
||||
title="Zoom in">
|
||||
</a>
|
||||
|
||||
<a class="s-button icon-magnify-out"
|
||||
ng-click="scroll.follow = false; zoomController.zoom(1)"
|
||||
ng-show="true"
|
||||
title="Zoom out">
|
||||
</a>
|
||||
<a class="s-button icon-magnify-out"
|
||||
ng-click="scroll.follow = false; zoomController.zoom(1)"
|
||||
ng-show="true"
|
||||
title="Zoom out">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="overflow: hidden; position: absolute; left: 0; top: 0; right: 0; height: 30px;" mct-scroll-x="scroll.x">
|
||||
|
||||
Reference in New Issue
Block a user