ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-05-08 11:38:35 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

[Frontend] Added local zoom/reset controls

Browse Source 
WTD-1222
Refactored scss in plots-main slightly;
Removed unused sass/plots.scss;
This commit is contained in:
Charles Hacskaylo 2015-06-08 15:24:17 -07:00
parent 5aad1b4e30
commit 1587e66d9e
5 changed files with 134 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1861,10 +1861,21 @@ a.l-btn span {
padding-left: 0; } padding-left: 0; }
/* line 202, ../sass/controls/_controls.scss */ /* line 202, ../sass/controls/_controls.scss */
.l-local-controls {
position: absolute;
top: 5px;
right: 5px;
z-index: 5; }
/* line 211, ../sass/controls/_controls.scss */
.s-local-controls {
font-size: 0.7rem; }
/* line 215, ../sass/controls/_controls.scss */
.btn-set { .btn-set {
display: inline-block; display: inline-block;
position: relative; } position: relative; }
/* line 206, ../sass/controls/_controls.scss */ /* line 219, ../sass/controls/_controls.scss */
.btn-set .btn, .btn-set .btn,
.btn-set .t-btn { .btn-set .t-btn {
-moz-border-radius: 0; -moz-border-radius: 0;
@ -1872,7 +1883,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 211, ../sass/controls/_controls.scss */ /* line 224, ../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;
@ -1882,7 +1893,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 215, ../sass/controls/_controls.scss */ /* line 228, ../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;
@ -1892,7 +1903,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 221, ../sass/controls/_controls.scss */ /* line 234, ../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,
@ -1903,7 +1914,7 @@ a.l-btn span {
font-size: 11.25px; font-size: 11.25px;
height: 25px; height: 25px;
line-height: 25px; } line-height: 25px; }
/* line 232, ../sass/controls/_controls.scss */ /* line 245, ../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),
@ -1913,7 +1924,7 @@ a.l-btn span {
font-size: 150%; font-size: 150%;
vertical-align: middle; } vertical-align: middle; }
/* line 240, ../sass/controls/_controls.scss */ /* line 253, ../sass/controls/_controls.scss */
label.checkbox.custom { label.checkbox.custom {
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
@ -1922,13 +1933,13 @@ label.checkbox.custom {
padding-left: 19px; padding-left: 19px;
position: relative; position: relative;
vertical-align: top; } vertical-align: top; }
/* line 251, ../sass/controls/_controls.scss */ /* line 264, ../sass/controls/_controls.scss */
label.checkbox.custom em { label.checkbox.custom em {
color: #999; color: #999;
display: inline-block; display: inline-block;
height: 14px; height: 14px;
min-width: 14px; } min-width: 14px; }
/* line 256, ../sass/controls/_controls.scss */ /* line 269, ../sass/controls/_controls.scss */
label.checkbox.custom em:before { label.checkbox.custom em:before {
-moz-border-radius: 2.25px; -moz-border-radius: 2.25px;
-webkit-border-radius: 2.25px; -webkit-border-radius: 2.25px;
@ -1947,51 +1958,51 @@ label.checkbox.custom {
top: 0; top: 0;
position: absolute; position: absolute;
text-align: center; } text-align: center; }
/* line 274, ../sass/controls/_controls.scss */ /* line 287, ../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 280, ../sass/controls/_controls.scss */ /* line 293, ../sass/controls/_controls.scss */
label.checkbox.custom.no-text em { label.checkbox.custom.no-text em {
overflow: hidden; } overflow: hidden; }
/* line 284, ../sass/controls/_controls.scss */ /* line 297, ../sass/controls/_controls.scss */
label.checkbox.custom input { label.checkbox.custom input {
display: none; } display: none; }
/* line 286, ../sass/controls/_controls.scss */ /* line 299, ../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 294, ../sass/controls/_controls.scss */ /* line 307, ../sass/controls/_controls.scss */
.input-labeled { .input-labeled {
margin-left: 5px; } margin-left: 5px; }
/* line 296, ../sass/controls/_controls.scss */ /* line 309, ../sass/controls/_controls.scss */
.input-labeled label { .input-labeled label {
display: inline-block; display: inline-block;
margin-right: 3px; } margin-right: 3px; }
/* line 300, ../sass/controls/_controls.scss */ /* line 313, ../sass/controls/_controls.scss */
.input-labeled.inline { .input-labeled.inline {
display: inline-block; } display: inline-block; }
/* line 303, ../sass/controls/_controls.scss */ /* line 316, ../sass/controls/_controls.scss */
.input-labeled:first-child { .input-labeled:first-child {
margin-left: 0; } margin-left: 0; }
/* line 308, ../sass/controls/_controls.scss */ /* line 321, ../sass/controls/_controls.scss */
.btn-menu label.checkbox.custom { .btn-menu label.checkbox.custom {
margin-left: 5px; } margin-left: 5px; }
/* line 313, ../sass/controls/_controls.scss */ /* line 326, ../sass/controls/_controls.scss */
.item .checkbox.checked label { .item .checkbox.checked label {
-moz-box-shadow: none; -moz-box-shadow: none;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
border-bottom: none; } border-bottom: none; }
/* line 319, ../sass/controls/_controls.scss */ /* line 332, ../sass/controls/_controls.scss */
.btn-menu { .btn-menu {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQwNDA0MCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQwNDA0MCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%; background-size: 100%;
@ -2022,42 +2033,42 @@ label.checkbox.custom {
background-image: -moz-linear-gradient(#666666, #4d4d4d); background-image: -moz-linear-gradient(#666666, #4d4d4d);
background-image: -webkit-linear-gradient(#666666, #4d4d4d); background-image: -webkit-linear-gradient(#666666, #4d4d4d);
background-image: linear-gradient(#666666, #4d4d4d); } background-image: linear-gradient(#666666, #4d4d4d); }
/* line 326, ../sass/controls/_controls.scss */ /* line 339, ../sass/controls/_controls.scss */
.btn-menu.dropdown { .btn-menu.dropdown {
padding-left: 10px; padding-left: 10px;
padding-right: 10px; } padding-right: 10px; }
/* line 332, ../sass/controls/_controls.scss */ /* line 345, ../sass/controls/_controls.scss */
.btn-menu:not(.disabled):hover { .btn-menu:not(.disabled):hover {
color: #cccccc; } color: #cccccc; }
/* line 336, ../sass/controls/_controls.scss */ /* line 349, ../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 340, ../sass/controls/_controls.scss */ /* line 353, ../sass/controls/_controls.scss */
.btn-menu.btn-invoke-menu:hover { .btn-menu.btn-invoke-menu:hover {
color: deepskyblue; } color: deepskyblue; }
/* line 350, ../sass/controls/_controls.scss */ /* line 363, ../sass/controls/_controls.scss */
.btn-menu .type-icon { .btn-menu .type-icon {
margin-right: 5px; } margin-right: 5px; }
/* line 353, ../sass/controls/_controls.scss */ /* line 366, ../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 358, ../sass/controls/_controls.scss */ /* line 371, ../sass/controls/_controls.scss */
.btn-menu .menu .ui-symbol.icon { .btn-menu .menu .ui-symbol.icon {
width: 12px; } width: 12px; }
/* line 364, ../sass/controls/_controls.scss */ /* line 377, ../sass/controls/_controls.scss */
.top-bar .btn-menu { .top-bar .btn-menu {
height: 25px; height: 25px;
line-height: 25px; line-height: 25px;
padding-right: 10px; } padding-right: 10px; }
/* line 372, ../sass/controls/_controls.scss */ /* line 385, ../sass/controls/_controls.scss */
.top-bar .btn-menu.browse-btn { .top-bar .btn-menu.browse-btn {
margin-right: 5px; margin-right: 5px;
padding-left: 25px; } padding-left: 25px; }
/* line 375, ../sass/controls/_controls.scss */ /* line 388, ../sass/controls/_controls.scss */
.top-bar .btn-menu.browse-btn .badge { .top-bar .btn-menu.browse-btn .badge {
-moz-border-radius: 4.5px; -moz-border-radius: 4.5px;
-webkit-border-radius: 4.5px; -webkit-border-radius: 4.5px;
@ -2074,30 +2085,30 @@ label.checkbox.custom {
height: auto; } height: auto; }
/******************************************************** OBJECT-HEADER */ /******************************************************** OBJECT-HEADER */
/* line 392, ../sass/controls/_controls.scss */ /* line 405, ../sass/controls/_controls.scss */
.object-header { .object-header {
display: inline-block; display: inline-block;
font-size: 1em; } font-size: 1em; }
/* line 395, ../sass/controls/_controls.scss */ /* line 408, ../sass/controls/_controls.scss */
.object-header .title { .object-header .title {
color: white; } color: white; }
/* line 398, ../sass/controls/_controls.scss */ /* line 411, ../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 407, ../sass/controls/_controls.scss */ /* line 420, ../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 409, ../sass/controls/_controls.scss */ /* line 422, ../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 417, ../sass/controls/_controls.scss */ /* line 430, ../sass/controls/_controls.scss */
.view-controls .view-type { .view-controls .view-type {
-moz-border-radius: 3px; -moz-border-radius: 3px;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
@ -2109,16 +2120,16 @@ label.checkbox.custom {
line-height: 20px; line-height: 20px;
padding-left: 5px; padding-left: 5px;
padding-right: 5px; } padding-right: 5px; }
/* line 428, ../sass/controls/_controls.scss */ /* line 441, ../sass/controls/_controls.scss */
.view-controls .view-type.cur { .view-controls .view-type.cur {
background: #666666; } background: #666666; }
/* line 433, ../sass/controls/_controls.scss */ /* line 446, ../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 444, ../sass/controls/_controls.scss */ /* line 457, ../sass/controls/_controls.scss */
.slider .slot { .slider .slot {
-moz-border-radius: 2px; -moz-border-radius: 2px;
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
@ -2139,7 +2150,7 @@ label.checkbox.custom {
right: 0; right: 0;
bottom: auto; bottom: auto;
left: 0; } left: 0; }
/* line 455, ../sass/controls/_controls.scss */ /* line 468, ../sass/controls/_controls.scss */
.slider .knob { .slider .knob {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQwNDA0MCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQwNDA0MCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%; background-size: 100%;
@ -2190,12 +2201,12 @@ label.checkbox.custom {
/* line 166, ../sass/_mixins.scss */ /* line 166, ../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 466, ../sass/controls/_controls.scss */ /* line 479, ../sass/controls/_controls.scss */
.slider .knob:before { .slider .knob:before {
top: 1px; top: 1px;
bottom: 3px; bottom: 3px;
left: 5px; } left: 5px; }
/* line 473, ../sass/controls/_controls.scss */ /* line 486, ../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;
@ -2206,12 +2217,12 @@ label.checkbox.custom {
left: auto; left: auto;
height: auto; height: auto;
width: auto; } width: auto; }
/* line 483, ../sass/controls/_controls.scss */ /* line 496, ../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 491, ../sass/controls/_controls.scss */ /* line 504, ../sass/controls/_controls.scss */
::-webkit-scrollbar { ::-webkit-scrollbar {
-moz-border-radius: 2px; -moz-border-radius: 2px;
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
@ -2228,7 +2239,7 @@ label.checkbox.custom {
height: 10px; height: 10px;
width: 10px; } width: 10px; }
/* line 497, ../sass/controls/_controls.scss */ /* line 510, ../sass/controls/_controls.scss */
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%; background-size: 100%;
@ -2246,7 +2257,7 @@ label.checkbox.custom {
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; -webkit-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 504, ../sass/controls/_controls.scss */ /* line 517, ../sass/controls/_controls.scss */
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzczNzM3MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzczNzM3MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%; background-size: 100%;
@ -2255,7 +2266,7 @@ label.checkbox.custom {
background-image: -webkit-linear-gradient(#808080, #737373 20px); background-image: -webkit-linear-gradient(#808080, #737373 20px);
background-image: linear-gradient(#808080, #737373 20px); } background-image: linear-gradient(#808080, #737373 20px); }
/* line 509, ../sass/controls/_controls.scss */ /* line 522, ../sass/controls/_controls.scss */
::-webkit-scrollbar-corner { ::-webkit-scrollbar-corner {
background: rgba(0, 0, 0, 0.4); } background: rgba(0, 0, 0, 0.4); }
@ -2566,49 +2577,53 @@ label.checkbox.custom {
background-repeat: no-repeat; } background-repeat: no-repeat; }
/* line 49, ../sass/features/_imagery.scss */ /* line 49, ../sass/features/_imagery.scss */
.l-image-main {
cursor: crosshair; }
/* line 53, ../sass/features/_imagery.scss */
.l-image-main-controlbar { .l-image-main-controlbar {
font-size: 0.8em; font-size: 0.8em;
line-height: 20px; } line-height: 20px; }
/* line 53, ../sass/features/_imagery.scss */ /* line 57, ../sass/features/_imagery.scss */
.l-image-main-controlbar .left, .l-image-main-controlbar .right { .l-image-main-controlbar .left, .l-image-main-controlbar .right {
direction: rtl; direction: rtl;
overflow: hidden; } overflow: hidden; }
/* line 57, ../sass/features/_imagery.scss */ /* line 61, ../sass/features/_imagery.scss */
.l-image-main-controlbar .left { .l-image-main-controlbar .left {
text-align: left; text-align: left;
width: 75% !important; } width: 75% !important; }
/* line 62, ../sass/features/_imagery.scss */ /* line 66, ../sass/features/_imagery.scss */
.l-image-main-controlbar .right { .l-image-main-controlbar .right {
min-width: 40px; min-width: 40px;
width: 25% !important; width: 25% !important;
z-index: 2; } z-index: 2; }
/* line 68, ../sass/features/_imagery.scss */ /* line 72, ../sass/features/_imagery.scss */
.l-image-main-controlbar .l-date, .l-image-main-controlbar .l-date,
.l-image-main-controlbar .l-time { .l-image-main-controlbar .l-time {
color: #fff; } color: #fff; }
/* line 72, ../sass/features/_imagery.scss */ /* line 76, ../sass/features/_imagery.scss */
.l-image-main-controlbar .l-mag { .l-image-main-controlbar .l-mag {
direction: ltr; direction: ltr;
display: inline-block; } display: inline-block; }
/* line 76, ../sass/features/_imagery.scss */ /* line 80, ../sass/features/_imagery.scss */
.l-image-main-controlbar .l-mag:before { .l-image-main-controlbar .l-mag:before {
content: "\000049"; } content: "\000049"; }
/* line 80, ../sass/features/_imagery.scss */ /* line 84, ../sass/features/_imagery.scss */
.l-image-main-controlbar .s-mag { .l-image-main-controlbar .s-mag {
color: #666666; } color: #666666; }
/* line 83, ../sass/features/_imagery.scss */ /* line 87, ../sass/features/_imagery.scss */
.l-image-main-controlbar .l-btn.show-thumbs { .l-image-main-controlbar .l-btn.show-thumbs {
display: none; } display: none; }
/* line 88, ../sass/features/_imagery.scss */ /* line 92, ../sass/features/_imagery.scss */
.s-image-main { .s-image-main {
border: 1px solid transparent; } border: 1px solid transparent; }
/* line 90, ../sass/features/_imagery.scss */ /* line 94, ../sass/features/_imagery.scss */
.s-image-main.paused { .s-image-main.paused {
border-color: #c56f01; } border-color: #c56f01; }
/*************************************** THUMBS */ /*************************************** THUMBS */
/* line 100, ../sass/features/_imagery.scss */ /* line 101, ../sass/features/_imagery.scss */
.l-image-thumbs-wrapper { .l-image-thumbs-wrapper {
direction: rtl; direction: rtl;
overflow-x: auto; overflow-x: auto;
@ -2617,7 +2632,7 @@ label.checkbox.custom {
white-space: nowrap; white-space: nowrap;
z-index: 70; } z-index: 70; }
/* line 110, ../sass/features/_imagery.scss */ /* line 111, ../sass/features/_imagery.scss */
.l-image-thumb-item { .l-image-thumb-item {
-moz-transition: background-color 0.25s; -moz-transition: background-color 0.25s;
-o-transition: background-color 0.25s; -o-transition: background-color 0.25s;
@ -2636,30 +2651,30 @@ label.checkbox.custom {
text-align: left; text-align: left;
width: 122px; width: 122px;
white-space: normal; } white-space: normal; }
/* line 115, ../sass/features/_imagery.scss */ /* line 116, ../sass/features/_imagery.scss */
.l-image-thumb-item .l-thumb, .l-image-thumb-item .l-thumb,
.l-image-thumb-item .l-date, .l-image-thumb-item .l-date,
.l-image-thumb-item .l-time { .l-image-thumb-item .l-time {
display: inline-block; } display: inline-block; }
/* line 120, ../sass/features/_imagery.scss */ /* line 121, ../sass/features/_imagery.scss */
.l-image-thumb-item .l-date, .l-image-thumb-item .l-date,
.l-image-thumb-item .l-time { .l-image-thumb-item .l-time {
padding: 2px 3px; } padding: 2px 3px; }
/* line 132, ../sass/features/_imagery.scss */ /* line 133, ../sass/features/_imagery.scss */
.l-image-thumb-item:hover { .l-image-thumb-item:hover {
background: rgba(255, 255, 255, 0.2); } background: rgba(255, 255, 255, 0.2); }
/* line 134, ../sass/features/_imagery.scss */ /* line 135, ../sass/features/_imagery.scss */
.l-image-thumb-item:hover .l-date, .l-image-thumb-item:hover .l-date,
.l-image-thumb-item:hover .l-time { .l-image-thumb-item:hover .l-time {
color: #fff; } color: #fff; }
/* line 139, ../sass/features/_imagery.scss */ /* line 140, ../sass/features/_imagery.scss */
.l-image-thumb-item.selected { .l-image-thumb-item.selected {
background: #005177; } background: #005177; }
/* line 141, ../sass/features/_imagery.scss */ /* line 142, ../sass/features/_imagery.scss */
.l-image-thumb-item.selected .l-date, .l-image-thumb-item.selected .l-date,
.l-image-thumb-item.selected .l-time { .l-image-thumb-item.selected .l-time {
color: #fff; } color: #fff; }
/* line 146, ../sass/features/_imagery.scss */ /* line 147, ../sass/features/_imagery.scss */
.l-image-thumb-item .l-thumb { .l-image-thumb-item .l-thumb {
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
height: 120px; height: 120px;
@ -2667,13 +2682,13 @@ label.checkbox.custom {
margin-top: 0; } margin-top: 0; }
/*************************************** WHEN IN FRAME */ /*************************************** WHEN IN FRAME */
/* line 156, ../sass/features/_imagery.scss */ /* line 157, ../sass/features/_imagery.scss */
.frame .t-imagery .l-image-main-wrapper { .frame .t-imagery .l-image-main-wrapper {
bottom: 0; } bottom: 0; }
/* line 158, ../sass/features/_imagery.scss */ /* line 159, ../sass/features/_imagery.scss */
.frame .t-imagery .l-image-main-wrapper .l-image-main-controlbar { .frame .t-imagery .l-image-main-wrapper .l-image-main-controlbar {
font-size: 0.7em; } font-size: 0.7em; }
/* line 167, ../sass/features/_imagery.scss */ /* line 168, ../sass/features/_imagery.scss */
.frame .t-imagery .l-image-thumbs-wrapper { .frame .t-imagery .l-image-thumbs-wrapper {
display: none; } display: none; }

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

@ -199,6 +199,19 @@
} }
} }
.l-local-controls {
// Control shown when hovering over an object, like plots and imagery
// Default position is upper right
$p: $interiorMargin;
position: absolute;
top: $p; right: $p;
z-index: 5;
}
.s-local-controls {
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;

7
platform/commonUI/general/res/sass/features/_imagery.scss
View File

@ -46,6 +46,10 @@
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.l-image-main {
cursor: crosshair;
}
.l-image-main-controlbar { .l-image-main-controlbar {
//@include test(); //@include test();
font-size: 0.8em; font-size: 0.8em;
@ -94,9 +98,6 @@
/*************************************** THUMBS */ /*************************************** THUMBS */
.l-image-thumb-item {
}
.l-image-thumbs-wrapper { .l-image-thumbs-wrapper {
//@include test(green); //@include test(green);
direction: rtl; direction: rtl;

4
platform/features/plot/res/templates/plot.html
View File

@ -87,10 +87,10 @@
</mct-chart> </mct-chart>
<!-- TODO: Move into correct position; make part of group; infer from set of actions --> <!-- TODO: Move into correct position; make part of group; infer from set of actions -->
<div class="gl-plot-local-controls" <div class="l-local-controls gl-plot-local-controls"
ng-if="$first" ng-if="$first"
ng-show="representation.showControls" ng-show="representation.showControls"
style="position: absolute; top: 8px; right: 8px;"> >
<a href="" <a href=""
class="t-btn l-btn s-btn s-icon-btn s-very-subtle" class="t-btn l-btn s-btn s-icon-btn s-very-subtle"

36
platform/features/static-markup/res/markup.html
View File

@ -34,13 +34,41 @@
{date:'2020/04/27',time:'16:00:57',url:'http://www.virtualmicroscope.org/sites/default/files/styles/large_carousel/public/800-15499_a15pan1463033.jpg?itok=NMQhLnuY',selected:false}, {date:'2020/04/27',time:'16:00:57',url:'http://www.virtualmicroscope.org/sites/default/files/styles/large_carousel/public/800-15499_a15pan1463033.jpg?itok=NMQhLnuY',selected:false},
{date:'2020/04/27',time:'16:00:27',url:'http://www.arcadiastreet.com/cgvistas/images/luna_southern_hemisphere_1280.jpg',selected:false} {date:'2020/04/27',time:'16:00:27',url:'http://www.arcadiastreet.com/cgvistas/images/luna_southern_hemisphere_1280.jpg',selected:false}
]; ];
clipped=true; clipped = true;
showThumbsBubble=false; showThumbsBubble = false;
showLocalControls = false;
"></div> "></div>
<div class="t-imagery"> <div class="t-imagery">
<!-- Main image --> <!-- Main image -->
<div class="l-image-main-wrapper"> <div
class="l-image-main-wrapper"
ng-mouseenter="showLocalControls = true;"
ng-mouseleave="showLocalControls = false;"
>
<div
class="l-local-controls s-local-controls"
ng-show="showLocalControls"
>
<a
class="t-btn l-btn s-btn s-icon-btn s-very-subtle"
ng-click="plot.stepBackPanZoom()"
ng-show="1"
title="Restore previous pan/zoom">
<span class="ui-symbol icon">&lt;</span>
</a>
<a
class="t-btn l-btn s-btn s-icon-btn s-very-subtle"
ng-click="plot.unzoom()"
ng-show="1"
title="Reset pan/zoom">
<span class="ui-symbol icon">I</span>
</a>
</div>
<div <div
class="l-image-main s-image-main" class="l-image-main s-image-main"
ng-class="{ paused:paused, stale:false }" ng-class="{ paused:paused, stale:false }"
@ -66,7 +94,7 @@ showThumbsBubble=false;
class="l-btn s-btn s-icon-btn l-mag s-mag ui-symbol vsm" class="l-btn s-btn s-icon-btn l-mag s-mag ui-symbol vsm"
ng-click="clipped = false" ng-click="clipped = false"
ng-show="clipped === true" ng-show="clipped === true"
title="117%: Click to reset" title="Not all of image is visible; click to reset."
></a> ></a>
</div> </div>
</div> </div>