Merge pull request #14136 from thoys/feat/create/exportSelection

MS19053: [CreateApp/EntityList] Move export selection button to bottom of the list

scripts/system/html/css/edit-style.css

@@ -244,7 +244,7 @@ input.search:focus {
     height: 26px;
     margin-top: 1px;
     margin-bottom: 1px;
-    box-shadow: 0 0 0px 1px #00b4ef;
+    box-shadow: 0 0 0 1px #00b4ef;
 }
 
 input:disabled, textarea:disabled {
@@ -455,11 +455,11 @@ input[type=checkbox]:checked + label:hover {
 #properties-list fieldset {
     position: relative;
     /* 0.1px on the top is to prevent margin collapsing between this and it's first child */
-    margin: 21px -21px 0px -21px;
+    margin: 21px -21px 0 -21px;
-    padding: 0.1px 21px 0px 21px;
+    padding: 0.1px 21px 0 21px;
     border: none;
     border-top: 1px rgb(90,90,90) solid;
-    box-shadow: 0px -1px 0px rgb(37,37,37);
+    box-shadow: 0 -1px 0 rgb(37,37,37);
 }
 
 #properties-list fieldset.fstuple, #properties-list fieldset.fsrow {
@@ -469,7 +469,7 @@ input[type=checkbox]:checked + label:hover {
 }
 
 #properties-list > fieldset[data-collapsed="true"] + fieldset {
-    margin-top: 0px;
+    margin-top: 0;
 }
 
 #properties-list > fieldset[data-collapsed="true"] > *:not(legend) {
@@ -477,14 +477,14 @@ input[type=checkbox]:checked + label:hover {
 }
 
 #properties-list legend + fieldset {
-    margin-top: 0px;
+    margin-top: 0;
     border: none;
     box-shadow: none;
 }
 
 #properties-list > fieldset#properties-header {
-    margin-top: 0px;
+    margin-top: 0;
-    padding-bottom: 0px;
+    padding-bottom: 0;
 }
 
 
@@ -940,8 +940,8 @@ tuple, .blue:focus, .tuple .z:focus, .tuple .roll:focus {
 #properties-list .two-column  fieldset legend {
     display: table;
     width: 100%;
-    margin: 21px -21px 0px -21px;
+    margin: 21px -21px 0 -21px;
-    padding: 0px 0px 0px 21px;
+    padding: 0 0 0 21px;
     font-family: Raleway-Regular;
     font-size: 12px;
     color: #afafaf;
@@ -973,6 +973,10 @@ fieldset .checkbox-sub-props .property:first-child {
 ::-webkit-scrollbar-track {
     background-color: #2e2e2e;
 }
+#entity-table-scroll::-webkit-scrollbar-track {
+    border-bottom-right-radius: 7px;
+}
+
 ::-webkit-scrollbar-thumb {
     background-color: #696969;
     border: 2px solid #2e2e2e;
@@ -1031,6 +1035,16 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
     position: relative; /* New positioning context. */
 }
 
+#footer-text {
+    float: right;
+    padding-top: 12px;
+    padding-right: 22px;
+}
+
+#entity-list-footer {
+    padding-top: 9px;
+}
+
 #search-area {
     padding-right: 168px;
     padding-bottom: 24px;
@@ -1068,6 +1082,9 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
     margin-top: 28px;
     border-left: 2px solid #575757;
     border-right: 2px solid #575757;
+    border-bottom: 2px solid #575757;
+    border-bottom-left-radius: 7px;
+    border-bottom-right-radius: 7px;
     background-color: #1c1c1c;
 }
 
@@ -1084,8 +1101,7 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
     background-color: #1c1c1c;
 }
 
-#entity-table thead tr, #entity-table thead tr th,
+#entity-table thead tr, #entity-table thead tr th {
-#entity-table tfoot tr, #entity-table tfoot tr td {
     background: none;
 }
 
@@ -1196,19 +1212,6 @@ th#entity-hasTransparent .sort-order {
     top: -1px;
 }
 
-#entity-table tfoot {
-    box-sizing: border-box;
-    border: 2px solid #575757;
-    border-bottom-left-radius: 7px;
-    border-bottom-right-radius: 7px;
-    border-top: 1px solid #575757;
-    position: absolute;
-    bottom: -21px;
-    left: 0;
-    width: 100%;
-}
-
-
 #col-type {
     width: 16%;
 }
@@ -1788,4 +1791,13 @@ input#reset-to-natural-dimensions {
 
 .skybox-section {
     display: none;
-}
+}
+
+input[type=button]#export {
+    height: 38px;
+    width: 180px;
+}
+
+body#entity-list-body {
+    padding-bottom: 0;
+}

