Merge branch 'ui-bug-fixes' into 'master'

UI bug fixes

Closes #20074   
Closes #20094 

Regression UI bug fixes
* Fix broken status icon on project page
* Center tooltip on empty state in pipeline
* Reduce max-width of commit title in pipeline so more fits in table
* Fixes firefox rendering (icons getting cut off)
* Fixes Safari rendering of SHA icon

See merge request !5383

app/assets/stylesheets/pages/builds.scss

@@ -53,6 +53,14 @@
       left: 70px;
     }
   }
+
+  .nav-links {
+    svg {
+      position: relative;
+      top: 2px;
+      margin-right: 3px;
+    }
+  }
 }
 
 .build-header {

app/assets/stylesheets/pages/commit.scss

@@ -68,6 +68,12 @@
   }
 }
 
+.ci-status-link {
+  svg {
+    overflow: visible;
+  }
+}
+
 .commit-box {
   border-top: 1px solid $border-color;
 

app/assets/stylesheets/pages/merge_requests.scss

@@ -64,6 +64,7 @@
       margin-right: 4px;
       position: relative;
       top: 1px;
+      overflow: visible;
     }
 
     &.ci-success {

app/assets/stylesheets/pages/pipelines.scss

@@ -76,7 +76,7 @@
 
     svg {
       height: 14px;
-      width: auto;
+      width: 14px;
       vertical-align: middle;
       fill: $table-text-gray;
     }
@@ -93,7 +93,7 @@
 
     .commit-title {
       margin-top: 4px;
-      max-width: 320px;
+      max-width: 300px;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
@@ -138,6 +138,11 @@
       height: 18px;
       width: 18px;
       vertical-align: middle;
+      overflow: visible;
+    }
+
+    .light {
+      width: 3px;
     }
   }
 
@@ -153,7 +158,7 @@
 
     svg {
       width: 12px;
-      height: auto;
+      height: 12px;
       vertical-align: middle;
       margin-right: 4px;
     }

app/assets/stylesheets/pages/status.scss

@@ -49,6 +49,7 @@
       position: relative;
       top: 1px;
       margin: 0 3px;
+      overflow: visible;
     }
   }
 
@@ -74,3 +75,11 @@
     color: $gl-gray;
   }
 }
+
+.visible-xs-inline {
+  .ci-status-link {
+    position: relative;
+    top: 2px;
+    left: 5px;
+  }
+}

app/helpers/ci_status_helper.rb

@@ -45,10 +45,10 @@ module CiStatusHelper
     custom_icon(icon_name)
   end
 
-  def render_commit_status(commit, tooltip_placement: 'auto left', cssclass: '')
+  def render_commit_status(commit, tooltip_placement: 'auto left')
     project = commit.project
     path = builds_namespace_project_commit_path(project.namespace, project, commit)
-    render_status_with_link('commit', commit.status, path, tooltip_placement, cssclass: cssclass)
+    render_status_with_link('commit', commit.status, path, tooltip_placement)
   end
 
   def render_pipeline_status(pipeline, tooltip_placement: 'auto left')

app/views/projects/ci/builds/_build.html.haml

@@ -14,16 +14,19 @@
         %span ##{build.id}
 
       - if build.stuck?
-        = icon('warning', class: 'text-warning has-tooltip', title: 'Build is stuck. Check runners.')
+        .icon-container
+          = icon('warning', class: 'text-warning has-tooltip', title: 'Build is stuck. Check runners.')
       - if defined?(retried) && retried
-        = icon('warning', class: 'text-warning has-tooltip', title: 'Build was retried.')
+        .icon-container
+          = icon('warning', class: 'text-warning has-tooltip', title: 'Build was retried.')
 
       - if defined?(ref) && ref
         - if build.ref
           = link_to build.ref, namespace_project_commits_path(build.project.namespace, build.project, build.ref), class: "monospace branch-name"
         - else
           .light none
-        = custom_icon("icon_commit")
+        .icon-container
+          = custom_icon("icon_commit")
 
       - if defined?(commit_sha) && commit_sha
         = link_to build.short_sha, namespace_project_commit_path(build.project.namespace, build.project, build.sha), class: "commit-id monospace"
@@ -88,4 +91,3 @@
           - elsif build.playable?
             = link_to play_namespace_project_build_path(build.project.namespace, build.project, build, return_to: request.original_url), method: :post, title: 'Play', class: 'btn btn-build' do
               = icon('play')
-

app/views/projects/commits/_commit.html.haml

@@ -19,13 +19,14 @@
             ·
             = commit.short_id
           - if commit.status
