diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue index 6860f3c29c29c878e28c6643156b9b5012233f94..e94f2e0e6d773770fa500eb58585050343c4977f 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 f8710cc1346aba2831c52320c9a1907f9aac4449..fe8c27ae9b6fe76f333631b5a5679e2bba2d1533 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 f921b832c0f56f9d5dcb30a8667cb13c3173119a..981b5e4d92b2892ddb75eb27ad70245e9704f4b5 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 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 ml-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/blob/_header.html.haml b/app/views/projects/blob/_header.html.haml index 7c644013283a33c7e4cacf92a8e93292694ccfda..6d01206a12833622a67f8fb476ce1e61b1252829 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 0f4d9aa638125985ee05a1508de99347c97586d9..b310939c5a361ae8050d1653d4e16f242e410453 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 e9dfda4e92701d891c778c686c3509edef96a486..f732503a23f0ee7021ff48193b8690989e4216b1 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.gl-mr-2 #{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 0000000000000000000000000000000000000000..dff85fca6c576e33fbe892d584db217c0a3de457 --- /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 928755bf5de9970ba7cc0020d171d6316f332a2e..e1865fe2e148f0b4c6871d0efab7f3d66b996958 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')