Merge branch 'labels-ui-fix' into 'master'
Updated labels UI - Fixed alignment issues - Added dropdown to mobile to make the options look nicer & to save space ![Screen_Shot_2016-05-25_at_09.42.46](/uploads/ff59abd2310725965b388a62c6c1f2af/Screen_Shot_2016-05-25_at_09.42.46.png) Closes #14227 See merge request !4273
This commit is contained in:
commit
d7e8adeabf
7 changed files with 110 additions and 86 deletions
|
@ -19,3 +19,8 @@ class @Subscription
|
||||||
action = if status == 'subscribed' then 'Unsubscribe' else 'Subscribe'
|
action = if status == 'subscribed' then 'Unsubscribe' else 'Subscribe'
|
||||||
btn.find('span').text(action)
|
btn.find('span').text(action)
|
||||||
@subscription_status.find('>div').toggleClass('hidden')
|
@subscription_status.find('>div').toggleClass('hidden')
|
||||||
|
|
||||||
|
if btn.attr('data-original-title')
|
||||||
|
btn.tooltip('hide')
|
||||||
|
.attr('data-original-title', action)
|
||||||
|
.tooltip('fixTitle')
|
||||||
|
|
|
@ -50,11 +50,26 @@
|
||||||
|
|
||||||
.label-row {
|
.label-row {
|
||||||
.label-name {
|
.label-name {
|
||||||
display: inline-block;
|
display: block;
|
||||||
width: 170px;
|
margin-bottom: 10px;
|
||||||
|
|
||||||
@media (max-width: $screen-xs-min) {
|
@media (min-width: $screen-sm-min) {
|
||||||
display: block;
|
display: inline-block;
|
||||||
|
width: 200px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-description {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
@media (min-width: $screen-sm-min) {
|
||||||
|
display: inline-block;
|
||||||
|
width: 40%;
|
||||||
|
margin-left: 10px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -68,10 +83,6 @@
|
||||||
padding: 3px 4px;
|
padding: 3px 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label-subscription {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-labels-error {
|
.dropdown-labels-error {
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
@ -79,62 +90,27 @@
|
||||||
color: $white-light;
|
color: $white-light;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin labels-mobile {
|
|
||||||
@media (max-width: $screen-xs-min) {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
margin-left: 0;
|
|
||||||
padding: 10px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.manage-labels-list {
|
.manage-labels-list {
|
||||||
|
.btn-action {
|
||||||
|
color: $gl-dark-link-color;
|
||||||
|
|
||||||
.prepend-left-10, .prepend-description-left {
|
.fa {
|
||||||
display: inline-block;
|
font-size: 18px;
|
||||||
width: 40%;
|
vertical-align: middle;
|
||||||
vertical-align: middle;
|
}
|
||||||
|
|
||||||
@include labels-mobile;
|
&:hover {
|
||||||
|
color: $gl-link-color;
|
||||||
|
|
||||||
|
&.remove-row {
|
||||||
|
color: $gl-danger;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.prepend-description-left {
|
.dropdown {
|
||||||
width: 57%;
|
@media (min-width: $screen-sm-min) {
|
||||||
|
float: right;
|
||||||
@include labels-mobile;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pull-info-right {
|
|
||||||
float: right;
|
|
||||||
|
|
||||||
@media (max-width: $screen-xs-min) {
|
|
||||||
float: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-buttons {
|
|
||||||
border-color: transparent;
|
|
||||||
padding: 6px;
|
|
||||||
color: $gl-text-color;
|
|
||||||
|
|
||||||
&.label-subscribe-button {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
i {
|
|
||||||
color: $gl-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.append-right-20 {
|
|
||||||
a {
|
|
||||||
color: $gl-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: $screen-xs-min) {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -186,3 +162,23 @@
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.label-options-toggle {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-subscribe-button {
|
||||||
|
.label-subscribe-button-loading {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.disabled {
|
||||||
|
.label-subscribe-button-icon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-subscribe-button-loading {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -32,7 +32,7 @@ module LabelsHelper
|
||||||
# link_to_label(label) { "My Custom Label Text" }
|
# link_to_label(label) { "My Custom Label Text" }
|
||||||
#
|
#
|
||||||
# Returns a String
|
# Returns a String
|
||||||
def link_to_label(label, project: nil, type: :issue, tooltip: true, &block)
|
def link_to_label(label, project: nil, type: :issue, tooltip: true, css_class: nil, &block)
|
||||||
project ||= @project || label.project
|
project ||= @project || label.project
|
||||||
link = send("namespace_project_#{type.to_s.pluralize}_path",
|
link = send("namespace_project_#{type.to_s.pluralize}_path",
|
||||||
project.namespace,
|
project.namespace,
|
||||||
|
@ -40,9 +40,9 @@ module LabelsHelper
|
||||||
label_name: [label.name])
|
label_name: [label.name])
|
||||||
|
|
||||||
if block_given?
|
if block_given?
|
||||||
link_to link, &block
|
link_to link, class: css_class, &block
|
||||||
else
|
else
|
||||||
link_to render_colored_label(label, tooltip: tooltip), link
|
link_to render_colored_label(label, tooltip: tooltip), link, class: css_class
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
|
|
|
@ -1,28 +1,50 @@
|
||||||
- label_css_id = dom_id(label)
|
- label_css_id = dom_id(label)
|
||||||
%li{id: label_css_id, data: { id: label.id } }
|
%li{id: label_css_id, data: { id: label.id } }
|
||||||
= render "shared/label_row", label: label
|
= render "shared/label_row", label: label
|
||||||
.pull-info-right
|
|
||||||
%span.append-right-20
|
|
||||||
= link_to_label(label, type: :merge_request) do
|
|
||||||
= pluralize label.open_merge_requests_count, 'merge request'
|
|
||||||
|
|
||||||
%span.append-right-20
|
.visible-xs.visible-sm-inline-block.visible-md-inline-block.dropdown
|
||||||
= link_to_label(label) do
|
%button.btn.btn-default.label-options-toggle{ data: { toggle: "dropdown" } }
|
||||||
= pluralize label.open_issues_count(current_user), 'open issue'
|
Options
|
||||||
|
%span.caret
|
||||||
|
.dropdown-menu.dropdown-menu-align-right
|
||||||
|
%ul
|
||||||
|
%li
|
||||||
|
= link_to_label(label, type: :merge_request) do
|
||||||
|
= pluralize label.open_merge_requests_count, 'merge request'
|
||||||
|
%li
|
||||||
|
= link_to_label(label) do
|
||||||
|
= pluralize label.open_issues_count(current_user), 'open issue'
|
||||||
|
- if current_user
|
||||||
|
%li.label-subscription{ data: { url: toggle_subscription_namespace_project_label_path(@project.namespace, @project, label) } }
|
||||||
|
%a.js-subscribe-button.label-subscribe-button.subscription-status{ role: "button", href: "#", data: { toggle: "tooltip", status: label_subscription_status(label) } }
|
||||||
|
%span= label_subscription_toggle_button_text(label)
|
||||||
|
- if can? current_user, :admin_label, @project
|
||||||
|
%li
|
||||||
|
= link_to "Edit", edit_namespace_project_label_path(@project.namespace, @project, label)
|
||||||
|
%li
|
||||||
|
= link_to "Delete", namespace_project_label_path(@project.namespace, @project, label), title: "Delete", method: :delete, remote: true, data: {confirm: "Remove this label? Are you sure?"}
|
||||||
|
|
||||||
|
.pull-right.hidden-xs.hidden-sm.hidden-md
|
||||||
|
= link_to_label(label, type: :merge_request, css_class: 'btn btn-transparent btn-action') do
|
||||||
|
= pluralize label.open_merge_requests_count, 'merge request'
|
||||||
|
= link_to_label(label, css_class: 'btn btn-transparent btn-action') do
|
||||||
|
= pluralize label.open_issues_count(current_user), 'open issue'
|
||||||
|
|
||||||
- if current_user
|
- if current_user
|
||||||
.label-subscription{ data: { url: toggle_subscription_namespace_project_label_path(@project.namespace, @project, label) } }
|
.label-subscription.inline{ data: { url: toggle_subscription_namespace_project_label_path(@project.namespace, @project, label) } }
|
||||||
.subscription-status{ data: { status: label_subscription_status(label) } }
|
%button.js-subscribe-button.label-subscribe-button.btn.btn-transparent.btn-action.subscription-status{ type: "button", title: label_subscription_toggle_button_text(label), data: { toggle: "tooltip", status: label_subscription_status(label) } }
|
||||||
|
%span.sr-only= label_subscription_toggle_button_text(label)
|
||||||
|
= icon('eye', class: 'label-subscribe-button-icon')
|
||||||
|
= icon('spinner spin', class: 'label-subscribe-button-loading')
|
||||||
|
|
||||||
%button.js-subscribe-button.label-subscribe-button.btn.action-buttons{ type: "button", data: { toggle: "tooltip" } }
|
- if can? current_user, :admin_label, @project
|
||||||
%span= label_subscription_toggle_button_text(label)
|
= link_to edit_namespace_project_label_path(@project.namespace, @project, label), title: "Edit", class: 'btn btn-transparent btn-action', data: {toggle: "tooltip"} do
|
||||||
|
%span.sr-only Edit
|
||||||
|
= icon('pencil-square-o')
|
||||||
|
= link_to namespace_project_label_path(@project.namespace, @project, label), title: "Delete", class: 'btn btn-transparent btn-action remove-row', method: :delete, remote: true, data: {confirm: "Remove this label? Are you sure?", toggle: "tooltip"} do
|
||||||
|
%span.sr-only Delete
|
||||||
|
= icon('trash-o')
|
||||||
|
|
||||||
- if can?(current_user, :admin_label, @project)
|
- if current_user
|
||||||
= link_to edit_namespace_project_label_path(@project.namespace, @project, label), title: "Edit", class: 'btn action-buttons', data: { toggle: 'tooltip' } do
|
:javascript
|
||||||
%i.fa.fa-pencil-square-o
|
new Subscription('##{dom_id(label)} .label-subscription');
|
||||||
= link_to namespace_project_label_path(@project.namespace, @project, label), title: "Delete", class: 'btn action-buttons remove-row', method: :delete, remote: true, data: { confirm: 'Remove this label? Are you sure?', toggle: 'tooltip' } do
|
|
||||||
%i.fa.fa-trash-o
|
|
||||||
|
|
||||||
- if current_user
|
|
||||||
:javascript
|
|
||||||
new Subscription('##{label_css_id} .label-subscription');
|
|
||||||
|
|
|
@ -8,5 +8,6 @@
|
||||||
= icon('star')
|
= icon('star')
|
||||||
%span.label-name
|
%span.label-name
|
||||||
= link_to_label(label, tooltip: false)
|
= link_to_label(label, tooltip: false)
|
||||||
%span.prepend-left-10
|
- if label.description
|
||||||
= markdown(label.description, pipeline: :single_line)
|
%span.label-description
|
||||||
|
= markdown(label.description, pipeline: :single_line)
|
||||||
|
|
|
@ -9,7 +9,7 @@ class Spinach::Features::ProjectIssuesLabels < Spinach::FeatureSteps
|
||||||
|
|
||||||
step 'I remove label \'bug\'' do
|
step 'I remove label \'bug\'' do
|
||||||
page.within "#label_#{bug_label.id}" do
|
page.within "#label_#{bug_label.id}" do
|
||||||
click_link 'Delete'
|
first(:link, 'Delete').click
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
|
|
|
@ -29,6 +29,6 @@ class Spinach::Features::Labels < Spinach::FeatureSteps
|
||||||
private
|
private
|
||||||
|
|
||||||
def subscribe_button
|
def subscribe_button
|
||||||
first('.label-subscribe-button span')
|
first('.js-subscribe-button', visible: true)
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
Loading…
Reference in a new issue