summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorPhil Hughes <me@iamphill.com>2016-05-18 14:11:06 +0100
committerPhil Hughes <me@iamphill.com>2016-05-18 14:11:06 +0100
commitda5f0b9119d4f8c911db30557a04d14ff7406e5f (patch)
tree8ab0e63648073e5a6e90c2e28e9e6efaae2c87e9
parentda8ac1635f1c12e9455e7517bee29678c754d492 (diff)
downloadgitlab-ce-da5f0b9119d4f8c911db30557a04d14ff7406e5f.tar.gz
Updated snippets UI
Closes #14328
-rw-r--r--app/assets/stylesheets/framework/dropdowns.scss4
-rw-r--r--app/assets/stylesheets/framework/files.scss15
-rw-r--r--app/assets/stylesheets/pages/snippets.scss44
-rw-r--r--app/views/projects/snippets/_actions.html.haml38
-rw-r--r--app/views/projects/snippets/show.html.haml8
-rw-r--r--app/views/shared/snippets/_header.html.haml19
-rw-r--r--app/views/snippets/_actions.html.haml38
-rw-r--r--app/views/snippets/show.html.haml7
8 files changed, 118 insertions, 55 deletions
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 4bf3a050403..79a37d87e82 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -162,6 +162,10 @@
}
}
+.dropdown-menu-full-width {
+ width: 100%;
+}
+
.dropdown-menu-paging {
.dropdown-page-two,
.dropdown-menu-back {
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index 61d9954c6c8..780b9b185f7 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -5,6 +5,10 @@
.file-holder {
border: 1px solid $border-color;
+ &.file-holder-no-border {
+ border: 0;
+ }
+
&.readme-holder {
margin: $gl-padding-top 0;
}
@@ -23,8 +27,17 @@
word-wrap: break-word;
border-radius: 3px 3px 0 0;
+ &.file-title-clear {
+ padding-left: 0;
+ padding-right: 0;
+ background-color: transparent;
+
+ .file-actions {
+ right: 0;
+ }
+ }
+
.file-actions {
- float: right;
position: absolute;
top: 5px;
right: 15px;
diff --git a/app/assets/stylesheets/pages/snippets.scss b/app/assets/stylesheets/pages/snippets.scss
index 639d639d5b0..2aa939b7dc3 100644
--- a/app/assets/stylesheets/pages/snippets.scss
+++ b/app/assets/stylesheets/pages/snippets.scss
@@ -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 {
position: fixed;
top: -10px;
@@ -36,3 +23,34 @@
max-height: 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;
+ }
+}
diff --git a/app/views/projects/snippets/_actions.html.haml b/app/views/projects/snippets/_actions.html.haml
index 4a515469422..bf57beb9d07 100644
--- a/app/views/projects/snippets/_actions.html.haml
+++ b/app/views/projects/snippets/_actions.html.haml
@@ -1,11 +1,27 @@
-= link_to new_namespace_project_snippet_path(@project.namespace, @project), class: 'btn btn-grouped new-snippet-link', title: "New Snippet" do
- = icon('plus')
- New Snippet
-- if can?(current_user, :admin_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
- = icon('pencil-square-o')
- Edit
+.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')
+ 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)
+ = 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
diff --git a/app/views/projects/snippets/show.html.haml b/app/views/projects/snippets/show.html.haml
index 7c599563ce4..6f7bdcb29e8 100644
--- a/app/views/projects/snippets/show.html.haml
+++ b/app/views/projects/snippets/show.html.haml
@@ -4,15 +4,13 @@
.snippet-holder
= render 'shared/snippets/header'
- %article.file-holder
- .file-title
+ %article.file-holder.file-holder-no-border.snippet-file-content
+ .file-title.file-title-clear
= blob_icon 0, @snippet.file_name
- %strong
- = @snippet.file_name
+ = @snippet.file_name
.file-actions.hidden-xs
= 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"
-
= render 'shared/snippets/blob'
%div#notes= render "projects/notes/notes_with_form"
diff --git a/app/views/shared/snippets/_header.html.haml b/app/views/shared/snippets/_header.html.haml
index e65b1814872..897aa5b4462 100644
--- a/app/views/shared/snippets/_header.html.haml
+++ b/app/views/shared/snippets/_header.html.haml
@@ -1,25 +1,24 @@
-.detail-page-header
- .snippet-box.has-tooltip{class: visibility_level_color(@snippet.visibility_level), title: snippet_visibility_level_description(@snippet.visibility_level, @snippet), data: { container: 'body' }}
+.detail-page-header.clearfix
+ .snippet-box.has-tooltip.inline.append-right-5{ title: snippet_visibility_level_description(@snippet.visibility_level, @snippet), data: { container: "body" } }
+ %span.sr-only
+ = visibility_level_label(@snippet.visibility_level)
= visibility_level_icon(@snippet.visibility_level, fw: false)
- = visibility_level_label(@snippet.visibility_level)
- %span.identifier
+ %strong.item-title
Snippet ##{@snippet.id}
%span.creator
- &middot; created by #{link_to_member(@project, @snippet.author, size: 24)}
- &middot;
+ 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')
- if @snippet.updated_at != @snippet.created_at
%span
- &middot;
= icon('edit', title: 'edited')
= time_ago_with_tooltip(@snippet.updated_at, placement: 'bottom', html_class: 'snippet_edited_ago')
- .pull-right
+ .snippet-actions
- if @snippet.project_id?
= render "projects/snippets/actions"
- else
= render "snippets/actions"
-.detail-page-description.row-content-block.second-block
- %h2.title
+.content-block.second-block
+ %h2.snippet-title.prepend-top-0.append-bottom-0
= markdown escape_once(@snippet.title), pipeline: :single_line
diff --git a/app/views/snippets/_actions.html.haml b/app/views/snippets/_actions.html.haml
index 1979ae6d5bc..a7769654b61 100644
--- a/app/views/snippets/_actions.html.haml
+++ b/app/views/snippets/_actions.html.haml
@@ -1,11 +1,27 @@
-= link_to new_snippet_path, class: 'btn btn-grouped new-snippet-link', title: "New Snippet" do
- = icon('plus')
- New Snippet
-- if can?(current_user, :update_personal_snippet, @snippet)
- = link_to edit_snippet_path(@snippet), class: "btn btn-grouped snippable-edit" do
- = icon('pencil-square-o')
- Edit
-- 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
- = icon('trash-o')
- Delete
+.hidden-xs
+ = link_to new_snippet_path, class: "btn btn-grouped btn-create new-snippet-link", title: "New Snippet" do
+ = icon('plus')
+ 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)
+ = link_to snippet_path(@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_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
diff --git a/app/views/snippets/show.html.haml b/app/views/snippets/show.html.haml
index a2b36568770..ed3992650d4 100644
--- a/app/views/snippets/show.html.haml
+++ b/app/views/snippets/show.html.haml
@@ -3,11 +3,10 @@
.snippet-holder
= render 'shared/snippets/header'
- %article.file-holder
- .file-title
+ %article.file-holder.file-holder-no-border.snippet-file-content
+ .file-title.file-title-clear
= blob_icon 0, @snippet.file_name
- %strong
- = @snippet.file_name
+ = @snippet.file_name
.file-actions.hidden-xs
= clipboard_button(clipboard_target: ".blob-content[data-blob-id='#{@snippet.id}']")
= link_to 'Raw', raw_snippet_path(@snippet), class: "btn btn-sm", target: "_blank"