fix(catalog): indent aggregated entries on large screen was wrong

resolves #121

.github/ISSUE_TEMPLATE/bug_report.md

@@ -27,7 +27,7 @@ My docker-compose file
 
 ```
 
-My private docker registry configuration 
+My private docker registry configuration
 ```yml
 
 ```
@@ -41,18 +41,18 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 ## System information
- 
+
 - OS: [e.g. Debian 10, Windows, Android 9...]
 <!-- Browser is only for UI bugs -->
 - Browser:
     - Name:  [e.g. Chrome, Firefox...]
     - Version: [e.g. 22]
 - Docker registry UI:
-    - Version: [e.g. 1.3.0]
-    - Interface variant: [standard or static]
+    - Version: [e.g. 1.4.0]
     - Server: [docker or dist]
 <!-- Only for Docker and for where the UI is hosted -->
     - Docker version: [e.g. 19.03]
+    - Docker registry ui tag: [latest, static, master, 1.4-static...]
     - OS/Arch: [e.g. linux/amd64]
     - Tools: [e.g. docker-compose, kubernets..]
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "docker-registry-ui",
-  "version": "1.4.4",
+  "version": "1.4.8",
   "scripts": {
     "build": "./node_modules/gulp/bin/gulp.js build"
   },

src/style.css

@@ -282,6 +282,11 @@ material-button .content i.material-icons,
   color: #777;
 }
 
+material-button[disabled] .content i.material-icons,
+material-checkbox[disabled] .content i.material-icons {
+  color: #bbb;
+}
+
 material-snackbar .toast {
   height: auto;
 }
@@ -371,6 +376,10 @@ footer {
   }
 }
 
+material-footer {
+  padding: 0.5em 1em;
+}
+
 @media screen and (min-width: 760px) and (max-height: 750px) {
   main {
     min-height: calc(100% - 144px - 2.5em);
@@ -511,8 +520,14 @@ catalog-element catalog-element.hide material-card {
   opacity: 0;
 }
 
-catalog-element catalog-element .list > span i.material-icons {
-  margin-right: 48px;
+catalog-element catalog-element > .content {
+  margin-left: 3em;
+}
+
+@media screen and (min-width: 1515px){
+  catalog-element catalog-element > .content material-card {
+    max-width: calc(1440px - 3em);
+  }
 }
 
 remove-image {

src/tags/app.tag

@@ -202,6 +202,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
           oReq.getContentDigest(function (digest) {
             self.digest = digest;
             self.trigger('content-digest', digest);
+            if (!digest) {
+              registryUI.showErrorCanNotReadContentDigest();
+            }
           });
           self.getBlobs(response.config.digest)
         } else if (this.status == 404) {

src/tags/catalog-element.tag

@@ -16,18 +16,20 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <catalog-element>
   <!-- Begin of tag -->
-  <material-card class="list highlight" item="{item}" expanded="{expanded}">
-    <material-waves onmousedown="{launch}" center="true" color="#ddd" />
-    <span>
-      <i class="material-icons">send</i>
-      { typeof opts.item === "string" ? opts.item : opts.item.repo }
-      <div if="{typeof opts.item !== "string"}" class="item-count right">
-        { opts.item.images && opts.item.images.length } images
-        <i class="material-icons animated {expanded: opts.expanded}">expand_more</i>
-      </div>
-    </span>
-  </material-card>
-  <catalog-element if="{typeof opts.item !== "string"}" class="animated {hide: !expanded, expanding: expanding}" each="{item in item.images}" />
+  <div class="content">
+    <material-card class="list highlight" item="{item}" expanded="{expanded}">
+      <material-waves onmousedown="{launch}" center="true" color="#ddd" />
+      <span>
+        <i class="material-icons">send</i>
+        { typeof opts.item === "string" ? opts.item : opts.item.repo }
+        <div if="{typeof opts.item !== "string"}" class="item-count right">
+          { opts.item.images && opts.item.images.length } images
+          <i class="material-icons animated {expanded: opts.expanded}">expand_more</i>
+        </div>
+      </span>
+    </material-card>
+    <catalog-element if="{typeof opts.item !== "string"}" class="animated {hide: !expanded, expanding: expanding}" each="{item in item.images}" />
+  </div>
   <script>
     this.on('mount', function() {
       const self = this;

src/tags/remove-image.tag

@@ -15,10 +15,10 @@ You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <remove-image>
-  <material-button waves-center="true" rounded="true" waves-color="#ddd" title="This will delete the image." if="{ !opts.multiDelete }">
+  <material-button waves-center="true" rounded="true" waves-color="#ddd" title="This will delete the image." if="{ !opts.multiDelete }" disabled="{ !this.digest }">
     <i class="material-icons">delete</i>
   </material-button>
-  <material-checkbox if="{ opts.multiDelete }" title="Select this tag to delete it."></material-checkbox>
+  <material-checkbox if="{ opts.multiDelete }" title="Select this tag to delete it." disabled="{ !this.digest }"></material-checkbox>
   <script type="text/javascript">
     const self = this;
 
@@ -35,7 +35,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
           const tag = self.opts.image.tag;
           registryUI.taglist.go(name);
           if (!self.digest) {
-            registryUI.showErrorCanNotReadContentDigest();
+            registryUI.snackbar('Information for ' + name + ':' + tag + ' are not yet loaded.');
             return;
           }
           const oReq = new Http();
@@ -66,7 +66,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
           self.tags['material-checkbox'].toggle();
         }
         self.tags['material-checkbox'].on('toggle', function() {
-          registryUI.taglist.instance.trigger('toggle-remove-image', self.checked);
+          registryUI.taglist.instance.trigger('toggle-remove-image', this.checked);
         });
       }
       self.multiDelete = self.opts.multiDelete;
@@ -74,6 +74,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 
     opts.image.one('content-digest', function(digest) {
       self.digest = digest;
+      self.update();
     });
     opts.image.trigger('get-content-digest');
   </script>

src/tags/taglist.tag

@@ -153,8 +153,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       return images;
     };
 
-    registryUI.taglist.bulkDelete = function() {
+    registryUI.taglist.bulkDelete = function(e) {
       if (self.multiDelete && self.toDelete > 0) {
+        if (e.altKey) {
+          self._getRemoveImageTags()
+            .filter(function(img) { return img.tags['material-checkbox'].checked; })
+            .forEach(function(img) { img.tags['material-checkbox'].toggle() });
+        }
         self._getRemoveImageTags().filter(function(img) {
           return img.tags['material-checkbox'].checked;
         }).forEach(function(img) {
@@ -170,6 +175,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       checkbox._toggle = checkbox.toggle;
       checkbox.toggle = function(e) {
         if (e.altKey) {
+          if (!this.checked) { this._toggle(); }
           self._getRemoveImageTags()
             .filter(function(img) { return !img.tags['material-checkbox'].checked; })
             .forEach(function(img) { img.tags['material-checkbox'].toggle() });