alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Mobile] IN PROGRESS: Moved position of view-switcher

Browse Source 
open #74
view-switcher in object browse and edit moved to precede
action buttons, with margin;
Re-located CSS for .btn, etc. from _controls.scss to _layout.scss;
Cleaned up line-spacing in object-header in .frame;
This commit is contained in:
Charles Hacskaylo
2015-08-25 10:15:14 -07:00
parent 7542c6d49a
commit e1858bf0ae
6 changed files with 71 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
platform/commonUI/browse/res/templates/browse-object.html
View File

@@ -28,15 +28,14 @@
</div> </div>
<!-- Temporarily, on mobile, the button bar is hidden--> <!-- Temporarily, on mobile, the button bar is hidden-->
<div class="btn-bar right mobile-hide"> <div class="btn-bar right mobile-hide">
<mct-representation key="'action-group'"
mct-object="domainObject"
parameters="{ category: 'view-control' }">
</mct-representation>
<mct-representation key="'switcher'" <mct-representation key="'switcher'"
mct-object="domainObject" mct-object="domainObject"
ng-model="representation"> ng-model="representation">
</mct-representation> </mct-representation>
<mct-representation key="'action-group'"
mct-object="domainObject"
parameters="{ category: 'view-control' }">
</mct-representation>
</div> </div>
</div> </div>

55
platform/commonUI/general/res/css/theme-espresso.css
View File

