Commit 97016e76 authored by Kushal Pandya's avatar Kushal Pandya

Merge branch 'move-link-icon-to-css' into 'master'

Move link icon to CSS

See merge request gitlab-org/gitlab!56980
parents 204e0c02 8864dc07
@import '../framework/variables';
@import './conflict_colors';
@import 'page_bundles/mixins_and_variables_and_functions';
@mixin diff-background($background, $idiff, $border) {
background: $background;
......@@ -93,3 +94,30 @@
}
}
}
@mixin line-number-link($color) {
&::before {
@include gl-visibility-hidden;
@include gl-display-inline-block;
@include gl-align-self-center;
@include gl-mt-2;
@include gl-mr-2;
@include gl-w-4;
@include gl-h-4;
@include gl-float-left;
background-color: $color;
mask-image: asset_url('icons-stacked.svg#link');
mask-repeat: no-repeat;
mask-size: cover;
mask-position: center;
content: '';
}
&:hover::before {
@include gl-visibility-visible;
}
&:focus::before {
@include gl-visibility-visible;
}
}
......@@ -90,6 +90,10 @@ $dark-il: #de935f;
.code.dark {
// Line numbers
.file-line-num {
@include line-number-link($dark-line-num-color);
}
.line-numbers,
.diff-line-num {
background-color: $dark-main-bg;
......
......@@ -91,6 +91,10 @@ $monokai-gh: #75715e;
.code.monokai {
// Line numbers
.file-line-num {
@include line-number-link($monokai-line-num-color);
}
.line-numbers,
.diff-line-num {
background-color: $monokai-bg;
......
......@@ -11,6 +11,10 @@
.code.none {
// Line numbers
.file-line-num {
@include line-number-link($black-transparent);
}
.line-numbers,
.diff-line-num {
background-color: $gray-light;
......
......@@ -94,6 +94,10 @@ $solarized-dark-il: #2aa198;
.code.solarized-dark {
// Line numbers
.file-line-num {
@include line-number-link($solarized-dark-line-color);
}
.line-numbers,
.diff-line-num {
background-color: $solarized-dark-line-bg;
......
......@@ -101,6 +101,10 @@ $solarized-light-il: #2aa198;
.code.solarized-light {
// Line numbers
.file-line-num {
@include line-number-link($solarized-light-line-color);
}
.line-numbers,
.diff-line-num {
background-color: $solarized-light-line-bg;
......
......@@ -78,6 +78,10 @@ $white-gc-bg: #eaf2f5;
}
// Line numbers
.file-line-num {
@include line-number-link($black-transparent);
}
.line-numbers,
.diff-line-num {
background-color: $gray-light;
......
......@@ -2,13 +2,11 @@
- offset = defined?(first_line_number) ? first_line_number : 1
.line-numbers
- if blob.data.present?
- link_icon = sprite_icon('link', size: 12)
- link = blob_link if defined?(blob_link)
- blob.data.each_line.each_with_index do |_, index|
- i = index + offset
-# We're not using `link_to` because it is too slow once we get to thousands of lines.
%a.diff-line-num{ href: "#{link}#L#{i}", id: "L#{i}", 'data-line-number' => i }
= link_icon
%a.file-line-num.diff-line-num{ href: "#{link}#L#{i}", id: "L#{i}", 'data-line-number' => i }
= i
- highlight = defined?(highlight_line) && highlight_line ? highlight_line - offset : nil
.blob-content{ data: { blob_id: blob.id, path: blob.path, highlight_line: highlight, qa_selector: 'file_content' } }
......
---
title: Move link icon to CSS
merge_request: 56980
author:
type: performance
......@@ -44,17 +44,6 @@ RSpec.describe 'Blob button line permalinks (BlobLinePermalinkUpdater)', :js do
expect(find('.js-data-file-blob-permalink-url')['href']).to eq(get_absolute_url(project_blob_path(project, tree_join(sha, path), anchor: ending_fragment)))
end
it 'changes fragment hash if icon inside line number link is clicked' do
ending_fragment = "L7"
visit_blob
find("##{ending_fragment}").hover
find("##{ending_fragment} svg").click
expect(find('.js-data-file-blob-permalink-url')['href']).to eq(get_absolute_url(project_blob_path(project, tree_join(sha, path), anchor: ending_fragment)))
end
it 'with initial fragment hash, changes fragment hash if line number clicked' do
fragment = "L1"
ending_fragment = "L5"
......@@ -94,17 +83,6 @@ RSpec.describe 'Blob button line permalinks (BlobLinePermalinkUpdater)', :js do
expect(find('.js-blob-blame-link')['href']).to eq(get_absolute_url(project_blame_path(project, tree_join('master', path), anchor: ending_fragment)))
end
it 'changes fragment hash if icon inside line number link is clicked' do
ending_fragment = "L7"
visit_blob
find("##{ending_fragment}").hover
find("##{ending_fragment} svg").click
expect(find('.js-blob-blame-link')['href']).to eq(get_absolute_url(project_blame_path(project, tree_join('master', path), anchor: ending_fragment)))
end
it 'with initial fragment hash, changes fragment hash if line number clicked' do
fragment = "L1"
ending_fragment = "L5"
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment