From af65046c5fd9f214124d39a5582b06ee2fe39933 Mon Sep 17 00:00:00 2001 From: Robert Speicher Date: Sun, 22 Nov 2015 23:52:02 -0500 Subject: [PATCH 1/6] Move HTTP/SSH clone button logic to helpers --- app/helpers/button_helper.rb | 35 +++++++++++++++++++++++++ app/views/shared/_clone_panel.html.haml | 18 ++----------- 2 files changed, 37 insertions(+), 16 deletions(-) create mode 100644 app/helpers/button_helper.rb diff --git a/app/helpers/button_helper.rb b/app/helpers/button_helper.rb new file mode 100644 index 00000000000..8963e96ea1d --- /dev/null +++ b/app/helpers/button_helper.rb @@ -0,0 +1,35 @@ +module ButtonHelper + def http_clone_button(project) + klass = 'btn' + klass << ' active' if default_clone_protocol == 'http' + klass << ' has_tooltip' if current_user.try(:require_password?) + + protocol = gitlab_config.protocol.upcase + + content_tag :button, protocol, + class: klass, + data: { + clone: project.http_url_to_repo, + container: 'body', + html: 'true', + title: "Set a password on your account
to pull or push via #{protocol}" + }, + type: :button + end + + def ssh_clone_button(project) + klass = 'btn' + klass << ' active' if default_clone_protocol == 'ssh' + klass << ' has_tooltip' if current_user.try(:require_ssh_key?) + + content_tag :button, 'SSH', + class: klass, + data: { + clone: project.ssh_url_to_repo, + container: 'body', + html: 'true', + title: 'Add an SSH key to your profile
to pull or push via SSH.' + }, + type: :button + end +end diff --git a/app/views/shared/_clone_panel.html.haml b/app/views/shared/_clone_panel.html.haml index 8bcb24ae9df..a82971157d3 100644 --- a/app/views/shared/_clone_panel.html.haml +++ b/app/views/shared/_clone_panel.html.haml @@ -2,23 +2,9 @@ .git-clone-holder.input-group .input-group-addon.git-protocols .input-group-btn - %button{ | - type: 'button', | - class: "btn #{ 'active' if default_clone_protocol == 'ssh' }#{ ' has_tooltip' if current_user && current_user.require_ssh_key? }", | - :"data-clone" => project.ssh_url_to_repo, | - :"data-title" => "Add an SSH key to your profile
to pull or push via SSH.", - :"data-html" => "true", - :"data-container" => "body"} - SSH + = ssh_clone_button(project) .input-group-btn - %button{ | - type: 'button', | - class: "btn #{ 'active' if default_clone_protocol == 'http' }#{ ' has_tooltip' if current_user && current_user.require_password? }", | - :"data-clone" => project.http_url_to_repo, | - :"data-title" => "Set a password on your account
to pull or push via #{gitlab_config.protocol.upcase}.", - :"data-html" => "true", - :"data-container" => "body"} - = gitlab_config.protocol.upcase + = http_clone_button(project) = text_field_tag :project_clone, default_url_to_repo(project), class: "js-select-on-focus form-control", readonly: true - if project.kind_of?(Project) .input-group-addon.has_tooltip{title: "#{visibility_level_label(project.visibility_level)} project", data: { container: "body" } } From acc0f162c864d2a061461467473fca8761b6611f Mon Sep 17 00:00:00 2001 From: Robert Speicher Date: Sun, 22 Nov 2015 23:53:55 -0500 Subject: [PATCH 2/6] Move clipboard_button helper to ButtonHelper module --- app/helpers/button_helper.rb | 7 +++++++ app/helpers/clipboard_helper.rb | 8 -------- 2 files changed, 7 insertions(+), 8 deletions(-) delete mode 100644 app/helpers/clipboard_helper.rb diff --git a/app/helpers/button_helper.rb b/app/helpers/button_helper.rb index 8963e96ea1d..bbb35afca89 100644 --- a/app/helpers/button_helper.rb +++ b/app/helpers/button_helper.rb @@ -1,4 +1,11 @@ module ButtonHelper + def clipboard_button + content_tag :button, + icon('clipboard'), + class: 'btn btn-xs btn-clipboard js-clipboard-trigger', + type: :button + end + def http_clone_button(project) klass = 'btn' klass << ' active' if default_clone_protocol == 'http' diff --git a/app/helpers/clipboard_helper.rb b/app/helpers/clipboard_helper.rb deleted file mode 100644 index 3c1d7569fac..00000000000 --- a/app/helpers/clipboard_helper.rb +++ /dev/null @@ -1,8 +0,0 @@ -module ClipboardHelper - def clipboard_button - content_tag :button, - icon('clipboard'), - class: 'btn btn-xs btn-clipboard js-clipboard-trigger', - type: :button - end -end From 7dab8ed739359bc579d8bc4d3de61816993ca57d Mon Sep 17 00:00:00 2001 From: Robert Speicher Date: Tue, 24 Nov 2015 18:35:24 -0500 Subject: [PATCH 3/6] Rework the copy_to_clipboard logic It needed to be more flexible in how we set the target text or element. --- .../javascripts/copy_to_clipboard.js.coffee | 63 ++++++++++--------- app/helpers/button_helper.rb | 20 +++++- app/views/projects/commits/_commit.html.haml | 4 +- .../projects/issues/_discussion.html.haml | 4 +- .../merge_requests/_discussion.html.haml | 4 +- 5 files changed, 58 insertions(+), 37 deletions(-) diff --git a/app/assets/javascripts/copy_to_clipboard.js.coffee b/app/assets/javascripts/copy_to_clipboard.js.coffee index 9c68c5cc1bc..24301e01b10 100644 --- a/app/assets/javascripts/copy_to_clipboard.js.coffee +++ b/app/assets/javascripts/copy_to_clipboard.js.coffee @@ -1,32 +1,37 @@ #= require clipboard +genericSuccess = (e) -> + showTooltip(e.trigger, 'Copied!') + + # Clear the selection and blur the trigger so it loses its border + e.clearSelection() + $(e.trigger).blur() + +# Safari doesn't support `execCommand`, so instead we inform the user to +# copy manually. +# +# See http://clipboardjs.com/#browser-support +genericError = (e) -> + if /Mac/i.test(navigator.userAgent) + key = '⌘' # Command + else + key = 'Ctrl' + + showTooltip(e.trigger, "Press #{key}-C to copy") + +showTooltip = (target, title) -> + $(target). + tooltip( + container: 'body' + html: 'true' + placement: 'auto bottom' + title: title + trigger: 'manual' + ). + tooltip('show'). + one('mouseleave', -> $(this).tooltip('hide')) + $ -> - clipboard = new Clipboard '.js-clipboard-trigger', - text: (trigger) -> - $target = $(trigger.nextElementSibling || trigger.previousElementSibling) - $target.data('clipboard-text') || $target.text().trim() - - clipboard.on 'success', (e) -> - $(e.trigger). - tooltip(trigger: 'manual', placement: 'auto bottom', title: 'Copied!'). - tooltip('show'). - one('mouseleave', -> $(this).tooltip('hide')) - - # Clear the selection and blur the trigger so it loses its border - e.clearSelection() - $(e.trigger).blur() - - # Safari doesn't support `execCommand`, so instead we inform the user to - # copy manually. - # - # See http://clipboardjs.com/#browser-support - clipboard.on 'error', (e) -> - if /Mac/i.test(navigator.userAgent) - title = "Press ⌘-C to copy" - else - title = "Press Ctrl-C to copy" - - $(e.trigger). - tooltip(trigger: 'manual', placement: 'auto bottom', html: true, title: title). - tooltip('show'). - one('mouseleave', -> $(this).tooltip('hide')) + clipboard = new Clipboard '[data-clipboard-target], [data-clipboard-text]' + clipboard.on 'success', genericSuccess + clipboard.on 'error', genericError diff --git a/app/helpers/button_helper.rb b/app/helpers/button_helper.rb index bbb35afca89..b9bb1ac8d88 100644 --- a/app/helpers/button_helper.rb +++ b/app/helpers/button_helper.rb @@ -1,8 +1,24 @@ module ButtonHelper - def clipboard_button + # Output a "Copy to Clipboard" button + # + # data - Data attributes passed to `content_tag` + # + # Examples: + # + # # Define the clipboard's text + # clipboard_button(clipboard_text: "Foo") + # # => "" + # + # # Define the target element + # clipboard_button(clipboard_target: "#foo") + # # => "" + # + # See http://clipboardjs.com/#usage + def clipboard_button(data = {}) content_tag :button, icon('clipboard'), - class: 'btn btn-xs btn-clipboard js-clipboard-trigger', + class: 'btn btn-xs btn-clipboard', + data: data, type: :button end diff --git a/app/views/projects/commits/_commit.html.haml b/app/views/projects/commits/_commit.html.haml index 805be332e64..2e489a0a4d5 100644 --- a/app/views/projects/commits/_commit.html.haml +++ b/app/views/projects/commits/_commit.html.haml @@ -20,8 +20,8 @@ - if ci_commit = render_ci_status(ci_commit)   - = clipboard_button - = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit_short_id", data: {clipboard_text: commit.id} + = clipboard_button(clipboard_text: commit.id) + = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit_short_id" .notes_count - if note_count > 0 diff --git a/app/views/projects/issues/_discussion.html.haml b/app/views/projects/issues/_discussion.html.haml index 020952dd001..8f0a1ed9be2 100644 --- a/app/views/projects/issues/_discussion.html.haml +++ b/app/views/projects/issues/_discussion.html.haml @@ -18,9 +18,9 @@ = link_to_member(@project, participant, name: false, size: 24) .col-md-3 .input-group.cross-project-reference - %span.slead.has_tooltip{title: 'Cross-project reference'} + %span#cross-project-reference.slead.has_tooltip{title: 'Cross-project reference'} = cross_project_reference(@project, @issue) - = clipboard_button + = clipboard_button(clipboard_target: '#cross-project-reference') .row %section.col-md-9 diff --git a/app/views/projects/merge_requests/_discussion.html.haml b/app/views/projects/merge_requests/_discussion.html.haml index cb75bd8c5ba..2b3c3eff5e4 100644 --- a/app/views/projects/merge_requests/_discussion.html.haml +++ b/app/views/projects/merge_requests/_discussion.html.haml @@ -15,9 +15,9 @@ = render "projects/merge_requests/show/participants" .col-md-3 .input-group.cross-project-reference - %span.slead.has_tooltip{title: 'Cross-project reference'} + %span#cross-project-reference.slead.has_tooltip{title: 'Cross-project reference'} = cross_project_reference(@project, @merge_request) - = clipboard_button + = clipboard_button(clipboard_target: '#cross-project-reference') .row %section.col-md-9 From 1d80cd315e403e02f85a99c35eb9e83f4d829f8d Mon Sep 17 00:00:00 2001 From: Robert Speicher Date: Tue, 24 Nov 2015 19:32:06 -0500 Subject: [PATCH 4/6] Add clipboard button to project clone panel Closes #3585 --- app/assets/javascripts/project.js.coffee | 10 ++++------ app/assets/stylesheets/pages/projects.scss | 7 ++++++- app/helpers/button_helper.rb | 4 ++-- app/helpers/projects_helper.rb | 3 +-- app/views/shared/_clone_panel.html.haml | 2 ++ 5 files changed, 15 insertions(+), 11 deletions(-) diff --git a/app/assets/javascripts/project.js.coffee b/app/assets/javascripts/project.js.coffee index 0ea8fffce07..d37a00bdedc 100644 --- a/app/assets/javascripts/project.js.coffee +++ b/app/assets/javascripts/project.js.coffee @@ -3,11 +3,9 @@ class @Project # Git clone panel switcher cloneHolder = $('.git-clone-holder') if cloneHolder.length - $('a, button', cloneHolder).click -> - $('a, button', cloneHolder).removeClass 'active' - $(@).addClass 'active' - $('#project_clone', cloneHolder).val $(@).data 'clone' - $(".clone").text("").append $(@).data 'clone' + $('.js-protocol-switch', cloneHolder).click -> + $('.js-protocol-switch', cloneHolder).toggleClass('active') + $('#project_clone').val($(@).data('clone')) # Ref switcher $('.project-refs-select').on 'change', -> @@ -39,4 +37,4 @@ class @Project when 4 then label = ' On Mention ' $('#notifications-button').empty().append("" + label + "") $(@).parents('ul').find('li.active').removeClass 'active' - $(@).parent().addClass 'active' \ No newline at end of file + $(@).parent().addClass 'active' diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index d3b10040022..ad607ead2bf 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -178,6 +178,11 @@ &:active { outline: none; } + + &.btn-clipboard { + padding-left: 15px; + padding-right: 15px; + } } .active { @@ -552,4 +557,4 @@ pre.light-well { z-index: 100; position: relative; } -} \ No newline at end of file +} diff --git a/app/helpers/button_helper.rb b/app/helpers/button_helper.rb index b9bb1ac8d88..313b6dde910 100644 --- a/app/helpers/button_helper.rb +++ b/app/helpers/button_helper.rb @@ -23,7 +23,7 @@ module ButtonHelper end def http_clone_button(project) - klass = 'btn' + klass = 'btn js-protocol-switch' klass << ' active' if default_clone_protocol == 'http' klass << ' has_tooltip' if current_user.try(:require_password?) @@ -41,7 +41,7 @@ module ButtonHelper end def ssh_clone_button(project) - klass = 'btn' + klass = 'btn js-protocol-switch' klass << ' active' if default_clone_protocol == 'ssh' klass << ' has_tooltip' if current_user.try(:require_ssh_key?) diff --git a/app/helpers/projects_helper.rb b/app/helpers/projects_helper.rb index c9cd4a0d54c..c0c51aae039 100644 --- a/app/helpers/projects_helper.rb +++ b/app/helpers/projects_helper.rb @@ -173,8 +173,7 @@ module ProjectsHelper 'unknown' end - def default_url_to_repo(project = nil) - project = project || @project + def default_url_to_repo(project = @project) current_user ? project.url_to_repo : project.http_url_to_repo end diff --git a/app/views/shared/_clone_panel.html.haml b/app/views/shared/_clone_panel.html.haml index a82971157d3..408a46aaafc 100644 --- a/app/views/shared/_clone_panel.html.haml +++ b/app/views/shared/_clone_panel.html.haml @@ -6,6 +6,8 @@ .input-group-btn = http_clone_button(project) = text_field_tag :project_clone, default_url_to_repo(project), class: "js-select-on-focus form-control", readonly: true + .input-group-btn + = clipboard_button(clipboard_target: '#project_clone') - if project.kind_of?(Project) .input-group-addon.has_tooltip{title: "#{visibility_level_label(project.visibility_level)} project", data: { container: "body" } } .visibility-level-label From 637e64c24472a06b32091cb45f1b81260c5e6ec0 Mon Sep 17 00:00:00 2001 From: Robert Speicher Date: Tue, 24 Nov 2015 20:38:36 -0500 Subject: [PATCH 5/6] Clean up the Git protocol switcher JS Also re-adds the `.clone` updating that was removed accidentally. Thanks, tests! --- app/assets/javascripts/project.js.coffee | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/app/assets/javascripts/project.js.coffee b/app/assets/javascripts/project.js.coffee index d37a00bdedc..ec919f0cd67 100644 --- a/app/assets/javascripts/project.js.coffee +++ b/app/assets/javascripts/project.js.coffee @@ -1,11 +1,19 @@ class @Project constructor: -> - # Git clone panel switcher - cloneHolder = $('.git-clone-holder') - if cloneHolder.length - $('.js-protocol-switch', cloneHolder).click -> - $('.js-protocol-switch', cloneHolder).toggleClass('active') - $('#project_clone').val($(@).data('clone')) + # Git protocol switcher + $('.js-protocol-switch').click -> + return if $(@).hasClass('active') + + # Toggle 'active' for both buttons + $('.js-protocol-switch').toggleClass('active') + + url = $(@).data('clone') + + # Update the input field + $('#project_clone').val(url) + + # Update the command line instructions + $('.clone').text(url) # Ref switcher $('.project-refs-select').on 'change', -> From 3723182a8831595502570c90211610abb4770781 Mon Sep 17 00:00:00 2001 From: Robert Speicher Date: Fri, 27 Nov 2015 16:15:06 -0500 Subject: [PATCH 6/6] Move project visibility level off of the clone panel --- app/assets/stylesheets/pages/projects.scss | 5 +++++ app/views/projects/_home_panel.html.haml | 10 ++++++---- app/views/shared/_clone_panel.html.haml | 4 ---- 3 files changed, 11 insertions(+), 8 deletions(-) diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index ad607ead2bf..4a0fe546844 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -90,7 +90,12 @@ } .visibility-level-label { + @extend .btn; + @extend .btn-gray; + color: $gray; + cursor: auto; + i { color: inherit; } diff --git a/app/views/projects/_home_panel.html.haml b/app/views/projects/_home_panel.html.haml index 88d54bf6f21..b30036966a7 100644 --- a/app/views/projects/_home_panel.html.haml +++ b/app/views/projects/_home_panel.html.haml @@ -1,5 +1,5 @@ - empty_repo = @project.empty_repo? -.project-home-panel.clearfix{:class => ("empty-project" if empty_repo)} +.project-home-panel.cover-block.clearfix{:class => ("empty-project" if empty_repo)} .project-identicon-holder = project_icon(@project, alt: '', class: 'project-avatar avatar s90') .project-home-desc @@ -12,8 +12,10 @@ Forked from = link_to project_path(forked_from_project) do = forked_from_project.namespace.try(:name) - - + .cover-controls + .visibility-level-label + = visibility_level_icon(@project.visibility_level) + = visibility_level_label(@project.visibility_level) .project-repo-buttons .split-one @@ -21,7 +23,7 @@ = render 'projects/buttons/fork' = render "shared/clone_panel" - + .split-repo-buttons = render "projects/buttons/download" = render 'projects/buttons/dropdown' diff --git a/app/views/shared/_clone_panel.html.haml b/app/views/shared/_clone_panel.html.haml index 408a46aaafc..edb5778f424 100644 --- a/app/views/shared/_clone_panel.html.haml +++ b/app/views/shared/_clone_panel.html.haml @@ -8,7 +8,3 @@ = text_field_tag :project_clone, default_url_to_repo(project), class: "js-select-on-focus form-control", readonly: true .input-group-btn = clipboard_button(clipboard_target: '#project_clone') - - if project.kind_of?(Project) - .input-group-addon.has_tooltip{title: "#{visibility_level_label(project.visibility_level)} project", data: { container: "body" } } - .visibility-level-label - = visibility_level_icon(project.visibility_level)