Commit d6e5299f authored by Jacob Schatz's avatar Jacob Schatz

Merge branch 'snippets-ui' into 'master'

Updated snippets UI

![Screen_Shot_2016-05-18_at_14.11.54](/uploads/2544351e50f19a36c4ba9a7a92d5544b/Screen_Shot_2016-05-18_at_14.11.54.png)

Closes #14328

See merge request !4194
parents 05323a78 d53bfcb0
...@@ -162,6 +162,10 @@ ...@@ -162,6 +162,10 @@
} }
} }
.dropdown-menu-full-width {
width: 100%;
}
.dropdown-menu-paging { .dropdown-menu-paging {
.dropdown-page-two, .dropdown-page-two,
.dropdown-menu-back { .dropdown-menu-back {
......
...@@ -5,6 +5,10 @@ ...@@ -5,6 +5,10 @@
.file-holder { .file-holder {
border: 1px solid $border-color; border: 1px solid $border-color;
&.file-holder-no-border {
border: 0;
}
&.readme-holder { &.readme-holder {
margin: $gl-padding-top 0; margin: $gl-padding-top 0;
} }
...@@ -23,8 +27,17 @@ ...@@ -23,8 +27,17 @@
word-wrap: break-word; word-wrap: break-word;
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
&.file-title-clear {
padding-left: 0;
padding-right: 0;
background-color: transparent;
.file-actions {
right: 0;
}
}
.file-actions { .file-actions {
float: right;
position: absolute; position: absolute;
top: 5px; top: 5px;
right: 15px; right: 15px;
......
...@@ -16,19 +16,6 @@ ...@@ -16,19 +16,6 @@
} }
} }
.snippet-box {
@include border-radius(2px);
display: block;
float: left;
padding: 0 $gl-padding;
font-weight: normal;
margin-right: 10px;
font-size: $gl-font-size;
border: 1px solid;
line-height: 32px;
}
.markdown-snippet-copy { .markdown-snippet-copy {
position: fixed; position: fixed;
top: -10px; top: -10px;
...@@ -36,3 +23,34 @@ ...@@ -36,3 +23,34 @@
max-height: 0; max-height: 0;
max-width: 0; max-width: 0;
} }
.file-holder.snippet-file-content {
padding-bottom: $gl-padding;
border-bottom: 1px solid $border-color;
.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 {
font-size: 24px;
font-weight: normal;
}
.snippet-actions {
@media (min-width: $screen-sm-min) {
float: right;
}
}
= link_to new_namespace_project_snippet_path(@project.namespace, @project), class: 'btn btn-grouped new-snippet-link', title: "New Snippet" do .hidden-xs
= link_to new_namespace_project_snippet_path(@project.namespace, @project), class: 'btn btn-grouped btn-create new-snippet-link', title: "New Snippet" do
= icon('plus') = icon('plus')
New Snippet New Snippet
- if can?(current_user, :admin_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-remove", title: 'Delete Snippet' do
= icon('trash-o')
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 = link_to edit_namespace_project_snippet_path(@project.namespace, @project, @snippet), class: "btn btn-grouped snippable-edit" do
= icon('pencil-square-o')
Edit Edit
- 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
Delete
.visible-xs-block.dropdown
%button.btn.btn-default.btn-block.append-bottom-0.prepend-top-5{ data: { toggle: "dropdown" } }
Options
%span.caret
.dropdown-menu.dropdown-menu-full-width
%ul
%li
= link_to new_namespace_project_snippet_path(@project.namespace, @project), title: "New Snippet" do
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)
%li
= link_to namespace_project_snippet_path(@project.namespace, @project, @snippet), method: :delete, data: { confirm: "Are you sure?" }, title: 'Delete Snippet' do
Delete
...@@ -4,15 +4,13 @@ ...@@ -4,15 +4,13 @@
.snippet-holder .snippet-holder
= render 'shared/snippets/header' = render 'shared/snippets/header'
%article.file-holder %article.file-holder.file-holder-no-border.snippet-file-content
.file-title .file-title.file-title-clear
= blob_icon 0, @snippet.file_name = blob_icon 0, @snippet.file_name
%strong
= @snippet.file_name = @snippet.file_name
.file-actions.hidden-xs .file-actions.hidden-xs
= 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"
.detail-page-header .detail-page-header.clearfix
.snippet-box.has-tooltip{class: visibility_level_color(@snippet.visibility_level), title: snippet_visibility_level_description(@snippet.visibility_level, @snippet), data: { container: 'body' }} .snippet-box.has-tooltip.inline.append-right-5{ title: snippet_visibility_level_description(@snippet.visibility_level, @snippet), data: { container: "body" } }
= visibility_level_icon(@snippet.visibility_level, fw: false) %span.sr-only
= visibility_level_label(@snippet.visibility_level) = visibility_level_label(@snippet.visibility_level)
%span.identifier = visibility_level_icon(@snippet.visibility_level, fw: false)
%strong.item-title
Snippet ##{@snippet.id} Snippet ##{@snippet.id}
%span.creator %span.creator
· created by #{link_to_member(@project, @snippet.author, size: 24)} created by #{link_to_member(@project, @snippet.author, size: 24, author_class: "author item-title")}
·
= 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')
.pull-right .snippet-actions
- if @snippet.project_id? - if @snippet.project_id?
= render "projects/snippets/actions" = render "projects/snippets/actions"
- else - else
= render "snippets/actions" = render "snippets/actions"
.detail-page-description.row-content-block.second-block .content-block.second-block
%h2.title %h2.snippet-title.prepend-top-0.append-bottom-0
= markdown escape_once(@snippet.title), pipeline: :single_line = markdown escape_once(@snippet.title), pipeline: :single_line
= link_to new_snippet_path, class: 'btn btn-grouped new-snippet-link', title: "New Snippet" do .hidden-xs
= link_to new_snippet_path, class: "btn btn-grouped btn-create new-snippet-link", title: "New Snippet" do
= icon('plus') = icon('plus')
New Snippet New Snippet
- if can?(current_user, :update_personal_snippet, @snippet) - if can?(current_user, :update_personal_snippet, @snippet)
= link_to edit_snippet_path(@snippet), class: "btn btn-grouped snippable-edit" do = link_to edit_snippet_path(@snippet), class: "btn btn-grouped snippable-edit" do
= icon('pencil-square-o')
Edit 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-remove", title: 'Delete Snippet' do = link_to snippet_path(@snippet), method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-grouped btn-warning", title: 'Delete Snippet' do
= icon('trash-o') Delete
.visible-xs-block.dropdown
%button.btn.btn-default.btn-block.append-bottom-0.prepend-top-5{ data: { toggle: "dropdown" } }
Options
%span.caret
.dropdown-menu.dropdown-menu-full-width
%ul
%li
= link_to new_snippet_path, title: "New Snippet" do
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)
%li
= link_to snippet_path(@snippet), method: :delete, data: { confirm: "Are you sure?" }, title: 'Delete Snippet' do
Delete Delete
...@@ -3,10 +3,9 @@ ...@@ -3,10 +3,9 @@
.snippet-holder .snippet-holder
= render 'shared/snippets/header' = render 'shared/snippets/header'
%article.file-holder %article.file-holder.file-holder-no-border.snippet-file-content
.file-title .file-title.file-title-clear
= blob_icon 0, @snippet.file_name = blob_icon 0, @snippet.file_name
%strong
= @snippet.file_name = @snippet.file_name
.file-actions.hidden-xs .file-actions.hidden-xs
= clipboard_button(clipboard_target: ".blob-content[data-blob-id='#{@snippet.id}']") = clipboard_button(clipboard_target: ".blob-content[data-blob-id='#{@snippet.id}']")
......
...@@ -43,12 +43,12 @@ class Spinach::Features::ProjectSnippets < Spinach::FeatureSteps ...@@ -43,12 +43,12 @@ class Spinach::Features::ProjectSnippets < Spinach::FeatureSteps
step 'I click link "Edit"' do step 'I click link "Edit"' do
page.within ".detail-page-header" do page.within ".detail-page-header" do
click_link "Edit" first(:link, "Edit").click
end end
end end
step 'I click link "Delete"' do step 'I click link "Delete"' do
click_link "Delete" first(:link, "Delete").click
end end
step 'I submit new snippet "Snippet three"' do step 'I submit new snippet "Snippet three"' do
......
...@@ -14,12 +14,12 @@ class Spinach::Features::Snippets < Spinach::FeatureSteps ...@@ -14,12 +14,12 @@ class Spinach::Features::Snippets < Spinach::FeatureSteps
step 'I click link "Edit"' do step 'I click link "Edit"' do
page.within ".detail-page-header" do page.within ".detail-page-header" do
click_link "Edit" first(:link, "Edit").click
end end
end end
step 'I click link "Delete"' do step 'I click link "Delete"' do
click_link "Delete" first(:link, "Delete").click
end end
step 'I submit new snippet "Personal snippet three"' do step 'I submit new snippet "Personal snippet three"' do
......
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