mirror of
https://github.com/nasa/openmct.git
synced 2025-06-25 02:29:24 +00:00
Compare commits
6 Commits
debugging-
...
view-large
| Author | SHA1 | Date | |
|---|---|---|---|
| e3f1938bc7 | |||
| b4cc0482f9 | |||
| 688191e3b2 | |||
| adfbfc47de | |||
| 999f0fc3e1 | |||
| a11496078b |
@ -20,7 +20,7 @@
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<div ng-controller="BrowseObjectController" class="abs l-flex-col">
|
||||
<div class="holder flex-elem l-flex-row object-browse-bar ">
|
||||
<div class="holder flex-elem l-flex-row object-browse-bar">
|
||||
<div class="items-select left flex-elem l-flex-row grows">
|
||||
<mct-representation key="'back-arrow'"
|
||||
mct-object="domainObject"
|
||||
@ -31,16 +31,18 @@
|
||||
</mct-representation>
|
||||
</div>
|
||||
<div class="btn-bar right l-flex-row flex-elem flex-justify-end flex-fixed">
|
||||
<mct-representation key="'switcher'"
|
||||
mct-object="domainObject"
|
||||
ng-model="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>
|
||||
<span class="l-object-action-buttons">
|
||||
<mct-representation key="'switcher'"
|
||||
mct-object="domainObject"
|
||||
ng-model="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 l-object-action-buttons">
|
||||
</mct-representation>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="holder l-flex-col flex-elem grows l-object-wrapper l-controls-visible l-time-controller-visible">
|
||||
|
||||
@ -28,4 +28,8 @@
|
||||
key="'menu-arrow'"
|
||||
mct-object='domainObject'
|
||||
class="flex-elem context-available-w"></mct-representation>
|
||||
</span>
|
||||
</span>
|
||||
<a class="s-button icon-expand t-btn-view-large"
|
||||
title="View large"
|
||||
mct-trigger-modal>
|
||||
</a>
|
||||
@ -19,7 +19,7 @@
|
||||
this source code distribution or the Licensing information page available
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<div class="abs overlay" ng-class="{'delayEntry100ms' : ngModel.delay}">
|
||||
<div class="abs overlay l-dialog" ng-class="{'delayEntry100ms' : ngModel.delay}">
|
||||
<div class="abs blocker"></div>
|
||||
<div class="abs holder">
|
||||
<a ng-click="ngModel.cancel()"
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
{
|
||||
"metadata": {
|
||||
"name": "openmct-symbols-16px",
|
||||
"lastOpened": 1481575258437,
|
||||
"created": 1481575255265
|
||||
"lastOpened": 1487197651675,
|
||||
"created": 1487194069058
|
||||
},
|
||||
"iconSets": [
|
||||
{
|
||||
@ -540,13 +540,21 @@
|
||||
"code": 921654,
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 120,
|
||||
"id": 105,
|
||||
"name": "icon-reset",
|
||||
"prevSize": 24,
|
||||
"code": 921655,
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 121,
|
||||
"id": 103,
|
||||
"name": "icon-x-in-circle",
|
||||
"prevSize": 24,
|
||||
"code": 921656,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 118,
|
||||
@ -554,7 +562,7 @@
|
||||
"name": "icon-brightness",
|
||||
"prevSize": 24,
|
||||
"code": 921657,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 119,
|
||||
@ -562,15 +570,15 @@
|
||||
"name": "icon-contrast",
|
||||
"prevSize": 24,
|
||||
"code": 921664,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 120,
|
||||
"id": 105,
|
||||
"name": "icon-reset",
|
||||
"order": 122,
|
||||
"id": 106,
|
||||
"name": "icon-expand",
|
||||
"prevSize": 24,
|
||||
"code": 921655,
|
||||
"tempChar": ""
|
||||
"code": 921665,
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 37,
|
||||
@ -578,7 +586,7 @@
|
||||
"name": "icon-activity",
|
||||
"id": 32,
|
||||
"code": 921856,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 36,
|
||||
@ -586,7 +594,7 @@
|
||||
"name": "icon-activity-mode",
|
||||
"id": 31,
|
||||
"code": 921857,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 52,
|
||||
@ -594,7 +602,7 @@
|
||||
"name": "icon-autoflow-tabular",
|
||||
"id": 47,
|
||||
"code": 921858,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 55,
|
||||
@ -602,7 +610,7 @@
|
||||
"name": "icon-clock",
|
||||
"id": 50,
|
||||
"code": 921859,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 58,
|
||||
@ -610,7 +618,7 @@
|
||||
"name": "icon-database",
|
||||
"id": 53,
|
||||
"code": 921860,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 57,
|
||||
@ -618,7 +626,7 @@
|
||||
"name": "icon-database-query",
|
||||
"id": 52,
|
||||
"code": 921861,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 17,
|
||||
@ -626,7 +634,7 @@
|
||||
"name": "icon-dataset",
|
||||
"id": 12,
|
||||
"code": 921862,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 22,
|
||||
@ -634,7 +642,7 @@
|
||||
"name": "icon-datatable",
|
||||
"id": 17,
|
||||
"code": 921863,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 59,
|
||||
@ -642,7 +650,7 @@
|
||||
"name": "icon-dictionary",
|
||||
"id": 54,
|
||||
"code": 921864,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 62,
|
||||
@ -650,7 +658,7 @@
|
||||
"name": "icon-folder",
|
||||
"id": 57,
|
||||
"code": 921865,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 66,
|
||||
@ -658,7 +666,7 @@
|
||||
"name": "icon-image",
|
||||
"id": 61,
|
||||
"code": 921872,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 68,
|
||||
@ -666,7 +674,7 @@
|
||||
"name": "icon-layout",
|
||||
"id": 63,
|
||||
"code": 921873,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 77,
|
||||
@ -674,7 +682,7 @@
|
||||
"name": "icon-object",
|
||||
"id": 72,
|
||||
"code": 921874,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 78,
|
||||
@ -682,7 +690,7 @@
|
||||
"name": "icon-object-unknown",
|
||||
"id": 73,
|
||||
"code": 921875,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 79,
|
||||
@ -690,7 +698,7 @@
|
||||
"name": "icon-packet",
|
||||
"id": 74,
|
||||
"code": 921876,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 80,
|
||||
@ -698,7 +706,7 @@
|
||||
"name": "icon-page",
|
||||
"id": 75,
|
||||
"code": 921877,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 114,
|
||||
@ -706,7 +714,7 @@
|
||||
"name": "icon-plot-overlay",
|
||||
"prevSize": 24,
|
||||
"code": 921878,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 113,
|
||||
@ -714,7 +722,7 @@
|
||||
"name": "icon-plot-stacked",
|
||||
"prevSize": 24,
|
||||
"code": 921879,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 10,
|
||||
@ -722,7 +730,7 @@
|
||||
"name": "icon-session",
|
||||
"id": 5,
|
||||
"code": 921880,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 24,
|
||||
@ -730,7 +738,7 @@
|
||||
"name": "icon-tabular",
|
||||
"id": 19,
|
||||
"code": 921881,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 7,
|
||||
@ -738,7 +746,7 @@
|
||||
"name": "icon-tabular-lad",
|
||||
"id": 2,
|
||||
"code": 921888,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 6,
|
||||
@ -746,7 +754,7 @@
|
||||
"name": "icon-tabular-lad-set",
|
||||
"id": 1,
|
||||
"code": 921889,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 8,
|
||||
@ -754,7 +762,7 @@
|
||||
"name": "icon-tabular-realtime",
|
||||
"id": 3,
|
||||
"code": 921890,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 23,
|
||||
@ -762,7 +770,7 @@
|
||||
"name": "icon-tabular-scrolling",
|
||||
"id": 18,
|
||||
"code": 921891,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 112,
|
||||
@ -770,7 +778,7 @@
|
||||
"name": "icon-telemetry",
|
||||
"id": 86,
|
||||
"code": 921892,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 90,
|
||||
@ -778,7 +786,7 @@
|
||||
"name": "icon-telemetry-panel",
|
||||
"id": 85,
|
||||
"code": 921893,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 93,
|
||||
@ -786,7 +794,7 @@
|
||||
"name": "icon-timeline",
|
||||
"id": 88,
|
||||
"code": 921894,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 116,
|
||||
@ -794,7 +802,7 @@
|
||||
"name": "icon-timer-v1.5",
|
||||
"prevSize": 24,
|
||||
"code": 921895,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 11,
|
||||
@ -802,7 +810,7 @@
|
||||
"name": "icon-topic",
|
||||
"id": 6,
|
||||
"code": 921896,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 115,
|
||||
@ -810,7 +818,7 @@
|
||||
"name": "icon-box-with-dashed-lines",
|
||||
"id": 29,
|
||||
"code": 921897,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
}
|
||||
],
|
||||
"metadata": {
|
||||
@ -2183,6 +2191,30 @@
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 104,
|
||||
"paths": [
|
||||
"M460.8 460.8l-187.8-187.8c57.2-42.8 128-68.2 204.8-68.2 188.2 0 341.6 153.2 341.6 341.4s-153.2 341.2-341.4 341.2c-165 0-302.8-117.6-334.6-273h-138.4c14.2 101.8 61 195.6 135 269.6 90.2 90.2 210.4 140 338 140s247.6-49.8 338-140 140-210.4 140-338-49.8-247.6-140-338-210.4-140-338-140c-111.4 0-217 38-302 107.6l-176-175.6v460.8h460.8z"
|
||||
],
|
||||
"attrs": [
|
||||
{
|
||||
"fill": "rgb(0, 161, 75)"
|
||||
}
|
||||
],
|
||||
"isMulticolor": false,
|
||||
"isMulticolor2": false,
|
||||
"grid": 16,
|
||||
"tags": [
|
||||
"icon-reset"
|
||||
],
|
||||
"colorPermutations": {
|
||||
"1161751207457516161751": [
|
||||
{
|
||||
"f": 1
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"paths": [
|
||||
"M512 0c-282.8 0-512 229.2-512 512s229.2 512 512 512 512-229.2 512-512-229.2-512-512-512zM832 704l-128 128-192-192-192 192-128-128 192-192-192-192 128-128 192 192 192-192 128 128-192 192 192 192z"
|
||||
@ -2303,26 +2335,31 @@
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 104,
|
||||
"id": 106,
|
||||
"paths": [
|
||||
"M460.8 460.8l-187.8-187.8c57.2-42.8 128-68.2 204.8-68.2 188.2 0 341.6 153.2 341.6 341.4s-153.2 341.2-341.4 341.2c-165 0-302.8-117.6-334.6-273h-138.4c14.2 101.8 61 195.6 135 269.6 90.2 90.2 210.4 140 338 140s247.6-49.8 338-140 140-210.4 140-338-49.8-247.6-140-338-210.4-140-338-140c-111.4 0-217 38-302 107.6l-176-175.6v460.8h460.8z"
|
||||
"M960 0c0 0 0 0 0 0h-320v128h165.4l-210.6 210.8c-25 25-25 65.6 0 90.6 12.4 12.4 28.8 18.8 45.2 18.8s32.8-6.2 45.2-18.8l210.8-210.8v165.4h128v-384h-64z",
|
||||
"M896 805.4l-210.8-210.6c-25-25-65.6-25-90.6 0s-25 65.6 0 90.6l210.8 210.6h-165.4v128h384v-384h-128v165.4z",
|
||||
"M218.6 128h165.4v-128h-320c0 0 0 0 0 0h-64v384h128v-165.4l210.8 210.8c12.4 12.4 28.8 18.8 45.2 18.8s32.8-6.2 45.2-18.8c25-25 25-65.6 0-90.6l-210.6-210.8z",
|
||||
"M338.8 594.8l-210.8 210.6v-165.4h-128v384h384v-128h-165.4l210.8-210.8c25-25 25-65.6 0-90.6-25.2-24.8-65.6-24.8-90.6 0.2z"
|
||||
],
|
||||
"attrs": [
|
||||
{
|
||||
"fill": "rgb(0, 161, 75)"
|
||||
}
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{}
|
||||
],
|
||||
"grid": 16,
|
||||
"tags": [
|
||||
"icon-expand"
|
||||
],
|
||||
"isMulticolor": false,
|
||||
"isMulticolor2": false,
|
||||
"grid": 16,
|
||||
"tags": [
|
||||
"icon-reset"
|
||||
],
|
||||
"colorPermutations": {
|
||||
"1161751207457516161751": [
|
||||
{
|
||||
"f": 1
|
||||
}
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
Binary file not shown.
@ -77,6 +77,7 @@
|
||||
<glyph unicode="󡀸" 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="󡀹" glyph-name="icon-brightness" d="M253.414 641.939l-155.172 116.384c-50.233-66.209-85.127-146.713-97.91-234.39l191.586-30.216c8.145 56.552 29.998 106.879 62.068 149.006zM191.98 402.283l-191.919-27.434c13.115-90.459 48.009-170.963 99.174-238.453l154.18 117.665c-31.476 41.347-53.309 91.675-61.231 146.504zM466.283 768.020l-27.434 191.919c-90.459-13.115-170.963-48.009-238.453-99.174l117.665-154.18c41.347 31.476 91.675 53.309 146.504 61.231zM822.323 861.758c-66.209 50.233-146.713 85.127-234.39 97.91l-30.216-191.586c56.552-8.145 106.879-29.998 149.006-62.068zM832.020 493.717l191.919 27.434c-13.115 90.459-48.009 170.963-99.174 238.453l-154.18-117.665c31.476-41.347 53.309-91.675 61.231-146.504zM201.677 34.242c66.209-50.233 146.713-85.127 234.39-97.91l30.216 191.586c-56.552 8.145-106.879 29.998-149.006 62.068zM770.586 254.061l155.131-116.343c50.233 66.209 85.127 146.713 97.91 234.39l-191.586 30.216c-8.125-56.564-29.966-106.906-62.028-149.049zM557.717 127.98l27.434-191.919c90.459 13.115 170.963 48.009 238.453 99.174l-117.665 154.18c-41.347-31.476-91.675-53.309-146.504-61.231zM770.586 448c0-142.813-115.773-258.586-258.586-258.586s-258.586 115.773-258.586 258.586c0 142.813 115.773 258.586 258.586 258.586s258.586-115.773 258.586-258.586z" />
|
||||
<glyph unicode="󡁀" glyph-name="icon-contrast" d="M512 960c-282.78 0-512-229.24-512-512s229.22-512 512-512 512 229.24 512 512-229.22 512-512 512zM783.52 176.48c-69.111-69.481-164.785-112.481-270.502-112.481-0.358 0-0.716 0-1.074 0.001l0.055 768c212.070-0.010 383.982-171.929 383.982-384 0-106.034-42.977-202.031-112.462-271.52z" />
|
||||
<glyph unicode="󡁁" glyph-name="icon-expand" d="M960 960c0 0 0 0 0 0h-320v-128h165.4l-210.6-210.8c-25-25-25-65.6 0-90.6 12.4-12.4 28.8-18.8 45.2-18.8s32.8 6.2 45.2 18.8l210.8 210.8v-165.4h128v384h-64zM896 154.6l-210.8 210.6c-25 25-65.6 25-90.6 0s-25-65.6 0-90.6l210.8-210.6h-165.4v-128h384v384h-128v-165.4zM218.6 832h165.4v128h-320c0 0 0 0 0 0h-64v-384h128v165.4l210.8-210.8c12.4-12.4 28.8-18.8 45.2-18.8s32.8 6.2 45.2 18.8c25 25 25 65.6 0 90.6l-210.6 210.8zM338.8 365.2l-210.8-210.6v165.4h-128v-384h384v128h-165.4l210.8 210.8c25 25 25 65.6 0 90.6-25.2 24.8-65.6 24.8-90.6-0.2z" />
|
||||
<glyph unicode="󡄀" glyph-name="icon-activity" d="M576 896h-256l320-320h-290.256c-44.264 76.516-126.99 128-221.744 128h-128v-512h128c94.754 0 177.48 51.484 221.744 128h290.256l-320-320h256l448 448-448 448z" />
|
||||
<glyph unicode="󡄁" glyph-name="icon-activity-mode" d="M512 960c-214.866 0-398.786-132.372-474.744-320h90.744c56.86 0 107.938-24.724 143.094-64h240.906l-192 192h256l320-320-320-320h-256l192 192h-240.906c-35.156-39.276-86.234-64-143.094-64h-90.744c75.958-187.628 259.878-320 474.744-320 282.77 0 512 229.23 512 512s-229.23 512-512 512z" />
|
||||
<glyph unicode="󡄂" glyph-name="icon-autoflow-tabular" d="M192 960c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h64v1024h-64zM384 960h256v-1024h-256v1024zM832 960h-64v-704h256v512c0 105.6-86.4 192-192 192z" />
|
||||
|
||||
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 40 KiB |
Binary file not shown.
Binary file not shown.
@ -66,7 +66,7 @@ body, html {
|
||||
color: $colorBodyFg;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 100%;
|
||||
font-weight: 200;
|
||||
font-weight: normal;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -73,10 +73,11 @@ $glyph-icon-thumbs-strip: '\e1033';
|
||||
$glyph-icon-two-parts-both: '\e1034';
|
||||
$glyph-icon-two-parts-one-only: '\e1035';
|
||||
$glyph-icon-resync: '\e1036';
|
||||
$glyph-icon-reset: '\e1037';
|
||||
$glyph-icon-x-in-circle: '\e1038';
|
||||
$glyph-icon-brightness: '\e1039';
|
||||
$glyph-icon-contrast: '\e1040';
|
||||
$glyph-icon-reset: '\e1037';
|
||||
$glyph-icon-expand: '\e1041';
|
||||
$glyph-icon-activity: '\e1100';
|
||||
$glyph-icon-activity-mode: '\e1101';
|
||||
$glyph-icon-autoflow-tabular: '\e1102';
|
||||
@ -175,11 +176,12 @@ $glyph-icon-box-with-dashed-lines: '\e1129';
|
||||
.icon-thumbs-strip { @include glyph($glyph-icon-thumbs-strip); }
|
||||
.icon-two-parts-both { @include glyph($glyph-icon-two-parts-both); }
|
||||
.icon-two-parts-one-only { @include glyph($glyph-icon-two-parts-one-only); }
|
||||
.icon-resync { @include glyph($glyph-icon-resync); }
|
||||
.icon-reset { @include glyph($glyph-icon-reset); }
|
||||
.icon-x-in-circle { @include glyph($glyph-icon-x-in-circle); }
|
||||
.icon-brightness { @include glyph($glyph-icon-brightness); }
|
||||
.icon-contrast { @include glyph($glyph-icon-contrast); }
|
||||
.icon-reset { @include glyph($glyph-icon-reset); }
|
||||
.icon-resync { @include glyph($glyph-icon-resync); }
|
||||
.icon-expand { @include glyph($glyph-icon-expand); }
|
||||
.icon-activity { @include glyph($glyph-icon-activity); }
|
||||
.icon-activity-mode { @include glyph($glyph-icon-activity-mode); }
|
||||
.icon-autoflow-tabular { @include glyph($glyph-icon-autoflow-tabular); }
|
||||
|
||||
@ -631,7 +631,8 @@ textarea {
|
||||
}
|
||||
}
|
||||
|
||||
.view-switcher {
|
||||
.view-switcher,
|
||||
.t-btn-view-large {
|
||||
@include trans-prop-nice-fade($controlFadeMs);
|
||||
}
|
||||
|
||||
|
||||
@ -249,7 +249,7 @@
|
||||
.context-menu-holder,
|
||||
.menu-holder {
|
||||
position: absolute;
|
||||
z-index: 70;
|
||||
z-index: 120;
|
||||
.context-menu-wrapper {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
@ -273,7 +273,7 @@
|
||||
|
||||
.btn-bar.right .menu,
|
||||
.menus-to-left .menu {
|
||||
z-index: 79;
|
||||
z-index: 79;
|
||||
left: auto;
|
||||
right: 0;
|
||||
width: auto;
|
||||
|
||||
@ -21,11 +21,16 @@
|
||||
*****************************************************************************/
|
||||
|
||||
.overlay {
|
||||
font-size: 90%;
|
||||
&.delayEntry100ms {
|
||||
@include keyframes(fadeInFromNone) {
|
||||
0% { display: none; opacity: 0; }
|
||||
100% { display: block; opacity: 1; }
|
||||
0% {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@include animation-delay($delayEntryMs);
|
||||
@include animation(fadeInFromNone $durEntryMs ease-in);
|
||||
@ -43,17 +48,13 @@
|
||||
left: auto;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
> .holder {
|
||||
@include containerSubtle($colorOvrBg, $colorOvrFg);
|
||||
border-radius: $basicCr * 3;
|
||||
color: $colorOvrFg;
|
||||
top: 50%;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: 50%;
|
||||
@include transform(translateX(-50%) translateY(-50%));
|
||||
height: 70%;
|
||||
width: 50%;
|
||||
min-height: 300px;
|
||||
min-width: 600px;
|
||||
z-index: 101;
|
||||
@ -65,72 +66,106 @@
|
||||
left: $m;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
@include ellipsize();
|
||||
font-size: 1.2em;
|
||||
line-height: 120%;
|
||||
margin-bottom: $interiorMargin;
|
||||
}
|
||||
}
|
||||
|
||||
.hint, .field-hints { color: $colorFieldHintOverlay !important; }
|
||||
|
||||
.abs.top-bar {
|
||||
height: $ovrTopBarH;
|
||||
}
|
||||
|
||||
.abs.editor,
|
||||
.abs.message-body {
|
||||
top: $ovrTopBarH + $interiorMarginLg;
|
||||
bottom: $ovrFooterH + $interiorMarginLg;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow: auto;
|
||||
.field.l-input-med {
|
||||
input[type='text'] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
text-align: right;
|
||||
.overlay {
|
||||
&.l-dialog {
|
||||
.s-button {
|
||||
$bg: $colorOvrBtnBg;
|
||||
&:not(.major) {
|
||||
@include btnSubtle($bg, pullForward($bg, 10%), $colorOvrBtnFg, $colorOvrBtnFg);
|
||||
}
|
||||
font-size: 95%;
|
||||
height: $ovrFooterH;
|
||||
line-height: $ovrFooterH;
|
||||
margin-left: $interiorMargin;
|
||||
padding: 0 $interiorMargin * 3;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
@include btnSubtle($bg: $colorOvrBtnBg, $bgHov: pullForward($colorOvrBtnBg, 10%), $fg: $colorOvrBtnFg, $fgHov: $colorOvrBtnFg, $ic: $colorOvrBtnFg, $icHov: $colorOvrBtnFg);
|
||||
}
|
||||
}
|
||||
|
||||
> .holder {
|
||||
@include containerSubtle($colorOvrBg, $colorOvrFg);
|
||||
border-radius: $basicCr * 2;
|
||||
//color: $colorOvrFg;
|
||||
height: 70%;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.title {
|
||||
@include ellipsize();
|
||||
font-size: 1.2em;
|
||||
line-height: 120%;
|
||||
margin-bottom: $interiorMargin;
|
||||
}
|
||||
|
||||
.hint, .field-hints {
|
||||
color: $colorFieldHintOverlay !important;
|
||||
}
|
||||
|
||||
.abs.top-bar {
|
||||
height: $ovrTopBarH;
|
||||
}
|
||||
|
||||
.abs.bottom-bar {
|
||||
top: auto;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: visible;
|
||||
height: $ovrFooterH;
|
||||
}
|
||||
|
||||
.abs.editor,
|
||||
.abs.message-body {
|
||||
top: $ovrTopBarH + $interiorMarginLg;
|
||||
bottom: $ovrFooterH + $interiorMarginLg;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow: auto;
|
||||
.field.l-input-med {
|
||||
input[type='text'] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
text-align: right;
|
||||
.s-button {
|
||||
font-size: 95%;
|
||||
height: $ovrFooterH;
|
||||
line-height: $ovrFooterH;
|
||||
margin-left: $interiorMargin;
|
||||
padding: 0 $interiorMargin * 3;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.l-progress-bar {
|
||||
$h: $progressBarHOverlay;
|
||||
display: block;
|
||||
height: $h;
|
||||
line-height: $h;
|
||||
margin: .5em 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.select {
|
||||
box-shadow: $shdwBtnsOverlay;
|
||||
}
|
||||
}
|
||||
|
||||
.abs.bottom-bar {
|
||||
top: auto;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: visible;
|
||||
height: $ovrFooterH;
|
||||
}
|
||||
&.l-large-view {
|
||||
> .holder {
|
||||
@include keyframes(overlayIn) {
|
||||
from { opacity: 0; width: 1%; height: 1%; }
|
||||
to { opacity: 1; width: 90%; height: 90%; }
|
||||
}
|
||||
@include animToParams(overlayIn, $dur: 1s, $delay: 0);
|
||||
background: $colorBodyBg;
|
||||
border-radius: $basicCr * 2;
|
||||
//height: 90%;
|
||||
//width: 90%;
|
||||
|
||||
.l-progress-bar {
|
||||
$h: $progressBarHOverlay;
|
||||
display: block;
|
||||
height: $h;
|
||||
line-height: $h;
|
||||
margin: .5em 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.select {
|
||||
box-shadow: $shdwBtnsOverlay;
|
||||
.t-btn-view-large {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -20,69 +20,77 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
.frame {
|
||||
$ohH: $btnFrameH;
|
||||
$bc: $colorInteriorBorder;
|
||||
&.child-frame.panel {
|
||||
background: $colorBodyBg;
|
||||
border: 1px solid $bc;
|
||||
$ohH: $btnFrameH;
|
||||
$bc: $colorInteriorBorder;
|
||||
&.child-frame.panel {
|
||||
background: $colorBodyBg;
|
||||
border: 1px solid $bc;
|
||||
z-index: 0; // Needed to prevent child-frame controls from showing through when another child-frame is above
|
||||
&:hover {
|
||||
border-color: lighten($bc, 10%);
|
||||
}
|
||||
}
|
||||
.object-top-bar {
|
||||
font-size: 0.75em;
|
||||
height: $ohH;
|
||||
line-height: $ohH;
|
||||
.left {
|
||||
padding-right: $interiorMarginLg;
|
||||
&:hover {
|
||||
border-color: lighten($bc, 10%);
|
||||
}
|
||||
}
|
||||
>.object-holder.abs {
|
||||
top: $ohH + $interiorMargin;
|
||||
}
|
||||
.contents {
|
||||
$myM: $interiorMargin;
|
||||
top: $myM;
|
||||
right: $myM;
|
||||
bottom: $myM;
|
||||
left: $myM;
|
||||
}
|
||||
&.frame-template {
|
||||
.s-button,
|
||||
.s-menu-button {
|
||||
height: $ohH;
|
||||
line-height: $ohH;
|
||||
padding: 0 $interiorMargin;
|
||||
> span,
|
||||
}
|
||||
.object-browse-bar {
|
||||
font-size: 0.75em;
|
||||
height: $ohH;
|
||||
line-height: $ohH;
|
||||
}
|
||||
|
||||
> .object-holder.abs {
|
||||
top: $ohH + $interiorMargin;
|
||||
}
|
||||
.contents {
|
||||
$myM: $interiorMargin;
|
||||
top: $myM;
|
||||
right: $myM;
|
||||
bottom: $myM;
|
||||
left: $myM;
|
||||
}
|
||||
&.frame-template {
|
||||
.s-button,
|
||||
.s-menu-button {
|
||||
height: $ohH;
|
||||
line-height: $ohH;
|
||||
padding: 0 $interiorMargin;
|
||||
> span,
|
||||
&:before {
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
}
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
}
|
||||
|
||||
.s-menu-button:after {
|
||||
font-size: 8px;
|
||||
}
|
||||
.s-menu-button:after {
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.view-switcher {
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
.view-switcher {
|
||||
// Hide the name when the view switcher is in a frame context
|
||||
.title-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.view-switcher {
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
.view-switcher {
|
||||
margin-left: $interiorMargin; // Kick other top bar elements away when I'm present.
|
||||
// Hide the name when the view switcher is in a frame context
|
||||
.title-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
body.desktop .frame.frame-template {
|
||||
// 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
|
||||
.view-switcher {
|
||||
opacity: 0;
|
||||
}
|
||||
&:hover .view-switcher {
|
||||
// Show the view switcher on frame hover
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
body.desktop .frame {
|
||||
// Hide local controls initially and show it them on hover when they're in an element that's in a frame context
|
||||
// Frame template is used because we need to target the lowest nested frame
|
||||
.view-switcher,
|
||||
.t-btn-view-large {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Target the first descendant so that we only show the elements in the outermost container.
|
||||
// Handles the case where we have layouts in layouts.
|
||||
&:hover > .object-browse-bar {
|
||||
.view-switcher,
|
||||
.t-btn-view-large {
|
||||
opacity: 1;
|
||||
pointer-events: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -136,14 +136,6 @@
|
||||
.mini-tab-icon.toggle-pane {
|
||||
z-index: 5;
|
||||
}
|
||||
&.items {
|
||||
.object-browse-bar {
|
||||
.left.abs,
|
||||
.right.abs {
|
||||
top: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.desktop .pane .mini-tab-icon.toggle-pane {
|
||||
@ -250,10 +242,9 @@ body.desktop .pane .mini-tab-icon.toggle-pane {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.object-browse-bar,
|
||||
.top-bar {
|
||||
.view-switcher {
|
||||
margin-right: $interiorMarginLg * 2;
|
||||
.object-browse-bar {
|
||||
.l-object-action-buttons {
|
||||
margin-left: $interiorMarginLg; // Kick the view switcher and other elements away
|
||||
}
|
||||
}
|
||||
|
||||
@ -265,7 +256,6 @@ body.desktop .pane .mini-tab-icon.toggle-pane {
|
||||
white-space: nowrap;
|
||||
|
||||
.left {
|
||||
padding-right: $interiorMarginLg;
|
||||
.l-back {
|
||||
margin-right: $interiorMarginLg;
|
||||
&.s-status-editing { display: none; }
|
||||
@ -348,7 +338,7 @@ body.desktop {
|
||||
.pane:not(.resizing) {
|
||||
@include trans-prop-nice-resize-w(250ms);
|
||||
}
|
||||
.pane.primary-pane .object-browse-bar {
|
||||
.pane.primary-pane > .object-browse-bar {
|
||||
min-width: 200px; // Needed for nice display when primary pane is constrained severely via splitters
|
||||
}
|
||||
}
|
||||
|
||||
@ -24,6 +24,7 @@ define([
|
||||
"./src/LayoutController",
|
||||
"./src/FixedController",
|
||||
"./src/LayoutCompositionPolicy",
|
||||
'./src/MCTTriggerModal',
|
||||
"text!./res/templates/layout.html",
|
||||
"text!./res/templates/fixed.html",
|
||||
"text!./res/templates/frame.html",
|
||||
@ -37,6 +38,7 @@ define([
|
||||
LayoutController,
|
||||
FixedController,
|
||||
LayoutCompositionPolicy,
|
||||
MCTTriggerModal,
|
||||
layoutTemplate,
|
||||
fixedTemplate,
|
||||
frameTemplate,
|
||||
@ -222,6 +224,15 @@ define([
|
||||
"template": frameTemplate
|
||||
}
|
||||
],
|
||||
"directives": [
|
||||
{
|
||||
"key": "mctTriggerModal",
|
||||
"implementation": MCTTriggerModal,
|
||||
"depends": [
|
||||
"$document"
|
||||
]
|
||||
}
|
||||
],
|
||||
"controllers": [
|
||||
{
|
||||
"key": "LayoutController",
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<div class="frame frame-template abs">
|
||||
<div class="abs object-top-bar l-flex-row">
|
||||
<div class="abs object-browse-bar l-flex-row">
|
||||
<div class="left flex-elem l-flex-row grows">
|
||||
<mct-representation
|
||||
key="'object-header'"
|
||||
|
||||
106
platform/features/layout/src/MCTTriggerModal.js
Normal file
106
platform/features/layout/src/MCTTriggerModal.js
Normal file
@ -0,0 +1,106 @@
|
||||
define([
|
||||
|
||||
], function () {
|
||||
|
||||
var OVERLAY_TEMPLATE = '' +
|
||||
'<div class="abs overlay l-large-view">' +
|
||||
' <div class="abs blocker"></div>' +
|
||||
' <div class="abs holder">' +
|
||||
' <a class="close icon-x"></a>' +
|
||||
' <div class="abs contents"></div>' +
|
||||
' </div>' +
|
||||
'</div>';
|
||||
|
||||
/**
|
||||
* MCT Trigger Modal is intended for use in only one location: inside the
|
||||
* object-header to allow views in a layout to be popped out in a modal.
|
||||
* Users can close the modal and go back to normal, and everything generally
|
||||
* just works fine.
|
||||
*
|
||||
* This code is sensitive to how our html is constructed-- particularly with
|
||||
* how it locates the the container of an element in a layout. However, it
|
||||
* should be able to handle slight relocations so long as it is always a
|
||||
* descendent of a `.frame` element.
|
||||
*/
|
||||
function MCTTriggerModal() {
|
||||
|
||||
function link($scope, $element) {
|
||||
var frame = $element.parent();
|
||||
|
||||
for (var i = 0; i < 10; i++) {
|
||||
if (frame.hasClass('frame')) {
|
||||
break;
|
||||
}
|
||||
frame = frame.parent();
|
||||
}
|
||||
if (!frame.hasClass('frame')) {
|
||||
$element.remove();
|
||||
return;
|
||||
}
|
||||
|
||||
frame = frame[0];
|
||||
var layoutContainer = frame.parentElement,
|
||||
isOpen = false,
|
||||
overlay,
|
||||
closeButton,
|
||||
blocker,
|
||||
overlayContainer;
|
||||
|
||||
function openOverlay() {
|
||||
// Remove frame classes from being applied in a non-frame context
|
||||
$(frame).removeClass('frame frame-template');
|
||||
overlayContainer = overlay.querySelector('.abs.contents');
|
||||
closeButton = overlay.querySelector('a.close');
|
||||
closeButton.addEventListener('click', toggleOverlay);
|
||||
blocker = overlay.querySelector('.abs.blocker');
|
||||
blocker.addEventListener('click', toggleOverlay);
|
||||
document.body.appendChild(overlay);
|
||||
layoutContainer.removeChild(frame);
|
||||
overlayContainer.appendChild(frame);
|
||||
}
|
||||
|
||||
function closeOverlay() {
|
||||
$(frame).addClass('frame frame-template');
|
||||
overlayContainer.removeChild(frame);
|
||||
layoutContainer.appendChild(frame);
|
||||
document.body.removeChild(overlay);
|
||||
closeButton.removeEventListener('click', toggleOverlay);
|
||||
closeButton = undefined;
|
||||
blocker.removeEventListener('click', toggleOverlay);
|
||||
blocker = undefined;
|
||||
overlayContainer = undefined;
|
||||
overlay = undefined;
|
||||
}
|
||||
|
||||
function initOpenOverlay() {
|
||||
overlay = document.createElement('span');
|
||||
overlay.innerHTML = OVERLAY_TEMPLATE;
|
||||
// Give expand anim time to run before populating
|
||||
setTimeout(openOverlay(), 5000);
|
||||
}
|
||||
|
||||
function toggleOverlay() {
|
||||
if (!isOpen) {
|
||||
initOpenOverlay();
|
||||
isOpen = true;
|
||||
} else {
|
||||
closeOverlay();
|
||||
isOpen = false;
|
||||
}
|
||||
}
|
||||
|
||||
$element.on('click', toggleOverlay);
|
||||
$scope.$on('$destroy', function () {
|
||||
$element.off('click');
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
restrict: 'A',
|
||||
link: link
|
||||
};
|
||||
}
|
||||
|
||||
return MCTTriggerModal;
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user