Basic UI implememntation of comments in timeline style
Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
This commit is contained in:
Dmitriy Zaporozhets
parent
b5cc813612
commit
207d798dc4
4 changed files with 131 additions and 68 deletions
64
app/assets/stylesheets/generic/timeline.scss
Normal file
64
app/assets/stylesheets/generic/timeline.scss
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
.timeline {
|
||||
list-style: none;
|
||||
padding: 20px 0 20px;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
content: " ";
|
||||
width: 3px;
|
||||
background-color: #eeeeee;
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
.timeline-entry {
|
||||
position: relative;
|
||||
margin-top: 5px;
|
||||
margin-left: 30px;
|
||||
margin-bottom: 10px;
|
||||
clear: both;
|
||||
|
||||
|
||||
.timeline-entry-inner {
|
||||
position: relative;
|
||||
margin-left: -20px;
|
||||
|
||||
&:before, &:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.timeline-icon {
|
||||
margin-top: 2px;
|
||||
background: #fff;
|
||||
color: #737881;
|
||||
float: left;
|
||||
@include border-radius(4px);
|
||||
@include box-shadow(0 0 0 3px #EEE);
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
position: relative;
|
||||
background: #f5f5f6;
|
||||
padding: 10px 15px;
|
||||
margin-left: 60px;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 9px 9px 9px 0;
|
||||
border-color: transparent #f5f5f6 transparent transparent;
|
||||
left: 0;
|
||||
top: 10px;
|
||||
margin-left: -9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -55,22 +55,18 @@ ul.notes {
|
|||
}
|
||||
|
||||
.note {
|
||||
padding: 8px 0;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
position:relative;
|
||||
border-bottom: 1px solid #eee;
|
||||
p { color: $style_color; }
|
||||
|
||||
.avatar {
|
||||
margin-top: 3px;
|
||||
margin: 0;
|
||||
}
|
||||
.attachment {
|
||||
font-size: 14px;
|
||||
}
|
||||
.note-body {
|
||||
@include md-typography;
|
||||
margin-left: 43px;
|
||||
}
|
||||
.note-header {
|
||||
padding-bottom: 3px;
|
||||
|
|
|
|||
|
|
@ -1,66 +1,69 @@
|
|||
%li{ id: dom_id(note), class: dom_class(note), data: { discussion: note.discussion_id } }
|
||||
.note-header
|
||||
.note-actions
|
||||
= link_to "##{dom_id(note)}", name: dom_id(note) do
|
||||
%i.icon-link
|
||||
Link here
|
||||
|
||||
- if(note.author_id == current_user.try(:id)) || can?(current_user, :admin_note, @project)
|
||||
= link_to "#", title: "Edit comment", class: "js-note-edit" do
|
||||
%i.icon-edit
|
||||
Edit
|
||||
|
||||
= link_to project_note_path(@project, note), title: "Remove comment", method: :delete, data: { confirm: 'Are you sure you want to remove this comment?' }, remote: true, class: "danger js-note-delete" do
|
||||
%i.icon-trash.cred
|
||||
Remove
|
||||
= image_tag avatar_icon(note.author_email), class: "avatar s32"
|
||||
= link_to_member(@project, note.author, avatar: false)
|
||||
%span.note-last-update
|
||||
= note_timestamp(note)
|
||||
|
||||
- if note.upvote?
|
||||
%span.vote.upvote.label.label-success
|
||||
%i.icon-thumbs-up
|
||||
\+1
|
||||
- if note.downvote?
|
||||
%span.vote.downvote.label.label-danger
|
||||
%i.icon-thumbs-down
|
||||
\-1
|
||||
|
||||
|
||||
.note-body
|
||||
.note-text
|
||||
= preserve do
|
||||
= markdown(note.note, {no_header_anchors: true})
|
||||
|
||||
.note-edit-form
|
||||
= form_for note, url: project_note_path(@project, note), method: :put, remote: true, authenticity_token: true do |f|
|
||||
= f.text_area :note, class: 'note_text js-note-text js-gfm-input turn-on'
|
||||
|
||||
.form-actions.clearfix
|
||||
= f.submit 'Save changes', class: "btn btn-primary btn-save js-comment-button"
|
||||
|
||||
.note-form-option
|
||||
%a.choose-btn.btn.js-choose-note-attachment-button
|
||||
%i.icon-paper-clip
|
||||
%span Choose File ...
|
||||
%li.timeline-entry{ id: dom_id(note), class: dom_class(note), data: { discussion: note.discussion_id } }
|
||||
.timeline-entry-inner
|
||||
.timeline-icon
|
||||
= image_tag avatar_icon(note.author_email), class: "avatar s32"
|
||||
.timeline-content
|
||||
.note-header
|
||||
.note-actions
|
||||
= link_to "##{dom_id(note)}", name: dom_id(note) do
|
||||
%i.icon-link
|
||||
Link here
|
||||
|
||||
- if(note.author_id == current_user.try(:id)) || can?(current_user, :admin_note, @project)
|
||||
= link_to "#", title: "Edit comment", class: "js-note-edit" do
|
||||
%i.icon-edit
|
||||
Edit
|
||||
|
||||
%span.file_name.js-attachment-filename File name...
|
||||
= f.file_field :attachment, class: "js-note-attachment-input hidden"
|
||||
= link_to project_note_path(@project, note), title: "Remove comment", method: :delete, data: { confirm: 'Are you sure you want to remove this comment?' }, remote: true, class: "danger js-note-delete" do
|
||||
%i.icon-trash.cred
|
||||
Remove
|
||||
= link_to_member(@project, note.author, avatar: false)
|
||||
%span.note-last-update
|
||||
= note_timestamp(note)
|
||||
|
||||
= link_to 'Cancel', "#", class: "btn btn-cancel note-edit-cancel"
|
||||
- if note.upvote?
|
||||
%span.vote.upvote.label.label-success
|
||||
%i.icon-thumbs-up
|
||||
\+1
|
||||
- if note.downvote?
|
||||
%span.vote.downvote.label.label-danger
|
||||
%i.icon-thumbs-down
|
||||
\-1
|
||||
|
||||
|
||||
- if note.attachment.url
|
||||
.note-attachment
|
||||
- if note.attachment.image?
|
||||
= link_to note.attachment.secure_url, target: '_blank' do
|
||||
= image_tag note.attachment.secure_url, class: 'note-image-attach'
|
||||
.attachment.pull-right
|
||||
= link_to note.attachment.secure_url, target: "_blank" do
|
||||
%i.icon-paper-clip
|
||||
= note.attachment_identifier
|
||||
= link_to delete_attachment_project_note_path(@project, note),
|
||||
title: "Delete this attachment", method: :delete, remote: true, data: { confirm: 'Are you sure you want to remove the attachment?' }, class: "danger js-note-attachment-delete" do
|
||||
%i.icon-trash.cred
|
||||
.clear
|
||||
.note-body
|
||||
.note-text
|
||||
= preserve do
|
||||
= markdown(note.note, {no_header_anchors: true})
|
||||
|
||||
.note-edit-form
|
||||
= form_for note, url: project_note_path(@project, note), method: :put, remote: true, authenticity_token: true do |f|
|
||||
= f.text_area :note, class: 'note_text js-note-text js-gfm-input turn-on'
|
||||
|
||||
.form-actions.clearfix
|
||||
= f.submit 'Save changes', class: "btn btn-primary btn-save js-comment-button"
|
||||
|
||||
.note-form-option
|
||||
%a.choose-btn.btn.js-choose-note-attachment-button
|
||||
%i.icon-paper-clip
|
||||
%span Choose File ...
|
||||
|
||||
%span.file_name.js-attachment-filename File name...
|
||||
= f.file_field :attachment, class: "js-note-attachment-input hidden"
|
||||
|
||||
= link_to 'Cancel', "#", class: "btn btn-cancel note-edit-cancel"
|
||||
|
||||
|
||||
- if note.attachment.url
|
||||
.note-attachment
|
||||
- if note.attachment.image?
|
||||
= link_to note.attachment.secure_url, target: '_blank' do
|
||||
= image_tag note.attachment.secure_url, class: 'note-image-attach'
|
||||
.attachment.pull-right
|
||||
= link_to note.attachment.secure_url, target: "_blank" do
|
||||
%i.icon-paper-clip
|
||||
= note.attachment_identifier
|
||||
= link_to delete_attachment_project_note_path(@project, note),
|
||||
title: "Delete this attachment", method: :delete, remote: true, data: { confirm: 'Are you sure you want to remove the attachment?' }, class: "danger js-note-attachment-delete" do
|
||||
%i.icon-trash.cred
|
||||
.clear
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
%ul#notes-list.notes.main-notes-list
|
||||
%ul#notes-list.notes.main-notes-list.timeline
|
||||
= render "projects/notes/notes"
|
||||
.js-notes-busy
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue