Restyling on elements in comment form
This commit is contained in:
Phil Hughes
parent
b7f0b22b9f
commit
0331fa3f3d
11 changed files with 76 additions and 76 deletions
|
|
@ -1,5 +1,4 @@
|
|||
#= require autosave
|
||||
#= require autosize
|
||||
#= require dropzone
|
||||
#= require dropzone_input
|
||||
#= require gfm_auto_complete
|
||||
|
|
@ -288,7 +287,6 @@ class @Notes
|
|||
else
|
||||
previewButton.removeClass("turn-on").addClass "turn-off"
|
||||
|
||||
autosize(textarea)
|
||||
new Autosave textarea, [
|
||||
"Note"
|
||||
form.find("#note_commit_id").val()
|
||||
|
|
@ -370,9 +368,6 @@ 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!
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ class @ZenMode
|
|||
$(e.currentTarget).trigger('zen_mode:leave')
|
||||
|
||||
$(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) =>
|
||||
@exit()
|
||||
|
||||
|
|
|
|||
|
|
@ -65,6 +65,21 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.md-header {
|
||||
.nav-links {
|
||||
.active {
|
||||
a {
|
||||
border-bottom-color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
padding-top: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.referenced-users {
|
||||
color: #4c4e54;
|
||||
padding-top: 10px;
|
||||
|
|
|
|||
|
|
@ -244,7 +244,7 @@ a > code {
|
|||
* Textareas intended for GFM
|
||||
*
|
||||
*/
|
||||
textarea.js-gfm-input {
|
||||
.js-gfm-input {
|
||||
font-family: $monospace_font;
|
||||
color: $gl-text-color;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,26 +1,4 @@
|
|||
.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 {
|
||||
&.fullscreen {
|
||||
background-color: white;
|
||||
|
|
@ -47,11 +25,7 @@
|
|||
margin: 0 auto;
|
||||
}
|
||||
|
||||
a.js-zen-enter {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a.js-zen-leave {
|
||||
.zen-control-leave {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,6 @@
|
|||
/**
|
||||
* Note Form
|
||||
*/
|
||||
|
||||
.comment-btn {
|
||||
@extend .btn-create;
|
||||
}
|
||||
.reply-btn {
|
||||
@extend .btn-primary;
|
||||
margin: 10px $gl-padding;
|
||||
|
|
@ -42,18 +38,22 @@
|
|||
max-width: 100%;
|
||||
}
|
||||
|
||||
.note_text {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.comment-hints {
|
||||
margin-top: -12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* loading indicator */
|
||||
.notes-busy {
|
||||
margin: 18px;
|
||||
.note-textarea {
|
||||
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
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.note-image-attach {
|
||||
|
|
@ -64,11 +64,9 @@
|
|||
|
||||
.common-note-form {
|
||||
margin: 0;
|
||||
background: #fff;
|
||||
padding: $gl-padding;
|
||||
margin-left: -$gl-padding;
|
||||
margin-right: -$gl-padding;
|
||||
margin-bottom: -$gl-padding;
|
||||
border: 1px solid #E5E5E5;
|
||||
border-radius: $border-radius-base;
|
||||
}
|
||||
|
||||
.note-form-actions {
|
||||
|
|
|
|||
|
|
@ -1,18 +1,20 @@
|
|||
.md-area
|
||||
.md-header.clearfix
|
||||
%ul.nav-links
|
||||
%ul.nav-links.pull-left
|
||||
%li.active
|
||||
%a.js-md-write-button(href="#md-write-holder" tabindex="-1")
|
||||
%a.js-md-write-button{ href: "#md-write-holder" }
|
||||
Write
|
||||
%li
|
||||
%a.js-md-preview-button(href="#md-preview-holder" tabindex="-1")
|
||||
%a.js-md-preview-button{ href: "#md-preview-holder" }
|
||||
Preview
|
||||
.pull-right
|
||||
%a.zen-cotrol.js-zen-enter{ href: "#" }
|
||||
Go full screen
|
||||
|
||||
%div
|
||||
.md-write-holder
|
||||
= yield
|
||||
.md.md-preview-holder.hide
|
||||
.js-md-preview{class: (preview_class if defined?(preview_class))}
|
||||
.md-write-holder
|
||||
= yield
|
||||
.md.md-preview-holder.hide
|
||||
.js-md-preview{class: (preview_class if defined?(preview_class))}
|
||||
|
||||
- if defined?(referenced_users) && referenced_users
|
||||
%div.referenced-users.hide
|
||||
|
|
|
|||
|
|
@ -2,10 +2,8 @@
|
|||
.zen-backdrop
|
||||
- classes << ' js-gfm-input js-autosize markdown-area'
|
||||
- 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
|
||||
= text_area_tag attr, nil, class: classes
|
||||
%a.js-zen-enter{ tabindex: "-1", href: "#" }
|
||||
Go full screen
|
||||
%a.js-zen-leave{ tabindex: "-1", href: "#" }
|
||||
= 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')
|
||||
|
|
|
|||
|
|
@ -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|
|
||||
= note_target_fields(note)
|
||||
= 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'
|
||||
|
||||
.note-form-actions.clearfix
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
= f.hidden_field :noteable_type
|
||||
|
||||
= 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'
|
||||
.error-alert
|
||||
|
||||
|
|
|
|||
|
|
@ -7,18 +7,18 @@
|
|||
= image_tag avatar_icon(current_user), alt: current_user.to_reference, class: 'avatar s40'
|
||||
.timeline-content
|
||||
.js-main-target-form
|
||||
- if can? current_user, :create_note, @project
|
||||
= render "projects/notes/form", view: diff_view
|
||||
- else
|
||||
.disabled-comment-area
|
||||
.disabled-profile
|
||||
.disabled-comment
|
||||
%span
|
||||
Please
|
||||
= link_to "register",new_user_session_path
|
||||
or
|
||||
= link_to "login",new_user_session_path
|
||||
to post a comment
|
||||
- if can? current_user, :create_note, @project
|
||||
= render "projects/notes/form", view: diff_view
|
||||
- else
|
||||
.disabled-comment-area
|
||||
.disabled-profile
|
||||
.disabled-comment
|
||||
%span
|
||||
Please
|
||||
= link_to "register",new_user_session_path
|
||||
or
|
||||
= link_to "login",new_user_session_path
|
||||
to post a comment
|
||||
|
||||
: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}")
|
||||
|
|
|
|||
Loading…
Reference in a new issue