diff options
-rw-r--r-- | app/assets/javascripts/project.js.coffee | 5 | ||||
-rw-r--r-- | app/assets/javascripts/star.js.coffee | 22 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/projects.scss | 75 | ||||
-rw-r--r-- | app/controllers/projects_controller.rb | 2 | ||||
-rw-r--r-- | app/views/projects/_home_panel.html.haml | 5 | ||||
-rw-r--r-- | app/views/projects/buttons/_fork.html.haml | 5 | ||||
-rw-r--r-- | app/views/projects/buttons/_star.html.haml | 22 | ||||
-rw-r--r-- | app/views/shared/_clone_panel.html.haml | 29 | ||||
-rw-r--r-- | features/project/create.feature | 1 | ||||
-rw-r--r-- | features/project/star.feature | 1 | ||||
-rw-r--r-- | features/steps/project/create.rb | 6 | ||||
-rw-r--r-- | features/steps/project/star.rb | 2 |
12 files changed, 149 insertions, 26 deletions
diff --git a/app/assets/javascripts/project.js.coffee b/app/assets/javascripts/project.js.coffee index 1f221945c06..d7a658f8faa 100644 --- a/app/assets/javascripts/project.js.coffee +++ b/app/assets/javascripts/project.js.coffee @@ -1,7 +1,7 @@ class @Project constructor: -> # Git protocol switcher - $('.js-protocol-switch').click -> + $('ul.clone-options-dropdown a').click -> return if $(@).hasClass('active') @@ -10,7 +10,8 @@ class @Project # Add the active class for the clicked button $(@).toggleClass('active') - url = $(@).data('clone') + url = $("#project_clone").val() + console.log("url",url) # Update the input field $('#project_clone').val(url) diff --git a/app/assets/javascripts/star.js.coffee b/app/assets/javascripts/star.js.coffee new file mode 100644 index 00000000000..d849b2e7950 --- /dev/null +++ b/app/assets/javascripts/star.js.coffee @@ -0,0 +1,22 @@ +class @Star + constructor: -> + $('.project-home-panel .toggle-star').on('ajax:success', (e, data, status, xhr) -> + $this = $(this) + $starSpan = $this.find('span') + $starIcon = $this.find('i') + + toggleStar = (isStarred) -> + $this.parent().find('span.count').text data.star_count + if isStarred + $starSpan.removeClass('starred').text 'Star' + $starIcon.removeClass('fa-star').addClass 'fa-star-o' + else + $starSpan.addClass('starred').text 'Unstar' + $starIcon.removeClass('fa-star-o').addClass 'fa-star' + return + + toggleStar $starSpan.hasClass('starred') + return + ).on 'ajax:error', (e, xhr, status, error) -> + new Flash('Star toggle failed. Try again later.', 'alert') + return
\ No newline at end of file diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 3917efeecdb..cff3edb7ed2 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -91,21 +91,83 @@ } } - .input-group { + .git-clone-holder { display: inline-table; position: relative; - top: 17px; } .project-repo-buttons { margin-top: 12px; margin-bottom: 0px; + .count-buttons { + display: block; + margin-bottom: 12px; + } + .btn { @include btn-gray; - + text-transform: none; + } + .count-with-arrow { + display: inline-block; + position: relative; + margin-left: 4px; + + .arrow { + &:before { + content: ''; + display: inline-block; + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + top: 50%; + left: 0; + margin-top: -6px; + border-width: 7px 5px 7px 0; + border-right-color: #dce0e5; + } + + &:after { + content: ''; + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + top: 50%; + left: 1px; + margin-top: -9px; + border-width: 10px 7px 10px 0; + border-right-color: #FFF; + } + } .count { + @include btn-gray; display: inline-block; + background: white; + border-radius: 2px; + border-width: 1px; + border-style: solid; + font-size: 13px; + font-weight: 600; + line-height: 20px; + padding: 11px 16px; + letter-spacing: .4px; + padding: 10px; + text-align: center; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + background-image: none; + white-space: nowrap; + margin: 0 11px 0px 4px; + + &:hover { + background: #FFF; + } } } } @@ -125,6 +187,13 @@ margin-right: 45px; } + .clone-options { + display: table-cell; + a.btn { + width: 100%; + } + } + .form-control { cursor: auto; @extend .monospace; diff --git a/app/controllers/projects_controller.rb b/app/controllers/projects_controller.rb index bf5e25ff895..2dab04f2a7c 100644 --- a/app/controllers/projects_controller.rb +++ b/app/controllers/projects_controller.rb @@ -171,7 +171,7 @@ class ProjectsController < ApplicationController @project.reload render json: { - html: view_to_html_string("projects/buttons/_star") + star_count: @project.star_count } end diff --git a/app/views/projects/_home_panel.html.haml b/app/views/projects/_home_panel.html.haml index c1669ac046b..e92115b9b98 100644 --- a/app/views/projects/_home_panel.html.haml +++ b/app/views/projects/_home_panel.html.haml @@ -27,7 +27,7 @@ = icon('rss') .project-repo-buttons - .split-one + .split-one.count-buttons = render 'projects/buttons/star' = render 'projects/buttons/fork' @@ -38,3 +38,6 @@ = render 'projects/buttons/dropdown' = render 'projects/buttons/notifications' + +:coffeescript + new Star()
\ No newline at end of file diff --git a/app/views/projects/buttons/_fork.html.haml b/app/views/projects/buttons/_fork.html.haml index 2d3abf09051..133531887a2 100644 --- a/app/views/projects/buttons/_fork.html.haml +++ b/app/views/projects/buttons/_fork.html.haml @@ -4,10 +4,15 @@ = link_to namespace_project_path(current_user, current_user.fork_of(@project)), title: 'Go to your fork', class: 'btn has_tooltip' do = icon('code-fork fw') Fork + %div.count-with-arrow + %span.arrow %span.count = @project.forks_count - else = link_to new_namespace_project_fork_path(@project.namespace, @project), title: "Fork project", class: 'btn has_tooltip' do = icon('code-fork fw') + Fork + %div.count-with-arrow + %span.arrow %span.count = @project.forks_count diff --git a/app/views/projects/buttons/_star.html.haml b/app/views/projects/buttons/_star.html.haml index 41a3ec6d90f..21ba426aaa1 100644 --- a/app/views/projects/buttons/_star.html.haml +++ b/app/views/projects/buttons/_star.html.haml @@ -1,19 +1,21 @@ - if current_user = link_to toggle_star_namespace_project_path(@project.namespace, @project), class: 'btn star-btn toggle-star has_tooltip', method: :post, remote: true, title: "Star project" do - = icon('star fw') - %span.count + - if current_user.starred?(@project) + = icon('star fw') + %span.starred Unstar + - else + = icon('star-o fw') + %span Star + %div.count-with-arrow + %span.arrow + %span.count.star-count = @project.star_count - :javascript - $('.project-home-panel .toggle-star').on('ajax:success', function (e, data, status, xhr) { - $(this).replaceWith(data.html); - }) - .on('ajax:error', function (e, xhr, status, error) { - new Flash('Star toggle failed. Try again later.', 'alert'); - }); - - else = link_to new_user_session_path, class: 'btn has_tooltip star-btn', title: 'You must sign in to star a project' do = icon('star fw') + Star + %div.count-with-arrow + %span.arrow %span.count = @project.star_count diff --git a/app/views/shared/_clone_panel.html.haml b/app/views/shared/_clone_panel.html.haml index edb5778f424..687a59c270f 100644 --- a/app/views/shared/_clone_panel.html.haml +++ b/app/views/shared/_clone_panel.html.haml @@ -1,10 +1,27 @@ - project = project || @project -.git-clone-holder.input-group - .input-group-addon.git-protocols - .input-group-btn - = ssh_clone_button(project) - .input-group-btn - = http_clone_button(project) + +.git-clone-holder + .btn-group.clone-options + %a#clone-dropdown.clone-dropdown-btn.btn{href: '#', 'data-toggle' => 'dropdown'} + %span + = default_clone_protocol.upcase + = icon('angle-down') + %ul.dropdown-menu.dropdown-menu-right.clone-options-dropdown + %li + %a#ssh-selector{href: @project.ssh_url_to_repo} + SSH + %li + %a#http-selector{href: @project.http_url_to_repo} + HTTPS + = 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') + +:javascript + $('ul.clone-options-dropdown a').on('click',function(e){ + e.preventDefault(); + var $this = $(this); + $('a.clone-dropdown-btn span').text($this.text()); + $('#project_clone').val($this.attr('href')); + }); diff --git a/features/project/create.feature b/features/project/create.feature index a86079143e5..27136798e36 100644 --- a/features/project/create.feature +++ b/features/project/create.feature @@ -1,3 +1,4 @@ +@project-create Feature: Project Create In order to get access to project sections A user with ability to create a project diff --git a/features/project/star.feature b/features/project/star.feature index a45f9c470ea..618f44fe6dc 100644 --- a/features/project/star.feature +++ b/features/project/star.feature @@ -1,3 +1,4 @@ +@project-stars Feature: Project Star Scenario: New projects have 0 stars Given public project "Community" diff --git a/features/steps/project/create.rb b/features/steps/project/create.rb index f90218f3791..8a0e8fc2b6c 100644 --- a/features/steps/project/create.rb +++ b/features/steps/project/create.rb @@ -26,7 +26,8 @@ class Spinach::Features::ProjectCreate < Spinach::FeatureSteps end step 'I click on HTTP' do - click_button 'HTTP' + find('#clone-dropdown').click + find('#http-selector').click end step 'Remote url should update to http link' do @@ -34,7 +35,8 @@ class Spinach::Features::ProjectCreate < Spinach::FeatureSteps end step 'If I click on SSH' do - click_button 'SSH' + find('#clone-dropdown').click + find('#ssh-selector').click end step 'Remote url should update to ssh link' do diff --git a/features/steps/project/star.rb b/features/steps/project/star.rb index bd2e0619cdd..9f7c748a3b7 100644 --- a/features/steps/project/star.rb +++ b/features/steps/project/star.rb @@ -32,6 +32,6 @@ class Spinach::Features::ProjectStar < Spinach::FeatureSteps protected def has_n_stars(n) - expect(page).to have_css(".star-btn .count", text: n, visible: true) + expect(page).to have_css(".star-count", text: n, visible: true) end end |