Skip to content

G
gitlab-ce
Commit 8dfa0a76 authored by Jacob Schatz's avatar Jacob Schatz
Browse files
Options

Merge branch 'improved-issue-sidebar' into 'master' 

Improved issue sidebar

Updated the spacing throughout the sidebar so that it fits better on smaller screens. Also adds a more participants button to show any other participants after the first row.

Closes #13353

See merge request !3097
parents e877cfda b2e673e5
Hide whitespace changes
Inline Side-by-side
Showing with 145 additions and 89 deletions
app/assets/javascripts/issue.js.coffee
View file @ 8dfa0a76
......@@ -7,6 +7,7 @@ class @Issue
# Prevent duplicate event bindings
@disableTaskList()
@fixAffixScroll()
@initParticipants()
if $('a.btn-close').length
@initTaskList()
@initIssueBtnEventListeners()
......@@ -84,3 +85,27 @@ class @Issue
type: 'PATCH'
url: $('form.js-issuable-update').attr('action')
data: patchData
initParticipants: ->
_this = @
$(document).on "click", ".js-participants-more", @toggleHiddenParticipants
$(".js-participants-author").each (i) ->
if i >= _this.PARTICIPANTS_ROW_COUNT
$(@)
.addClass "js-participants-hidden"
.hide()
toggleHiddenParticipants: (e) ->
e.preventDefault()
currentText = $(this).text().trim()
lessText = $(this).data("less-text")
originalText = $(this).data("original-text")
if currentText is originalText
$(this).text(lessText)
else
$(this).text(originalText)
$(".js-participants-hidden").toggle()
app/assets/stylesheets/pages/issuable.scss
View file @ 8dfa0a76
@media (max-width: $screen-sm-max) {
.issuable-affix {
margin-top: 20px;
}
}
@media (max-width: $screen-md-max) {
.issuable-affix {
position: static;
}
}
@media (min-width: $screen-md-max) {
.issuable-affix {
&.affix-top {
position: static;
}
&.affix {
position: fixed;
top: 70px;
margin-right: 35px;
&.no-affix {
position: relative;
top: 0;
}
}
}
}
.issuable-details {
section {
.issuable-discussion {
......@@ -54,6 +23,10 @@
padding: 6px 10px;
}
}
&.has-labels {
margin-bottom: -5px;
}
}
.issuable-sidebar {
......@@ -66,8 +39,9 @@
width: $gutter_inner_width;
// --
&:first-child {
padding-top: 5px;
&.issuable-sidebar-header {
padding-top: 0;
padding-bottom: 10px;
}
&:last-child {
......@@ -75,7 +49,6 @@
}
span {
margin-top: 7px;
display: inline-block;
}
......@@ -84,7 +57,7 @@
}
.issuable-count {
margin-top: 7px;
}
.gutter-toggle {
......@@ -99,19 +72,19 @@
.title {
color: $gl-text-color;
margin-bottom: 8px;
margin-bottom: 10px;
line-height: 1;
.avatar {
margin-left: 0;
}
label {
font-weight: normal;
margin-right: 4px;
}
.edit-link {
color: $gl-gray;
&:hover {
color: $md-link-color;
}
}
}
......@@ -144,11 +117,6 @@
.btn-clipboard {
color: $gl-gray;
}
.participants .avatar {
margin-top: 6px;
margin-right: 2px;
}
}
.right-sidebar {
......@@ -163,8 +131,12 @@
&.right-sidebar-expanded {
width: $gutter_width;
hr {
display: none;
.value {
line-height: 1;
}
.bold {
font-weight: 600;
}
.sidebar-collapsed-icon {
......@@ -172,8 +144,23 @@
}
.gutter-toggle {
margin-top: 7px;
border-left: 1px solid $border-gray-light;
}
.assignee .avatar {
float: left;
margin-right: 10px;
margin-bottom: 0;
margin-left: 0;
}
.username {
display: block;
margin-top: 4px;
font-size: 13px;
font-weight: normal;
}
}
.subscribe-button {
......@@ -193,14 +180,6 @@
width: $sidebar_collapsed_width;
padding-top: 0;
hr {
margin: 0;
color: $gray-normal;
border-color: $gray-normal;
width: 62px;
margin-left: -20px
}
.block {
width: $sidebar_collapsed_width - 1px;
margin-left: -19px;
......@@ -209,12 +188,18 @@
overflow: hidden;
}
.participants {
border-bottom: 1px solid $border-gray-light;
}
.hide-collapsed {
display: none;
}
.gutter-toggle {
margin-left: -36px;
width: 100%;
margin-left: 0;
padding-left: 25px;
}
.sidebar-collapsed-icon {
......@@ -229,6 +214,10 @@
margin-top: 0;
}
.author {
display: none;
}
.btn-clipboard {
border: none;
......@@ -241,6 +230,11 @@
}
}
}
.sidebar-collapsed-user {
padding-bottom: 0;
margin-bottom: 10px;
}
}
.btn {
......@@ -251,6 +245,13 @@
border: 1px solid $border-gray-dark;
}
}
a:not(.btn) {
&:hover {
color: $md-link-color;
text-decoration: none;
}
}
}
.btn-default.gutter-toggle {
......@@ -270,3 +271,29 @@
color: $gray-darkest;
}
}
.participants-list {
margin: -5px -5px;
}
.participants-author {
display: inline-block;
padding: 5px 5px;
.author_link {
display: block;
}
.avatar.avatar-inline {
margin: 0;
}
}
.participants-more {
margin-top: 5px;
margin-left: 5px;
a {
color: #8c8c8c;
}
}
app/helpers/projects_helper.rb
View file @ 8dfa0a76
......@@ -26,7 +26,7 @@ module ProjectsHelper
image_tag(avatar_icon(author, opts[:size]), width: opts[:size], class: "avatar avatar-inline #{"s#{opts[:size]}" if opts[:size]}", alt:'') if opts[:avatar]
end
def link_to_member(project, author, opts = {})
def link_to_member(project, author, opts = {}, &block)
default_opts = { avatar: true, name: true, size: 16, author_class: 'author', title: ":name" }
opts = default_opts.merge(opts)
......@@ -44,6 +44,8 @@ module ProjectsHelper
author_html << content_tag(:span, sanitize(author.name), class: opts[:author_class]) if opts[:name]
end
author_html << capture(&block) if block
author_html = author_html.html_safe
if opts[:name]
......
app/views/shared/issuable/_participants.html.haml
View file @ 8dfa0a76
- participants_row = 7
- participants_size = participants.size
- participants_extra = participants_size - participants_row
.block.participants
.sidebar-collapsed-icon
= icon('users')
......@@ -5,6 +8,13 @@
= participants.count
.title.hide-collapsed
= pluralize participants.count, "participant"
- participants.each do |participant|
%span.hide-collapsed
= link_to_member(@project, participant, name: false, size: 24)
.hide-collapsed.participants-list
- participants.each do |participant|
.participants-author.js-participants-author
= link_to_member(@project, participant, name: false, size: 24)
- if participants_extra > 0
%div.participants-more
%a.js-participants-more{href: "#", data: {original_text: "+ #{participants_size - 7} more", less_text: "- show less"}}
+ #{participants_extra} more
:javascript
Issue.prototype.PARTICIPANTS_ROW_COUNT = #{participants_row};
app/views/shared/issuable/_sidebar.html.haml
View file @ 8dfa0a76
%aside.right-sidebar{ class: sidebar_gutter_collapsed_class }
.issuable-sidebar
.block
.block.issuable-sidebar-header
%span.issuable-count.hide-collapsed.pull-left
= issuable.iid
of
= issuables_count(issuable)
%span.pull-right
%a.gutter-toggle.js-sidebar-toggle{href: '#'}
= sidebar_gutter_toggle_icon
%a.gutter-toggle.pull-right.js-sidebar-toggle{href: '#'}
= sidebar_gutter_toggle_icon
.issuable-nav.hide-collapsed.pull-right.btn-group{role: 'group', "aria-label" => '...'}
- if prev_issuable = prev_issuable_for(issuable)
= link_to 'Prev', [@project.namespace.becomes(Namespace), @project, prev_issuable], class: 'btn btn-default prev-btn'
......@@ -22,20 +21,20 @@
= form_for [@project.namespace.becomes(Namespace), @project, issuable], remote: true, html: {class: 'issuable-context-form inline-update js-issuable-update'} do |f|
.block.assignee
.sidebar-collapsed-icon
.sidebar-collapsed-icon.sidebar-collapsed-user{data: {toggle: "tooltip", placement: "left", container: "body"}, title: (issuable.assignee.to_reference if issuable.assignee)}
- if issuable.assignee
= link_to_member_avatar(issuable.assignee, size: 24)
= link_to_member(@project, issuable.assignee, size: 24)
- else
= icon('user')
.title.hide-collapsed
%label
Assignee
Assignee
- if can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
.pull-right
= link_to 'Edit', '#', class: 'edit-link'
.value.hide-collapsed
= link_to 'Edit', '#', class: 'edit-link pull-right'
.value.bold.hide-collapsed
- if issuable.assignee
%strong= link_to_member(@project, issuable.assignee, size: 24)
= link_to_member(@project, issuable.assignee, size: 32) do
%span.username
= issuable.assignee.to_reference
- if issuable.instance_of?(MergeRequest) && !issuable.can_be_merged_by?(issuable.assignee)
%a.pull-right.cannot-be-merged{href: '#', data: {toggle: 'tooltip'}, title: 'Not allowed to merge'}
= icon('exclamation-triangle')
......@@ -54,18 +53,13 @@
- else
No
.title.hide-collapsed
%label
Milestone
Milestone
- if can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
.pull-right
= link_to 'Edit', '#', class: 'edit-link'
.value.hide-collapsed
= link_to 'Edit', '#', class: 'edit-link pull-right'
.value.bold.hide-collapsed
- if issuable.milestone
%span.back-to-milestone
= link_to namespace_project_milestone_path(@project.namespace, @project, issuable.milestone) do
%strong
= icon('clock-o')
= issuable.milestone.title
= link_to namespace_project_milestone_path(@project.namespace, @project, issuable.milestone) do
= issuable.milestone.title
- else
.light None
.selectbox.hide-collapsed
......@@ -80,11 +74,10 @@
%span
= issuable.labels.count
.title.hide-collapsed
%label Labels
Labels
- if can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
.pull-right
= link_to 'Edit', '#', class: 'edit-link'
.value.issuable-show-labels.hide-collapsed
= link_to 'Edit', '#', class: 'edit-link pull-right'
.value.issuable-show-labels.hide-collapsed{class: ("has-labels" if issuable.labels.any?)}
- if issuable.labels.any?
- issuable.labels.each do |label|
= link_to_label(label, type: issuable.to_ability_name)
......@@ -95,14 +88,13 @@
{ selected: issuable.label_ids }, multiple: true, class: 'select2 js-select2', data: { placeholder: "Select labels" }
= render "shared/issuable/participants", participants: issuable.participants(current_user)
%hr
- if current_user
- subscribed = issuable.subscribed?(current_user)
.block.light.subscription{data: {url: toggle_subscription_path(issuable)}}
.sidebar-collapsed-icon
= icon('rss')
.title.hide-collapsed
%label.light Notifications
Notifications
- subscribtion_status = subscribed ? 'subscribed' : 'unsubscribed'
%button.btn.btn-block.btn-gray.subscribe-button.hide-collapsed{:type => 'button'}
%span= subscribed ? 'Unsubscribe' : 'Subscribe'
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7