Skip to content
Snippets Groups Projects
Commit 467e895a authored by Phil Hughes's avatar Phil Hughes
Browse files

Issuable sidebar from CE

parent 9c60074d
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
app/assets/javascripts/issuable_context.js.coffee
+ 26
− 2
View file @ 467e895a
#= require jquery.waitforimages
class @IssuableContext
constructor: ->
@initParticipants()
new UsersSelect()
$('select.select2').select2({width: 'resolve', dropdownAutoWidth: true})
 
@@ -17,3 +17,27 @@ class @IssuableContext
block.find('.js-select2').select2("open")
 
$(".right-sidebar").niceScroll()
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
+ 97
− 61
View file @ 467e895a
@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,20 +23,25 @@
padding: 6px 10px;
}
}
&.has-labels {
margin-bottom: -5px;
}
}
 
.issuable-sidebar {
.block {
@include clearfix;
padding: $gl-padding 0;
padding: $gl-padding 0;
border-bottom: 1px solid $border-gray-light;
// This prevents the mess when resizing the sidebar
// of elements repositioning themselves..
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,13 @@
&.right-sidebar-expanded {
width: $gutter_width;
 
hr {
display: none;
.value {
font-weight: 600;
line-height: 1;
}
.bold {
font-weight: 600;
}
 
.sidebar-collapsed-icon {
@@ -172,8 +145,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,28 +181,26 @@
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;
padding: 15px 0 0 0;
padding: 15px 0 0;
border-bottom: none;
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 {
@@ -222,13 +208,17 @@
width: 100%;
text-align: center;
padding-bottom: 10px;
color: #999999;
color: #999;
 
span {
display: block;
margin-top: 0;
}
 
.author {
display: none;
}
.btn-clipboard {
border: none;
 
@@ -237,10 +227,15 @@
}
 
i {
color: #999999;
color: #999;
}
}
}
.sidebar-collapsed-user {
padding-bottom: 0;
margin-bottom: 10px;
}
}
 
.btn {
@@ -251,6 +246,13 @@
border: 1px solid $border-gray-dark;
}
}
a:not(.btn) {
&:hover {
color: $md-link-color;
text-decoration: none;
}
}
}
 
.btn-default.gutter-toggle {
@@ -262,3 +264,37 @@
color: $gray-darkest;
}
}
.edited-text {
color: $gray-darkest;
.author_link {
color: $gray-darkest;
}
}
.participants-list {
margin: -5px;
}
.participants-author {
display: inline-block;
padding: 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
+ 4
− 2
View file @ 467e895a
@@ -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,13 +44,15 @@ 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]
link_to(author_html, user_path(author), class: "author_link #{"#{opts[:mobile_classes]}" if opts[:mobile_classes]}").html_safe
else
title = opts[:title].sub(":name", sanitize(author.name))
link_to(author_html, user_path(author), class: "author_link has_tooltip", data: { 'original-title'.to_sym => title, container: 'body' } ).html_safe
link_to(author_html, user_path(author), class: "author_link has-tooltip", data: { 'original-title'.to_sym => title, container: 'body' } ).html_safe
end
end
 
app/views/shared/issuable/_participants.html.haml
+ 13
− 3
View file @ 467e895a
- 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
IssuableContext.prototype.PARTICIPANTS_ROW_COUNT = #{participants_row};
app/views/shared/issuable/_sidebar.html.haml
+ 27
− 37
View file @ 467e895a
%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,23 +21,23 @@
 
= 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)
- 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')
= link_to_member(@project, issuable.assignee, size: 32) do
- 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')
%span.username
= issuable.assignee.to_reference
- else
.light None
 
@@ -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,16 +74,15 @@
%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)
- else
.light None
.bold None
.selectbox.hide-collapsed
= f.collection_select :label_ids, issuable.project.labels.all, :id, :name,
{ selected: issuable.label_ids }, multiple: true, class: 'select2 js-select2', data: { placeholder: "Select labels" }
@@ -104,13 +97,11 @@
- else
No
.title.hide-collapsed
%label Weight
Weight
- 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: 'pull-right edit-link'
.value.bold.hide-collapsed
- if issuable.weight
= icon('balance-scale')
= issuable.weight
- else
.light None
@@ -119,14 +110,13 @@
{ class: 'select2 js-select2', data: { placeholder: "Select weight" }}
 
= 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'
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