Commit 14d08d14 authored by Phil Hughes's avatar Phil Hughes

Updated design of markdown buttons

parent 05dcec95
...@@ -104,3 +104,26 @@ ...@@ -104,3 +104,26 @@
} }
} }
} }
.toolbar-group {
float: left;
margin-right: -5px;
margin-left: $gl-padding;
&:first-child {
margin-left: 0;
}
}
.toolbar-btn {
float: left;
padding: 0 5px;
color: #959494;
background: transparent;
border: 0;
outline: 0;
&:hover {
color: $gl-link-color;
}
}
...@@ -185,4 +185,17 @@ module GitlabMarkdownHelper ...@@ -185,4 +185,17 @@ module GitlabMarkdownHelper
'' ''
end end
end end
def markdown_toolbar_button(options = {})
data = options[:data].merge({ container: "body" })
content_tag :button,
type: "button",
class: "toolbar-btn js-md has-tooltip hidden-xs",
tabindex: -1,
data: data,
title: options[:title],
aria: { label: options[:title] } do
icon(options[:icon])
end
end
end end
...@@ -14,29 +14,17 @@ ...@@ -14,29 +14,17 @@
%span This is a confidential issue. Your comment will not be visible to the public. %span This is a confidential issue. Your comment will not be visible to the public.
%li.pull-right %li.pull-right
.toolbar-group
%a.btn.btn-xs.js-md{ 'data-md-tag' => '**' } = markdown_toolbar_button({icon: "bold fw", data: { "md-tag" => "**" }, title: "Add bold text" })
=icon('bold fw') = markdown_toolbar_button({icon: "italic fw", data: { "md-tag" => "*" }, title: "Add italic text" })
%a.btn.btn-xs.js-md{ 'data-md-tag' => '*' } = markdown_toolbar_button({icon: "quote-right fw", data: { "md-tag" => "> ", "md-prepend" => true }, title: "Insert a quote" })
=icon('italic fw') = markdown_toolbar_button({icon: "code fw", data: { "md-tag" => "`" }, title: "Insert code" })
%a.btn.btn-xs.js-md{ 'data-md-tag' => '`' } = markdown_toolbar_button({icon: "list-ul fw", data: { "md-tag" => "* ", "md-prepend" => true }, title: "Add a bullet list" })
=icon('code fw') = markdown_toolbar_button({icon: "list-ol fw", data: { "md-tag" => "1. ", "md-prepend" => true }, title: "Add a numbered list" })
%a.btn.btn-xs.js-md.js-list{ 'data-md-tag' => '* ', 'data-md-prepend' => true } = markdown_toolbar_button({icon: "check-square-o fw", data: { "md-tag" => "* [ ] ", "md-prepend" => true }, title: "Add a task list" })
=icon('list-ul fw') .toolbar-group
%a.btn.btn-xs.js-md.js-list.hidden-xs{ 'data-md-tag' => '1. ', 'data-md-prepend' => true } %button.toolbar-btn.js-zen-enter.has-tooltip.hidden-xs{ type: "button", tabindex: -1, aria: { label: "Go full screen" }, title: "Go full screen", data: { container: "body" } }
=icon('list-ol fw') =icon("arrows-alt fw")
%a.btn.btn-xs.js-md.js-list.hidden-xs{ 'data-md-tag' => '* [ ] ', 'data-md-prepend' => true }
=icon('check-square-o fw')
%a.btn.btn-xs.js-md.js-list.hidden-xs{ 'data-md-tag' => '> ', 'data-md-prepend' => true }
=icon('quote-right fw')
%a.btn.btn-xs.js-md.js-list.hidden-xs{ 'data-md-tag' => '!', 'data-md-prepend' => true }
=icon('tasks fw')
%a.btn.btn-xs.js-md.js-list.hidden-xs{ 'data-md-tag' => '#', 'data-md-prepend' => true }
=icon('exclamation-circle fw')
%a.btn.btn-xs.js-zen-enter.hidden-xs
=icon('arrows-alt fw')
.md-write-holder .md-write-holder
= yield = yield
...@@ -45,7 +33,7 @@ ...@@ -45,7 +33,7 @@
- if defined?(referenced_users) && referenced_users - if defined?(referenced_users) && referenced_users
%div.referenced-users.hide %div.referenced-users.hide
%span %span
= icon('exclamation-triangle') = icon("exclamation-triangle")
You are about to add You are about to add
%strong %strong
%span.js-referenced-users-count 0 %span.js-referenced-users-count 0
......
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