Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Plots] Reduce space used by independent Time Conductors #4975

Closed
akhenry opened this issue Mar 22, 2022 · 7 comments · Fixed by #6768
Closed

[Plots] Reduce space used by independent Time Conductors #4975

akhenry opened this issue Mar 22, 2022 · 7 comments · Fixed by #6768
Labels
type:enhancement
Projects
Time Conductor Refactor
Milestone
Target:3.0.0

Comments

@akhenry
Copy link
Contributor

akhenry commented Mar 22, 2022

Is your feature request related to a problem? Please describe.
We should use less vertical space for displaying independent time conductors (and the toggle button) in plots.

MORE DETAIL NEEDED
@shefalijoshi
Copy link
Contributor

@charlesh88 Please elaborate on UI changes here.

@charlesh88
Copy link
Contributor

Writeup and clickable mockup now available in the VIPER Open MCT Confluence area in "Space Optimization & Compact Time Conductor".

@charlesh88
Copy link
Contributor

charlesh88 commented May 13, 2022 •
edited by shefalijoshi

Todos

Discussed with Shefali today:

@charlesh88

  • Markup and styling for "read-only" ITC views.

image

image

  • Layout behavior for ITC in main view and frame headers.
  • Time Control symbols font glyph (?).
  • The current implementation assumes that clicking away from time conductor controls (outside the popup) will close the popup. This is the case for both the global time conductor as well as the independent time conductor. Do you foresee a use case where we want both the popup for the global time conductor as well as the popup for independent time conductor open at the same time? If so, we might want to limit closing the popups to a specific interaction (like clocking on the X icon).

@shefalijoshi

  • Move controls into hover menu element per design.
  • Any needed reactive wiring in ITC views.

@charlesh88 charlesh88 changed the title [Plots] Reduce space used by independent time conductors [Plots] Reduce space used by independent Time Conductors May 13, 2022
@charlesh88
Copy link
Contributor

charlesh88 commented May 13, 2022 •
edited

Significant work pushed to time-conductor-4975. Still WIP, colors, and more still need refining.
image

charlesh88 added a commit that referenced this issue May 14, 2022
@charlesh88
Fixed #4975 - Compact Time Conductor styling
4533112 
- Moved IndependentTimeConductor.vue into BrowseBar.vue.
- Styling for read-only conductor views.
- VERY WIP!
charlesh88 added a commit that referenced this issue May 14, 2022
@charlesh88
Fixes #4975 - Compact Time Conductor styling
9e174c4 
- Significant CSS and markup work.
- Refinements to `c-icon-button` classes, including new `--compact` definition.
- Styling for independent and main conductor components.
- Code cleanups.
- STILL WIP!
charlesh88 added a commit that referenced this issue May 14, 2022
@charlesh88
Fixes #4975 - Compact Time Conductor styling
1e302e9 
- Added CSS class `is-expanded` to main view TC component.
charlesh88 added a commit that referenced this issue May 17, 2022
@charlesh88
Fixes #4975 - Compact Time Conductor styling
d0cc125 
- Markup and script moved into new timePopup* components.
- Significant work on styling.
- Theme constants augmented, better naming.
charlesh88 added a commit that referenced this issue May 17, 2022
@charlesh88
Fixes #4975 - Compact Time Conductor styling
47e4c3a 
- Styling for new mini toggle slider switch.
charlesh88 added a commit that referenced this issue May 17, 2022
@charlesh88
Fixes #4975 - Compact Time Conductor styling
fc83d88 
- Fixed inputs popup layout with style and layout.
- More `$colorTime*` theme constants defined and applied.
- Better CSS organization.
charlesh88 added a commit that referenced this issue May 17, 2022
@charlesh88
Fixes #4975 - Compact Time Conductor styling
f22f826 
- Stubbed buttons into popups.
- More `$colorTime*` theme constants defined and applied.
- Still quite WIP!
charlesh88 added a commit that referenced this issue May 17, 2022
@charlesh88
Fixes #4975 - Compact Time Conductor styling
e5d701d 
- Layout, display behavior.
- Hide functional buttons to be moved.
- Remove unneeded markup.
- Input widths for fixed popup date and time.
- Add new `c-not-button` class.
- Add new `u-flex-spreader` class.
- Code cleanups.
charlesh88 added a commit that referenced this issue May 17, 2022
@charlesh88
Fixes #4975 - Compact Time Conductor styling
04c76a0 
- Fix SCSS error.
charlesh88 added a commit that referenced this issue May 18, 2022
@charlesh88
Fixes #4975 - Compact Time Conductor styling
6ec0749 
- Layout, display behavior for Time Conductor in layout frames.
- Code cleanups.
charlesh88 added a commit that referenced this issue May 18, 2022
@charlesh88
Fixes #4975 - Compact Time Conductor styling
2506dfb 
- Convert Time Conductor symbol to use SVG instead of font glyph
charlesh88 added a commit that referenced this issue May 18, 2022
@charlesh88
Fixes #4975 - Compact Time Conductor styling
2f1eb7f 
- Styling for Time Conductor in layout frames.
@akhenry
Copy link
Contributor Author

