Improved issue sidebar
Updated the spacing throughout the sidebar so that it fits better on smaller screens Added more participants button Closes #13353
This commit is contained in:
parent
fde975facc
commit
3e98e5971b
|
@ -7,6 +7,7 @@ class @Issue
|
|||
# Prevent duplicate event bindings
|
||||
@disableTaskList()
|
||||
@fixAffixScroll()
|
||||
@initParticipants()
|
||||
if $('a.btn-close').length
|
||||
@initTaskList()
|
||||
@initIssueBtnEventListeners()
|
||||
|
@ -84,3 +85,26 @@ class @Issue
|
|||
type: 'PATCH'
|
||||
url: $('form.js-issuable-update').attr('action')
|
||||
data: patchData
|
||||
|
||||
initParticipants: ->
|
||||
$(document).on "click", ".js-participants-more", @toggleHiddenParticipants
|
||||
|
||||
# hide any participants from number 6
|
||||
$(".js-participants-author").each (i) ->
|
||||
if i > 6
|
||||
$(@)
|
||||
.addClass "js-participants-hidden hidden"
|
||||
|
||||
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").toggleClass "hidden"
|
||||
|
|
|
@ -1,34 +1,3 @@
|
|||
@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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
@ -241,6 +226,11 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-collapsed-user {
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
|
@ -251,6 +241,13 @@
|
|||
border: 1px solid $border-gray-dark;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
&:hover {
|
||||
color: $md-link-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-default.gutter-toggle {
|
||||
|
@ -270,3 +267,38 @@
|
|||
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;
|
||||
|
||||
&:hover {
|
||||
color: $gl-text-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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]
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
- participants_size = participants.size
|
||||
- participants_extra = participants_size - 7
|
||||
.block.participants
|
||||
.sidebar-collapsed-icon
|
||||
= icon('users')
|
||||
|
@ -5,6 +7,11 @@
|
|||
= 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_size - 7} more
|
||||
|
|
|
@ -1,13 +1,12 @@
|
|||
%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
|
||||
= link_to_member_avatar(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'
|
||||
|
|
Loading…
Reference in New Issue