kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Fix collapsed sidebar tooltips

Browse source
This commit is contained in:
Clement Ho 2018-05-24 11:02:42 -05:00
parent c670fcc005
commit a877e1a3b3
10 changed files with 28 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/assets/javascripts/sidebar/components/assignees/assignees.vue
View file

@ -130,6 +130,7 @@ export default {
v-tooltip v-tooltip
data-container="body" data-container="body"
data-placement="left" data-placement="left"
data-boundary="viewport"
:title="collapsedTooltipTitle" :title="collapsedTooltipTitle"
> >
<i <i

1
app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue
View file

@ -75,6 +75,7 @@ export default {
v-tooltip v-tooltip
data-container="body" data-container="body"
data-placement="left" data-placement="left"
data-boundary="viewport"
:title="tooltipLabel" :title="tooltipLabel"
> >
<icon <icon

1
app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
View file

@ -99,6 +99,7 @@ export default {
v-tooltip v-tooltip
data-container="body" data-container="body"
data-placement="left" data-placement="left"
data-boundary="viewport"
:title="tooltipLabel" :title="tooltipLabel"
> >
<icon <icon

1
app/assets/javascripts/sidebar/components/participants/participants.vue
View file

@ -84,6 +84,7 @@
v-tooltip v-tooltip
data-container="body" data-container="body"
data-placement="left" data-placement="left"
data-boundary="viewport"
:title="participantLabel" :title="participantLabel"
@click="onClickCollapsedIcon" @click="onClickCollapsedIcon"
> >

1
app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue
View file

@ -82,6 +82,7 @@
:title="notificationTooltip" :title="notificationTooltip"
data-container="body" data-container="body"
data-placement="left" data-placement="left"
data-boundary="viewport"
> >
<icon <icon
:name="notificationIcon" :name="notificationIcon"

1
app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue
View file

@ -114,6 +114,7 @@
v-tooltip v-tooltip
data-container="body" data-container="body"
data-placement="left" data-placement="left"
data-boundary="viewport"
:title="tooltipText" :title="tooltipText"
> >
<icon name="timer" /> <icon name="timer" />

3
app/helpers/issuables_helper.rb
View file

@ -359,7 +359,8 @@ module IssuablesHelper
url: project_todos_path(@project), url: project_todos_path(@project),
delete_path: (dashboard_todo_path(todo) if todo), delete_path: (dashboard_todo_path(todo) if todo),
placement: (is_collapsed ? 'left' : nil), placement: (is_collapsed ? 'left' : nil),
container: (is_collapsed ? 'body' : nil) container: (is_collapsed ? 'body' : nil),
boundary: 'viewport'
} }
end end

13
app/views/shared/issuable/_sidebar.html.haml
View file

@ -7,7 +7,7 @@
- if current_user - if current_user
%span.issuable-header-text.hide-collapsed.float-left %span.issuable-header-text.hide-collapsed.float-left
= _('Todo') = _('Todo')
%a.gutter-toggle.float-right.js-sidebar-toggle.has-tooltip{ role: "button", href: "#", "aria-label" => "Toggle sidebar", title: sidebar_gutter_tooltip_text, data: { container: 'body', placement: 'left' } } %a.gutter-toggle.float-right.js-sidebar-toggle.has-tooltip{ role: "button", href: "#", "aria-label" => "Toggle sidebar", title: sidebar_gutter_tooltip_text, data: { container: 'body', placement: 'left', boundary: 'viewport' } }
= sidebar_gutter_toggle_icon = sidebar_gutter_toggle_icon
- if current_user - if current_user
= render "shared/issuable/sidebar_todo", todo: todo, issuable: issuable = render "shared/issuable/sidebar_todo", todo: todo, issuable: issuable
@ -19,11 +19,10 @@
.block.assignee .block.assignee
= render "shared/issuable/sidebar_assignees", issuable: issuable, can_edit_issuable: can_edit_issuable, signed_in: current_user.present? = render "shared/issuable/sidebar_assignees", issuable: issuable, can_edit_issuable: can_edit_issuable, signed_in: current_user.present?
.block.milestone .block.milestone
.sidebar-collapsed-icon.has-tooltip{ title: milestone_tooltip_title(issuable.milestone), data: { container: 'body', html: 'true', placement: 'left' } } .sidebar-collapsed-icon.has-tooltip{ title: milestone_tooltip_title(issuable.milestone), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
= icon('clock-o', 'aria-hidden': 'true') = icon('clock-o', 'aria-hidden': 'true')
%span.milestone-title %span.milestone-title
- if issuable.milestone - if issuable.milestone
%span.has-tooltip{ title: "#{issuable.milestone.title}<br>#{milestone_tooltip_title(issuable.milestone)}", data: { container: 'body', html: 'true', placement: 'left' } }
= issuable.milestone.title = issuable.milestone.title
- else - else
= _('None') = _('None')
@ -50,7 +49,7 @@
= icon('spinner spin', 'aria-hidden': 'true') = icon('spinner spin', 'aria-hidden': 'true')
- if issuable.has_attribute?(:due_date) - if issuable.has_attribute?(:due_date)
.block.due_date .block.due_date
.sidebar-collapsed-icon.has-tooltip{ data: { placement: 'left', container: 'body', html: 'true' }, title: sidebar_due_date_tooltip_label(issuable) } .sidebar-collapsed-icon.has-tooltip{ data: { placement: 'left', container: 'body', html: 'true', boundary: 'viewport' }, title: sidebar_due_date_tooltip_label(issuable) }
= icon('calendar', 'aria-hidden': 'true') = icon('calendar', 'aria-hidden': 'true')
%span.js-due-date-sidebar-value %span.js-due-date-sidebar-value
= issuable.due_date.try(:to_s, :medium) || 'None' = issuable.due_date.try(:to_s, :medium) || 'None'
@ -87,7 +86,7 @@
- if @labels - if @labels
- selected_labels = issuable.labels - selected_labels = issuable.labels
.block.labels .block.labels
.sidebar-collapsed-icon.js-sidebar-labels-tooltip{ title: issuable_labels_tooltip(issuable.labels_array), data: { placement: "left", container: "body" } } .sidebar-collapsed-icon.js-sidebar-labels-tooltip{ title: issuable_labels_tooltip(issuable.labels_array), data: { placement: "left", container: "body", boundary: 'viewport' } }
= icon('tags', 'aria-hidden': 'true') = icon('tags', 'aria-hidden': 'true')
%span %span
= selected_labels.size = selected_labels.size
@ -134,7 +133,7 @@
- project_ref = cross_project_reference(@project, issuable) - project_ref = cross_project_reference(@project, issuable)
.block.project-reference .block.project-reference
.sidebar-collapsed-icon.dont-change-state .sidebar-collapsed-icon.dont-change-state
= clipboard_button(text: project_ref, title: _('Copy reference to clipboard'), placement: "left") = clipboard_button(text: project_ref, title: _('Copy reference to clipboard'), placement: "left", boundary: 'viewport')
.cross-project-reference.hide-collapsed .cross-project-reference.hide-collapsed
%span %span
= _('Reference:') = _('Reference:')
@ -143,7 +142,7 @@
= clipboard_button(text: project_ref, title: _('Copy reference to clipboard'), placement: "left") = clipboard_button(text: project_ref, title: _('Copy reference to clipboard'), placement: "left")
- if current_user && issuable.can_move?(current_user) - if current_user && issuable.can_move?(current_user)
.block.js-sidebar-move-issue-block .block.js-sidebar-move-issue-block
.sidebar-collapsed-icon{ data: { toggle: 'tooltip', placement: 'left', container: 'body' }, title: _('Move issue') } .sidebar-collapsed-icon{ data: { toggle: 'tooltip', placement: 'left', container: 'body', boundary: 'viewport' }, title: _('Move issue') }
= custom_icon('icon_arrow_right') = custom_icon('icon_arrow_right')
.dropdown.sidebar-move-issue-dropdown.hide-collapsed .dropdown.sidebar-move-issue-dropdown.hide-collapsed
%button.btn.btn-default.btn-block.js-sidebar-dropdown-toggle.js-move-issue{ type: 'button', %button.btn.btn-default.btn-block.js-sidebar-dropdown-toggle.js-move-issue{ type: 'button',

2
app/views/shared/issuable/_sidebar_assignees.html.haml
View file

@ -4,7 +4,7 @@
= _('Assignee') = _('Assignee')
= icon('spinner spin') = icon('spinner spin')
- else - else
.sidebar-collapsed-icon.sidebar-collapsed-user{ data: { toggle: "tooltip", placement: "left", container: "body" }, title: sidebar_assignee_tooltip_label(issuable) } .sidebar-collapsed-icon.sidebar-collapsed-user{ data: { toggle: "tooltip", placement: "left", container: "body", boundary: 'viewport' }, title: sidebar_assignee_tooltip_label(issuable) }
- if issuable.assignee - if issuable.assignee
= link_to_member(@project, issuable.assignee, size: 24) = link_to_member(@project, issuable.assignee, size: 24)
- else - else

24
app/views/shared/milestones/_sidebar.html.haml
View file

@ -4,7 +4,7 @@
%aside.right-sidebar.js-right-sidebar{ data: { "offset-top" => affix_offset, "spy" => "affix", "always-show-toggle" => true }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite' } %aside.right-sidebar.js-right-sidebar{ data: { "offset-top" => affix_offset, "spy" => "affix", "always-show-toggle" => true }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite' }
.issuable-sidebar.milestone-sidebar .issuable-sidebar.milestone-sidebar
.block.milestone-progress.issuable-sidebar-header .block.milestone-progress.issuable-sidebar-header
%a.gutter-toggle.float-right.js-sidebar-toggle.has-tooltip{ role: "button", href: "#", "aria-label" => "Toggle sidebar", title: sidebar_gutter_tooltip_text, data: { container: 'body', placement: 'left' } } %a.gutter-toggle.float-right.js-sidebar-toggle.has-tooltip{ role: "button", href: "#", "aria-label" => "Toggle sidebar", title: sidebar_gutter_tooltip_text, data: { container: 'body', placement: 'left', boundary: 'viewport' } }
= sidebar_gutter_toggle_icon = sidebar_gutter_toggle_icon
.title.hide-collapsed .title.hide-collapsed
%strong.bold== #{milestone.percent_complete(current_user)}% %strong.bold== #{milestone.percent_complete(current_user)}%
@ -14,7 +14,7 @@
= milestone_progress_bar(milestone) = milestone_progress_bar(milestone)
.block.milestone-progress.hide-expanded .block.milestone-progress.hide-expanded
.sidebar-collapsed-icon.has-tooltip{ title: milestone_progress_tooltip_text(milestone), data: { container: 'body', html: 'true', placement: 'left' } } .sidebar-collapsed-icon.has-tooltip{ title: milestone_progress_tooltip_text(milestone), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
%span== #{milestone.percent_complete(current_user)}% %span== #{milestone.percent_complete(current_user)}%
= milestone_progress_bar(milestone) = milestone_progress_bar(milestone)
@ -36,24 +36,24 @@
%span.collapsed-milestone-date %span.collapsed-milestone-date
- if milestone.start_date && milestone.due_date - if milestone.start_date && milestone.due_date
- if milestone.start_date.year == milestone.due_date.year - if milestone.start_date.year == milestone.due_date.year
.milestone-date.has-tooltip{ title: milestone_time_for(milestone.start_date, :start), data: { container: 'body', html: 'true', placement: 'left' } } .milestone-date.has-tooltip{ title: milestone_time_for(milestone.start_date, :start), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
= milestone.start_date.strftime('%b %-d') = milestone.start_date.strftime('%b %-d')
- else - else
.milestone-date.has-tooltip{ title: milestone_time_for(milestone.start_date, :start), data: { container: 'body', html: 'true', placement: 'left' } } .milestone-date.has-tooltip{ title: milestone_time_for(milestone.start_date, :start), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
= milestone.start_date.strftime('%b %-d %Y') = milestone.start_date.strftime('%b %-d %Y')
.date-separator - .date-separator -
.due_date.has-tooltip{ title: milestone_time_for(milestone.due_date, :end), data: { container: 'body', html: 'true', placement: 'left' } } .due_date.has-tooltip{ title: milestone_time_for(milestone.due_date, :end), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
= milestone.due_date.strftime('%b %-d %Y') = milestone.due_date.strftime('%b %-d %Y')
- elsif milestone.start_date - elsif milestone.start_date
From From
.milestone-date.has-tooltip{ title: milestone_time_for(milestone.start_date, :start), data: { container: 'body', html: 'true', placement: 'left' } } .milestone-date.has-tooltip{ title: milestone_time_for(milestone.start_date, :start), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
= milestone.start_date.strftime('%b %-d %Y') = milestone.start_date.strftime('%b %-d %Y')
- elsif milestone.due_date - elsif milestone.due_date
Until Until
.milestone-date.has-tooltip{ title: milestone_time_for(milestone.due_date, :end), data: { container: 'body', html: 'true', placement: 'left' } } .milestone-date.has-tooltip{ title: milestone_time_for(milestone.due_date, :end), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
= milestone.due_date.strftime('%b %-d %Y') = milestone.due_date.strftime('%b %-d %Y')
- else - else
.has-tooltip{ title: milestone_time_for(milestone.start_date, :start), data: { container: 'body', html: 'true', placement: 'left' } } .has-tooltip{ title: milestone_time_for(milestone.start_date, :start), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
None None
.title.hide-collapsed .title.hide-collapsed
Due date Due date
@ -72,7 +72,7 @@
- if !project || can?(current_user, :read_issue, project) - if !project || can?(current_user, :read_issue, project)
.block.issues .block.issues
.sidebar-collapsed-icon.has-tooltip{ title: milestone_issues_tooltip_text(milestone), data: { container: 'body', html: 'true', placement: 'left' } } .sidebar-collapsed-icon.has-tooltip{ title: milestone_issues_tooltip_text(milestone), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
%strong %strong
= custom_icon('issues') = custom_icon('issues')
%span= milestone.issues_visible_to_user(current_user).count %span= milestone.issues_visible_to_user(current_user).count
@ -100,7 +100,7 @@
= icon('spinner spin') = icon('spinner spin')
.block.merge-requests .block.merge-requests
.sidebar-collapsed-icon.has-tooltip{ title: milestone_merge_requests_tooltip_text(milestone), data: { container: 'body', html: 'true', placement: 'left' } } .sidebar-collapsed-icon.has-tooltip{ title: milestone_merge_requests_tooltip_text(milestone), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
%strong %strong
= custom_icon('mr_bold') = custom_icon('mr_bold')
%span= milestone.merge_requests.count %span= milestone.merge_requests.count
@ -136,10 +136,10 @@
- if milestone_ref.present? - if milestone_ref.present?
.block.reference .block.reference
.sidebar-collapsed-icon.dont-change-state .sidebar-collapsed-icon.dont-change-state
= clipboard_button(text: milestone_ref, title: "Copy reference to clipboard", placement: "left") = clipboard_button(text: milestone_ref, title: "Copy reference to clipboard", placement: "left", boundary: 'viewport')
.cross-project-reference.hide-collapsed .cross-project-reference.hide-collapsed
%span %span
Reference: Reference:
%cite{ title: milestone_ref } %cite{ title: milestone_ref }
= milestone_ref = milestone_ref
= clipboard_button(text: milestone_ref, title: "Copy reference to clipboard", placement: "left") = clipboard_button(text: milestone_ref, title: "Copy reference to clipboard", placement: "left", boundary: 'viewport')