Merge branch '44386-better-ux-for-long-name-branches' into 'master'
Poor UX with branch whose name is very long on Branches Closes #44386 See merge request gitlab-org/gitlab-ce!17832
This commit is contained in:
commit
e3bf4931de
|
@ -1,6 +1,17 @@
|
||||||
|
.content-list > .branch-item,
|
||||||
|
.branch-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.branch-info {
|
||||||
|
flex: auto;
|
||||||
|
min-width: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.divergence-graph {
|
.divergence-graph {
|
||||||
padding: 12px 12px 0 0;
|
padding: 0 6px;
|
||||||
float: right;
|
|
||||||
|
|
||||||
.graph-side {
|
.graph-side {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -53,3 +64,9 @@
|
||||||
background-color: $divergence-graph-separator-bg;
|
background-color: $divergence-graph-separator-bg;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.divergence-graph,
|
||||||
|
.branch-item .controls {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
|
@ -5,81 +5,82 @@
|
||||||
- number_commits_behind = diverging_commit_counts[:behind]
|
- number_commits_behind = diverging_commit_counts[:behind]
|
||||||
- number_commits_ahead = diverging_commit_counts[:ahead]
|
- number_commits_ahead = diverging_commit_counts[:ahead]
|
||||||
- merge_project = can?(current_user, :create_merge_request, @project) ? @project : (current_user && current_user.fork_of(@project))
|
- merge_project = can?(current_user, :create_merge_request, @project) ? @project : (current_user && current_user.fork_of(@project))
|
||||||
%li{ class: "js-branch-#{branch.name}" }
|
%li{ class: "branch-item js-branch-#{branch.name}" }
|
||||||
%div
|
.branch-info
|
||||||
= link_to project_tree_path(@project, branch.name), class: 'item-title str-truncated ref-name' do
|
.branch-title
|
||||||
= sprite_icon('fork', size: 12)
|
= link_to project_tree_path(@project, branch.name), class: 'item-title str-truncated-100 ref-name' do
|
||||||
= branch.name
|
= sprite_icon('fork', size: 12)
|
||||||
|
= branch.name
|
||||||
- if branch.name == @repository.root_ref
|
|
||||||
%span.label.label-primary default
|
- if branch.name == @repository.root_ref
|
||||||
- elsif merged
|
%span.label.label-primary default
|
||||||
%span.label.label-info.has-tooltip{ title: s_('Branches|Merged into %{default_branch}') % { default_branch: @repository.root_ref } }
|
- elsif merged
|
||||||
= s_('Branches|merged')
|
%span.label.label-info.has-tooltip{ title: s_('Branches|Merged into %{default_branch}') % { default_branch: @repository.root_ref } }
|
||||||
|
= s_('Branches|merged')
|
||||||
|
|
||||||
- if protected_branch?(@project, branch)
|
- if protected_branch?(@project, branch)
|
||||||
%span.label.label-success
|
%span.label.label-success
|
||||||
= s_('Branches|protected')
|
= s_('Branches|protected')
|
||||||
.controls.hidden-xs<
|
|
||||||
- if merge_project && create_mr_button?(@repository.root_ref, branch.name)
|
|
||||||
= link_to create_mr_path(@repository.root_ref, branch.name), class: 'btn btn-default' do
|
|
||||||
= _('Merge request')
|
|
||||||
|
|
||||||
- if branch.name != @repository.root_ref
|
.block-truncated
|
||||||
= link_to project_compare_index_path(@project, from: @repository.root_ref, to: branch.name),
|
- if commit
|
||||||
class: "btn btn-default #{'prepend-left-10' unless merge_project}",
|
= render 'projects/branches/commit', commit: commit, project: @project
|
||||||
method: :post,
|
- else
|
||||||
title: s_('Branches|Compare') do
|
= s_('Branches|Cant find HEAD commit for this branch')
|
||||||
= s_('Branches|Compare')
|
|
||||||
|
|
||||||
= render 'projects/buttons/download', project: @project, ref: branch.name, pipeline: @refs_pipelines[branch.name]
|
- if branch.name != @repository.root_ref
|
||||||
|
.divergence-graph{ title: s_('%{number_commits_behind} commits behind %{default_branch}, %{number_commits_ahead} commits ahead') % { number_commits_behind: diverging_count_label(number_commits_behind),
|
||||||
|
default_branch: @repository.root_ref,
|
||||||
|
number_commits_ahead: diverging_count_label(number_commits_ahead) } }
|
||||||
|
.graph-side
|
||||||
|
.bar.bar-behind{ style: "width: #{number_commits_behind * bar_graph_width_factor}%" }
|
||||||
|
%span.count.count-behind= diverging_count_label(number_commits_behind)
|
||||||
|
.graph-separator
|
||||||
|
.graph-side
|
||||||
|
.bar.bar-ahead{ style: "width: #{number_commits_ahead * bar_graph_width_factor}%" }
|
||||||
|
%span.count.count-ahead= diverging_count_label(number_commits_ahead)
|
||||||
|
|
||||||
- if can?(current_user, :push_code, @project)
|
.controls.hidden-xs<
|
||||||
- if branch.name == @project.repository.root_ref
|
- if merge_project && create_mr_button?(@repository.root_ref, branch.name)
|
||||||
%button{ class: "btn btn-remove remove-row js-ajax-loading-spinner has-tooltip disabled",
|
= link_to create_mr_path(@repository.root_ref, branch.name), class: 'btn btn-default' do
|
||||||
disabled: true,
|
= _('Merge request')
|
||||||
title: s_('Branches|The default branch cannot be deleted') }
|
|
||||||
= icon("trash-o")
|
|
||||||
- elsif protected_branch?(@project, branch)
|
|
||||||
- if can?(current_user, :delete_protected_branch, @project)
|
|
||||||
%button{ class: "btn btn-remove remove-row js-ajax-loading-spinner has-tooltip",
|
|
||||||
title: s_('Branches|Delete protected branch'),
|
|
||||||
data: { toggle: "modal",
|
|
||||||
target: "#modal-delete-branch",
|
|
||||||
delete_path: project_branch_path(@project, branch.name),
|
|
||||||
branch_name: branch.name,
|
|
||||||
is_merged: ("true" if merged) } }
|
|
||||||
= icon("trash-o")
|
|
||||||
- else
|
|
||||||
%button{ class: "btn btn-remove remove-row js-ajax-loading-spinner has-tooltip disabled",
|
|
||||||
disabled: true,
|
|
||||||
title: s_('Branches|Only a project master or owner can delete a protected branch') }
|
|
||||||
= icon("trash-o")
|
|
||||||
- else
|
|
||||||
= link_to project_branch_path(@project, branch.name),
|
|
||||||
class: "btn btn-remove remove-row js-ajax-loading-spinner has-tooltip",
|
|
||||||
title: s_('Branches|Delete branch'),
|
|
||||||
method: :delete,
|
|
||||||
data: { confirm: s_("Branches|Deleting the '%{branch_name}' branch cannot be undone. Are you sure?") % { branch_name: branch.name } },
|
|
||||||
remote: true,
|
|
||||||
'aria-label' => s_('Branches|Delete branch') do
|
|
||||||
= icon("trash-o")
|
|
||||||
|
|
||||||
- if branch.name != @repository.root_ref
|
- if branch.name != @repository.root_ref
|
||||||
.divergence-graph{ title: s_('%{number_commits_behind} commits behind %{default_branch}, %{number_commits_ahead} commits ahead') % { number_commits_behind: diverging_count_label(number_commits_behind),
|
= link_to project_compare_index_path(@project, from: @repository.root_ref, to: branch.name),
|
||||||
default_branch: @repository.root_ref,
|
class: "btn btn-default #{'prepend-left-10' unless merge_project}",
|
||||||
number_commits_ahead: diverging_count_label(number_commits_ahead) } }
|
method: :post,
|
||||||
.graph-side
|
title: s_('Branches|Compare') do
|
||||||
.bar.bar-behind{ style: "width: #{number_commits_behind * bar_graph_width_factor}%" }
|
= s_('Branches|Compare')
|
||||||
%span.count.count-behind= diverging_count_label(number_commits_behind)
|
|
||||||
.graph-separator
|
|
||||||
.graph-side
|
|
||||||
.bar.bar-ahead{ style: "width: #{number_commits_ahead * bar_graph_width_factor}%" }
|
|
||||||
%span.count.count-ahead= diverging_count_label(number_commits_ahead)
|
|
||||||
|
|
||||||
|
= render 'projects/buttons/download', project: @project, ref: branch.name, pipeline: @refs_pipelines[branch.name]
|
||||||
|
|
||||||
- if commit
|
- if can?(current_user, :push_code, @project)
|
||||||
= render 'projects/branches/commit', commit: commit, project: @project
|
- if branch.name == @project.repository.root_ref
|
||||||
- else
|
%button{ class: "btn btn-remove remove-row js-ajax-loading-spinner has-tooltip disabled",
|
||||||
%p
|
disabled: true,
|
||||||
= s_('Branches|Cant find HEAD commit for this branch')
|
title: s_('Branches|The default branch cannot be deleted') }
|
||||||
|
= icon("trash-o")
|
||||||
|
- elsif protected_branch?(@project, branch)
|
||||||
|
- if can?(current_user, :delete_protected_branch, @project)
|
||||||
|
%button{ class: "btn btn-remove remove-row js-ajax-loading-spinner has-tooltip",
|
||||||
|
title: s_('Branches|Delete protected branch'),
|
||||||
|
data: { toggle: "modal",
|
||||||
|
target: "#modal-delete-branch",
|
||||||
|
delete_path: project_branch_path(@project, branch.name),
|
||||||
|
branch_name: branch.name,
|
||||||
|
is_merged: ("true" if merged) } }
|
||||||
|
= icon("trash-o")
|
||||||
|
- else
|
||||||
|
%button{ class: "btn btn-remove remove-row js-ajax-loading-spinner has-tooltip disabled",
|
||||||
|
disabled: true,
|
||||||
|
title: s_('Branches|Only a project master or owner can delete a protected branch') }
|
||||||
|
= icon("trash-o")
|
||||||
|
- else
|
||||||
|
= link_to project_branch_path(@project, branch.name),
|
||||||
|
class: "btn btn-remove remove-row js-ajax-loading-spinner has-tooltip",
|
||||||
|
title: s_('Branches|Delete branch'),
|
||||||
|
method: :delete,
|
||||||
|
data: { confirm: s_("Branches|Deleting the '%{branch_name}' branch cannot be undone. Are you sure?") % { branch_name: branch.name } },
|
||||||
|
remote: true,
|
||||||
|
'aria-label' => s_('Branches|Delete branch') do
|
||||||
|
= icon("trash-o")
|
||||||
|
|
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
title: UX re-design branch items with flexbox
|
||||||
|
merge_request: 17832
|
||||||
|
author: Takuya Noguchi
|
||||||
|
type: fixed
|
Loading…
Reference in New Issue