From 08bed6c23a2e9da3ca3c12125b05f3a08061b1b6 Mon Sep 17 00:00:00 2001 From: Andrew Henry Date: Fri, 25 May 2018 18:58:49 -0700 Subject: [PATCH] Fluid layouts 2 electric boogaloo (#2047) * [Frontend] Viewport metatag updated Fixes #2008 - Added shrink-to-fit=no; * [Frontend] Fix to Time Conductor for Safari Fixes #2008 - CSS mod for gradient blockers in TC * [Frontend] Remove data visualization element in TC Fixes #2008 - Note: this element holds the TOI indicator! * [Frontend] Hide TC ticks when on mobile Fixes #2008 - Added class `mobile-hide` to * [Frontend] Significant mobile fixes for panes and viewport Fixes #2008 Fixes #1770 Fixes #1928 - Left and right panes now positioning properly in mobile; - Fixed body overflow problem for #2008 "viewport" issue; * fixes multiple issues related to 2008 context menu firing too often - fixed by setting a isDragging flag Add and Remove respective classes on mobile orientation change by using mathMedia Close tree pane when navigating in mobile portrait only * [Frontend] Various Fixes #2008 - Always show Timeline zoom controls; - Prevent inline editing of object names in the main view when in mobile; * Add touch functionality to mct-drag it allows users to use the splitter in mobile and include appropriate tests * remove couchdb and reinstall localStorage * [Frontend] Mods to imagery CSS Fixes #2008 - Reduced size of image thumbnails; - Changed min-heights of image and thumbnail holders for .mobile.phone * [Frontend] Add Advanced CSS property to Display Layouts - WIP! - Add property to bundle; - Add CSS for column, row and fit-all classes; * [Frontend] Grid holder and class prefixing - WIP! - Edit grid-holder set to position: absolute - Added "fl-" prefix to fluid layout class names; * [Frontend] More CSS tweaks - WIP! * [Frontend] Added .drag-vertical - For use in Elements pool; - Applied in elements.html; * fix: check if stats is present before reseting zoom (#2029) * [Timer] Fix regression in timer visual indication and add tests * [TimeConductor] Fixes Issue #925 (#2020) * [TimeConductor] Fixes Issue #925` - Pressing enter in date field will update bounds properly in Safari * [Copyright] Update copyright year across platform code references Fixes #2034. * fixes issue #1999 - Use Object name as default export filename (#2001) * fixes issue #1999 add dynamic name(object name) to exportAsCSV filename * make requested changes * [Frontend] Add Advanced CSS property to Display Layouts - WIP! - Add property to bundle; - Add CSS for column, row and fit-all classes; * [Frontend] Grid holder and class prefixing - WIP! - Edit grid-holder set to position: absolute - Added "fl-" prefix to fluid layout class names; * [Frontend] More CSS tweaks - WIP! * [Frontend] Added .drag-vertical - For use in Elements pool; - Applied in elements.html; * [Frontend] More CSS tweaks - WIP! - Added .fl-phone-best-fit * working drag and switch, need to mutate * fix conflict * add ability to rearrange composition using drag gestures * add maxHeight and maxWidth to layout frames * [Frontend] Added fl-mobile-best-fit * [Frontend] Allow editor to set mins dimensions for fluid layout - Cleanups in CSS; - Mod to LayoutController.js to use minWidth and minHeight; * [Frontend] Styles for reordering in Elements pool - Changed class "dragging" to "reordering"; - Visual styling WIP; - TODO: style "reorder-actor" when implemented; * add reorder-actor class to draggable item in elements pool when selected and remove class when dropped * stacked plots reload on composition change * [Frontend] Tweaks to Elements pool reordering styles - "reorder-actor" added/removed from parent tree item; - Refined styling for drag in process in list; * [Frontend] Added new 12px list view glyph - Font files and CSS updates; * [Frontend] Added new 12px grippy glyph - Font files and CSS updates for Elements pool sorting styling; * fix failing test * make reviewer requested changes * remove create dialog from mobile --- .../commonUI/edit/res/templates/elements.html | 8 +- .../src/controllers/ElementsController.js | 93 +++++++++++++++- .../icomoon-project-openmct-symbols-12px.json | 99 +++++++++++++++++- .../fonts/symbols/openmct-symbols-12px.eot | Bin 1680 -> 2104 bytes .../fonts/symbols/openmct-symbols-12px.svg | 2 + .../fonts/symbols/openmct-symbols-12px.ttf | Bin 1464 -> 1888 bytes .../fonts/symbols/openmct-symbols-12px.woff | Bin 1540 -> 1964 bytes .../commonUI/general/res/sass/_glyphs.scss | 2 + .../general/res/sass/controls/_controls.scss | 24 ++++- .../general/res/sass/edit/_editor.scss | 8 +- .../commonUI/general/res/sass/tree/_tree.scss | 18 ++++ .../general/res/sass/user-environ/_frame.scss | 76 ++++++++++++++ platform/features/layout/bundle.js | 6 ++ .../features/layout/res/templates/layout.html | 4 +- .../features/layout/src/LayoutController.js | 4 +- .../layout/test/LayoutControllerSpec.js | 4 +- .../src/telemetry/StackedPlotController.js | 14 +++ 17 files changed, 343 insertions(+), 19 deletions(-) diff --git a/platform/commonUI/edit/res/templates/elements.html b/platform/commonUI/edit/res/templates/elements.html index a2579b40b5..54ad9e0fc5 100644 --- a/platform/commonUI/edit/res/templates/elements.html +++ b/platform/commonUI/edit/res/templates/elements.html @@ -25,9 +25,15 @@ ng-model="filterBy">
-
    +
    • + + 6Kr zGZM_Y%c5<0dw;pp(2u5}Tb6E^|1-O0ojF#M7mcLg)4Gx5LdI6kUeo)nu4cDnUX^nR z^|GJQN%iXaaoqKjw#pB2$I!=xAL~DxLZ0`uIp)F?x_8=9!&5*vE1;p5?sD+TV1zI! z1FfY-2+L5TCa(d{t1rBF6Jk3)m)SpBzC806J&N2VzTZmudzI{d71llNtnQoOL{fA5 dtt7X+AYvH61Dvp4_J|Bd&`?6~gQ+~>{{YDPlQIAR delta 322 zcmdlXFoBnC0viLv4%UfmW-QeWu4xk;R@c`tFfi-^;)LYf!~*ei`Lfoc!cOh7}AEK)wr*&zGB6QNX~h$Dj!m2muNxVJ}n1M*9N zhAI{07nd+F17#RkXMp4xn3+Q-&tP24XfWA^Nt@FFBm)F2lM9&S1r0zf20lSfFa~Ow zyoPDw`~fLe2mH diff --git a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-12px.svg b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-12px.svg index c8f0f279a9..db11c140f0 100755 --- a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-12px.svg +++ b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-12px.svg @@ -8,5 +8,7 @@ + + \ No newline at end of file diff --git a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-12px.ttf b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-12px.ttf index 652f886b862240fb0b545a0bf6261e931d93e01f..b985d7eb205a3dfd014c32ddc12e0c7c4632c954 100755 GIT binary patch delta 762 zcmZ`%O=uHA6#iyr+oVZJlO|dZvD#L4LBZJ6X2FVo2#N?EiV6yC)~0RH#4a>o^b+yv z#jqZ{>&ZQODdItLs&_#T3VKni7b$uRiQjBZ2uc>-`@ZkJH*aR=%|`T7tOfxfiu+JF za%n!39T`nOWaJeszf^YIG55O#h&1)as(n0r`KY+;6cQEV z2Vj(#&lMR6HPjpGXVeFZ9iyBqQJm621d(H)kPBbsGGXrwo_it zY^N810Ukh3x@+qd9+Y3`l+Ht`8}-*u#k5xthlVcd1iu0AiP*Pyn#@2fekL$r5V6Ei zU|j8Oih3;qw0*gyeE$C!rjWrL&S4&lxP?1FGBr3gY0e(a&182c`f$-F9vT;+n6M5D z`-DjL@ZS1bzosv9mTB9jmHQXP9(yNackrr}RdUX>vQlZ^<>E2dcdI(p8f8QGrL}4S z<4&!{-|eIqkeBuF1&Y+sO=lz%_@X3%)6Y}HIbmrYR9oO zX>skEEb`m%{nq8@-WB;EePQMO*Ts?JzY#U`Eb;DOKA5XU@0YYshIisY5|W^`V&D_x1Y@8MpaU8I z|7YNz{DDz(GAmQU6#ix=X<{4lFfnyeN*|JI6>OWfxnM<9Y!&gb5OE>c#J++yHqbz$n}E2} zh2{DSbm#3ta3e0`%3q)x7jBg3rWV|l#P8fZ2ucRN`Of*~%sI)NbDxHGBgyR>i;Ga; z3hZLQ<1Cc(+aKSVNLHRL7ji{F<$3U4Fj)L)t>?C==@I(D7NYALkJhLiCte8lzuw=; zujW<&pWMp`VkO_NJVk1I^p6PwRr4udD3t+!g8qmgQ3EzMml=26KTF}TKxfrTAy;N$ z|78jC5Xa+(xxy+n{y;q@nA{(_Tio0#@&7#U#2H$~+;c+ewVHO`s*~5QQjz6v5)@f5 z(gJVPrif|!K7^weJOF(N#}0X50p3uJ1|rUso^Td)w$cwYTwOCRUvd!Rn8Z9T;U<>w z0NX%3(KkMpnw!ncq?558w(6k=hE*V}tW(N9tKwaDcYLK+(hnIcW!ot$^DnETcJst; z^KC0_^nA)nYa@HdRxf$K6V;9u)>X+%)GMCFO7&{1oOV2;OZjF_Td5i2?e*_%N9x^a zr}-}nd%%7)Tp#$dhC>(PTaF$XjS+LQu|)?&RJH>Kxed5({ni`jm3}gGW$nw4rO25- z81OL>@cBg6>%Opa&e#jVrtTd=lf>5?LgCI?KN1+mMeM1Nk_nV)38D=4oJ-3W^X{WL Gum1wklb4ME delta 417 zcmZ3(-@+qS?(gQtz{mguY%C1iAewat1LNe0>|zsjgzM{)a}x^~7#K5v;%h)yJmh3g zdSWq9j7bE@=YV2?^qk5xpqLC$El`M&;lqkK(=t*MQy3VSfnp41Ak0^{e0K&=5GWP` zaGJORiC@%b25Fht}gRsbz#UI64PfH60N zW?o`$Dp2eI&~haZ*8e0ESCC&^0`$idxH@JaiO; zhM5ag&A{-|0D^&P_yjq@7-;BZ1*VCU9a-vS(p(#= sb4y@&A^;PR3F5=WxEMqjt<8 diff --git a/platform/commonUI/general/res/sass/_glyphs.scss b/platform/commonUI/general/res/sass/_glyphs.scss index ab83aaacee..3e8664d8c7 100644 --- a/platform/commonUI/general/res/sass/_glyphs.scss +++ b/platform/commonUI/general/res/sass/_glyphs.scss @@ -266,3 +266,5 @@ $glyph-icon-notebook: '\e1131'; /************************** 12 PX CLASSES */ .icon-crosshair-12px { @include glyphBefore($glyph-icon-crosshair,'symbolsfont-12px'); } .icon-folder-12px { @include glyphBefore($glyph-icon-folder,'symbolsfont-12px'); } +.icon-list-view-12px { @include glyphBefore($glyph-icon-list-view,'symbolsfont-12px'); } +.icon-grippy-12px { @include glyphBefore($glyph-icon-grippy,'symbolsfont-12px'); } diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss index 095918d81e..6b090c7b58 100644 --- a/platform/commonUI/general/res/sass/controls/_controls.scss +++ b/platform/commonUI/general/res/sass/controls/_controls.scss @@ -770,11 +770,31 @@ textarea { } } -.grippy { - @extend .icon-grippy; +.grippy, +.grippy-sm, +.drag-vertical, +.drag-vertical-sm { cursor: move; } +.drag-vertical { + @extend .icon-list-view; +} + +.drag-vertical-sm { + @extend .icon-list-view-12px; +} + +.grippy { + // Used in Summary Widgets + @extend .icon-grippy; +} + +.grippy-sm { + // Used in editor Elements pool + @extend .icon-grippy-12px; +} + /******************************************************** BROWSER ELEMENTS */ body.desktop { ::-webkit-scrollbar { diff --git a/platform/commonUI/general/res/sass/edit/_editor.scss b/platform/commonUI/general/res/sass/edit/_editor.scss index 28bea654ee..1a1add578f 100644 --- a/platform/commonUI/general/res/sass/edit/_editor.scss +++ b/platform/commonUI/general/res/sass/edit/_editor.scss @@ -23,13 +23,11 @@ .l-grid-holder { display: none; - position: relative; - height: 100%; - width: 100%; + @extend .abs; + pointer-events: none; + z-index: 0; .l-grid { @extend .abs; - pointer-events: none; - z-index: 0; &.l-grid-y { background-position: 0 1px; } } } diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss index 0592bead71..7f20277f5d 100644 --- a/platform/commonUI/general/res/sass/tree/_tree.scss +++ b/platform/commonUI/general/res/sass/tree/_tree.scss @@ -25,7 +25,14 @@ ul.tree { @include user-select(none); > li { display: block; + align-content: flex-end; position: relative; + .grippy-sm { + font-size: 12px; + margin-right: $interiorMargin; + opacity: 0.5; + width: 1em; + } } ul.tree { margin-left: $treeVCW + $interiorMargin; @@ -121,6 +128,17 @@ body.desktop { } } +ul.tree.reordering { + // User is drag reordering a tree item in a container that allows the action + .tree-item:not(.reorder-actor):hover { + background: rgba($colorKey, 0.2); + border: 1px dashed rgba($colorKey, 1); + > * { + opacity: 0.25; + } + } +} + mct-representation { &.s-status-pending { .t-object-label { diff --git a/platform/commonUI/general/res/sass/user-environ/_frame.scss b/platform/commonUI/general/res/sass/user-environ/_frame.scss index a1af526fd2..76652e5e4f 100644 --- a/platform/commonUI/general/res/sass/user-environ/_frame.scss +++ b/platform/commonUI/general/res/sass/user-environ/_frame.scss @@ -22,6 +22,9 @@ .frame { $ohH: $btnFrameH; $bc: $colorInteriorBorder; + + position: absolute; + &.child-frame.panel { z-index: 0; // Needed to prevent child-frame controls from showing through when another child-frame is above &:not(.no-frame) { @@ -171,3 +174,76 @@ body.desktop .frame { } } } + +.holder-object:not(.s-status-editing) { + .l-layout { + &.fl-column, + &.fl-row, + &.fl-wrap, + &.fl-phone-best-fit, + &.fl-mobile-best-fit { + display: flex; + flex-wrap: nowrap; + align-content: stretch; + align-items: stretch; + > .frame { + display: block; + flex: 1 1 auto; + width: auto !important; + height: auto !important; + &.t-object-type-summary-widget { + &.no-frame.t-frame-outer > .t-rep-frame { + &.contents { + // When frame is hidden, add a bit of margin to the contents + $m: $interiorMargin; + top: $m; right: $m; bottom: $m; left: $m; + } + } + } + } + } + &.fl-column { + flex-direction: column; + padding-right: $interiorMargin; + } + &.fl-row { + flex-direction: row; + padding-bottom: $interiorMargin; + } + + &.fl-wrap { + align-content: flex-start; + align-items: flex-start; + flex-wrap: wrap; + } + } +} + +.holder-object { + .l-layout { + &.fl-column, + &.fl-row, + &.fl-wrap, + &.fl-phone-best-fit, + &.fl-mobile-best-fit { + > .frame { + top: auto !important; + left: auto !important; + position: relative; + } + } + } +} + +body.mobile { + .l-layout.fl-mobile-best-fit { + flex-wrap: wrap !important; + padding: 0 !important; + } + &.portrait .l-layout.fl-mobile-best-fit { + flex-direction: column !important; + } + &.landscape .l-layout.fl-mobile-best-fit { + flex-direction: row !important; + } +} diff --git a/platform/features/layout/bundle.js b/platform/features/layout/bundle.js index 1a22371436..589a77e817 100644 --- a/platform/features/layout/bundle.js +++ b/platform/features/layout/bundle.js @@ -335,6 +335,12 @@ define([ ], "key": "layoutGrid", "conversion": "number[]" + }, + { + "name": "Advanced", + "control": "textfield", + "key": "layoutAdvancedCss", + "cssClass": "l-input-lg" } ] } diff --git a/platform/features/layout/res/templates/layout.html b/platform/features/layout/res/templates/layout.html index 46cec5ae4a..4e7ba4e33b 100644 --- a/platform/features/layout/res/templates/layout.html +++ b/platform/features/layout/res/templates/layout.html @@ -20,7 +20,7 @@ at runtime from the About dialog for additional information. --> -
      @@ -36,7 +36,7 @@ ng-style="{ 'background-size': '100% ' + controller.getGridSize() [1] + 'px' }">
-