ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-11 23:42:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] Sanding and polishing on common front-end elements

Browse Source 
WTD-1048
Originally did a lot of this work in warp1048 by mistake
This commit pulls in all /platform-only changes from that branch
Mods are mostly related to WTD-1046 specifically, but also touch toolbar and buttons
This commit is contained in:
Charles Hacskaylo 2015-03-20 16:37:42 -07:00
parent 988f539ee1
commit 8018c8f42e
14 changed files with 399 additions and 293 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -218,7 +218,7 @@ span {
.user-environ .edit-area .tool-bar { .user-environ .edit-area .tool-bar {
bottom: auto; bottom: auto;
height: 35px; height: 35px;
line-height: 33px; } line-height: 28px; }
/* line 38, ../sass/user-environ/_layout.scss */ /* line 38, ../sass/user-environ/_layout.scss */
.user-environ .edit-area .work-area { .user-environ .edit-area .work-area {
top: 45px; } top: 45px; }
@ -388,20 +388,6 @@ span {
width: 100%; width: 100%;
pointer-events: none; pointer-events: none;
z-index: 0; } z-index: 0; }
/* line 17, ../sass/_fixed-position.scss */
.t-fixed-position.l-fixed-position .l-grid-holder .l-grid.l-grid-x {
background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
background-image: -o-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
background-repeat: repeat-x; }
/* line 21, ../sass/_fixed-position.scss */
.t-fixed-position.l-fixed-position .l-grid-holder .l-grid.l-grid-y {
background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
background-repeat: repeat-y; }
/* line 28, ../sass/_fixed-position.scss */ /* line 28, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-item { .t-fixed-position .l-fixed-position-item {
position: absolute; position: absolute;
@ -472,7 +458,21 @@ span {
border: 1px solid #0099cc; border: 1px solid #0099cc;
position: absolute; } position: absolute; }
/* line 103, ../sass/_fixed-position.scss */ /* line 105, ../sass/_fixed-position.scss */
.edit-mode .t-fixed-position.l-fixed-position .l-grid-holder .l-grid.l-grid-x {
background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
background-image: -o-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
background-repeat: repeat-x; }
/* line 109, ../sass/_fixed-position.scss */
.edit-mode .t-fixed-position.l-fixed-position .l-grid-holder .l-grid.l-grid-y {
background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
background-repeat: repeat-y; }
/* line 118, ../sass/_fixed-position.scss */
.edit-mode .t-fixed-position .l-fixed-position-item:not(.s-selected):hover { .edit-mode .t-fixed-position .l-fixed-position-item:not(.s-selected):hover {
border: 1px dotted rgba(0, 153, 204, 0.5); } border: 1px dotted rgba(0, 153, 204, 0.5); }
@ -1126,8 +1126,7 @@ a.l-btn span {
.btn-bar .btn, .btn-bar .btn,
.btn-bar .btn-set, .btn-bar .btn-set,
.btn-bar .t-btn { .btn-bar .t-btn {
display: inline-block; display: inline-block; }
margin-left: 5px; }
/* line 157, ../sass/controls/_controls.scss */ /* line 157, ../sass/controls/_controls.scss */
.l-composite-control { .l-composite-control {
@ -1137,23 +1136,24 @@ a.l-btn span {
line-height: 18px; } line-height: 18px; }
/* line 166, ../sass/controls/_controls.scss */ /* line 166, ../sass/controls/_controls.scss */
.control-group { .l-control-group {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
border-left: 1px solid #4d4d4d; border-left: 1px solid #4d4d4d;
display: inline-block;
padding: 0 5px; padding: 0 5px;
position: relative; } position: relative; }
/* line 173, ../sass/controls/_controls.scss */ /* line 174, ../sass/controls/_controls.scss */
.control-group:first-child { .l-control-group:first-child {
border-left: none; border-left: none;
padding-left: 0; } padding-left: 0; }
/* line 179, ../sass/controls/_controls.scss */ /* line 180, ../sass/controls/_controls.scss */
.btn-set { .btn-set {
display: inline-block; display: inline-block;
position: relative; } position: relative; }
/* line 184, ../sass/controls/_controls.scss */ /* line 185, ../sass/controls/_controls.scss */
.btn-set .btn, .btn-set .btn,
.btn-set .t-btn { .btn-set .t-btn {
-webkit-border-radius: 0; -webkit-border-radius: 0;
@ -1163,7 +1163,7 @@ a.l-btn span {
border-radius: 0; border-radius: 0;
border-left: 1px solid #666666; border-left: 1px solid #666666;
margin-left: 0; } margin-left: 0; }
/* line 188, ../sass/controls/_controls.scss */ /* line 189, ../sass/controls/_controls.scss */
.btn-set .btn:first-child, .btn-set .btn:first-child,
.btn-set .t-btn:first-child { .btn-set .t-btn:first-child {
border-left: none; border-left: none;
@ -1173,7 +1173,7 @@ a.l-btn span {
-moz-border-radius-bottomleft: 3px; -moz-border-radius-bottomleft: 3px;
-webkit-border-bottom-left-radius: 3px; -webkit-border-bottom-left-radius: 3px;
border-bottom-left-radius: 3px; } border-bottom-left-radius: 3px; }
/* line 192, ../sass/controls/_controls.scss */ /* line 193, ../sass/controls/_controls.scss */
.btn-set .btn:last-child, .btn-set .btn:last-child,
.btn-set .t-btn:last-child { .btn-set .t-btn:last-child {
-moz-border-radius-topright: 3px; -moz-border-radius-topright: 3px;
@ -1183,7 +1183,7 @@ a.l-btn span {
-webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px; } border-bottom-right-radius: 3px; }
/* line 203, ../sass/controls/_controls.scss */ /* line 204, ../sass/controls/_controls.scss */
.object-browse-bar .btn, .object-browse-bar .btn,
.object-browse-bar .t-btn, .object-browse-bar .t-btn,
.top-bar .buttons-main .btn, .top-bar .buttons-main .btn,
@ -1194,7 +1194,7 @@ a.l-btn span {
font-size: 12.6px; font-size: 12.6px;
height: 28px; height: 28px;
line-height: 28px; } line-height: 28px; }
/* line 209, ../sass/controls/_controls.scss */ /* line 210, ../sass/controls/_controls.scss */
.object-browse-bar .btn .icon:not(.invoke-menu), .object-browse-bar .btn .icon:not(.invoke-menu),
.object-browse-bar .t-btn .icon:not(.invoke-menu), .object-browse-bar .t-btn .icon:not(.invoke-menu),
.top-bar .buttons-main .btn .icon:not(.invoke-menu), .top-bar .buttons-main .btn .icon:not(.invoke-menu),
@ -1204,7 +1204,7 @@ a.l-btn span {
font-size: 150%; font-size: 150%;
vertical-align: middle; } vertical-align: middle; }
/* line 217, ../sass/controls/_controls.scss */ /* line 218, ../sass/controls/_controls.scss */
label.checkbox.custom { label.checkbox.custom {
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
@ -1213,13 +1213,13 @@ label.checkbox.custom {
padding-left: 19px; padding-left: 19px;
position: relative; position: relative;
vertical-align: top; } vertical-align: top; }
/* line 228, ../sass/controls/_controls.scss */ /* line 229, ../sass/controls/_controls.scss */
label.checkbox.custom em { label.checkbox.custom em {
color: #999999; color: #999999;
display: inline-block; display: inline-block;
height: 14px; height: 14px;
min-width: 14px; } min-width: 14px; }
/* line 233, ../sass/controls/_controls.scss */ /* line 234, ../sass/controls/_controls.scss */
label.checkbox.custom em:before { label.checkbox.custom em:before {
-webkit-border-radius: 2.25px; -webkit-border-radius: 2.25px;
-moz-border-radius: 2.25px; -moz-border-radius: 2.25px;
@ -1240,51 +1240,51 @@ label.checkbox.custom {
top: 0; top: 0;
position: absolute; position: absolute;
text-align: center; } text-align: center; }
/* line 251, ../sass/controls/_controls.scss */ /* line 252, ../sass/controls/_controls.scss */
label.checkbox.custom.no-text { label.checkbox.custom.no-text {
overflow: hidden; overflow: hidden;
margin-right: 0; margin-right: 0;
padding-left: 0; padding-left: 0;
height: 14px; height: 14px;
width: 14px; } width: 14px; }
/* line 257, ../sass/controls/_controls.scss */ /* line 258, ../sass/controls/_controls.scss */
label.checkbox.custom.no-text em { label.checkbox.custom.no-text em {
overflow: hidden; } overflow: hidden; }
/* line 261, ../sass/controls/_controls.scss */ /* line 262, ../sass/controls/_controls.scss */
label.checkbox.custom input { label.checkbox.custom input {
display: none; } display: none; }
/* line 263, ../sass/controls/_controls.scss */ /* line 264, ../sass/controls/_controls.scss */
label.checkbox.custom input:checked ~ em:before { label.checkbox.custom input:checked ~ em:before {
background: #0099cc; background: #0099cc;
color: #ccf2ff; color: #ccf2ff;
content: "2"; } content: "2"; }
/* line 271, ../sass/controls/_controls.scss */ /* line 272, ../sass/controls/_controls.scss */
.input-labeled { .input-labeled {
margin-left: 5px; } margin-left: 5px; }
/* line 273, ../sass/controls/_controls.scss */ /* line 274, ../sass/controls/_controls.scss */
.input-labeled label { .input-labeled label {
display: inline-block; display: inline-block;
margin-right: 3px; } margin-right: 3px; }
/* line 277, ../sass/controls/_controls.scss */ /* line 278, ../sass/controls/_controls.scss */
.input-labeled.inline { .input-labeled.inline {
display: inline-block; } display: inline-block; }
/* line 280, ../sass/controls/_controls.scss */ /* line 281, ../sass/controls/_controls.scss */
.input-labeled:first-child { .input-labeled:first-child {
margin-left: 0; } margin-left: 0; }
/* line 285, ../sass/controls/_controls.scss */ /* line 286, ../sass/controls/_controls.scss */
.btn-menu label.checkbox.custom { .btn-menu label.checkbox.custom {
margin-left: 5px; } margin-left: 5px; }
/* line 290, ../sass/controls/_controls.scss */ /* line 291, ../sass/controls/_controls.scss */
.item .checkbox.checked label { .item .checkbox.checked label {
-webkit-box-shadow: none; -webkit-box-shadow: none;
-moz-box-shadow: none; -moz-box-shadow: none;
box-shadow: none; box-shadow: none;
border-bottom: none; } border-bottom: none; }
/* line 296, ../sass/controls/_controls.scss */ /* line 297, ../sass/controls/_controls.scss */
.btn-menu { .btn-menu {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d4d4d), color-stop(100%, #404040)); background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d4d4d), color-stop(100%, #404040));
background-image: -webkit-linear-gradient(#4d4d4d, #404040); background-image: -webkit-linear-gradient(#4d4d4d, #404040);
@ -1315,42 +1315,42 @@ label.checkbox.custom {
background-image: -moz-linear-gradient(#666666, #4d4d4d); background-image: -moz-linear-gradient(#666666, #4d4d4d);
background-image: -o-linear-gradient(#666666, #4d4d4d); background-image: -o-linear-gradient(#666666, #4d4d4d);
background-image: linear-gradient(#666666, #4d4d4d); } background-image: linear-gradient(#666666, #4d4d4d); }
/* line 303, ../sass/controls/_controls.scss */ /* line 304, ../sass/controls/_controls.scss */
.btn-menu.dropdown { .btn-menu.dropdown {
padding-left: 5px; padding-left: 10px;
padding-right: 5px; } padding-right: 10px; }
/* line 309, ../sass/controls/_controls.scss */ /* line 310, ../sass/controls/_controls.scss */
.btn-menu:not(.disabled):hover { .btn-menu:not(.disabled):hover {
color: #cccccc; } color: #cccccc; }
/* line 313, ../sass/controls/_controls.scss */ /* line 314, ../sass/controls/_controls.scss */
.btn-menu.btn-invoke-menu { .btn-menu.btn-invoke-menu {
color: #0099cc; color: #0099cc;
padding: 0 5px; } padding: 0 5px; }
/* line 317, ../sass/controls/_controls.scss */ /* line 318, ../sass/controls/_controls.scss */
.btn-menu.btn-invoke-menu:hover { .btn-menu.btn-invoke-menu:hover {
color: deepskyblue; } color: deepskyblue; }
/* line 327, ../sass/controls/_controls.scss */ /* line 328, ../sass/controls/_controls.scss */
.btn-menu .type-icon { .btn-menu .type-icon {
margin-right: 5px; } margin-right: 5px; }
/* line 330, ../sass/controls/_controls.scss */ /* line 331, ../sass/controls/_controls.scss */
.btn-menu .menu { .btn-menu .menu {
position: absolute; position: absolute;
left: 0; left: 0;
text-align: left; } text-align: left; }
/* line 335, ../sass/controls/_controls.scss */ /* line 336, ../sass/controls/_controls.scss */
.btn-menu .menu .ui-symbol.icon { .btn-menu .menu .ui-symbol.icon {
width: 12px; } width: 12px; }
/* line 341, ../sass/controls/_controls.scss */ /* line 342, ../sass/controls/_controls.scss */
.top-bar .btn-menu { .top-bar .btn-menu {
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
padding-right: 10px; } padding-right: 10px; }
/* line 349, ../sass/controls/_controls.scss */ /* line 350, ../sass/controls/_controls.scss */
.top-bar .btn-menu.browse-btn { .top-bar .btn-menu.browse-btn {
margin-right: 5px; margin-right: 5px;
padding-left: 35px; } padding-left: 35px; }
/* line 352, ../sass/controls/_controls.scss */ /* line 353, ../sass/controls/_controls.scss */
.top-bar .btn-menu.browse-btn .badge { .top-bar .btn-menu.browse-btn .badge {
-webkit-border-radius: 4.5px; -webkit-border-radius: 4.5px;
-moz-border-radius: 4.5px; -moz-border-radius: 4.5px;
@ -1369,30 +1369,30 @@ label.checkbox.custom {
height: auto; } height: auto; }
/******************************************************** OBJECT-HEADER */ /******************************************************** OBJECT-HEADER */
/* line 369, ../sass/controls/_controls.scss */ /* line 370, ../sass/controls/_controls.scss */
.object-header { .object-header {
display: inline-block; display: inline-block;
font-size: 1em; } font-size: 1em; }
/* line 372, ../sass/controls/_controls.scss */ /* line 373, ../sass/controls/_controls.scss */
.object-header .title { .object-header .title {
color: white; } color: white; }
/* line 375, ../sass/controls/_controls.scss */ /* line 376, ../sass/controls/_controls.scss */
.object-header .type-icon { .object-header .type-icon {
font-size: 1.5em; font-size: 1.5em;
margin-right: 5px; margin-right: 5px;
vertical-align: middle; } vertical-align: middle; }
/* line 384, ../sass/controls/_controls.scss */ /* line 385, ../sass/controls/_controls.scss */
.top-bar .object-header, .top-bar .object-header,
.object-browse-bar .object-header { .object-browse-bar .object-header {
font-size: 1.1em; } font-size: 1.1em; }
/* line 386, ../sass/controls/_controls.scss */ /* line 387, ../sass/controls/_controls.scss */
.top-bar .object-header span, .top-bar .object-header span,
.object-browse-bar .object-header span { .object-browse-bar .object-header span {
display: inline-block; } display: inline-block; }
/******************************************************** VIEW-CONTROLS */ /******************************************************** VIEW-CONTROLS */
/* line 395, ../sass/controls/_controls.scss */ /* line 396, ../sass/controls/_controls.scss */
.view-controls .view-type { .view-controls .view-type {
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
@ -1406,16 +1406,16 @@ label.checkbox.custom {
line-height: 20px; line-height: 20px;
padding-left: 5px; padding-left: 5px;
padding-right: 5px; } padding-right: 5px; }
/* line 406, ../sass/controls/_controls.scss */ /* line 407, ../sass/controls/_controls.scss */
.view-controls .view-type.cur { .view-controls .view-type.cur {
background: #666666; } background: #666666; }
/* line 411, ../sass/controls/_controls.scss */ /* line 412, ../sass/controls/_controls.scss */
.edit-mode .top-bar .control-set.edit-view-controls { .edit-mode .top-bar .control-set.edit-view-controls {
margin-right: 50px; } margin-right: 50px; }
/******************************************************** SLIDERS */ /******************************************************** SLIDERS */
/* line 422, ../sass/controls/_controls.scss */ /* line 423, ../sass/controls/_controls.scss */
.slider .slot { .slider .slot {
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
-moz-border-radius: 2px; -moz-border-radius: 2px;
@ -1438,7 +1438,7 @@ label.checkbox.custom {
right: 0; right: 0;
bottom: auto; bottom: auto;
left: 0; } left: 0; }
/* line 433, ../sass/controls/_controls.scss */ /* line 434, ../sass/controls/_controls.scss */
.slider .knob { .slider .knob {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d4d4d), color-stop(100%, #404040)); background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d4d4d), color-stop(100%, #404040));
background-image: -webkit-linear-gradient(#4d4d4d, #404040); background-image: -webkit-linear-gradient(#4d4d4d, #404040);
@ -1489,12 +1489,12 @@ label.checkbox.custom {
/* line 120, ../sass/_mixins.scss */ /* line 120, ../sass/_mixins.scss */
.slider .knob:not(.disabled):hover:before { .slider .knob:not(.disabled):hover:before {
border-color: rgba(0, 153, 204, 0.9); } border-color: rgba(0, 153, 204, 0.9); }
/* line 444, ../sass/controls/_controls.scss */ /* line 445, ../sass/controls/_controls.scss */
.slider .knob:before { .slider .knob:before {
top: 1px; top: 1px;
bottom: 3px; bottom: 3px;
left: 5px; } left: 5px; }
/* line 451, ../sass/controls/_controls.scss */ /* line 452, ../sass/controls/_controls.scss */
.slider .range { .slider .range {
background: rgba(0, 153, 204, 0.6); background: rgba(0, 153, 204, 0.6);
cursor: ew-resize; cursor: ew-resize;
@ -1505,12 +1505,12 @@ label.checkbox.custom {
left: auto; left: auto;
height: auto; height: auto;
width: auto; } width: auto; }
/* line 461, ../sass/controls/_controls.scss */ /* line 462, ../sass/controls/_controls.scss */
.slider .range:hover { .slider .range:hover {
background: rgba(0, 153, 204, 0.7); } background: rgba(0, 153, 204, 0.7); }
/******************************************************** BROWSER ELEMENTS */ /******************************************************** BROWSER ELEMENTS */
/* line 469, ../sass/controls/_controls.scss */ /* line 470, ../sass/controls/_controls.scss */
::-webkit-scrollbar { ::-webkit-scrollbar {
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
-moz-border-radius: 2px; -moz-border-radius: 2px;
@ -1529,7 +1529,7 @@ label.checkbox.custom {
height: 10px; height: 10px;
width: 10px; } width: 10px; }
/* line 475, ../sass/controls/_controls.scss */ /* line 476, ../sass/controls/_controls.scss */
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #666666), color-stop(100%, #595959)); background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #666666), color-stop(100%, #595959));
background-image: -webkit-linear-gradient(#666666, #595959 20px); background-image: -webkit-linear-gradient(#666666, #595959 20px);
@ -1548,7 +1548,7 @@ label.checkbox.custom {
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
border-top: 1px solid gray; } border-top: 1px solid gray; }
/* line 482, ../sass/controls/_controls.scss */ /* line 483, ../sass/controls/_controls.scss */
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #808080), color-stop(100%, #737373)); background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #808080), color-stop(100%, #737373));
background-image: -webkit-linear-gradient(#808080, #737373 20px); background-image: -webkit-linear-gradient(#808080, #737373 20px);
@ -1556,7 +1556,7 @@ label.checkbox.custom {
background-image: -o-linear-gradient(#808080, #737373 20px); background-image: -o-linear-gradient(#808080, #737373 20px);
background-image: linear-gradient(#808080, #737373 20px); } background-image: linear-gradient(#808080, #737373 20px); }
/* line 487, ../sass/controls/_controls.scss */ /* line 488, ../sass/controls/_controls.scss */
::-webkit-scrollbar-corner { ::-webkit-scrollbar-corner {
background: rgba(0, 0, 0, 0.4); } background: rgba(0, 0, 0, 0.4); }
@ -1568,6 +1568,10 @@ label.checkbox.custom {
.checkbox-list li { .checkbox-list li {
margin-bottom: 5px; } margin-bottom: 5px; }
/* line 14, ../sass/controls/_lists.scss */
.l-tree-item-flat-list .tree-item .label {
left: 5px !important; }
/******************************************************** MENUS */ /******************************************************** MENUS */
/* line 2, ../sass/controls/_menus.scss */ /* line 2, ../sass/controls/_menus.scss */
.menu-element { .menu-element {
@ -1621,7 +1625,7 @@ label.checkbox.custom {
box-sizing: border-box; box-sizing: border-box;
border-top: 1px solid #737373; border-top: 1px solid #737373;
line-height: 1.5rem; line-height: 1.5rem;
padding: 3px 10px 3px 32px; padding: 3px 10px 3px 35px;
white-space: nowrap; } white-space: nowrap; }
/* line 25, ../sass/controls/_menus.scss */ /* line 25, ../sass/controls/_menus.scss */
.menu-element .menu ul li:first-child { .menu-element .menu ul li:first-child {
@ -2633,8 +2637,8 @@ input[type="text"] {
.tool-bar { .tool-bar {
border-bottom: 1px solid #4d4d4d; } border-bottom: 1px solid #4d4d4d; }
/* line 3, ../sass/user-environ/_tool-bar.scss */ /* line 3, ../sass/user-environ/_tool-bar.scss */
.tool-bar .control-group { .tool-bar .l-control-group {
height: 35px; } height: 28px; }
/* line 6, ../sass/user-environ/_tool-bar.scss */ /* line 6, ../sass/user-environ/_tool-bar.scss */
.tool-bar input[type="text"] { .tool-bar input[type="text"] {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;

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

@ -7,96 +7,135 @@ ul.tree {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
padding: 0; } padding: 0; }
/* line 4, ../sass/tree/_tree.scss */ /* line 3, ../sass/tree/_tree.scss */
ul.tree li .tree-item { ul.tree li {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-transition: background-color 0.25s;
-moz-transition: background-color 0.25s;
-o-transition: background-color 0.25s;
transition: background-color 0.25s;
display: block; display: block;
font-size: 0.80rem;
height: 1.5rem;
line-height: 1.5rem;
margin-bottom: 3px;
position: relative; } position: relative; }
/* line 17, ../sass/tree/_tree.scss */ /* line 6, ../sass/tree/_tree.scss */
ul.tree li .tree-item.loading { ul.tree li span.tree-item {
color: #666666; -webkit-border-radius: 3px;
font-style: italic; } -moz-border-radius: 3px;
/* line 20, ../sass/tree/_tree.scss */ -ms-border-radius: 3px;
ul.tree li .tree-item.loading .wait-spinner { -o-border-radius: 3px;
margin-left: 14px; } border-radius: 3px;
/* line 24, ../sass/tree/_tree.scss */ -webkit-transition: background-color 0.25s;
ul.tree li .tree-item:not(.loading) { -moz-transition: background-color 0.25s;
cursor: pointer; } -o-transition: background-color 0.25s;
/* line 26, ../sass/tree/_tree.scss */ transition: background-color 0.25s;
ul.tree li .tree-item:not(.loading):hover { display: block;
font-size: 0.80rem;
height: 1.5rem;
line-height: 1.5rem;
margin-bottom: 3px;
position: relative; }
/* line 17, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .view-control {
display: inline-block;
margin-left: 5px;
width: 10px; }
/* line 23, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .view-control:hover {
color: #ffc700; }
/* line 28, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .label {
display: block;
overflow: hidden;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width: auto;
height: auto;
left: 20px; }
/* line 34, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .label .type-icon {
overflow: hidden;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width: auto;
height: auto;
text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px;
color: #0099cc; }
/* line 38, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .label .type-icon .alert {
text-shadow: rgba(0, 0, 0, 0.3) 0 1px 2px;
background: #333333;
color: #ff3c00;
font-size: 0.7em;
margin-top: -3px;
top: 0;
right: auto;
bottom: auto;
left: 9px;
height: auto;
width: auto;
position: absolute;
z-index: 2; }
/* line 54, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .label .title-label {
overflow: hidden;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width: auto;
height: auto;
display: block;
left: 25px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
/* line 66, ../sass/tree/_tree.scss */
ul.tree li span.tree-item.loading {
pointer-events: none; }
/* line 68, ../sass/tree/_tree.scss */
ul.tree li span.tree-item.loading .label {
opacity: 0.5; }
/* line 70, ../sass/tree/_tree.scss */
ul.tree li span.tree-item.loading .label .title-label {
font-style: italic; }
/* line 74, ../sass/tree/_tree.scss */
ul.tree li span.tree-item.loading .wait-spinner {
margin-left: 14px; }
/* line 79, ../sass/tree/_tree.scss */
ul.tree li span.tree-item.selected {
background: #005177;
color: white; }
/* line 83, ../sass/tree/_tree.scss */
ul.tree li span.tree-item.selected .view-control {
color: #0099cc; }
/* line 86, ../sass/tree/_tree.scss */
ul.tree li span.tree-item.selected .label .type-icon {
color: #fff; }
/* line 92, ../sass/tree/_tree.scss */
ul.tree li span.tree-item:not(.selected):hover {
background: #404040; background: #404040;
color: #cccccc; } color: #cccccc; }
/* line 29, ../sass/tree/_tree.scss */ /* line 95, ../sass/tree/_tree.scss */
ul.tree li .tree-item:not(.loading):hover .context-trigger { ul.tree li span.tree-item:not(.selected):hover .context-trigger {
display: block; } display: block; }
/* line 32, ../sass/tree/_tree.scss */ /* line 98, ../sass/tree/_tree.scss */
ul.tree li .tree-item:not(.loading):hover .icon { ul.tree li span.tree-item:not(.selected):hover .icon {
color: #33ccff; } color: #33ccff; }
/* line 37, ../sass/tree/_tree.scss */ /* line 104, ../sass/tree/_tree.scss */
ul.tree li .tree-item .selected { ul.tree li span.tree-item:not(.loading) {
color: #fff; } cursor: pointer; }
/* line 40, ../sass/tree/_tree.scss */ /* line 109, ../sass/tree/_tree.scss */
ul.tree li .tree-item .view-control { ul.tree li span.tree-item .context-trigger {
display: inline-block; display: none;
width: 10px; } top: -1px;
/* line 46, ../sass/tree/_tree.scss */
ul.tree li .tree-item .view-control:hover {
color: #ffc700; }
/* line 50, ../sass/tree/_tree.scss */
ul.tree li .tree-item .context-trigger {
display: none;
top: -1px;
position: absolute;
right: 3px; }
/* line 56, ../sass/tree/_tree.scss */
ul.tree li .tree-item .context-trigger .btn-invoke-menu {
font-size: 0.75em;
height: 0.9rem;
line-height: 0.9rem; }
/* line 62, ../sass/tree/_tree.scss */
ul.tree li .tree-item .icon {
text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px;
color: #0099cc;
left: 15px; }
/* line 67, ../sass/tree/_tree.scss */
ul.tree li .tree-item .icon .alert {
text-shadow: rgba(0, 0, 0, 0.3) 0 1px 2px;
background: #333333;
color: #ff3c00;
font-size: 0.7em;
margin-top: -3px;
top: 0;
right: auto;
bottom: auto;
left: 9px;
height: auto;
width: auto;
position: absolute; position: absolute;
z-index: 2; } right: 3px; }
/* line 83, ../sass/tree/_tree.scss */ /* line 115, ../sass/tree/_tree.scss */
ul.tree li .tree-item .title-label { ul.tree li span.tree-item .context-trigger .btn-invoke-menu {
display: block; font-size: 0.75em;
position: absolute; height: 0.9rem;
top: 0; line-height: 0.9rem; }
left: 37px; /* line 124, ../sass/tree/_tree.scss */
right: 0;
overflow: hidden;
text-overflow: ellipsis;
height: 1.5rem;
bottom: auto;
white-space: nowrap; }
/* line 99, ../sass/tree/_tree.scss */
ul.tree ul.tree { ul.tree ul.tree {
margin-left: 15px; } margin-left: 15px; }

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

@ -58,7 +58,7 @@ $colorItemSelected: $colorKey;
// Tree // Tree
$treeVCW: 10px; $treeVCW: 10px;
$treeTypeIconW: 17px; $treeTypeIconW: 20px;
$treeContextTriggerW: 20px; $treeContextTriggerW: 20px;
$colorItemTreeIcon: $colorKey; $colorItemTreeIcon: $colorKey;
$colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%); $colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);

29
platform/commonUI/general/res/sass/_fixed-position.scss
View File

@ -14,13 +14,13 @@
height: 100%; width: 100%; height: 100%; width: 100%;
pointer-events: none; pointer-events: none;
z-index: 0; z-index: 0;
&.l-grid-x { // &.l-grid-x {
@include bgTicks($colorGridLines, 'x'); // @include bgTicks($colorGridLines, 'x');
} // }
//
&.l-grid-y { // &.l-grid-y {
@include bgTicks($colorGridLines, 'y'); // @include bgTicks($colorGridLines, 'y');
} // }
} }
} }
} }
@ -99,6 +99,21 @@
} }
.edit-mode .t-fixed-position { .edit-mode .t-fixed-position {
&.l-fixed-position {
.l-grid-holder {
.l-grid {
&.l-grid-x {
@include bgTicks($colorGridLines, 'x');
}
&.l-grid-y {
@include bgTicks($colorGridLines, 'y');
}
}
}
}
.l-fixed-position-item { .l-fixed-position-item {
&:not(.s-selected):hover { &:not(.s-selected):hover {
border: 1px dotted rgba($colorKey, 0.5); border: 1px dotted rgba($colorKey, 0.5);

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

@ -144,7 +144,7 @@
.btn-set, .btn-set,
.t-btn { .t-btn {
display: inline-block; display: inline-block;
margin-left: $interiorMargin; // margin-left: $interiorMargin;
} }
.btn, .btn,
.t-btn { .t-btn {
@ -163,11 +163,12 @@
} }
} }
.control-group { .l-control-group {
// Buttons that have a conceptual grouping - internal space between, and a divider between groups. // Buttons that have a conceptual grouping - internal space between, and a divider between groups.
// @include test(); // @include test();
@include box-sizing(border-box); @include box-sizing(border-box);
border-left: 1px solid $colorInteriorBorder; border-left: 1px solid $colorInteriorBorder;
display: inline-block;
padding: 0 $interiorMargin; padding: 0 $interiorMargin;
position: relative; position: relative;
&:first-child { &:first-child {
@ -295,7 +296,7 @@ label.checkbox.custom {
.btn-menu { .btn-menu {
$h: 20px; $h: 20px;
$p: $interiorMargin; $p: $interiorMargin * 2;
$c: $colorBodyFg; $c: $colorBodyFg;
@include btnSubtle($colorBodyBg); @include btnSubtle($colorBodyBg);
height: $h; height: $h;

9
platform/commonUI/general/res/sass/controls/_lists.scss
View File

@ -6,4 +6,13 @@
li { li {
margin-bottom: $interiorMargin; margin-bottom: $interiorMargin;
} }
}
.l-tree-item-flat-list {
// For lists of tree-items that are flat. Remove margin, etc. normally needed for the expansion arrow.
.tree-item {
.label {
left: $interiorMargin !important;
}
}
} }

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

@ -1,102 +1,127 @@
ul.tree { ul.tree {
@include menuUlReset(); @include menuUlReset();
li { li {
.tree-item { display: block;
// @include test(); position: relative;
@include border-radius($basicCr); span.tree-item {
@include single-transition(background-color, 0.25s); $runningItemW: 0;
display: block; @include border-radius($basicCr);
font-size: 0.80rem; @include single-transition(background-color, 0.25s);
height: $menuLineH; display: block;
line-height: $menuLineH; font-size: 0.80rem;
margin-bottom: $interiorMarginSm; height: $menuLineH;
// overflow: hidden; line-height: $menuLineH;
// padding: 2px 4px 2px 7px; margin-bottom: $interiorMarginSm;
position: relative; position: relative;
// white-space: nowrap;
&.loading { .view-control {
color: darken($colorBodyFg, 20%); display: inline-block;
font-style: italic; margin-left: $interiorMargin;
.wait-spinner { // vertical-align: middle;
margin-left: 14px; width: $treeVCW;
} $runningItemW: $interiorMargin + $treeVCW;
} &:hover {
&:not(.loading) { color: $colorItemTreeVCHover;
cursor: pointer; }
&:hover { }
background: lighten($colorBodyBg, 5%);
color: lighten($colorBodyFg, 20%); .label {
.context-trigger { display: block;
display: block; // border: 1px solid rgba(blue, 0.5);
} @include absPosDefault();
.icon { left: $runningItemW + $interiorMargin;
color: $colorItemTreeIconHover;
} .type-icon {
} @include absPosDefault();
} @include txtShdwSubtle(0.6);
.selected { color: $colorItemTreeIcon;
color: #fff; .alert {
} @include txtShdwSubtle(0.3);
.view-control { background: $colorBodyBg;
// @include test(); color: $colorAlert;
display: inline-block; font-size: 0.7em;
// margin-right: $interiorMargin; margin-top: -3px;
// vertical-align: middle; top: 0;
width: $treeVCW; right: auto;
&:hover { bottom: auto;
color: $colorItemTreeVCHover; left: 9px;
} height: auto;
} width: auto;
.context-trigger { position: absolute;
$h: 0.9rem; z-index: 2;
display: none; }
top: -1px; }
position: absolute; .title-label {
right: $interiorMarginSm; @include absPosDefault();
.btn-invoke-menu { display: block;
font-size: 0.75em; left: $runningItemW + ($interiorMargin * 2);
height: $h; // right: $treeContextTriggerW + $interiorMargin; //Disabling as context trigger not being used
line-height: $h; overflow: hidden;
} text-overflow: ellipsis;
} // height: $menuLineH;
.icon { white-space: nowrap;
// @include test(); }
@include txtShdwSubtle(0.6); }
color: $colorItemTreeIcon;
left: $treeVCW + $interiorMargin; &.loading {
.alert { pointer-events: none;
@include txtShdwSubtle(0.3); .label {
background: $colorBodyBg; opacity: 0.5;
color: $colorAlert; .title-label {
font-size: 0.7em; font-style: italic;
margin-top: -3px; }
top: 0; }
right: auto; .wait-spinner {
bottom: auto; margin-left: 14px;
left: 9px; }
height: auto; }
width: auto;
position: absolute; &.selected {
z-index: 2; $c: #fff;
} background: #005177;
} color: $c;
.title-label { .view-control {
// @include test(); color: $colorItemTreeIcon;
display: block; }
position: absolute; .label .type-icon {
top: 0; color: #fff; //$colorItemTreeIconHover;
left: $treeVCW + $treeTypeIconW + ($interiorMargin * 2); //38px; }
// right: $treeContextTriggerW + $interiorMargin; //Disabling as context trigger not being used }
right: 0;
overflow: hidden; &:not(.selected) {
text-overflow: ellipsis; &:hover {
height: $menuLineH; background: lighten($colorBodyBg, 5%);
bottom: auto; color: lighten($colorBodyFg, 20%);
white-space: nowrap; .context-trigger {
} display: block;
} }
} .icon {
ul.tree { color: $colorItemTreeIconHover;
margin-left: $treeVCW + $interiorMargin; }
} }
}
&:not(.loading) {
cursor: pointer;
// @include tree-item-hover();
}
.context-trigger {
$h: 0.9rem;
display: none;
top: -1px;
position: absolute;
right: $interiorMarginSm;
.btn-invoke-menu {
font-size: 0.75em;
height: $h;
line-height: $h;
}
}
}
}
ul.tree {
margin-left: $treeVCW + $interiorMargin;
}
} }

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

@ -33,7 +33,7 @@
.tool-bar { .tool-bar {
bottom: auto; bottom: auto;
height: $tbH; height: $tbH;
line-height: $tbH - 2; line-height: $ueEditToolBarButtonH;
} }
.work-area { .work-area {
top: $tbH + $interiorMargin * 2; top: $tbH + $interiorMargin * 2;

4
platform/commonUI/general/res/sass/user-environ/_tool-bar.scss
View File

@ -1,7 +1,7 @@
.tool-bar { .tool-bar {
border-bottom: 1px solid $colorInteriorBorder; border-bottom: 1px solid $colorInteriorBorder;
.control-group { .l-control-group {
height: $ueEditToolBarH; height: $ueEditToolBarButtonH;
} }
input[type="text"] { input[type="text"] {
@include box-sizing(border-box); @include box-sizing(border-box);

19
platform/commonUI/general/res/templates/controls/selector.html
View File

@ -13,7 +13,7 @@
Showing {{shown}} of {{count}} available options. Showing {{shown}} of {{count}} available options.
</div --> </div -->
<div class='line treeview checkbox-list' name='available'> <div class='line treeview' name='available'>
<mct-representation key="'tree'" <mct-representation key="'tree'"
mct-object="selector.root()" mct-object="selector.root()"
ng-model="selector.treeModel"> ng-model="selector.treeModel">
@ -46,15 +46,20 @@
Showing {{shown}} of {{count}} available options. Showing {{shown}} of {{count}} available options.
</div --> </div -->
<div class='line treeview checkbox-list' name='selected'> <div class='line treeview l-tree-item-flat-list' name='selected'>
<ul class="tree"> <ul class="tree">
<li ng-repeat="selectedObject in selector.selected()"> <li ng-repeat="selectedObject in selector.selected()">
<mct-representation key="'label'" <span
mct-object="selectedObject" class="tree-item"
ng-click="selector.listModel.selectedObject = selectedObject" ng-class="{selected: selector.listModel.selectedObject === selectedObject }"
ng-class="{ test: selector.listModel.selectedObject === selectedObject }"> >
<mct-representation
key="'label'"
mct-object="selectedObject"
ng-click="selector.listModel.selectedObject = selectedObject"
>
</mct-representation> </mct-representation>
</span>
</li> </li>
</ul> </ul>
</div> </div>

2
platform/commonUI/general/res/templates/label.html
View File

@ -1,4 +1,4 @@
<span class="label"> <span class="label s-label">
<span class='ui-symbol icon type-icon'> <span class='ui-symbol icon type-icon'>
{{type.getGlyph()}} {{type.getGlyph()}}
<span class='ui-symbol icon alert hidden'>!</span> <span class='ui-symbol icon alert hidden'>!</span>

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

@ -1,21 +1,29 @@
<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
<span class='ui-symbol view-control' class="tree-item menus-to-left"
ng-click="toggle.toggle(); treeNode.trackExpansion()" ng-class="{selected: treeNode.isSelected()}"
ng-if="model.composition !== undefined"> >
<span
class='ui-symbol view-control'
ng-click="toggle.toggle(); treeNode.trackExpansion()"
ng-if="model.composition !== undefined"
>
{{toggle.isActive() ? "v" : ">"}} {{toggle.isActive() ? "v" : ">"}}
</span> </span>
<mct-representation key="'label'" <mct-representation
mct-object="domainObject" key="'label'"
ng-model="ngModel" mct-object="domainObject"
ng-click="ngModel.selectedObject = domainObject" ng-model="ngModel"
ng-class="{selected: treeNode.isSelected()}"> ng-click="ngModel.selectedObject = domainObject"
>
</mct-representation> </mct-representation>
</span> </span>
<span class="tree-item-subtree" <span
ng-show="toggle.isActive()" class="tree-item-subtree"
ng-if="model.composition !== undefined"> ng-show="toggle.isActive()"
ng-if="model.composition !== undefined"
>
<mct-representation key="'subtree'" <mct-representation key="'subtree'"
ng-model="ngModel" ng-model="ngModel"

2
platform/features/layout/bundle.json
View File

@ -112,7 +112,7 @@
}, },
{ {
"property": "text", "property": "text",
"glyph": "p", "glyph": "G",
"control": "dialog-button", "control": "dialog-button",
"title": "Text Properties", "title": "Text Properties",
"dialog": { "dialog": {

2
platform/forms/res/templates/toolbar.html
View File

@ -1,7 +1,7 @@
<form novalidate> <form novalidate>
<div class="tool-bar btn-bar contents abs"> <div class="tool-bar btn-bar contents abs">
<span ng-repeat="section in structure.sections" <span ng-repeat="section in structure.sections"
class="control-group" class="l-control-group"
ng-if="!section.hidden" ng-if="!section.hidden"
title="{{section.description}}"> title="{{section.description}}">
<ng-form ng-repeat="item in section.items" <ng-form ng-repeat="item in section.items"