From 207d798dc4b82da319d962b4ce0ec2111e79ba31 Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Fri, 15 Aug 2014 11:14:58 +0300 Subject: [PATCH] Basic UI implememntation of comments in timeline style Signed-off-by: Dmitriy Zaporozhets --- app/assets/stylesheets/generic/timeline.scss | 64 +++++++++ app/assets/stylesheets/sections/notes.scss | 6 +- app/views/projects/notes/_note.html.haml | 127 +++++++++--------- .../projects/notes/_notes_with_form.html.haml | 2 +- 4 files changed, 131 insertions(+), 68 deletions(-) create mode 100644 app/assets/stylesheets/generic/timeline.scss diff --git a/app/assets/stylesheets/generic/timeline.scss b/app/assets/stylesheets/generic/timeline.scss new file mode 100644 index 00000000000..7e56c7a8ad2 --- /dev/null +++ b/app/assets/stylesheets/generic/timeline.scss @@ -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; + } + } + } + } +} diff --git a/app/assets/stylesheets/sections/notes.scss b/app/assets/stylesheets/sections/notes.scss index 18db7abc64e..d544b97c3bb 100644 --- a/app/assets/stylesheets/sections/notes.scss +++ b/app/assets/stylesheets/sections/notes.scss @@ -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; diff --git a/app/views/projects/notes/_note.html.haml b/app/views/projects/notes/_note.html.haml index 5e84aed0cc4..223abe5da78 100644 --- a/app/views/projects/notes/_note.html.haml +++ b/app/views/projects/notes/_note.html.haml @@ -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 diff --git a/app/views/projects/notes/_notes_with_form.html.haml b/app/views/projects/notes/_notes_with_form.html.haml index 052661962e4..04ee17a40a0 100644 --- a/app/views/projects/notes/_notes_with_form.html.haml +++ b/app/views/projects/notes/_notes_with_form.html.haml @@ -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