ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-05 12:54:09 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Mobile] Merge

Browse Source 
Merged open73 into mobile. Search bar is currently
covering the create button slightly.
This commit is contained in:
Shivam Dave 2015-08-26 14:07:52 -07:00
commit def5e17bb8
43 changed files with 1601 additions and 1477 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
platform/commonUI/browse/res/templates/back-arrow.html
View File

@ -21,8 +21,8 @@
--> -->
<!-- Back Arrow Icon used on mobile--> <!-- Back Arrow Icon used on mobile-->
<span ng-controller="BrowseController" <a ng-controller="BrowseController"
class='type-icon icon ui-symbol s-back'
ng-click='backArrow()' ng-click='backArrow()'
ng-class="checkRoot(); atRoot ? 'mobile-back-hide' : 'mobile-back-unhide'"> ng-class="checkRoot(); atRoot ? 'hidden' : ''">{
<a class='type-icon icon ui-symbol'>{</a> </a>
</span>

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

@ -20,22 +20,23 @@
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<span ng-controller="BrowseObjectController"> <span ng-controller="BrowseObjectController">
<div class="object-browse-bar bar abs"> <div class="object-browse-bar bar l-flex">
<div class="items-select left abs"> <div class="items-select left">
<mct-representation key="'back-arrow'" class="l-back"></mct-representation>
<mct-representation key="'object-header'" mct-object="domainObject"> <mct-representation key="'object-header'" mct-object="domainObject">
</mct-representation> </mct-representation>
</div> </div>
<!-- Temporarily, on mobile, the button bar is hidden--> <div class="btn-bar right">
<div class="btn-bar right abs 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>
<!-- Temporarily, on mobile, the action buttons are hidden-->
<mct-representation key="'action-group'"
mct-object="domainObject"
parameters="{ category: 'view-control' }"
class="mobile-hide">
</mct-representation>
</div> </div>
</div> </div>

18
platform/commonUI/browse/res/templates/browse.html
View File

@ -20,23 +20,21 @@
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<div content="jquery-wrapper" class="abs holder-all browse-mode" ng-controller="BrowseController"> <div class="abs holder-all browse-mode" ng-controller="BrowseController">
<mct-include key="'topbar-browse'"></mct-include> <mct-include key="'topbar-browse'"></mct-include>
<div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'"> <div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'">
<mct-split-pane class='contents abs' anchor='left'> <mct-split-pane class='contents abs' anchor='left'>
<div <div class='split-pane-component treeview pane left'>
class='split-pane-component treeview pane mobile-pane left-menu desktop-browse'
>
<mct-representation key="'create-button'" mct-object="navigatedObject"> <mct-representation key="'create-button'" mct-object="navigatedObject">
</mct-representation> </mct-representation>
<div class='holder search-holder abs' <div class='holder search-holder abs l-mobile'
ng-class="{active: treeModel.search}"> ng-class="{active: treeModel.search}">
<mct-representation key="'search'" <mct-representation key="'search'"
mct-object="domainObject" mct-object="domainObject"
ng-model="treeModel"> ng-model="treeModel">
</mct-representation> </mct-representation>
</div> </div>
<div class='holder tree-holder abs mobile-tree-holder' <div class='tree-holder abs mobile-tree-holder'
ng-hide="treeModel.search"> ng-hide="treeModel.search">
<mct-representation key="'tree'" <mct-representation key="'tree'"
mct-object="domainObject" mct-object="domainObject"
@ -46,13 +44,13 @@
</div> </div>
<mct-splitter class="mobile-hide"></mct-splitter> <mct-splitter class="mobile-hide"></mct-splitter>
<div class='split-pane-component items pane mobile-pane right-repr'>
<div class='holder abs' id='content-area'> <div class='split-pane-component items pane right-repr'>
<div class='holder abs l-mobile' id='content-area'>
<mct-representation mct-object="navigatedObject" key="'browse-object'"> <mct-representation mct-object="navigatedObject" key="'browse-object'">
</mct-representation> </mct-representation>
</div> </div>
<div class="left s-very-subtle key-properties ui-symbol mobile-menu-icon button-pos" <div class="key-properties ui-symbol icon mobile-menu-icon desktop-hide" ng-click="treeSlide()">m</div>
ng-click="treeSlide()">m</div>
</div> </div>
</mct-split-pane> </mct-split-pane>
</div> </div>

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

@ -20,11 +20,10 @@
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<div class='object-header object-header-mobile'> <div class='object-header object-header-mobile'>
<span class="label s-label"> <span class='type-icon ui-symbol'>{{type.getGlyph()}}</span>
<mct-representation class="desktop-hide" key="'back-arrow'"></mct-representation> <!--span class='type-name mobile-important-hide'>{{type.getName()}}</span-->
<span class='type-icon icon ui-symbol'>{{type.getGlyph()}}</span> <span class="l-elem-wrapper">
<span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span> <span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
<span class='type-name mobile-important-hide'>{{type.getName()}}</span>
<span class='title-label'>{{model.name}}</span> <span class='title-label'>{{model.name}}</span>
<mct-representation key="'menu-arrow'" mct-object='domainObject'></mct-representation> <mct-representation key="'menu-arrow'" mct-object='domainObject'></mct-representation>
</span> </span>

23
platform/commonUI/browse/res/templates/items/grid-item.html
View File

@ -20,37 +20,30 @@
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<!-- For selected, add class 'selected' to outer div --> <!-- For selected, add class 'selected' to outer div -->
<div class='item grid-item'> <div class='item grid-item' ng-click='action.perform("navigate")'>
<div class="contents abs mobile-grid-nav" ng-click='action.perform("navigate")'> <div class='contents abs'>
<div class='top-bar bar abs'> <div class='top-bar bar abs'>
<div class='left abs'> <div class='ui-symbol profile' title='Shared'>&#x4f;</div>
<mct-include key="_checkbox"></mct-include> <mct-representation class="desktop-hide" key="'info-button'" mct-object="domainObject"></mct-representation>
</div>
<div class='right abs mobile-right'>
<div class='ui-symbol icon alert hidden' onclick="alert('Not yet functional. When this is visible, it means that this object needs to be updated. Clicking will allow that action via a dialog.');">!</div>
<div class='ui-symbol icon profile' title="Shared">P</div>
</div>
</div> </div>
<div class='item-main abs'> <div class='item-main abs'>
<div class='ui-symbol icon lg item-type'> <div class='ui-symbol icon lg item-type'>
{{type.getGlyph()}} {{type.getGlyph()}}
<span <span
class="ui-symbol icon l-icon-link" title="This object is a link" class="ui-symbol l-icon-link" title="This object is a link"
ng-show="location.isLink()" ng-show="location.isLink()"
></span> ></span>
</div> </div>
<div class='ui-symbol icon abs item-open'>}</div> <div class='ui-symbol abs item-open'>}</div>
</div> </div>
<div class='bottom-bar bar abs'> <div class='bottom-bar bar abs'>
<div class='title'>{{model.name}}</div> <div class='title'>{{model.name}}</div>
<div class='details'> <div class='details'>
<span>{{type.getName()}}</span>
<span ng-show="model.composition !== undefined"> <span ng-show="model.composition !== undefined">
{{model.composition.length}} Items - {{model.composition.length}} Item<span ng-show="model.composition.length > 1">s</span>
</span> </span>
</div> </div>
</div> </div>
</div> </div>
<div class="contents abs mobile-info desktop-hide">
<mct-representation class="contents abs btn s-very-subtle desktop-hide" key="'info-button'" mct-object="domainObject"></mct-representation>
</div>
</div> </div>

2
platform/commonUI/dialog/res/templates/dialog.html
View File

@ -25,7 +25,7 @@
All fields marked <span class="ui-symbol req">*</span> are required. All fields marked <span class="ui-symbol req">*</span> are required.
</div> </div>
</div> </div>
<div class="abs form outline editor"> <div class="abs form editor">
<div class='abs contents l-dialog'> <div class='abs contents l-dialog'>
<mct-form ng-model="ngModel.value" <mct-form ng-model="ngModel.value"
structure="ngModel.structure" structure="ngModel.structure"

2
platform/commonUI/dialog/res/templates/overlay.html
View File

@ -25,7 +25,7 @@
<a href="" <a href=""
ng-click="ngModel.cancel()" ng-click="ngModel.cancel()"
ng-if="ngModel.cancel" ng-if="ngModel.cancel"
class="btn normal ui-symbol close"> class="clk-icon icon ui-symbol close">
x x
</a> </a>
<div class="abs contents" ng-transclude> <div class="abs contents" ng-transclude>

70
platform/commonUI/general/res/css/forms.css
View File

