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
This commit is contained in:
commit
aa712e2b36
|
@ -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)
|
||||
|
|
|
@ -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
|
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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()
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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'));
|
||||
});
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
@project-stars
|
||||
Feature: Project Star
|
||||
Scenario: New projects have 0 stars
|
||||
Given public project "Community"
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue