Backporting CSS fixes for commits.scss from CE

The original MR: https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/27647

Backporting CSS fixes for commits.scss from CE
The original MR: https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/27647
3449413f · Scott Hampton · Filipa Lacerda · 71dc1bea · 3449413f · 3449413f
Commit 3449413f authored May 02, 2019 by Scott Hampton Committed by Filipa Lacerda May 02, 2019
15 changed files
--- a/app/assets/javascripts/diffs/components/commit_item.vue
+++ b/app/assets/javascripts/diffs/components/commit_item.vue
@@ -113,9 +113,10 @@ export default {
        <commit-pipeline-status
          v-if="commit.pipeline_status_path"
          :endpoint="commit.pipeline_status_path"
+          class="d-inline-flex"
        />
        <div class="commit-sha-group">
-          <div class="label label-monospace" v-text="commit.short_id"></div>
+          <div class="label label-monospace monospace" v-text="commit.short_id"></div>
          <clipboard-button
            :text="commit.id"
            :title="__('Copy commit SHA to clipboard')"

--- a/app/assets/javascripts/serverless/components/url.vue
+++ b/app/assets/javascripts/serverless/components/url.vue
@@ -20,7 +20,7 @@ export default {

 <template>
  <div class="clipboard-group">
-    <div class="url-text-field label label-monospace">{{ uri }}</div>
+    <div class="url-text-field label label-monospace monospace">{{ uri }}</div>
    <clipboard-button
      :text="uri"
      :title="s__('ServerlessURL|Copy URL to clipboard')"

--- a/app/assets/javascripts/vue_shared/components/commit.vue
+++ b/app/assets/javascripts/vue_shared/components/commit.vue
@@ -133,7 +133,7 @@ export default {
 };
 </script>
 <template>
-  <div class="branch-commit">
+  <div class="branch-commit cgray">
    <template v-if="shouldShowRefInfo">
      <div class="icon-container">
        <icon v-if="tag" name="tag" />
@@ -174,7 +174,7 @@ export default {
          :tooltip-text="author.username"
          class="avatar-image-container"
        />
-        <gl-link :href="commitUrl" class="commit-row-message"> {{ title }} </gl-link>
+        <gl-link :href="commitUrl" class="commit-row-message cgray"> {{ title }} </gl-link>
      </span>
      <span v-else> Can't find HEAD commit for this branch </span>
    </div>

--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -58,14 +58,6 @@
    display: inline-block;
    vertical-align: middle;

-    .stage-cell .stage-container {
-      margin: 0 3px 3px 0;
-    }
-
-    .stage-container:last-child {
-      margin-right: 0;
-    }
-
    .dropdown-menu {
      margin-top: 11px;
    }
@@ -128,18 +120,9 @@
 }

 .commit-row-title {
-  .notes_count {
-    float: right;
-    margin-right: 10px;
-  }
-
  .str-truncated {
    max-width: 70%;
  }
-
-  .commit-row-message {
-    color: $gl-text-color;
-  }
 }

 .text-expander {
@@ -185,7 +168,7 @@
  flex-grow: 1;
  min-width: 0;

-  .project_namespace {
+  .project-namespace {
    color: $gl-text-color-secondary;
  }
 }
@@ -208,10 +191,6 @@
    }
  }

-  .ci-status-link {
-    display: inline-flex;
-  }
-
  .ci-status-icon svg {
    vertical-align: text-bottom;
  }
@@ -239,7 +218,6 @@
  }

  .label-monospace {
-    @extend .monospace;
    user-select: text;
    color: $gl-text-color;
    background-color: $gray-light;
@@ -266,7 +244,7 @@
 }

 .commit,
-.generic_commit_status {
+.generic-commit-status {
  a,
  button {
    vertical-align: baseline;
@@ -278,37 +256,22 @@
    &.autodevops-badge {
      color: $white-light;
    }
-
-    &.autodevops-link {
-      color: $blue-600;
-    }
  }

  .commit-row-description {
    @extend %commit-description-base;
    display: none;
    flex: 1;
-
-    a {
-      color: $gl-text-color;
-    }
  }

  &.inline-commit {
    .commit-row-title {
      font-size: 13px;
    }
-
-    .committed_ago {
-      @extend .cgray;
-      float: right;
-    }
  }
 }

 .branch-commit {
-  color: $gl-text-color;
-
  .commit-icon {
    text-align: center;
    display: inline-block;
@@ -320,14 +283,15 @@
      fill: $gl-text-color-secondary;
    }
  }
+}

