Joxit · Joxit · May 30, 2020 · May 2, 2020 · May 20, 2020 · May 21, 2020
diff --git a/README.md b/README.md
@@ -46,6 +46,7 @@ This web user interface uses [Riot](https://github.com/Riot/riot) the react-like
 -   Add Title when using `REGISTRY_URL` (see [#28](https://github.com/Joxit/docker-registry-ui/issues/28)) **static interface**.
 -   Customise docker pull command on static registry UI (see [#71](https://github.com/Joxit/docker-registry-ui/issues/71)) **static interface**.
 -   Add custom header via environment variable and file via `NGINX_PROXY_HEADER_*` (see [#89](https://github.com/Joxit/docker-registry-ui/pull/89)) **static interface**
+-   Show/Hide content digest in taglist via `SHOW_CONTENT_DIGEST` (values are: [`true`, `false`], default: `true`) (see [#126](https://github.com/Joxit/docker-registry-ui/issues/126)).
 
 ## FAQ
 

diff --git a/bin/entrypoint b/bin/entrypoint
@@ -8,6 +8,10 @@ if [ -z "${DELETE_IMAGES}" ] || [ "${DELETE_IMAGES}" = false ] ; then
   sed -i -r "s/(isImageRemoveActivated[:=])[^,;]*/\1false/" scripts/docker-registry-ui.js
 fi
 
+if [ "${SHOW_CONTENT_DIGEST}" = false ] ; then
+  sed -i -r "s/(showContentDigest[:=])[^,;]*/\1false/" scripts/docker-registry-ui.js
+fi
+
 get_nginx_proxy_headers() {
   (
     env &&

diff --git a/src/scripts/script.js b/src/scripts/script.js
@@ -17,6 +17,7 @@
 var registryUI = {}
 registryUI.URL_QUERY_PARAM_REGEX = /[&?]url=/;
 registryUI.URL_PARAM_REGEX = /^url=/;
+registryUI.showContentDigest = true;
 
 registryUI.url = function(byPassQueryParam) {
   if (!registryUI._url) {

diff --git a/src/scripts/static.js b/src/scripts/static.js
@@ -33,6 +33,7 @@ registryUI.name = function() {
 };
 registryUI.pullUrl = '${PULL_URL}';
 registryUI.isImageRemoveActivated = true;
+registryUI.showContentDigest = true;
 registryUI.catalog = {};
 registryUI.taglist = {};
 registryUI.taghistory = {};

diff --git a/src/style.css b/src/style.css
@@ -446,6 +446,14 @@ image-content-digest {
   padding: 7px 5px;
 }
 
+taglist .creation-date {
+  width: 10em;
+}
+
+taglist .image-size {
+  width: 7em;
+}
+
 catalog material-card,
 tag-history material-card {
   min-height: auto;

diff --git a/src/tags/image-content-digest.tag b/src/tags/image-content-digest.tag
@@ -28,7 +28,7 @@
         if (chars >= 70) {
             self.display_id = self.digest;
             self.title = '';
-        } else if (chars === 0) {
+        } else if (chars <= 0) {
             self.display_id = '';
             self.title = self.digest;
         } else {

diff --git a/src/tags/taglist.tag b/src/tags/taglist.tag
@@ -41,9 +41,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     <table show="{ registryUI.taglist.loadend }" style="border: none;">
       <thead>
       <tr>
-        <th>Creation date</th>
-        <th>Size</th>
-        <th id="image-content-digest-header">Content Digest</th>
+        <th class="creation-date">Creation date</th>
+        <th class="image-size">Size</th>
+        <th id="image-content-digest-header" if="{ registryUI.showContentDigest }">Content Digest</th>
 
         <th
         id="image-tag-header"
@@ -60,13 +60,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       </thead>
       <tbody>
       <tr each="{ image in this.opts.tags }">
-        <td>
+        <td class="creation-date">
           <image-date image="{ image }"/>
         </td>
-        <td>
+        <td class="image-size">
           <image-size image="{ image }"/>
         </td>
-        <td>
+        <td if="{ registryUI.showContentDigest }">
           <image-content-digest image="{ image }"/>
           <copy-to-clipboard target="digest" image={ image }/>
         </td>
@@ -93,6 +93,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       // window.innerWidth is a blocking access, cache its result.
       const innerWidth = window.innerWidth;
       var chars = 0;
+      var max = registryUI.taglist.tags.reduce(function(acc, e) {
+        return e.tag.length > acc ? e.tag.length : acc;
+      }, 0);
       if (innerWidth >= 1440) {
         chars = 71;
       } else if (innerWidth < 1024) {
@@ -101,6 +104,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         // SHA256:12345678 + scaled between 1024 and 1440px
         chars = 15 + 56 * ((innerWidth - 1024) / 416);
       }
+      if (max > 20) chars -= (max - 20);
       registryUI.taglist.tags.map(function (image) {
         image.trigger('content-digest-chars', chars);
       });