@@ -735,6 +735,25 @@ mct-container {
right: 3px; } right: 3px; }
/* line 299, ../sass/user-environ/_layout.scss */ /* line 299, ../sass/user-environ/_layout.scss */
.object-browse-bar .btn,
.object-browse-bar .t-btn,
.object-browse-bar .view-switcher,
.top-bar .buttons-main .btn,
.top-bar .buttons-main .t-btn,
.top-bar .view-switcher,
.tool-bar .btn,
.tool-bar .t-btn {
display: inline-block;
font-size: 11.25px;
line-height: 200%;
vertical-align: top; }
/* line 316, ../sass/user-environ/_layout.scss */
.object-browse-bar .view-switcher,
.top-bar .view-switcher {
margin-right: 20px; }
/* line 321, ../sass/user-environ/_layout.scss */
.vscroll { .vscroll {
overflow-y: auto; } overflow-y: auto; }
@@ -2382,8 +2401,7 @@ a.l-btn span {
} }
} }
*/ */
/* line 177, ../sass/controls/_controls.scss */ /*.object-browse-bar .btn,
.object-browse-bar .btn,
.object-browse-bar .t-btn, .object-browse-bar .t-btn,
.object-browse-bar .view-switcher, .object-browse-bar .view-switcher,
.top-bar .buttons-main .btn, .top-bar .buttons-main .btn,
@@ -2391,11 +2409,12 @@ a.l-btn span {
.top-bar .view-switcher, .top-bar .view-switcher,
.tool-bar .btn, .tool-bar .btn,
.tool-bar .t-btn { .tool-bar .t-btn {
display: inline-block; $h: $btnToolbarH;
font-size: 11.25px; display: inline-block;
line-height: 200%; font-size: $h * $btnFontSizeToH;
vertical-align: top; } line-height: 200%;
vertical-align: top;
}*/
/* line 192, ../sass/controls/_controls.scss */ /* line 192, ../sass/controls/_controls.scss */
label.checkbox.custom { label.checkbox.custom {
cursor: pointer; cursor: pointer;
@@ -4510,31 +4529,32 @@ input[type="text"] {
/* line 28, ../sass/user-environ/_frame.scss */ /* line 28, ../sass/user-environ/_frame.scss */
.frame.child-frame.panel:hover { .frame.child-frame.panel:hover {
border-color: #666666; } border-color: #666666; }
/* line 36, ../sass/user-environ/_frame.scss */ /* line 32, ../sass/user-environ/_frame.scss */
.frame > .object-header.abs, .btn-menu .frame > span.object-header.l-click-area { .frame > .object-header.abs, .btn-menu .frame > span.object-header.l-click-area {
font-size: 0.75em; font-size: 0.75em;
height: 20px; } height: 16px;
/* line 40, ../sass/user-environ/_frame.scss */ line-height: 16px; }
/* line 38, ../sass/user-environ/_frame.scss */
.frame > .object-holder.abs, .btn-menu .frame > span.object-holder.l-click-area { .frame > .object-holder.abs, .btn-menu .frame > span.object-holder.l-click-area {
top: 23px; } top: 19px; }
/* line 43, ../sass/user-environ/_frame.scss */ /* line 41, ../sass/user-environ/_frame.scss */
.frame .contents { .frame .contents {
top: 5px; top: 5px;
right: 5px; right: 5px;
bottom: 5px; bottom: 5px;
left: 5px; } left: 5px; }
/* line 51, ../sass/user-environ/_frame.scss */ /* line 49, ../sass/user-environ/_frame.scss */
.frame.frame-template .view-switcher { .frame.frame-template .view-switcher {
line-height: 16px; line-height: 16px;
z-index: 10; } z-index: 10; }
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
/* line 58, ../sass/user-environ/_frame.scss */ /* line 56, ../sass/user-environ/_frame.scss */
.frame.frame-template .view-switcher { .frame.frame-template .view-switcher {
opacity: 0; } opacity: 0; }
/* line 61, ../sass/user-environ/_frame.scss */ /* line 59, ../sass/user-environ/_frame.scss */
.frame.frame-template:hover .view-switcher { .frame.frame-template:hover .view-switcher {
opacity: 1; } } opacity: 1; } }
/* line 69, ../sass/user-environ/_frame.scss */ /* line 67, ../sass/user-environ/_frame.scss */
.frame .view-switcher .name { .frame .view-switcher .name {
display: none; } display: none; }
@@ -4576,9 +4596,6 @@ input[type="text"] {
font-size: 0.8em; font-size: 0.8em;
left: auto; left: auto;
text-align: right; } text-align: right; }
/* line 40, ../sass/user-environ/_top-bar.scss */
.top-bar .buttons-main .btn {
margin-left: 5px; }
/* line 48, ../sass/user-environ/_top-bar.scss */ /* line 48, ../sass/user-environ/_top-bar.scss */
.edit-mode .top-bar .buttons-main { .edit-mode .top-bar .buttons-main {

4
platform/commonUI/general/res/sass/controls/_controls.scss
View File

@@ -174,7 +174,7 @@
} }
*/ */
.object-browse-bar .btn, /*.object-browse-bar .btn,
.object-browse-bar .t-btn, .object-browse-bar .t-btn,
.object-browse-bar .view-switcher, .object-browse-bar .view-switcher,
.top-bar .buttons-main .btn, .top-bar .buttons-main .btn,
@@ -187,7 +187,7 @@
font-size: $h * $btnFontSizeToH; font-size: $h * $btnFontSizeToH;
line-height: 200%; line-height: 200%;
vertical-align: top; vertical-align: top;
} }*/
label.checkbox.custom { label.checkbox.custom {
$bg: lighten($colorBodyBg, $ltGamma); $bg: lighten($colorBodyBg, $ltGamma);

10
platform/commonUI/general/res/sass/user-environ/_frame.scss
View File

@@ -20,22 +20,20 @@
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
.frame { .frame {
$ohH: 20px; $ohH: 16px;
$bc: $colorInteriorBorder; $bc: $colorInteriorBorder;
&.child-frame.panel { &.child-frame.panel {
background: $colorBodyBg; background: $colorBodyBg;
border: 1px solid $bc; border: 1px solid $bc;
&:hover { &:hover {
border-color: lighten($bc, 10%); border-color: lighten($bc, 10%);
//z-index: 2;
}
.contents {
// overflow: hidden;
} }
} }
>.object-header.abs { >.object-header.abs {
//@include test(red);
font-size: 0.75em; font-size: 0.75em;
height: $ohH; height: $ohH;
line-height: $ohH;
} }
>.object-holder.abs { >.object-holder.abs {
top: $ohH + $interiorMarginSm; top: $ohH + $interiorMarginSm;
@@ -49,7 +47,7 @@
} }
&.frame-template { &.frame-template {
.view-switcher { .view-switcher {
line-height: 16px; line-height: $ohH;
z-index: 10; z-index: 10;
} }
// Hide the view switcher by default when it's in an element that's in a frame context // Hide the view switcher by default when it's in an element that's in a frame context

22
platform/commonUI/general/res/sass/user-environ/_layout.scss
View File

@@ -296,6 +296,28 @@
} }
} }
.object-browse-bar .btn,
.object-browse-bar .t-btn,
.object-browse-bar .view-switcher,
.top-bar .buttons-main .btn,
.top-bar .buttons-main .t-btn,
.top-bar .view-switcher,
.tool-bar .btn,
.tool-bar .t-btn {
$h: $btnToolbarH;
display: inline-block;
font-size: $h * $btnFontSizeToH;
line-height: 200%;
vertical-align: top;
}
.object-browse-bar,
.top-bar {
.view-switcher {
margin-right: $interiorMarginLg * 2;
}
}
.vscroll { .vscroll {
overflow-y: auto; overflow-y: auto;
} }

6
platform/commonUI/general/res/sass/user-environ/_top-bar.scss
View File

@@ -37,9 +37,9 @@
left: auto; left: auto;
text-align: right; text-align: right;
// width: 200px; // width: 200px;
.btn { // .btn {
margin-left: $interiorMargin; // margin-left: $interiorMargin;
} // }
} }
} }