From e0e62b0336b6518a04113af9af4dc20fe1d3059c Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Thu, 1 Mar 2018 18:20:14 +0000 Subject: Update and install gitlab-svgs dep --- app/assets/images/icons.json | 2 +- app/assets/images/icons.svg | 2 +- app/assets/images/illustrations/epics.svg | 2 +- app/assets/images/illustrations/epics/list.svg | 1 + app/assets/images/illustrations/epics/roadmap.svg | 1 + app/assets/images/illustrations/lock_promotion.svg | 1 + app/assets/images/illustrations/milestone_removing-page.svg | 1 + app/assets/images/illustrations/prometheus-graphs_empty.svg | 1 + app/assets/images/illustrations/web-ide_promotion.svg | 1 + yarn.lock | 4 ++-- 10 files changed, 11 insertions(+), 5 deletions(-) create mode 100644 app/assets/images/illustrations/epics/list.svg create mode 100644 app/assets/images/illustrations/epics/roadmap.svg create mode 100644 app/assets/images/illustrations/lock_promotion.svg create mode 100644 app/assets/images/illustrations/milestone_removing-page.svg create mode 100644 app/assets/images/illustrations/prometheus-graphs_empty.svg create mode 100644 app/assets/images/illustrations/web-ide_promotion.svg diff --git a/app/assets/images/icons.json b/app/assets/images/icons.json index 19843d24e22..b78dc6a2f07 100644 --- a/app/assets/images/icons.json +++ b/app/assets/images/icons.json @@ -1 +1 @@ -{"iconCount":191,"spriteSize":86607,"icons":["abuse","account","admin","angle-double-left","angle-double-right","angle-down","angle-left","angle-right","angle-up","appearance","applications","approval","arrow-down","arrow-right","assignee","bold","book","bookmark","branch","bullhorn","calendar","cancel","chart","chevron-down","chevron-left","chevron-right","chevron-up","clock","close","code","collapse","comment-dots","comment-next","comment","comments","commit","credit-card","cut","dashboard","disk","doc_code","doc_image","doc_text","double-headed-arrow","download","duplicate","earth","ellipsis_v","emoji_slightly_smiling_face","emoji_smile","emoji_smiley","epic","external-link","eye-slash","eye","file-addition","file-deletion","file-modified","filter","folder-o","folder-open","folder","fork","geo-nodes","git-merge","group","history","home","hook","hourglass","image-comment-dark","image-comment-light","import","issue-block","issue-child","issue-close","issue-duplicate","issue-external","issue-new","issue-open-m","issue-open","issue-parent","issues","italic","key-2","key","label","labels","leave","level-up","license","link","list-bulleted","list-numbered","location-dot","location","lock-open","lock","log","mail","menu","merge-request-close","messages","mobile-issue-close","monitor","more","notifications-off","notifications","overview","pencil-square","pencil","pipeline","play","plus-square-o","plus-square","plus","podcast","preferences","profile","project","push-rules","question-o","question","quote","redo","remove","repeat","retry","scale","screen-full","screen-normal","scroll_down","scroll_up","search","settings","shield","slight-frown","slight-smile","smile","smiley","snippet","soft-unwrap","soft-wrap","spam","spinner","staged","star-o","star","status_canceled_borderless","status_canceled","status_closed","status_created_borderless","status_created","status_failed_borderless","status_failed","status_manual_borderless","status_manual","status_notfound_borderless","status_notfound","status_open","status_pending_borderless","status_pending","status_running_borderless","status_running","status_skipped_borderless","status_skipped","status_success_borderless","status_success_solid","status_success","status_warning_borderless","status_warning","stop","task-done","template","terminal","thumb-down","thumb-up","thumbtack","timer","todo-add","todo-done","token","unapproval","unassignee","unlink","unstaged","user","users","volume-up","warning","work"]} \ No newline at end of file +{"iconCount":196,"spriteSize":88552,"icons":["abuse","account","admin","angle-double-left","angle-double-right","angle-down","angle-left","angle-right","angle-up","appearance","applications","approval","arrow-down","arrow-right","assignee","blame","bold","book","bookmark","branch","bullhorn","calendar","cancel","chart","chevron-down","chevron-left","chevron-right","chevron-up","clock","close","code","collapse","comment-dots","comment-next","comment","comments","commit","compress","credit-card","cut","dashboard","disk","doc_code","doc_image","doc_text","double-headed-arrow","download","duplicate","earth","ellipsis_v","emoji_slightly_smiling_face","emoji_smile","emoji_smiley","epic","error","expand","external-link","eye-slash","eye","file-addition","file-deletion","file-modified","filter","folder-o","folder-open","folder","fork","geo-nodes","git-merge","group","history","home","hook","hourglass","image-comment-dark","image-comment-light","import","issue-block","issue-child","issue-close","issue-duplicate","issue-external","issue-new","issue-open-m","issue-open","issue-parent","issues","italic","key-2","key","label","labels","leave","level-up","license","link","list-bulleted","list-numbered","location-dot","location","lock-open","lock","log","mail","menu","merge-request-close","messages","mobile-issue-close","monitor-lines","monitor","more","notifications-off","notifications","overview","pencil-square","pencil","pipeline","play","plus-square-o","plus-square","plus","podcast","preferences","profile","project","push-rules","question-o","question","quote","redo","remove","repeat","retry","scale","screen-full","screen-normal","scroll_down","scroll_up","search","settings","shield","slight-frown","slight-smile","smile","smiley","snippet","soft-unwrap","soft-wrap","spam","spinner","staged","star-o","star","status_canceled_borderless","status_canceled","status_closed","status_created_borderless","status_created","status_failed_borderless","status_failed","status_manual_borderless","status_manual","status_notfound_borderless","status_notfound","status_open","status_pending_borderless","status_pending","status_running_borderless","status_running","status_skipped_borderless","status_skipped","status_success_borderless","status_success_solid","status_success","status_warning_borderless","status_warning","stop","task-done","template","terminal","thumb-down","thumb-up","thumbtack","timer","todo-add","todo-done","token","unapproval","unassignee","unlink","unstaged","user","users","volume-up","warning","work"]} \ No newline at end of file diff --git a/app/assets/images/icons.svg b/app/assets/images/icons.svg index 6aec54d0543..0dd09b4607f 100644 --- a/app/assets/images/icons.svg +++ b/app/assets/images/icons.svg @@ -1 +1 @@ - \ No newline at end of file +error \ No newline at end of file diff --git a/app/assets/images/illustrations/epics.svg b/app/assets/images/illustrations/epics.svg index 1a37e6bba5f..be6c3fb76a5 100644 --- a/app/assets/images/illustrations/epics.svg +++ b/app/assets/images/illustrations/epics.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/app/assets/images/illustrations/epics/list.svg b/app/assets/images/illustrations/epics/list.svg new file mode 100644 index 00000000000..be6c3fb76a5 --- /dev/null +++ b/app/assets/images/illustrations/epics/list.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/images/illustrations/epics/roadmap.svg b/app/assets/images/illustrations/epics/roadmap.svg new file mode 100644 index 00000000000..a14f14b91c9 --- /dev/null +++ b/app/assets/images/illustrations/epics/roadmap.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/images/illustrations/lock_promotion.svg b/app/assets/images/illustrations/lock_promotion.svg new file mode 100644 index 00000000000..6f1f9b2b030 --- /dev/null +++ b/app/assets/images/illustrations/lock_promotion.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/images/illustrations/milestone_removing-page.svg b/app/assets/images/illustrations/milestone_removing-page.svg new file mode 100644 index 00000000000..a8cd54da0d3 --- /dev/null +++ b/app/assets/images/illustrations/milestone_removing-page.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/images/illustrations/prometheus-graphs_empty.svg b/app/assets/images/illustrations/prometheus-graphs_empty.svg new file mode 100644 index 00000000000..0ef198f59cd --- /dev/null +++ b/app/assets/images/illustrations/prometheus-graphs_empty.svg @@ -0,0 +1 @@ +prometheus-graphs_empty \ No newline at end of file diff --git a/app/assets/images/illustrations/web-ide_promotion.svg b/app/assets/images/illustrations/web-ide_promotion.svg new file mode 100644 index 00000000000..ef61348057d --- /dev/null +++ b/app/assets/images/illustrations/web-ide_promotion.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 4d7dc1be854..7fb19bfc890 100644 --- a/yarn.lock +++ b/yarn.lock @@ -55,8 +55,8 @@ to-fast-properties "^2.0.0" "@gitlab-org/gitlab-svgs@^1.8.0": - version "1.8.0" - resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-svgs/-/gitlab-svgs-1.8.0.tgz#95d6afa94395860699ddad60a82bd1bbbc2ba89f" + version "1.11.0" + resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-svgs/-/gitlab-svgs-1.11.0.tgz#95615590b7b37b5eeb57e19272036f7f43a95337" "@types/jquery@^2.0.40": version "2.0.48" -- cgit v1.2.1 From 250fde7c13c9bd0f2fd2cdd117c81b03ee46c558 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Thu, 1 Mar 2018 18:21:01 +0000 Subject: Add deprecation warning to shared/milestones/top --- app/views/shared/milestones/_top.html.haml | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/app/views/shared/milestones/_top.html.haml b/app/views/shared/milestones/_top.html.haml index fd0760d83a5..574863800eb 100644 --- a/app/views/shared/milestones/_top.html.haml +++ b/app/views/shared/milestones/_top.html.haml @@ -30,6 +30,16 @@ - else = link_to 'Reopen Milestone', group_milestone_route(milestone, {state_event: :activate }), method: :put, class: "btn btn-grouped btn-reopen" +.deprecation-warning.prepend-top-default + = image_tag 'illustrations/milestone_removing-page.svg' + .inline + %strong.append-top-default This page will be removed in a future release. + %p + Use group milestones to manage issues from multiple projects in the same milestone. + %br + = button_tag 'Promote these project milestones into a group milestone.', class: 'btn-link' + %div= link_to 'Learn more', class: 'btn btn-default' + .detail-page-description.milestone-detail %h2.title = markdown_field(milestone, :title) -- cgit v1.2.1 From 49fad054393cfc4281d1152e291c8ed99ac76b9e Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Thu, 1 Mar 2018 18:21:14 +0000 Subject: Remove padding from btn-link css class --- app/assets/stylesheets/framework/buttons.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index c4b046a6d68..95e3573b43d 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -422,6 +422,10 @@ } } +.btn-link { + padding: 0; +} + .btn-link.btn-secondary-hover-link { color: $gl-text-color-secondary; -- cgit v1.2.1 From 72e0cdd0c7db019a761624ad961db27714b7c0fd Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Thu, 1 Mar 2018 19:52:51 +0000 Subject: Correct styling of deprecation warning --- app/views/shared/milestones/_top.html.haml | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/app/views/shared/milestones/_top.html.haml b/app/views/shared/milestones/_top.html.haml index 574863800eb..60d8f94ea0b 100644 --- a/app/views/shared/milestones/_top.html.haml +++ b/app/views/shared/milestones/_top.html.haml @@ -31,14 +31,14 @@ = link_to 'Reopen Milestone', group_milestone_route(milestone, {state_event: :activate }), method: :put, class: "btn btn-grouped btn-reopen" .deprecation-warning.prepend-top-default - = image_tag 'illustrations/milestone_removing-page.svg' - .inline - %strong.append-top-default This page will be removed in a future release. - %p + = image_tag 'illustrations/milestone_removing-page.svg', class: 'append-right-default' + .inline.vertical-align-middle + %strong This page will be removed in a future release. + %p.append-bottom-default.prepend-top-default Use group milestones to manage issues from multiple projects in the same milestone. %br = button_tag 'Promote these project milestones into a group milestone.', class: 'btn-link' - %div= link_to 'Learn more', class: 'btn btn-default' + %div= link_to 'Learn more', help_page_url('user/project/milestones', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default' .detail-page-description.milestone-detail %h2.title -- cgit v1.2.1 From 639e6144959553b69b0f1dade4aa0758fd87a4b6 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Thu, 1 Mar 2018 19:53:22 +0000 Subject: remove deprecation-warning container as its unused --- app/views/shared/milestones/_top.html.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/shared/milestones/_top.html.haml b/app/views/shared/milestones/_top.html.haml index 60d8f94ea0b..ad0d4d54a18 100644 --- a/app/views/shared/milestones/_top.html.haml +++ b/app/views/shared/milestones/_top.html.haml @@ -30,7 +30,7 @@ - else = link_to 'Reopen Milestone', group_milestone_route(milestone, {state_event: :activate }), method: :put, class: "btn btn-grouped btn-reopen" -.deprecation-warning.prepend-top-default +.prepend-top-default = image_tag 'illustrations/milestone_removing-page.svg', class: 'append-right-default' .inline.vertical-align-middle %strong This page will be removed in a future release. -- cgit v1.2.1 From a87d76240410c865cda1e35ec377a19af29ed207 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Sat, 3 Mar 2018 22:06:27 +0100 Subject: Add small-triangle class and add popup footer --- app/assets/stylesheets/framework/popup.scss | 27 ++++++++++++++++++++++++--- 1 file changed, 24 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/framework/popup.scss b/app/assets/stylesheets/framework/popup.scss index 5c76205095f..e21c32a90df 100644 --- a/app/assets/stylesheets/framework/popup.scss +++ b/app/assets/stylesheets/framework/popup.scss @@ -6,10 +6,31 @@ $popup-triangle-border-size ); - padding: $gl-padding; - background-color: $gray-lighter; + &.small-triangle { + @include triangle( + $gray-lighter, + $gray-darker, + $popup-triangle-size / 2, + $popup-triangle-border-size /2 + ); + } + border: 1px solid $gray-darker; - border-radius: $border-radius-default; box-shadow: 0 5px 8px $popup-box-shadow-color; position: relative; + + .body { + background-color: $gray-lighter; + padding: $gl-padding; + border-top-left-radius: $border-radius-default; + border-top-right-radius: $border-radius-default; + } + + .footer { + background-color: $white-light; + padding: $gl-padding; + border-bottom-left-radius: $border-radius-default; + border-bottom-right-radius: $border-radius-default; + border-top: 1px solid $white-dark; + } } -- cgit v1.2.1 From ed01f87c998a24312722972b6e4e84e63c68f137 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Sat, 3 Mar 2018 22:06:41 +0100 Subject: Custom deprecation message styles --- app/assets/stylesheets/pages/milestone.scss | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index e5afa8fffcb..ea67d3fcdeb 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -194,3 +194,27 @@ .issuable-row { background-color: $white-light; } + +.milestone-deprecation-message { + .popup { + max-width: 300px; + position: absolute; + left: 30px; + + .body { + padding: $gl-padding-8; + } + + .footer { + padding: $gl-padding-8 $gl-padding; + } + } + + .instructions-list { + padding: 0 0 0 30px; + } + + .text-container { + position: relative; + } +} \ No newline at end of file -- cgit v1.2.1 From 17e863be5279d452ac10df99ae6ce9f443d92375 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Sat, 3 Mar 2018 22:06:58 +0100 Subject: Create deprecation_message partial and use it --- .../milestones/_deprecation_message.html.haml | 23 ++++++++++++++++++++++ app/views/shared/milestones/_top.html.haml | 10 +--------- 2 files changed, 24 insertions(+), 9 deletions(-) create mode 100644 app/views/shared/milestones/_deprecation_message.html.haml diff --git a/app/views/shared/milestones/_deprecation_message.html.haml b/app/views/shared/milestones/_deprecation_message.html.haml new file mode 100644 index 00000000000..22fe445d64f --- /dev/null +++ b/app/views/shared/milestones/_deprecation_message.html.haml @@ -0,0 +1,23 @@ +.milestone-deprecation-message.prepend-top-default.js-toggle-container + = image_tag 'illustrations/milestone_removing-page.svg', class: 'append-right-default' + .inline.vertical-align-middle.text-container + %strong This page will be removed in a future release. + %p.append-bottom-default.prepend-top-5 + Use group milestones to manage issues from multiple projects in the same milestone. + %br + = button_tag 'Promote these project milestones into a group milestone.', class: 'btn-link js-toggle-button' + + .popup.js-toggle-content.hide.small-triangle + .body + %ol.instructions-list + %li + Click any + %strong project name + in the project list below to navigate to the project milestone. + %li + Click the + %strong Promote + button in the top right corner to promote it to a group milestone. + .footer= link_to 'Learn more', help_page_url('user/project/milestones', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn-link' + + %div= link_to 'Learn more', help_page_url('user/project/milestones', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default' \ No newline at end of file diff --git a/app/views/shared/milestones/_top.html.haml b/app/views/shared/milestones/_top.html.haml index ad0d4d54a18..9761c9181f2 100644 --- a/app/views/shared/milestones/_top.html.haml +++ b/app/views/shared/milestones/_top.html.haml @@ -30,15 +30,7 @@ - else = link_to 'Reopen Milestone', group_milestone_route(milestone, {state_event: :activate }), method: :put, class: "btn btn-grouped btn-reopen" -.prepend-top-default - = image_tag 'illustrations/milestone_removing-page.svg', class: 'append-right-default' - .inline.vertical-align-middle - %strong This page will be removed in a future release. - %p.append-bottom-default.prepend-top-default - Use group milestones to manage issues from multiple projects in the same milestone. - %br - = button_tag 'Promote these project milestones into a group milestone.', class: 'btn-link' - %div= link_to 'Learn more', help_page_url('user/project/milestones', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default' += render 'shared/milestones/deprecation_message' .detail-page-description.milestone-detail %h2.title -- cgit v1.2.1 From 7a8ec42ea7c097ead08ddb35721308d3b736f4d5 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Sat, 3 Mar 2018 22:10:18 +0100 Subject: Remove small-triangle --- app/assets/stylesheets/framework/popup.scss | 9 --------- app/assets/stylesheets/framework/variables.scss | 2 +- app/views/shared/milestones/_deprecation_message.html.haml | 2 +- 3 files changed, 2 insertions(+), 11 deletions(-) diff --git a/app/assets/stylesheets/framework/popup.scss b/app/assets/stylesheets/framework/popup.scss index e21c32a90df..faa827c7f62 100644 --- a/app/assets/stylesheets/framework/popup.scss +++ b/app/assets/stylesheets/framework/popup.scss @@ -6,15 +6,6 @@ $popup-triangle-border-size ); - &.small-triangle { - @include triangle( - $gray-lighter, - $gray-darker, - $popup-triangle-size / 2, - $popup-triangle-border-size /2 - ); - } - border: 1px solid $gray-darker; box-shadow: 0 5px 8px $popup-box-shadow-color; position: relative; diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 54e13f9d95c..ed5aa5ad07d 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -731,7 +731,7 @@ $image-comment-cursor-top-offset: 12; /* Popup */ -$popup-triangle-size: 15px; +$popup-triangle-size: 8px; $popup-triangle-border-size: 1px; $popup-box-shadow-color: rgba(90, 90, 90, 0.05); diff --git a/app/views/shared/milestones/_deprecation_message.html.haml b/app/views/shared/milestones/_deprecation_message.html.haml index 22fe445d64f..eb4e27de20b 100644 --- a/app/views/shared/milestones/_deprecation_message.html.haml +++ b/app/views/shared/milestones/_deprecation_message.html.haml @@ -7,7 +7,7 @@ %br = button_tag 'Promote these project milestones into a group milestone.', class: 'btn-link js-toggle-button' - .popup.js-toggle-content.hide.small-triangle + .popup.js-toggle-content.hide .body %ol.instructions-list %li -- cgit v1.2.1 From 3d6484aded227e04f1f6690de7a91a44ee9e5c15 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Sat, 3 Mar 2018 22:13:53 +0100 Subject: Make popup shadow slightly darker and larger to make new design --- app/assets/stylesheets/framework/popup.scss | 2 +- app/assets/stylesheets/framework/variables.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/framework/popup.scss b/app/assets/stylesheets/framework/popup.scss index faa827c7f62..a571151aef7 100644 --- a/app/assets/stylesheets/framework/popup.scss +++ b/app/assets/stylesheets/framework/popup.scss @@ -7,7 +7,7 @@ ); border: 1px solid $gray-darker; - box-shadow: 0 5px 8px $popup-box-shadow-color; + box-shadow: 0 5px 10px $popup-box-shadow-color; position: relative; .body { diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index ed5aa5ad07d..26f03948bae 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -733,7 +733,7 @@ Popup */ $popup-triangle-size: 8px; $popup-triangle-border-size: 1px; -$popup-box-shadow-color: rgba(90, 90, 90, 0.05); +$popup-box-shadow-color: rgba(90, 90, 90, 0.3); /* Multi file editor -- cgit v1.2.1 From 67b0ac73ae131fec5296e3c05aad311b432ec03b Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Sun, 4 Mar 2018 09:41:41 +0100 Subject: Only render deprecation message for deprecated milestones --- app/views/shared/milestones/_top.html.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/shared/milestones/_top.html.haml b/app/views/shared/milestones/_top.html.haml index 9761c9181f2..021e291bdc2 100644 --- a/app/views/shared/milestones/_top.html.haml +++ b/app/views/shared/milestones/_top.html.haml @@ -30,7 +30,7 @@ - else = link_to 'Reopen Milestone', group_milestone_route(milestone, {state_event: :activate }), method: :put, class: "btn btn-grouped btn-reopen" -= render 'shared/milestones/deprecation_message' += render 'shared/milestones/deprecation_message' if @milestone.legacy_group_milestone? || @milestone.dashboard_milestone? .detail-page-description.milestone-detail %h2.title -- cgit v1.2.1 From 4763f3153947610065eccc841aa85722d963d151 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Sun, 4 Mar 2018 09:44:15 +0100 Subject: Fix lints --- app/assets/stylesheets/framework/buttons.scss | 38 +++++++++++++-------------- app/assets/stylesheets/pages/milestone.scss | 4 +-- 2 files changed, 21 insertions(+), 21 deletions(-) diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index 95e3573b43d..b8a47b2cfdb 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -424,27 +424,27 @@ .btn-link { padding: 0; -} - -.btn-link.btn-secondary-hover-link { - color: $gl-text-color-secondary; - &:hover, - &:active, - &:focus { - color: $gl-link-color; - text-decoration: none; + &.btn-secondary-hover-link { + color: $gl-text-color-secondary; + + &:hover, + &:active, + &:focus { + color: $gl-link-color; + text-decoration: none; + } } -} - -.btn-link.btn-primary-hover-link { - color: inherit; - - &:hover, - &:active, - &:focus { - color: $gl-link-color; - text-decoration: none; + + &.btn-primary-hover-link { + color: inherit; + + &:hover, + &:active, + &:focus { + color: $gl-link-color; + text-decoration: none; + } } } diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index ea67d3fcdeb..9b5087caacf 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -204,7 +204,7 @@ .body { padding: $gl-padding-8; } - + .footer { padding: $gl-padding-8 $gl-padding; } @@ -217,4 +217,4 @@ .text-container { position: relative; } -} \ No newline at end of file +} -- cgit v1.2.1 From fb7189e369e491436d6ad9cab5c1cea48ff6232f Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Sun, 4 Mar 2018 11:35:42 +0100 Subject: Remove all instance milestone variables in favour of local variables --- app/views/shared/milestones/_top.html.haml | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/app/views/shared/milestones/_top.html.haml b/app/views/shared/milestones/_top.html.haml index 021e291bdc2..565d8807d0e 100644 --- a/app/views/shared/milestones/_top.html.haml +++ b/app/views/shared/milestones/_top.html.haml @@ -30,23 +30,23 @@ - else = link_to 'Reopen Milestone', group_milestone_route(milestone, {state_event: :activate }), method: :put, class: "btn btn-grouped btn-reopen" -= render 'shared/milestones/deprecation_message' if @milestone.legacy_group_milestone? || @milestone.dashboard_milestone? += render 'shared/milestones/deprecation_message' if milestone.legacy_group_milestone? || milestone.dashboard_milestone? .detail-page-description.milestone-detail %h2.title = markdown_field(milestone, :title) - - if @milestone.group_milestone? && @milestone.description.present? + - if milestone.group_milestone? && milestone.description.present? %div .description .wiki - = markdown_field(@milestone, :description) + = markdown_field(milestone, :description) - if milestone.complete?(current_user) && milestone.active? .alert.alert-success.prepend-top-default - close_msg = group ? 'You may close the milestone now.' : 'Navigate to the project to close the milestone.' %span All issues for this milestone are closed. #{close_msg} -- if @milestone.legacy_group_milestone? || @milestone.dashboard_milestone? +- if milestone.legacy_group_milestone? || milestone.dashboard_milestone? .table-holder %table.table %thead @@ -69,7 +69,7 @@ Open %td = ms.expires_at -- elsif @milestone.group_milestone? +- elsif milestone.group_milestone? %br View = link_to 'Issues', issues_group_path(@group, milestone_title: milestone.title) -- cgit v1.2.1 From c647787bc3d16f6bcc24e02eea2a5b3aad76f51c Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Mon, 5 Mar 2018 11:11:44 +0000 Subject: Added is_dymanic_milestone to top partial --- app/views/shared/milestones/_top.html.haml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/views/shared/milestones/_top.html.haml b/app/views/shared/milestones/_top.html.haml index 565d8807d0e..67a41926580 100644 --- a/app/views/shared/milestones/_top.html.haml +++ b/app/views/shared/milestones/_top.html.haml @@ -1,6 +1,6 @@ - page_title milestone.title, "Milestones" - - group = local_assigns[:group] +- is_dynamic_milestone = milestone.legacy_group_milestone? || milestone.dashboard_milestone? .detail-page-header %a.btn.btn-default.btn-grouped.pull-right.visible-xs-block.js-sidebar-toggle{ href: "#" } @@ -30,7 +30,7 @@ - else = link_to 'Reopen Milestone', group_milestone_route(milestone, {state_event: :activate }), method: :put, class: "btn btn-grouped btn-reopen" -= render 'shared/milestones/deprecation_message' if milestone.legacy_group_milestone? || milestone.dashboard_milestone? += render 'shared/milestones/deprecation_message' if is_dynamic_milestone .detail-page-description.milestone-detail %h2.title @@ -46,7 +46,7 @@ - close_msg = group ? 'You may close the milestone now.' : 'Navigate to the project to close the milestone.' %span All issues for this milestone are closed. #{close_msg} -- if milestone.legacy_group_milestone? || milestone.dashboard_milestone? +- if is_dynamic_milestone .table-holder %table.table %thead -- cgit v1.2.1 From eab81682b62eee96f14dd7391203627ea714a41d Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Mon, 5 Mar 2018 11:11:51 +0000 Subject: Add view spec for top --- spec/views/shared/milestones/_top.html.haml.rb | 35 ++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 spec/views/shared/milestones/_top.html.haml.rb diff --git a/spec/views/shared/milestones/_top.html.haml.rb b/spec/views/shared/milestones/_top.html.haml.rb new file mode 100644 index 00000000000..50efe1d5377 --- /dev/null +++ b/spec/views/shared/milestones/_top.html.haml.rb @@ -0,0 +1,35 @@ +require 'spec_helper' + +describe 'shared/milestones/_top.html.haml' do + let(:group) { create(:group) } + let(:project) { create(:project, group: group) } + let(:milestone) { create(:milestone, project: project) } + + before do + allow(milestone).to receive(:milestones) { [] } + end + + it 'renders a deprecation message for a legacy milestone' do + allow(milestone).to receive(:legacy_group_milestone?) { true } + + render 'shared/milestones/top', milestone: milestone + + expect(rendered).to have_css('.milestone-deprecation-message') + end + + it 'renders a deprecation message for a dashboard milestone' do + allow(milestone).to receive(:dashboard_milestone?) { true } + + render 'shared/milestones/top', milestone: milestone + + expect(rendered).to have_css('.milestone-deprecation-message') + end + + it 'does not render a deprecation message for a non-legacy and non-dashboard milestone' do + assign :group, group + + render 'shared/milestones/top', milestone: milestone + + expect(rendered).not_to have_css('.milestone-deprecation-message') + end +end -- cgit v1.2.1 From f1d5af4319a0eead31555adccc994e3d41c10a82 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Mon, 5 Mar 2018 11:58:57 +0000 Subject: Fix lint --- app/assets/stylesheets/framework/buttons.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index b8a47b2cfdb..c358e9e93de 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -427,7 +427,7 @@ &.btn-secondary-hover-link { color: $gl-text-color-secondary; - + &:hover, &:active, &:focus { @@ -435,10 +435,10 @@ text-decoration: none; } } - + &.btn-primary-hover-link { color: inherit; - + &:hover, &:active, &:focus { -- cgit v1.2.1 From 52a3bcf9e8782061d402890f2234380c166f7ca6 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Mon, 5 Mar 2018 12:54:08 +0000 Subject: Fix lint --- app/views/shared/milestones/_deprecation_message.html.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/shared/milestones/_deprecation_message.html.haml b/app/views/shared/milestones/_deprecation_message.html.haml index eb4e27de20b..668a4f09ee3 100644 --- a/app/views/shared/milestones/_deprecation_message.html.haml +++ b/app/views/shared/milestones/_deprecation_message.html.haml @@ -20,4 +20,4 @@ button in the top right corner to promote it to a group milestone. .footer= link_to 'Learn more', help_page_url('user/project/milestones', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn-link' - %div= link_to 'Learn more', help_page_url('user/project/milestones', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default' \ No newline at end of file + %div= link_to 'Learn more', help_page_url('user/project/milestones', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default' -- cgit v1.2.1 From 3308419b5bcf5b3fe8ac52ce72f122e024b4a4ce Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Mon, 5 Mar 2018 12:56:37 +0000 Subject: Fix docs link --- app/views/shared/milestones/_deprecation_message.html.haml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/views/shared/milestones/_deprecation_message.html.haml b/app/views/shared/milestones/_deprecation_message.html.haml index 668a4f09ee3..714739a1ca7 100644 --- a/app/views/shared/milestones/_deprecation_message.html.haml +++ b/app/views/shared/milestones/_deprecation_message.html.haml @@ -18,6 +18,6 @@ Click the %strong Promote button in the top right corner to promote it to a group milestone. - .footer= link_to 'Learn more', help_page_url('user/project/milestones', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn-link' + .footer= link_to 'Learn more', help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn-link' - %div= link_to 'Learn more', help_page_url('user/project/milestones', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default' + %div= link_to 'Learn more', help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default' -- cgit v1.2.1 From 35dc722f8071fad7731edd22e62c3c20a3daa9e4 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Fri, 9 Mar 2018 11:04:38 +0000 Subject: Change unneeded let to set --- spec/views/shared/milestones/_top.html.haml.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/spec/views/shared/milestones/_top.html.haml.rb b/spec/views/shared/milestones/_top.html.haml.rb index 50efe1d5377..516d81c87ac 100644 --- a/spec/views/shared/milestones/_top.html.haml.rb +++ b/spec/views/shared/milestones/_top.html.haml.rb @@ -1,7 +1,7 @@ require 'spec_helper' describe 'shared/milestones/_top.html.haml' do - let(:group) { create(:group) } + set(:group) { create(:group) } let(:project) { create(:project, group: group) } let(:milestone) { create(:milestone, project: project) } -- cgit v1.2.1 From f9dc1e86881f21b0960d0035c1e051c2e54fdd80 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Mon, 12 Mar 2018 14:40:17 +0000 Subject: Remove js-toggle classes --- app/views/shared/milestones/_deprecation_message.html.haml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/views/shared/milestones/_deprecation_message.html.haml b/app/views/shared/milestones/_deprecation_message.html.haml index 714739a1ca7..9f049e7bde1 100644 --- a/app/views/shared/milestones/_deprecation_message.html.haml +++ b/app/views/shared/milestones/_deprecation_message.html.haml @@ -1,13 +1,13 @@ -.milestone-deprecation-message.prepend-top-default.js-toggle-container +.milestone-deprecation-message.prepend-top-default = image_tag 'illustrations/milestone_removing-page.svg', class: 'append-right-default' .inline.vertical-align-middle.text-container %strong This page will be removed in a future release. %p.append-bottom-default.prepend-top-5 Use group milestones to manage issues from multiple projects in the same milestone. %br - = button_tag 'Promote these project milestones into a group milestone.', class: 'btn-link js-toggle-button' + = button_tag 'Promote these project milestones into a group milestone.', class: 'btn-blank' - .popup.js-toggle-content.hide + .popup.hide .body %ol.instructions-list %li -- cgit v1.2.1 From 9191f96ab762a5704165120a66131df24f61a272 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Mon, 12 Mar 2018 16:11:57 +0000 Subject: Fix illustration padding and center for mobiel --- app/assets/stylesheets/pages/milestone.scss | 8 ++++++++ app/views/shared/milestones/_deprecation_message.html.haml | 4 ++-- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index 9b5087caacf..b7fe269c7c8 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -217,4 +217,12 @@ .text-container { position: relative; } + + @media (max-width: $screen-xs-max) { + .illustration { + display: block; + text-align: center; + margin: $gl-padding 0; + } + } } diff --git a/app/views/shared/milestones/_deprecation_message.html.haml b/app/views/shared/milestones/_deprecation_message.html.haml index 9f049e7bde1..c9a5b273173 100644 --- a/app/views/shared/milestones/_deprecation_message.html.haml +++ b/app/views/shared/milestones/_deprecation_message.html.haml @@ -1,5 +1,5 @@ -.milestone-deprecation-message.prepend-top-default - = image_tag 'illustrations/milestone_removing-page.svg', class: 'append-right-default' +.milestone-deprecation-message.prepend-top-default.prepend-left-default + .illustration.inline= image_tag 'illustrations/milestone_removing-page.svg', class: 'append-right-default' .inline.vertical-align-middle.text-container %strong This page will be removed in a future release. %p.append-bottom-default.prepend-top-5 -- cgit v1.2.1 From e5f3696774d893bc2a83086939b090edd1775118 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Mon, 12 Mar 2018 16:19:08 +0000 Subject: Center everything on mobile instead and correct btn-link changes --- app/assets/stylesheets/framework/buttons.scss | 2 -- app/assets/stylesheets/pages/milestone.scss | 7 ++++++- app/views/shared/milestones/_deprecation_message.html.haml | 2 +- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index c358e9e93de..06dabcc77b5 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -423,8 +423,6 @@ } .btn-link { - padding: 0; - &.btn-secondary-hover-link { color: $gl-text-color-secondary; diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index b7fe269c7c8..1b9bab56979 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -218,10 +218,15 @@ position: relative; } + .btn-link { + padding: 0; + } + @media (max-width: $screen-xs-max) { + text-align: center; + .illustration { display: block; - text-align: center; margin: $gl-padding 0; } } diff --git a/app/views/shared/milestones/_deprecation_message.html.haml b/app/views/shared/milestones/_deprecation_message.html.haml index c9a5b273173..c32fca296bc 100644 --- a/app/views/shared/milestones/_deprecation_message.html.haml +++ b/app/views/shared/milestones/_deprecation_message.html.haml @@ -5,7 +5,7 @@ %p.append-bottom-default.prepend-top-5 Use group milestones to manage issues from multiple projects in the same milestone. %br - = button_tag 'Promote these project milestones into a group milestone.', class: 'btn-blank' + = button_tag 'Promote these project milestones into a group milestone.', class: 'btn-link' .popup.hide .body -- cgit v1.2.1 From 5a68a96ecb3cdba0e3da7aa210f98369e02359ab Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Tue, 13 Mar 2018 14:43:22 +0000 Subject: i8n --- .../milestones/_deprecation_message.html.haml | 30 ++++++++-------------- 1 file changed, 11 insertions(+), 19 deletions(-) diff --git a/app/views/shared/milestones/_deprecation_message.html.haml b/app/views/shared/milestones/_deprecation_message.html.haml index c32fca296bc..363ce62b73c 100644 --- a/app/views/shared/milestones/_deprecation_message.html.haml +++ b/app/views/shared/milestones/_deprecation_message.html.haml @@ -1,23 +1,15 @@ .milestone-deprecation-message.prepend-top-default.prepend-left-default .illustration.inline= image_tag 'illustrations/milestone_removing-page.svg', class: 'append-right-default' - .inline.vertical-align-middle.text-container - %strong This page will be removed in a future release. + .inline.vertical-align-middle + %strong= _('This page will be removed in a future release.') %p.append-bottom-default.prepend-top-5 - Use group milestones to manage issues from multiple projects in the same milestone. + = _('Use group milestones to manage issues from multiple projects in the same milestone.') %br - = button_tag 'Promote these project milestones into a group milestone.', class: 'btn-link' - - .popup.hide - .body - %ol.instructions-list - %li - Click any - %strong project name - in the project list below to navigate to the project milestone. - %li - Click the - %strong Promote - button in the top right corner to promote it to a group milestone. - .footer= link_to 'Learn more', help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn-link' - - %div= link_to 'Learn more', help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default' + = button_tag _('Promote these project milestones into a group milestone.'), class: 'btn-link popover-link' + %div= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default' + + %script.milestone-deprecation-message-template{ type: 'text/template' } + %ol.instructions-list.append-bottom-0 + %li= _('Click any project name in the project list below to navigate to the project milestone.') + %li= _('Click the Promote button in the top right corner to promote it to a group milestone.') + .footer= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn-link' \ No newline at end of file -- cgit v1.2.1 From ce3ff3b8450dbe8c33bdeb9eeabfb753228a1c2f Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Tue, 13 Mar 2018 14:43:27 +0000 Subject: add changellg --- changelogs/unreleased/deprecation-warning-for-dynamic-milestones.yml | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 changelogs/unreleased/deprecation-warning-for-dynamic-milestones.yml diff --git a/changelogs/unreleased/deprecation-warning-for-dynamic-milestones.yml b/changelogs/unreleased/deprecation-warning-for-dynamic-milestones.yml new file mode 100644 index 00000000000..3e1ac7b795d --- /dev/null +++ b/changelogs/unreleased/deprecation-warning-for-dynamic-milestones.yml @@ -0,0 +1,5 @@ +--- +title: Add deprecation message to dynamic milestone pages +merge_request: 17505 +author: +type: added -- cgit v1.2.1 From 607636b92080b3760568f36c341cbe71edfdc541 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Tue, 13 Mar 2018 14:43:39 +0000 Subject: Correct styling now we've changed to popover --- app/assets/stylesheets/pages/milestone.scss | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index 1b9bab56979..755a1eb5ee3 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -196,26 +196,26 @@ } .milestone-deprecation-message { - .popup { - max-width: 300px; - position: absolute; - left: 30px; + .popover { + padding: 0; - .body { - padding: $gl-padding-8; + .popover-content { + padding: 0; } .footer { + background-color: $white-light; padding: $gl-padding-8 $gl-padding; + border-bottom-left-radius: $border-radius-default; + border-bottom-right-radius: $border-radius-default; + border-top: 1px solid $white-dark; } - } - .instructions-list { - padding: 0 0 0 30px; - } - - .text-container { - position: relative; + .instructions-list { + list-style-position: inside; + padding: $gl-padding-8 20px; + background-color: $gray-light; + } } .btn-link { -- cgit v1.2.1 From 978d553ad00fad714dd926b5e38fe927fb72051f Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Tue, 13 Mar 2018 14:44:06 +0000 Subject: Init deprecation message. Incomplete. --- app/assets/javascripts/milestone.js | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/app/assets/javascripts/milestone.js b/app/assets/javascripts/milestone.js index b1d74250dfd..ab97fa50fd5 100644 --- a/app/assets/javascripts/milestone.js +++ b/app/assets/javascripts/milestone.js @@ -3,6 +3,7 @@ import flash from './flash'; export default class Milestone { constructor() { + Milestone.initDeprecationMessage(); this.bindTabsSwitching(); // Load merge request tab if it is active @@ -42,4 +43,37 @@ export default class Milestone { .catch(() => flash('Error loading milestone tab')); } } + + static initDeprecationMessage() { + const deprecationMesssage = document.querySelector('.milestone-deprecation-message'); + + if (!deprecationMesssage) return; + + const deprecationMesssageTemplate = deprecationMesssage.querySelector('.milestone-deprecation-message-template'); + const popoverLink = deprecationMesssage.querySelector('.popover-link'); + const $popoverLink = $(popoverLink); + + $popoverLink + .popover({ + html: true, + placement: 'bottom', + content: deprecationMesssageTemplate.innerHTML, + trigger: 'hover', + }) + .on('inserted.bs.popover', () => { + const $popover = $popoverLink.siblings('.popover').first(); + const $popoverContent = $('.popover-content', $popover); + + $popoverContent.on('mouseleave', () => { + $popoverContent.off('mouseleave'); + $popoverLink.popover('hide'); + }); + }) + .on('hidden.bs.popover', (event) => { + $(event.target).data('bs.popover').inState.click = false; + }) + .on('mouseleave', () => { + + }); + } } -- cgit v1.2.1 From a5ab67228f07f6fa1a5db7da07601643b87f23ff Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Tue, 20 Mar 2018 18:36:58 +0000 Subject: Fix translation strings and add _blank as link targets --- app/views/shared/milestones/_deprecation_message.html.haml | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/views/shared/milestones/_deprecation_message.html.haml b/app/views/shared/milestones/_deprecation_message.html.haml index 363ce62b73c..a92bfd3b9df 100644 --- a/app/views/shared/milestones/_deprecation_message.html.haml +++ b/app/views/shared/milestones/_deprecation_message.html.haml @@ -6,10 +6,10 @@ = _('Use group milestones to manage issues from multiple projects in the same milestone.') %br = button_tag _('Promote these project milestones into a group milestone.'), class: 'btn-link popover-link' - %div= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default' + %div= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default', target: '_blank' %script.milestone-deprecation-message-template{ type: 'text/template' } %ol.instructions-list.append-bottom-0 - %li= _('Click any project name in the project list below to navigate to the project milestone.') - %li= _('Click the Promote button in the top right corner to promote it to a group milestone.') - .footer= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn-link' \ No newline at end of file + %li= _('Click any project name in the project list below to navigate to the project milestone.').html_safe + %li= _('Click the Promote button in the top right corner to promote it to a group milestone.').html_safe + .footer= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn-link', target: '_blank' \ No newline at end of file -- cgit v1.2.1 From 0488d44cc2cc55808cf5aa17cb1b0c5423c958db Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Wed, 21 Mar 2018 18:23:33 +0000 Subject: Add popover --- app/assets/javascripts/shared/popover.js | 84 ++++++++++++++++++++++++++++++++ 1 file changed, 84 insertions(+) create mode 100644 app/assets/javascripts/shared/popover.js diff --git a/app/assets/javascripts/shared/popover.js b/app/assets/javascripts/shared/popover.js new file mode 100644 index 00000000000..48894c2b100 --- /dev/null +++ b/app/assets/javascripts/shared/popover.js @@ -0,0 +1,84 @@ +export default class Popover { + constructor(trigger, content) { + this.isOpen = false; + + this.$popover = $(trigger).popover({ + content, + html: true, + placement: 'bottom', + trigger: 'manual', + }); + } + + init() { + this.registerClickOpenListener(); + } + + openPopover() { + if (this.isOpen) return; + + this.$popover.popover('show'); + this.$popover.one('shown.bs.popover', this.enableClose.bind(this)); + this.isOpen = true; + } + + closePopover() { + if (!this.isOpen) return; + + this.$popover.popover('hide'); + this.disableClose(); + this.isOpen = false; + } + + closePopoverClick(event) { + const $target = $(event.target); + + if ($target.is(this.$popover) || + $target.is('.popover') || + $target.parents('.popover').length > 0) return; + + this.closePopover(); + } + + closePopoverMouseleave() { + setTimeout(() => { + if (this.$popover.is(':hover') || + (this.$popover.siblings('.popover').length > 0 && + this.$popover.siblings('.popover').is(':hover'))) return; + + this.closePopover(); + }, 1500); + } + + registerClickOpenListener() { + this.$popover.on('click.glPopover.open', this.openPopover.bind(this)); + } + + registerClickCloseListener() { + $(document.body).on('click.glPopover.close', this.closePopoverClick.bind(this)); + } + + registerMouseleaveCloseListener() { + this.$popover.on('mouseleave.glPopover.close', this.closePopoverMouseleave.bind(this)); + this.$popover.siblings('.popover').on('mouseleave.glPopover.close', this.closePopoverMouseleave.bind(this)); + } + + destroyMouseleaveCloseListener() { + this.$popover.off('mouseleave.glPopover.close'); + this.$popover.siblings('.popover').on('mouseleave.glPopover.close'); + } + + enableClose() { + this.registerClickCloseListener(); + this.registerMouseleaveCloseListener(); + } + + disableClose() { + Popover.destroyClickCloseListener(); + this.destroyMouseleaveCloseListener(); + } + + static destroyClickCloseListener() { + $(document.body).off('click.glPopover.close'); + } +} -- cgit v1.2.1 From 5595afe807c3c11d9c695c558da1210a25544387 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Wed, 21 Mar 2018 18:23:42 +0000 Subject: Impl popover for milestone deprecation --- app/assets/javascripts/milestone.js | 28 ++++------------------------ 1 file changed, 4 insertions(+), 24 deletions(-) diff --git a/app/assets/javascripts/milestone.js b/app/assets/javascripts/milestone.js index ab97fa50fd5..0f1dcc7e9e9 100644 --- a/app/assets/javascripts/milestone.js +++ b/app/assets/javascripts/milestone.js @@ -1,5 +1,6 @@ import axios from './lib/utils/axios_utils'; import flash from './flash'; +import Popover from './shared/popover'; export default class Milestone { constructor() { @@ -49,31 +50,10 @@ export default class Milestone { if (!deprecationMesssage) return; - const deprecationMesssageTemplate = deprecationMesssage.querySelector('.milestone-deprecation-message-template'); + const deprecationMesssageTemplate = deprecationMesssage.querySelector('.milestone-deprecation-message-template').innerHTML; const popoverLink = deprecationMesssage.querySelector('.popover-link'); - const $popoverLink = $(popoverLink); - $popoverLink - .popover({ - html: true, - placement: 'bottom', - content: deprecationMesssageTemplate.innerHTML, - trigger: 'hover', - }) - .on('inserted.bs.popover', () => { - const $popover = $popoverLink.siblings('.popover').first(); - const $popoverContent = $('.popover-content', $popover); - - $popoverContent.on('mouseleave', () => { - $popoverContent.off('mouseleave'); - $popoverLink.popover('hide'); - }); - }) - .on('hidden.bs.popover', (event) => { - $(event.target).data('bs.popover').inState.click = false; - }) - .on('mouseleave', () => { - - }); + const popover = new Popover(popoverLink, deprecationMesssageTemplate); + popover.init(); } } -- cgit v1.2.1 From e829c39d51d1d4b6b057307049764f7a1146f242 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Fri, 23 Mar 2018 19:13:54 +0000 Subject: Tidy timeout and add jquery --- app/assets/javascripts/shared/popover.js | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/app/assets/javascripts/shared/popover.js b/app/assets/javascripts/shared/popover.js index 48894c2b100..ae4bfa1c916 100644 --- a/app/assets/javascripts/shared/popover.js +++ b/app/assets/javascripts/shared/popover.js @@ -1,3 +1,5 @@ +import $ from 'jquery'; + export default class Popover { constructor(trigger, content) { this.isOpen = false; @@ -41,13 +43,15 @@ export default class Popover { } closePopoverMouseleave() { - setTimeout(() => { - if (this.$popover.is(':hover') || - (this.$popover.siblings('.popover').length > 0 && - this.$popover.siblings('.popover').is(':hover'))) return; + if (this.$popover.is(':hover') || + (this.$popover.siblings('.popover').length > 0 && + this.$popover.siblings('.popover').is(':hover'))) return; + + this.closePopover(); + } - this.closePopover(); - }, 1500); + closePopoverMouseleaveDelayed() { + setTimeout(this.closePopoverMouseleave.bind(this), 1500); } registerClickOpenListener() { @@ -59,8 +63,8 @@ export default class Popover { } registerMouseleaveCloseListener() { - this.$popover.on('mouseleave.glPopover.close', this.closePopoverMouseleave.bind(this)); - this.$popover.siblings('.popover').on('mouseleave.glPopover.close', this.closePopoverMouseleave.bind(this)); + this.$popover.on('mouseleave.glPopover.close', this.closePopoverMouseleaveDelayed.bind(this)); + this.$popover.siblings('.popover').on('mouseleave.glPopover.close', this.closePopoverMouseleaveDelayed.bind(this)); } destroyMouseleaveCloseListener() { -- cgit v1.2.1 From daf2a79b2d55e922e7a5d5b1ac746d0b1452317e Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Fri, 23 Mar 2018 19:14:09 +0000 Subject: Add milestone deprecation feature spec --- spec/features/milestone_spec.rb | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/spec/features/milestone_spec.rb b/spec/features/milestone_spec.rb index 19152bf1f0f..3cb8e088da8 100644 --- a/spec/features/milestone_spec.rb +++ b/spec/features/milestone_spec.rb @@ -108,4 +108,18 @@ feature 'Milestone' do expect(page).to have_selector('.js-delete-milestone-button', count: 0) end end + + feature 'deprecation popover', :js do + it 'opens deprecation popover' do + milestone = create(:milestone, project: project) + + visit group_milestone_path(group, milestone, title: milestone.title) + + expect(page).to have_selector('.milestone-deprecation-message') + + find('.milestone-deprecation-message .popover-link').click + + expect(page).to have_selector('.milestone-deprecation-message .popover') + end + end end -- cgit v1.2.1 From 8f3e53eef138e9b9790437c86434492aab51ada1 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Fri, 23 Mar 2018 19:31:32 +0000 Subject: remove unneeded svg commits --- app/assets/images/icons.json | 1 - app/assets/images/icons.svg | 1 - app/assets/images/illustrations/epics.svg | 1 - app/assets/images/illustrations/epics/list.svg | 1 - app/assets/images/illustrations/epics/roadmap.svg | 1 - app/assets/images/illustrations/lock_promotion.svg | 1 - app/assets/images/illustrations/milestone_removing-page.svg | 1 - app/assets/images/illustrations/prometheus-graphs_empty.svg | 1 - app/assets/images/illustrations/web-ide_promotion.svg | 1 - 9 files changed, 9 deletions(-) delete mode 100644 app/assets/images/icons.json delete mode 100644 app/assets/images/icons.svg delete mode 100644 app/assets/images/illustrations/epics.svg delete mode 100644 app/assets/images/illustrations/epics/list.svg delete mode 100644 app/assets/images/illustrations/epics/roadmap.svg delete mode 100644 app/assets/images/illustrations/lock_promotion.svg delete mode 100644 app/assets/images/illustrations/milestone_removing-page.svg delete mode 100644 app/assets/images/illustrations/prometheus-graphs_empty.svg delete mode 100644 app/assets/images/illustrations/web-ide_promotion.svg diff --git a/app/assets/images/icons.json b/app/assets/images/icons.json deleted file mode 100644 index b78dc6a2f07..00000000000 --- a/app/assets/images/icons.json +++ /dev/null @@ -1 +0,0 @@ -{"iconCount":196,"spriteSize":88552,"icons":["abuse","account","admin","angle-double-left","angle-double-right","angle-down","angle-left","angle-right","angle-up","appearance","applications","approval","arrow-down","arrow-right","assignee","blame","bold","book","bookmark","branch","bullhorn","calendar","cancel","chart","chevron-down","chevron-left","chevron-right","chevron-up","clock","close","code","collapse","comment-dots","comment-next","comment","comments","commit","compress","credit-card","cut","dashboard","disk","doc_code","doc_image","doc_text","double-headed-arrow","download","duplicate","earth","ellipsis_v","emoji_slightly_smiling_face","emoji_smile","emoji_smiley","epic","error","expand","external-link","eye-slash","eye","file-addition","file-deletion","file-modified","filter","folder-o","folder-open","folder","fork","geo-nodes","git-merge","group","history","home","hook","hourglass","image-comment-dark","image-comment-light","import","issue-block","issue-child","issue-close","issue-duplicate","issue-external","issue-new","issue-open-m","issue-open","issue-parent","issues","italic","key-2","key","label","labels","leave","level-up","license","link","list-bulleted","list-numbered","location-dot","location","lock-open","lock","log","mail","menu","merge-request-close","messages","mobile-issue-close","monitor-lines","monitor","more","notifications-off","notifications","overview","pencil-square","pencil","pipeline","play","plus-square-o","plus-square","plus","podcast","preferences","profile","project","push-rules","question-o","question","quote","redo","remove","repeat","retry","scale","screen-full","screen-normal","scroll_down","scroll_up","search","settings","shield","slight-frown","slight-smile","smile","smiley","snippet","soft-unwrap","soft-wrap","spam","spinner","staged","star-o","star","status_canceled_borderless","status_canceled","status_closed","status_created_borderless","status_created","status_failed_borderless","status_failed","status_manual_borderless","status_manual","status_notfound_borderless","status_notfound","status_open","status_pending_borderless","status_pending","status_running_borderless","status_running","status_skipped_borderless","status_skipped","status_success_borderless","status_success_solid","status_success","status_warning_borderless","status_warning","stop","task-done","template","terminal","thumb-down","thumb-up","thumbtack","timer","todo-add","todo-done","token","unapproval","unassignee","unlink","unstaged","user","users","volume-up","warning","work"]} \ No newline at end of file diff --git a/app/assets/images/icons.svg b/app/assets/images/icons.svg deleted file mode 100644 index 0dd09b4607f..00000000000 --- a/app/assets/images/icons.svg +++ /dev/null @@ -1 +0,0 @@ -error \ No newline at end of file diff --git a/app/assets/images/illustrations/epics.svg b/app/assets/images/illustrations/epics.svg deleted file mode 100644 index be6c3fb76a5..00000000000 --- a/app/assets/images/illustrations/epics.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/assets/images/illustrations/epics/list.svg b/app/assets/images/illustrations/epics/list.svg deleted file mode 100644 index be6c3fb76a5..00000000000 --- a/app/assets/images/illustrations/epics/list.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/assets/images/illustrations/epics/roadmap.svg b/app/assets/images/illustrations/epics/roadmap.svg deleted file mode 100644 index a14f14b91c9..00000000000 --- a/app/assets/images/illustrations/epics/roadmap.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/assets/images/illustrations/lock_promotion.svg b/app/assets/images/illustrations/lock_promotion.svg deleted file mode 100644 index 6f1f9b2b030..00000000000 --- a/app/assets/images/illustrations/lock_promotion.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/assets/images/illustrations/milestone_removing-page.svg b/app/assets/images/illustrations/milestone_removing-page.svg deleted file mode 100644 index a8cd54da0d3..00000000000 --- a/app/assets/images/illustrations/milestone_removing-page.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/assets/images/illustrations/prometheus-graphs_empty.svg b/app/assets/images/illustrations/prometheus-graphs_empty.svg deleted file mode 100644 index 0ef198f59cd..00000000000 --- a/app/assets/images/illustrations/prometheus-graphs_empty.svg +++ /dev/null @@ -1 +0,0 @@ -prometheus-graphs_empty \ No newline at end of file diff --git a/app/assets/images/illustrations/web-ide_promotion.svg b/app/assets/images/illustrations/web-ide_promotion.svg deleted file mode 100644 index ef61348057d..00000000000 --- a/app/assets/images/illustrations/web-ide_promotion.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file -- cgit v1.2.1 From 08290d2c43b0ae4d6689c9ca197f4f3f6fe6de70 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Mon, 26 Mar 2018 13:29:43 +0100 Subject: Fix lint --- app/views/shared/milestones/_deprecation_message.html.haml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/views/shared/milestones/_deprecation_message.html.haml b/app/views/shared/milestones/_deprecation_message.html.haml index a92bfd3b9df..7fff0dd6204 100644 --- a/app/views/shared/milestones/_deprecation_message.html.haml +++ b/app/views/shared/milestones/_deprecation_message.html.haml @@ -7,9 +7,9 @@ %br = button_tag _('Promote these project milestones into a group milestone.'), class: 'btn-link popover-link' %div= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default', target: '_blank' - - %script.milestone-deprecation-message-template{ type: 'text/template' } + + %template.milestone-deprecation-message-template %ol.instructions-list.append-bottom-0 %li= _('Click any project name in the project list below to navigate to the project milestone.').html_safe %li= _('Click the Promote button in the top right corner to promote it to a group milestone.').html_safe - .footer= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn-link', target: '_blank' \ No newline at end of file + .footer= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn-link', target: '_blank' -- cgit v1.2.1 From 60432a4a7873e2b5f8ddee0d7252b1967a3a3872 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Mon, 26 Mar 2018 18:46:42 +0100 Subject: review --- .../feature_highlight/feature_highlight.js | 5 +- .../feature_highlight/feature_highlight_helper.js | 31 +------ app/assets/javascripts/milestone.js | 20 ++-- app/assets/javascripts/shared/popover.js | 102 +++++---------------- app/assets/stylesheets/framework/popup.scss | 20 +--- app/assets/stylesheets/pages/milestone.scss | 12 +-- .../milestones/_deprecation_message.html.haml | 11 ++- 7 files changed, 58 insertions(+), 143 deletions(-) diff --git a/app/assets/javascripts/feature_highlight/feature_highlight.js b/app/assets/javascripts/feature_highlight/feature_highlight.js index c50ac667c20..a3eaf5b32cd 100644 --- a/app/assets/javascripts/feature_highlight/feature_highlight.js +++ b/app/assets/javascripts/feature_highlight/feature_highlight.js @@ -5,7 +5,7 @@ import { togglePopover, inserted, mouseenter, - mouseleave, + debouncedMouseleave, } from './feature_highlight_helper'; export function setupFeatureHighlightPopover(id, debounceTimeout = 300) { @@ -13,7 +13,6 @@ export function setupFeatureHighlightPopover(id, debounceTimeout = 300) { const $parent = $selector.parent(); const $popoverContent = $parent.siblings('.feature-highlight-popover-content'); const hideOnScroll = togglePopover.bind($selector, false); - const debouncedMouseleave = _.debounce(mouseleave, debounceTimeout); $selector // Setup popover @@ -29,7 +28,7 @@ export function setupFeatureHighlightPopover(id, debounceTimeout = 300) { `, }) .on('mouseenter', mouseenter) - .on('mouseleave', debouncedMouseleave) + .on('mouseleave', debouncedMouseleave(debounceTimeout)) .on('inserted.bs.popover', inserted) .on('show.bs.popover', () => { window.addEventListener('scroll', hideOnScroll); diff --git a/app/assets/javascripts/feature_highlight/feature_highlight_helper.js b/app/assets/javascripts/feature_highlight/feature_highlight_helper.js index f480e72961c..bcc7cefc2f2 100644 --- a/app/assets/javascripts/feature_highlight/feature_highlight_helper.js +++ b/app/assets/javascripts/feature_highlight/feature_highlight_helper.js @@ -3,20 +3,10 @@ import axios from '../lib/utils/axios_utils'; import { __ } from '../locale'; import Flash from '../flash'; import LazyLoader from '../lazy_loader'; +import { togglePopover, mouseenter, debouncedMouseleave } from '../shared/popover'; export const getSelector = highlightId => `.js-feature-highlight[data-highlight=${highlightId}]`; -export function togglePopover(show) { - const isAlreadyShown = this.hasClass('js-popover-show'); - if ((show && isAlreadyShown) || (!show && !isAlreadyShown)) { - return false; - } - this.popover(show ? 'show' : 'hide'); - this.toggleClass('disable-animation js-popover-show', show); - - return true; -} - export function dismiss(highlightId) { axios.post(this.attr('data-dismiss-endpoint'), { feature_name: highlightId, @@ -27,23 +17,6 @@ export function dismiss(highlightId) { this.hide(); } -export function mouseleave() { - if (!$('.popover:hover').length > 0) { - const $featureHighlight = $(this); - togglePopover.call($featureHighlight, false); - } -} - -export function mouseenter() { - const $featureHighlight = $(this); - - const showedPopover = togglePopover.call($featureHighlight, true); - if (showedPopover) { - $('.popover') - .on('mouseleave', mouseleave.bind($featureHighlight)); - } -} - export function inserted() { const popoverId = this.getAttribute('aria-describedby'); const highlightId = this.dataset.highlight; @@ -58,3 +31,5 @@ export function inserted() { LazyLoader.loadImage(lazyImg); } } + +export { togglePopover, mouseenter, debouncedMouseleave }; diff --git a/app/assets/javascripts/milestone.js b/app/assets/javascripts/milestone.js index 22aeb396318..5a7843f3093 100644 --- a/app/assets/javascripts/milestone.js +++ b/app/assets/javascripts/milestone.js @@ -1,7 +1,7 @@ import $ from 'jquery'; import axios from './lib/utils/axios_utils'; import flash from './flash'; -import Popover from './shared/popover'; +import { mouseenter, debouncedMouseleave } from './shared/popover'; export default class Milestone { constructor() { @@ -47,14 +47,20 @@ export default class Milestone { } static initDeprecationMessage() { - const deprecationMesssage = document.querySelector('.milestone-deprecation-message'); + const deprecationMesssageContainer = document.querySelector('.milestone-deprecation-message'); - if (!deprecationMesssage) return; + if (!deprecationMesssageContainer) return; - const deprecationMesssageTemplate = deprecationMesssage.querySelector('.milestone-deprecation-message-template').innerHTML; - const popoverLink = deprecationMesssage.querySelector('.popover-link'); + const deprecationMessage = deprecationMesssageContainer.querySelector('.milestone-deprecation-message-template').innerHTML; + const popoverLink = deprecationMesssageContainer.querySelector('.popover-link'); - const popover = new Popover(popoverLink, deprecationMesssageTemplate); - popover.init(); + $(popoverLink).popover({ + content: deprecationMessage, + html: true, + placement: 'bottom', + trigger: 'manual', + }) + .on('mouseenter', mouseenter) + .on('mouseleave', debouncedMouseleave()); } } diff --git a/app/assets/javascripts/shared/popover.js b/app/assets/javascripts/shared/popover.js index ae4bfa1c916..8df52cfce2b 100644 --- a/app/assets/javascripts/shared/popover.js +++ b/app/assets/javascripts/shared/popover.js @@ -1,88 +1,34 @@ import $ from 'jquery'; +import { debounce } from 'underscore'; -export default class Popover { - constructor(trigger, content) { - this.isOpen = false; - - this.$popover = $(trigger).popover({ - content, - html: true, - placement: 'bottom', - trigger: 'manual', - }); - } - - init() { - this.registerClickOpenListener(); - } - - openPopover() { - if (this.isOpen) return; - - this.$popover.popover('show'); - this.$popover.one('shown.bs.popover', this.enableClose.bind(this)); - this.isOpen = true; +export function togglePopover(show) { + const isAlreadyShown = this.hasClass('js-popover-show'); + if ((show && isAlreadyShown) || (!show && !isAlreadyShown)) { + return false; } + this.popover(show ? 'show' : 'hide'); + this.toggleClass('disable-animation js-popover-show', show); - closePopover() { - if (!this.isOpen) return; - - this.$popover.popover('hide'); - this.disableClose(); - this.isOpen = false; - } - - closePopoverClick(event) { - const $target = $(event.target); - - if ($target.is(this.$popover) || - $target.is('.popover') || - $target.parents('.popover').length > 0) return; - - this.closePopover(); - } - - closePopoverMouseleave() { - if (this.$popover.is(':hover') || - (this.$popover.siblings('.popover').length > 0 && - this.$popover.siblings('.popover').is(':hover'))) return; - - this.closePopover(); - } - - closePopoverMouseleaveDelayed() { - setTimeout(this.closePopoverMouseleave.bind(this), 1500); - } - - registerClickOpenListener() { - this.$popover.on('click.glPopover.open', this.openPopover.bind(this)); - } - - registerClickCloseListener() { - $(document.body).on('click.glPopover.close', this.closePopoverClick.bind(this)); - } - - registerMouseleaveCloseListener() { - this.$popover.on('mouseleave.glPopover.close', this.closePopoverMouseleaveDelayed.bind(this)); - this.$popover.siblings('.popover').on('mouseleave.glPopover.close', this.closePopoverMouseleaveDelayed.bind(this)); - } - - destroyMouseleaveCloseListener() { - this.$popover.off('mouseleave.glPopover.close'); - this.$popover.siblings('.popover').on('mouseleave.glPopover.close'); - } + return true; +} - enableClose() { - this.registerClickCloseListener(); - this.registerMouseleaveCloseListener(); +export function mouseleave() { + if (!$('.popover:hover').length > 0) { + const $popover = $(this); + togglePopover.call($popover, false); } +} - disableClose() { - Popover.destroyClickCloseListener(); - this.destroyMouseleaveCloseListener(); - } +export function mouseenter() { + const $popover = $(this); - static destroyClickCloseListener() { - $(document.body).off('click.glPopover.close'); + const showedPopover = togglePopover.call($popover, true); + if (showedPopover) { + $('.popover') + .on('mouseleave', mouseleave.bind($popover)); } } + +export function debouncedMouseleave(debounceTimeout = 300) { + return debounce(mouseleave, debounceTimeout); +} \ No newline at end of file diff --git a/app/assets/stylesheets/framework/popup.scss b/app/assets/stylesheets/framework/popup.scss index a571151aef7..5c76205095f 100644 --- a/app/assets/stylesheets/framework/popup.scss +++ b/app/assets/stylesheets/framework/popup.scss @@ -6,22 +6,10 @@ $popup-triangle-border-size ); + padding: $gl-padding; + background-color: $gray-lighter; border: 1px solid $gray-darker; - box-shadow: 0 5px 10px $popup-box-shadow-color; + border-radius: $border-radius-default; + box-shadow: 0 5px 8px $popup-box-shadow-color; position: relative; - - .body { - background-color: $gray-lighter; - padding: $gl-padding; - border-top-left-radius: $border-radius-default; - border-top-right-radius: $border-radius-default; - } - - .footer { - background-color: $white-light; - padding: $gl-padding; - border-bottom-left-radius: $border-radius-default; - border-bottom-right-radius: $border-radius-default; - border-top: 1px solid $white-dark; - } } diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index 755a1eb5ee3..d00eda0bc30 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -203,18 +203,18 @@ padding: 0; } + .body { + padding: 8px 15px 8px 30px; + background-color: $gray-light; + } + .footer { - background-color: $white-light; padding: $gl-padding-8 $gl-padding; - border-bottom-left-radius: $border-radius-default; - border-bottom-right-radius: $border-radius-default; border-top: 1px solid $white-dark; } .instructions-list { - list-style-position: inside; - padding: $gl-padding-8 20px; - background-color: $gray-light; + padding: 0; } } diff --git a/app/views/shared/milestones/_deprecation_message.html.haml b/app/views/shared/milestones/_deprecation_message.html.haml index 7fff0dd6204..0288a102e02 100644 --- a/app/views/shared/milestones/_deprecation_message.html.haml +++ b/app/views/shared/milestones/_deprecation_message.html.haml @@ -5,11 +5,12 @@ %p.append-bottom-default.prepend-top-5 = _('Use group milestones to manage issues from multiple projects in the same milestone.') %br - = button_tag _('Promote these project milestones into a group milestone.'), class: 'btn-link popover-link' + = button_tag _('Promote these project milestones into a group milestone.'), class: 'btn-link popover-link prepend-left-0' %div= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default', target: '_blank' %template.milestone-deprecation-message-template - %ol.instructions-list.append-bottom-0 - %li= _('Click any project name in the project list below to navigate to the project milestone.').html_safe - %li= _('Click the Promote button in the top right corner to promote it to a group milestone.').html_safe - .footer= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn-link', target: '_blank' + .body + %ol.instructions-list.append-bottom-0 + %li= _('Click any project name in the project list below to navigate to the project milestone.').html_safe + %li= _('Click the Promote button in the top right corner to promote it to a group milestone.').html_safe + .footer= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn-link prepend-left-0', target: '_blank' -- cgit v1.2.1 From 77ee14280e48987274ea9e6ce7ed8181de7f37a3 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Tue, 27 Mar 2018 16:15:18 +0100 Subject: Lint fix --- app/assets/javascripts/feature_highlight/feature_highlight.js | 1 - app/assets/javascripts/shared/popover.js | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/app/assets/javascripts/feature_highlight/feature_highlight.js b/app/assets/javascripts/feature_highlight/feature_highlight.js index a3eaf5b32cd..983f4eaf4c7 100644 --- a/app/assets/javascripts/feature_highlight/feature_highlight.js +++ b/app/assets/javascripts/feature_highlight/feature_highlight.js @@ -1,5 +1,4 @@ import $ from 'jquery'; -import _ from 'underscore'; import { getSelector, togglePopover, diff --git a/app/assets/javascripts/shared/popover.js b/app/assets/javascripts/shared/popover.js index 8df52cfce2b..66d4bec973f 100644 --- a/app/assets/javascripts/shared/popover.js +++ b/app/assets/javascripts/shared/popover.js @@ -31,4 +31,4 @@ export function mouseenter() { export function debouncedMouseleave(debounceTimeout = 300) { return debounce(mouseleave, debounceTimeout); -} \ No newline at end of file +} -- cgit v1.2.1 From 4950f3a5eef331f33df8fafd7ada5de5505a43e5 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Tue, 27 Mar 2018 18:17:36 +0100 Subject: Review changes --- .../javascripts/feature_highlight/feature_highlight.js | 6 ++++-- .../feature_highlight/feature_highlight_helper.js | 4 +--- app/assets/javascripts/milestone.js | 16 +++++++++++----- app/assets/javascripts/shared/popover.js | 3 +-- app/assets/stylesheets/framework/variables.scss | 4 ++-- app/assets/stylesheets/pages/milestone.scss | 15 +++++++++------ .../shared/milestones/_deprecation_message.html.haml | 6 +++--- 7 files changed, 31 insertions(+), 23 deletions(-) diff --git a/app/assets/javascripts/feature_highlight/feature_highlight.js b/app/assets/javascripts/feature_highlight/feature_highlight.js index 983f4eaf4c7..0d385ab0aac 100644 --- a/app/assets/javascripts/feature_highlight/feature_highlight.js +++ b/app/assets/javascripts/feature_highlight/feature_highlight.js @@ -1,11 +1,13 @@ import $ from 'jquery'; import { getSelector, - togglePopover, inserted, +} from './feature_highlight_helper'; +import { + togglePopover, mouseenter, debouncedMouseleave, -} from './feature_highlight_helper'; +} from '../shared/popover'; export function setupFeatureHighlightPopover(id, debounceTimeout = 300) { const $selector = $(getSelector(id)); diff --git a/app/assets/javascripts/feature_highlight/feature_highlight_helper.js b/app/assets/javascripts/feature_highlight/feature_highlight_helper.js index bcc7cefc2f2..d5b97ebb264 100644 --- a/app/assets/javascripts/feature_highlight/feature_highlight_helper.js +++ b/app/assets/javascripts/feature_highlight/feature_highlight_helper.js @@ -3,7 +3,7 @@ import axios from '../lib/utils/axios_utils'; import { __ } from '../locale'; import Flash from '../flash'; import LazyLoader from '../lazy_loader'; -import { togglePopover, mouseenter, debouncedMouseleave } from '../shared/popover'; +import { togglePopover } from '../shared/popover'; export const getSelector = highlightId => `.js-feature-highlight[data-highlight=${highlightId}]`; @@ -31,5 +31,3 @@ export function inserted() { LazyLoader.loadImage(lazyImg); } } - -export { togglePopover, mouseenter, debouncedMouseleave }; diff --git a/app/assets/javascripts/milestone.js b/app/assets/javascripts/milestone.js index 5a7843f3093..714b543db04 100644 --- a/app/assets/javascripts/milestone.js +++ b/app/assets/javascripts/milestone.js @@ -1,7 +1,7 @@ import $ from 'jquery'; import axios from './lib/utils/axios_utils'; import flash from './flash'; -import { mouseenter, debouncedMouseleave } from './shared/popover'; +import { mouseenter, debouncedMouseleave, togglePopover } from './shared/popover'; export default class Milestone { constructor() { @@ -52,15 +52,21 @@ export default class Milestone { if (!deprecationMesssageContainer) return; const deprecationMessage = deprecationMesssageContainer.querySelector('.milestone-deprecation-message-template').innerHTML; - const popoverLink = deprecationMesssageContainer.querySelector('.popover-link'); + const $popover = $('.popover-link', deprecationMesssageContainer); + const hideOnScroll = togglePopover.bind($popover, false); - $(popoverLink).popover({ + $popover.popover({ content: deprecationMessage, html: true, placement: 'bottom', - trigger: 'manual', }) .on('mouseenter', mouseenter) - .on('mouseleave', debouncedMouseleave()); + .on('mouseleave', debouncedMouseleave()) + .on('show.bs.popover', () => { + window.addEventListener('scroll', hideOnScroll); + }) + .on('hide.bs.popover', () => { + window.removeEventListener('scroll', hideOnScroll); + }); } } diff --git a/app/assets/javascripts/shared/popover.js b/app/assets/javascripts/shared/popover.js index 66d4bec973f..b406571a1db 100644 --- a/app/assets/javascripts/shared/popover.js +++ b/app/assets/javascripts/shared/popover.js @@ -24,8 +24,7 @@ export function mouseenter() { const showedPopover = togglePopover.call($popover, true); if (showedPopover) { - $('.popover') - .on('mouseleave', mouseleave.bind($popover)); + $('.popover').on('mouseleave', mouseleave.bind($popover)); } } diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index b8e0811e92c..a81904d5338 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -754,9 +754,9 @@ $image-comment-cursor-top-offset: 12; /* Popup */ -$popup-triangle-size: 8px; +$popup-triangle-size: 15px; $popup-triangle-border-size: 1px; -$popup-box-shadow-color: rgba(90, 90, 90, 0.3); +$popup-box-shadow-color: rgba(90, 90, 90, 0.05); /* Multi file editor diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index d00eda0bc30..0c00ee0a98c 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -203,18 +203,21 @@ padding: 0; } - .body { - padding: 8px 15px 8px 30px; - background-color: $gray-light; + .milestone-popover-body { + padding: $gl-padding-8; } - .footer { + .milestone-popover-footer { padding: $gl-padding-8 $gl-padding; border-top: 1px solid $white-dark; } - .instructions-list { - padding: 0; + .milestone-popover-instructions-list { + padding-left: 2em; + + & > li { + padding-left: 1em; + } } } diff --git a/app/views/shared/milestones/_deprecation_message.html.haml b/app/views/shared/milestones/_deprecation_message.html.haml index 0288a102e02..38799003c11 100644 --- a/app/views/shared/milestones/_deprecation_message.html.haml +++ b/app/views/shared/milestones/_deprecation_message.html.haml @@ -9,8 +9,8 @@ %div= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default', target: '_blank' %template.milestone-deprecation-message-template - .body - %ol.instructions-list.append-bottom-0 + .milestone-popover-body + %ol.milestone-popover-instructions-list.append-bottom-0 %li= _('Click any project name in the project list below to navigate to the project milestone.').html_safe %li= _('Click the Promote button in the top right corner to promote it to a group milestone.').html_safe - .footer= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn-link prepend-left-0', target: '_blank' + .milestone-popover-footer= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn-link prepend-left-0', target: '_blank' -- cgit v1.2.1 From 37a2ac7765d401a56d6e9f37dfa3ff5e62e9c949 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Wed, 28 Mar 2018 03:45:36 +0100 Subject: Fix spec import --- .../feature_highlight/feature_highlight_helper_spec.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/spec/javascripts/feature_highlight/feature_highlight_helper_spec.js b/spec/javascripts/feature_highlight/feature_highlight_helper_spec.js index 480c138b9db..e0fa50c68e2 100644 --- a/spec/javascripts/feature_highlight/feature_highlight_helper_spec.js +++ b/spec/javascripts/feature_highlight/feature_highlight_helper_spec.js @@ -3,12 +3,15 @@ import MockAdapter from 'axios-mock-adapter'; import axios from '~/lib/utils/axios_utils'; import { getSelector, - togglePopover, dismiss, - mouseleave, - mouseenter, inserted, } from '~/feature_highlight/feature_highlight_helper'; +import { + togglePopover, + mouseleave, + mouseenter, +} from '~/shared/popover'; + import getSetTimeoutPromise from 'spec/helpers/set_timeout_promise_helper'; describe('feature highlight helper', () => { -- cgit v1.2.1 From 25cf92252d00575f6725929652f92edf9c1bb80b Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Wed, 28 Mar 2018 04:14:44 +0100 Subject: Fix spec --- spec/javascripts/feature_highlight/feature_highlight_spec.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/spec/javascripts/feature_highlight/feature_highlight_spec.js b/spec/javascripts/feature_highlight/feature_highlight_spec.js index d2dd39d49d1..72c51915383 100644 --- a/spec/javascripts/feature_highlight/feature_highlight_spec.js +++ b/spec/javascripts/feature_highlight/feature_highlight_spec.js @@ -1,6 +1,6 @@ import $ from 'jquery'; -import * as featureHighlightHelper from '~/feature_highlight/feature_highlight_helper'; import * as featureHighlight from '~/feature_highlight/feature_highlight'; +import * as popover from '~/shared/popover'; import axios from '~/lib/utils/axios_utils'; import MockAdapter from 'axios-mock-adapter'; @@ -44,15 +44,15 @@ describe('feature highlight', () => { expect($(selector).data('content')).toEqual(outerHTML); }); - it('setup mouseenter', () => { - const toggleSpy = spyOn(featureHighlightHelper.togglePopover, 'call'); + fit('setup mouseenter', () => { + const toggleSpy = spyOn(popover.togglePopover, 'call'); $(selector).trigger('mouseenter'); expect(toggleSpy).toHaveBeenCalledWith(jasmine.any(Object), true); }); it('setup debounced mouseleave', (done) => { - const toggleSpy = spyOn(featureHighlightHelper.togglePopover, 'call'); + const toggleSpy = spyOn(popover.togglePopover, 'call'); $(selector).trigger('mouseleave'); // Even though we've set the debounce to 0ms, setTimeout is needed for the debounce @@ -85,7 +85,7 @@ describe('feature highlight', () => { it('toggles when clicked', () => { $(selector).trigger('mouseenter'); const popoverId = $(selector).attr('aria-describedby'); - const toggleSpy = spyOn(featureHighlightHelper.togglePopover, 'call'); + const toggleSpy = spyOn(popover.togglePopover, 'call'); $(`#${popoverId} .dismiss-feature-highlight`).click(); -- cgit v1.2.1 From d45f45439734e12a4d316b8fe1f8d0db01f1c753 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Wed, 28 Mar 2018 10:38:56 +0000 Subject: Remove focus in feature_highlight_spec.js --- spec/javascripts/feature_highlight/feature_highlight_spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/spec/javascripts/feature_highlight/feature_highlight_spec.js b/spec/javascripts/feature_highlight/feature_highlight_spec.js index 72c51915383..ed2aea36319 100644 --- a/spec/javascripts/feature_highlight/feature_highlight_spec.js +++ b/spec/javascripts/feature_highlight/feature_highlight_spec.js @@ -44,7 +44,7 @@ describe('feature highlight', () => { expect($(selector).data('content')).toEqual(outerHTML); }); - fit('setup mouseenter', () => { + it('setup mouseenter', () => { const toggleSpy = spyOn(popover.togglePopover, 'call'); $(selector).trigger('mouseenter'); -- cgit v1.2.1 From 90ca4aa03239c3924c0005c3c3e2fdb563a9beb2 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Wed, 28 Mar 2018 11:16:06 +0000 Subject: Fix milestone.scss lint --- app/assets/stylesheets/pages/milestone.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index 0c00ee0a98c..1729fe1c2e9 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -215,7 +215,7 @@ .milestone-popover-instructions-list { padding-left: 2em; - & > li { + > li { padding-left: 1em; } } -- cgit v1.2.1 From 3a6fc8b3298faa89f8b9d5899546738db230fbe9 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Wed, 28 Mar 2018 16:19:35 +0000 Subject: Update popover.js --- app/assets/javascripts/shared/popover.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/shared/popover.js b/app/assets/javascripts/shared/popover.js index b406571a1db..3fc03553bdd 100644 --- a/app/assets/javascripts/shared/popover.js +++ b/app/assets/javascripts/shared/popover.js @@ -1,5 +1,5 @@ import $ from 'jquery'; -import { debounce } from 'underscore'; +import _ from 'underscore'; export function togglePopover(show) { const isAlreadyShown = this.hasClass('js-popover-show'); @@ -29,5 +29,5 @@ export function mouseenter() { } export function debouncedMouseleave(debounceTimeout = 300) { - return debounce(mouseleave, debounceTimeout); + return _.debounce(mouseleave, debounceTimeout); } -- cgit v1.2.1 From cd336b13730ae195928a677ebb9b86b30d54afd7 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Wed, 28 Mar 2018 18:12:30 +0100 Subject: Review --- app/assets/stylesheets/pages/milestone.scss | 1 + .../feature_highlight_helper_spec.js | 160 +------------------- spec/javascripts/shared/popover.js | 161 +++++++++++++++++++++ 3 files changed, 163 insertions(+), 159 deletions(-) create mode 100644 spec/javascripts/shared/popover.js diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index 1729fe1c2e9..5c9b33b09ba 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -205,6 +205,7 @@ .milestone-popover-body { padding: $gl-padding-8; + background-color: $gray-light; } .milestone-popover-footer { diff --git a/spec/javascripts/feature_highlight/feature_highlight_helper_spec.js b/spec/javascripts/feature_highlight/feature_highlight_helper_spec.js index e0fa50c68e2..2ab6a0077b5 100644 --- a/spec/javascripts/feature_highlight/feature_highlight_helper_spec.js +++ b/spec/javascripts/feature_highlight/feature_highlight_helper_spec.js @@ -6,11 +6,7 @@ import { dismiss, inserted, } from '~/feature_highlight/feature_highlight_helper'; -import { - togglePopover, - mouseleave, - mouseenter, -} from '~/shared/popover'; +import { togglePopover } from '~/shared/popover'; import getSetTimeoutPromise from 'spec/helpers/set_timeout_promise_helper'; @@ -22,110 +18,6 @@ describe('feature highlight helper', () => { }); }); - describe('togglePopover', () => { - describe('togglePopover(true)', () => { - it('returns true when popover is shown', () => { - const context = { - hasClass: () => false, - popover: () => {}, - toggleClass: () => {}, - }; - - expect(togglePopover.call(context, true)).toEqual(true); - }); - - it('returns false when popover is already shown', () => { - const context = { - hasClass: () => true, - }; - - expect(togglePopover.call(context, true)).toEqual(false); - }); - - it('shows popover', (done) => { - const context = { - hasClass: () => false, - popover: () => {}, - toggleClass: () => {}, - }; - - spyOn(context, 'popover').and.callFake((method) => { - expect(method).toEqual('show'); - done(); - }); - - togglePopover.call(context, true); - }); - - it('adds disable-animation and js-popover-show class', (done) => { - const context = { - hasClass: () => false, - popover: () => {}, - toggleClass: () => {}, - }; - - spyOn(context, 'toggleClass').and.callFake((classNames, show) => { - expect(classNames).toEqual('disable-animation js-popover-show'); - expect(show).toEqual(true); - done(); - }); - - togglePopover.call(context, true); - }); - }); - - describe('togglePopover(false)', () => { - it('returns true when popover is hidden', () => { - const context = { - hasClass: () => true, - popover: () => {}, - toggleClass: () => {}, - }; - - expect(togglePopover.call(context, false)).toEqual(true); - }); - - it('returns false when popover is already hidden', () => { - const context = { - hasClass: () => false, - }; - - expect(togglePopover.call(context, false)).toEqual(false); - }); - - it('hides popover', (done) => { - const context = { - hasClass: () => true, - popover: () => {}, - toggleClass: () => {}, - }; - - spyOn(context, 'popover').and.callFake((method) => { - expect(method).toEqual('hide'); - done(); - }); - - togglePopover.call(context, false); - }); - - it('removes disable-animation and js-popover-show class', (done) => { - const context = { - hasClass: () => true, - popover: () => {}, - toggleClass: () => {}, - }; - - spyOn(context, 'toggleClass').and.callFake((classNames, show) => { - expect(classNames).toEqual('disable-animation js-popover-show'); - expect(show).toEqual(false); - done(); - }); - - togglePopover.call(context, false); - }); - }); - }); - describe('dismiss', () => { let mock; const context = { @@ -166,56 +58,6 @@ describe('feature highlight helper', () => { }); }); - describe('mouseleave', () => { - it('calls hide popover if .popover:hover is false', () => { - const fakeJquery = { - length: 0, - }; - - spyOn($.fn, 'init').and.callFake(selector => (selector === '.popover:hover' ? fakeJquery : $.fn)); - spyOn(togglePopover, 'call'); - mouseleave(); - expect(togglePopover.call).toHaveBeenCalledWith(jasmine.any(Object), false); - }); - - it('does not call hide popover if .popover:hover is true', () => { - const fakeJquery = { - length: 1, - }; - - spyOn($.fn, 'init').and.callFake(selector => (selector === '.popover:hover' ? fakeJquery : $.fn)); - spyOn(togglePopover, 'call'); - mouseleave(); - expect(togglePopover.call).not.toHaveBeenCalledWith(false); - }); - }); - - describe('mouseenter', () => { - const context = {}; - - it('shows popover', () => { - spyOn(togglePopover, 'call').and.returnValue(false); - mouseenter.call(context); - expect(togglePopover.call).toHaveBeenCalledWith(jasmine.any(Object), true); - }); - - it('registers mouseleave event if popover is showed', (done) => { - spyOn(togglePopover, 'call').and.returnValue(true); - spyOn($.fn, 'on').and.callFake((eventName) => { - expect(eventName).toEqual('mouseleave'); - done(); - }); - mouseenter.call(context); - }); - - it('does not register mouseleave event if popover is not showed', () => { - spyOn(togglePopover, 'call').and.returnValue(false); - const spy = spyOn($.fn, 'on').and.callFake(() => {}); - mouseenter.call(context); - expect(spy).not.toHaveBeenCalled(); - }); - }); - describe('inserted', () => { it('registers click event callback', (done) => { const context = { diff --git a/spec/javascripts/shared/popover.js b/spec/javascripts/shared/popover.js new file mode 100644 index 00000000000..17c3b0dd24a --- /dev/null +++ b/spec/javascripts/shared/popover.js @@ -0,0 +1,161 @@ +import { + togglePopover, + mouseleave, + mouseenter, +} from '~/shared/popover'; + +describe('popover', () => { + describe('togglePopover', () => { + describe('togglePopover(true)', () => { + it('returns true when popover is shown', () => { + const context = { + hasClass: () => false, + popover: () => {}, + toggleClass: () => {}, + }; + + expect(togglePopover.call(context, true)).toEqual(true); + }); + + it('returns false when popover is already shown', () => { + const context = { + hasClass: () => true, + }; + + expect(togglePopover.call(context, true)).toEqual(false); + }); + + it('shows popover', (done) => { + const context = { + hasClass: () => false, + popover: () => {}, + toggleClass: () => {}, + }; + + spyOn(context, 'popover').and.callFake((method) => { + expect(method).toEqual('show'); + done(); + }); + + togglePopover.call(context, true); + }); + + it('adds disable-animation and js-popover-show class', (done) => { + const context = { + hasClass: () => false, + popover: () => {}, + toggleClass: () => {}, + }; + + spyOn(context, 'toggleClass').and.callFake((classNames, show) => { + expect(classNames).toEqual('disable-animation js-popover-show'); + expect(show).toEqual(true); + done(); + }); + + togglePopover.call(context, true); + }); + }); + + describe('togglePopover(false)', () => { + it('returns true when popover is hidden', () => { + const context = { + hasClass: () => true, + popover: () => {}, + toggleClass: () => {}, + }; + + expect(togglePopover.call(context, false)).toEqual(true); + }); + + it('returns false when popover is already hidden', () => { + const context = { + hasClass: () => false, + }; + + expect(togglePopover.call(context, false)).toEqual(false); + }); + + it('hides popover', (done) => { + const context = { + hasClass: () => true, + popover: () => {}, + toggleClass: () => {}, + }; + + spyOn(context, 'popover').and.callFake((method) => { + expect(method).toEqual('hide'); + done(); + }); + + togglePopover.call(context, false); + }); + + it('removes disable-animation and js-popover-show class', (done) => { + const context = { + hasClass: () => true, + popover: () => {}, + toggleClass: () => {}, + }; + + spyOn(context, 'toggleClass').and.callFake((classNames, show) => { + expect(classNames).toEqual('disable-animation js-popover-show'); + expect(show).toEqual(false); + done(); + }); + + togglePopover.call(context, false); + }); + }); + }); + + describe('mouseleave', () => { + it('calls hide popover if .popover:hover is false', () => { + const fakeJquery = { + length: 0, + }; + + spyOn($.fn, 'init').and.callFake(selector => (selector === '.popover:hover' ? fakeJquery : $.fn)); + spyOn(togglePopover, 'call'); + mouseleave(); + expect(togglePopover.call).toHaveBeenCalledWith(jasmine.any(Object), false); + }); + + it('does not call hide popover if .popover:hover is true', () => { + const fakeJquery = { + length: 1, + }; + + spyOn($.fn, 'init').and.callFake(selector => (selector === '.popover:hover' ? fakeJquery : $.fn)); + spyOn(togglePopover, 'call'); + mouseleave(); + expect(togglePopover.call).not.toHaveBeenCalledWith(false); + }); + }); + + describe('mouseenter', () => { + const context = {}; + + it('shows popover', () => { + spyOn(togglePopover, 'call').and.returnValue(false); + mouseenter.call(context); + expect(togglePopover.call).toHaveBeenCalledWith(jasmine.any(Object), true); + }); + + it('registers mouseleave event if popover is showed', (done) => { + spyOn(togglePopover, 'call').and.returnValue(true); + spyOn($.fn, 'on').and.callFake((eventName) => { + expect(eventName).toEqual('mouseleave'); + done(); + }); + mouseenter.call(context); + }); + + it('does not register mouseleave event if popover is not showed', () => { + spyOn(togglePopover, 'call').and.returnValue(false); + const spy = spyOn($.fn, 'on').and.callFake(() => {}); + mouseenter.call(context); + expect(spy).not.toHaveBeenCalled(); + }); + }); +}); \ No newline at end of file -- cgit v1.2.1 From 410a54c55e4b223316c310b949977257649e9adb Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Wed, 28 Mar 2018 18:27:35 +0100 Subject: Review fix --- app/assets/stylesheets/pages/milestone.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index 5c9b33b09ba..54bcf5c837c 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -232,6 +232,10 @@ .illustration { display: block; margin: $gl-padding 0; + + > img { + margin: 0; + } } } } -- cgit v1.2.1 From d3ebaae596c3ebe62a87fb6e595c205b65503129 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Thu, 29 Mar 2018 14:18:49 +0100 Subject: use js- prefix --- app/assets/javascripts/milestone.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/assets/javascripts/milestone.js b/app/assets/javascripts/milestone.js index 714b543db04..046c8908a38 100644 --- a/app/assets/javascripts/milestone.js +++ b/app/assets/javascripts/milestone.js @@ -47,12 +47,12 @@ export default class Milestone { } static initDeprecationMessage() { - const deprecationMesssageContainer = document.querySelector('.milestone-deprecation-message'); + const deprecationMesssageContainer = document.querySelector('.js-milestone-deprecation-message'); if (!deprecationMesssageContainer) return; - const deprecationMessage = deprecationMesssageContainer.querySelector('.milestone-deprecation-message-template').innerHTML; - const $popover = $('.popover-link', deprecationMesssageContainer); + const deprecationMessage = deprecationMesssageContainer.querySelector('.js-milestone-deprecation-message-template').innerHTML; + const $popover = $('.js-popover-link', deprecationMesssageContainer); const hideOnScroll = togglePopover.bind($popover, false); $popover.popover({ -- cgit v1.2.1 From 8479bf58a21bf526646cbcef1472f94fdb25e9e2 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Thu, 29 Mar 2018 14:19:01 +0100 Subject: Remove media query --- app/assets/stylesheets/pages/milestone.scss | 39 ++++++++++------------------- 1 file changed, 13 insertions(+), 26 deletions(-) diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index 54bcf5c837c..9995ac7f0b6 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -203,39 +203,26 @@ padding: 0; } - .milestone-popover-body { - padding: $gl-padding-8; - background-color: $gray-light; - } + .milestone-popover-body { + padding: $gl-padding-8; + background-color: $gray-light; + } - .milestone-popover-footer { - padding: $gl-padding-8 $gl-padding; - border-top: 1px solid $white-dark; - } + .milestone-popover-footer { + padding: $gl-padding-8 $gl-padding; + border-top: 1px solid $white-dark; + } - .milestone-popover-instructions-list { - padding-left: 2em; + .milestone-popover-instructions-list { + padding-left: 2em; - > li { - padding-left: 1em; - } + > li { + padding-left: 1em; } } +} .btn-link { padding: 0; } - - @media (max-width: $screen-xs-max) { - text-align: center; - - .illustration { - display: block; - margin: $gl-padding 0; - - > img { - margin: 0; - } - } - } } -- cgit v1.2.1 From 4847acd81de27c17be2b3c19b8829b38d467b6a3 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Thu, 29 Mar 2018 14:19:28 +0100 Subject: Re-jig banner callout for new design --- app/assets/stylesheets/framework/banner.scss | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/framework/banner.scss b/app/assets/stylesheets/framework/banner.scss index 6433b0c7855..49642177c67 100644 --- a/app/assets/stylesheets/framework/banner.scss +++ b/app/assets/stylesheets/framework/banner.scss @@ -2,6 +2,8 @@ display: flex; position: relative; flex-wrap: wrap; + justify-content: center; + align-items: start; .banner-close { position: absolute; @@ -16,10 +18,18 @@ } .banner-graphic { - margin: 20px auto; + margin: 0 20px 20px; } &.banner-non-empty-state { border-bottom: 1px solid $border-color; } + + .banner-body { + text-align: left; + } + + .banner-buttons { + text-align: center; + } } -- cgit v1.2.1 From 91df6c2270c2de728c42d5d862894e3b6f9941eb Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Thu, 29 Mar 2018 14:20:04 +0100 Subject: Re-jig banner callout markup for new design --- app/views/shared/_auto_devops_callout.html.haml | 4 ++-- .../shared/milestones/_deprecation_message.html.haml | 18 ++++++++---------- 2 files changed, 10 insertions(+), 12 deletions(-) diff --git a/app/views/shared/_auto_devops_callout.html.haml b/app/views/shared/_auto_devops_callout.html.haml index 934d65e8b42..c7e9226babd 100644 --- a/app/views/shared/_auto_devops_callout.html.haml +++ b/app/views/shared/_auto_devops_callout.html.haml @@ -2,13 +2,13 @@ .banner-graphic = custom_icon('icon_autodevops') - .prepend-top-10.prepend-left-10.append-bottom-10 + .banner-body.prepend-top-10.prepend-left-10.append-bottom-10 %h5= s_('AutoDevOps|Auto DevOps (Beta)') %p= s_('AutoDevOps|It will automatically build, test, and deploy your application based on a predefined CI/CD configuration.') %p - link = link_to(s_('AutoDevOps|Auto DevOps documentation'), help_page_path('topics/autodevops/index.md'), target: '_blank', rel: 'noopener noreferrer') = s_('AutoDevOps|Learn more in the %{link_to_documentation}').html_safe % { link_to_documentation: link } - .prepend-top-10 + .banner-buttons = link_to s_('AutoDevOps|Enable in settings'), project_settings_ci_cd_path(@project, anchor: 'js-general-pipeline-settings'), class: 'btn js-close-callout' %button.btn-transparent.banner-close.close.js-close-callout{ type: 'button', diff --git a/app/views/shared/milestones/_deprecation_message.html.haml b/app/views/shared/milestones/_deprecation_message.html.haml index 38799003c11..6d41e056081 100644 --- a/app/views/shared/milestones/_deprecation_message.html.haml +++ b/app/views/shared/milestones/_deprecation_message.html.haml @@ -1,14 +1,12 @@ -.milestone-deprecation-message.prepend-top-default.prepend-left-default - .illustration.inline= image_tag 'illustrations/milestone_removing-page.svg', class: 'append-right-default' - .inline.vertical-align-middle - %strong= _('This page will be removed in a future release.') - %p.append-bottom-default.prepend-top-5 - = _('Use group milestones to manage issues from multiple projects in the same milestone.') - %br - = button_tag _('Promote these project milestones into a group milestone.'), class: 'btn-link popover-link prepend-left-0' - %div= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default', target: '_blank' +.banner-callout.compact.milestone-deprecation-message.js-milestone-deprecation-message.prepend-top-20 + .banner-graphic= image_tag 'illustrations/milestone_removing-page.svg' + .banner-body.prepend-left-10.append-right-10 + %h5.prepend-top-0= _('This page will be removed in a future release.') + %p= _('Use group milestones to manage issues from multiple projects in the same milestone.') + = button_tag _('Promote these project milestones into a group milestone.'), class: 'btn-link js-popover-link text-align-left' + .banner-buttons.prepend-top-20= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default', target: '_blank' - %template.milestone-deprecation-message-template + %template.js-milestone-deprecation-message-template .milestone-popover-body %ol.milestone-popover-instructions-list.append-bottom-0 %li= _('Click any project name in the project list below to navigate to the project milestone.').html_safe -- cgit v1.2.1 From 597810df0619f90ff83da3501f4e5004a09b3955 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Fri, 30 Mar 2018 18:48:07 +0100 Subject: Add top margin for auto devops callout --- app/views/shared/_auto_devops_callout.html.haml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/views/shared/_auto_devops_callout.html.haml b/app/views/shared/_auto_devops_callout.html.haml index c7e9226babd..3dcf3edd24b 100644 --- a/app/views/shared/_auto_devops_callout.html.haml +++ b/app/views/shared/_auto_devops_callout.html.haml @@ -1,8 +1,8 @@ -.js-autodevops-banner.banner-callout.banner-non-empty-state.append-bottom-20{ data: { uid: 'auto_devops_settings_dismissed', project_path: project_path(@project) } } +.js-autodevops-banner.banner-callout.banner-non-empty-state.append-bottom-20.prepend-top-10{ data: { uid: 'auto_devops_settings_dismissed', project_path: project_path(@project) } } .banner-graphic = custom_icon('icon_autodevops') - .banner-body.prepend-top-10.prepend-left-10.append-bottom-10 + .banner-body.prepend-left-10.append-bottom-10 %h5= s_('AutoDevOps|Auto DevOps (Beta)') %p= s_('AutoDevOps|It will automatically build, test, and deploy your application based on a predefined CI/CD configuration.') %p -- cgit v1.2.1 From e65c7aa850c34f5d05cd19b788a4ba502696c69f Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Tue, 3 Apr 2018 00:20:05 +0100 Subject: eslint-fix --- spec/javascripts/shared/popover.js | 40 +++++++++++++++++++------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/spec/javascripts/shared/popover.js b/spec/javascripts/shared/popover.js index 17c3b0dd24a..695d10678a2 100644 --- a/spec/javascripts/shared/popover.js +++ b/spec/javascripts/shared/popover.js @@ -13,50 +13,50 @@ describe('popover', () => { popover: () => {}, toggleClass: () => {}, }; - + expect(togglePopover.call(context, true)).toEqual(true); }); - + it('returns false when popover is already shown', () => { const context = { hasClass: () => true, }; - + expect(togglePopover.call(context, true)).toEqual(false); }); - + it('shows popover', (done) => { const context = { hasClass: () => false, popover: () => {}, toggleClass: () => {}, }; - + spyOn(context, 'popover').and.callFake((method) => { expect(method).toEqual('show'); done(); }); - + togglePopover.call(context, true); }); - + it('adds disable-animation and js-popover-show class', (done) => { const context = { hasClass: () => false, popover: () => {}, toggleClass: () => {}, }; - + spyOn(context, 'toggleClass').and.callFake((classNames, show) => { expect(classNames).toEqual('disable-animation js-popover-show'); expect(show).toEqual(true); done(); }); - + togglePopover.call(context, true); }); }); - + describe('togglePopover(false)', () => { it('returns true when popover is hidden', () => { const context = { @@ -64,46 +64,46 @@ describe('popover', () => { popover: () => {}, toggleClass: () => {}, }; - + expect(togglePopover.call(context, false)).toEqual(true); }); - + it('returns false when popover is already hidden', () => { const context = { hasClass: () => false, }; - + expect(togglePopover.call(context, false)).toEqual(false); }); - + it('hides popover', (done) => { const context = { hasClass: () => true, popover: () => {}, toggleClass: () => {}, }; - + spyOn(context, 'popover').and.callFake((method) => { expect(method).toEqual('hide'); done(); }); - + togglePopover.call(context, false); }); - + it('removes disable-animation and js-popover-show class', (done) => { const context = { hasClass: () => true, popover: () => {}, toggleClass: () => {}, }; - + spyOn(context, 'toggleClass').and.callFake((classNames, show) => { expect(classNames).toEqual('disable-animation js-popover-show'); expect(show).toEqual(false); done(); }); - + togglePopover.call(context, false); }); }); @@ -158,4 +158,4 @@ describe('popover', () => { expect(spy).not.toHaveBeenCalled(); }); }); -}); \ No newline at end of file +}); -- cgit v1.2.1 From be5e3ca9bf7b407b2f8049df9fc9f74a1a846364 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Tue, 3 Apr 2018 00:20:29 +0100 Subject: import jquery in popover spec --- spec/javascripts/shared/popover.js | 1 + 1 file changed, 1 insertion(+) diff --git a/spec/javascripts/shared/popover.js b/spec/javascripts/shared/popover.js index 695d10678a2..1d574c9424b 100644 --- a/spec/javascripts/shared/popover.js +++ b/spec/javascripts/shared/popover.js @@ -1,3 +1,4 @@ +import $ from 'jquery'; import { togglePopover, mouseleave, -- cgit v1.2.1 From 9378236c363493dd25df77168753bb4f601055c2 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Tue, 3 Apr 2018 00:20:50 +0100 Subject: Rename popover spec to popover_spec --- spec/javascripts/shared/popover.js | 162 -------------------------------- spec/javascripts/shared/popover_spec.js | 162 ++++++++++++++++++++++++++++++++ 2 files changed, 162 insertions(+), 162 deletions(-) delete mode 100644 spec/javascripts/shared/popover.js create mode 100644 spec/javascripts/shared/popover_spec.js diff --git a/spec/javascripts/shared/popover.js b/spec/javascripts/shared/popover.js deleted file mode 100644 index 1d574c9424b..00000000000 --- a/spec/javascripts/shared/popover.js +++ /dev/null @@ -1,162 +0,0 @@ -import $ from 'jquery'; -import { - togglePopover, - mouseleave, - mouseenter, -} from '~/shared/popover'; - -describe('popover', () => { - describe('togglePopover', () => { - describe('togglePopover(true)', () => { - it('returns true when popover is shown', () => { - const context = { - hasClass: () => false, - popover: () => {}, - toggleClass: () => {}, - }; - - expect(togglePopover.call(context, true)).toEqual(true); - }); - - it('returns false when popover is already shown', () => { - const context = { - hasClass: () => true, - }; - - expect(togglePopover.call(context, true)).toEqual(false); - }); - - it('shows popover', (done) => { - const context = { - hasClass: () => false, - popover: () => {}, - toggleClass: () => {}, - }; - - spyOn(context, 'popover').and.callFake((method) => { - expect(method).toEqual('show'); - done(); - }); - - togglePopover.call(context, true); - }); - - it('adds disable-animation and js-popover-show class', (done) => { - const context = { - hasClass: () => false, - popover: () => {}, - toggleClass: () => {}, - }; - - spyOn(context, 'toggleClass').and.callFake((classNames, show) => { - expect(classNames).toEqual('disable-animation js-popover-show'); - expect(show).toEqual(true); - done(); - }); - - togglePopover.call(context, true); - }); - }); - - describe('togglePopover(false)', () => { - it('returns true when popover is hidden', () => { - const context = { - hasClass: () => true, - popover: () => {}, - toggleClass: () => {}, - }; - - expect(togglePopover.call(context, false)).toEqual(true); - }); - - it('returns false when popover is already hidden', () => { - const context = { - hasClass: () => false, - }; - - expect(togglePopover.call(context, false)).toEqual(false); - }); - - it('hides popover', (done) => { - const context = { - hasClass: () => true, - popover: () => {}, - toggleClass: () => {}, - }; - - spyOn(context, 'popover').and.callFake((method) => { - expect(method).toEqual('hide'); - done(); - }); - - togglePopover.call(context, false); - }); - - it('removes disable-animation and js-popover-show class', (done) => { - const context = { - hasClass: () => true, - popover: () => {}, - toggleClass: () => {}, - }; - - spyOn(context, 'toggleClass').and.callFake((classNames, show) => { - expect(classNames).toEqual('disable-animation js-popover-show'); - expect(show).toEqual(false); - done(); - }); - - togglePopover.call(context, false); - }); - }); - }); - - describe('mouseleave', () => { - it('calls hide popover if .popover:hover is false', () => { - const fakeJquery = { - length: 0, - }; - - spyOn($.fn, 'init').and.callFake(selector => (selector === '.popover:hover' ? fakeJquery : $.fn)); - spyOn(togglePopover, 'call'); - mouseleave(); - expect(togglePopover.call).toHaveBeenCalledWith(jasmine.any(Object), false); - }); - - it('does not call hide popover if .popover:hover is true', () => { - const fakeJquery = { - length: 1, - }; - - spyOn($.fn, 'init').and.callFake(selector => (selector === '.popover:hover' ? fakeJquery : $.fn)); - spyOn(togglePopover, 'call'); - mouseleave(); - expect(togglePopover.call).not.toHaveBeenCalledWith(false); - }); - }); - - describe('mouseenter', () => { - const context = {}; - - it('shows popover', () => { - spyOn(togglePopover, 'call').and.returnValue(false); - mouseenter.call(context); - expect(togglePopover.call).toHaveBeenCalledWith(jasmine.any(Object), true); - }); - - it('registers mouseleave event if popover is showed', (done) => { - spyOn(togglePopover, 'call').and.returnValue(true); - spyOn($.fn, 'on').and.callFake((eventName) => { - expect(eventName).toEqual('mouseleave'); - done(); - }); - mouseenter.call(context); - }); - - it('does not register mouseleave event if popover is not showed', () => { - spyOn(togglePopover, 'call').and.returnValue(false); - const spy = spyOn($.fn, 'on').and.callFake(() => {}); - mouseenter.call(context); - expect(spy).not.toHaveBeenCalled(); - }); - }); -}); diff --git a/spec/javascripts/shared/popover_spec.js b/spec/javascripts/shared/popover_spec.js new file mode 100644 index 00000000000..1d574c9424b --- /dev/null +++ b/spec/javascripts/shared/popover_spec.js @@ -0,0 +1,162 @@ +import $ from 'jquery'; +import { + togglePopover, + mouseleave, + mouseenter, +} from '~/shared/popover'; + +describe('popover', () => { + describe('togglePopover', () => { + describe('togglePopover(true)', () => { + it('returns true when popover is shown', () => { + const context = { + hasClass: () => false, + popover: () => {}, + toggleClass: () => {}, + }; + + expect(togglePopover.call(context, true)).toEqual(true); + }); + + it('returns false when popover is already shown', () => { + const context = { + hasClass: () => true, + }; + + expect(togglePopover.call(context, true)).toEqual(false); + }); + + it('shows popover', (done) => { + const context = { + hasClass: () => false, + popover: () => {}, + toggleClass: () => {}, + }; + + spyOn(context, 'popover').and.callFake((method) => { + expect(method).toEqual('show'); + done(); + }); + + togglePopover.call(context, true); + }); + + it('adds disable-animation and js-popover-show class', (done) => { + const context = { + hasClass: () => false, + popover: () => {}, + toggleClass: () => {}, + }; + + spyOn(context, 'toggleClass').and.callFake((classNames, show) => { + expect(classNames).toEqual('disable-animation js-popover-show'); + expect(show).toEqual(true); + done(); + }); + + togglePopover.call(context, true); + }); + }); + + describe('togglePopover(false)', () => { + it('returns true when popover is hidden', () => { + const context = { + hasClass: () => true, + popover: () => {}, + toggleClass: () => {}, + }; + + expect(togglePopover.call(context, false)).toEqual(true); + }); + + it('returns false when popover is already hidden', () => { + const context = { + hasClass: () => false, + }; + + expect(togglePopover.call(context, false)).toEqual(false); + }); + + it('hides popover', (done) => { + const context = { + hasClass: () => true, + popover: () => {}, + toggleClass: () => {}, + }; + + spyOn(context, 'popover').and.callFake((method) => { + expect(method).toEqual('hide'); + done(); + }); + + togglePopover.call(context, false); + }); + + it('removes disable-animation and js-popover-show class', (done) => { + const context = { + hasClass: () => true, + popover: () => {}, + toggleClass: () => {}, + }; + + spyOn(context, 'toggleClass').and.callFake((classNames, show) => { + expect(classNames).toEqual('disable-animation js-popover-show'); + expect(show).toEqual(false); + done(); + }); + + togglePopover.call(context, false); + }); + }); + }); + + describe('mouseleave', () => { + it('calls hide popover if .popover:hover is false', () => { + const fakeJquery = { + length: 0, + }; + + spyOn($.fn, 'init').and.callFake(selector => (selector === '.popover:hover' ? fakeJquery : $.fn)); + spyOn(togglePopover, 'call'); + mouseleave(); + expect(togglePopover.call).toHaveBeenCalledWith(jasmine.any(Object), false); + }); + + it('does not call hide popover if .popover:hover is true', () => { + const fakeJquery = { + length: 1, + }; + + spyOn($.fn, 'init').and.callFake(selector => (selector === '.popover:hover' ? fakeJquery : $.fn)); + spyOn(togglePopover, 'call'); + mouseleave(); + expect(togglePopover.call).not.toHaveBeenCalledWith(false); + }); + }); + + describe('mouseenter', () => { + const context = {}; + + it('shows popover', () => { + spyOn(togglePopover, 'call').and.returnValue(false); + mouseenter.call(context); + expect(togglePopover.call).toHaveBeenCalledWith(jasmine.any(Object), true); + }); + + it('registers mouseleave event if popover is showed', (done) => { + spyOn(togglePopover, 'call').and.returnValue(true); + spyOn($.fn, 'on').and.callFake((eventName) => { + expect(eventName).toEqual('mouseleave'); + done(); + }); + mouseenter.call(context); + }); + + it('does not register mouseleave event if popover is not showed', () => { + spyOn(togglePopover, 'call').and.returnValue(false); + const spy = spyOn($.fn, 'on').and.callFake(() => {}); + mouseenter.call(context); + expect(spy).not.toHaveBeenCalled(); + }); + }); +}); -- cgit v1.2.1 From e11dfbefe92f80e7cd509db3da55864f6983030a Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Tue, 3 Apr 2018 00:21:43 +0100 Subject: Correct milestone_spec popover test --- spec/features/milestone_spec.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/spec/features/milestone_spec.rb b/spec/features/milestone_spec.rb index 3cb8e088da8..6c51e4bbe26 100644 --- a/spec/features/milestone_spec.rb +++ b/spec/features/milestone_spec.rb @@ -117,7 +117,7 @@ feature 'Milestone' do expect(page).to have_selector('.milestone-deprecation-message') - find('.milestone-deprecation-message .popover-link').click + find('.milestone-deprecation-message .js-popover-link').click expect(page).to have_selector('.milestone-deprecation-message .popover') end -- cgit v1.2.1 From 2addebc744826265d6eaf78c729b28e7477453d1 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Tue, 3 Apr 2018 17:31:55 +0100 Subject: UX changes --- app/assets/stylesheets/framework/banner.scss | 23 +++++++++++++++------- app/assets/stylesheets/framework/buttons.scss | 2 +- app/views/shared/_auto_devops_callout.html.haml | 2 +- .../milestones/_deprecation_message.html.haml | 6 +++--- 4 files changed, 21 insertions(+), 12 deletions(-) diff --git a/app/assets/stylesheets/framework/banner.scss b/app/assets/stylesheets/framework/banner.scss index 49642177c67..4448e443cd2 100644 --- a/app/assets/stylesheets/framework/banner.scss +++ b/app/assets/stylesheets/framework/banner.scss @@ -2,7 +2,6 @@ display: flex; position: relative; flex-wrap: wrap; - justify-content: center; align-items: start; .banner-close { @@ -18,18 +17,28 @@ } .banner-graphic { - margin: 0 20px 20px; + margin: 0 20px 20px 0; } &.banner-non-empty-state { border-bottom: 1px solid $border-color; } - .banner-body { - text-align: left; - } + @media (max-width: $screen-xs-max) { + justify-content: center; + + .banner-title, + .banner-buttons { + text-align: center; + } - .banner-buttons { - text-align: center; + .banner-text, + .banner-link { + display: inline; + } + + .banner-graphic { + margin: 0 20px 20px; + } } } diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index b10cdf206a0..fd4e2261103 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -486,4 +486,4 @@ fieldset[disabled] .btn, &:hover { @extend %disabled; } -} +} \ No newline at end of file diff --git a/app/views/shared/_auto_devops_callout.html.haml b/app/views/shared/_auto_devops_callout.html.haml index 3dcf3edd24b..e9ac192f5f7 100644 --- a/app/views/shared/_auto_devops_callout.html.haml +++ b/app/views/shared/_auto_devops_callout.html.haml @@ -3,7 +3,7 @@ = custom_icon('icon_autodevops') .banner-body.prepend-left-10.append-bottom-10 - %h5= s_('AutoDevOps|Auto DevOps (Beta)') + %h5.banner-title= s_('AutoDevOps|Auto DevOps (Beta)') %p= s_('AutoDevOps|It will automatically build, test, and deploy your application based on a predefined CI/CD configuration.') %p - link = link_to(s_('AutoDevOps|Auto DevOps documentation'), help_page_path('topics/autodevops/index.md'), target: '_blank', rel: 'noopener noreferrer') diff --git a/app/views/shared/milestones/_deprecation_message.html.haml b/app/views/shared/milestones/_deprecation_message.html.haml index 6d41e056081..4fa5ee208ff 100644 --- a/app/views/shared/milestones/_deprecation_message.html.haml +++ b/app/views/shared/milestones/_deprecation_message.html.haml @@ -1,9 +1,9 @@ .banner-callout.compact.milestone-deprecation-message.js-milestone-deprecation-message.prepend-top-20 .banner-graphic= image_tag 'illustrations/milestone_removing-page.svg' .banner-body.prepend-left-10.append-right-10 - %h5.prepend-top-0= _('This page will be removed in a future release.') - %p= _('Use group milestones to manage issues from multiple projects in the same milestone.') - = button_tag _('Promote these project milestones into a group milestone.'), class: 'btn-link js-popover-link text-align-left' + %h5.banner-title.prepend-top-0= _('This page will be removed in a future release.') + %p.banner-text= _('Use group milestones to manage issues from multiple projects in the same milestone.') + = button_tag _('Promote these project milestones into a group milestone.'), class: 'btn-link js-popover-link text-align-left banner-link' .banner-buttons.prepend-top-20= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default', target: '_blank' %template.js-milestone-deprecation-message-template -- cgit v1.2.1 From a1c1cb4c5ecff428470c2b33fc75a3a24b0ca146 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Tue, 3 Apr 2018 19:00:19 +0100 Subject: Fix lints --- app/assets/stylesheets/framework/banner.scss | 2 +- app/assets/stylesheets/framework/buttons.scss | 2 +- app/assets/stylesheets/pages/milestone.scss | 7 ++++--- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/app/assets/stylesheets/framework/banner.scss b/app/assets/stylesheets/framework/banner.scss index 4448e443cd2..479e6de704e 100644 --- a/app/assets/stylesheets/framework/banner.scss +++ b/app/assets/stylesheets/framework/banner.scss @@ -17,7 +17,7 @@ } .banner-graphic { - margin: 0 20px 20px 0; + margin: 0 20px 20px 0; } &.banner-non-empty-state { diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index fd4e2261103..b10cdf206a0 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -486,4 +486,4 @@ fieldset[disabled] .btn, &:hover { @extend %disabled; } -} \ No newline at end of file +} diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index 9995ac7f0b6..248c5cde1a0 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -198,10 +198,11 @@ .milestone-deprecation-message { .popover { padding: 0; + } - .popover-content { - padding: 0; - } + .popover-content { + padding: 0; + } .milestone-popover-body { padding: $gl-padding-8; -- cgit v1.2.1 From ee1954efc19470c477ddbdf965731dc25598e6b0 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Thu, 5 Apr 2018 18:35:56 +0100 Subject: Review changes --- app/assets/stylesheets/framework/banner.scss | 7 ++++--- app/assets/stylesheets/pages/milestone.scss | 1 - 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/framework/banner.scss b/app/assets/stylesheets/framework/banner.scss index 479e6de704e..414948ddd79 100644 --- a/app/assets/stylesheets/framework/banner.scss +++ b/app/assets/stylesheets/framework/banner.scss @@ -1,7 +1,6 @@ .banner-callout { display: flex; position: relative; - flex-wrap: wrap; align-items: start; .banner-close { @@ -17,7 +16,7 @@ } .banner-graphic { - margin: 0 20px 20px 0; + margin: 0 $gl-padding $gl-padding 0; } &.banner-non-empty-state { @@ -26,6 +25,8 @@ @media (max-width: $screen-xs-max) { justify-content: center; + flex-direction: column; + align-items: center; .banner-title, .banner-buttons { @@ -38,7 +39,7 @@ } .banner-graphic { - margin: 0 20px 20px; + margin-left: 20px; } } } diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index 248c5cde1a0..6e2d9f696e0 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -221,7 +221,6 @@ padding-left: 1em; } } -} .btn-link { padding: 0; -- cgit v1.2.1 From 523190f9c5c5dbcb6d71018adcad91805daa0d1c Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Thu, 5 Apr 2018 20:52:38 +0100 Subject: Review changes --- app/assets/stylesheets/framework/banner.scss | 7 +------ app/assets/stylesheets/pages/milestone.scss | 7 +++++++ 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/app/assets/stylesheets/framework/banner.scss b/app/assets/stylesheets/framework/banner.scss index 414948ddd79..02f3896d591 100644 --- a/app/assets/stylesheets/framework/banner.scss +++ b/app/assets/stylesheets/framework/banner.scss @@ -33,13 +33,8 @@ text-align: center; } - .banner-text, - .banner-link { - display: inline; - } - .banner-graphic { - margin-left: 20px; + margin-left: $gl-padding; } } } diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index 6e2d9f696e0..79463a09b41 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -225,4 +225,11 @@ .btn-link { padding: 0; } + + @media (max-width: $screen-xs-max) { + .banner-text, + .banner-link { + display: inline; + } + } } -- cgit v1.2.1 From 2db0a9b24c337324c40ddd07aabc7bfcef38cf4d Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Fri, 6 Apr 2018 07:51:54 +0100 Subject: Review changes --- app/assets/stylesheets/pages/milestone.scss | 42 +++++++++++----------- .../milestones/_deprecation_message.html.haml | 4 +-- 2 files changed, 23 insertions(+), 23 deletions(-) diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index 79463a09b41..0d406c9ef3d 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -204,32 +204,32 @@ padding: 0; } - .milestone-popover-body { - padding: $gl-padding-8; - background-color: $gray-light; + .btn-link { + padding: 0; } +} - .milestone-popover-footer { - padding: $gl-padding-8 $gl-padding; - border-top: 1px solid $white-dark; - } +.milestone-popover-body { + padding: $gl-padding-8; + background-color: $gray-light; +} - .milestone-popover-instructions-list { - padding-left: 2em; +.milestone-popover-footer { + padding: $gl-padding-8 $gl-padding; + border-top: 1px solid $white-dark; +} - > li { - padding-left: 1em; - } - } +.milestone-popover-instructions-list { + padding-left: 2em; - .btn-link { - padding: 0; + > li { + padding-left: 1em; } +} - @media (max-width: $screen-xs-max) { - .banner-text, - .banner-link { - display: inline; - } +@media (max-width: $screen-xs-max) { + .milestone-banner-text, + .milestone-banner-link { + display: inline; } -} +} \ No newline at end of file diff --git a/app/views/shared/milestones/_deprecation_message.html.haml b/app/views/shared/milestones/_deprecation_message.html.haml index 4fa5ee208ff..39200d0bc62 100644 --- a/app/views/shared/milestones/_deprecation_message.html.haml +++ b/app/views/shared/milestones/_deprecation_message.html.haml @@ -3,8 +3,8 @@ .banner-body.prepend-left-10.append-right-10 %h5.banner-title.prepend-top-0= _('This page will be removed in a future release.') %p.banner-text= _('Use group milestones to manage issues from multiple projects in the same milestone.') - = button_tag _('Promote these project milestones into a group milestone.'), class: 'btn-link js-popover-link text-align-left banner-link' - .banner-buttons.prepend-top-20= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default', target: '_blank' + = button_tag _('Promote these project milestones into a group milestone.'), class: 'btn-link js-popover-link text-align-left milestone-banner-link' + .milestone-banner-buttons.prepend-top-20= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default', target: '_blank' %template.js-milestone-deprecation-message-template .milestone-popover-body -- cgit v1.2.1 From cfbeeed812b9fd3bedbead4a9123c1567ea31302 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Fri, 6 Apr 2018 19:56:19 +0100 Subject: Fix static --- app/assets/stylesheets/pages/milestone.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index 0d406c9ef3d..40cdf7d1c35 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -232,4 +232,4 @@ .milestone-banner-link { display: inline; } -} \ No newline at end of file +} -- cgit v1.2.1 From 26dc37dec4ffb6fced6ac924d5a89d30f0184db3 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Sat, 7 Apr 2018 06:16:51 +0100 Subject: Review changes --- app/assets/javascripts/milestone.js | 5 +-- app/assets/stylesheets/framework/buttons.scss | 48 ++++++++++++++-------- app/assets/stylesheets/pages/milestone.scss | 4 -- .../milestones/_deprecation_message.html.haml | 6 +-- 4 files changed, 36 insertions(+), 27 deletions(-) diff --git a/app/assets/javascripts/milestone.js b/app/assets/javascripts/milestone.js index 046c8908a38..23231ba5649 100644 --- a/app/assets/javascripts/milestone.js +++ b/app/assets/javascripts/milestone.js @@ -62,11 +62,8 @@ export default class Milestone { }) .on('mouseenter', mouseenter) .on('mouseleave', debouncedMouseleave()) - .on('show.bs.popover', () => { + .one('show.bs.popover', () => { window.addEventListener('scroll', hideOnScroll); - }) - .on('hide.bs.popover', () => { - window.removeEventListener('scroll', hideOnScroll); }); } } diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index b10cdf206a0..bfae252eb42 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -423,26 +423,42 @@ } .btn-link { - &.btn-secondary-hover-link { - color: $gl-text-color-secondary; + padding: 0; + background-color: transparent; + color: $blue-600; + font-weight: normal; + border-radius: 0; + border-color: transparent; - &:hover, - &:active, - &:focus { - color: $gl-link-color; - text-decoration: none; - } + &:hover, + &:active, + &:focus { + color: $blue-800; + text-decoration: underline; + background-color: transparent; + border-color: transparent; } +} - &.btn-primary-hover-link { - color: inherit; +.btn-link.btn-secondary-hover-link { + color: $gl-text-color-secondary; - &:hover, - &:active, - &:focus { - color: $gl-link-color; - text-decoration: none; - } + &:hover, + &:active, + &:focus { + color: $gl-link-color; + text-decoration: none; + } +} + +.btn-link.btn-primary-hover-link { + color: inherit; + + &:hover, + &:active, + &:focus { + color: $gl-link-color; + text-decoration: none; } } diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index 40cdf7d1c35..3af8d80daab 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -203,10 +203,6 @@ .popover-content { padding: 0; } - - .btn-link { - padding: 0; - } } .milestone-popover-body { diff --git a/app/views/shared/milestones/_deprecation_message.html.haml b/app/views/shared/milestones/_deprecation_message.html.haml index 39200d0bc62..4a8f90937ea 100644 --- a/app/views/shared/milestones/_deprecation_message.html.haml +++ b/app/views/shared/milestones/_deprecation_message.html.haml @@ -2,8 +2,8 @@ .banner-graphic= image_tag 'illustrations/milestone_removing-page.svg' .banner-body.prepend-left-10.append-right-10 %h5.banner-title.prepend-top-0= _('This page will be removed in a future release.') - %p.banner-text= _('Use group milestones to manage issues from multiple projects in the same milestone.') - = button_tag _('Promote these project milestones into a group milestone.'), class: 'btn-link js-popover-link text-align-left milestone-banner-link' + %p.milestone-banner-text= _('Use group milestones to manage issues from multiple projects in the same milestone.') + = button_tag _('Promote these project milestones into a group milestone.'), class: 'btn btn-link js-popover-link text-align-left milestone-banner-link' .milestone-banner-buttons.prepend-top-20= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default', target: '_blank' %template.js-milestone-deprecation-message-template @@ -11,4 +11,4 @@ %ol.milestone-popover-instructions-list.append-bottom-0 %li= _('Click any project name in the project list below to navigate to the project milestone.').html_safe %li= _('Click the Promote button in the top right corner to promote it to a group milestone.').html_safe - .milestone-popover-footer= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn-link prepend-left-0', target: '_blank' + .milestone-popover-footer= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-link prepend-left-0', target: '_blank' -- cgit v1.2.1 From bff59c8cb0b0778ebe85ee6d74babda262ef5562 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Mon, 9 Apr 2018 16:20:39 +0100 Subject: Fix static analysis --- app/assets/stylesheets/framework/buttons.scss | 36 +++++++++++++-------------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index bfae252eb42..07f92df6048 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -438,27 +438,27 @@ background-color: transparent; border-color: transparent; } -} - -.btn-link.btn-secondary-hover-link { - color: $gl-text-color-secondary; - &:hover, - &:active, - &:focus { - color: $gl-link-color; - text-decoration: none; + &.btn-secondary-hover-link { + color: $gl-text-color-secondary; + + &:hover, + &:active, + &:focus { + color: $gl-link-color; + text-decoration: none; + } } -} -.btn-link.btn-primary-hover-link { - color: inherit; - - &:hover, - &:active, - &:focus { - color: $gl-link-color; - text-decoration: none; + &.btn-primary-hover-link { + color: inherit; + + &:hover, + &:active, + &:focus { + color: $gl-link-color; + text-decoration: none; + } } } -- cgit v1.2.1 From eae553f8164496b59fa2036a6fc2e8571dba2dcd Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Mon, 9 Apr 2018 17:29:24 +0100 Subject: fix lint --- app/assets/stylesheets/framework/buttons.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index 07f92df6048..48f20029383 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -441,7 +441,7 @@ &.btn-secondary-hover-link { color: $gl-text-color-secondary; - + &:hover, &:active, &:focus { @@ -452,7 +452,7 @@ &.btn-primary-hover-link { color: inherit; - + &:hover, &:active, &:focus { -- cgit v1.2.1 From 19f14cfe8210239800a1027569715f4f8d6699be Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Tue, 10 Apr 2018 15:57:00 +0100 Subject: remove sideeffects, init per page --- app/assets/javascripts/milestone.js | 1 - app/assets/javascripts/pages/dashboard/milestones/show/index.js | 2 ++ app/assets/javascripts/pages/groups/milestones/show/index.js | 7 ++++++- 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/milestone.js b/app/assets/javascripts/milestone.js index 23231ba5649..d3697eb0999 100644 --- a/app/assets/javascripts/milestone.js +++ b/app/assets/javascripts/milestone.js @@ -5,7 +5,6 @@ import { mouseenter, debouncedMouseleave, togglePopover } from './shared/popover export default class Milestone { constructor() { - Milestone.initDeprecationMessage(); this.bindTabsSwitching(); // Load merge request tab if it is active diff --git a/app/assets/javascripts/pages/dashboard/milestones/show/index.js b/app/assets/javascripts/pages/dashboard/milestones/show/index.js index 397149aaa9e..8b529585898 100644 --- a/app/assets/javascripts/pages/dashboard/milestones/show/index.js +++ b/app/assets/javascripts/pages/dashboard/milestones/show/index.js @@ -6,4 +6,6 @@ document.addEventListener('DOMContentLoaded', () => { new Milestone(); // eslint-disable-line no-new new Sidebar(); // eslint-disable-line no-new new MountMilestoneSidebar(); // eslint-disable-line no-new + + Milestone.initDeprecationMessage(); }); diff --git a/app/assets/javascripts/pages/groups/milestones/show/index.js b/app/assets/javascripts/pages/groups/milestones/show/index.js index 88f40b5278e..74cc4ba42c1 100644 --- a/app/assets/javascripts/pages/groups/milestones/show/index.js +++ b/app/assets/javascripts/pages/groups/milestones/show/index.js @@ -1,3 +1,8 @@ import initMilestonesShow from '~/pages/milestones/shared/init_milestones_show'; +import Milestone from '~/milestone'; -document.addEventListener('DOMContentLoaded', initMilestonesShow); +document.addEventListener('DOMContentLoaded', () => { + initMilestonesShow(); + + Milestone.initDeprecationMessage(); +}); -- cgit v1.2.1 From 98da0a8bb79d6e7a9c0473083aad1af12f850542 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Fri, 13 Apr 2018 17:29:39 +0100 Subject: Fix feature_highlight listener --- app/assets/javascripts/feature_highlight/feature_highlight.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/app/assets/javascripts/feature_highlight/feature_highlight.js b/app/assets/javascripts/feature_highlight/feature_highlight.js index 0d385ab0aac..139d7826118 100644 --- a/app/assets/javascripts/feature_highlight/feature_highlight.js +++ b/app/assets/javascripts/feature_highlight/feature_highlight.js @@ -31,12 +31,9 @@ export function setupFeatureHighlightPopover(id, debounceTimeout = 300) { .on('mouseenter', mouseenter) .on('mouseleave', debouncedMouseleave(debounceTimeout)) .on('inserted.bs.popover', inserted) - .on('show.bs.popover', () => { + .one('show.bs.popover', () => { window.addEventListener('scroll', hideOnScroll); }) - .on('hide.bs.popover', () => { - window.removeEventListener('scroll', hideOnScroll); - }) // Display feature highlight .removeAttr('disabled'); } -- cgit v1.2.1 From 8d43fe4efe81ec5d657fb3d35802b9f9c5859301 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Fri, 13 Apr 2018 18:01:05 +0100 Subject: Fix other listeners --- app/assets/javascripts/feature_highlight/feature_highlight.js | 4 ++-- app/assets/javascripts/milestone.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app/assets/javascripts/feature_highlight/feature_highlight.js b/app/assets/javascripts/feature_highlight/feature_highlight.js index 139d7826118..2d5bae9a9c4 100644 --- a/app/assets/javascripts/feature_highlight/feature_highlight.js +++ b/app/assets/javascripts/feature_highlight/feature_highlight.js @@ -31,8 +31,8 @@ export function setupFeatureHighlightPopover(id, debounceTimeout = 300) { .on('mouseenter', mouseenter) .on('mouseleave', debouncedMouseleave(debounceTimeout)) .on('inserted.bs.popover', inserted) - .one('show.bs.popover', () => { - window.addEventListener('scroll', hideOnScroll); + .on('show.bs.popover', () => { + window.addEventListener('scroll', hideOnScroll, { once: true }); }) // Display feature highlight .removeAttr('disabled'); diff --git a/app/assets/javascripts/milestone.js b/app/assets/javascripts/milestone.js index d3697eb0999..325fa570f37 100644 --- a/app/assets/javascripts/milestone.js +++ b/app/assets/javascripts/milestone.js @@ -61,8 +61,8 @@ export default class Milestone { }) .on('mouseenter', mouseenter) .on('mouseleave', debouncedMouseleave()) - .one('show.bs.popover', () => { - window.addEventListener('scroll', hideOnScroll); + .on('show.bs.popover', () => { + window.addEventListener('scroll', hideOnScroll, { once: true }); }); } } -- cgit v1.2.1 From 3283386a1eefd20f28382199efc5b45530ff5d79 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Fri, 13 Apr 2018 18:44:58 +0100 Subject: use jquery object in togglePopover --- app/assets/javascripts/shared/popover.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/app/assets/javascripts/shared/popover.js b/app/assets/javascripts/shared/popover.js index 3fc03553bdd..2eb0eff11d1 100644 --- a/app/assets/javascripts/shared/popover.js +++ b/app/assets/javascripts/shared/popover.js @@ -2,12 +2,13 @@ import $ from 'jquery'; import _ from 'underscore'; export function togglePopover(show) { - const isAlreadyShown = this.hasClass('js-popover-show'); + const $popover = $(this); + const isAlreadyShown = $popover.hasClass('js-popover-show'); if ((show && isAlreadyShown) || (!show && !isAlreadyShown)) { return false; } - this.popover(show ? 'show' : 'hide'); - this.toggleClass('disable-animation js-popover-show', show); + $popover.popover(show ? 'show' : 'hide'); + $popover.toggleClass('disable-animation js-popover-show', show); return true; } -- cgit v1.2.1 From 3f66736fa9998174b883fa61c28550bfe80f0ad0 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Sun, 15 Apr 2018 16:35:32 +0100 Subject: Revert and fix --- app/assets/javascripts/shared/popover.js | 7 +++---- spec/javascripts/feature_highlight/feature_highlight_spec.js | 8 +------- 2 files changed, 4 insertions(+), 11 deletions(-) diff --git a/app/assets/javascripts/shared/popover.js b/app/assets/javascripts/shared/popover.js index 2eb0eff11d1..3fc03553bdd 100644 --- a/app/assets/javascripts/shared/popover.js +++ b/app/assets/javascripts/shared/popover.js @@ -2,13 +2,12 @@ import $ from 'jquery'; import _ from 'underscore'; export function togglePopover(show) { - const $popover = $(this); - const isAlreadyShown = $popover.hasClass('js-popover-show'); + const isAlreadyShown = this.hasClass('js-popover-show'); if ((show && isAlreadyShown) || (!show && !isAlreadyShown)) { return false; } - $popover.popover(show ? 'show' : 'hide'); - $popover.toggleClass('disable-animation js-popover-show', show); + this.popover(show ? 'show' : 'hide'); + this.toggleClass('disable-animation js-popover-show', show); return true; } diff --git a/spec/javascripts/feature_highlight/feature_highlight_spec.js b/spec/javascripts/feature_highlight/feature_highlight_spec.js index ed2aea36319..ec46d4f905a 100644 --- a/spec/javascripts/feature_highlight/feature_highlight_spec.js +++ b/spec/javascripts/feature_highlight/feature_highlight_spec.js @@ -29,7 +29,6 @@ describe('feature highlight', () => { mock = new MockAdapter(axios); mock.onGet('/test').reply(200); spyOn(window, 'addEventListener'); - spyOn(window, 'removeEventListener'); featureHighlight.setupFeatureHighlightPopover('test', 0); }); @@ -64,12 +63,7 @@ describe('feature highlight', () => { it('setup show.bs.popover', () => { $(selector).trigger('show.bs.popover'); - expect(window.addEventListener).toHaveBeenCalledWith('scroll', jasmine.any(Function)); - }); - - it('setup hide.bs.popover', () => { - $(selector).trigger('hide.bs.popover'); - expect(window.removeEventListener).toHaveBeenCalledWith('scroll', jasmine.any(Function)); + expect(window.addEventListener).toHaveBeenCalledWith('scroll', jasmine.any(Function), { once: true }); }); it('removes disabled attribute', () => { -- cgit v1.2.1