diff --git a/app/assets/javascripts/dispatcher.js.coffee b/app/assets/javascripts/dispatcher.js.coffee index ff8bcf89918..8ee00fb9723 100644 --- a/app/assets/javascripts/dispatcher.js.coffee +++ b/app/assets/javascripts/dispatcher.js.coffee @@ -23,7 +23,7 @@ class Dispatcher new Issue() shortcut_handler = new ShortcutsIssuable() new ZenMode() - window.awards_handler = new AwardsHandler() + window.awardsHandler = new AwardsHandler() when 'projects:milestones:show', 'groups:milestones:show', 'dashboard:milestones:show' new Milestone() when 'dashboard:todos:index' @@ -54,7 +54,7 @@ class Dispatcher new Diff() shortcut_handler = new ShortcutsIssuable(true) new ZenMode() - window.awards_handler = new AwardsHandler() + window.awardsHandler = new AwardsHandler() when "projects:merge_requests:diffs" new Diff() new ZenMode() diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index feb42c36d31..a3e1ac13a43 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -20,9 +20,15 @@ ul.notes { .timeline-content { margin-left: 55px; + + &.timeline-content-form { + @media (max-width: $screen-sm-max) { + margin-left: 0; + } + } } - .note_created_ago, .note-updated-at { + .note-created-ago, .note-updated-at { white-space: nowrap; } @@ -39,53 +45,6 @@ ul.notes { } } - .discussion-header, - .note-header { - @extend .cgray; - - a:hover { - text-decoration: none; - } - - .avatar { - float: left; - margin-right: 10px; - } - - .discussion-last-update, - .note-last-update { - &:before { - content: "\00b7"; - } - - a { - color: $gl-gray; - - &:hover { - text-decoration: underline; - } - } - } - .author { - color: #4c4e54; - margin-right: 3px; - - &:hover { - color: $gl-link-color; - } - } - .author-username { - } - - .note-role { - float: right; - margin-top: 1px; - border: 1px solid #bbb; - background-color: transparent; - color: $gl-gray; - } - } - .discussion-body { padding-top: 15px; } @@ -99,12 +58,12 @@ ul.notes { .note { display: block; position: relative; + border-bottom: 1px solid $table-border-gray; &.is-editting { .note-header, .note-text, - .edited-text, - .note-awards { + .edited-text { display: none; } @@ -114,16 +73,16 @@ ul.notes { } .note-body { + overflow: auto; + .note-text { overflow: auto; word-wrap: break-word; @include md-typography; // On diffs code should wrap nicely and not overflow - pre { - code { - white-space: pre-wrap; - } + code { + white-space: pre-wrap; } // Reset ul style types since we're nested inside a ul already @@ -150,6 +109,10 @@ ul.notes { border-color: darken(#f5f5f5, 8%); margin: 10px 0; } + + code { + word-break: keep-all; + } } } @@ -157,9 +120,6 @@ ul.notes { padding-bottom: 3px; } - &:last-child { - border-bottom: 1px solid $border-color; - } } } @@ -177,60 +137,149 @@ ul.notes { font-family: $regular_font; td { - border: 1px solid #ddd; + border: 1px solid $table-border-gray; border-left: none; &.notes_line { vertical-align: middle; text-align: center; padding: 10px 0; - background: #fff; + background: $background-color; color: $text-color; } + &.notes_line2 { text-align: center; padding: 10px 0; border-left: 1px solid #ddd !important; } + &.notes_content { - background-color: #fff; + background-color: $background-color; border-width: 1px 0; - padding-top: 0; + padding: 0; vertical-align: top; - &.parallel{ + white-space: normal; + + &.parallel { border-width: 1px; } + + .notes { + background-color: $white-light; + } + + a code { + top: 0; + margin-right: 0; + } } } } +.discussion-header, +.note-header { + a { + color: inherit; + + &:hover { + color: $gl-link-color; + text-decoration: none; + } + } + + .author_link { + color: $gl-gray; + } +} + +.note-headline-light, +.discussion-headline-light { + color: $notes-light-color; +} + +.discussion-headline-light { + a { + color: $gl-link-color; + } +} + /** * Actions for Discussions/Notes */ -.discussion, -.note { - .discussion-actions, - .note-actions { - float: right; - margin-left: 10px; +.discussion-actions, +.note-actions { + float: right; + margin-left: 10px; + color: $notes-action-color; +} - a { - margin-left: 5px; - color: $gl-gray; +.discussion-actions { + @media (max-width: $screen-md-max) { + float: none; + margin-left: 0; - i.fa { - font-size: 16px; - line-height: 16px; - } + .note-action-button { + margin-left: 0; + } + } +} +.note-action-button { + display: inline-block; + margin-left: 10px; + line-height: 24px; + + .fa { + color: $notes-action-color; + position: relative; + top: 1px; + font-size: 17px; + } + + &.js-note-delete { + i { &:hover { - @extend .cgray; - &.danger { @extend .cred; } + color: $gl-text-red; + } + } + } + + &.js-note-edit { + i { + &:hover { + color: $gl-link-color; } } } } + +.discussion-toggle-button { + line-height: 20px; + font-size: 13px; + + .fa { + margin-right: 3px; + font-size: 10px; + line-height: 18px; + vertical-align: top; + } +} + +.note-role { + position: relative; + top: -2px; + display: inline-block; + padding-left: 4px; + padding-right: 4px; + color: $notes-role-color; + font-size: 12px; + line-height: 20px; + border: 1px solid $notes-role-border-color; + border-radius: $border-radius-base; +} + .diff-file .note .note-actions { right: 0; top: 0; @@ -243,8 +292,7 @@ ul.notes { .diff-file tr.line_holder { @mixin show-add-diff-note { - filter: alpha(opacity=100); - opacity: 1.0; + display: inline-block; } .add-diff-note { @@ -254,17 +302,12 @@ ul.notes { padding: 4px; font-size: 16px; color: $gl-link-color; - margin-left: -60px; + margin-left: -56px; position: absolute; z-index: 10; width: 32px; - - transition: all 0.2s ease; - // "hide" it by default - opacity: 0.0; - filter: alpha(opacity=0); - + display: none; &:hover { background: $gl-info; color: #fff; @@ -280,38 +323,20 @@ ul.notes { } } -.note-award-control { - display: block; +.disabled-comment { + margin-left: -$gl-padding-top; + margin-right: -$gl-padding-top; + background-color: $gray-light; + border-radius: $border-radius-base; + border: 1px solid $border-gray-normal; + color: $note-disabled-comment-color; + line-height: 200px; - &:hover, - &:focus { - text-decoration: none; + .disabled-comment-text { + line-height: normal; } - .award-control-icon-loading { - display: none; - } - - &.is-loading { - .award-control-icon-normal { - display: none; - } - - .award-control-icon-loading { - display: block; - } - } -} - -.note-awards { - .awards { - padding-top: 10px; - } - - .award-control { - padding-top: 2px; - padding-bottom: 2px; - color: #8f8f8f; - font-size: 13px; + a { + color: $gl-link-color; } } diff --git a/app/views/projects/notes/_note.html.haml b/app/views/projects/notes/_note.html.haml index 13d3f1eceab..9fbc9a45549 100644 --- a/app/views/projects/notes/_note.html.haml +++ b/app/views/projects/notes/_note.html.haml @@ -9,20 +9,14 @@ = image_tag avatar_icon(note.author), alt: '', class: 'avatar s40' .timeline-content .note-header + = link_to_member(note.project, note.author, avatar: false) + .inline.note-headline-light + = note.author.to_reference + - unless note.system + commented + %a{ href: "##{dom_id(note)}" } + = time_ago_with_tooltip(note.created_at, placement: 'bottom', html_class: 'note-created-ago') .note-actions - - if current_user - .award-menu-holder.note-action-award-holder.js-award-holder.js-award-action-btn{ data: { target: "##{dom_id(note)} .js-awards-block" } } - = link_to '#', title: 'Award emoji', class: 'note-award-control js-add-award', data: { award_menu_url: emojis_path, position: "right" } do - = icon('smile-o', {class: "award-control-icon award-control-icon-normal"}) - = icon('spinner spin', {class: "award-control-icon award-control-icon-loading"}) - - if note_editable?(note) - = link_to '#', title: 'Edit comment', class: 'js-note-edit' do - = icon('pencil-square-o') - - = link_to namespace_project_note_path(note.project.namespace, note.project, note), title: 'Remove comment', method: :delete, data: { confirm: 'Are you sure you want to remove this comment?' }, remote: true, class: 'js-note-delete danger' do - = icon('trash-o') - - - unless note.system - access = note.project.team.human_max_access(note.author.id) - if access %span.note-role