Added toolbar to comment form
This commit is contained in:
parent
0331fa3f3d
commit
3c2b0e7572
|
@ -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
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
#= 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!
|
||||
|
|
|
@ -1,9 +1,7 @@
|
|||
.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;
|
||||
}
|
||||
|
||||
|
|
|
@ -1,42 +1,51 @@
|
|||
.zennable {
|
||||
.zen-backdrop {
|
||||
&.fullscreen {
|
||||
background-color: white;
|
||||
position: fixed;
|
||||
.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;
|
||||
}
|
||||
|
||||
.zen-control-leave {
|
||||
display: block;
|
||||
position: absolute;
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
|
|
@ -1,20 +1,19 @@
|
|||
.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
|
||||
|
|
|
@ -1,9 +1,8 @@
|
|||
.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')
|
||||
|
|
|
@ -1,9 +1,21 @@
|
|||
.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
|
||||
|
|
Loading…
Reference in New Issue