scripts/system/html/entityList.html

@@ -1,4 +1,4 @@
-<!--
+<!--
 //  entityList.html
 //
 //  Created by Ryan Huffman on 19 Nov 2014
@@ -18,14 +18,13 @@
         <script type="text/javascript" src="js/listView.js"></script>
         <script type="text/javascript" src="js/entityList.js"></script>
     </head>
-    <body onload='loaded();'>
+    <body onload='loaded();' id="entity-list-body">
         <div id="entity-list-header">
             <input type="button" class="glyph" id="refresh" value="F" />
             <div>
                 <input type="button" id="locked" class="glyph" value="&#xe006;" />
                 <input type="button" id="visible" class="glyph" value="&#xe007;" />
             </div>
-            <input type="button" id="export" value="Export Selection" />
             <input type="button" id="pal" class="glyph" value="&#xe00c;" />
             <input type="button" class="red" id="delete" value="Delete" />
         </div>
@@ -87,11 +86,6 @@
                             <td class="id" style="display: none"></td>
                         </tr>
                     </tbody>
-                    <tfoot>
-                        <tr>
-                            <td id="footer-text" colspan="12"> </td>
-                        </tr>
-                    </tfoot>
                 </table>
 
                 <div id="no-entities">
@@ -99,5 +93,13 @@
                 </div>
             </div>
         </div>
+        <div id="entity-list-footer">
+            <div>
+                <input type="button" id="export" value="Export Selection" />
+                <div id="footer-text">
+                    <b><span id="selected-entities-count">0</span> of <span id="visible-entities-count">0</span></b> selected
+                </div>
+            </div>
+        </div>
     </body>
 </html>

scripts/system/html/js/entityList.js

@@ -20,7 +20,7 @@ const IMAGE_MODEL_NAME = 'default-image-model.fbx';
 const COLLAPSE_EXTRA_INFO = "E";
 const EXPAND_EXTRA_INFO = "D";
 const FILTER_IN_VIEW_ATTRIBUTE = "pressed";
-const WINDOW_NONVARIABLE_HEIGHT = 207;
+const WINDOW_NONVARIABLE_HEIGHT = 227;
 const NUM_COLUMNS = 12;
 const EMPTY_ENTITY_ID = "0";
 const DELETE = 46; // Key code for the delete key.
@@ -60,7 +60,7 @@ const COMPARE_DESCENDING = function(a, b) {
 }
 
 // List of all entities
-var entities = []
+var entities = [];
 // List of all entities, indexed by Entity ID
 var entitiesByID = {};
 // The filtered and sorted list of entities passed to ListView
@@ -112,7 +112,8 @@ function loaded() {
         elPal = document.getElementById("pal");
         elInfoToggle = document.getElementById("info-toggle");
         elInfoToggleGlyph = elInfoToggle.firstChild;
-        elFooter = document.getElementById("footer-text");
+        elSelectedEntitiesCount = document.getElementById("selected-entities-count");
+        elVisibleEntitiesCount = document.getElementById("visible-entities-count");
         elNoEntitiesMessage = document.getElementById("no-entities");
         elNoEntitiesInView = document.getElementById("no-entities-in-view");
         elNoEntitiesRadius = document.getElementById("no-entities-radius");
@@ -440,15 +441,8 @@ function loaded() {
         }
         
         function refreshFooter() {
-            if (selectedEntities.length > 1) {
+            elSelectedEntitiesCount.innerText = selectedEntities.length;
-                elFooter.firstChild.nodeValue = selectedEntities.length + " entities selected";
+            elVisibleEntitiesCount.innerText = visibleEntities.length;
-            } else if (selectedEntities.length === 1) {
-                elFooter.firstChild.nodeValue = "1 entity selected";
-            } else if (visibleEntities.length === 1) {
-                elFooter.firstChild.nodeValue = "1 entity found";
-            } else {
-                elFooter.firstChild.nodeValue = visibleEntities.length + " entities found";
-            }
         }
         
         function refreshNoEntitiesMessage() {
@@ -646,7 +640,7 @@ function loaded() {
                 data = JSON.parse(data);
                 if (data.type === "clearEntityList") {
                     clearEntities();
-                } else if (data.type == "selectionUpdate") {
+                } else if (data.type === "selectionUpdate") {
                     let notFound = updateSelectedEntities(data.selectedIDs);
                     if (notFound) {
                         refreshEntities();