Commit dab4ac54 authored by Annabel Dunstone's avatar Annabel Dunstone

Diff design updates

parent 3cfeb375
......@@ -7,6 +7,7 @@
&:focus,
&:active {
outline: none;
background-color: $btn-active-gray;
@include box-shadow($gl-btn-active-background);
}
}
......@@ -27,7 +28,8 @@
color: $color;
}
&:active {
&:active,
&.active {
@include box-shadow ($gl-btn-active-background);
background-color: $dark;
......@@ -61,7 +63,7 @@
}
@mixin btn-white {
@include btn-color($white-light, $border-white-light, $white-normal, $border-white-normal, $white-dark, $border-white-dark, #313236);
@include btn-color($white-light, $border-color, $white-normal, $border-white-normal, $white-dark, $border-white-dark, $btn-white-active);
}
.btn {
......@@ -218,3 +220,26 @@
margin-right: 5px;
}
}
.btn-text-field {
width: 100%;
text-align: left;
padding: 6px 16px;
border-color: $border-color;
color: $btn-placeholder-gray;
background-color: $background-color;
&:hover,
&:active,
&:focus {
cursor: text;
box-shadow: none;
border-color: $border-color;
color: $btn-placeholder-gray;
background-color: $background-color;
}
}
.btn-file-option {
background: linear-gradient(180deg, $white-light 25%, $gray-light 100%);
}
......@@ -15,12 +15,13 @@
.file-title {
position: relative;
background: $background-color;
background-color: $background-color;
border-bottom: 1px solid $border-color;
margin: 0;
text-align: left;
padding: 10px $gl-padding;
word-wrap: break-word;
border-radius: 3px 3px 0px 0px;
.file-actions {
float: right;
......@@ -49,7 +50,7 @@
}
}
a {
a:not(.btn) {
color: $gl-dark-link-color;
}
......
......@@ -14,10 +14,6 @@
background: $row-hover;
}
&:last-child {
border-bottom: none;
}
.avatar {
margin-right: 15px;
}
......
......@@ -10,10 +10,10 @@ $gutter_inner_width: 258px;
/*
* UI elements
*/
$border-color: #efeff1;
$border-color: #e5e5e5;
$focus-border-color: #3aabf0;
$table-border-color: #eef0f2;
$background-color: #faf9f9;
$background-color: #fafafa;
/*
* Text
......@@ -81,7 +81,7 @@ $provider-btn-not-active-color: #4688f1;
$white-light: #fff;
$white-normal: #ededed;
$white-dark: #ededed;
$white-dark: #ECECEC;
$gray-light: #faf9f9;
$gray-normal: #f5f5f5;
......@@ -152,8 +152,8 @@ $gl-success: $green-normal;
$gl-info: $blue-normal;
$gl-warning: $orange-normal;
$gl-danger: $red-normal;
$gl-btn-active-background: rgba(0, 0, 0, 0.12);
$gl-btn-active-gradient: inset 0 0 4px $gl-btn-active-background;
$gl-btn-active-background: rgba(0, 0, 0, 0.16);
$gl-btn-active-gradient: inset 0 2px 3px $gl-btn-active-background;
/*
* Commit Diff Colors
......@@ -167,6 +167,7 @@ $line-removed-dark: #fac5cd;
$line-number-old: #f9d7dc;
$line-number-new: #ddfbe6;
$match-line: #fafafa;
$table-border-gray: #f0f0f0;
/*
* Fonts
*/
......@@ -199,6 +200,13 @@ $dropdown-toggle-hover-border-color: darken($dropdown-toggle-border-color, 15%);
$dropdown-toggle-icon-color: #c4c4c4;
$dropdown-toggle-hover-icon-color: $dropdown-toggle-hover-border-color;
/*
* Buttons
*/
$btn-active-gray: #ECECEC;
$btn-placeholder-gray: #C7C7C7;
$btn-white-active: #848484;
/*
* Award emoji
*/
......
......@@ -6,12 +6,12 @@
}
.diff-line-num, .diff-line-num a {
color: $black-transparent;
color: #8f8f8f;
}
// Code itself
pre.code, .diff-line-num {
border-color: $border-color;
border-color: $table-border-gray;
}
&, pre.code, .line_holder .line_content {
......
......@@ -2,6 +2,7 @@
.diff-file {
border: 1px solid $border-color;
margin-bottom: $gl-padding;
border-radius: 3px;
.diff-header {
position: relative;
......@@ -31,6 +32,7 @@
overflow-y: hidden;
background: #fff;
color: #333;
border-radius: 0 0 3px 3px;
.unfold {
cursor: pointer;
......@@ -325,6 +327,12 @@
float: right;
}
.diffs {
.content-block {
border-bottom: none;
}
}
// Mobile
@media (max-width: 480px) {
.diff-title {
......
/**
* Note Form
*/
.reply-btn {
@extend .btn-primary;
margin: 10px $gl-padding;
}
.comment-btn {
@extend .btn-create;
}
......@@ -118,7 +113,6 @@
.discussion-body,
.diff-file {
.notes .note {
border-color: #ddd;
padding: 10px 15px;
}
......
......@@ -58,6 +58,7 @@ ul.notes {
.note {
display: block;
position: relative;
border-bottom: 1px solid $table-border-gray;
&.is-editting {
.note-header,
......@@ -117,9 +118,6 @@ ul.notes {
padding-bottom: 3px;
}
&:last-child {
border-bottom: 1px solid $border-color;
}
}
}
......@@ -137,14 +135,14 @@ ul.notes {
font-family: $regular_font;
td {
border: 1px solid #ddd;
border: 1px solid $table-border-gray;
border-left: none;
&.notes_line {
vertical-align: middle;
text-align: center;
padding: 10px 0;
background: #fff;
background: $background-color;
color: $text-color;
}
&.notes_line2 {
......@@ -175,9 +173,6 @@ ul.notes {
}
}
.author_link {
font-weight: 600;
}
}
.note-headline-light,
......@@ -194,21 +189,6 @@ ul.notes {
float: right;
margin-left: 10px;
color: $notes-action-color;
.js-note-delete {
&:hover {
@extend .cgray;
&.danger { @extend .cred; }
}
}
.js-note-edit {
i {
&:hover {
color: $gl-link-color;
}
}
}
}
.note-action-button,
......@@ -218,14 +198,26 @@ ul.notes {
line-height: 24px;
.fa {
color: $notes-action-color;
position: relative;
top: 1px;
font-size: 17px;
}
.fa-trash-o {
top: 0;
font-size: 16px;
&.js-note-delete {
i {
&:hover {
color: $gl-text-red;
}
}
}
&.js-note-edit {
i {
&:hover {
color: $gl-link-color;
}
}
}
}
......
......@@ -27,9 +27,9 @@ module BlobHelper
link_opts)
if !on_top_of_branch?(project, ref)
button_tag "Edit", class: "btn btn-default disabled has-tooltip", title: "You can only edit files when you are on a branch", data: { container: 'body' }
button_tag "Edit", class: "btn disabled has-tooltip btn-file-option", title: "You can only edit files when you are on a branch", data: { container: 'body' }
elsif can_edit_blob?(blob, project, ref)
link_to "Edit", edit_path, class: 'btn'
link_to "Edit", edit_path, class: 'btn btn-file-option'
elsif can?(current_user, :fork_project, project)
continue_params = {
to: edit_path,
......@@ -38,7 +38,7 @@ module BlobHelper
}
fork_path = namespace_project_forks_path(project.namespace, project, namespace_key: current_user.namespace.id, continue: continue_params)
link_to "Edit", fork_path, class: 'btn', method: :post
link_to "Edit", fork_path, class: 'btn btn-file-option', method: :post
end
end
......
......@@ -197,7 +197,7 @@ module CommitsHelper
link_to(
namespace_project_blob_path(project.namespace, project,
tree_join(commit_sha, diff.new_path)),
class: 'btn view-file js-view-file'
class: 'btn view-file js-view-file btn-file-option'
) do
raw('View file @') + content_tag(:span, commit_sha[0..6],
class: 'commit-short-id')
......
......@@ -69,9 +69,9 @@ module NotesHelper
line_type: line_type
}
text_field_tag 'reply-field', nil,
placeholder: 'Reply...',
class: 'form-control note-reply-field js-discussion-reply-button',
data: data
button_tag class: 'btn btn-text-field js-discussion-reply-button',
data: data, title: 'Add a reply' do
link_text = 'Reply...'
end
end
end
......@@ -3,7 +3,7 @@
- if diff_file.diff.submodule?
%span
= icon('archive fw')
%strong
%span
= submodule_link(blob, @commit.id, project.repository)
- else
= blob_icon blob.mode, blob.name
......@@ -11,13 +11,13 @@
= link_to "#diff-#{i}" do
- if diff_file.renamed_file
- old_path, new_path = mark_inline_diffs(diff_file.old_path, diff_file.new_path)
%strong.filename.old
.filename.old
= old_path
→
%strong.filename.new
.filename.new
= new_path
- else
%strong
%span
= diff_file.new_path
- if diff_file.deleted_file
deleted
......@@ -28,7 +28,7 @@
.file-actions.hidden-xs
- if blob_text_viewable?(blob)
= link_to '#', class: 'js-toggle-diff-comments btn active has-tooltip', title: "Toggle comments for this file" do
= link_to '#', class: 'js-toggle-diff-comments btn active has-tooltip btn-file-option', title: "Toggle comments for this file" do
= icon('comment')
\
......
......@@ -57,10 +57,9 @@ Feature: Project Commits Diff Comments
Then I should see two separate previews
@javascript
Scenario: I have can reply in discussions
Scenario: I have a reply button in discussions
Given I leave a diff comment like "Typo, please fix"
Then I should see a discussion reply text field
Then I should see a discussion reply button
@javascript
Scenario: I can preview with text
Given I open a diff comment form
......@@ -83,7 +82,7 @@ Feature: Project Commits Diff Comments
Given I preview a diff comment text like "Should fix it :smile:"
And I submit the diff comment
Then I should not see the diff comment form
And I should see a discussion reply text field
And I should see a discussion reply button
@javascript
Scenario: I can add a comment on a side-by-side commit diff (left side)
......
......@@ -153,9 +153,9 @@ module SharedDiffNote
end
end
step 'I should see a discussion reply text field' do
step 'I should see a discussion reply button' do
page.within(diff_file_selector) do
expect(page).to have_css('.note-reply-field')
expect(page).to have_button('Reply...')
end
end
......
......@@ -210,7 +210,7 @@ describe 'Comments', feature: true do
is_expected.to have_content('Another comment on line 10')
is_expected.to have_css('.notes_holder')
is_expected.to have_css('.notes_holder .note', count: 1)
is_expected.to have_css('.note-reply-field')
is_expected.to have_button('Reply...')
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