akhenry commented May 18, 2022

@shefalijoshi @charlesh88 This ready for Build 6 feature freeze?

@unlikelyzero unlikelyzero added this to Issues on current design in Time Conductor Refactor Oct 19, 2022
jvigliotta pushed a commit that referenced this issue Jun 29, 2023
@charlesh88 @jvigliotta
Fixes #4975 - Compact Time Conductor styling
c61fa04 
- Significant CSS and markup work.
- Refinements to `c-icon-button` classes, including new `--compact` definition.
- Styling for independent and main conductor components.
- Code cleanups.
- STILL WIP!
jvigliotta pushed a commit that referenced this issue Jun 29, 2023
@charlesh88 @jvigliotta
Fixes #4975 - Compact Time Conductor styling
3e7e9d5 
- Added CSS class `is-expanded` to main view TC component.
jvigliotta pushed a commit that referenced this issue Jun 29, 2023
@charlesh88 @jvigliotta
Fixes #4975 - Compact Time Conductor styling
bc20d89 
- Markup and script moved into new timePopup* components.
- Significant work on styling.
- Theme constants augmented, better naming.
jvigliotta pushed a commit that referenced this issue Jun 29, 2023
@charlesh88 @jvigliotta
Fixes #4975 - Compact Time Conductor styling
26c592f 
- Styling for new mini toggle slider switch.
jvigliotta pushed a commit that referenced this issue Jun 29, 2023
@charlesh88 @jvigliotta
Fixes #4975 - Compact Time Conductor styling
5fa4898 
- Fixed inputs popup layout with style and layout.
- More `$colorTime*` theme constants defined and applied.
- Better CSS organization.
jvigliotta pushed a commit that referenced this issue Jun 29, 2023
@charlesh88 @jvigliotta
Fixes #4975 - Compact Time Conductor styling
7247a42 
- Stubbed buttons into popups.
- More `$colorTime*` theme constants defined and applied.
- Still quite WIP!
jvigliotta pushed a commit that referenced this issue Jun 29, 2023
@charlesh88 @jvigliotta
Fixes #4975 - Compact Time Conductor styling
7f97441 
- Layout, display behavior.
- Hide functional buttons to be moved.
- Remove unneeded markup.
- Input widths for fixed popup date and time.
- Add new `c-not-button` class.
- Add new `u-flex-spreader` class.
- Code cleanups.
jvigliotta pushed a commit that referenced this issue Jun 29, 2023
@charlesh88 @jvigliotta
Fixes #4975 - Compact Time Conductor styling
65801de 
- Fix SCSS error.
jvigliotta pushed a commit that referenced this issue Jun 29, 2023
@charlesh88 @jvigliotta
Fixes #4975 - Compact Time Conductor styling
5db595d 
- Layout, display behavior for Time Conductor in layout frames.
- Code cleanups.
jvigliotta pushed a commit that referenced this issue Jun 29, 2023
@charlesh88 @jvigliotta
Fixes #4975 - Compact Time Conductor styling
e743e09 
- Convert Time Conductor symbol to use SVG instead of font glyph
jvigliotta pushed a commit that referenced this issue Jun 29, 2023
@charlesh88 @jvigliotta
Fixes #4975 - Compact Time Conductor styling
b744594 
- Styling for Time Conductor in layout frames.
jvigliotta pushed a commit that referenced this issue Jun 29, 2023
@charlesh88 @jvigliotta
Closes #4975
485ff91 
- CSS fix for to-be-deprecated division operation.
@jvigliotta jvigliotta mentioned this issue Jun 29, 2023
Merged
15 tasks
charlesh88 added a commit that referenced this issue Jul 12, 2023
@charlesh88
Closes #4975
22fb33b 
- Styling for main and independent Time Conductors.
- Much CSS refinement, better class naming.
- Added new `fade-truncate` styles.
- Added ``:title` values to all key elements.
- Code formatting cleanups.
charlesh88 added a commit that referenced this issue Jul 12, 2023
@charlesh88
Closes #4975
f90f6d6 
- New styles for `c-super-menu--sm`, used by Time Conductor.
- Removed ``:title` attribute from the super menu items which was duplicating
the existing description and causing visual problems.
- Corrected description for the clock to remove refs to real-time.
- Removed now unused CSS file `conductor-mode.scss`.
- New cButtonPadding SCSS function for more portable application
of `--compact` styling.
- Refined hover colors for TC in Espresso theme.
- Added descriptive title attributes to all TC buttons.
charlesh88 added a commit that referenced this issue Jul 13, 2023
@charlesh88
Closes #4975
bef67c8 
- Better layout in `c-super-menu--sm`.
charlesh88 added a commit that referenced this issue Jul 13, 2023
@charlesh88
Closes #4975
be793dc 
- Better title attribute for time system button.
charlesh88 added a commit that referenced this issue Jul 13, 2023
@charlesh88
Closes #4975
b5a8a2b 
- Better layout in `c-super-menu--sm`.
- Better truncation approach in main Time Conductor settings.
charlesh88 added a commit that referenced this issue Jul 13, 2023
@charlesh88
Closes #4975
e8926da 
- Tweak.
charlesh88 added a commit that referenced this issue Jul 13, 2023
@charlesh88
Closes #4975
40e53e0 
- Tweaks to ITC padding and clock symbol size for alignment.
charlesh88 added a commit that referenced this issue Jul 13, 2023
@charlesh88
Closes #4975
4d28763 
- Tweaks to `fade-truncate` styling.
@charlesh88
Copy link
Contributor

