Commit 0331fa3f authored by Phil Hughes's avatar Phil Hughes

Restyling on elements in comment form

parent b7f0b22b
#= require autosave #= require autosave
#= require autosize
#= require dropzone #= require dropzone
#= require dropzone_input #= require dropzone_input
#= require gfm_auto_complete #= require gfm_auto_complete
...@@ -288,7 +287,6 @@ class @Notes ...@@ -288,7 +287,6 @@ class @Notes
else else
previewButton.removeClass("turn-on").addClass "turn-off" previewButton.removeClass("turn-on").addClass "turn-off"
autosize(textarea)
new Autosave textarea, [ new Autosave textarea, [
"Note" "Note"
form.find("#note_commit_id").val() form.find("#note_commit_id").val()
...@@ -370,9 +368,6 @@ class @Notes ...@@ -370,9 +368,6 @@ class @Notes
textarea = form.find("textarea") textarea = form.find("textarea")
textarea.focus() textarea.focus()
if isNewForm
autosize(textarea)
# HACK (rspeicher/DouweM): Work around a Chrome 43 bug(?). # HACK (rspeicher/DouweM): Work around a Chrome 43 bug(?).
# The textarea has the correct value, Chrome just won't show it unless we # 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! # modify it, so let's clear it and re-set it!
......
...@@ -42,7 +42,7 @@ class @ZenMode ...@@ -42,7 +42,7 @@ class @ZenMode
$(e.currentTarget).trigger('zen_mode:leave') $(e.currentTarget).trigger('zen_mode:leave')
$(document).on 'zen_mode:enter', (e) => $(document).on 'zen_mode:enter', (e) =>
@enter(e.target.parentNode) @enter($(e.target).closest('.md-area').find('.zen-backdrop'))
$(document).on 'zen_mode:leave', (e) => $(document).on 'zen_mode:leave', (e) =>
@exit() @exit()
......
...@@ -65,6 +65,21 @@ ...@@ -65,6 +65,21 @@
position: relative; position: relative;
} }
.md-header {
.nav-links {
.active {
a {
border-bottom-color: #000;
}
}
a {
padding-top: 0;
line-height: 1;
}
}
}
.referenced-users { .referenced-users {
color: #4c4e54; color: #4c4e54;
padding-top: 10px; padding-top: 10px;
......
...@@ -244,7 +244,7 @@ a > code { ...@@ -244,7 +244,7 @@ a > code {
* Textareas intended for GFM * Textareas intended for GFM
* *
*/ */
textarea.js-gfm-input { .js-gfm-input {
font-family: $monospace_font; font-family: $monospace_font;
color: $gl-text-color; color: $gl-text-color;
} }
......
.zennable { .zennable {
a.js-zen-enter {
color: $gl-gray;
position: absolute;
top: 0;
right: 4px;
line-height: 56px;
}
a.js-zen-leave {
display: none;
color: $gl-text-color;
position: absolute;
top: 10px;
right: 10px;
padding: 5px;
font-size: 36px;
&:hover {
color: #111;
}
}
.zen-backdrop { .zen-backdrop {
&.fullscreen { &.fullscreen {
background-color: white; background-color: white;
...@@ -47,11 +25,7 @@ ...@@ -47,11 +25,7 @@
margin: 0 auto; margin: 0 auto;
} }
a.js-zen-enter { .zen-control-leave {
display: none;
}
a.js-zen-leave {
display: block; display: block;
position: absolute; position: absolute;
top: 0; top: 0;
...@@ -59,3 +33,21 @@ ...@@ -59,3 +33,21 @@
} }
} }
} }
.zen-cotrol {
color: #555;
line-height: 31px;
}
.zen-control-leave {
display: none;
color: $gl-text-color;
position: absolute;
right: 10px;
padding: 5px;
font-size: 36px;
&:hover {
color: #111;
}
}
/** /**
* Note Form * Note Form
*/ */
.comment-btn {
@extend .btn-create;
}
.reply-btn { .reply-btn {
@extend .btn-primary; @extend .btn-primary;
margin: 10px $gl-padding; margin: 10px $gl-padding;
...@@ -42,18 +38,22 @@ ...@@ -42,18 +38,22 @@
max-width: 100%; max-width: 100%;
} }
.note_text {
width: 100%;
}
.comment-hints { .comment-hints {
margin-top: -12px; margin-top: -12px;
} }
} }
/* loading indicator */ .note-textarea {
.notes-busy { padding-left: 0;
margin: 18px; padding-right: 0;
font-family: $regular_font;
border-left: 0;
border-right: 0;
resize: none!important; // TODO: Find a way to remove this !important
&:focus {
outline: 0;
}
} }
.note-image-attach { .note-image-attach {
...@@ -64,11 +64,9 @@ ...@@ -64,11 +64,9 @@
.common-note-form { .common-note-form {
margin: 0; margin: 0;
background: #fff;
padding: $gl-padding; padding: $gl-padding;
margin-left: -$gl-padding; border: 1px solid #E5E5E5;
margin-right: -$gl-padding; border-radius: $border-radius-base;
margin-bottom: -$gl-padding;
} }
.note-form-actions { .note-form-actions {
......
.md-area .md-area
.md-header.clearfix .md-header.clearfix
%ul.nav-links %ul.nav-links.pull-left
%li.active %li.active
%a.js-md-write-button(href="#md-write-holder" tabindex="-1") %a.js-md-write-button{ href: "#md-write-holder" }
Write Write
%li %li
%a.js-md-preview-button(href="#md-preview-holder" tabindex="-1") %a.js-md-preview-button{ href: "#md-preview-holder" }
Preview Preview
.pull-right
%a.zen-cotrol.js-zen-enter{ href: "#" }
Go full screen
%div .md-write-holder
.md-write-holder = yield
= yield .md.md-preview-holder.hide
.md.md-preview-holder.hide .js-md-preview{class: (preview_class if defined?(preview_class))}
.js-md-preview{class: (preview_class if defined?(preview_class))}
- if defined?(referenced_users) && referenced_users - if defined?(referenced_users) && referenced_users
%div.referenced-users.hide %div.referenced-users.hide
......
...@@ -2,10 +2,8 @@ ...@@ -2,10 +2,8 @@
.zen-backdrop .zen-backdrop
- classes << ' js-gfm-input js-autosize markdown-area' - classes << ' js-gfm-input js-autosize markdown-area'
- if defined?(f) && f - if defined?(f) && f
= f.text_area attr, class: classes = f.text_area attr, class: classes, placeholder: "Write a comment or drag your files here..."
- else - else
= text_area_tag attr, nil, class: classes = text_area_tag attr, nil, class: classes, placeholder: "Write a comment or drag your files here..."
%a.js-zen-enter{ tabindex: "-1", href: "#" } %a.zen-cotrol.zen-control-leave.js-zen-leave{ href: "#" }
Go full screen
%a.js-zen-leave{ tabindex: "-1", href: "#" }
= icon('compress') = icon('compress')
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
= form_for note, url: namespace_project_note_path(@project.namespace, @project, note), method: :put, remote: true, authenticity_token: true, html: { class: 'edit-note js-quick-submit' } do |f| = form_for note, url: namespace_project_note_path(@project.namespace, @project, note), method: :put, remote: true, authenticity_token: true, html: { class: 'edit-note js-quick-submit' } do |f|
= note_target_fields(note) = note_target_fields(note)
= render layout: 'projects/md_preview', locals: { preview_class: 'md-preview' } do = render layout: 'projects/md_preview', locals: { preview_class: 'md-preview' } do
= render 'projects/zen', f: f, attr: :note, classes: 'note_text js-note-text js-task-list-field' = render 'projects/zen', f: f, attr: :note, classes: 'note-textarea js-note-text js-task-list-field'
= render 'projects/notes/hints' = render 'projects/notes/hints'
.note-form-actions.clearfix .note-form-actions.clearfix
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
= f.hidden_field :noteable_type = f.hidden_field :noteable_type
= render layout: 'projects/md_preview', locals: { preview_class: "md-preview", referenced_users: true } do = render layout: 'projects/md_preview', locals: { preview_class: "md-preview", referenced_users: true } do
= render 'projects/zen', f: f, attr: :note, classes: 'note_text js-note-text' = render 'projects/zen', f: f, attr: :note, classes: 'note-textarea js-note-text'
= render 'projects/notes/hints' = render 'projects/notes/hints'
.error-alert .error-alert
......
...@@ -7,18 +7,18 @@ ...@@ -7,18 +7,18 @@
= image_tag avatar_icon(current_user), alt: current_user.to_reference, class: 'avatar s40' = image_tag avatar_icon(current_user), alt: current_user.to_reference, class: 'avatar s40'
.timeline-content .timeline-content
.js-main-target-form .js-main-target-form
- if can? current_user, :create_note, @project - if can? current_user, :create_note, @project
= render "projects/notes/form", view: diff_view = render "projects/notes/form", view: diff_view
- else - else
.disabled-comment-area .disabled-comment-area
.disabled-profile .disabled-profile
.disabled-comment .disabled-comment
%span %span
Please Please
= link_to "register",new_user_session_path = link_to "register",new_user_session_path
or or
= link_to "login",new_user_session_path = link_to "login",new_user_session_path
to post a comment to post a comment
:javascript :javascript
var notes = new Notes("#{namespace_project_notes_path(namespace_id: @project.namespace, target_id: @noteable.id, target_type: @noteable.class.name.underscore)}", #{@notes.map(&:id).to_json}, #{Time.now.to_i}, "#{diff_view}") var notes = new Notes("#{namespace_project_notes_path(namespace_id: @project.namespace, target_id: @noteable.id, target_type: @noteable.class.name.underscore)}", #{@notes.map(&:id).to_json}, #{Time.now.to_i}, "#{diff_view}")
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