From 2940c918ebeeb47b09a47df1d3d01cec3cd51e54 Mon Sep 17 00:00:00 2001 From: Samantha Ming Date: Wed, 28 Oct 2020 20:33:48 -0700 Subject: [PATCH 1/2] Make files header responsive Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/218666 --- .../diffs/components/diff_file_header.vue | 8 ++-- app/assets/stylesheets/framework/files.scss | 37 +++---------------- app/helpers/blob_helper.rb | 4 +- app/views/projects/blob/_header.html.haml | 2 +- .../projects/blob/_header_content.html.haml | 2 +- .../projects/diffs/_file_header.html.haml | 8 ++-- .../218666-show-lsf-for-long-name.yml | 5 +++ .../merge_request/user_views_diffs_spec.rb | 2 +- 8 files changed, 24 insertions(+), 44 deletions(-) create mode 100644 changelogs/unreleased/218666-show-lsf-for-long-name.yml diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue index 6860f3c29c29c8..e94f2e0e6d7737 100644 --- a/app/assets/javascripts/diffs/components/diff_file_header.vue +++ b/app/assets/javascripts/diffs/components/diff_file_header.vue @@ -213,7 +213,7 @@ export default { class="js-file-title file-title file-title-flex-parent" @click.self="handleToggleFile" > -
+
@@ -280,12 +280,12 @@ export default { {{ diffFile.a_mode }} → {{ diffFile.b_mode }} - {{ __('LFS') }} + {{ __('LFS') }}
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss index f8710cc1346aba..fe8c27ae9b6fe7 100644 --- a/app/assets/stylesheets/framework/files.scss +++ b/app/assets/stylesheets/framework/files.scss @@ -45,11 +45,6 @@ } .file-actions { - position: absolute; - top: 5px; - right: 15px; - margin-left: auto; - .btn:not(.btn-icon) { padding: 0 10px; font-size: 13px; @@ -342,30 +337,14 @@ span.idiff { padding: $gl-padding-8 $gl-padding; margin: 0; border-radius: $border-radius-default $border-radius-default 0 0; - } - - .file-header-content { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - padding-right: 30px; - position: relative; - width: auto; - - @media (max-width: map-get($grid-breakpoints, sm)-1) { - width: 100%; - } - } - .file-holder & { - .file-actions { - position: static; + @include media-breakpoint-up(md) { + flex-wrap: nowrap; } } - .btn-clipboard { - position: absolute; - right: 0; + .file-header-content { + padding-right: 30px; } a { @@ -384,15 +363,11 @@ span.idiff { z-index: 2; } - @include media-breakpoint-down(xs) { + @include media-breakpoint-down(sm) { display: block; .file-actions { - white-space: normal; - - .btn-group { - padding-top: 5px; - } + margin-top: 5px; } } } diff --git a/app/helpers/blob_helper.rb b/app/helpers/blob_helper.rb index f921b832c0f56f..593a315015f8a2 100644 --- a/app/helpers/blob_helper.rb +++ b/app/helpers/blob_helper.rb @@ -68,7 +68,7 @@ def encode_ide_path(path) def edit_blob_button(project = @project, ref = @ref, path = @path, options = {}) return unless blob = readable_blob(options, path, project, ref) - common_classes = "btn btn-primary js-edit-blob ml-2 #{options[:extra_class]}" + common_classes = "btn btn-primary js-edit-blob mr-2 #{options[:extra_class]}" data = { track_event: 'click_edit', track_label: 'Edit' } if Feature.enabled?(:web_ide_primary_edit, project.group) @@ -88,7 +88,7 @@ def edit_blob_button(project = @project, ref = @ref, path = @path, options = {}) def ide_edit_button(project = @project, ref = @ref, path = @path, blob:) return unless blob - common_classes = 'btn btn-primary ide-edit-button ml-2' + common_classes = 'btn btn-primary ide-edit-button mr-2' data = { track_event: 'click_edit_ide', track_label: 'Web IDE' } unless Feature.enabled?(:web_ide_primary_edit, project.group) diff --git a/app/views/projects/blob/_header.html.haml b/app/views/projects/blob/_header.html.haml index 7c644013283a33..6d01206a128336 100644 --- a/app/views/projects/blob/_header.html.haml +++ b/app/views/projects/blob/_header.html.haml @@ -2,7 +2,7 @@ .js-file-title.file-title-flex-parent = render 'projects/blob/header_content', blob: blob - .file-actions< + .file-actions.gl-display-flex.gl-flex-fill-1.gl-align-self-start.gl-md-justify-content-end< = render 'projects/blob/viewer_switcher', blob: blob unless blame - if Feature.enabled?(:consolidated_edit_button, @project) = render 'shared/web_ide_button', blob: blob diff --git a/app/views/projects/blob/_header_content.html.haml b/app/views/projects/blob/_header_content.html.haml index 0f4d9aa6381259..b310939c5a361a 100644 --- a/app/views/projects/blob/_header_content.html.haml +++ b/app/views/projects/blob/_header_content.html.haml @@ -1,7 +1,7 @@ .file-header-content = blob_icon blob.mode, blob.name - %strong.file-title-name{ data: { qa_selector: 'file_name_content' } } + %strong.file-title-name.gl-word-break-all{ data: { qa_selector: 'file_name_content' } } = blob.name = copy_file_path_button(blob.path) diff --git a/app/views/projects/diffs/_file_header.html.haml b/app/views/projects/diffs/_file_header.html.haml index e9dfda4e92701d..728fb3169e5952 100644 --- a/app/views/projects/diffs/_file_header.html.haml +++ b/app/views/projects/diffs/_file_header.html.haml @@ -18,13 +18,13 @@ - if diff_file.renamed_file? - old_path, new_path = mark_inline_diffs(diff_file.old_path, diff_file.new_path) - %strong.file-title-name.has-tooltip{ data: { title: diff_file.old_path, container: 'body' } } + %strong.file-title-name.has-tooltip.gl-word-break-all{ data: { title: diff_file.old_path, container: 'body' } } = old_path → - %strong.file-title-name.has-tooltip{ data: { title: diff_file.new_path, container: 'body' } } + %strong.file-title-name.has-tooltip.gl-word-break-all{ data: { title: diff_file.new_path, container: 'body' } } = new_path - else - %strong.file-title-name.has-tooltip{ data: { title: diff_file.file_path, container: 'body' } } + %strong.file-title-name.has-tooltip.gl-word-break-all{ data: { title: diff_file.file_path, container: 'body' } } = diff_file.file_path - if diff_file.deleted_file? @@ -33,7 +33,7 @@ = copy_file_path_button(diff_file.file_path) - if diff_file.mode_changed? - %small + %small.mr-1 #{diff_file.a_mode} → #{diff_file.b_mode} - if diff_file.stored_externally? && diff_file.external_storage == :lfs diff --git a/changelogs/unreleased/218666-show-lsf-for-long-name.yml b/changelogs/unreleased/218666-show-lsf-for-long-name.yml new file mode 100644 index 00000000000000..dff85fca6c576e --- /dev/null +++ b/changelogs/unreleased/218666-show-lsf-for-long-name.yml @@ -0,0 +1,5 @@ +--- +title: Make files header responsive and remove truncate name +merge_request: 46406 +author: +type: changed diff --git a/spec/features/merge_request/user_views_diffs_spec.rb b/spec/features/merge_request/user_views_diffs_spec.rb index 928755bf5de997..e1865fe2e148f0 100644 --- a/spec/features/merge_request/user_views_diffs_spec.rb +++ b/spec/features/merge_request/user_views_diffs_spec.rb @@ -61,7 +61,7 @@ end it 'expands all diffs' do - first('.js-file-title').click + first('.diff-toggle-caret').click expect(page).to have_button('Expand all') -- GitLab From 9ffde4e19844ada1f322e469afe6cb9e129256aa Mon Sep 17 00:00:00 2001 From: Samantha Ming Date: Wed, 4 Nov 2020 23:32:47 +0000 Subject: [PATCH 2/2] Apply 3 suggestion(s) to 2 file(s) --- app/helpers/blob_helper.rb | 4 ++-- app/views/projects/diffs/_file_header.html.haml | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/helpers/blob_helper.rb b/app/helpers/blob_helper.rb index 593a315015f8a2..981b5e4d92b289 100644 --- a/app/helpers/blob_helper.rb +++ b/app/helpers/blob_helper.rb @@ -68,7 +68,7 @@ def encode_ide_path(path) def edit_blob_button(project = @project, ref = @ref, path = @path, options = {}) return unless blob = readable_blob(options, path, project, ref) - common_classes = "btn btn-primary js-edit-blob mr-2 #{options[:extra_class]}" + common_classes = "btn btn-primary js-edit-blob gl-mr-3 #{options[:extra_class]}" data = { track_event: 'click_edit', track_label: 'Edit' } if Feature.enabled?(:web_ide_primary_edit, project.group) @@ -88,7 +88,7 @@ def edit_blob_button(project = @project, ref = @ref, path = @path, options = {}) def ide_edit_button(project = @project, ref = @ref, path = @path, blob:) return unless blob - common_classes = 'btn btn-primary ide-edit-button mr-2' + common_classes = 'btn btn-primary ide-edit-button gl-mr-3' data = { track_event: 'click_edit_ide', track_label: 'Web IDE' } unless Feature.enabled?(:web_ide_primary_edit, project.group) diff --git a/app/views/projects/diffs/_file_header.html.haml b/app/views/projects/diffs/_file_header.html.haml index 728fb3169e5952..f732503a23f0ee 100644 --- a/app/views/projects/diffs/_file_header.html.haml +++ b/app/views/projects/diffs/_file_header.html.haml @@ -33,7 +33,7 @@ = copy_file_path_button(diff_file.file_path) - if diff_file.mode_changed? - %small.mr-1 + %small.gl-mr-2 #{diff_file.a_mode} → #{diff_file.b_mode} - if diff_file.stored_externally? && diff_file.external_storage == :lfs -- GitLab