mirror of
https://github.com/nasa/openmct.git
synced 2025-04-08 03:44:24 +00:00
Implement new folder List view (#1610)
* refactored code for listView * minimum viable folder list functionality * moved listview directory inside of platform/features * [Folder ListView] First Code Review Fixes Changes made: Updated listview icon as the hamburger menu. Injecting listview template as textfile instead of using the template's url. Added callback to $scope to listen for $destroy to release resources for the mutation listener and the gesture recognizer. Refactored ListViewController formatting function to use map instead of foreach. Added listview plugin to the default registry. Updated table styling. * working progress commit. ListViewControllerSpec is implemented and all tests are passing. MCTGestureSpec is not fully implemented. Testing the gestureService release is in progress. * All tests in MCTGestureSpec and ListViewControllerSpec are passing. * ListViewControllerSpec and MCTGesture Tests all passing. * refactored variable names in ListviewController to make more sense. * [Frontend] Styling of Luis's list view WIP Fixes #1615 This will have conflicts with Luis's work, be careful! * [Folder ListView] Second Code Review Fixes Changes made: updated listview to utilize open-mct sorting style. added license comments to all files. modified mctgesture interface to use $scope.eval(). * [Frontend] Styling of Luis's list view WIP Fixes #1615 New list-view glyph added * [Frontend] Styling of Luis's list view WIP Fixes #1615 Changed name of "Items" view to "Grid"; * [Frontend] Styling of Luis's list view WIP Fixes #1615 Updated icomoon project file with new list-view glyph e1042; * [Folder ListView] Second Code Review Fixes Changes made: updated listview to utilize open-mct sorting style. added license comments to all files. modified mctgesture interface to use $scope.eval(). * [Frontend] Styling of Luis's list view WIP Fixes #1615 Refined cursor CSS; * [Frontend] Styling of Luis's list view WIP Fixes #1615 Added logic to refine how sorting occurs: now, clicking a table header that wasn't the orderByField always sorts by its default;
This commit is contained in:
Luis-Johannes Schubert
Pete Richards
parent
ecdcebce0c
commit
e2f0f61862
@ -240,7 +240,7 @@ define([
|
||||
"views": [
|
||||
{
|
||||
"key": "items",
|
||||
"name": "Items",
|
||||
"name": "Grid",
|
||||
"cssClass": "icon-thumbs-strip",
|
||||
"description": "Grid of available items",
|
||||
"template": itemsTemplate,
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
{
|
||||
"metadata": {
|
||||
"name": "openmct-symbols-16px",
|
||||
"lastOpened": 1487197651675,
|
||||
"created": 1487194069058
|
||||
"lastOpened": 0,
|
||||
"created": 1497475810461
|
||||
},
|
||||
"iconSets": [
|
||||
{
|
||||
@ -573,20 +573,28 @@
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 122,
|
||||
"order": 124,
|
||||
"id": 106,
|
||||
"name": "icon-expand",
|
||||
"prevSize": 24,
|
||||
"code": 921665,
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 123,
|
||||
"id": 107,
|
||||
"name": "icon-list-view",
|
||||
"prevSize": 24,
|
||||
"code": 921666,
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 37,
|
||||
"prevSize": 24,
|
||||
"name": "icon-activity",
|
||||
"id": 32,
|
||||
"code": 921856,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 36,
|
||||
@ -594,7 +602,7 @@
|
||||
"name": "icon-activity-mode",
|
||||
"id": 31,
|
||||
"code": 921857,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 52,
|
||||
@ -602,7 +610,7 @@
|
||||
"name": "icon-autoflow-tabular",
|
||||
"id": 47,
|
||||
"code": 921858,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 55,
|
||||
@ -610,7 +618,7 @@
|
||||
"name": "icon-clock",
|
||||
"id": 50,
|
||||
"code": 921859,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 58,
|
||||
@ -618,7 +626,7 @@
|
||||
"name": "icon-database",
|
||||
"id": 53,
|
||||
"code": 921860,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 57,
|
||||
@ -626,7 +634,7 @@
|
||||
"name": "icon-database-query",
|
||||
"id": 52,
|
||||
"code": 921861,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 17,
|
||||
@ -634,7 +642,7 @@
|
||||
"name": "icon-dataset",
|
||||
"id": 12,
|
||||
"code": 921862,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 22,
|
||||
@ -642,7 +650,7 @@
|
||||
"name": "icon-datatable",
|
||||
"id": 17,
|
||||
"code": 921863,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 59,
|
||||
@ -650,7 +658,7 @@
|
||||
"name": "icon-dictionary",
|
||||
"id": 54,
|
||||
"code": 921864,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 62,
|
||||
@ -658,7 +666,7 @@
|
||||
"name": "icon-folder",
|
||||
"id": 57,
|
||||
"code": 921865,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 66,
|
||||
@ -666,7 +674,7 @@
|
||||
"name": "icon-image",
|
||||
"id": 61,
|
||||
"code": 921872,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 68,
|
||||
@ -674,7 +682,7 @@
|
||||
"name": "icon-layout",
|
||||
"id": 63,
|
||||
"code": 921873,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 77,
|
||||
@ -682,7 +690,7 @@
|
||||
"name": "icon-object",
|
||||
"id": 72,
|
||||
"code": 921874,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 78,
|
||||
@ -690,7 +698,7 @@
|
||||
"name": "icon-object-unknown",
|
||||
"id": 73,
|
||||
"code": 921875,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 79,
|
||||
@ -698,7 +706,7 @@
|
||||
"name": "icon-packet",
|
||||
"id": 74,
|
||||
"code": 921876,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 80,
|
||||
@ -706,7 +714,7 @@
|
||||
"name": "icon-page",
|
||||
"id": 75,
|
||||
"code": 921877,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 114,
|
||||
@ -714,7 +722,7 @@
|
||||
"name": "icon-plot-overlay",
|
||||
"prevSize": 24,
|
||||
"code": 921878,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 113,
|
||||
@ -722,7 +730,7 @@
|
||||
"name": "icon-plot-stacked",
|
||||
"prevSize": 24,
|
||||
"code": 921879,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 10,
|
||||
@ -730,7 +738,7 @@
|
||||
"name": "icon-session",
|
||||
"id": 5,
|
||||
"code": 921880,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 24,
|
||||
@ -738,7 +746,7 @@
|
||||
"name": "icon-tabular",
|
||||
"id": 19,
|
||||
"code": 921881,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 7,
|
||||
@ -746,7 +754,7 @@
|
||||
"name": "icon-tabular-lad",
|
||||
"id": 2,
|
||||
"code": 921888,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 6,
|
||||
@ -754,7 +762,7 @@
|
||||
"name": "icon-tabular-lad-set",
|
||||
"id": 1,
|
||||
"code": 921889,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 8,
|
||||
@ -762,7 +770,7 @@
|
||||
"name": "icon-tabular-realtime",
|
||||
"id": 3,
|
||||
"code": 921890,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 23,
|
||||
@ -770,7 +778,7 @@
|
||||
"name": "icon-tabular-scrolling",
|
||||
"id": 18,
|
||||
"code": 921891,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 112,
|
||||
@ -778,7 +786,7 @@
|
||||
"name": "icon-telemetry",
|
||||
"id": 86,
|
||||
"code": 921892,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 90,
|
||||
@ -786,7 +794,7 @@
|
||||
"name": "icon-telemetry-panel",
|
||||
"id": 85,
|
||||
"code": 921893,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 93,
|
||||
@ -794,7 +802,7 @@
|
||||
"name": "icon-timeline",
|
||||
"id": 88,
|
||||
"code": 921894,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 116,
|
||||
@ -802,7 +810,7 @@
|
||||
"name": "icon-timer-v1.5",
|
||||
"prevSize": 24,
|
||||
"code": 921895,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 11,
|
||||
@ -810,7 +818,7 @@
|
||||
"name": "icon-topic",
|
||||
"id": 6,
|
||||
"code": 921896,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 115,
|
||||
@ -818,7 +826,7 @@
|
||||
"name": "icon-box-with-dashed-lines",
|
||||
"id": 29,
|
||||
"code": 921897,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
}
|
||||
],
|
||||
"metadata": {
|
||||
@ -2363,6 +2371,51 @@
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 107,
|
||||
"paths": [
|
||||
"M0 64h1024v128h-1024v-128z",
|
||||
"M0 320h1024v128h-1024v-128z",
|
||||
"M0 576h1024v128h-1024v-128z",
|
||||
"M0 832h1024v128h-1024v-128z"
|
||||
],
|
||||
"attrs": [
|
||||
{
|
||||
"fill": "rgb(0, 161, 75)"
|
||||
},
|
||||
{
|
||||
"fill": "rgb(0, 161, 75)"
|
||||
},
|
||||
{
|
||||
"fill": "rgb(0, 161, 75)"
|
||||
},
|
||||
{
|
||||
"fill": "rgb(0, 161, 75)"
|
||||
}
|
||||
],
|
||||
"isMulticolor": false,
|
||||
"isMulticolor2": false,
|
||||
"grid": 16,
|
||||
"tags": [
|
||||
"icon-list-view"
|
||||
],
|
||||
"colorPermutations": {
|
||||
"1161751207457516161751": [
|
||||
{
|
||||
"f": 1
|
||||
},
|
||||
{
|
||||
"f": 1
|
||||
},
|
||||
{
|
||||
"f": 1
|
||||
},
|
||||
{
|
||||
"f": 1
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"paths": [
|
||||
"M576 64h-256l320 320h-290.256c-44.264-76.516-126.99-128-221.744-128h-128v512h128c94.754 0 177.48-51.484 221.744-128h290.256l-320 320h256l448-448-448-448z"
|
||||
@ -3237,4 +3290,4 @@
|
||||
"showGrid": true
|
||||
},
|
||||
"uid": -1
|
||||
}
|
||||
}
|
||||
Binary file not shown.
@ -78,6 +78,7 @@
|
||||
<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-list-view" d="M0 896h1024v-128h-1024v128zM0 640h1024v-128h-1024v128zM0 384h1024v-128h-1024v128zM0 128h1024v-128h-1024v128z" />
|
||||
<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" />
|
||||
@ -108,4 +109,4 @@
|
||||
<glyph unicode="󡄧" glyph-name="icon-timer-v1.5" horiz-adv-x="896" d="M576 813.4v82.58c0 35.346-28.654 64-64 64h-128c-35.346 0-64-28.654-64-64v-82.58c-185.040-55.080-320-226.48-320-429.42 0-247.42 200.58-448 448-448s448 200.58 448 448c0 202.96-135 374.4-320 429.42zM468 363.98l-263.76-211c-57.105 59.935-92.24 141.251-92.24 230.772 0 0.080 0 0.16 0 0.24 0 185.268 150.72 335.988 336 335.988 6.72 0 13.38-0.22 20-0.62v-355.38z" />
|
||||
<glyph unicode="󡄨" glyph-name="icon-topic" d="M454.36 483.36l86.3 86.3c9.088 8.965 21.577 14.502 35.36 14.502s26.272-5.537 35.366-14.507l86.294-86.294c19.328-19.358 42.832-34.541 69.047-44.082l1.313 171.722-57.64 57.64c-34.407 34.33-81.9 55.558-134.35 55.558s-99.943-21.228-134.354-55.562l-86.296-86.297c-9.088-8.965-21.577-14.502-35.36-14.502s-26.272 5.537-35.366 14.507l-28.674 28.654v-172.14c19.045-7.022 41.040-11.084 63.984-11.084 52.463 0 99.966 21.239 134.379 55.587zM505.64 412.64l-86.3-86.3c-9.088-8.965-21.577-14.502-35.36-14.502s-26.272 5.537-35.366 14.507l-86.294 86.294c-2 2-4.2 4-6.36 6v-197.36c33.664-30.72 78.65-49.537 128.031-49.537 52.44 0 99.923 21.22 134.333 55.541l86.296 86.296c9.088 8.965 21.577 14.502 35.36 14.502s26.272-5.537 35.366-14.507l86.294-86.294c2-2 4.2-4 6.36-6v197.36c-33.664 30.72-78.65 49.537-128.031 49.537-52.44 0-99.923-21.22-134.333-55.541zM832 960h-128v-192h127.66l0.34-0.34v-639.32l-0.34-0.34h-127.66v-192h128c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM320 128h-127.66l-0.34 0.34v639.32l0.34 0.34h127.66v192h-128c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h128v192z" />
|
||||
<glyph unicode="󡄩" glyph-name="icon-box-with-dashed-lines" d="M0 576h128v-256h-128v256zM128 831.78l0.22 0.22h191.78v128h-192c-70.606-0.215-127.785-57.394-128-127.979v-192.021h128v191.78zM128 64.22v191.78h-128v-192c0.215-70.606 57.394-127.785 127.979-128h192.021v128h-191.78zM384 960h256v-128h-256v128zM896 64.22l-0.22-0.22h-191.78v-128h192c70.606 0.215 127.785 57.394 128 127.979v192.021h-128v-191.78zM896 960h-192v-128h191.78l0.22-0.22v-191.78h128v192c-0.215 70.606-57.394 127.785-127.979 128zM896 576h128v-256h-128v256zM384 64h256v-128h-256v128zM256 704h512v-512h-512v512z" />
|
||||
</font></defs></svg>
|
||||
</font></defs></svg>
|
||||
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 40 KiB |
Binary file not shown.
Binary file not shown.
@ -85,6 +85,7 @@ $glyph-icon-x-in-circle: '\e1038';
|
||||
$glyph-icon-brightness: '\e1039';
|
||||
$glyph-icon-contrast: '\e1040';
|
||||
$glyph-icon-expand: '\e1041';
|
||||
$glyph-icon-list-view: '\e1042';
|
||||
$glyph-icon-activity: '\e1100';
|
||||
$glyph-icon-activity-mode: '\e1101';
|
||||
$glyph-icon-autoflow-tabular: '\e1102';
|
||||
@ -189,6 +190,7 @@ $glyph-icon-box-with-dashed-lines: '\e1129';
|
||||
.icon-brightness { @include glyphBefore($glyph-icon-brightness); }
|
||||
.icon-contrast { @include glyphBefore($glyph-icon-contrast); }
|
||||
.icon-expand { @include glyphBefore($glyph-icon-expand); }
|
||||
.icon-list-view { @include glyphBefore($glyph-icon-list-view); }
|
||||
.icon-activity { @include glyphBefore($glyph-icon-activity); }
|
||||
.icon-activity-mode { @include glyphBefore($glyph-icon-activity-mode); }
|
||||
.icon-autoflow-tabular { @include glyphBefore($glyph-icon-autoflow-tabular); }
|
||||
|
||||
@ -132,5 +132,33 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
table.list-view {
|
||||
$s: 1.2em;
|
||||
width: 100%;
|
||||
th, td {
|
||||
cursor: pointer;
|
||||
}
|
||||
tr:hover td {
|
||||
background-color: $colorItemBg;
|
||||
color: $colorItemFg;
|
||||
}
|
||||
td {
|
||||
$p: $interiorMargin;
|
||||
@include ellipsize;
|
||||
color: $colorItemFg;
|
||||
font-size: 1em;
|
||||
line-height: $s;
|
||||
max-width: 0;
|
||||
padding-top: $p;
|
||||
padding-bottom: $p;
|
||||
}
|
||||
.t-item-icon {
|
||||
font-size: $s;
|
||||
margin-right: $interiorMargin;
|
||||
}
|
||||
.t-title-label {
|
||||
@include ellipsize; // Yep, need it here too as well as the <td>
|
||||
}
|
||||
}
|
||||
|
||||
64
platform/features/listview/bundle.js
Normal file
64
platform/features/listview/bundle.js
Normal file
@ -0,0 +1,64 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2017, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT is licensed under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0.
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
* License for the specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*
|
||||
* Open MCT includes source code licensed under additional open source
|
||||
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
define([
|
||||
'./src/controllers/ListViewController',
|
||||
'./src/directives/MCTGesture',
|
||||
'text!./res/templates/listview.html',
|
||||
'legacyRegistry'
|
||||
], function (
|
||||
ListViewController,
|
||||
MCTGesture,
|
||||
listViewTemplate,
|
||||
legacyRegistry
|
||||
) {
|
||||
legacyRegistry.register("platform/features/listview", {
|
||||
"name": "List View Plugin",
|
||||
"description": "Allows folder contents to be shown in list format",
|
||||
"extensions":
|
||||
{
|
||||
"views": [
|
||||
{
|
||||
"key": "list",
|
||||
"type": "folder",
|
||||
"name": "List",
|
||||
"cssClass": "icon-list-view",
|
||||
"template": listViewTemplate
|
||||
}
|
||||
],
|
||||
"controllers": [
|
||||
{
|
||||
"key": "ListViewController",
|
||||
"implementation": ListViewController,
|
||||
"depends": ["$scope"]
|
||||
}
|
||||
],
|
||||
"directives": [
|
||||
{
|
||||
"key": "mctGesture",
|
||||
"implementation" : MCTGesture,
|
||||
"depends": ["gestureService"]
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
});
|
||||
88
platform/features/listview/res/templates/listview.html
Normal file
88
platform/features/listview/res/templates/listview.html
Normal file
@ -0,0 +1,88 @@
|
||||
<!--
|
||||
Open MCT, Copyright (c) 2014-2017, United States Government
|
||||
as represented by the Administrator of the National Aeronautics and Space
|
||||
Administration. All rights reserved.
|
||||
|
||||
Open MCT is licensed under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
http://www.apache.org/licenses/LICENSE-2.0.
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
License for the specific language governing permissions and limitations
|
||||
under the License.
|
||||
|
||||
Open MCT includes source code licensed under additional open source
|
||||
licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
this source code distribution or the Licensing information page available
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<div ng-controller="ListViewController">
|
||||
<table class="list-view">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sortable"
|
||||
ng-click="reverseSort = (orderByField === 'title')? !reverseSort:false; orderByField='title';"
|
||||
ng-class="{
|
||||
sort: orderByField == 'title',
|
||||
asc: !reverseSort,
|
||||
desc: reverseSort
|
||||
}">
|
||||
Name
|
||||
</th>
|
||||
|
||||
|
||||
<th class="sortable"
|
||||
ng-click="reverseSort = (orderByField === 'type')? !reverseSort:false; orderByField='type';"
|
||||
ng-class="{
|
||||
sort: orderByField == 'type',
|
||||
asc: !reverseSort,
|
||||
desc: reverseSort
|
||||
}">
|
||||
Type
|
||||
</th>
|
||||
|
||||
<th class="sortable"
|
||||
ng-click="reverseSort = (orderByField === 'persisted')? !reverseSort:true; orderByField='persisted';"
|
||||
ng-class="{
|
||||
sort: orderByField == 'persisted',
|
||||
asc: !reverseSort,
|
||||
desc: reverseSort
|
||||
}">
|
||||
Created Date
|
||||
</th>
|
||||
|
||||
<th class="sortable"
|
||||
ng-click="reverseSort = (orderByField === 'modified')? !reverseSort:true; orderByField='modified';"
|
||||
ng-class="{
|
||||
sort: orderByField == 'modified',
|
||||
asc: !reverseSort,
|
||||
desc: reverseSort
|
||||
}">
|
||||
Update Date
|
||||
</th>
|
||||
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="child in children|orderBy:orderByField:reverseSort"
|
||||
mct-gesture="['menu','info']"
|
||||
mct-object="child.asDomainObject"
|
||||
ng-click="child.action.perform('navigate')">
|
||||
<td>
|
||||
<div class="l-flex-row">
|
||||
<span class="flex-elem t-item-icon" ng-class="{ 'l-icon-link': child.location.isLink()}">
|
||||
<span class="t-item-icon-glyph {{child.icon}}"></span>
|
||||
</span>
|
||||
<span class="t-title-label flex-elem grows">{{child.title}}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>{{child.type}}</td>
|
||||
<td>{{child.persisted}}</td>
|
||||
<td>{{child.modified}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@ -0,0 +1,67 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2017, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT is licensed under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0.
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
* License for the specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*
|
||||
* Open MCT includes source code licensed under additional open source
|
||||
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
define(function () {
|
||||
function ListViewController($scope) {
|
||||
this.$scope = $scope;
|
||||
$scope.orderByField = 'title';
|
||||
$scope.reverseSort = false;
|
||||
|
||||
this.updateView();
|
||||
var unlisten = $scope.domainObject.getCapability('mutation')
|
||||
.listen(this.updateView.bind(this));
|
||||
|
||||
$scope.$on('$destroy', function () {
|
||||
unlisten();
|
||||
});
|
||||
|
||||
}
|
||||
ListViewController.prototype.updateView = function () {
|
||||
this.$scope.domainObject.useCapability('composition')
|
||||
.then(function (children) {
|
||||
var formattedChildren = this.formatChildren(children);
|
||||
this.$scope.children = formattedChildren;
|
||||
this.$scope.data = {children: formattedChildren};
|
||||
}.bind(this)
|
||||
);
|
||||
};
|
||||
ListViewController.prototype.formatChildren = function (children) {
|
||||
return children.map(function (child) {
|
||||
return {
|
||||
icon: child.getCapability('type').getCssClass(),
|
||||
title: child.getModel().name,
|
||||
type: child.getCapability('type').getName(),
|
||||
persisted: new Date(
|
||||
child.getModel().persisted
|
||||
).toUTCString(),
|
||||
modified: new Date(
|
||||
child.getModel().modified
|
||||
).toUTCString(),
|
||||
asDomainObject: child,
|
||||
location: child.getCapability('location'),
|
||||
action: child.getCapability('action')
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
return ListViewController;
|
||||
});
|
||||
44
platform/features/listview/src/directives/MCTGesture.js
Normal file
44
platform/features/listview/src/directives/MCTGesture.js
Normal file
@ -0,0 +1,44 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2017, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT is licensed under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0.
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
* License for the specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*
|
||||
* Open MCT includes source code licensed under additional open source
|
||||
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
define(function () {
|
||||
function MCTGesture(gestureService) {
|
||||
return {
|
||||
restrict : 'A',
|
||||
scope: {
|
||||
domainObject: '=mctObject'
|
||||
},
|
||||
link : function ($scope, $element, attrs) {
|
||||
var activeGestures = gestureService.attachGestures(
|
||||
$element,
|
||||
$scope.domainObject,
|
||||
$scope.$eval(attrs.mctGesture)
|
||||
);
|
||||
$scope.$on('$destroy', function () {
|
||||
activeGestures.destroy();
|
||||
delete this.activeGestures;
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
return MCTGesture;
|
||||
});
|
||||
@ -0,0 +1,138 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2017, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT is licensed under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0.
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
* License for the specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*
|
||||
* Open MCT includes source code licensed under additional open source
|
||||
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
define(
|
||||
["../../src/controllers/ListViewController"],
|
||||
function (ListViewController) {
|
||||
describe("The Controller for the ListView", function () {
|
||||
var scope,
|
||||
unlistenFunc,
|
||||
domainObject,
|
||||
childObject,
|
||||
controller,
|
||||
childModel,
|
||||
typeCapability,
|
||||
mutationCapability;
|
||||
beforeEach(function () {
|
||||
unlistenFunc = jasmine.createSpy("unlisten");
|
||||
|
||||
mutationCapability = jasmine.createSpyObj(
|
||||
"mutationCapability",
|
||||
["listen"]
|
||||
);
|
||||
mutationCapability.listen.andReturn(unlistenFunc);
|
||||
|
||||
typeCapability = jasmine.createSpyObj(
|
||||
"typeCapability",
|
||||
["getCssClass", "getName"]
|
||||
);
|
||||
typeCapability.getCssClass.andReturn("icon-folder");
|
||||
typeCapability.getName.andReturn("Folder");
|
||||
|
||||
|
||||
childModel = jasmine.createSpyObj(
|
||||
"childModel",
|
||||
["persisted", "modified", "name"]
|
||||
);
|
||||
childModel.persisted = 1496867697303;
|
||||
childModel.modified = 1496867697303;
|
||||
childModel.name = "Battery Charge Status";
|
||||
|
||||
childObject = jasmine.createSpyObj(
|
||||
"childObject",
|
||||
["getModel", "getCapability"]
|
||||
);
|
||||
childObject.getModel.andReturn(
|
||||
childModel
|
||||
);
|
||||
// childObject.getCapability.andReturn(
|
||||
// typeCapability
|
||||
// );
|
||||
childObject.getCapability.andCallFake(function (arg) {
|
||||
if (arg === 'location') {
|
||||
return '';
|
||||
} else if (arg === 'type') {
|
||||
return typeCapability;
|
||||
}
|
||||
});
|
||||
childObject.location = '';
|
||||
|
||||
domainObject = jasmine.createSpyObj(
|
||||
"domainObject",
|
||||
["getCapability", "useCapability"]
|
||||
);
|
||||
domainObject.useCapability.andReturn(
|
||||
Promise.resolve([childObject])
|
||||
);
|
||||
domainObject.getCapability.andReturn(
|
||||
mutationCapability
|
||||
);
|
||||
|
||||
|
||||
scope = jasmine.createSpyObj(
|
||||
"$scope",
|
||||
["$on"]
|
||||
);
|
||||
scope.domainObject = domainObject;
|
||||
|
||||
controller = new ListViewController(scope);
|
||||
|
||||
waitsFor(function () {
|
||||
return scope.children;
|
||||
});
|
||||
});
|
||||
it("updates the view", function () {
|
||||
expect(scope.children[0]).toEqual(
|
||||
{
|
||||
icon: "icon-folder",
|
||||
title: "Battery Charge Status",
|
||||
type: "Folder",
|
||||
persisted: "Wed, 07 Jun 2017 20:34:57 GMT",
|
||||
modified: "Wed, 07 Jun 2017 20:34:57 GMT",
|
||||
asDomainObject: childObject,
|
||||
location: ''
|
||||
}
|
||||
);
|
||||
});
|
||||
it("updates the scope when mutation occurs", function () {
|
||||
domainObject.useCapability.andReturn(
|
||||
Promise.resolve([])
|
||||
);
|
||||
expect(mutationCapability.listen).toHaveBeenCalledWith(jasmine.any(Function));
|
||||
mutationCapability.listen.mostRecentCall.args[0]();
|
||||
waitsFor(function () {
|
||||
return scope.children.length !== 1;
|
||||
});
|
||||
runs(function () {
|
||||
expect(scope.children.length).toEqual(0);
|
||||
});
|
||||
});
|
||||
it("releases listeners on $destroy", function () {
|
||||
expect(scope.$on).toHaveBeenCalledWith('$destroy', jasmine.any(Function));
|
||||
scope.$on.mostRecentCall.args[1]();
|
||||
expect(unlistenFunc).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
}
|
||||
);
|
||||
86
platform/features/listview/test/directives/MCTGestureSpec.js
Normal file
86
platform/features/listview/test/directives/MCTGestureSpec.js
Normal file
@ -0,0 +1,86 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2017, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT is licensed under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0.
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
* License for the specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*
|
||||
* Open MCT includes source code licensed under additional open source
|
||||
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
define(
|
||||
["../../src/directives/MCTGesture"],
|
||||
function (MCTGesture) {
|
||||
describe("The Gesture Listener for the ListView items", function () {
|
||||
var mctGesture,
|
||||
gestureService,
|
||||
scope,
|
||||
element,
|
||||
attrs,
|
||||
attachedGesture;
|
||||
beforeEach(function () {
|
||||
attachedGesture = jasmine.createSpyObj(
|
||||
"attachedGesture",
|
||||
['destroy']
|
||||
);
|
||||
gestureService = jasmine.createSpyObj(
|
||||
"gestureService",
|
||||
["attachGestures"]
|
||||
);
|
||||
gestureService.attachGestures.andReturn(
|
||||
attachedGesture
|
||||
);
|
||||
mctGesture = MCTGesture(gestureService);
|
||||
});
|
||||
it("creates a directive Object", function () {
|
||||
expect(mctGesture).toBeDefined();
|
||||
});
|
||||
it("has link function that attaches gesture to gestureService",
|
||||
function () {
|
||||
attrs = {
|
||||
mctGesture: "menu,info"
|
||||
};
|
||||
element = jasmine.createSpy("element");
|
||||
scope = jasmine.createSpyObj(
|
||||
"$scope",
|
||||
["$on", "$eval"]
|
||||
);
|
||||
scope.domainObject = "fake domainObject";
|
||||
mctGesture.link(scope, element, attrs);
|
||||
expect(gestureService.attachGestures).toHaveBeenCalled();
|
||||
}
|
||||
);
|
||||
it("release gesture service on $destroy", function () {
|
||||
attrs = {
|
||||
mctGesture: "menu,info"
|
||||
};
|
||||
element = jasmine.createSpy("element");
|
||||
scope = jasmine.createSpyObj(
|
||||
"$scope",
|
||||
["$on", "$eval"]
|
||||
);
|
||||
scope.domainObject = "fake domainObject";
|
||||
mctGesture.link(scope, element, attrs);
|
||||
expect(scope.$on).toHaveBeenCalledWith(
|
||||
'$destroy',
|
||||
jasmine.any(Function)
|
||||
);
|
||||
scope.$on.mostRecentCall.args[1]();
|
||||
expect(attachedGesture.destroy).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
);
|
||||
@ -69,6 +69,7 @@ define([
|
||||
'../platform/features/conductor/compatibility/bundle',
|
||||
'../platform/features/imagery/bundle',
|
||||
'../platform/features/layout/bundle',
|
||||
'../platform/features/listview/bundle',
|
||||
'../platform/features/my-items/bundle',
|
||||
'../platform/features/pages/bundle',
|
||||
'../platform/features/plot/bundle',
|
||||
@ -115,6 +116,7 @@ define([
|
||||
'platform/features/fixed',
|
||||
'platform/features/imagery',
|
||||
'platform/features/layout',
|
||||
'platform/features/listview',
|
||||
'platform/features/pages',
|
||||
'platform/features/plot',
|
||||
'platform/features/timeline',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user