Commit 3c2b0e75 authored by Phil Hughes's avatar Phil Hughes

Added toolbar to comment form

parent 0331fa3f
......@@ -6,25 +6,10 @@ class @Issue
constructor: ->
# Prevent duplicate event bindings
@disableTaskList()
@fixAffixScroll()
if $('a.btn-close').length
@initTaskList()
@initIssueBtnEventListeners()
fixAffixScroll: ->
fixAffix = ->
$discussion = $('.issuable-discussion')
$sidebar = $('.issuable-sidebar')
if $sidebar.hasClass('no-affix')
$sidebar.removeClass(['affix-top','affix'])
discussionHeight = $discussion.height()
sidebarHeight = $sidebar.height()
if sidebarHeight > discussionHeight
$discussion.height(sidebarHeight + 50)
$sidebar.addClass('no-affix')
$(window).on('resize', fixAffix)
fixAffix()
initTaskList: ->
$('.detail-page-description .js-task-list-container').taskList('enable')
$(document).on 'tasklist:changed', '.detail-page-description .js-task-list-container', @updateTaskList
......
......@@ -15,8 +15,6 @@ class @MergeRequest
this.$('.show-all-commits').on 'click', =>
this.showAllCommits()
@fixAffixScroll();
@initTabs()
# Prevent duplicate event bindings
......@@ -30,20 +28,6 @@ class @MergeRequest
$: (selector) ->
this.$el.find(selector)
fixAffixScroll: ->
fixAffix = ->
$discussion = $('.issuable-discussion')
$sidebar = $('.issuable-sidebar')
if $sidebar.hasClass('no-affix')
$sidebar.removeClass(['affix-top','affix'])
discussionHeight = $discussion.height()
sidebarHeight = $sidebar.height()
if sidebarHeight > discussionHeight
$discussion.height(sidebarHeight + 50)
$sidebar.addClass('no-affix')
$(window).on('resize', fixAffix)
fixAffix()
initTabs: ->
if @opts.action != 'new'
# `MergeRequests#new` has no tab-persisting or lazy-loading behavior
......
#= require autosave
#= require autosize
#= require dropzone
#= require dropzone_input
#= require gfm_auto_complete
......@@ -287,6 +288,8 @@ class @Notes
else
previewButton.removeClass("turn-on").addClass "turn-off"
autosize(textarea)
new Autosave textarea, [
"Note"
form.find("#note_commit_id").val()
......@@ -368,6 +371,9 @@ class @Notes
textarea = form.find("textarea")
textarea.focus()
if isNewForm
autosize(textarea)
# HACK (rspeicher/DouweM): Work around a Chrome 43 bug(?).
# The textarea has the correct value, Chrome just won't show it unless we
# modify it, so let's clear it and re-set it!
......
.div-dropzone-wrapper {
.div-dropzone {
position: relative;
padding: 0;
border: 0;
margin-bottom: 5px;
margin-bottom: -5px;
.div-dropzone-focus {
border-color: #66afe9 !important;
......@@ -25,12 +23,10 @@
.div-dropzone-spinner {
position: absolute;
top: 100%;
left: 100%;
margin-top: -1.1em;
margin-left: -1.1em;
bottom: 10px;
right: 5px;
opacity: 0;
font-size: 30px;
font-size: 20px;
transition: opacity 200ms ease-in-out;
}
......
.zennable {
.zen-backdrop {
&.fullscreen {
background-color: white;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1031;
.zen-backdrop {
&.fullscreen {
background-color: white;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1031;
textarea {
border: none;
box-shadow: none;
border-radius: 0;
color: #000;
font-size: 20px;
line-height: 26px;
padding: 30px;
display: block;
outline: none;
resize: none;
height: 100vh;
max-width: 900px;
margin: 0 auto;
}
textarea {
border: none;
box-shadow: none;
border-radius: 0;
color: #000;
font-size: 20px;
line-height: 26px;
padding: 30px;
display: block;
outline: none;
resize: none;
height: 100vh;
max-width: 900px;
margin: 0 auto;
}
.zen-control-leave {
display: block;
position: absolute;
top: 0;
}
.zen-control-leave {
display: block;
position: absolute;
top: 0;
}
}
}
.zen-cotrol {
padding: 0;
color: #555;
line-height: 31px;
background: none;
border: 0;
}
.zen-control-full {
color: #959494;
&:hover {
color: $gl-link-color;
text-decoration: none;
}
}
.zen-control-leave {
......
......@@ -47,9 +47,7 @@
padding-left: 0;
padding-right: 0;
font-family: $regular_font;
border-left: 0;
border-right: 0;
resize: none!important; // TODO: Find a way to remove this !important
border: 0;
&:focus {
outline: 0;
......@@ -63,10 +61,11 @@
}
.common-note-form {
margin: 0;
padding: $gl-padding;
border: 1px solid #E5E5E5;
border-radius: $border-radius-base;
.md-area {
padding: $gl-padding-top $gl-padding;
border: 1px solid #E5E5E5;
border-radius: $border-radius-base;
}
}
.note-form-actions {
......@@ -151,11 +150,43 @@
}
}
.comment-hints {
color: #999;
background: #fff;
padding: 7px;
margin-top: -7px;
border: 1px solid $border-color;
font-size: 13px;
.comment-toolbar {
padding-top: $gl-padding-top;
border-top: 1px solid $border-color;
}
.toolbar-button {
float: left;
margin-right: $gl-padding;
padding: 0;
background: none;
border: 0;
color: #959494;
font-size: 14px;
line-height: 16px;
&:hover,
&:focus {
color: $gl-link-color;
outline: 0;
}
&:last-child {
margin-right: 0;
}
}
.toolbar-button-icon {
position: relative;
top: 1px;
margin-right: 3px;
color: inherit;
font-size: 16px;
}
.toolbar-text {
float: left;
color: #959494;
font-size: 14px;
line-height: 16px;
}
.md-area
.md-header.clearfix
%ul.nav-links.pull-left
.md-header
%ul.nav-links
%li.active
%a.js-md-write-button{ href: "#md-write-holder" }
Write
%li
%a.js-md-preview-button{ href: "#md-preview-holder" }
Preview
.pull-right
%a.zen-cotrol.js-zen-enter{ href: "#" }
Go full screen
%li.pull-right
%button.zen-cotrol.zen-control-full.js-zen-enter{ type: 'button' }
Go full screen
.md-write-holder
= yield
.md.md-preview-holder.hide
.js-md-preview{class: (preview_class if defined?(preview_class))}
.md.md-preview-holder.js-md-preview.hide{class: (preview_class if defined?(preview_class))}
- if defined?(referenced_users) && referenced_users
%div.referenced-users.hide
......
.zennable
.zen-backdrop
- classes << ' js-gfm-input js-autosize markdown-area'
- if defined?(f) && f
= f.text_area attr, class: classes, placeholder: "Write a comment or drag your files here..."
- else
= text_area_tag attr, nil, class: classes, placeholder: "Write a comment or drag your files here..."
%a.zen-cotrol.zen-control-leave.js-zen-leave{ href: "#" }
= icon('compress')
.zen-backdrop
- classes << ' js-gfm-input js-autosize markdown-area'
- if defined?(f) && f
= f.text_area attr, class: classes, placeholder: "Write a comment or drag your files here..."
- else
= text_area_tag attr, nil, class: classes, placeholder: "Write a comment or drag your files here..."
%a.zen-cotrol.zen-control-leave.js-zen-leave{ href: "#" }
= icon('compress')
.comment-hints.clearfix
.pull-left
.comment-toolbar.clearfix
%button.toolbar-button.js-toolbar-button{ type: 'button', data: { prefix: ':' }, tabindex: '-1' }
= icon('smile-o', class: 'toolbar-button-icon')
Emoji
.toolbar-text
Styling with
= link_to 'Markdown', help_page_path('markdown', 'markdown'), target: '_blank', tabindex: -1
tip:
= random_markdown_tip
.pull-right
= link_to '#', class: 'markdown-selector', tabindex: -1 do
= icon('paperclip')
Attach a file
is supported
%button.toolbar-button.markdown-selector.pull-right{ type: 'button', tabindex: '-1' }
= icon('file-image-o', class: 'toolbar-button-icon')
Attach a file
-# .comment-hints.clearfix
-# .pull-left
-# = link_to 'Markdown', help_page_path('markdown', 'markdown'), target: '_blank', tabindex: -1
-# tip:
-# = random_markdown_tip
-# .pull-right
-# = link_to '#', class: 'markdown-selector', tabindex: -1 do
-# = icon('paperclip')
-# Attach a file
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