From ee608cc4a4c842595eabb6aaacb91576a063c3ca Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Fri, 21 Aug 2015 15:09:23 -0700 Subject: [PATCH] [Mobile] IN PROGRESS: General fixes, spurred by mobile, for object-header open #74 Attempting to layout using flex - not working; See http://jsfiddle.net/charlesh88/cpf9zjts/9/ for working example; New _flex.scss added; This commit is changed elements that are mostly solid; --- .../browse/res/templates/back-arrow.html | 2 +- .../browse/res/templates/browse-object.html | 1 + .../res/templates/browse/object-header.html | 11 +- .../general/res/css/theme-espresso.css | 163 +++++++++++------- .../commonUI/general/res/sass/_global.scss | 6 - platform/commonUI/general/res/sass/_main.scss | 1 + .../commonUI/general/res/sass/_mixins.scss | 4 + .../general/res/sass/controls/_controls.scss | 52 ++++-- .../res/sass/user-environ/_layout.scss | 6 + .../res/sass/user-environ/_top-bar.scss | 5 - .../features/layout/res/templates/frame.html | 5 +- 11 files changed, 151 insertions(+), 105 deletions(-) diff --git a/platform/commonUI/browse/res/templates/back-arrow.html b/platform/commonUI/browse/res/templates/back-arrow.html index 15775fb632..086075c692 100644 --- a/platform/commonUI/browse/res/templates/back-arrow.html +++ b/platform/commonUI/browse/res/templates/back-arrow.html @@ -23,6 +23,6 @@ + ng-class="checkRoot(); atRoot ? 'hidden' : ''"> { diff --git a/platform/commonUI/browse/res/templates/browse-object.html b/platform/commonUI/browse/res/templates/browse-object.html index 1f69f45b0a..fd26dfd2a9 100644 --- a/platform/commonUI/browse/res/templates/browse-object.html +++ b/platform/commonUI/browse/res/templates/browse-object.html @@ -22,6 +22,7 @@
+
diff --git a/platform/commonUI/browse/res/templates/browse/object-header.html b/platform/commonUI/browse/res/templates/browse/object-header.html index 72f7b3e57f..5511725c80 100644 --- a/platform/commonUI/browse/res/templates/browse/object-header.html +++ b/platform/commonUI/browse/res/templates/browse/object-header.html @@ -20,12 +20,11 @@ at runtime from the About dialog for additional information. -->
- - - {{type.getGlyph()}} - {{parameters.mode}} - - {{model.name}} + {{type.getGlyph()}} + {{parameters.mode}} + + + {{model.name}}
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index 27b5a11ad6..c842eaf8ec 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -386,16 +386,10 @@ p { margin-bottom: 10px; } /* line 74, ../sass/_global.scss */ -span { - /* 618 DEBUG - box-sizing: border-box; - */ } - -/* line 80, ../sass/_global.scss */ mct-container { display: block; } -/* line 84, ../sass/_global.scss */ +/* line 78, ../sass/_global.scss */ .abs, .btn-menu span.l-click-area { position: absolute; top: 0; @@ -405,51 +399,51 @@ mct-container { height: auto; width: auto; } -/* line 94, ../sass/_global.scss */ +/* line 88, ../sass/_global.scss */ .code, .codehilite { font-family: "Lucida Console", monospace; font-size: 0.7em; line-height: 150%; white-space: pre; } -/* line 101, ../sass/_global.scss */ +/* line 95, ../sass/_global.scss */ .codehilite { background-color: rgba(255, 255, 255, 0.1); padding: 1em; } -/* line 107, ../sass/_global.scss */ +/* line 101, ../sass/_global.scss */ .align-right { text-align: right; } -/* line 111, ../sass/_global.scss */ +/* line 105, ../sass/_global.scss */ .centered { text-align: center; } -/* line 115, ../sass/_global.scss */ +/* line 109, ../sass/_global.scss */ .no-margin { margin: 0; } -/* line 119, ../sass/_global.scss */ +/* line 113, ../sass/_global.scss */ .colorKey { color: #0099cc; } -/* line 123, ../sass/_global.scss */ +/* line 117, ../sass/_global.scss */ .ds { -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px; -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px; box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px; } -/* line 127, ../sass/_global.scss */ +/* line 121, ../sass/_global.scss */ .hide, .hidden { display: none !important; } -/* line 133, ../sass/_global.scss */ +/* line 127, ../sass/_global.scss */ .paused:not(.s-btn):not(.icon-btn) { border-color: #c56f01 !important; color: #c56f01 !important; } -/* line 139, ../sass/_global.scss */ +/* line 133, ../sass/_global.scss */ .sep { color: rgba(255, 255, 255, 0.2); } @@ -702,34 +696,34 @@ mct-container { .pane.items .object-browse-bar .btn-menu span.right.l-click-area, .btn-menu .pane.items .object-browse-bar span.right.l-click-area { top: auto; } - /* line 245, ../sass/user-environ/_layout.scss */ + /* line 251, ../sass/user-environ/_layout.scss */ .pane.items .object-holder { top: 34px; } - /* line 249, ../sass/user-environ/_layout.scss */ + /* line 255, ../sass/user-environ/_layout.scss */ .pane .object-holder { overflow: auto; } -/* line 257, ../sass/user-environ/_layout.scss */ +/* line 263, ../sass/user-environ/_layout.scss */ .split-layout.horizontal > .pane { margin-top: 5px; } - /* line 260, ../sass/user-environ/_layout.scss */ + /* line 266, ../sass/user-environ/_layout.scss */ .split-layout.horizontal > .pane:first-child { margin-top: 0; } -/* line 267, ../sass/user-environ/_layout.scss */ +/* line 273, ../sass/user-environ/_layout.scss */ .split-layout.vertical > .pane { margin-left: 5px; } - /* line 270, ../sass/user-environ/_layout.scss */ + /* line 276, ../sass/user-environ/_layout.scss */ .split-layout.vertical > .pane > .holder { left: 0; right: 0; } - /* line 274, ../sass/user-environ/_layout.scss */ + /* line 280, ../sass/user-environ/_layout.scss */ .split-layout.vertical > .pane:first-child { margin-left: 0; } - /* line 276, ../sass/user-environ/_layout.scss */ + /* line 282, ../sass/user-environ/_layout.scss */ .split-layout.vertical > .pane:first-child .holder { right: 3px; } -/* line 285, ../sass/user-environ/_layout.scss */ +/* line 291, ../sass/user-environ/_layout.scss */ .vscroll { overflow-y: auto; } @@ -899,12 +893,10 @@ mct-container { @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) { /* line 144, ../sass/mobile/_layout.scss */ .browse-showtree .mobile-pane.right-repr { - background-color: rgba(0, 128, 0, 0.2); width: 500px !important; } } @media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { /* line 144, ../sass/mobile/_layout.scss */ .browse-showtree .mobile-pane.right-repr { - background-color: rgba(255, 165, 0, 0.2); width: 70% !important; } } /* line 168, ../sass/mobile/_layout.scss */ @@ -2560,35 +2552,49 @@ label.checkbox.custom { /******************************************************** OBJECT-HEADER */ /* line 364, ../sass/controls/_controls.scss */ .object-header { - display: inline-block; - font-size: 1em; } - /* line 368, ../sass/controls/_controls.scss */ - .object-header .label .title-label { - color: white; } - /* line 371, ../sass/controls/_controls.scss */ - .object-header .label .type-icon { - font-size: 120%; - margin-right: 5px; + font-size: 1em; + line-height: 120%; } + /* line 373, ../sass/controls/_controls.scss */ + .object-header .title-label, + .object-header .type-icon, + .object-header .context-available { + border: 1px dotted rgba(102, 102, 255, 0.75); vertical-align: middle; } - /* line 376, ../sass/controls/_controls.scss */ - .object-header .label .context-available { + /* line 379, ../sass/controls/_controls.scss */ + .object-header > .type-icon { + font-size: 120%; } + /* line 383, ../sass/controls/_controls.scss */ + .object-header .title-label { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: white; + padding-right: 0.75em; + position: relative; } + /* line 390, ../sass/controls/_controls.scss */ + .object-header .context-available { + -moz-transition-property: opacity; + -o-transition-property: opacity; + -webkit-transition-property: opacity; + transition-property: opacity; + -moz-transition-duration: 0.25s; + -o-transition-duration: 0.25s; + -webkit-transition-duration: 0.25s; + transition-duration: 0.25s; + -moz-transition-timing-function: ease-in-out; + -o-transition-timing-function: ease-in-out; + -webkit-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; opacity: 0; - font-size: 0.8em; } - /* line 381, ../sass/controls/_controls.scss */ - .object-header .label:hover .context-available { + font-size: 0.7em; + position: absolute; + right: 0; } + /* line 398, ../sass/controls/_controls.scss */ + .object-header:hover .context-available { opacity: 1; } -/* line 390, ../sass/controls/_controls.scss */ -.top-bar .object-header, -.object-browse-bar .object-header { - font-size: 1.1em; } - /* line 392, ../sass/controls/_controls.scss */ - .top-bar .object-header span, - .object-browse-bar .object-header span { - display: inline-block; } - /******************************************************** SLIDERS */ -/* line 404, ../sass/controls/_controls.scss */ +/* line 420, ../sass/controls/_controls.scss */ .slider .slot { -moz-border-radius: 2px; -webkit-border-radius: 2px; @@ -2609,7 +2615,7 @@ label.checkbox.custom { right: 0; bottom: auto; left: 0; } -/* line 415, ../sass/controls/_controls.scss */ +/* line 431, ../sass/controls/_controls.scss */ .slider .knob { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -2692,12 +2698,12 @@ label.checkbox.custom { -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; border-color: #0099cc; } - /* line 426, ../sass/controls/_controls.scss */ + /* line 442, ../sass/controls/_controls.scss */ .slider .knob:before { top: 1px; bottom: 3px; left: 5px; } -/* line 433, ../sass/controls/_controls.scss */ +/* line 449, ../sass/controls/_controls.scss */ .slider .range { background: rgba(0, 153, 204, 0.6); cursor: ew-resize; @@ -2708,12 +2714,12 @@ label.checkbox.custom { left: auto; height: auto; width: auto; } - /* line 443, ../sass/controls/_controls.scss */ + /* line 459, ../sass/controls/_controls.scss */ .slider .range:hover { background: rgba(0, 153, 204, 0.7); } /******************************************************** BROWSER ELEMENTS */ -/* line 451, ../sass/controls/_controls.scss */ +/* line 467, ../sass/controls/_controls.scss */ ::-webkit-scrollbar { -moz-border-radius: 2px; -webkit-border-radius: 2px; @@ -2730,7 +2736,7 @@ label.checkbox.custom { height: 10px; width: 10px; } -/* line 457, ../sass/controls/_controls.scss */ +/* line 473, ../sass/controls/_controls.scss */ ::-webkit-scrollbar-thumb { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -2748,7 +2754,7 @@ label.checkbox.custom { -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; border-top: 1px solid gray; } - /* line 464, ../sass/controls/_controls.scss */ + /* line 480, ../sass/controls/_controls.scss */ ::-webkit-scrollbar-thumb:hover { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzczNzM3MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -2757,7 +2763,7 @@ label.checkbox.custom { background-image: -webkit-linear-gradient(#808080, #737373 20px); background-image: linear-gradient(#808080, #737373 20px); } -/* line 469, ../sass/controls/_controls.scss */ +/* line 485, ../sass/controls/_controls.scss */ ::-webkit-scrollbar-corner { background: rgba(0, 0, 0, 0.4); } @@ -3488,6 +3494,31 @@ label.checkbox.custom { font-size: 0.65em; vertical-align: top; } +/* line 2, ../sass/_flex.scss */ +.l-flex.l-flex-justify { + justify-content: space-between; } +/* line 5, ../sass/_flex.scss */ +.l-flex .l-flex-row, .l-flex.l-flex-row { + display: flex; + flex-flow: row nowrap; } +/* line 16, ../sass/_flex.scss */ +.l-flex .l-flex-max { + flex: 1 0 !important; } +/* line 20, ../sass/_flex.scss */ +.l-flex .flex-ignore { + display: flex; + flex-flow: row nowrap; + flex: 0 1 auto; } + +/* line 28, ../sass/_flex.scss */ +.object-browse-bar.bar > div.abs { + background-color: rgba(0, 128, 0, 0.2); } + +/* line 33, ../sass/_flex.scss */ +.l-flex-row .title-label { + background-color: rgba(0, 0, 255, 0.2); + flex: 1 0 !important; } + /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government * as represented by the Administrator of the National Aeronautics and Space @@ -4544,7 +4575,7 @@ input[type="text"] { * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/* line 27, ../sass/user-environ/_top-bar.scss */ +/* line 23, ../sass/user-environ/_top-bar.scss */ .top-bar.browse, .top-bar.edit { border-bottom: 1px solid #4d4d4d; top: 10px; @@ -4552,22 +4583,22 @@ input[type="text"] { bottom: auto; left: 10px; height: 30px; } -/* line 37, ../sass/user-environ/_top-bar.scss */ +/* line 33, ../sass/user-environ/_top-bar.scss */ .top-bar .title { color: #fff; } -/* line 42, ../sass/user-environ/_top-bar.scss */ +/* line 37, ../sass/user-environ/_top-bar.scss */ .top-bar .buttons-main { font-size: 0.8em; left: auto; text-align: right; } - /* line 47, ../sass/user-environ/_top-bar.scss */ + /* line 42, ../sass/user-environ/_top-bar.scss */ .top-bar .buttons-main .btn { margin-left: 5px; } -/* line 55, ../sass/user-environ/_top-bar.scss */ +/* line 50, ../sass/user-environ/_top-bar.scss */ .edit-mode .top-bar .buttons-main { white-space: nowrap; } - /* line 59, ../sass/user-environ/_top-bar.scss */ + /* line 54, ../sass/user-environ/_top-bar.scss */ .edit-mode .top-bar .buttons-main.abs, .edit-mode .top-bar .btn-menu span.buttons-main.l-click-area, .btn-menu .edit-mode .top-bar span.buttons-main.l-click-area { bottom: auto; left: auto; } diff --git a/platform/commonUI/general/res/sass/_global.scss b/platform/commonUI/general/res/sass/_global.scss index 94fe8e151c..a6b8ff63c8 100644 --- a/platform/commonUI/general/res/sass/_global.scss +++ b/platform/commonUI/general/res/sass/_global.scss @@ -71,12 +71,6 @@ p { margin-bottom: $interiorMarginLg; } -span { - /* 618 DEBUG - box-sizing: border-box; - */ -} - mct-container { display: block; } diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss index 8803074f63..d75de0c0c9 100644 --- a/platform/commonUI/general/res/sass/_main.scss +++ b/platform/commonUI/general/res/sass/_main.scss @@ -53,6 +53,7 @@ @import "edit/editor"; @import "features/imagery"; @import "features/time-display"; +@import "flex"; @import "forms/elems"; @import "forms/validation"; @import "forms/text-input"; diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss index f605476c66..a42a2f480d 100644 --- a/platform/commonUI/general/res/sass/_mixins.scss +++ b/platform/commonUI/general/res/sass/_mixins.scss @@ -367,6 +367,10 @@ background-color: rgba($c, $a); } +@mixin tmpBorder($c: #ffcc00, $a: 0.75) { + border: 1px dotted rgba($c, $a); +} + @mixin testObj($w: 2000px, $h: 1000px, $c: black, $a: 0.1) { &:after { @include box-sizing(border-box); diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss index ce91bbe16d..fe6aa3b86b 100644 --- a/platform/commonUI/general/res/sass/controls/_controls.scss +++ b/platform/commonUI/general/res/sass/controls/_controls.scss @@ -362,25 +362,41 @@ label.checkbox.custom { /******************************************************** OBJECT-HEADER */ .object-header { - display: inline-block; + //@include test(); font-size: 1em; + line-height: 120%; .label { - .title-label { - color: lighten($colorBodyFg, 40%); - } - .type-icon { - font-size: 120%; - margin-right: $interiorMargin; - vertical-align: middle; - } + //display: flex; + //flex-direction: row; + } + + .title-label, + .type-icon, + .context-available { + @include tmpBorder(#6666ff); + vertical-align: middle; + } + > .type-icon { + font-size: 120%; + } + + .title-label { + @include ellipsize(); + color: lighten($colorBodyFg, 40%); + padding-right: 0.75em; // For context arrow. Done with em's so pad is relative to the scale of the text. + position: relative; + } + + .context-available { + @include trans-prop-nice(opacity, 0.25s); + opacity: 0; + font-size: 0.7em; + position: absolute; + right: 0; + } + &:hover { .context-available { - opacity: 0; - font-size: 0.8em; - } - &:hover { - .context-available { - opacity: 1; - } + opacity: 1; } } } @@ -388,9 +404,9 @@ label.checkbox.custom { .top-bar, .object-browse-bar { .object-header { - font-size: 1.1em; + //font-size: 1.1em; span { - display: inline-block; + //display: inline-block; } } } diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss index c4f0c99b16..81faab4452 100644 --- a/platform/commonUI/general/res/sass/user-environ/_layout.scss +++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss @@ -241,6 +241,12 @@ .right.abs { top: auto; } + //.left.abs { + // @include tmpBorder(green); + //} + //.right.abs { + // @include tmpBorder(red); + //} } .object-holder { top: $ueTopBarH + $interiorMarginLg; diff --git a/platform/commonUI/general/res/sass/user-environ/_top-bar.scss b/platform/commonUI/general/res/sass/user-environ/_top-bar.scss index e2ee1f105c..19488e9c10 100644 --- a/platform/commonUI/general/res/sass/user-environ/_top-bar.scss +++ b/platform/commonUI/general/res/sass/user-environ/_top-bar.scss @@ -20,10 +20,6 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ .top-bar { -// $h: $ueTopBarH - 5px; -// background: rgba(#ff0000, 0.2); -// line-height: $ueTopBarBtnH; - &.browse, &.edit { border-bottom: 1px solid $colorInteriorBorder; @@ -36,7 +32,6 @@ .title { color: #fff; -// font-weight: bold; } .buttons-main { diff --git a/platform/features/layout/res/templates/frame.html b/platform/features/layout/res/templates/frame.html index df4e3390ad..fccdf813bd 100644 --- a/platform/features/layout/res/templates/frame.html +++ b/platform/features/layout/res/templates/frame.html @@ -21,9 +21,8 @@ -->
-
- +
+