Adds side-by-side diff for images (#6784)

* Adds side-by-side diff for images

Signed-off-by: Mario Lubenka <mario.lubenka@googlemail.com>

* Explain blank imports

Signed-off-by: Mario Lubenka <mario.lubenka@googlemail.com>

* Use complete word for width and height labels on image compare

Signed-off-by: Mario Lubenka <mario.lubenka@googlemail.com>

* Update index.css from master

Signed-off-by: Mario Lubenka <mario.lubenka@googlemail.com>

* Moves ImageInfo to git commit file

Signed-off-by: Mario Lubenka <mario.lubenka@googlemail.com>

* Assign ImageInfo function for template and sets correct target for BeforeSourcePath

Signed-off-by: Mario Lubenka <mario.lubenka@googlemail.com>

* Adds missing comment

Signed-off-by: Mario Lubenka <mario.lubenka@googlemail.com>

* Return error if ImageInfo failed

Signed-off-by: Mario Lubenka <mario.lubenka@googlemail.com>

* Avoid template panic when ImageInfo failed for some reason

Signed-off-by: Mario Lubenka <mario.lubenka@googlemail.com>

* Show file size on image diff

Signed-off-by: Mario Lubenka <mario.lubenka@googlemail.com>

* Removes unused helper function

Signed-off-by: Mario Lubenka <mario.lubenka@googlemail.com>

* Reverts copyright year change

Signed-off-by: Mario Lubenka <mario.lubenka@googlemail.com>

* Close file reader

Signed-off-by: Mario Lubenka <mario.lubenka@googlemail.com>

* Update commit.go

Sets correct data key

* Moves reader.Close() up a few lines

* Updates index.css

* Updates CSS file

Signed-off-by: Mario Lubenka <mario.lubenka@googlemail.com>

* Transfers adjustments for image compare to compare.go file

Signed-off-by: Mario Lubenka <mario.lubenka@googlemail.com>

* Adjusts variable name

Signed-off-by: Mario Lubenka <mario.lubenka@googlemail.com>

* Apply lesshint recommendations

Signed-off-by: Mario Lubenka <mario.lubenka@googlemail.com>

* Do not show old image on image compare if it is not in index of base commit

Signed-off-by: Mario Lubenka <mario.lubenka@googlemail.com>

* Change file size text

Signed-off-by: Mario Lubenka <mario.lubenka@googlemail.com>

3 files changed, 54 insertions, 0 deletions

diff --git a/public/css/index.css b/public/css/index.css
index f58e56bf0a..113fdbf631 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -140,6 +140,16 @@ a{cursor:pointer}
 .ui .migrate{color:#888!important;opacity:.5}
 .ui .migrate a{color:#444!important}
 .ui .migrate a:hover{color:#000!important}
+.ui .border{border:1px solid}
+.ui .border.red{border-color:#d95c5c!important}
+.ui .border.blue{border-color:#428bca!important}
+.ui .border.black{border-color:#444}
+.ui .border.grey{border-color:#767676!important}
+.ui .border.light.grey{border-color:#888!important}
+.ui .border.green{border-color:#6cc644!important}
+.ui .border.purple{border-color:#6e5494!important}
+.ui .border.yellow{border-color:#fbbd08!important}
+.ui .border.gold{border-color:#a1882b!important}
 .ui .branch-tag-choice{line-height:20px}
 @media only screen and (max-width:767px){.ui.pagination.menu .item.navigation span.navigation_label,.ui.pagination.menu .item:not(.active):not(.navigation){display:none}
 }
@@ -670,6 +680,7 @@ footer .ui.left,footer .ui.right{line-height:40px}
 .repository .diff-file-box .code-diff td{padding:0 0 0 10px!important;border-top:0}
 .repository .diff-file-box .code-diff .lines-num{border-color:#d4d4d5;border-right-width:1px;border-right-style:solid;padding:0 5px!important}
 .repository .diff-file-box .code-diff tbody tr td.halfwidth{width:49%}
+.repository .diff-file-box .code-diff tbody tr td.center{text-align:center}
 .repository .diff-file-box .code-diff tbody tr .removed-code{background-color:#f99}
 .repository .diff-file-box .code-diff tbody tr .added-code{background-color:#9f9}
 .repository .diff-file-box .code-diff tbody tr [data-line-num]::before{content:attr(data-line-num);text-align:right}
diff --git a/public/less/_base.less b/public/less/_base.less
index 487779c137..e295be368d 100644
--- a/public/less/_base.less
+++ b/public/less/_base.less
@@ -600,6 +600,45 @@ code,
         }
     }
 
+    .border {
+        border: 1px solid;
+        &.red {
+            border-color: #d95c5c !important;
+        }
+
+        &.blue {
+            border-color: #428bca !important;
+        }
+
+        &.black {
+            border-color: #444444;
+        }
+
+        &.grey {
+            border-color: #767676 !important;
+        }
+
+        &.light.grey {
+            border-color: #888888 !important;
+        }
+
+        &.green {
+            border-color: #6cc644 !important;
+        }
+
+        &.purple {
+            border-color: #6e5494 !important;
+        }
+
+        &.yellow {
+            border-color: #fbbd08 !important;
+        }
+
+        &.gold {
+            border-color: #a1882b !important;
+        }
+    }
+
     .branch-tag-choice {
         line-height: 20px;
     }
diff --git a/public/less/_repository.less b/public/less/_repository.less
index 8eb4a45bd3..74ca683c4e 100644
--- a/public/less/_repository.less
+++ b/public/less/_repository.less
@@ -1364,6 +1364,10 @@
                         width: 49%;
                     }
 
+                    td.center {
+                        text-align: center;
+                    }
+
                     .removed-code {
                         background-color: #ff9999;
                     }