Testing Notes

See #5773.

charlesh88 added a commit that referenced this issue Jul 14, 2023
@charlesh88
Closes #4975
9404384 
Closes #6177
- Fixed a regression to the Notebook Snapshots container
that broke the main title.
- Also fixed sizing as noted in #6177.
akhenry added a commit that referenced this issue Jul 19, 2023
@jvigliotta @charlesh88
@shefalijoshi @akhenry @unlikelyzero @scottbell
[Time] Conductors and API Enhancements (#6768)
42b5459 
* Fixed #4975 - Compact Time Conductor styling
* Fixed #5773 - Ubiquitous global clock
* Mode functionality added to TimeAPI
* TimeAPI modified to always have a ticking clock
* Mode dropdown added to independent and regular time conductors
* Overall conductor appearance modifications and enhancements
* TimeAPI methods deprecated with warnings
* Significant updates to markup, styling and behavior of main Time Conductor and independent version.


---------

Co-authored-by: Charles Hacskaylo <charlesh88@gmail.com>
Co-authored-by: Shefali <simplyrender@gmail.com>
Co-authored-by: Andrew Henry <akhenry@gmail.com>
Co-authored-by: John Hill <john.c.hill@nasa.gov>
Co-authored-by: Scott Bell <scott@traclabs.com>
@ozyx ozyx added this to the Target:3.0.0 milestone Jul 19, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
type:enhancement
Projects
Time Conductor Refactor
Issues on current design
Milestone
Target:3.0.0
Development

Successfully merging a pull request may close this issue.

[Time] Conductors and API Enhancements nasa/openmct
5 participants
@charlesh88 @akhenry @shefalijoshi @ozyx @unlikelyzero