-            = render_commit_status(commit, cssclass: 'visible-xs-inline')
+            .visible-xs-inline
+              = render_commit_status(commit)
           - if commit.description?
             %a.text-expander.hidden-xs.js-toggle-button ...
 
         .commit-actions.hidden-xs
           - if commit.status
-            = render_commit_status(commit, cssclass: 'btn btn-transparent')
+            = render_commit_status(commit)
           = clipboard_button(clipboard_text: commit.id)
           = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit-short-id btn btn-transparent"
           = link_to_browse_code(project, commit)

app/views/shared/icons/_icon_fork.svg

-<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><circle id="a" cx="4" cy="4" r="4"/><mask id="d" width="8" height="8" x="0" y="0" fill="#fff"><use xlink:href="#a"/></mask><circle id="b" cx="20" cy="4" r="4"/><mask id="e" width="8" height="8" x="0" y="0" fill="#fff"><use xlink:href="#b"/></mask><circle id="c" cx="12" cy="30" r="4"/><mask id="f" width="8" height="8" x="0" y="0" fill="#fff"><use xlink:href="#c"/></mask></defs><g fill="none" fill-rule="evenodd" transform="translate(8 3)"><path fill="#7E7E7E" d="M10 19.667c-4.14-1.29-7.389-5.878-7.389-5.878C2.274 13.353 2 12.545 2 12.01V6h4v5.509c0 .276.166.65.367.831 0 0 1.136 1.028 1.746 1.574C9.617 15.261 11.048 16 12.09 16c1.028 0 2.41-.723 3.858-2.048.588-.54 1.84-1.742 1.84-1.742a.784.784 0 0 0 .211-.502V6h4v6.008c0 .548-.259 1.349-.601 1.795 0 0-3.21 4.707-7.399 5.916V27h-4v-7.333z"/><use stroke="#7E7E7E" stroke-width="4" mask="url(#d)" xlink:href="#a"/><use stroke="#7E7E7E" stroke-width="4" mask="url(#e)" xlink:href="#b"/><use stroke="#7E7E7E" stroke-width="4" mask="url(#f)" xlink:href="#c"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
\ No newline at end of file
+  <path fill="#7E7E7E" fill-rule="evenodd" d="M22,29.5351288 L22,22.7193602 C26.1888699,21.5098039 29.3985457,16.802989 29.3985457,16.802989 C29.740988,16.3567547 30,15.5559546 30,15.0081969 L30,10.4648712 C31.1956027,9.77325238 32,8.48056471 32,7 C32,4.790861 30.209139,3 28,3 C25.790861,3 24,4.790861 24,7 C24,8.48056471 24.8043973,9.77325238 26,10.4648712 L26,14.7083871 C26,14.8784435 25.9055559,15.0987329 25.7890533,15.2104147 C25.7890533,15.2104147 24.5373893,16.4126202 23.9488702,16.9515733 C22.5015398,18.2770075 21.1191354,19 20.090554,19 C19.0477772,19 17.6172728,18.2608988 16.1128852,16.9142923 C15.5030182,16.3683886 14.3672121,15.3403307 14.3672121,15.3403307 C14.1659605,15.1583364 14.0000086,14.7846305 14.0000192,14.5088473 C14.0000192,14.5088473 14.0000932,12.7539451 14.0001308,10.4647956 C15.1956614,9.77315812 16,8.48051074 16,7 C16,4.790861 14.209139,3 12,3 C9.790861,3 8,4.790861 8,7 C8,8.48056471 8.80439726,9.77325238 10,10.4648712 L10,15.0081969 C10,15.5446944 10.2736352,16.3534183 10.6111812,16.7893819 C10.6111812,16.7893819 13.8599776,21.3779363 18,22.6668724 L18,29.5351288 C16.8043973,30.2267476 16,31.5194353 16,33 C16,35.209139 17.790861,37 20,37 C22.209139,37 24,35.209139 24,33 C24,31.5194353 23.1956027,30.2267476 22,29.5351288 Z M14,7 C14,5.8954305 13.1045695,5 12,5 C10.8954305,5 10,5.8954305 10,7 C10,8.1045695 10.8954305,9 12,9 C13.1045695,9 14,8.1045695 14,7 Z M30,7 C30,5.8954305 29.1045695,5 28,5 C26.8954305,5 26,5.8954305 26,7 C26,8.1045695 26.8954305,9 28,9 C29.1045695,9 30,8.1045695 30,7 Z M22,33 C22,31.8954305 21.1045695,31 20,31 C18.8954305,31 18,31.8954305 18,33 C18,34.1045695 18.8954305,35 20,35 C21.1045695,35 22,34.1045695 22,33 Z"/>
+</svg>