Commit 8e4a33f2 authored by Jacob Schatz's avatar Jacob Schatz

Merge branch '18849-project-snippets-page-isn-t-really-responsive' into 'master'

Update snippets UI

## What does this MR do?

Updates snippets UI _(mainly mobile view)_ to new UI proposed in #18849.

## Are there points in the code the reviewer needs to double check?

Does anyone know the implementation difference between `app/views/snippets/show.html.haml` and `app/views/projects/snippets/show.html.haml`? I have only been updating the latter as it's the only one I can find implemented. I assume the former is rendered somewhere seeing as there is controllers for it too. But this doesn't seem very DRY from my current perspective.

## Why was this MR needed?

## Screenshots (if relevant)

![Screen_Shot_2016-09-06_at_14.20.10](/uploads/ac124a3b0896872ce851b9f56fbe339c/Screen_Shot_2016-09-06_at_14.20.10.png)

![Screen_Shot_2016-09-06_at_14.20.32](/uploads/8d3c7b1d1a5f562ceb6dc22bde695289/Screen_Shot_2016-09-06_at_14.20.32.png)

![Screen_Shot_2016-09-06_at_14.20.48](/uploads/6b1c31ece6d2400bbfc3c673d9e82d4b/Screen_Shot_2016-09-06_at_14.20.48.png)

## Does this MR meet the acceptance criteria?

