From 56b9708ab7726683f8e1f9cae241509db9e5fe5e Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Tue, 2 Oct 2018 17:31:45 -0700 Subject: [PATCH] Review and integrate Time Conductor Vue style conversion (#2180) Styling updates for Vue version of Time Conductor --- .../commonUI/formats/src/DurationFormat.js | 2 +- .../commonUI/formats/src/UTCTimeFormat.js | 3 +- .../folderView/components/GridView.vue | 2 +- src/plugins/notebook/res/templates/entry.html | 2 +- src/plugins/timeConductor/Conductor.vue | 349 ++++++++------ src/plugins/timeConductor/ConductorAxis.vue | 94 +++- src/plugins/timeConductor/ConductorMode.vue | 88 ++-- .../timeConductor/ConductorModeIcon.vue | 139 ++++++ .../timeConductor/ConductorTimeSystem.vue | 34 +- src/plugins/timeConductor/DatePicker.vue | 135 ++++-- src/styles-new/_constants-snow.scss | 46 +- src/styles-new/_constants.scss | 2 +- src/styles-new/_controls.scss | 448 +++++++++++++----- src/styles-new/_global.scss | 16 - src/styles-new/_mixins.scss | 123 ++++- src/ui/components/controls/CreateButton.vue | 2 +- src/ui/components/layout/BrowseBar.vue | 6 +- src/ui/components/layout/Layout.vue | 6 +- 18 files changed, 1108 insertions(+), 389 deletions(-) create mode 100644 src/plugins/timeConductor/ConductorModeIcon.vue diff --git a/platform/commonUI/formats/src/DurationFormat.js b/platform/commonUI/formats/src/DurationFormat.js index 029b588071..5b665d3bb6 100644 --- a/platform/commonUI/formats/src/DurationFormat.js +++ b/platform/commonUI/formats/src/DurationFormat.js @@ -56,7 +56,7 @@ define([ }; DurationFormat.prototype.validate = function (text) { - return moment.utc(text, DATE_FORMATS).isValid(); + return moment.utc(text, DATE_FORMATS, true).isValid(); }; return DurationFormat; diff --git a/platform/commonUI/formats/src/UTCTimeFormat.js b/platform/commonUI/formats/src/UTCTimeFormat.js index cd0002e370..0fa6de53c1 100644 --- a/platform/commonUI/formats/src/UTCTimeFormat.js +++ b/platform/commonUI/formats/src/UTCTimeFormat.js @@ -29,6 +29,7 @@ define([ var DATE_FORMAT = "YYYY-MM-DD HH:mm:ss.SSS", DATE_FORMATS = [ DATE_FORMAT, + DATE_FORMAT + "Z", "YYYY-MM-DD HH:mm:ss", "YYYY-MM-DD HH:mm", "YYYY-MM-DD" @@ -74,7 +75,7 @@ define([ }; UTCTimeFormat.prototype.validate = function (text) { - return moment.utc(text, DATE_FORMATS).isValid(); + return moment.utc(text, DATE_FORMATS, true).isValid(); }; return UTCTimeFormat; diff --git a/src/plugins/folderView/components/GridView.vue b/src/plugins/folderView/components/GridView.vue index f303979bd9..b4c6d861eb 100644 --- a/src/plugins/folderView/components/GridView.vue +++ b/src/plugins/folderView/components/GridView.vue @@ -22,7 +22,7 @@
-
+
diff --git a/src/plugins/notebook/res/templates/entry.html b/src/plugins/notebook/res/templates/entry.html index 41b8bdcf75..07ee3b8557 100644 --- a/src/plugins/notebook/res/templates/entry.html +++ b/src/plugins/notebook/res/templates/entry.html @@ -28,7 +28,7 @@
-
diff --git a/src/plugins/timeConductor/Conductor.vue b/src/plugins/timeConductor/Conductor.vue index f240be2acb..5dfbc8ebf6 100644 --- a/src/plugins/timeConductor/Conductor.vue +++ b/src/plugins/timeConductor/Conductor.vue @@ -20,106 +20,211 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ @@ -129,14 +234,13 @@ import ConductorMode from './ConductorMode.vue'; import ConductorTimeSystem from './ConductorTimeSystem.vue'; import DatePicker from './DatePicker.vue'; import ConductorAxis from './ConductorAxis.vue'; +import ConductorModeIcon from './ConductorModeIcon.vue'; const DEFAULT_DURATION_FORMATTER = 'duration'; const SECONDS = 1000; const DAYS = 24 * 60 * 60 * SECONDS; const YEARS = 365 * DAYS; -const MAX_ZOOM_OUT = 10 * YEARS; -const MAX_ZOOM_IN = 5 * SECONDS; const RESIZE_POLL_INTERVAL = 200; export default { @@ -145,7 +249,8 @@ export default { ConductorMode, ConductorTimeSystem, DatePicker, - ConductorAxis + ConductorAxis, + ConductorModeIcon }, data() { let bounds = this.openmct.time.bounds(); @@ -155,7 +260,6 @@ export default { let durationFormatter = this.getFormatter(timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER); return { - currentZoom: this.calculateZoomFromBounds(), timeFormatter: timeFormatter, durationFormatter: durationFormatter, offsets: { @@ -184,7 +288,7 @@ export default { this.isUTCBased = timeSystem.isUTCBased; }, setOffsetsFromView($event) { - if (this.offsetsChanged() && this.$refs.conductorForm.checkValidity()){ + if (this.$refs.conductorForm.checkValidity()){ let startOffset = 0 - this.durationFormatter.parse(this.offsets.start); let endOffset = this.durationFormatter.parse(this.offsets.end); @@ -198,13 +302,8 @@ export default { return false; } }, - offsetsChanged() { - let currentOffsets = this.openmct.time.clockOffsets(); - return this.offsets.start !== currentOffsets.start || - this.offsets.end !== currentOffsets.end; - }, setBoundsFromView($event) { - if (this.boundsChanged() && this.$refs.conductorForm.checkValidity()){ + if (this.$refs.conductorForm.checkValidity()){ let start = this.timeFormatter.parse(this.formattedBounds.start); let end = this.timeFormatter.parse(this.formattedBounds.end); @@ -218,14 +317,6 @@ export default { return false; } }, - boundsChanged() { - let currentBounds = this.openmct.time.bounds(); - return this.timeFormatter.parse(this.formattedBounds.start) !== currentBounds.start || - this.timeFormatter.parse(this.formattedBounds.end) !== currentBounds.end; - }, - showValidityMessage($event) { - $event.target.reportValidity(); - }, setViewFromClock(clock) { this.isFixed = clock === undefined; }, @@ -239,9 +330,6 @@ export default { this.offsets.start = this.durationFormatter.format(Math.abs(offsets.start)); this.offsets.end = this.durationFormatter.format(Math.abs(offsets.end)); }, - showValidityMessage($event) { - $event.target.reportValidity(); - }, validateBounds(startOrEnd, input) { let validationResult = true; @@ -297,49 +385,8 @@ export default { this.validateBounds('end', this.$refs.endDate); this.setBoundsFromView(); }, - zoomLevelToTimespan() { - let minMaxDelta = MAX_ZOOM_OUT - MAX_ZOOM_IN; - return minMaxDelta * Math.pow((1 - this.currentZoom), 4); - }, - zoom() { - let zoomTimespan = this.zoomLevelToTimespan(); - let start = this.openmct.time.bounds().start; - let end = this.openmct.time.bounds().end - let currentTimeSpan = end - start; - let delta = currentTimeSpan - zoomTimespan; - let bounds = { - start: start + delta / 2, - end: end - delta / 2 - }; - this.rawBounds = bounds; - this.setViewFromBounds(bounds); - this.zooming = false; - }, - calculateZoomFromBounds() { - let start = this.openmct.time.bounds().start; - let end = this.openmct.time.bounds().end - let zoomMaxMinDelta = MAX_ZOOM_OUT - MAX_ZOOM_IN; - let currentBoundsDelta = end - start; - - return 1 - Math.pow(currentBoundsDelta / zoomMaxMinDelta, 1 / 4); - } - - }, - computed: { - currentZoomText() { - return moment.duration(this.zoomLevelToTimespan()).humanize(); - } - }, - watch: { - currentZoom() { - if (!this.zooming) { - this.zooming = true; - requestAnimationFrame(this.zoom, RESIZE_POLL_INTERVAL); - } - } }, mounted() { - this.zooming = false; this.setTimeSystem(JSON.parse(JSON.stringify(this.openmct.time.timeSystem()))); this.openmct.time.on('bounds', this.setViewFromBounds); diff --git a/src/plugins/timeConductor/ConductorAxis.vue b/src/plugins/timeConductor/ConductorAxis.vue index 0d43747758..2049d87f70 100644 --- a/src/plugins/timeConductor/ConductorAxis.vue +++ b/src/plugins/timeConductor/ConductorAxis.vue @@ -20,14 +20,90 @@ * at runtime from the About dialog for additional information. *****************************************************************************/