@ -69,6 +69,7 @@
* this source code distribution or the Licensing information page available * this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
/************************** STYLE */
/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */ /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
/************************** MOBILE TREE MENU DIMENSIONS */ /************************** MOBILE TREE MENU DIMENSIONS */
/************************** WINDOW DIMENSIONS FOR RWD */ /************************** WINDOW DIMENSIONS FOR RWD */
@ -171,35 +172,34 @@
*****************************************************************************/ *****************************************************************************/
/* line 22, ../sass/forms/_elems.scss */ /* line 22, ../sass/forms/_elems.scss */
.section-header { .section-header {
-moz-border-radius: 3px; -moz-border-radius: 2px;
-webkit-border-radius: 3px; -webkit-border-radius: 2px;
border-radius: 3px; border-radius: 2px;
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
color: #cccccc;
font-size: 0.8em; font-size: 0.8em;
margin-top: 5px; padding: 5px 5px;
padding: 5px; } text-transform: uppercase; }
/* line 28, ../sass/forms/_elems.scss */
.section-header:first-child {
margin-top: 0; }
/* line 35, ../sass/forms/_elems.scss */ /* line 35, ../sass/forms/_elems.scss */
.form .form-section { .form .form-section {
position: relative; } position: relative;
/* line 39, ../sass/forms/_elems.scss */ margin-bottom: 20px; }
/* line 40, ../sass/forms/_elems.scss */
.form .form-row { .form .form-row {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
*zoom: 1; *zoom: 1;
border-top: 1px solid #4d4d4d; border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 5px; margin-top: 5px;
padding: 5px; padding: 5px 5px;
position: relative; } position: relative; }
/* line 46, ../sass/forms/_elems.scss */ /* line 48, ../sass/forms/_elems.scss */
.form .form-row.first { .form .form-row.first {
border-top: none; } border-top: none; }
/* line 50, ../sass/forms/_elems.scss */ /* line 52, ../sass/forms/_elems.scss */
.form .form-row .label, .form .form-row .label,
.form .form-row .controls { .form .form-row .controls {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
@ -207,45 +207,45 @@
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
*zoom: 1; *zoom: 1;
box-sizing: border-box; font-size: 0.8rem;
font-size: 0.75rem;
line-height: 22px; line-height: 22px;
min-height: 22px; } min-height: 22px; }
/* line 61, ../sass/forms/_elems.scss */ /* line 61, ../sass/forms/_elems.scss */
.form .form-row > .label { .form .form-row > .label {
float: left; float: left;
min-width: 120px;
position: relative; position: relative;
white-space: nowrap; white-space: nowrap;
width: 20%; } width: 30%; }
/* line 69, ../sass/forms/_elems.scss */ /* line 71, ../sass/forms/_elems.scss */
.form .form-row .value { .form .form-row .value {
color: #cccccc; } color: #cccccc; }
/* line 73, ../sass/forms/_elems.scss */ /* line 75, ../sass/forms/_elems.scss */
.form .form-row .controls { .form .form-row .controls {
float: left; float: left;
position: relative; position: relative;
width: 79.9%; } width: 69.9%; }
/* line 80, ../sass/forms/_elems.scss */ /* line 82, ../sass/forms/_elems.scss */
.form .form-row .controls .l-composite-control.l-checkbox { .form .form-row .controls .l-composite-control.l-checkbox {
display: inline-block; display: inline-block;
line-height: 14px; line-height: 14px;
margin-right: 5px; } margin-right: 5px; }
/* line 89, ../sass/forms/_elems.scss */ /* line 91, ../sass/forms/_elems.scss */
.form .form-row .controls .l-med input[type="text"] { .form .form-row .controls .l-med input[type="text"] {
width: 200px; } width: 200px; }
/* line 93, ../sass/forms/_elems.scss */ /* line 95, ../sass/forms/_elems.scss */
.form .form-row .controls .l-small input[type="text"] { .form .form-row .controls .l-small input[type="text"] {
width: 50px; } width: 50px; }
/* line 97, ../sass/forms/_elems.scss */ /* line 99, ../sass/forms/_elems.scss */
.form .form-row .controls .l-numeric input[type="text"] { .form .form-row .controls .l-numeric input[type="text"] {
text-align: right; } text-align: right; }
/* line 101, ../sass/forms/_elems.scss */ /* line 103, ../sass/forms/_elems.scss */
.form .form-row .controls .select { .form .form-row .controls .select {
margin-right: 5px; } margin-right: 5px; }
/* line 106, ../sass/forms/_elems.scss */ /* line 108, ../sass/forms/_elems.scss */
.form .form-row .field-hints { .form .form-row .field-hints {
color: #666666; } color: #666666; }
/* line 110, ../sass/forms/_elems.scss */ /* line 112, ../sass/forms/_elems.scss */
.form .form-row .selector-list { .form .form-row .selector-list {
-moz-border-radius: 2px; -moz-border-radius: 2px;
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
@ -258,7 +258,7 @@
position: relative; position: relative;
height: 150px; height: 150px;
overflow: auto; } overflow: auto; }
/* line 121, ../sass/forms/_elems.scss */ /* line 123, ../sass/forms/_elems.scss */
.form .form-row .selector-list .wrapper { .form .form-row .selector-list .wrapper {
overflow-y: auto; overflow-y: auto;
position: absolute; position: absolute;
@ -267,24 +267,24 @@
bottom: 5px; bottom: 5px;
left: 5px; } left: 5px; }
/* line 135, ../sass/forms/_elems.scss */ /* line 137, ../sass/forms/_elems.scss */
label.form-control.checkbox input { label.form-control.checkbox input {
margin-right: 5px; margin-right: 5px;
vertical-align: top; } vertical-align: top; }
/* line 141, ../sass/forms/_elems.scss */ /* line 143, ../sass/forms/_elems.scss */
.hint, .hint,
.s-hint { .s-hint {
font-size: 0.9em; } font-size: 0.9em; }
/* line 146, ../sass/forms/_elems.scss */ /* line 148, ../sass/forms/_elems.scss */
.l-result { .l-result {
display: inline-block; display: inline-block;
min-width: 32px; min-width: 32px;
min-height: 32px; min-height: 32px;
position: relative; position: relative;
vertical-align: top; } vertical-align: top; }
/* line 153, ../sass/forms/_elems.scss */ /* line 155, ../sass/forms/_elems.scss */
.l-result div.s-hint { .l-result div.s-hint {
-moz-border-radius: 2px; -moz-border-radius: 2px;
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
@ -433,7 +433,7 @@ input[type="text"] {
margin: 0 0 2px 2px; margin: 0 0 2px 2px;
overflow: hidden; overflow: hidden;
position: relative; } position: relative; }
/* line 163, ../sass/_mixins.scss */ /* line 167, ../sass/_mixins.scss */
.form-control.select:not(.disabled):hover { .form-control.select:not(.disabled):hover {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%; background-size: 100%;
@ -442,10 +442,10 @@ input[type="text"] {
background-image: -webkit-linear-gradient(#636363, #575757); background-image: -webkit-linear-gradient(#636363, #575757);
background-image: linear-gradient(#636363, #575757); background-image: linear-gradient(#636363, #575757);
color: #bdbdbd; } color: #bdbdbd; }
/* line 166, ../sass/_mixins.scss */ /* line 170, ../sass/_mixins.scss */
.form-control.select:not(.disabled):hover.btn-menu .invoke-menu { .form-control.select:not(.disabled):hover.btn-menu .invoke-menu {
color: #878787; } color: #878787; }
/* line 171, ../sass/_mixins.scss */ /* line 175, ../sass/_mixins.scss */
.form-control.select.btn-menu .invoke-menu { .form-control.select.btn-menu .invoke-menu {
color: #757575; } color: #757575; }
/* line 29, ../sass/forms/_selects.scss */ /* line 29, ../sass/forms/_selects.scss */

209
platform/commonUI/general/res/css/items.css
View File

@ -69,6 +69,7 @@
* this source code distribution or the Licensing information page available * this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
/************************** STYLE */
/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */ /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
/************************** MOBILE TREE MENU DIMENSIONS */ /************************** MOBILE TREE MENU DIMENSIONS */
/************************** WINDOW DIMENSIONS FOR RWD */ /************************** WINDOW DIMENSIONS FOR RWD */
@ -185,7 +186,7 @@
margin-bottom: 3px; margin-bottom: 3px;
margin-right: 3px; margin-right: 3px;
position: relative; } position: relative; }
/* line 163, ../sass/_mixins.scss */ /* line 167, ../sass/_mixins.scss */
.items-holder .item.grid-item:not(.disabled):hover { .items-holder .item.grid-item:not(.disabled):hover {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzcwNzA3MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzcwNzA3MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%; background-size: 100%;
@ -194,15 +195,15 @@
background-image: -webkit-linear-gradient(#707070, #636363); background-image: -webkit-linear-gradient(#707070, #636363);
background-image: linear-gradient(#707070, #636363); background-image: linear-gradient(#707070, #636363);
color: #bdbdbd; } color: #bdbdbd; }
/* line 166, ../sass/_mixins.scss */ /* line 170, ../sass/_mixins.scss */
.items-holder .item.grid-item:not(.disabled):hover.btn-menu .invoke-menu { .items-holder .item.grid-item:not(.disabled):hover.btn-menu .invoke-menu {
color: #949494; } color: #949494; }
/* line 171, ../sass/_mixins.scss */ /* line 175, ../sass/_mixins.scss */
.items-holder .item.grid-item.btn-menu .invoke-menu { .items-holder .item.grid-item.btn-menu .invoke-menu {
color: #828282; } color: #828282; }
/* line 46, ../sass/items/_item.scss */ /* line 46, ../sass/items/_item.scss */
.items-holder .item.grid-item:hover .item-main .item-type { .items-holder .item.grid-item:hover .item-main .item-type {
color: #0099cc !important; } color: deepskyblue !important; }
/* line 48, ../sass/items/_item.scss */ /* line 48, ../sass/items/_item.scss */
.items-holder .item.grid-item:hover .item-main .item-type .l-icon-link { .items-holder .item.grid-item:hover .item-main .item-type .l-icon-link {
color: #49dedb; } color: #49dedb; }
@ -211,35 +212,35 @@
opacity: 1; } opacity: 1; }
/* line 57, ../sass/items/_item.scss */ /* line 57, ../sass/items/_item.scss */
.items-holder .item.grid-item .contents { .items-holder .item.grid-item .contents {
top: 5px; top: 10px;
right: 5px; right: 10px;
bottom: 5px; bottom: 10px;
left: 5px; } left: 10px; }
/* line 61, ../sass/items/_item.scss */ /* line 63, ../sass/items/_item.scss */
.items-holder .item.grid-item .bar.top-bar.abs { .items-holder .item.grid-item .bar.top-bar {
bottom: auto; bottom: auto;
height: 20px; height: 20px;
line-height: 20px; line-height: 20px;
text-align: right;
z-index: 5; } z-index: 5; }
/* line 66, ../sass/items/_item.scss */ /* line 69, ../sass/items/_item.scss */
.items-holder .item.grid-item .bar.top-bar.abs .left, .items-holder .item.grid-item .bar.top-bar.abs .right { .items-holder .item.grid-item .bar.top-bar .left, .items-holder .item.grid-item .bar.top-bar .right {
width: auto; } width: auto; }
/* line 68, ../sass/items/_item.scss */ /* line 71, ../sass/items/_item.scss */
.items-holder .item.grid-item .bar.top-bar.abs .left .icon, .items-holder .item.grid-item .bar.top-bar.abs .right .icon { .items-holder .item.grid-item .bar.top-bar .left .icon, .items-holder .item.grid-item .bar.top-bar .right .icon {
margin-left: 3px; } margin-left: 3px; }
/* line 70, ../sass/items/_item.scss */ /* line 73, ../sass/items/_item.scss */
.items-holder .item.grid-item .bar.top-bar.abs .left .icon.l-icon-link, .items-holder .item.grid-item .bar.top-bar.abs .right .icon.l-icon-link { .items-holder .item.grid-item .bar.top-bar .left .icon.l-icon-link, .items-holder .item.grid-item .bar.top-bar .right .icon.l-icon-link {
color: #49dedb; } color: #49dedb; }
/* line 76, ../sass/items/_item.scss */ /* line 79, ../sass/items/_item.scss */
.items-holder .item.grid-item .bar.bottom-bar.abs { .items-holder .item.grid-item .bar.bottom-bar {
top: auto; top: auto;
height: 30px; line-height: 110%; }
padding: 5px; } /* line 85, ../sass/items/_item.scss */
/* line 82, ../sass/items/_item.scss */
.items-holder .item.grid-item .item-main { .items-holder .item.grid-item .item-main {
line-height: 160px; line-height: 160px;
z-index: 1; } z-index: 1; }
/* line 88, ../sass/items/_item.scss */ /* line 91, ../sass/items/_item.scss */
.items-holder .item.grid-item .item-main .item-type { .items-holder .item.grid-item .item-main .item-type {
overflow: false; overflow: false;
position: absolute; position: absolute;
@ -249,24 +250,23 @@
left: 40px; left: 40px;
width: auto; width: auto;
height: auto; height: auto;
color: #737373;
text-align: center; text-align: center;
font-size: 96.9px; font-size: 96.9px;
line-height: 102px; line-height: 102px;
bottom: auto; bottom: auto;
height: 102px; height: 102px;
top: 30px; } top: 30px; }
/* line 100, ../sass/items/_item.scss */ /* line 103, ../sass/items/_item.scss */
.items-holder .item.grid-item .item-main .item-type .l-icon-link { .items-holder .item.grid-item .item-main .item-type .l-icon-link {
color: #1a8e8b; color: #49dedb;
height: 36px; height: auto;
line-height: 36px; line-height: 100%;
position: absolute; position: absolute;
font-size: 32px; font-size: 0.3em;
left: 0px; left: 0px;
bottom: 10px; bottom: 10px;
z-index: 2; } z-index: 2; }
/* line 112, ../sass/items/_item.scss */ /* line 116, ../sass/items/_item.scss */
.items-holder .item.grid-item .item-main .item-open { .items-holder .item.grid-item .item-main .item-open {
-moz-transition-property: "opacity"; -moz-transition-property: "opacity";
-o-transition-property: "opacity"; -o-transition-property: "opacity";
@ -286,17 +286,20 @@
width: 50px; width: 50px;
pointer-events: none; pointer-events: none;
text-align: right; } text-align: right; }
/* line 124, ../sass/items/_item.scss */ /* line 128, ../sass/items/_item.scss */
.items-holder .item.grid-item .title { .items-holder .item.grid-item .title {
text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px; text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
color: #cccccc;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; } color: #cccccc; }
/* line 132, ../sass/items/_item.scss */ /* line 133, ../sass/items/_item.scss */
.items-holder .item.grid-item .details { .items-holder .item.grid-item .details {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.8em; } font-size: 0.8em; }
/* line 135, ../sass/items/_item.scss */ /* line 137, ../sass/items/_item.scss */
.items-holder .item.grid-item.selected { .items-holder .item.grid-item.selected {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%; background-size: 100%;
@ -318,7 +321,7 @@
color: #999; color: #999;
display: inline-block; display: inline-block;
color: #80dfff; } color: #80dfff; }
/* line 163, ../sass/_mixins.scss */ /* line 167, ../sass/_mixins.scss */
.items-holder .item.grid-item.selected:not(.disabled):hover { .items-holder .item.grid-item.selected:not(.disabled):hover {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJlY2JmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE0YzRmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJlY2JmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE0YzRmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%; background-size: 100%;
@ -327,22 +330,22 @@
background-image: -webkit-linear-gradient(#2ecbff, #14c4ff); background-image: -webkit-linear-gradient(#2ecbff, #14c4ff);
background-image: linear-gradient(#2ecbff, #14c4ff); background-image: linear-gradient(#2ecbff, #14c4ff);
color: #bdbdbd; } color: #bdbdbd; }
/* line 166, ../sass/_mixins.scss */ /* line 170, ../sass/_mixins.scss */
.items-holder .item.grid-item.selected:not(.disabled):hover.btn-menu .invoke-menu { .items-holder .item.grid-item.selected:not(.disabled):hover.btn-menu .invoke-menu {
color: #75ddff; } color: #75ddff; }
/* line 171, ../sass/_mixins.scss */ /* line 175, ../sass/_mixins.scss */
.items-holder .item.grid-item.selected.btn-menu .invoke-menu { .items-holder .item.grid-item.selected.btn-menu .invoke-menu {
color: #52d4ff; } color: #52d4ff; }
/* line 140, ../sass/items/_item.scss */ /* line 142, ../sass/items/_item.scss */
.items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) { .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {
color: #80dfff; } color: #80dfff; }
/* line 141, ../sass/items/_item.scss */ /* line 143, ../sass/items/_item.scss */
.items-holder .item.grid-item.selected .item-main .item-open { .items-holder .item.grid-item.selected .item-main .item-open {
color: #80dfff; } color: #80dfff; }
/* line 142, ../sass/items/_item.scss */ /* line 144, ../sass/items/_item.scss */
.items-holder .item.grid-item.selected .title { .items-holder .item.grid-item.selected .title {
color: white; } color: white; }
/* line 144, ../sass/items/_item.scss */ /* line 146, ../sass/items/_item.scss */
.items-holder .item.grid-item.selected:hover .item-main .item-type { .items-holder .item.grid-item.selected:hover .item-main .item-type {
color: white !important; } color: white !important; }
@ -368,82 +371,82 @@
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), 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), 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) { @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), 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), 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 34, ../sass/mobile/_item.scss */ /* line 29, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .mobile-grid-nav { .items-holder .item.grid-item {
width: 100%; }
/* line 33, ../sass/mobile/_item.scss */
.items-holder .item.grid-item > .contents {
top: 0px; top: 0px;
right: 10px;
bottom: 0px; bottom: 0px;
right: 55px; } left: 10px; }
/* line 39, ../sass/mobile/_item.scss */ /* line 37, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .mobile-info { .items-holder .item.grid-item .bar.top-bar {
text-align: center; bottom: 0 !important;
width: 50px; left: auto !important;
right: 0px; right: 20px !important;
left: auto; width: 40px !important;
font-size: 1.3em; } height: auto !important;
/* line 47, ../sass/mobile/_item.scss */ text-align: right; }
.items-holder .item.grid-item .bar.bottom-bar.abs { /* line 44, ../sass/mobile/_item.scss */
top: 0px; .items-holder .item.grid-item .bar.bottom-bar {
height: auto; } left: 40px;
/* line 54, ../sass/mobile/_item.scss */ right: 60px; }
/* line 52, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .item-main .item-type { .items-holder .item.grid-item .item-main .item-type {
font-size: 30px; font-size: 30px;
top: 0px; right: auto;
left: 0px; bottom: auto;
left: 0;
line-height: 100%;
text-align: left; text-align: left;
height: auto; } width: 30px; }
/* line 61, ../sass/mobile/_item.scss */ /* line 61, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .item-main .item-open { .items-holder .item.grid-item .item-main .item-type .l-icon-link {
display: none; } bottom: 0; }
/* line 65, ../sass/mobile/_item.scss */ /* line 65, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .title, .items-holder .item.grid-item .details { .items-holder .item.grid-item .item-main .item-open {
margin-left: 30px; } } display: block;
opacity: 1;
font-size: 1em;
width: auto; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) { @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
/* line 29, ../sass/mobile/_item.scss */ /* line 29, ../sass/mobile/_item.scss */
.items-holder .item.grid-item { .items-holder .item.grid-item {
width: 100%;
height: 50px; } height: 50px; }
/* line 74, ../sass/mobile/_item.scss */ /* line 78, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .mobile-right { .items-holder .item.grid-item .bar.top-bar {
top: 100%; } line-height: 50px !important; }
/* line 77, ../sass/mobile/_item.scss */ /* line 82, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .mobile-info { .items-holder .item.grid-item .bar.bottom-bar {
line-height: 25px; } top: 7px;
/* line 81, ../sass/mobile/_item.scss */ bottom: auto;
height: 35px; }
/* line 87, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .item-main .item-type { .items-holder .item.grid-item .item-main .item-type {
line-height: 40px; } top: 10px;
/* line 85, ../sass/mobile/_item.scss */ bottom: auto;
.items-holder .item.grid-item .title { height: 30px; }
margin-right: 10px; /* line 90, ../sass/mobile/_item.scss */
line-height: 25px; } .items-holder .item.grid-item .item-main .item-open {
/* line 89, ../sass/mobile/_item.scss */ line-height: 50px; } }
.items-holder .item.grid-item .details {
margin-right: 10px;
line-height: 0px; } }
@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), 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) { @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), 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 29, ../sass/mobile/_item.scss */ /* line 29, ../sass/mobile/_item.scss */
.items-holder .item.grid-item { .items-holder .item.grid-item {
width: 100%; height: 66px; }
height: 66.66667px; } /* line 100, ../sass/mobile/_item.scss */
/* line 99, ../sass/mobile/_item.scss */ .items-holder .item.grid-item .bar.top-bar {
.items-holder .item.grid-item .mobile-right { line-height: 66px !important; }
top: 100%; } /* line 104, ../sass/mobile/_item.scss */
/* line 103, ../sass/mobile/_item.scss */ .items-holder .item.grid-item .bar.bottom-bar {
.items-holder .item.grid-item .mobile-info { top: 15px;
line-height: 38px; } bottom: auto;
/* line 107, ../sass/mobile/_item.scss */ height: 35px; }
/* line 109, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .item-main .item-type { .items-holder .item.grid-item .item-main .item-type {
font-size: 30px; top: 18px;
line-height: 50px; } bottom: auto;
height: 30px; }
/* line 112, ../sass/mobile/_item.scss */ /* line 112, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .title { .items-holder .item.grid-item .item-main .item-open {
margin-right: 10px; line-height: 66px; } }
line-height: 38px; }
/* line 116, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .details {
margin-right: 10px;
line-height: 0px; } }
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
/* line 29, ../sass/mobile/_item.scss */
.items-holder .item.grid-item {
width: 200px;
height: 200px; } }

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

File diff suppressed because it is too large Load Diff

115
platform/commonUI/general/res/css/tree.css
View File

@ -69,6 +69,7 @@
* this source code distribution or the Licensing information page available * this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
/************************** STYLE */
/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */ /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
/************************** MOBILE TREE MENU DIMENSIONS */ /************************** MOBILE TREE MENU DIMENSIONS */
/************************** WINDOW DIMENSIONS FOR RWD */ /************************** WINDOW DIMENSIONS FOR RWD */
@ -152,7 +153,7 @@
ul.tree { ul.tree {
margin: 0; margin: 0;
padding: 0; } padding: 0; }
/* line 309, ../sass/_mixins.scss */ /* line 314, ../sass/_mixins.scss */
ul.tree li { ul.tree li {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
@ -163,6 +164,9 @@ ul.tree {
position: relative; } position: relative; }
/* line 28, ../sass/tree/_tree.scss */ /* line 28, ../sass/tree/_tree.scss */
ul.tree li span.tree-item { ul.tree li span.tree-item {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-border-radius: 2px; -moz-border-radius: 2px;
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
border-radius: 2px; border-radius: 2px;
@ -176,17 +180,17 @@ ul.tree {
line-height: 1.5rem; line-height: 1.5rem;
margin-bottom: 3px; margin-bottom: 3px;
position: relative; } position: relative; }
/* line 39, ../sass/tree/_tree.scss */ /* line 40, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .view-control { ul.tree li span.tree-item .view-control {
display: inline-block; display: inline-block;
margin-left: 5px; margin-left: 5px;
font-size: 0.75em; font-size: 0.75em;
width: 10px; } width: 10px; }
@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 47, ../sass/tree/_tree.scss */ /* line 48, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .view-control:hover { ul.tree li span.tree-item .view-control:hover {
color: #ffc700; } } color: #ffc700; } }
/* line 53, ../sass/tree/_tree.scss */ /* line 54, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .label { ul.tree li span.tree-item .label {
display: block; display: block;
overflow: hidden; overflow: hidden;
@ -197,28 +201,27 @@ ul.tree {
left: 0px; left: 0px;
width: auto; width: auto;
height: auto; height: auto;
line-height: 1.5rem;
left: 15px; } left: 15px; }
/* line 60, ../sass/tree/_tree.scss */ /* line 62, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .label .type-icon { ul.tree li span.tree-item .label .type-icon {
overflow: false;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: auto;
height: auto;
text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px; text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px;
font-size: 16px;
color: #0099cc; color: #0099cc;
left: 5px; left: 5px;
position: absolute;
top: 4px;
bottom: auto;
height: 16px;
line-height: 100%;
right: auto; right: auto;
width: 1em; } width: 16px; }
/* line 68, ../sass/tree/_tree.scss */ /* line 75, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .label .type-icon .icon.l-icon-link, ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert { ul.tree li span.tree-item .label .type-icon .icon.l-icon-link, ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert {
text-shadow: black 0 1px 2px; text-shadow: black 0 1px 2px;
position: absolute; position: absolute;
z-index: 2; } z-index: 2; }
/* line 74, ../sass/tree/_tree.scss */ /* line 81, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert { ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert {
color: #ff3c00; color: #ff3c00;
font-size: 8px; font-size: 8px;
@ -227,7 +230,7 @@ ul.tree {
width: 8px; width: 8px;
top: 1px; top: 1px;
right: -2px; } right: -2px; }
/* line 80, ../sass/tree/_tree.scss */ /* line 87, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .label .type-icon .icon.l-icon-link { ul.tree li span.tree-item .label .type-icon .icon.l-icon-link {
color: #49dedb; color: #49dedb;
font-size: 8px; font-size: 8px;
@ -235,8 +238,8 @@ ul.tree {
height: 8px; height: 8px;
width: 8px; width: 8px;
left: -3px; left: -3px;
bottom: 5px; } bottom: 0px; }
/* line 89, ../sass/tree/_tree.scss */ /* line 95, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .label .title-label { ul.tree li span.tree-item .label .title-label {
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
@ -251,53 +254,53 @@ ul.tree {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; } white-space: nowrap; }
/* line 100, ../sass/tree/_tree.scss */ /* line 106, ../sass/tree/_tree.scss */
ul.tree li span.tree-item.loading { ul.tree li span.tree-item.loading {
pointer-events: none; } pointer-events: none; }
/* line 102, ../sass/tree/_tree.scss */ /* line 108, ../sass/tree/_tree.scss */
ul.tree li span.tree-item.loading .label { ul.tree li span.tree-item.loading .label {
opacity: 0.5; } opacity: 0.5; }
/* line 104, ../sass/tree/_tree.scss */ /* line 110, ../sass/tree/_tree.scss */
ul.tree li span.tree-item.loading .label .title-label { ul.tree li span.tree-item.loading .label .title-label {
font-style: italic; } font-style: italic; }
/* line 108, ../sass/tree/_tree.scss */ /* line 114, ../sass/tree/_tree.scss */
ul.tree li span.tree-item.loading .wait-spinner { ul.tree li span.tree-item.loading .wait-spinner {
margin-left: 14px; } margin-left: 14px; }
/* line 113, ../sass/tree/_tree.scss */ /* line 119, ../sass/tree/_tree.scss */
ul.tree li span.tree-item.selected { ul.tree li span.tree-item.selected {
background: #005177; background: #005177;
color: #fff; } color: #fff; }
/* line 117, ../sass/tree/_tree.scss */ /* line 123, ../sass/tree/_tree.scss */
ul.tree li span.tree-item.selected .view-control { ul.tree li span.tree-item.selected .view-control {
color: #0099cc; } color: #0099cc; }
/* line 120, ../sass/tree/_tree.scss */ /* line 126, ../sass/tree/_tree.scss */
ul.tree li span.tree-item.selected .label .type-icon { ul.tree li span.tree-item.selected .label .type-icon {
color: #fff; } color: #fff; }
@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 128, ../sass/tree/_tree.scss */ /* line 134, ../sass/tree/_tree.scss */
ul.tree li span.tree-item:not(.selected):hover { ul.tree li span.tree-item:not(.selected):hover {
background: #404040; background: rgba(255, 255, 255, 0.1);
color: #cccccc; } color: #cccccc; }
/* line 131, ../sass/tree/_tree.scss */ /* line 137, ../sass/tree/_tree.scss */
ul.tree li span.tree-item:not(.selected):hover .context-trigger { ul.tree li span.tree-item:not(.selected):hover .context-trigger {
display: block; } display: block; }
/* line 134, ../sass/tree/_tree.scss */ /* line 140, ../sass/tree/_tree.scss */
ul.tree li span.tree-item:not(.selected):hover .icon { ul.tree li span.tree-item:not(.selected):hover .icon {
color: #33ccff; } } color: #33ccff; } }
/* line 141, ../sass/tree/_tree.scss */ /* line 147, ../sass/tree/_tree.scss */
ul.tree li span.tree-item:not(.loading) { ul.tree li span.tree-item:not(.loading) {
cursor: pointer; } cursor: pointer; }
/* line 145, ../sass/tree/_tree.scss */ /* line 151, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .context-trigger { ul.tree li span.tree-item .context-trigger {
top: -1px; top: -1px;
position: absolute; position: absolute;
right: 3px; } right: 3px; }
/* line 151, ../sass/tree/_tree.scss */ /* line 157, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .context-trigger .invoke-menu { ul.tree li span.tree-item .context-trigger .invoke-menu {
font-size: 0.75em; font-size: 0.75em;
height: 0.9rem; height: 0.9rem;
line-height: 0.9rem; } line-height: 0.9rem; }
/* line 160, ../sass/tree/_tree.scss */ /* line 166, ../sass/tree/_tree.scss */
ul.tree ul.tree { ul.tree ul.tree {
margin-left: 15px; } margin-left: 15px; }
@ -569,38 +572,28 @@ ul.tree {
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), 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), 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) { @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), 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), 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 24, ../sass/mobile/_tree.scss */ /* line 28, ../sass/mobile/_tree.scss */
ul.tree {
margin: 0;
padding: 0; }
/* line 309, ../sass/_mixins.scss */
ul.tree li {
list-style-type: none;
margin: 0;
padding: 0; }
/* line 29, ../sass/mobile/_tree.scss */
ul.tree li span.tree-item { ul.tree li span.tree-item {
height: 38px; height: 35px;
line-height: 38px; line-height: 35px;
padding-top: 3px;
padding-bottom: 3px;
margin-bottom: 0px; } margin-bottom: 0px; }
/* line 36, ../sass/mobile/_tree.scss */ /* line 32, ../sass/mobile/_tree.scss */
ul.tree li span.tree-item .view-control { ul.tree li span.tree-item .view-control {
position: absolute; position: absolute;
right: 13px; font-size: 1.1em;
font-size: 1.8em;
right: 0px; right: 0px;
width: 35px; width: 30px;
text-align: center; } text-align: center; }
/* line 45, ../sass/mobile/_tree.scss */ /* line 41, ../sass/mobile/_tree.scss */
ul.tree li span.tree-item .label { ul.tree li span.tree-item .label {
left: 3px; left: 0;
right: 45px; right: 35px;
font-size: 1.2em; } line-height: 35px; }
/* line 54, ../sass/mobile/_tree.scss */ /* line 46, ../sass/mobile/_tree.scss */
ul.tree li span.tree-item .label .title-label { ul.tree li span.tree-item .label .type-icon {
right: 16.9px; } top: 9px;
/* line 63, ../sass/mobile/_tree.scss */ bottom: auto;
height: 16px; }
/* line 57, ../sass/mobile/_tree.scss */
ul.tree ul.tree { ul.tree ul.tree {
margin-left: 7px; } } margin-left: 20px; } }

BIN
platform/commonUI/general/res/fonts/symbols/wtdsymbols.eot
View File

Binary file not shown.

3
platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg
View File

@ -83,7 +83,8 @@
<glyph unicode="&#xe604;" glyph-name="icon-tabular" d="M0 896v-192h448v256h-384c-35.2 0-64-28.8-64-64zM960 960h-384v-256h448v192c0 35.2-28.8 64-64 64zM576 576h448v-256h-448v256zM0 576h448v-256h-448v256zM0 0c0-35.2 28.8-64 64-64h384v256h-448v-192zM576-64h384c35.2 0 64 28.8 64 64v192h-448v-256z" /> <glyph unicode="&#xe604;" glyph-name="icon-tabular" d="M0 896v-192h448v256h-384c-35.2 0-64-28.8-64-64zM960 960h-384v-256h448v192c0 35.2-28.8 64-64 64zM576 576h448v-256h-448v256zM0 576h448v-256h-448v256zM0 0c0-35.2 28.8-64 64-64h384v256h-448v-192zM576-64h384c35.2 0 64 28.8 64 64v192h-448v-256z" />
<glyph unicode="&#xe605;" glyph-name="icon-calendar" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM640 512h-256v192h256v-192zM384 448h256v-192h-256v192zM320 256h-256v192h256v-192zM320 704v-192h-256v192h256zM128 0c-17 0-33 6.6-45.2 18.8s-18.8 28.2-18.8 45.2v128h256v-192h-192zM384 0v192h256v-192h-256zM960 64c0-17-6.6-33-18.8-45.2s-28.2-18.8-45.2-18.8h-192v192h256v-128zM960 256h-256v192h256v-192zM960 512h-256v192h256v-192z" /> <glyph unicode="&#xe605;" glyph-name="icon-calendar" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM640 512h-256v192h256v-192zM384 448h256v-192h-256v192zM320 256h-256v192h256v-192zM320 704v-192h-256v192h256zM128 0c-17 0-33 6.6-45.2 18.8s-18.8 28.2-18.8 45.2v128h256v-192h-192zM384 0v192h256v-192h-256zM960 64c0-17-6.6-33-18.8-45.2s-28.2-18.8-45.2-18.8h-192v192h256v-128zM960 256h-256v192h256v-192zM960 512h-256v192h256v-192z" />
<glyph unicode="&#xe606;" glyph-name="icon-paint-bucket" d="M896 320c0 0-130-188-128-256 2-70.6 57.4-128 128-128s126 57.4 128 128c2 68-128 256-128 256zM449 831l0.2 64.8c0 35.4-28.4 64-63.8 64.2 0 0-0.2 0-0.2 0-35.2 0-63.8-28.6-64-63.8l-0.6-190.8-294-292.6c-50-50-12.4-215.2 112.4-340s290-162.4 340-112.4l417 423.6-447 447zM384 320c-70.6 0-128 57.4-128 128 0 47.4 25.8 89 64.4 111l-0.4-110.8c0-35.4 28.4-64 63.8-64.2 0 0 0.2 0 0.2 0 35.2 0 63.8 28.6 64 63.8l0.4 110.8c38-22.2 63.6-63.4 63.6-110.6 0-70.6-57.4-128-128-128z" /> <glyph unicode="&#xe606;" glyph-name="icon-paint-bucket" d="M896 320c0 0-130-188-128-256 2-70.6 57.4-128 128-128s126 57.4 128 128c2 68-128 256-128 256zM449 831l0.2 64.8c0 35.4-28.4 64-63.8 64.2 0 0-0.2 0-0.2 0-35.2 0-63.8-28.6-64-63.8l-0.6-190.8-294-292.6c-50-50-12.4-215.2 112.4-340s290-162.4 340-112.4l417 423.6-447 447zM384 320c-70.6 0-128 57.4-128 128 0 47.4 25.8 89 64.4 111l-0.4-110.8c0-35.4 28.4-64 63.8-64.2 0 0 0.2 0 0.2 0 35.2 0 63.8 28.6 64 63.8l0.4 110.8c38-22.2 63.6-63.4 63.6-110.6 0-70.6-57.4-128-128-128z" />
<glyph unicode="&#xe607;" glyph-name="icon-x-in-circle" d="M512 960c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM832 256l-128-128-192 192-192-192-128 128 192 192-192 192 128 128 192-192 192 192 128-128-192-192 192-192z" /> <glyph unicode="&#xe607;" glyph-name="icon-x-in-circle-heavy" d="M512 960c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM832 256l-128-128-192 192-192-192-128 128 192 192-192 192 128 128 192-192 192 192 128-128-192-192 192-192z" />
<glyph unicode="&#xe608;" glyph-name="icon-info" d="M512 960c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM512 832c70.6 0 128-57.4 128-128s-57.4-128-128-128c-70.6 0-128 57.4-128 128s57.4 128 128 128zM704 128h-384v128h128v128h-128v128h320v-256h64v-128z" />
<glyph unicode="&#xe60d;" glyph-name="icon-arrows-right-left" d="M1024 448l-448-512v1024zM448 960l-448-512 448-512z" /> <glyph unicode="&#xe60d;" glyph-name="icon-arrows-right-left" d="M1024 448l-448-512v1024zM448 960l-448-512 448-512z" />
<glyph unicode="&#xe642;" glyph-name="icon-x" d="M384 448l-365.332-365.332c-24.89-24.89-24.89-65.62 0-90.51l37.49-37.49c24.89-24.89 65.62-24.89 90.51 0 0 0 365.332 365.332 365.332 365.332l365.332-365.332c24.89-24.89 65.62-24.89 90.51 0l37.49 37.49c24.89 24.89 24.89 65.62 0 90.51l-365.332 365.332c0 0 365.332 365.332 365.332 365.332 24.89 24.89 24.89 65.62 0 90.51l-37.49 37.49c-24.89 24.89-65.62 24.89-90.51 0 0 0-365.332-365.332-365.332-365.332l-365.332 365.332c-24.89 24.89-65.62 24.89-90.51 0l-37.49-37.49c-24.89-24.89-24.89-65.62 0-90.51 0 0 365.332-365.332 365.332-365.332z" /> <glyph unicode="&#xe642;" glyph-name="icon-x" d="M384 448l-365.332-365.332c-24.89-24.89-24.89-65.62 0-90.51l37.49-37.49c24.89-24.89 65.62-24.89 90.51 0 0 0 365.332 365.332 365.332 365.332l365.332-365.332c24.89-24.89 65.62-24.89 90.51 0l37.49 37.49c24.89 24.89 24.89 65.62 0 90.51l-365.332 365.332c0 0 365.332 365.332 365.332 365.332 24.89 24.89 24.89 65.62 0 90.51l-37.49 37.49c-24.89 24.89-65.62 24.89-90.51 0 0 0-365.332-365.332-365.332-365.332l-365.332 365.332c-24.89 24.89-65.62 24.89-90.51 0l-37.49-37.49c-24.89-24.89-24.89-65.62 0-90.51 0 0 365.332-365.332 365.332-365.332z" />
</font></defs></svg> </font></defs></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 27 KiB

BIN
platform/commonUI/general/res/fonts/symbols/wtdsymbols.ttf
View File

Binary file not shown.

BIN
platform/commonUI/general/res/fonts/symbols/wtdsymbols.woff
View File

Binary file not shown.

9
platform/commonUI/general/res/sass/_constants.scss
View File

@ -47,6 +47,8 @@ $colorPausedBg: #c56f01;
$colorPausedFg: #fff; $colorPausedFg: #fff;
$colorCreateBtn: $colorKey; $colorCreateBtn: $colorKey;
$colorGridLines: rgba(#fff, 0.05); $colorGridLines: rgba(#fff, 0.05);
$colorFormLines: rgba(#fff, 0.1);
$colorFormSectionHeader: rgba(#000, 0.2);
// Menu colors // Menu colors
$colorMenuBg: lighten($colorBodyBg, 23%); $colorMenuBg: lighten($colorBodyBg, 23%);
$colorMenuFg: lighten($colorMenuBg, 70%); $colorMenuFg: lighten($colorMenuBg, 70%);
@ -104,6 +106,7 @@ $treeSearchInputBarH: 25px;
// Overlay // Overlay
$ovrTopBarH: 60px; $ovrTopBarH: 60px;
$ovrFooterH: 40px; $ovrFooterH: 40px;
$overlayMargin: 25px;
// Items // Items
$ueBrowseGridItemLg: 200px; $ueBrowseGridItemLg: 200px;
$ueBrowseGridItemTopBarH: 20px; $ueBrowseGridItemTopBarH: 20px;
@ -111,6 +114,7 @@ $ueBrowseGridItemBottomBarH: 30px;
$itemPadLR: 5px; $itemPadLR: 5px;
// Tree // Tree
$treeVCW: 10px; $treeVCW: 10px;
$treeTypeIconH: 16px;
$treeTypeIconW: 20px; $treeTypeIconW: 20px;
$treeContextTriggerW: 20px; $treeContextTriggerW: 20px;
$colorItemTreeIcon: $colorKey; $colorItemTreeIcon: $colorKey;
@ -144,10 +148,13 @@ $reqSymbolFontSize: 0.7em;
/************************** CONTROLS */ /************************** CONTROLS */
$controlDisabledOpacity: 0.3; $controlDisabledOpacity: 0.3;
$formLabelW: 20%; $formLabelW: 30%;
$formInputH: 22px; $formInputH: 22px;
$formRowCtrlsH: 14px; $formRowCtrlsH: 14px;
$formTBPad: $interiorMargin;
$formLRPad: $interiorMargin;
$menuLineH: 1.5rem; $menuLineH: 1.5rem;
$menuLineHPx: 24px;
$scrollbarTrackSize: 10px; $scrollbarTrackSize: 10px;
$scrollbarTrackColorBg: rgba(#000, 0.4); $scrollbarTrackColorBg: rgba(#000, 0.4);
$btnStdH: 25px; $btnStdH: 25px;

37
platform/commonUI/general/res/sass/_flex.scss Normal file
View File

@ -0,0 +1,37 @@
.l-flex {
&.l-flex-justify {
justify-content: space-between;
}
.l-flex-row,
&.l-flex-row {
display: flex;
flex-flow: row nowrap;
div, span {
//@include tmpBorder();
}
> div, > span {
//flex: 1 1 0;
}
}
.l-flex-max {
flex: 1 0 !important;
}
.flex-ignore {
display: flex;
flex-flow: row nowrap;
flex: 0 1 auto;
}
}
// TEMP, move out of here once working
.object-browse-bar.bar > div.abs {
@include test(green);
}
.l-flex-row .title-label {
@include test(blue);
flex: 1 0 !important;
}

6
platform/commonUI/general/res/sass/_global.scss
View File

@ -71,12 +71,6 @@ p {
margin-bottom: $interiorMarginLg; margin-bottom: $interiorMarginLg;
} }
span {
/* 618 DEBUG
box-sizing: border-box;
*/
}
mct-container { mct-container {
display: block; display: block;
} }

8
platform/commonUI/general/res/sass/_icons.scss
View File

@ -45,7 +45,7 @@
} }
} }
.bar .icon { .bar .ui-symbol {
display: inline-block; display: inline-block;
} }
@ -65,9 +65,9 @@
position: absolute; position: absolute;
} }
.tree-item .type-icon { //.tree-item .type-icon {
font-size: 16px; // 16px is crisp size // font-size: 16px; // 16px is crisp size
} //}
.l-icon-link:before { .l-icon-link:before {
content: "\f4"; content: "\f4";

24
platform/commonUI/general/res/sass/_mixins.scss
View File

@ -23,8 +23,12 @@
@mixin absPosDefault($offset: 0px, $overflowHidden: hidden) { @mixin absPosDefault($offset: 0px, $overflowHidden: hidden) {
overflow: $overflowHidden; overflow: $overflowHidden;
position: absolute; position: absolute;
top: $offset; right: $offset; bottom: $offset; left: $offset; top: $offset;
width: auto; height: auto; right: $offset;
bottom: $offset;
left: $offset;
width: auto;
height: auto;
} }
@mixin ancillaryIcon($d, $c) { @mixin ancillaryIcon($d, $c) {
@ -256,6 +260,7 @@
@mixin txtShdwSubtle($sVal: 0.1) { @mixin txtShdwSubtle($sVal: 0.1) {
@include text-shadow(rgba(black, $sVal) 0 1px 2px); @include text-shadow(rgba(black, $sVal) 0 1px 2px);
} }
@mixin txtShdwLarge($sVal: 0.7) { @mixin txtShdwLarge($sVal: 0.7) {
@include text-shadow(rgba(black, $sVal) 0 3px 7px); @include text-shadow(rgba(black, $sVal) 0 3px 7px);
} }
@ -313,15 +318,21 @@
} }
} }
@mixin vertical-align { @mixin verticalCenter {
/* This doesn't work on an element inside an element with absolute positioning that has height: auto */ /* This doesn't work on an element inside an element with absolute positioning that has height: auto */
position: relative; //position: relative;
top: 50%; top: 50%;
-webkit-transform: translateY(-50%); -webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%); -ms-transform: translateY(-50%);
transform: translateY(-50%); transform: translateY(-50%);
} }
@mixin verticalCenterBlock($holderH, $itemH) {
top: floor(($holderH - $itemH) / 2);
bottom: auto;
height: $itemH;
}
@mixin ellipsize() { @mixin ellipsize() {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -356,6 +367,11 @@
background-color: rgba($c, $a); background-color: rgba($c, $a);
} }
@mixin tmpBorder($c: #ffcc00, $a: 0.75) {
@inlude box-sizing(border-box);
border: 1px dotted rgba($c, $a);
}
@mixin testObj($w: 2000px, $h: 1000px, $c: black, $a: 0.1) { @mixin testObj($w: 2000px, $h: 1000px, $c: black, $a: 0.1) {
&:after { &:after {
@include box-sizing(border-box); @include box-sizing(border-box);

3
platform/commonUI/general/res/sass/controls/_buttons.scss
View File

@ -26,7 +26,8 @@ $pad: $interiorMargin * $baseRatio;
.btn, .btn,
.l-btn { .l-btn {
@include user-select(none); @include user-select(none);
line-height: 1.5em; // Was 1.25em //line-height: 1.5em; // Was 1.25em
line-height: 150%;
padding: 0 $pad; padding: 0 $pad;
text-decoration: none; text-decoration: none;
&.lg, &.lg,

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

@ -102,7 +102,7 @@
.btn-bar { .btn-bar {
// position: relative; // position: relative;
.btn, /* .btn,
.btn-set, .btn-set,
.t-btn { .t-btn {
display: inline-block; display: inline-block;
@ -113,7 +113,7 @@
&:first-child { &:first-child {
// margin-left: 0; // margin-left: 0;
} }
} }*/
} }
.l-composite-control { .l-composite-control {
@ -153,6 +153,7 @@
font-size: 0.7rem; font-size: 0.7rem;
} }
/*
.btn-set { .btn-set {
// Buttons that have a very tight conceptual grouping - no internal space between them. // Buttons that have a very tight conceptual grouping - no internal space between them.
display: inline-block; display: inline-block;
@ -171,37 +172,33 @@
} }
} }
} }
*/
.object-browse-bar .btn, .object-browse-bar .btn,
.object-browse-bar .t-btn, .object-browse-bar .t-btn,
.object-browse-bar .view-switcher,
.top-bar .buttons-main .btn, .top-bar .buttons-main .btn,
.top-bar .buttons-main .t-btn, .top-bar .buttons-main .t-btn,
.top-bar .view-switcher,
.tool-bar .btn, .tool-bar .btn,
.tool-bar .t-btn { .tool-bar .t-btn {
$h: $btnToolbarH; $h: $btnToolbarH;
display: inline-block; display: inline-block;
font-size: $h * $btnFontSizeToH; font-size: $h * $btnFontSizeToH;
height: $h; line-height: 200%;
line-height: $h - 3; vertical-align: top;
.icon:not(.invoke-menu) {
// position: relative;
// top: -0.04em;
//font-size: 150%;
//vertical-align: middle;
}
} }
label.checkbox.custom { label.checkbox.custom {
$bg: lighten($colorBodyBg, $ltGamma); $bg: lighten($colorBodyBg, $ltGamma);
$d: $formRowCtrlsH; $d: $formRowCtrlsH;
// @include vertical-align();
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
line-height: $d; line-height: $d;
margin-right: $interiorMargin * 4; margin-right: $interiorMargin * 4;
padding-left: $d + $interiorMargin; padding-left: $d + $interiorMargin;
position: relative; position: relative;
vertical-align: top; vertical-align: middle; // was top
em { em {
color: $colorBodyFg; color: $colorBodyFg;
display: inline-block; display: inline-block;
@ -326,9 +323,9 @@ label.checkbox.custom {
$p: 10px; $p: 10px;
$badgeM: $interiorMargin; $badgeM: $interiorMargin;
$badgeD: $h - ($badgeM * 2); $badgeD: $h - ($badgeM * 2);
height: $h; //height: $h;
line-height: $h; //line-height: $h;
padding-right: 10px; //padding-right: 10px;
&.browse-btn { &.browse-btn {
margin-right: $interiorMargin; margin-right: $interiorMargin;
padding-left: $badgeD + $badgeM * 2; padding-left: $badgeD + $badgeM * 2;
@ -351,7 +348,6 @@ label.checkbox.custom {
.context-available { .context-available {
$c: $colorKey; $c: $colorKey;
color: $c; color: $c;
//padding: 0 5px;
&:hover { &:hover {
color: lighten($c, 10%); color: lighten($c, 10%);
} }
@ -359,24 +355,53 @@ label.checkbox.custom {
.view-switcher { .view-switcher {
@include trans-prop-nice-fade($controlFadeMs); @include trans-prop-nice-fade($controlFadeMs);
.type-icon {
//vertical-align: top;
}
} }
/******************************************************** OBJECT-HEADER */ /******************************************************** OBJECT-HEADER */
.object-header { .object-header {
display: inline-block; //@include test();
font-size: 1em; font-size: 1em;
.label {
.title-label { > .title-label,
color: lighten($colorBodyFg, 40%); > .type-icon,
> .context-available {
//@include tmpBorder(#6666ff);
//vertical-align: middle;
} }
.type-icon { > .type-icon {
font-size: 120%; font-size: 120%;
float: left;
margin-right: $interiorMargin; margin-right: $interiorMargin;
vertical-align: middle;
} }
.l-elem-wrapper {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
}
.action {
margin-right: $interiorMargin;
}
.title-label {
@include ellipsize();
color: lighten($colorBodyFg, 40%);
padding-right: 0.35em; // For context arrow. Done with em's so pad is relative to the scale of the text.
//position: relative;
}
.context-available { .context-available {
font-size: 0.7em;
}
@include desktop {
.context-available {
@include trans-prop-nice(opacity, 0.25s);
opacity: 0; opacity: 0;
font-size: 0.8em;
} }
&:hover { &:hover {
.context-available { .context-available {
@ -386,16 +411,6 @@ label.checkbox.custom {
} }
} }
.top-bar,
.object-browse-bar {
.object-header {
font-size: 1.1em;
span {
display: inline-block;
}
}
}
/******************************************************** SLIDERS */ /******************************************************** SLIDERS */
.slider { .slider {
@ -449,6 +464,7 @@ label.checkbox.custom {
/******************************************************** BROWSER ELEMENTS */ /******************************************************** BROWSER ELEMENTS */
@include desktop {
::-webkit-scrollbar { ::-webkit-scrollbar {
@include sliderTrack(); @include sliderTrack();
height: $scrollbarTrackSize; height: $scrollbarTrackSize;
@ -470,3 +486,4 @@ label.checkbox.custom {
::-webkit-scrollbar-corner { ::-webkit-scrollbar-corner {
background: rgba(#000, 0.4); background: rgba(#000, 0.4);
} }
}

28
platform/commonUI/general/res/sass/forms/_elems.scss
View File

@ -20,28 +20,30 @@
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
.section-header { .section-header {
@include border-radius(3px); @include border-radius($basicCr);
background: rgba(white, 0.1); background: rgba(#fff, 0.1);
$c: lighten($colorBodyFg, 20%);
//border-bottom: 1px solid rgba(#fff, 0.3);
color: $c;
font-size: 0.8em; font-size: 0.8em;
margin-top: $interiorMargin; padding: $formTBPad $formLRPad;
padding: $interiorMargin; text-transform: uppercase;
&:first-child {
margin-top: 0;
}
} }
.form { .form {
// @include test(orange); // @include test(orange);
.form-section { .form-section {
position: relative; position: relative;
margin-bottom: $interiorMarginLg * 2;
} }
.form-row { .form-row {
$m: $interiorMargin;
@include box-sizing(border-box); @include box-sizing(border-box);
@include clearfix; @include clearfix;
border-top: 1px solid $colorInteriorBorder; border-top: 1px solid $colorFormLines;
margin-top: $interiorMargin; margin-top: $m;
padding: $interiorMargin; padding: $formTBPad $formLRPad;
position: relative; position: relative;
&.first { &.first {
border-top: none; border-top: none;
@ -49,18 +51,18 @@
.label, .label,
.controls { .controls {
// @include test(orange);
@include box-sizing(border-box); @include box-sizing(border-box);
@include clearfix; @include clearfix;
box-sizing: border-box; font-size: 0.8rem;
font-size: 0.75rem;
line-height: $formInputH; line-height: $formInputH;
min-height: $formInputH; min-height: $formInputH;
} }
>.label { >.label {
// Only style this way for immediate children of .form-row; prevents problems when .label is used in .controls section of a form // Only style this way for immediate children of .form-row; prevents problems when .label is used in .controls section of a form
//@include test(orange, 0.05);
float: left; float: left;
min-width: 120px;
position: relative; position: relative;
white-space: nowrap; white-space: nowrap;
width: $formLabelW; width: $formLabelW;

8
platform/commonUI/general/res/sass/forms/_validation.scss
View File

@ -25,18 +25,18 @@
padding-right: $reqSymbolW + $reqSymbolM; // Keep room for validation element padding-right: $reqSymbolW + $reqSymbolM; // Keep room for validation element
&::after { &::after {
// @include test(yellow, 0.3); // @include test(yellow, 0.3);
display: block; /* display: block;
position: absolute; position: absolute;
top: 0; top: 0;
right: $reqSymbolM; right: $reqSymbolM;
bottom: 0; bottom: 0;
left: auto; left: auto;
height: auto; height: auto;
width: $reqSymbolW; width: $reqSymbolW;*/
font-family: symbolsfont; font-family: symbolsfont;
font-size: $reqSymbolFontSize; font-size: $reqSymbolFontSize;
text-align: right; //text-align: right;
vertical-align: middle; //vertical-align: middle;
} }
} }
&.invalid, &.invalid,

32
platform/commonUI/general/res/sass/items/_item.scss
View File

@ -44,7 +44,7 @@
position: relative; position: relative;
&:hover .item-main { &:hover .item-main {
.item-type { .item-type {
color: $colorKey !important; color: lighten($colorKey, 10%) !important;
.l-icon-link { .l-icon-link {
color: $colorIconLink; color: $colorIconLink;
} }
@ -55,13 +55,16 @@
} }
} }
.contents { .contents {
top: $interiorMargin; right: $interiorMargin; bottom: $interiorMargin; left: $interiorMargin; //@include test(red);
$m: $interiorMarginLg;
top: $m; right: $m; bottom: $m; left: $m;
} }
.bar { .bar {
&.top-bar.abs { &.top-bar {
bottom: auto; bottom: auto;
height: $ueBrowseGridItemTopBarH; height: $ueBrowseGridItemTopBarH;
line-height: $ueBrowseGridItemTopBarH; line-height: $ueBrowseGridItemTopBarH;
text-align: right;
z-index: 5; z-index: 5;
.left, .right { .left, .right {
width: auto; width: auto;
@ -73,10 +76,10 @@
} }
} }
} }
&.bottom-bar.abs { &.bottom-bar {
top: auto; top: auto;
height: $ueBrowseGridItemBottomBarH; //height: $ueBrowseGridItemBottomBarH;
padding: $interiorMargin; line-height: 110%;
} }
} }
.item-main { .item-main {
@ -89,7 +92,7 @@
//@include trans-prop-nice("color", $transTime); //@include trans-prop-nice("color", $transTime);
@include absPosDefault($iconMargin, false); @include absPosDefault($iconMargin, false);
//@include test(red); //@include test(red);
color: $colorItemFg; //color: $colorItemFg;
text-align: center; text-align: center;
font-size: $iconD * 0.95; //6em; font-size: $iconD * 0.95; //6em;
line-height: $iconD; line-height: $iconD;
@ -99,11 +102,12 @@
//line-height: $lh; //line-height: $lh;
.l-icon-link { .l-icon-link {
// When the link icon is in the item-type icon holder // When the link icon is in the item-type icon holder
color: darken($colorIconLink, 25%); //color: darken($colorIconLink, 25%);
height: 36px; color: $colorIconLink;
line-height: 36px; height: auto;
line-height: 100%;
position: absolute; position: absolute;
font-size: 32px; font-size: 0.3em;
left: 0px; left: 0px;
bottom: 10px; bottom: 10px;
z-index: 2; z-index: 2;
@ -123,13 +127,11 @@
} }
.title { .title {
@include txtShdwSubtle(); @include txtShdwSubtle();
@include ellipsize();
color: lighten($colorBodyFg, 20%); color: lighten($colorBodyFg, 20%);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
// font-weight: bold;
} }
.details { .details {
@include ellipsize();
font-size: 0.8em; font-size: 0.8em;
} }
&.selected { &.selected {

27
platform/commonUI/general/res/sass/mobile/_constants.scss
View File

@ -20,18 +20,20 @@
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */ /************************** STYLE */
$mobile-listIcon: 30px; $colorMobilePaneLeft: #222;
$mobile-listRight: 10px;
$phone-itemHeight: $ueBrowseGridItemLg/4; /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
$tablet-itemHeight: $ueBrowseGridItemLg/3; $mobileListIconSize: 30px;
$mobileTitleDescH: 35px;
$mobileOverlayMargin: 10px;
$phoneItemH: floor($ueBrowseGridItemLg/4);
$tabletItemH: floor($ueBrowseGridItemLg/3);
/************************** MOBILE TREE MENU DIMENSIONS */ /************************** MOBILE TREE MENU DIMENSIONS */
$mobile-treeHeight: 38px; $mobileTreeItemH: 35px;
$mobile-startingTreeLeft: 3px; $mobileTreeItemIndent: 20px;
$mobile-runningTreeLeft: 7px; $mobileTreeRightArrowW: 30px;
$mobile-treeRight: 13px;
/************************** WINDOW DIMENSIONS FOR RWD */ /************************** WINDOW DIMENSIONS FOR RWD */
$phoMaxW: 514px; $phoMaxW: 514px;
@ -80,8 +82,5 @@ $desktopPortrait: "screen and #{$desktopPortraitCheck}";
$desktopLandscape: "screen and #{$desktopLandscapeCheck}"; $desktopLandscape: "screen and #{$desktopLandscapeCheck}";
/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */ /************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
$phoneRepSizePortrait: 19px; $proporMenuOnly: 90%;
$phoneRepSizeLandscape: 66%; $proporMenuWithView: 40%;
$tabletRepSizePortrait: 500px;
$tabletRepSizeLandscape: 78%;
$desktopMenuSize: 25%;

117
platform/commonUI/general/res/sass/mobile/_item.scss
View File

@ -27,103 +27,92 @@
.items-holder { .items-holder {
.item { .item {
&.grid-item { &.grid-item {
$dWid: $ueBrowseGridItemLg; $titleH: 30px;
$dHei: $ueBrowseGridItemLg;
@include phoneandtablet { @include phoneandtablet {
$dWid: 100%; width: 100%;
.mobile-grid-nav { >.contents {
top: 0px; top: 0px; right: $interiorMarginLg; bottom: 0px; left: $interiorMarginLg;
bottom: 0px;
right: 55px;
}
.mobile-info {
text-align: center;
width: 50px;
right: 0px;
left: auto;
font-size: 1.3em;
} }
.bar { .bar {
&.bottom-bar.abs { &.top-bar {
top: 0px; // Becomes the right side of the item
height: auto; //@include test(blue);
bottom: 0 !important; left: auto !important; right: 20px !important;
width: 40px !important; height: auto !important;
text-align: right;
}
&.bottom-bar {
// Becomes the left side of the item
left: $mobileListIconSize + $interiorMarginLg;
right: 60px;
} }
} }
.item-main { .item-main {
.item-type { .item-type {
font-size: $mobile-listIcon; //@include test(blue);
top: 0px; font-size: $mobileListIconSize;
left: 0px; right: auto;
bottom: auto;
left: 0;
line-height: 100%;
text-align: left; text-align: left;
height: auto width: $mobileListIconSize;
.l-icon-link {
bottom: 0;
}
} }
.item-open { .item-open {
display: none; display: block;
opacity: 1;
font-size: 1em;
width: auto;
} }
} }
.title, .details {
margin-left: $mobile-listIcon;
}
} }
@include phone { @include phone {
$dHei: $phone-itemHeight; $dHei: $phoneItemH;
width: $dWid;
height: $dHei; height: $dHei;
.mobile-right { .bar {
top: 100%; &.top-bar {
// Becomes the right side of the item
line-height: $dHei !important;
}
&.bottom-bar {
@include verticalCenterBlock($dHei, $mobileTitleDescH);
} }
.mobile-info {
line-height: $phone-itemHeight * .5;
} }
.item-main { .item-main {
.item-type { .item-type {
line-height: $phone-itemHeight * .8; @include verticalCenterBlock($dHei, $mobileListIconSize);
} }
.item-open {
line-height: $dHei;
} }
.title {
margin-right: $mobile-listRight;
line-height: $phone-itemHeight * .5;
}
.details {
margin-right: $mobile-listRight;
line-height: 0px;
} }
} }
@include tablet { @include tablet {
$dHei: $tablet-itemHeight; $dHei: $tabletItemH;
width: $dWid;
height: $dHei; height: $dHei;
.mobile-right { .bar {
top: 100%; &.top-bar {
// Becomes the right side of the item
line-height: $dHei !important;
}
&.bottom-bar {
@include verticalCenterBlock($dHei, $mobileTitleDescH);
} }
.mobile-info {
line-height: $tablet-itemHeight * .57;
} }
.item-main { .item-main {
.item-type { .item-type {
font-size: $mobile-listIcon; @include verticalCenterBlock($dHei, $mobileListIconSize);
line-height: $tablet-itemHeight * .75; }
.item-open {
line-height: $dHei;
}
} }
}
.title {
margin-right: $mobile-listRight;
line-height: $tablet-itemHeight * .57;
}
.details {
margin-right: $mobile-listRight;
line-height: 0px;
}
}
@include desktop {
$dWid: $ueBrowseGridItemLg;
$dHei: $ueBrowseGridItemLg;
width: $dWid;
height: $dHei;
} }
} }
} }

202
platform/commonUI/general/res/sass/mobile/_layout.scss
View File

@ -20,203 +20,155 @@
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
@include phoneandtablet {
// Wrapper of the entire 2 panes, only enacted on // Wrapper of the entire 2 panes, only enacted on
// phone and tablet. Also for the panes // phone and tablet. Also for the panes
.browse-wrapper, .browse-wrapper,
.mobile-pane { .pane {
@include phoneandtablet { top: 0 !important; right: 0; bottom: 0; left: 0;
position: absolute; }
left: 0; top: 0;
right: 0; .pane.left.treeview {
white-space: nowrap; background-color: $colorMobilePaneLeft;
}
.pane.right-repr {
//@include test();
@include slMenuTransitions;
margin-left: 0 !important;
#content-area {
@include slMenuTransitions;
opacity: 1;
} }
} }
// Default views of the panels .user-environ .browse-area,
// if in desktop browser .user-environ .edit-area,
.desktop-browse { .user-environ .editor {
@include desktop { top: 0; left: 0; right: 0; bottom: $ueFooterH;
min-width: 150px;
max-width: 800px;
width: $desktopMenuSize;
} }
.holder.l-mobile {
top: $bodyMargin !important;
right: $bodyMargin !important;
bottom: $bodyMargin !important;
left: $bodyMargin !important;
} }
// When the tree is hidden, these are the // When the tree is hidden, these are the
// classes used for the left menu and the // classes used for the left menu and the
// right representation. // right representation.
.browse-hidetree { .browse-hidetree {
// NOTE: DISABLED SELECTION
// Selection disabled in both panes
// causing cut/copy/paste menu to
// not appear. Should me moved in
// future to properly work
@include phoneandtablet {
@include user-select(none); @include user-select(none);
}
// Sets the left tree menu when the tree // Sets the left tree menu when the tree
// is hidden. // is hidden.
.mobile-pane.left-menu { .pane.left.treeview {
@include phoneandtablet {
@include trans-prop-nice(opacity, .4s);
opacity: 0; opacity: 0;
right: 100% !important; right: 100% !important;
width: auto !important; width: auto !important;
overflow-y: hidden; overflow-y: hidden;
overflow-x: hidden; overflow-x: hidden;
} }
}
// Sets the right represenation when // Sets the right represenation when
// the tree is hidden. // the tree is hidden.
.mobile-pane.right-repr { .pane.right-repr {
@include phoneandtablet { left: 0 !important;
@include slMenuTransitions;
left: auto !important;
width: 100% !important;
}
} }
} }
.mobile-tree-holder {
top: 50px;
}
// When the tree is shown, these are
// the classes used for the left menu
// and the right menu (for each device &
// orientation combination, separate
// parameters are used)
.browse-showtree { .browse-showtree {
// NOTE: DISABLED SELECTION // NOTE: DISABLED SELECTION
// Selection disabled in both panes // Selection disabled in both panes
// causing cut/copy/paste menu to // causing cut/copy/paste menu to
// not appear. Should me moved in // not appear. Should me moved in
// future to properly work // future to properly work
@include phoneandtablet {
@include user-select(none); @include user-select(none);
}
// Sets the left tree menu when the tree // Sets the left tree menu when the tree is shown.
// is shown. .pane.left.treeview {
.mobile-pane.left-menu {
@include phoneandtablet {
@include trans-prop-nice(opacity, .4s); @include trans-prop-nice(opacity, .4s);
@include background-image(linear-gradient(90deg, rgba(black, 0) 98%, rgba(black, 0.3) 100%));
opacity: 1; opacity: 1;
display: block !important; display: block !important;
width: auto !important; //width: auto !important; // CH CO
} right: auto !important;
// On both phones and tablets, the amount of width: $proporMenuWithView !important;
// space allowed for the right pane is specified
@include phonePortrait {
right: $phoneRepSizePortrait !important;
}
@include phoneLandscape {
right: $phoneRepSizeLandscape !important;
}
@include tabletPortrait {
right: $tabletRepSizePortrait !important;
}
@include tabletLandscape {
right: $tabletRepSizeLandscape !important;
}
}
// Sets the right represenation when
// the tree is shown.
.mobile-pane.right-repr {
@include phoneandtablet {
@include slMenuTransitions;
left: auto !important;
}
// On both phones and tablets, the width of
// the right pane is specified
@include phonePortrait {
width: $phoneRepSizePortrait !important;
}
@include phoneLandscape {
width: $phoneRepSizeLandscape !important;
}
@include tabletPortrait {
width: $tabletRepSizePortrait !important;
}
@include tabletLandscape {
width: $tabletRepSizeLandscape !important;
} }
// Sets the right representation when the tree is shown.
.pane.right-repr {
left: $proporMenuWithView !important;
//width: auto !important;
//left: 0 !important;
//transform: translateX($proporMenuWithView);
} }
} }
// Button position is set as absolute with transitions .mobile-menu-icon {
.button-pos { font-size: 110%;
@include phoneandtablet {
position: absolute; position: absolute;
} top: $bodyMargin + 2;
left: $bodyMargin;
} }
// Object header must be moved .object-browse-bar {
// over to make space for the //@include test();
// hamburger icon left: 30px !important;
.object-header {
@include phoneandtablet {
position: relative;
left: 44px;
.label {
.context-available { .context-available {
opacity: 1 !important; opacity: 1 !important;
} }
.view-switcher {
margin-right: 0 !important;
.name {
// Hide the name in mobile
display: none;
} }
} }
} }
.desktop-hide { .tree-holder {
@include desktop { overflow-x: hidden !important;
display: none;
} }
.mobile-disable-select {
@include user-select(none);
} }
// Hides objects on phone and tablet // Hides objects on phone and tablet
.mobile-hide { .mobile-hide,
@include phoneandtablet { .mobile-hide-important {
display: none;
}
}
.mobile-important-hide {
@include phoneandtablet {
display: none !important; display: none !important;
} }
}
.mobile-back-hide { .mobile-back-hide {
@include phoneandtablet {
pointer-events: none; pointer-events: none;
@include trans-prop-nice(opacity, .4s); @include trans-prop-nice(opacity, .4s);
opacity: 0; opacity: 0;
} }
}
// Hides objects on phone and tablet
.mobile-back-unhide { .mobile-back-unhide {
@include phoneandtablet {
pointer-events: all; pointer-events: all;
@include trans-prop-nice(opacity, .4s); @include trans-prop-nice(opacity, .4s);
opacity: 1; opacity: 1;
} }
} }
// Hides objects only on the phone @include phonePortrait {
.phone-hide { .browse-showtree {
@include phone { .pane.left.treeview {
display: none; width: $proporMenuOnly !important;
}
.pane.right-repr {
left: 0 !important;
transform: translateX($proporMenuOnly);
#content-area {
opacity: 0;
}
}
} }
} }
.tree-holder { @include desktop {
@include phoneandtablet { .desktop-hide {
overflow-x: hidden !important; display: none;
}
}
.mobile-disable-select {
@include phoneandtablet {
@include user-select(none);
} }
} }

38
platform/commonUI/general/res/sass/mobile/_tree.scss
View File

@ -20,39 +20,33 @@
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
ul.tree {
// Only applies to phones and tablets
@include phoneandtablet { @include phoneandtablet {
@include menuUlReset(); ul.tree {
//@include menuUlReset();
li { li {
//border-top: 1px solid $colorInteriorBorder; // TEMP
span.tree-item { span.tree-item {
// Adds some space to the top of each tree item height: $mobileTreeItemH;
height: $mobile-treeHeight; line-height: $mobileTreeItemH;
line-height: $mobile-treeHeight;
padding-top: $interiorMarginSm;
padding-bottom: $interiorMarginSm;
margin-bottom: 0px; margin-bottom: 0px;
.view-control { .view-control {
//@include test(red);
position: absolute; position: absolute;
right: $mobile-treeRight; font-size: 1.1em;
font-size: 1.8em;
right: 0px; right: 0px;
width: 35px; width: $mobileTreeRightArrowW;
text-align: center; text-align: center;
} }
.label { .label {
// Designates the starting left margin left: 0;
// (indentation) of 'My Items' right: $mobileTreeRightArrowW + $interiorMargin; // Allows tree item name to stop prior to the arrow
// Also adds right space for selection button line-height: $mobileTreeItemH;
left: $mobile-startingTreeLeft; //font-size: 1.1em; // CH CO
right: 45px; .type-icon {
font-size: 1.2em; @include verticalCenterBlock($mobileTreeItemH, $treeTypeIconH);
// Allows tree item name to stop prior }
// to the arrow
.title-label { .title-label {
right: $mobile-treeRight * 1.3;
} }
} }
} }
@ -61,7 +55,7 @@ ul.tree {
// Sets the margin on the left, which causes the // Sets the margin on the left, which causes the
// running indentation after each folder is made // running indentation after each folder is made
ul.tree { ul.tree {
margin-left: $mobile-runningTreeLeft; margin-left: $mobileTreeItemIndent;
} }
} }
} }

23
platform/commonUI/general/res/sass/mobile/controls/_menus.scss
View File

@ -20,15 +20,24 @@
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
// Mobile hamburger icon is // Override the Create menu for mobile
// sized according to the device
.mobile-menu-icon {
display: inline-block;
@include phoneandtablet { @include phoneandtablet {
font-size: 21px; .menu-element {
padding-top: $imageThumbPad; .super-menu {
$d: 250px;
width: $d;
height: $d;
.pane {
&.left {
border-right: none;
padding-right: 0;
width: 100%;
} }
@include desktop { &.right {
display: none; display: none;
} }
} }
}
}
}

48
platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss
View File

@ -1,11 +1,51 @@
.overlay {
@include phoneandtablet { @include phoneandtablet {
.overlay {
$m: 0; $m: 0;
// Removes curved edges on the dialog box .clk-icon.close {
// and makes it take up fullscreen top: $mobileOverlayMargin; right: $mobileOverlayMargin;
}
> .holder { > .holder {
@include border-radius($m); @include border-radius($m);
top: $m; right: $m; bottom: $m; left: $m; top: $m;
right: $m;
bottom: $m;
left: $m;
> .contents {
top: $mobileOverlayMargin;
right: $mobileOverlayMargin;
bottom: $mobileOverlayMargin;
left: $mobileOverlayMargin;
.top-bar {
> .title {
margin-right: 1.2em;
}
}
.form.editor {
border: none;
.contents {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
}
}
}
}
@include phone {
.overlay > .holder > .contents .form.editor .contents .form-row {
> .label,
> .controls {
//@include test(blue);
display: block;
float: none;
width: 100%;
} }
} }
} }

14
platform/commonUI/general/res/sass/overlay/_overlay.scss
View File

@ -24,16 +24,10 @@
background: $colorOvrBlocker; background: $colorOvrBlocker;
z-index: 100; z-index: 100;
} }
.btn.close { .clk-icon.close {
@include border-radius($basicCr * 2);
padding: 3px 6px;
position: absolute; position: absolute;
border: none; top: $interiorMarginLg; right: $interiorMarginLg; bottom: auto; left: auto;
top: $interiorMarginSm; right: $interiorMarginSm; bottom: auto; left: auto;
z-index: 100; z-index: 100;
}
.editor {
// background: $colorBodyBg;
} }
>.holder { >.holder {
$i: 15%; $i: 15%;
@ -43,13 +37,13 @@
top: $i; right: $i; bottom: $i; left: $i; top: $i; right: $i; bottom: $i; left: $i;
z-index: 101; z-index: 101;
>.contents { >.contents {
$m: 25px; $m: $overlayMargin;
top: $m; right: $m; bottom: $m; left: $m; top: $m; right: $m; bottom: $m; left: $m;
} }
} }
.title { .title {
@include ellipsize(); @include ellipsize();
font-size: 1.3em; font-size: 1.2em;
margin-bottom: $interiorMargin; margin-bottom: $interiorMargin;
} }

16
platform/commonUI/general/res/sass/tree/_tree.scss
View File

@ -27,6 +27,7 @@ ul.tree {
position: relative; position: relative;
span.tree-item { span.tree-item {
$runningItemW: 0; $runningItemW: 0;
@include box-sizing(border-box);
@include border-radius($basicCr); @include border-radius($basicCr);
@include single-transition(background-color, 0.25s); @include single-transition(background-color, 0.25s);
display: block; display: block;
@ -55,14 +56,20 @@ ul.tree {
// @include test(orange); // @include test(orange);
@include absPosDefault(); @include absPosDefault();
//left: $runningItemW + $interiorMargin; // Adding pad to left to make room for link icon //left: $runningItemW + $interiorMargin; // Adding pad to left to make room for link icon
line-height: $menuLineH;
left: $runningItemW; left: $runningItemW;
.type-icon { .type-icon {
@include absPosDefault(0, false); //@include absPosDefault(0, false);
$d: $treeTypeIconH; // 16px is crisp size
@include txtShdwSubtle(0.6); @include txtShdwSubtle(0.6);
font-size: $d;
color: $colorItemTreeIcon; color: $colorItemTreeIcon;
left: $interiorMargin; left: $interiorMargin;
right: auto; width: 1em; position: absolute;
@include verticalCenterBlock($menuLineHPx, $d);
line-height: 100%;
right: auto; width: $d;
.icon { .icon {
&.l-icon-link, &.l-icon-link,
@ -81,8 +88,7 @@ ul.tree {
$d: 8px; $d: 8px;
@include ancillaryIcon($d, $colorIconLink); @include ancillaryIcon($d, $colorIconLink);
left: -3px; left: -3px;
bottom: 5px; bottom: 0px;
} }
} }
} }
@ -126,7 +132,7 @@ ul.tree {
// NOTE: [Mobile] Removed Hover on Mobile // NOTE: [Mobile] Removed Hover on Mobile
@include desktop { @include desktop {
&:hover { &:hover {
background: lighten($colorBodyBg, 5%); background: rgba(#fff, 0.1); //lighten($colorBodyBg, 5%);
color: lighten($colorBodyFg, 20%); color: lighten($colorBodyFg, 20%);
.context-trigger { .context-trigger {
display: block; display: block;

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

@ -20,25 +20,23 @@
* 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 + $interiorMargin;
} }
.contents { .contents {
$myM: $interiorMargin; $myM: $interiorMargin;
@ -48,18 +46,22 @@
left: $myM; left: $myM;
} }
&.frame-template { &.frame-template {
.view-switcher {
line-height: $ohH;
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
// Frame template is used because we need to target the lowest nested frame // Frame template is used because we need to target the lowest nested frame
@include desktop {
.view-switcher { .view-switcher {
opacity: 0; opacity: 0;
z-index: 10;
} }
&:hover .view-switcher { &:hover .view-switcher {
// Show the view switcher on frame hover // Show the view switcher on frame hover
//display: inline-block !important;
opacity: 1; opacity: 1;
} }
} }
}
.view-switcher { .view-switcher {
// Hide the name when the view switcher is in a frame context // Hide the name when the view switcher is in a frame context
.name { .name {

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

@ -70,22 +70,30 @@
&.abs { &.abs {
text-wrap: none; text-wrap: none;
white-space: nowrap; white-space: nowrap;
}
&.left, &.left,
.left { .left {
width: 45% !important; width: 45%;
right: auto !important; right: auto;
} }
&.right, &.right,
.right { .right {
width: 45% !important; width: 45%;
left: auto !important; left: auto;
text-align: right; text-align: right;
.icon.major { .icon.major {
margin-left: $interiorMargin * 3; margin-left: $interiorMargin * 3;
} }
} }
} }
&.l-flex {
display: flex;
flex-flow: row nowrap;
.left {
//@include test(green);
flex: 1 1 0;
}
}
}
.user-environ { .user-environ {
.browse-area, .browse-area,
@ -118,7 +126,7 @@
} }
} }
.bottom-bar { .ue-bottom-bar {
//@include absPosDefault($bodyMargin); //@include absPosDefault($bodyMargin);
@include absPosDefault(0);// New status bar design @include absPosDefault(0);// New status bar design
top: auto; top: auto;
@ -200,7 +208,8 @@
.split-layout { .split-layout {
.split-pane-component.pane.left { .split-pane-component.pane.left {
min-width: 150px; min-width: 150px;
max-width: 50%; max-width: 800px;
width: $ueBrowseLeftPaneW;
} }
} }
} }
@ -208,8 +217,8 @@
.edit-mode { .edit-mode {
.split-layout { .split-layout {
.split-pane-component.pane.right { .split-pane-component.pane.right {
min-width: 150px; //min-width: 150px;
max-width: 50%; //max-width: 50%;
.split-pane-component.pane.bottom { .split-pane-component.pane.bottom {
min-height: 50px; min-height: 50px;
max-height: 80%; max-height: 80%;
@ -243,6 +252,12 @@
.right.abs { .right.abs {
top: auto; top: auto;
} }
//.left.abs {
// @include tmpBorder(green);
//}
//.right.abs {
// @include tmpBorder(red);
//}
} }
.object-holder { .object-holder {
top: $ueTopBarH + $interiorMarginLg; top: $ueTopBarH + $interiorMarginLg;
@ -284,6 +299,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;
} }

14
platform/commonUI/general/res/sass/user-environ/_object-browse.scss
View File

@ -20,11 +20,19 @@
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
.object-browse-bar { .object-browse-bar {
//@include test(blue);
@include absPosDefault(0, visible);
@include box-sizing(border-box);
height: $ueTopBarH; height: $ueTopBarH;
line-height: $ueTopBarH; line-height: $ueTopBarH;
.items-select { white-space: nowrap;
.btn-menu {
margin-right: $interiorMargin * 3; .left {
padding-right: $interiorMargin;
.l-back {
display: inline-block;
float: left;
margin-right: $interiorMarginLg;
} }
} }
} }

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

@ -20,23 +20,16 @@
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
.top-bar { .top-bar {
// $h: $ueTopBarH - 5px;
// background: rgba(#ff0000, 0.2);
// line-height: $ueTopBarBtnH;
&.browse, &.browse,
&.edit { &.edit {
border-bottom: 1px solid $colorInteriorBorder; border-bottom: 1px solid $colorInteriorBorder;
top: $bodyMargin; right: $bodyMargin; bottom: auto; left: $bodyMargin; top: $bodyMargin; right: $bodyMargin; bottom: auto; left: $bodyMargin;
height: $ueTopBarEditH; height: $ueTopBarEditH;
} line-height: $ueTopBarH;
.action {
} }
.title { .title {
color: #fff; color: #fff;
// font-weight: bold;
} }
.buttons-main { .buttons-main {
@ -44,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;
} // }
} }
} }

2
platform/commonUI/general/res/templates/controls/switcher.html
View File

@ -21,7 +21,7 @@
--> -->
<span ng-controller="ViewSwitcherController"> <span ng-controller="ViewSwitcherController">
<div <div
class="view-switcher menu-element btn btn-menu dropdown click-invoke" class="view-switcher menu-element s-btn l-btn btn-menu dropdown click-invoke"
ng-if="view.length > 1" ng-if="view.length > 1"
ng-controller="ClickAwayController as toggle" ng-controller="ClickAwayController as toggle"
> >

6
platform/commonUI/general/res/templates/tree-node.html
View File

@ -21,14 +21,16 @@
--> -->
<span ng-controller="ToggleController as toggle"> <span ng-controller="ToggleController as toggle">
<span ng-controller="TreeNodeController as treeNode"> <span ng-controller="TreeNodeController as treeNode">
<span class="tree-item menus-to-left" <span
class="tree-item menus-to-left"
ng-class="{selected: treeNode.isSelected()}" ng-class="{selected: treeNode.isSelected()}"
> >
<mct-representation <mct-representation
key="'label'" key="'label'"
mct-object="domainObject" mct-object="domainObject"
ng-model="ngModel" ng-model="ngModel"
ng-click="!treeNode.checkMobile() ? treeNode.setObject(ngModel, domainObject) : toggle.toggle(); treeNode.trackExpansion()" ng-click="!treeNode.checkMobile() || model.composition == undefined ?
ngModel.selectedObject = domainObject : toggle.toggle(); treeNode.trackExpansion()"
> >
</mct-representation> </mct-representation>
<span <span

5
platform/commonUI/inspect/res/templates/info-button.html
View File

@ -21,6 +21,5 @@
--> -->
<!--The icon for the info button appearing in a grid item (list in folder)--> <!--The icon for the info button appearing in a grid item (list in folder)-->
<div> <a class='ui-symbol icon mobile-info'>&#xe608;</a>
<a class='ui-symbol icon mobile-info'>i</a>
</div>

2
platform/commonUI/inspect/src/gestures/InfoButtonGesture.js
View File

@ -68,7 +68,7 @@ define(
// and then on any body touch the bubble is dismissed // and then on any body touch the bubble is dismissed
function showBubble(event) { function showBubble(event) {
trackPosition(event); trackPosition(event);
event.stopPropagation();
// Show the bubble, but on any touchstart on the // Show the bubble, but on any touchstart on the
// body (anywhere) call hidebubble // body (anywhere) call hidebubble
dismissBubble = infoService.display( dismissBubble = infoService.display(

12
platform/core/bundle.json
View File

@ -117,12 +117,6 @@
"pattern": "\\S+", "pattern": "\\S+",
"required": true, "required": true,
"cssclass": "l-med" "cssclass": "l-med"
},
{
"control": "checkbox",
"name": "Display title by default",
"key": "displayTitle",
"property": [ "display", "title" ]
} }
] ]
}, },
@ -142,7 +136,11 @@
{ {
"key": "unknown", "key": "unknown",
"name": "Unknown Type", "name": "Unknown Type",
"glyph": "?" "glyph": "\u003f"
},
{
"name": "Unknown Type",
"glyph": "\u003f"
} }
], ],
"capabilities": [ "capabilities": [

9
platform/features/layout/res/templates/frame.html
View File

@ -20,13 +20,12 @@
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<div class="frame frame-template abs"> <div class="frame frame-template abs">
<div class="bar abs object-header object-top-bar"> <div class="bar abs l-flex object-header object-top-bar">
<div class="title left abs"> <div class="left">
<mct-representation key="'node'" <mct-representation key="'object-header'" mct-object="domainObject">
mct-object="domainObject">
</mct-representation> </mct-representation>
</div> </div>
<div class="btn-bar right abs"> <div class="btn-bar right">
<mct-representation key="'switcher'" <mct-representation key="'switcher'"
ng-model="representation" ng-model="representation"
mct-object="domainObject"> mct-object="domainObject">