Commit aa712e2b authored by Dmitriy Zaporozhets's avatar Dmitriy Zaporozhets

Merge branch 'new-project-header-redesign' into 'master'

Dropdowns for clone. Star and Fork with new count areas. Star and Unstarred Works now

Fixes #2876 and #3482
Used existing styles. <br/>
Did not attempt to make pixel perfect as styles already exist. <br/>

![Screen_Shot_2015-12-18_at_5.24.56_PM](/uploads/a79ba1e0be0232f2aeef8a43f3253479/Screen_Shot_2015-12-18_at_5.24.56_PM.png)

See merge request !2156
parents d84ca3e8 a1294e5a
class @Project class @Project
constructor: -> constructor: ->
# Git protocol switcher # Git protocol switcher
$('.js-protocol-switch').click -> $('ul.clone-options-dropdown a').click ->
return if $(@).hasClass('active') return if $(@).hasClass('active')
...@@ -10,7 +10,8 @@ class @Project ...@@ -10,7 +10,8 @@ class @Project
# Add the active class for the clicked button # Add the active class for the clicked button
$(@).toggleClass('active') $(@).toggleClass('active')
url = $(@).data('clone') url = $("#project_clone").val()
console.log("url",url)
# Update the input field # Update the input field
$('#project_clone').val(url) $('#project_clone').val(url)
......
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
...@@ -91,21 +91,83 @@ ...@@ -91,21 +91,83 @@
} }
} }
.input-group { .git-clone-holder {
display: inline-table; display: inline-table;
position: relative; position: relative;
top: 17px;
} }
.project-repo-buttons { .project-repo-buttons {
margin-top: 12px; margin-top: 12px;
margin-bottom: 0px; margin-bottom: 0px;
.count-buttons {
display: block;
margin-bottom: 12px;
}
.btn { .btn {
@include btn-gray; @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 { .count {
@include btn-gray;
display: inline-block; 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 @@ ...@@ -125,6 +187,13 @@
margin-right: 45px; margin-right: 45px;
} }
.clone-options {
display: table-cell;
a.btn {
width: 100%;
}
}
.form-control { .form-control {
cursor: auto; cursor: auto;
@extend .monospace; @extend .monospace;
......
...@@ -171,7 +171,7 @@ class ProjectsController < ApplicationController ...@@ -171,7 +171,7 @@ class ProjectsController < ApplicationController
@project.reload @project.reload
render json: { render json: {
html: view_to_html_string("projects/buttons/_star") star_count: @project.star_count
} }
end end
......
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
= icon('rss') = icon('rss')
.project-repo-buttons .project-repo-buttons
.split-one .split-one.count-buttons
= render 'projects/buttons/star' = render 'projects/buttons/star'
= render 'projects/buttons/fork' = render 'projects/buttons/fork'
...@@ -38,3 +38,6 @@ ...@@ -38,3 +38,6 @@
= render 'projects/buttons/dropdown' = render 'projects/buttons/dropdown'
= render 'projects/buttons/notifications' = render 'projects/buttons/notifications'
:coffeescript
new Star()
\ No newline at end of file
...@@ -4,10 +4,15 @@ ...@@ -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 = 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') = icon('code-fork fw')
Fork Fork
%div.count-with-arrow
%span.arrow
%span.count %span.count
= @project.forks_count = @project.forks_count
- else - else
= link_to new_namespace_project_fork_path(@project.namespace, @project), title: "Fork project", class: 'btn has_tooltip' do = link_to new_namespace_project_fork_path(@project.namespace, @project), title: "Fork project", class: 'btn has_tooltip' do
= icon('code-fork fw') = icon('code-fork fw')
Fork
%div.count-with-arrow
%span.arrow
%span.count %span.count
= @project.forks_count = @project.forks_count
- if current_user - 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 = 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
- if current_user.starred?(@project)
= icon('star fw') = icon('star fw')
%span.count %span.starred Unstar
- else
= icon('star-o fw')
%span Star
%div.count-with-arrow
%span.arrow
%span.count.star-count
= @project.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 - else
= link_to new_user_session_path, class: 'btn has_tooltip star-btn', title: 'You must sign in to star a project' do = 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') = icon('star fw')
Star
%div.count-with-arrow
%span.arrow
%span.count %span.count
= @project.star_count = @project.star_count
- project = project || @project - project = project || @project
.git-clone-holder.input-group
.input-group-addon.git-protocols .git-clone-holder
.input-group-btn .btn-group.clone-options
= ssh_clone_button(project) %a#clone-dropdown.clone-dropdown-btn.btn{href: '#', 'data-toggle' => 'dropdown'}
.input-group-btn %span
= http_clone_button(project) = 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 = text_field_tag :project_clone, default_url_to_repo(project), class: "js-select-on-focus form-control", readonly: true
.input-group-btn .input-group-btn
= clipboard_button(clipboard_target: '#project_clone') = 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'));
});
@project-create
Feature: Project Create Feature: Project Create
In order to get access to project sections In order to get access to project sections
A user with ability to create a project A user with ability to create a project
......
@project-stars
Feature: Project Star Feature: Project Star
Scenario: New projects have 0 stars Scenario: New projects have 0 stars
Given public project "Community" Given public project "Community"
......
...@@ -26,7 +26,8 @@ class Spinach::Features::ProjectCreate < Spinach::FeatureSteps ...@@ -26,7 +26,8 @@ class Spinach::Features::ProjectCreate < Spinach::FeatureSteps
end end
step 'I click on HTTP' do step 'I click on HTTP' do
click_button 'HTTP' find('#clone-dropdown').click
find('#http-selector').click
end end
step 'Remote url should update to http link' do step 'Remote url should update to http link' do
...@@ -34,7 +35,8 @@ class Spinach::Features::ProjectCreate < Spinach::FeatureSteps ...@@ -34,7 +35,8 @@ class Spinach::Features::ProjectCreate < Spinach::FeatureSteps
end end
step 'If I click on SSH' do step 'If I click on SSH' do
click_button 'SSH' find('#clone-dropdown').click
find('#ssh-selector').click
end end
step 'Remote url should update to ssh link' do step 'Remote url should update to ssh link' do
......
...@@ -32,6 +32,6 @@ class Spinach::Features::ProjectStar < Spinach::FeatureSteps ...@@ -32,6 +32,6 @@ class Spinach::Features::ProjectStar < Spinach::FeatureSteps
protected protected
def has_n_stars(n) 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
end end
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment