Commit 5d9585d1 authored by Phil Hughes's avatar Phil Hughes

Merge branch '40543-generalize-detail-page-headers' into 'master'

Generalize detail page headers (Issues, Merge Requests, Snippets)

Closes #40543

See merge request gitlab-org/gitlab-ce!15639
parents 29c243b0 6d61b404
...@@ -129,7 +129,7 @@ import { addDelimiter } from './lib/utils/text_utility'; ...@@ -129,7 +129,7 @@ import { addDelimiter } from './lib/utils/text_utility';
}; };
MergeRequest.prototype.hideCloseButton = function() { MergeRequest.prototype.hideCloseButton = function() {
const el = document.querySelector('.merge-request .issuable-actions'); const el = document.querySelector('.merge-request .js-issuable-actions');
const closeDropdownItem = el.querySelector('li.close-item'); const closeDropdownItem = el.querySelector('li.close-item');
if (closeDropdownItem) { if (closeDropdownItem) {
closeDropdownItem.classList.add('hidden'); closeDropdownItem.classList.add('hidden');
......
...@@ -13,6 +13,41 @@ ...@@ -13,6 +13,41 @@
.author_link { .author_link {
white-space: nowrap; white-space: nowrap;
} }
@media (max-width: $screen-xs-max) {
display: block;
}
}
.detail-page-header-body {
position: relative;
line-height: 35px;
display: flex;
flex-grow: 1;
@media (min-width: $screen-sm-min) {
padding-left: 0;
padding-right: 0;
}
}
.detail-page-header-actions {
@include new-style-dropdown;
align-self: center;
flex-shrink: 0;
flex: 0 0 auto;
@media (max-width: $screen-xs-max) {
width: 100%;
margin-top: 10px;
> .issue-btn-group {
> .btn {
width: 100%;
}
}
}
} }
.detail-page-description { .detail-page-description {
......
...@@ -624,50 +624,16 @@ ...@@ -624,50 +624,16 @@
margin-top: 0; margin-top: 0;
height: auto; height: auto;
align-self: center; align-self: center;
@media (max-width: $screen-xs-max) {
position: absolute;
top: 0;
left: 0;
}
}
.issuable-header {
position: relative;
padding-left: 45px;
padding-right: 45px;
line-height: 35px;
display: flex;
flex-grow: 1;
@media (min-width: $screen-sm-min) {
float: left;
padding-left: 0;
padding-right: 0;
}
}
.issuable-actions {
@include new-style-dropdown;
align-self: center;
flex-shrink: 0;
flex: 0 0 auto;
@media (min-width: $screen-sm-min) {
float: right;
}
} }
.issuable-gutter-toggle { .issuable-gutter-toggle {
@media (max-width: $screen-sm-max) { @media (max-width: $screen-sm-max) {
position: absolute; margin-left: $btn-side-margin;
top: 0;
right: 0;
} }
} }
.issuable-meta { .issuable-meta {
flex: 1;
display: inline-block; display: inline-block;
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
......
...@@ -134,26 +134,11 @@ ul.related-merge-requests > li { ...@@ -134,26 +134,11 @@ ul.related-merge-requests > li {
} }
@media (max-width: $screen-xs-max) { @media (max-width: $screen-xs-max) {
.detail-page-header, .detail-page-header {
.issuable-header {
display: block;
.issuable-meta { .issuable-meta {
line-height: 18px; line-height: 18px;
} }
} }
.issuable-actions {
margin-top: 10px;
.issue-btn-group {
width: 100%;
.btn {
width: 100%;
}
}
}
} }
.issue-form { .issue-form {
......
...@@ -12,8 +12,8 @@ ...@@ -12,8 +12,8 @@
- can_update_issue = can?(current_user, :update_issue, @issue) - can_update_issue = can?(current_user, :update_issue, @issue)
- can_report_spam = @issue.submittable_as_spam_by?(current_user) - can_report_spam = @issue.submittable_as_spam_by?(current_user)
.clearfix.detail-page-header .detail-page-header
.issuable-header .detail-page-header-body
.issuable-status-box.status-box.status-box-closed{ class: issue_button_visibility(@issue, false) } .issuable-status-box.status-box.status-box-closed{ class: issue_button_visibility(@issue, false) }
= icon('check', class: "hidden-sm hidden-md hidden-lg") = icon('check', class: "hidden-sm hidden-md hidden-lg")
%span.hidden-xs %span.hidden-xs
...@@ -22,9 +22,6 @@ ...@@ -22,9 +22,6 @@
= icon('circle-o', class: "hidden-sm hidden-md hidden-lg") = icon('circle-o', class: "hidden-sm hidden-md hidden-lg")
%span.hidden-xs Open %span.hidden-xs Open
%a.btn.btn-default.pull-right.visible-xs-block.gutter-toggle.issuable-gutter-toggle.js-sidebar-toggle{ href: "#" }
= icon('angle-double-left')
.issuable-meta .issuable-meta
- if @issue.confidential - if @issue.confidential
.issuable-warning-icon.inline= sprite_icon('eye-slash', size: 16, css_class: 'icon') .issuable-warning-icon.inline= sprite_icon('eye-slash', size: 16, css_class: 'icon')
...@@ -32,7 +29,10 @@ ...@@ -32,7 +29,10 @@
.issuable-warning-icon.inline= sprite_icon('lock', size: 16, css_class: 'icon') .issuable-warning-icon.inline= sprite_icon('lock', size: 16, css_class: 'icon')
= issuable_meta(@issue, @project, "Issue") = issuable_meta(@issue, @project, "Issue")
.issuable-actions.js-issuable-actions %a.btn.btn-default.pull-right.visible-xs-block.gutter-toggle.issuable-gutter-toggle.js-sidebar-toggle{ href: "#" }
= icon('angle-double-left')
.detail-page-header-actions.js-issuable-actions
.clearfix.issue-btn-group.dropdown .clearfix.issue-btn-group.dropdown
%button.btn.btn-default.pull-left.hidden-md.hidden-lg{ type: "button", data: { toggle: "dropdown" } } %button.btn.btn-default.pull-left.hidden-md.hidden-lg{ type: "button", data: { toggle: "dropdown" } }
Options Options
......
...@@ -4,22 +4,22 @@ ...@@ -4,22 +4,22 @@
.alert.alert-danger .alert.alert-danger
%p The source project of this merge request has been removed. %p The source project of this merge request has been removed.
.clearfix.detail-page-header .detail-page-header
.issuable-header .detail-page-header-body
.issuable-status-box.status-box{ class: status_box_class(@merge_request) } .issuable-status-box.status-box{ class: status_box_class(@merge_request) }
= icon(@merge_request.state_icon_name, class: "hidden-sm hidden-md hidden-lg") = icon(@merge_request.state_icon_name, class: "hidden-sm hidden-md hidden-lg")
%span.hidden-xs %span.hidden-xs
= @merge_request.state_human_name = @merge_request.state_human_name
%a.btn.btn-default.pull-right.visible-xs-block.gutter-toggle.issuable-gutter-toggle.js-sidebar-toggle{ href: "#" }
= icon('angle-double-left')
.issuable-meta .issuable-meta
- if @merge_request.discussion_locked? - if @merge_request.discussion_locked?
.issuable-warning-icon.inline= sprite_icon('lock', size: 16, css_class: 'icon') .issuable-warning-icon.inline= sprite_icon('lock', size: 16, css_class: 'icon')
= issuable_meta(@merge_request, @project, "Merge request") = issuable_meta(@merge_request, @project, "Merge request")
.issuable-actions.js-issuable-actions %a.btn.btn-default.pull-right.visible-xs-block.gutter-toggle.issuable-gutter-toggle.js-sidebar-toggle{ href: "#" }
= icon('angle-double-left')
.detail-page-header-actions.js-issuable-actions
.clearfix.issue-btn-group.dropdown .clearfix.issue-btn-group.dropdown
%button.btn.btn-default.pull-left.hidden-md.hidden-lg{ type: "button", data: { toggle: "dropdown" } } %button.btn.btn-default.pull-left.hidden-md.hidden-lg{ type: "button", data: { toggle: "dropdown" } }
Options Options
......
.detail-page-header.clearfix .detail-page-header
.snippet-box.has-tooltip.inline.append-right-5{ title: snippet_visibility_level_description(@snippet.visibility_level, @snippet), data: { container: "body" } } .detail-page-header-body
%span.sr-only .snippet-box.has-tooltip.inline.append-right-5{ title: snippet_visibility_level_description(@snippet.visibility_level, @snippet), data: { container: "body" } }
= visibility_level_label(@snippet.visibility_level) %span.sr-only
= visibility_level_icon(@snippet.visibility_level, fw: false) = visibility_level_label(@snippet.visibility_level)
%span.creator = visibility_level_icon(@snippet.visibility_level, fw: false)
Authored %span.creator
= time_ago_with_tooltip(@snippet.created_at, placement: 'bottom', html_class: 'snippet_updated_ago') Authored
by #{link_to_member(@project, @snippet.author, size: 24, author_class: "author item-title", avatar_class: "hidden-xs")} = time_ago_with_tooltip(@snippet.created_at, placement: 'bottom', html_class: 'snippet_updated_ago')
by #{link_to_member(@project, @snippet.author, size: 24, author_class: "author item-title", avatar_class: "hidden-xs")}
.snippet-actions .detail-page-header-actions
- if @snippet.project_id? - if @snippet.project_id?
= render "projects/snippets/actions" = render "projects/snippets/actions"
- else - else
......
...@@ -32,7 +32,7 @@ feature 'issuable templates', :js do ...@@ -32,7 +32,7 @@ feature 'issuable templates', :js do
message: 'added issue template', message: 'added issue template',
branch_name: 'master') branch_name: 'master')
visit project_issue_path project, issue visit project_issue_path project, issue
page.within('.content .issuable-actions') do page.within('.js-issuable-actions') do
click_on 'Edit' click_on 'Edit'
end end
fill_in :'issuable-title', with: 'test issue title' fill_in :'issuable-title', with: 'test issue title'
...@@ -77,7 +77,7 @@ feature 'issuable templates', :js do ...@@ -77,7 +77,7 @@ feature 'issuable templates', :js do
message: 'added issue template', message: 'added issue template',
branch_name: 'master') branch_name: 'master')
visit project_issue_path project, issue visit project_issue_path project, issue
page.within('.content .issuable-actions') do page.within('.js-issuable-actions') do
click_on 'Edit' click_on 'Edit'
end end
fill_in :'issuable-title', with: 'test issue title' fill_in :'issuable-title', with: 'test issue title'
......
...@@ -63,7 +63,7 @@ import IssuablesHelper from '~/helpers/issuables_helper'; ...@@ -63,7 +63,7 @@ import IssuablesHelper from '~/helpers/issuables_helper';
describe('merge request of another user', () => { describe('merge request of another user', () => {
beforeEach(() => { beforeEach(() => {
loadFixtures('merge_requests/merge_request_with_task_list.html.raw'); loadFixtures('merge_requests/merge_request_with_task_list.html.raw');
this.el = document.querySelector('.merge-request .issuable-actions'); this.el = document.querySelector('.js-issuable-actions');
const merge = new MergeRequest(); const merge = new MergeRequest();
merge.hideCloseButton(); merge.hideCloseButton();
}); });
...@@ -83,7 +83,7 @@ import IssuablesHelper from '~/helpers/issuables_helper'; ...@@ -83,7 +83,7 @@ import IssuablesHelper from '~/helpers/issuables_helper';
describe('merge request of current_user', () => { describe('merge request of current_user', () => {
beforeEach(() => { beforeEach(() => {
loadFixtures('merge_requests/merge_request_of_current_user.html.raw'); loadFixtures('merge_requests/merge_request_of_current_user.html.raw');
this.el = document.querySelector('.merge-request .issuable-actions'); this.el = document.querySelector('.js-issuable-actions');
const merge = new MergeRequest(); const merge = new MergeRequest();
merge.hideCloseButton(); merge.hideCloseButton();
}); });
......
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