+.commit,
+.generic-commit-status,
+.branch-commit {
+  .autodevops-link,
  .commit-sha {
    color: $blue-600;
  }
-
-  .commit-row-message {
-    color: $gl-text-color;
-  }
 }

 .gpg-status-box {

--- a/app/helpers/ci_status_helper.rb
+++ b/app/helpers/ci_status_helper.rb
@@ -113,7 +113,7 @@ module CiStatusHelper
  end

  def render_status_with_link(type, status, path = nil, tooltip_placement: 'left', cssclass: '', container: 'body', icon_size: 16)
-    klass = "ci-status-link ci-status-icon-#{status.dasherize} #{cssclass}"
+    klass = "ci-status-link ci-status-icon-#{status.dasherize} d-inline-flex #{cssclass}"
    title = "#{type.titleize}: #{ci_label_for_status(status)}"
    data = { toggle: 'tooltip', placement: tooltip_placement, container: container }


--- a/app/views/admin/applications/show.html.haml
+++ b/app/views/admin/applications/show.html.haml
@@ -11,7 +11,7 @@
      %td
        .clipboard-group
          .input-group
-            %input.label.label-monospace{ id: "application_id", type: "text", autocomplete: 'off', value: @application.uid, readonly: true }
+            %input.label.label-monospace.monospace{ id: "application_id", type: "text", autocomplete: 'off', value: @application.uid, readonly: true }
            .input-group-append
              = clipboard_button(target: '#application_id', title: _("Copy ID to clipboard"), class: "btn btn btn-default")
    %tr
@@ -20,7 +20,7 @@
      %td
        .clipboard-group
          .input-group
-            %input.label.label-monospace{ id: "secret", type: "text", autocomplete: 'off', value: @application.secret, readonly: true }
+            %input.label.label-monospace.monospace{ id: "secret", type: "text", autocomplete: 'off', value: @application.secret, readonly: true }
            .input-group-append
              = clipboard_button(target: '#secret', title: _("Copy secret to clipboard"), class: "btn btn btn-default")
    %tr

--- a/app/views/doorkeeper/applications/show.html.haml
+++ b/app/views/doorkeeper/applications/show.html.haml
@@ -14,7 +14,7 @@
      %td
        .clipboard-group
          .input-group
-            %input.label.label-monospace{ id: "application_id", type: "text", autocomplete: 'off', value: @application.uid, readonly: true }
+            %input.label.label-monospace.monospace{ id: "application_id", type: "text", autocomplete: 'off', value: @application.uid, readonly: true }
            .input-group-append
              = clipboard_button(target: '#application_id', title: _("Copy ID to clipboard"), class: "btn btn btn-default")
    %tr
@@ -23,7 +23,7 @@
      %td
        .clipboard-group
          .input-group
-            %input.label.label-monospace{ id: "secret", type: "text", autocomplete: 'off', value: @application.secret, readonly: true }
+            %input.label.label-monospace.monospace{ id: "secret", type: "text", autocomplete: 'off', value: @application.secret, readonly: true }
            .input-group-append
              = clipboard_button(target: '#secret', title: _("Copy secret to clipboard"), class: "btn btn btn-default")
    %tr

--- a/app/views/projects/branches/_commit.html.haml
+++ b/app/views/projects/branches/_commit.html.haml
-.branch-commit
+.branch-commit.cgray
  .icon-container.commit-icon
    = custom_icon("icon_commit")
  = link_to commit.short_id, project_commit_path(project, commit.id), class: "commit-sha"
  &middot;
  %span.str-truncated
-    = link_to_markdown commit.title, project_commit_path(project, commit.id), class: "commit-row-message"
+    = link_to_markdown commit.title, project_commit_path(project, commit.id), class: "commit-row-message cgray"
  &middot;
  #{time_ago_with_tooltip(commit.committed_date)}
--- a/app/views/projects/ci/builds/_build.html.haml
+++ b/app/views/projects/ci/builds/_build.html.haml
@@ -12,7 +12,7 @@
  %td.status
    = render "ci/status/badge", status: job.detailed_status(current_user), title: job.status_title

-  %td.branch-commit
+  %td.branch-commit.cgray
    - if can?(current_user, :read_build, job)
      = link_to project_job_path(job.project, job) do
        %span.build-link ##{job.id}

--- a/app/views/projects/commits/_commit.html.haml
+++ b/app/views/projects/commits/_commit.html.haml
@@ -37,7 +37,7 @@
        - commit_text =  _('%{commit_author_link} authored %{commit_timeago}') % { commit_author_link: commit_author_link, commit_timeago: commit_timeago }
        #{ commit_text.html_safe }
      - if show_project_name
-        %span.project_namespace
+        %span.project-namespace
          = project.full_name

      - if commit.description?
@@ -56,7 +56,7 @@
      .js-commit-pipeline-status{ data: { endpoint: pipelines_project_commit_path(project, commit.id, ref: ref) } }

      .commit-sha-group.d-none.d-sm-flex
-        .label.label-monospace
+        .label.label-monospace.monospace
          = commit.short_id
        = clipboard_button(text: commit.id, title: _("Copy commit SHA to clipboard"), class: "btn btn-default", container: "body")
        = link_to_browse_code(project, commit)
--- a/app/views/projects/commits/_inline_commit.html.haml
+++ b/app/views/projects/commits/_inline_commit.html.haml
@@ -3,6 +3,6 @@
    = link_to commit.short_id, project_commit_path(project, commit), class: "commit-sha"
    &nbsp;
    %span.str-truncated
-      = link_to_markdown_field(commit, :title, project_commit_path(project, commit.id), class: "commit-row-message")
+      = link_to_markdown_field(commit, :title, project_commit_path(project, commit.id), class: "commit-row-message cgray")
    .float-right
      #{time_ago_with_tooltip(commit.committed_date)}
--- a/app/views/projects/deployments/_commit.html.haml
+++ b/app/views/projects/deployments/_commit.html.haml
 .table-mobile-content
-  .branch-commit
+  .branch-commit.cgray
    - if deployment.ref
      %span.icon-container
        = deployment.tag? ? icon('tag') : sprite_icon('fork', css_class: 'sprite')
@@ -12,6 +12,6 @@
      %span.flex-truncate-child
        - if commit_title = deployment.commit_title
          = author_avatar(deployment.commit, size: 20)
-          = link_to_markdown commit_title, project_commit_path(@project, deployment.sha), class: "commit-row-message"
+          = link_to_markdown commit_title, project_commit_path(@project, deployment.sha), class: "commit-row-message cgray"
        - else
          = _("Can't find HEAD commit for this branch")
--- a/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml
+++ b/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml
@@ -5,11 +5,11 @@
 - pipeline_link = local_assigns.fetch(:pipeline_link, false)
 - stage = local_assigns.fetch(:stage, false)

-%tr.generic_commit_status{ class: ('retried' if retried) }
+%tr.generic-commit-status{ class: ('retried' if retried) }
  %td.status
    = render 'ci/status/badge', status: generic_commit_status.detailed_status(current_user)

-  %td.generic_commit_status-link
+  %td.generic-commit-status-link
    - if can?(current_user, :read_commit_status, generic_commit_status) && generic_commit_status.target_url
      = link_to generic_commit_status.target_url do
        %span.build-link ##{generic_commit_status.id}

--- a/app/views/shared/_mini_pipeline_graph.html.haml
+++ b/app/views/shared/_mini_pipeline_graph.html.haml
@@ -4,7 +4,7 @@
      - detailed_status = stage.detailed_status(current_user)
      - icon_status = "#{detailed_status.icon}_borderless"

-      .stage-container.dropdown{ class: klass }
+      .stage-container.mt-0.ml-1.dropdown{ class: klass }
        %button.mini-pipeline-graph-dropdown-toggle.has-tooltip.js-builds-dropdown-button{ class: "ci-status-icon-#{detailed_status.group}", type: 'button', data: { toggle: 'dropdown', title: "#{stage.name}: #{detailed_status.label}", placement: 'top', "stage-endpoint" => stage_ajax_project_pipeline_path(pipeline.project, pipeline, stage: stage.name) } }
          = sprite_icon(icon_status)


--- a/ee/spec/features/search/elastic/global_search_spec.rb
+++ b/ee/spec/features/search/elastic/global_search_spec.rb
@@ -117,7 +117,7 @@ describe 'Global elastic search' do
      select_filter("Commits")

      expect(page).to have_selector('.commit-row-description')
-      expect(page).to have_selector('.project_namespace')
+      expect(page).to have_selector('.project-namespace')
    end
  end
 end