- [ ] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added
- [ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [ ] API support added
- Tests
  - [ ] Added for this feature/bug
  - [ ] All builds are passing
- [ ] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [ ] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [ ] Branch has no merge conflicts with `master` (if you do - rebase it please)
- [ ] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?

Closes #18849

See merge request !6210
parents 911b3d88 56461e0c
...@@ -162,6 +162,10 @@ ul.content-list { ...@@ -162,6 +162,10 @@ ul.content-list {
margin-right: 0; margin-right: 0;
} }
} }
.no-comments {
opacity: 0.5;
}
} }
// When dragging a list item // When dragging a list item
......
...@@ -10,10 +10,6 @@ ...@@ -10,10 +10,6 @@
.issue-labels { .issue-labels {
display: inline-block; display: inline-block;
} }
.issue-no-comments {
opacity: 0.5;
}
} }
} }
......
...@@ -231,10 +231,6 @@ ...@@ -231,10 +231,6 @@
.merge-request-labels { .merge-request-labels {
display: inline-block; display: inline-block;
} }
.merge-request-no-comments {
opacity: 0.5;
}
} }
.merge-request-angle { .merge-request-angle {
......
...@@ -2,20 +2,6 @@ ...@@ -2,20 +2,6 @@
padding: 2px; padding: 2px;
} }
.snippet-holder {
margin-bottom: -$gl-padding;
.file-holder {
border-top: 0;
}
.file-actions {
.btn-clipboard {
@extend .btn;
}
}
}
.markdown-snippet-copy { .markdown-snippet-copy {
position: fixed; position: fixed;
top: -10px; top: -10px;
...@@ -24,29 +10,18 @@ ...@@ -24,29 +10,18 @@
max-width: 0; max-width: 0;
} }
.file-holder.snippet-file-content { .snippet-file-content {
padding-bottom: $gl-padding; border-radius: 3px;
border-bottom: 1px solid $border-color; .btn-clipboard {
@extend .btn;
.file-title {
padding-top: $gl-padding;
padding-bottom: $gl-padding;
}
.file-actions {
top: 12px;
}
.file-content {
border-left: 1px solid $border-color;
border-right: 1px solid $border-color;
border-bottom: 1px solid $border-color;
} }
} }
.snippet-title { .snippet-title {
font-size: 24px; font-size: 24px;
font-weight: normal; font-weight: 600;
padding: $gl-padding;
padding-left: 0;
} }
.snippet-actions { .snippet-actions {
......
...@@ -27,7 +27,7 @@ module ProjectsHelper ...@@ -27,7 +27,7 @@ module ProjectsHelper
author_html = "" author_html = ""
# Build avatar image tag # Build avatar image tag
author_html << image_tag(avatar_icon(author, opts[:size]), width: opts[:size], class: "avatar avatar-inline #{"s#{opts[:size]}" if opts[:size]}", alt: '') if opts[:avatar] author_html << image_tag(avatar_icon(author, opts[:size]), width: opts[:size], class: "avatar avatar-inline #{"s#{opts[:size]}" if opts[:size]} #{opts[:avatar_class] if opts[:avatar_class]}", alt: '') if opts[:avatar]
# Build name span tag # Build name span tag
if opts[:by_username] if opts[:by_username]
......
module SnippetsHelper module SnippetsHelper
def reliable_snippet_path(snippet) def reliable_snippet_path(snippet, opts = nil)
if snippet.project_id? if snippet.project_id?
namespace_project_snippet_path(snippet.project.namespace, namespace_project_snippet_path(snippet.project.namespace,
snippet.project, snippet) snippet.project, snippet, opts)
else else
snippet_path(snippet) snippet_path(snippet, opts)
end end
end end
......
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
- note_count = issue.notes.user.count - note_count = issue.notes.user.count
%li %li
= link_to issue_path(issue, anchor: 'notes'), class: ('issue-no-comments' if note_count.zero?) do = link_to issue_path(issue, anchor: 'notes'), class: ('no-comments' if note_count.zero?) do
= icon('comments') = icon('comments')
= note_count = note_count
......
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
- note_count = merge_request.mr_and_commit_notes.user.count - note_count = merge_request.mr_and_commit_notes.user.count
%li %li
= link_to merge_request_path(merge_request, anchor: 'notes'), class: ('merge-request-no-comments' if note_count.zero?) do = link_to merge_request_path(merge_request, anchor: 'notes'), class: ('no-comments' if note_count.zero?) do
= icon('comments') = icon('comments')
= note_count = note_count
......
...@@ -2,12 +2,12 @@ ...@@ -2,12 +2,12 @@
- if can?(current_user, :create_project_snippet, @project) - if can?(current_user, :create_project_snippet, @project)
= link_to new_namespace_project_snippet_path(@project.namespace, @project), class: 'btn btn-grouped btn-create new-snippet-link', title: "New Snippet" do = link_to new_namespace_project_snippet_path(@project.namespace, @project), class: 'btn btn-grouped btn-create new-snippet-link', title: "New Snippet" do
New Snippet New Snippet
- if can?(current_user, :update_project_snippet, @snippet)
= link_to edit_namespace_project_snippet_path(@project.namespace, @project, @snippet), class: "btn btn-grouped snippable-edit" do
Edit
- if can?(current_user, :update_project_snippet, @snippet) - if can?(current_user, :update_project_snippet, @snippet)
= link_to namespace_project_snippet_path(@project.namespace, @project, @snippet), method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-grouped btn-warning", title: 'Delete Snippet' do = link_to namespace_project_snippet_path(@project.namespace, @project, @snippet), method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-grouped btn-warning", title: 'Delete Snippet' do
Delete Delete
- if can?(current_user, :update_project_snippet, @snippet)
= link_to edit_namespace_project_snippet_path(@project.namespace, @project, @snippet), class: "btn btn-grouped snippable-edit" do
Edit
- if can?(current_user, :create_project_snippet, @project) || can?(current_user, :update_project_snippet, @snippet) - if can?(current_user, :create_project_snippet, @project) || can?(current_user, :update_project_snippet, @snippet)
.visible-xs-block.dropdown .visible-xs-block.dropdown
%button.btn.btn-default.btn-block.append-bottom-0.prepend-top-5{ data: { toggle: "dropdown" } } %button.btn.btn-default.btn-block.append-bottom-0.prepend-top-5{ data: { toggle: "dropdown" } }
...@@ -19,11 +19,11 @@ ...@@ -19,11 +19,11 @@
%li %li
= link_to new_namespace_project_snippet_path(@project.namespace, @project), title: "New Snippet" do = link_to new_namespace_project_snippet_path(@project.namespace, @project), title: "New Snippet" do
New Snippet New Snippet
- if can?(current_user, :update_project_snippet, @snippet)
%li
= link_to edit_namespace_project_snippet_path(@project.namespace, @project, @snippet) do
Edit
- if can?(current_user, :update_project_snippet, @snippet) - if can?(current_user, :update_project_snippet, @snippet)
%li %li
= link_to namespace_project_snippet_path(@project.namespace, @project, @snippet), method: :delete, data: { confirm: "Are you sure?" }, title: 'Delete Snippet' do = link_to namespace_project_snippet_path(@project.namespace, @project, @snippet), method: :delete, data: { confirm: "Are you sure?" }, title: 'Delete Snippet' do
Delete Delete
- if can?(current_user, :update_project_snippet, @snippet)
%li
= link_to edit_namespace_project_snippet_path(@project.namespace, @project, @snippet) do
Edit
- page_title @snippet.title, "Snippets" - page_title @snippet.title, "Snippets"
.snippet-holder = render 'shared/snippets/header'
= render 'shared/snippets/header'
%article.file-holder.file-holder-no-border.snippet-file-content %article.file-holder.snippet-file-content
.file-title.file-title-clear .file-title
= blob_icon 0, @snippet.file_name = blob_icon 0, @snippet.file_name
= @snippet.file_name = @snippet.file_name
.file-actions.hidden-xs .file-actions
= clipboard_button(clipboard_target: ".blob-content[data-blob-id='#{@snippet.id}']") = clipboard_button(clipboard_target: ".blob-content[data-blob-id='#{@snippet.id}']")
= link_to 'Raw', raw_namespace_project_snippet_path(@project.namespace, @project, @snippet), class: "btn btn-sm", target: "_blank" = link_to 'Raw', raw_namespace_project_snippet_path(@project.namespace, @project, @snippet), class: "btn btn-sm", target: "_blank"
= render 'shared/snippets/blob' = render 'shared/snippets/blob'
%div#notes= render "projects/notes/notes_with_form" %div#notes= render "projects/notes/notes_with_form"
...@@ -6,12 +6,13 @@ ...@@ -6,12 +6,13 @@
%strong.item-title %strong.item-title
Snippet #{@snippet.to_reference} Snippet #{@snippet.to_reference}
%span.creator %span.creator
created by #{link_to_member(@project, @snippet.author, size: 24, author_class: "author item-title")} authored
= time_ago_with_tooltip(@snippet.created_at, placement: 'bottom', html_class: 'snippet_updated_ago') = time_ago_with_tooltip(@snippet.created_at, placement: 'bottom', html_class: 'snippet_updated_ago')
- if @snippet.updated_at != @snippet.created_at - if @snippet.updated_at != @snippet.created_at
%span %span
= icon('edit', title: 'edited') = icon('edit', title: 'edited')
= time_ago_with_tooltip(@snippet.updated_at, placement: 'bottom', html_class: 'snippet_edited_ago') = time_ago_with_tooltip(@snippet.updated_at, placement: 'bottom', html_class: 'snippet_edited_ago')
by #{link_to_member(@project, @snippet.author, size: 24, author_class: "author item-title", avatar_class: "hidden-xs")}
.snippet-actions .snippet-actions
- if @snippet.project_id? - if @snippet.project_id?
...@@ -19,6 +20,5 @@ ...@@ -19,6 +20,5 @@
- else - else
= render "snippets/actions" = render "snippets/actions"
.content-block.second-block %h2.snippet-title.prepend-top-0.append-bottom-0
%h2.snippet-title.prepend-top-0.append-bottom-0 = markdown escape_once(@snippet.title), pipeline: :single_line, author: @snippet.author
= markdown escape_once(@snippet.title), pipeline: :single_line, author: @snippet.author
...@@ -3,19 +3,30 @@ ...@@ -3,19 +3,30 @@
.title .title
= link_to reliable_snippet_path(snippet) do = link_to reliable_snippet_path(snippet) do
= truncate(snippet.title, length: 60) = snippet.title
- if snippet.private? - if snippet.private?
%span.label.label-gray %span.label.label-gray.hidden-xs
= icon('lock') = icon('lock')
private private
%span.monospace.pull-right %span.monospace.pull-right.hidden-xs
= snippet.file_name = snippet.file_name
%small.pull-right.cgray %ul.controls.visible-xs
%li
- note_count = snippet.notes.user.count
= link_to reliable_snippet_path(snippet, anchor: 'notes'), class: ('no-comments' if note_count.zero?) do
= icon('comments')
= note_count
%li
%span.sr-only
= visibility_level_label(snippet.visibility_level)
= visibility_level_icon(snippet.visibility_level, fw: false)
%small.pull-right.cgray.hidden-xs
- if snippet.project_id? - if snippet.project_id?
= link_to snippet.project.name_with_namespace, namespace_project_path(snippet.project.namespace, snippet.project) = link_to snippet.project.name_with_namespace, namespace_project_path(snippet.project.namespace, snippet.project)
.snippet-info .snippet-info.hidden-xs
= link_to user_snippets_path(snippet.author) do = link_to user_snippets_path(snippet.author) do
= snippet.author_name = snippet.author_name
authored #{time_ago_with_tooltip(snippet.created_at)} authored #{time_ago_with_tooltip(snippet.created_at)}
...@@ -2,12 +2,12 @@ ...@@ -2,12 +2,12 @@
- if current_user - if current_user
= link_to new_snippet_path, class: "btn btn-grouped btn-create new-snippet-link", title: "New Snippet" do = link_to new_snippet_path, class: "btn btn-grouped btn-create new-snippet-link", title: "New Snippet" do
New Snippet New Snippet
- if can?(current_user, :update_personal_snippet, @snippet)
= link_to edit_snippet_path(@snippet), class: "btn btn-grouped snippable-edit" do
Edit
- if can?(current_user, :admin_personal_snippet, @snippet) - if can?(current_user, :admin_personal_snippet, @snippet)
= link_to snippet_path(@snippet), method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-grouped btn-danger", title: 'Delete Snippet' do = link_to snippet_path(@snippet), method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-grouped btn-danger", title: 'Delete Snippet' do
Delete Delete
- if can?(current_user, :update_personal_snippet, @snippet)
= link_to edit_snippet_path(@snippet), class: "btn btn-grouped snippable-edit" do
Edit
- if current_user - if current_user
.visible-xs-block.dropdown .visible-xs-block.dropdown
%button.btn.btn-default.btn-block.append-bottom-0.prepend-top-5{ data: { toggle: "dropdown" } } %button.btn.btn-default.btn-block.append-bottom-0.prepend-top-5{ data: { toggle: "dropdown" } }
...@@ -18,11 +18,11 @@ ...@@ -18,11 +18,11 @@
%li %li
= link_to new_snippet_path, title: "New Snippet" do = link_to new_snippet_path, title: "New Snippet" do
New Snippet New Snippet
- if can?(current_user, :update_personal_snippet, @snippet)
%li
= link_to edit_snippet_path(@snippet) do
Edit
- if can?(current_user, :admin_personal_snippet, @snippet) - if can?(current_user, :admin_personal_snippet, @snippet)
%li %li
= link_to snippet_path(@snippet), method: :delete, data: { confirm: "Are you sure?" }, title: 'Delete Snippet' do = link_to snippet_path(@snippet), method: :delete, data: { confirm: "Are you sure?" }, title: 'Delete Snippet' do
Delete Delete
- if can?(current_user, :update_personal_snippet, @snippet)
%li
= link_to edit_snippet_path(@snippet) do
Edit
- page_title @snippet.title, "Snippets" - page_title @snippet.title, "Snippets"
.snippet-holder = render 'shared/snippets/header'
= render 'shared/snippets/header'
%article.file-holder.file-holder-no-border.snippet-file-content %article.file-holder.snippet-file-content
.file-title.file-title-clear .file-title
= blob_icon 0, @snippet.file_name = blob_icon 0, @snippet.file_name
= @snippet.file_name = @snippet.file_name
.file-actions.hidden-xs .file-actions
= clipboard_button(clipboard_target: ".blob-content[data-blob-id='#{@snippet.id}']") = clipboard_button(clipboard_target: ".blob-content[data-blob-id='#{@snippet.id}']")
= link_to 'Raw', raw_snippet_path(@snippet), class: "btn btn-sm", target: "_blank" = link_to 'Raw', raw_snippet_path(@snippet), class: "btn btn-sm", target: "_blank"
= render 'shared/snippets/blob' = render 'shared/snippets/blob'
...@@ -144,7 +144,7 @@ describe 'Issues', feature: true do ...@@ -144,7 +144,7 @@ describe 'Issues', feature: true do
visit namespace_project_issues_path(project.namespace, project, assignee_id: @user.id) visit namespace_project_issues_path(project.namespace, project, assignee_id: @user.id)
expect(page).to have_content 'foobar' expect(page).to have_content 'foobar'
expect(page.all('.issue-no-comments').first.text).to eq "0" expect(page.all('.no-comments').first.text).to eq "0"
end end
end end
......
...@@ -19,7 +19,10 @@ describe 'Snippets tab on a user profile', feature: true, js: true do ...@@ -19,7 +19,10 @@ describe 'Snippets tab on a user profile', feature: true, js: true do
end end
context 'clicking on the link to the second page' do context 'clicking on the link to the second page' do
before { click_link('2') } before do
click_link('2')
wait_for_ajax
end
it 'shows the remaining snippets' do it 'shows the remaining snippets' do
expect(page.all('.snippets-list-holder .snippet-row').count).to eq(5) expect(page.all('.snippets-list-holder .snippet-row').count).to eq(5)
......
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