kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Move swipe diff border to the right

Browse source 
In the Vue image diff app, the border needs to be on the right because
the new image comes in from the left. The old image diff app which is
used in commits and compare views had the new image visible by default
and hiding away from the left.
This commit is contained in:
ftab 2019-04-04 08:29:26 +00:00 committed by Phil Hughes
parent 064dd7aa2f
commit f2343100a1
2 changed files with 8 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/assets/stylesheets/pages/diff.scss
View file

@ -154,11 +154,17 @@
.swipe-wrap { .swipe-wrap {
overflow: hidden; overflow: hidden;
border-left: 1px solid $gl-gray-400; border-right: 1px solid $gl-gray-400;
position: absolute; position: absolute;
display: block; display: block;
top: 13px; top: 13px;
right: 7px; right: 7px;
&.left-oriented {
/* only for commit view (different swipe viewer) */
border-right: 0;
border-left: 1px solid $gl-gray-400;
}
} }
.swipe-bar { .swipe-bar {

2
app/views/projects/diffs/_replaced_image_diff.html.haml
View file

@ -37,7 +37,7 @@
.swipe-frame .swipe-frame
.frame.deleted .frame.deleted
= image_tag(old_blob_raw_url, alt: diff_file.old_path, lazy: false) = image_tag(old_blob_raw_url, alt: diff_file.old_path, lazy: false)
.swipe-wrap .swipe-wrap.left-oriented
= render partial: "projects/diffs/image_diff_frame", locals: { class_name: "added js-image-frame #{class_name}", position: position, note_type: DiffNote.name, image_path: blob_raw_url, alt: diff_file.new_path } = render partial: "projects/diffs/image_diff_frame", locals: { class_name: "added js-image-frame #{class_name}", position: position, note_type: DiffNote.name, image_path: blob_raw_url, alt: diff_file.new_path }
%span.swipe-bar %span.swipe-bar
%span.top-handle %span.top-handle