commit 5926aff1272d10c38c7af06c82b6ea272c91d1a8
author Ian Wells <iwells@google.com> Thu Jan 02 11:18:11 2020 -0800
committer Ian Wells <iwells@google.com> Fri Jan 17 21:36:27 2020 +0000
tree 8e72181558b43cff786f2e6bdb922f95079284ac
parent 73bb362fd84b2089e2625761253852cc7716a14b

Cosmetic improvements

* Add space between files to improve readability
* Move "Cancel" and "Apply" buttons to the top of the popup where they
are easier to notice

Screenshot: https://imgur.com/a/rllkqGc

Change-Id: I273a0bb294e10af173f5587478a1ce392c8d5bec

src/main/resources/static/find-owners.js

diff --git a/src/main/resources/static/find-owners.js b/src/main/resources/static/find-owners.js
index 6bbf747..c6f2826 100644
--- a/src/main/resources/static/find-owners.js
+++ b/src/main/resources/static/find-owners.js
@@ -228,10 +228,6 @@
     function isExemptedFromOwnerApproval() {
       return message.match(/(Exempted|Exempt)-From-Owner-Approval:/);
     }
-    function showDiv(div, text) {
-      div.style.display = 'inline';
-      div.innerHTML = text;
-    }
     function strElement(s) {
       var e = document.createElement('span');
       e.innerHTML = s;
@@ -248,6 +244,8 @@
       b.appendChild(document.createTextNode(name));
       b.className = BUTTON_STYLE;
       b.onclick = action;
+      b.style.display = 'inline';
+      b.style.float = 'right';
       return b;
     }
     function showJsonLines(args, key, obj) {
@@ -290,8 +288,11 @@
       for (var i = 0; i < NUM_GROUP_TYPES; i++) {
         groupTypeDiv[i] = emptyDiv(GROUP_TYPE_DIV_ID[i]);
       }
+
+      var cancelButton = newButton('Cancel', hideFindOwnersPage);
+      header.appendChild(cancelButton);
       addApplyButton();
-      args.push(newButton('Cancel', hideFindOwnersPage));
+
       var ownersDiv = emptyDiv(OWNERS_DIV_ID);
       var numCheckBoxes = 0;
       var owner2boxes = {}; // owner name ==> array of checkbox id
@@ -303,7 +304,7 @@
         var apply = newButton('Apply', doApplyButton);
         apply.id = APPLY_BUTTON_ID;
         apply.style.display = 'none';
-        args.push(apply);
+        header.appendChild(apply);
       }
       function emptyDiv(id) {
         var e = document.createElement('div');
@@ -312,6 +313,9 @@
         args.push(e);
         return e;
       }
+      function colorSpan(str, color) {
+        return `<span style="color: ${color};">${str}</span>`;
+      }
       function doApplyButton() {
         addList = [];
         removeList = [];
@@ -337,7 +341,7 @@
         div.innerHTML = '';
         div.style.display = 'inline';
         div.appendChild(strElement(title));
-        function addOwner(ownerEmail) {
+        function addOwner(itemDiv, ownerEmail) {
           if (ownerEmail == '*') {
             return; // no need to list/select '*'
           }
@@ -349,17 +353,18 @@
             owner2boxes[name] = [];
           }
           owner2boxes[name].push(id);
+
           var box = document.createElement('input');
           box.type = 'checkbox';
           box.checked = (ownerEmail in reviewerId);
           box.id = id;
           box.value = name;
           box.onclick = clickBox;
-          div.appendChild(strElement('&nbsp;&nbsp; '));
+          itemDiv.appendChild(strElement('&nbsp;&nbsp; '));
           var nobr = document.createElement('nobr');
           nobr.appendChild(box);
           nobr.appendChild(strElement(name));
-          div.appendChild(nobr);
+          itemDiv.appendChild(nobr);
         }
         keys.forEach(function(key) {
           var owners = groups[key].owners; // string of owner emails
@@ -377,10 +382,15 @@
           if (hasNamedOwner(reducedList)) {
             item += ':';
           }
-          div.appendChild(strElement(item));
-          reducedList.forEach(addOwner);
-          div.appendChild(br());
+
+          let itemDiv = document.createElement('div');
+          itemDiv.style.paddingTop = '0.5em';
+          itemDiv.appendChild(strElement(item));
+          itemDiv.appendChild(br());
+          reducedList.forEach(addOwner.bind(this, itemDiv));
+          div.appendChild(itemDiv);
         });
+        div.lastElementChild.style.paddingBottom = '0.5em';
       }
       function addOwnersDiv(div, title) {
         div.innerHTML = '';
@@ -394,8 +404,11 @@
           if (email != '*') { // do not list special email *
             var vote = reviewerVote[email];
             if ((email in reviewerVote) && vote != 0) {
-              email += ' <font color="' +
-                  ((vote > 0) ? 'green">(+' : 'red">(') + vote + ')</font>';
+              if (vote > 0) {
+                email += colorSpan('&nbsp;(+' + vote + ')', 'green');
+              } else {
+                email += colorSpan('&nbsp;(' + vote + ')', 'red');
+              }
             }
             div.appendChild(strElement('&nbsp;&nbsp;' + email + '<br>'));
           }
@@ -409,8 +422,14 @@
         Object.keys(groups).sort().forEach(function(key) {
           listOfGroup[groups[key].type].push(key);
         });
-        showDiv(header, isExemptedFromOwnerApproval() ? HTML_IS_EXEMPTED :
-            ((onSubmit ? HTML_ONSUBMIT_HEADER : '') + HTML_SELECT_REVIEWERS));
+
+        // Add message to header div and make visible.
+        let headerMessageDiv = document.createElement('div');
+        headerMessageDiv.innerHTML = isExemptedFromOwnerApproval() ? HTML_IS_EXEMPTED :
+            ((onSubmit ? HTML_ONSUBMIT_HEADER : '') + HTML_SELECT_REVIEWERS);
+        header.appendChild(headerMessageDiv);
+        header.style.display = 'inline';
+
         numCheckBoxes = 0;
         owner2boxes = {};
         for (var i = 0; i < NUM_GROUP_TYPES; i++) {