From 0e290a84012ed9d2138cb6bc31b5db9c62e330c9 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Wed, 23 Mar 2016 15:23:45 +0000 Subject: Started arrow key movement on dropdowns --- app/assets/javascripts/gl_dropdown.js.coffee | 57 +++++++++++++++++++++++-- app/assets/stylesheets/framework/dropdowns.scss | 11 ++++- 2 files changed, 62 insertions(+), 6 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee index 0fea2a69cb7..8686cb99848 100644 --- a/app/assets/javascripts/gl_dropdown.js.coffee +++ b/app/assets/javascripts/gl_dropdown.js.coffee @@ -96,6 +96,7 @@ class GitLabDropdown LOADING_CLASS = "is-loading" PAGE_TWO_CLASS = "is-page-two" ACTIVE_CLASS = "is-active" + CURRENT_INDEX = 0 FILTER_INPUT = '.dropdown-input .dropdown-input-field' @@ -218,6 +219,8 @@ class GitLabDropdown return true opened: => + @addArrowKeyEvent() + contentHtml = $('.dropdown-content', @dropdown).html() if @remote && contentHtml is "" @remote.execute() @@ -228,6 +231,7 @@ class GitLabDropdown @dropdown.trigger('shown.gl.dropdown') hidden: (e) => + @removeArrayKeyEvent() if @options.filterable @dropdown .find(".dropdown-input-field") @@ -322,8 +326,8 @@ class GitLabDropdown ).join('') noResults: -> - html = "
  • " - html += "" + html = "
  • " + html += "" html += "No matching results." html += "" html += "
    • " @@ -343,7 +347,7 @@ class GitLabDropdown selectedObject = @renderedData[selectedIndex] value = if @options.id then @options.id(selectedObject, el) else selectedObject.id field = @dropdown.parent().find("input[name='#{fieldName}'][value='#{value}']") - + if el.hasClass(ACTIVE_CLASS) el.removeClass(ACTIVE_CLASS) field.remove() @@ -384,8 +388,53 @@ class GitLabDropdown # simulate a click on the first link $(selector).trigger "click" + addArrowKeyEvent: -> + ARROW_KEY_CODES = [38, 40] + $input = @dropdown.find(".dropdown-input-field") + + selector = '.dropdown-content li:not(.divider)' + if @dropdown.find(".dropdown-toggle-page").length + selector = ".dropdown-page-one #{selector}" + + $('body').on 'keydown', (e) => + currentKeyCode = e.keyCode + + if ARROW_KEY_CODES.indexOf(currentKeyCode) >= 0 + e.preventDefault() + e.stopPropagation() + + $listItems = $(selector, @dropdown) + + if @options.filterable + $input.blur() + + if currentKeyCode is 40 + # Move down + CURRENT_INDEX += 1 if CURRENT_INDEX < $listItems.length + else if currentKeyCode is 38 + # Move up + CURRENT_INDEX -= 1 if CURRENT_INDEX > 0 + + @highlightRowAtIndex(CURRENT_INDEX) + + return false + + removeArrayKeyEvent: -> + $('body').off 'keydown' + + highlightRowAtIndex: (index, prevIndex) -> + # Remove the class for the previously focused row + $('.is-focused', @dropdown).removeClass 'is-focused' + + # Update the class for the row at the specific index + selector = ".dropdown-content li:not(.divider):eq(#{index})" + if @dropdown.find(".dropdown-toggle-page").length + selector = ".dropdown-page-one #{selector}" + + $listItem = $(selector, @dropdown) + $listItem.addClass "is-focused" + $.fn.glDropdown = (opts) -> return @.each -> if (!$.data @, 'glDropdown') $.data(@, 'glDropdown', new GitLabDropdown @, opts) - diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index 82dc1acbd01..fe03c040e68 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -104,6 +104,14 @@ padding: 0 10px; } + .is-focused { + a { + background-color: $dropdown-link-hover-bg; + text-decoration: none; + outline: 0; + } + } + .divider { height: 1px; margin: 8px 10px; @@ -132,8 +140,7 @@ overflow: hidden; &:hover, - &:focus, - &.is-focused { + &:focus { background-color: $dropdown-link-hover-bg; text-decoration: none; outline: 0; -- cgit v1.2.1 From b244317a38f80740bd1508362316c8e70424f14c Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Thu, 24 Mar 2016 10:26:15 +0000 Subject: Scrolls the dropdown content down --- app/assets/javascripts/gl_dropdown.js.coffee | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee index 8686cb99848..094b1a12408 100644 --- a/app/assets/javascripts/gl_dropdown.js.coffee +++ b/app/assets/javascripts/gl_dropdown.js.coffee @@ -96,7 +96,7 @@ class GitLabDropdown LOADING_CLASS = "is-loading" PAGE_TWO_CLASS = "is-page-two" ACTIVE_CLASS = "is-active" - CURRENT_INDEX = 0 + CURRENT_INDEX = -1 FILTER_INPUT = '.dropdown-input .dropdown-input-field' @@ -410,7 +410,7 @@ class GitLabDropdown if currentKeyCode is 40 # Move down - CURRENT_INDEX += 1 if CURRENT_INDEX < $listItems.length + CURRENT_INDEX += 1 if CURRENT_INDEX < ($listItems.length - 1) else if currentKeyCode is 38 # Move up CURRENT_INDEX -= 1 if CURRENT_INDEX > 0 @@ -434,6 +434,18 @@ class GitLabDropdown $listItem = $(selector, @dropdown) $listItem.addClass "is-focused" + # Dropdown content scroll area + $dropdownContent = $listItem.closest('.dropdown-content') + dropdownContentBottom = $dropdownContent.prop('offsetTop') + $dropdownContent.prop('offsetHeight') + + # Get the offset bottom of the list item + listItemBottom = $listItem.prop('offsetTop') + $listItem.prop('offsetHeight') + console.log listItemBottom, dropdownContentBottom + + if listItemBottom > dropdownContentBottom + # Scroll the dropdown content down + $dropdownContent.scrollTop(listItemBottom - dropdownContentBottom) + $.fn.glDropdown = (opts) -> return @.each -> if (!$.data @, 'glDropdown') -- cgit v1.2.1 From 858eee9ee851e6346e38582ab4b102fc038490c0 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Thu, 24 Mar 2016 11:01:23 +0000 Subject: Correctly scrolls the dropdown up & down with arrow keys --- app/assets/javascripts/gl_dropdown.js.coffee | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee index 094b1a12408..e7572e4eda9 100644 --- a/app/assets/javascripts/gl_dropdown.js.coffee +++ b/app/assets/javascripts/gl_dropdown.js.coffee @@ -436,15 +436,22 @@ class GitLabDropdown # Dropdown content scroll area $dropdownContent = $listItem.closest('.dropdown-content') - dropdownContentBottom = $dropdownContent.prop('offsetTop') + $dropdownContent.prop('offsetHeight') + dropdownScrollTop = $dropdownContent.prop('scrollTop') + dropdownContentHeight = $dropdownContent.prop('offsetHeight') + dropdownContentTop = $dropdownContent.prop('offsetTop') + dropdownContentBottom = dropdownContentTop + dropdownContentHeight # Get the offset bottom of the list item - listItemBottom = $listItem.prop('offsetTop') + $listItem.prop('offsetHeight') - console.log listItemBottom, dropdownContentBottom + listItemHeight = $listItem.prop('offsetHeight') + listItemTop = $listItem.prop('offsetTop') + listItemBottom = listItemTop + listItemHeight - if listItemBottom > dropdownContentBottom + if listItemBottom > dropdownContentBottom + dropdownScrollTop # Scroll the dropdown content down $dropdownContent.scrollTop(listItemBottom - dropdownContentBottom) + else if listItemTop < dropdownContentTop + dropdownScrollTop + # Scroll the dropdown content up + $dropdownContent.scrollTop(listItemTop - dropdownContentTop) $.fn.glDropdown = (opts) -> return @.each -> -- cgit v1.2.1 From 29872c39055d55118cc8b9249caeb659041fea97 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Thu, 24 Mar 2016 12:12:08 +0000 Subject: Enter triggers the currently highlighted element click --- app/assets/javascripts/gl_dropdown.js.coffee | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee index e7572e4eda9..1937e5367db 100644 --- a/app/assets/javascripts/gl_dropdown.js.coffee +++ b/app/assets/javascripts/gl_dropdown.js.coffee @@ -146,11 +146,11 @@ class GitLabDropdown data: => return @fullData callback: (data) => + CURRENT_INDEX = -1 @parseData data - @highlightRow 1 enterCallback: => if @enterCallback - @selectFirstRow() + @selectRowAtIndex 0 # Event listeners @@ -380,10 +380,11 @@ class GitLabDropdown return selectedObject - selectFirstRow: -> - selector = '.dropdown-content li:first-child a' + selectRowAtIndex: (index) -> + selector = ".dropdown-content li:not(.divider):eq(#{index}) a" + if @dropdown.find(".dropdown-toggle-page").length - selector = ".dropdown-page-one .dropdown-content li:first-child a" + selector = ".dropdown-page-one #{selector}" # simulate a click on the first link $(selector).trigger "click" @@ -403,6 +404,7 @@ class GitLabDropdown e.preventDefault() e.stopPropagation() + PREV_INDEX = CURRENT_INDEX $listItems = $(selector, @dropdown) if @options.filterable @@ -415,23 +417,22 @@ class GitLabDropdown # Move up CURRENT_INDEX -= 1 if CURRENT_INDEX > 0 - @highlightRowAtIndex(CURRENT_INDEX) + @highlightRowAtIndex($listItems, CURRENT_INDEX) if CURRENT_INDEX isnt PREV_INDEX return false + if currentKeyCode is 13 + @selectRowAtIndex CURRENT_INDEX + removeArrayKeyEvent: -> $('body').off 'keydown' - highlightRowAtIndex: (index, prevIndex) -> + highlightRowAtIndex: ($listItems, index) -> # Remove the class for the previously focused row $('.is-focused', @dropdown).removeClass 'is-focused' # Update the class for the row at the specific index - selector = ".dropdown-content li:not(.divider):eq(#{index})" - if @dropdown.find(".dropdown-toggle-page").length - selector = ".dropdown-page-one #{selector}" - - $listItem = $(selector, @dropdown) + $listItem = $listItems.eq(index) $listItem.addClass "is-focused" # Dropdown content scroll area -- cgit v1.2.1 From a103fcb7cb14b3bf9f7af44409c79331274e9adc Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Tue, 29 Mar 2016 12:57:10 +0100 Subject: Moved back some css classes --- app/assets/javascripts/gl_dropdown.js.coffee | 6 +++--- app/assets/stylesheets/framework/dropdowns.scss | 11 ++--------- 2 files changed, 5 insertions(+), 12 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee index 1937e5367db..5a555175291 100644 --- a/app/assets/javascripts/gl_dropdown.js.coffee +++ b/app/assets/javascripts/gl_dropdown.js.coffee @@ -326,8 +326,8 @@ class GitLabDropdown ).join('') noResults: -> - html = "
  • " - html += "" + html = "
  • " + html += "" html += "No matching results." html += "" html += "
    • " @@ -433,7 +433,7 @@ class GitLabDropdown # Update the class for the row at the specific index $listItem = $listItems.eq(index) - $listItem.addClass "is-focused" + $listItem.find('a:first-child').addClass "is-focused" # Dropdown content scroll area $dropdownContent = $listItem.closest('.dropdown-content') diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index fe03c040e68..82dc1acbd01 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -104,14 +104,6 @@ padding: 0 10px; } - .is-focused { - a { - background-color: $dropdown-link-hover-bg; - text-decoration: none; - outline: 0; - } - } - .divider { height: 1px; margin: 8px 10px; @@ -140,7 +132,8 @@ overflow: hidden; &:hover, - &:focus { + &:focus, + &.is-focused { background-color: $dropdown-link-hover-bg; text-decoration: none; outline: 0; -- cgit v1.2.1 From f76066b9fb17cd0aace49e353d57ce05976f27e8 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Thu, 31 Mar 2016 08:55:12 +0100 Subject: Fixed issue based on feedback --- app/assets/javascripts/gl_dropdown.js.coffee | 47 +++++++++++++++------------- 1 file changed, 26 insertions(+), 21 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee index 5a555175291..466213496e2 100644 --- a/app/assets/javascripts/gl_dropdown.js.coffee +++ b/app/assets/javascripts/gl_dropdown.js.coffee @@ -1,5 +1,6 @@ class GitLabDropdownFilter BLUR_KEYCODES = [27, 40] + ARROW_KEY_CODES = [38, 40] HAS_VALUE_CLASS = "has-value" constructor: (@input, @options) -> @@ -22,19 +23,23 @@ class GitLabDropdownFilter # Key events timeout = "" @input.on "keyup", (e) => + keyCode = e.which + + return if ARROW_KEY_CODES.indexOf(keyCode) >= 0 + if @input.val() isnt "" and !$inputContainer.hasClass HAS_VALUE_CLASS $inputContainer.addClass HAS_VALUE_CLASS else if @input.val() is "" and $inputContainer.hasClass HAS_VALUE_CLASS $inputContainer.removeClass HAS_VALUE_CLASS - if e.keyCode is 13 and @input.val() isnt "" + if keyCode is 13 and @input.val() isnt "" if @options.enterCallback @options.enterCallback() return clearTimeout timeout timeout = setTimeout => - blur_field = @shouldBlur e.keyCode + blur_field = @shouldBlur keyCode search_text = @input.val() if blur_field and @filterInputBlur @@ -96,7 +101,7 @@ class GitLabDropdown LOADING_CLASS = "is-loading" PAGE_TWO_CLASS = "is-page-two" ACTIVE_CLASS = "is-active" - CURRENT_INDEX = -1 + currentIndex = -1 FILTER_INPUT = '.dropdown-input .dropdown-input-field' @@ -146,7 +151,7 @@ class GitLabDropdown data: => return @fullData callback: (data) => - CURRENT_INDEX = -1 + currentIndex = -1 @parseData data enterCallback: => if @enterCallback @@ -311,11 +316,11 @@ class GitLabDropdown if @highlight text = @highlightTextMatches(text, @filterInput.val()) - html = "
  • " - html += "" - html += text - html += "" - html += "
    • " + html = "
  • + + #{text} + +
    • " return html @@ -398,31 +403,31 @@ class GitLabDropdown selector = ".dropdown-page-one #{selector}" $('body').on 'keydown', (e) => - currentKeyCode = e.keyCode + currentKeyCode = e.which if ARROW_KEY_CODES.indexOf(currentKeyCode) >= 0 e.preventDefault() - e.stopPropagation() + e.stopImmediatePropagation() - PREV_INDEX = CURRENT_INDEX + PREV_INDEX = currentIndex $listItems = $(selector, @dropdown) - if @options.filterable - $input.blur() + # if @options.filterable + # $input.blur() if currentKeyCode is 40 # Move down - CURRENT_INDEX += 1 if CURRENT_INDEX < ($listItems.length - 1) + currentIndex += 1 if currentIndex < ($listItems.length - 1) else if currentKeyCode is 38 # Move up - CURRENT_INDEX -= 1 if CURRENT_INDEX > 0 + currentIndex -= 1 if currentIndex > 0 - @highlightRowAtIndex($listItems, CURRENT_INDEX) if CURRENT_INDEX isnt PREV_INDEX + @highlightRowAtIndex($listItems, currentIndex) if currentIndex isnt PREV_INDEX return false if currentKeyCode is 13 - @selectRowAtIndex CURRENT_INDEX + @selectRowAtIndex currentIndex removeArrayKeyEvent: -> $('body').off 'keydown' @@ -437,13 +442,13 @@ class GitLabDropdown # Dropdown content scroll area $dropdownContent = $listItem.closest('.dropdown-content') - dropdownScrollTop = $dropdownContent.prop('scrollTop') - dropdownContentHeight = $dropdownContent.prop('offsetHeight') + dropdownScrollTop = $dropdownContent.scrollTop() + dropdownContentHeight = $dropdownContent.outerHeight() dropdownContentTop = $dropdownContent.prop('offsetTop') dropdownContentBottom = dropdownContentTop + dropdownContentHeight # Get the offset bottom of the list item - listItemHeight = $listItem.prop('offsetHeight') + listItemHeight = $listItem.outerHeight() listItemTop = $listItem.prop('offsetTop') listItemBottom = listItemTop + listItemHeight -- cgit v1.2.1 From b7f0b22b9fe76f634d9e8cbce03cfaac41f333e6 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Tue, 29 Mar 2016 18:17:31 +0100 Subject: Started refactoring of note form --- app/assets/javascripts/notes.js.coffee | 9 --------- app/assets/stylesheets/framework/common.scss | 7 ------- app/assets/stylesheets/pages/note_form.scss | 7 ++++--- 3 files changed, 4 insertions(+), 19 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/notes.js.coffee b/app/assets/javascripts/notes.js.coffee index ff06c57f2b5..9963299988e 100644 --- a/app/assets/javascripts/notes.js.coffee +++ b/app/assets/javascripts/notes.js.coffee @@ -251,14 +251,9 @@ class @Notes Sets some hidden fields in the form. ### setupMainTargetNoteForm: -> - # find the form form = $(".js-new-note-form") - # insert the form after the button - form.clone().replaceAll $(".js-main-target-form") - form = form.prev("form") - # show the form @setupNoteForm(form) @@ -266,10 +261,6 @@ class @Notes form.removeClass "js-new-note-form" form.addClass "js-main-target-form" - # remove unnecessary fields and buttons - form.find("#note_line_code").remove() - form.find(".js-close-discussion-note-form").remove() - ### General note form setup. diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index 9b676d759e0..91ac5af3c93 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -125,13 +125,6 @@ p.time { height: 150px; } -// Fixes alignment on notes. -.new_note { - label { - text-align: left; - } -} - // Fix issue with notes & lists creating a bunch of bottom borders. li.note { img { max-width: 100% } diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 655f88b0c2c..91b5216a22f 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -17,16 +17,17 @@ } .diff-file, .discussion { - .new_note { + .new-note { margin: 0; border: none; } } -.new_note { + +.new-note { display: none; } -.new_note, .note-edit-form { +.new-note, .note-edit-form { .note-form-actions { margin-top: $gl-padding; } -- cgit v1.2.1 From 0331fa3f3d27dbffdd2144073cf9c62fe7837aa1 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Wed, 30 Mar 2016 08:28:06 +0100 Subject: Restyling on elements in comment form --- app/assets/javascripts/notes.js.coffee | 5 --- app/assets/javascripts/zen_mode.js.coffee | 2 +- .../stylesheets/framework/markdown_area.scss | 15 +++++++ app/assets/stylesheets/framework/typography.scss | 2 +- app/assets/stylesheets/framework/zen.scss | 46 +++++++++------------- app/assets/stylesheets/pages/note_form.scss | 28 ++++++------- 6 files changed, 49 insertions(+), 49 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/notes.js.coffee b/app/assets/javascripts/notes.js.coffee index 9963299988e..24569c4f975 100644 --- a/app/assets/javascripts/notes.js.coffee +++ b/app/assets/javascripts/notes.js.coffee @@ -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! diff --git a/app/assets/javascripts/zen_mode.js.coffee b/app/assets/javascripts/zen_mode.js.coffee index e1c5446eaac..99f35ecfb0f 100644 --- a/app/assets/javascripts/zen_mode.js.coffee +++ b/app/assets/javascripts/zen_mode.js.coffee @@ -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() diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss index 8328aac4e7a..9e2240bd217 100644 --- a/app/assets/stylesheets/framework/markdown_area.scss +++ b/app/assets/stylesheets/framework/markdown_area.scss @@ -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; diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index b1886fbe67b..2ed0f82f911 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -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; } diff --git a/app/assets/stylesheets/framework/zen.scss b/app/assets/stylesheets/framework/zen.scss index 02e24ec7c4d..e75f4471e6c 100644 --- a/app/assets/stylesheets/framework/zen.scss +++ b/app/assets/stylesheets/framework/zen.scss @@ -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; + } +} diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 91b5216a22f..554f87c05ad 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -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 { -- cgit v1.2.1 From 3c2b0e7572c11d24b96f2762a03c8cc47f11f510 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Wed, 30 Mar 2016 10:00:43 +0100 Subject: Added toolbar to comment form --- app/assets/javascripts/issue.js.coffee | 15 ----- app/assets/javascripts/merge_request.js.coffee | 16 ----- app/assets/javascripts/notes.js.coffee | 6 ++ .../stylesheets/framework/markdown_area.scss | 12 ++-- app/assets/stylesheets/framework/zen.scss | 71 ++++++++++++---------- app/assets/stylesheets/pages/note_form.scss | 59 +++++++++++++----- 6 files changed, 95 insertions(+), 84 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/issue.js.coffee b/app/assets/javascripts/issue.js.coffee index d663e34871c..44a8aa68834 100644 --- a/app/assets/javascripts/issue.js.coffee +++ b/app/assets/javascripts/issue.js.coffee @@ -6,25 +6,10 @@ class @Issue constructor: -> # Prevent duplicate event bindings @disableTaskList() - @fixAffixScroll() if $('a.btn-close').length @initTaskList() @initIssueBtnEventListeners() - fixAffixScroll: -> - fixAffix = -> - $discussion = $('.issuable-discussion') - $sidebar = $('.issuable-sidebar') - if $sidebar.hasClass('no-affix') - $sidebar.removeClass(['affix-top','affix']) - discussionHeight = $discussion.height() - sidebarHeight = $sidebar.height() - if sidebarHeight > discussionHeight - $discussion.height(sidebarHeight + 50) - $sidebar.addClass('no-affix') - $(window).on('resize', fixAffix) - fixAffix() - initTaskList: -> $('.detail-page-description .js-task-list-container').taskList('enable') $(document).on 'tasklist:changed', '.detail-page-description .js-task-list-container', @updateTaskList diff --git a/app/assets/javascripts/merge_request.js.coffee b/app/assets/javascripts/merge_request.js.coffee index 6af5a48a0bb..1f46e331427 100644 --- a/app/assets/javascripts/merge_request.js.coffee +++ b/app/assets/javascripts/merge_request.js.coffee @@ -15,8 +15,6 @@ class @MergeRequest this.$('.show-all-commits').on 'click', => this.showAllCommits() - @fixAffixScroll(); - @initTabs() # Prevent duplicate event bindings @@ -30,20 +28,6 @@ class @MergeRequest $: (selector) -> this.$el.find(selector) - fixAffixScroll: -> - fixAffix = -> - $discussion = $('.issuable-discussion') - $sidebar = $('.issuable-sidebar') - if $sidebar.hasClass('no-affix') - $sidebar.removeClass(['affix-top','affix']) - discussionHeight = $discussion.height() - sidebarHeight = $sidebar.height() - if sidebarHeight > discussionHeight - $discussion.height(sidebarHeight + 50) - $sidebar.addClass('no-affix') - $(window).on('resize', fixAffix) - fixAffix() - initTabs: -> if @opts.action != 'new' # `MergeRequests#new` has no tab-persisting or lazy-loading behavior diff --git a/app/assets/javascripts/notes.js.coffee b/app/assets/javascripts/notes.js.coffee index 24569c4f975..864156cb718 100644 --- a/app/assets/javascripts/notes.js.coffee +++ b/app/assets/javascripts/notes.js.coffee @@ -1,4 +1,5 @@ #= require autosave +#= require autosize #= require dropzone #= require dropzone_input #= require gfm_auto_complete @@ -287,6 +288,8 @@ class @Notes else previewButton.removeClass("turn-on").addClass "turn-off" + autosize(textarea) + new Autosave textarea, [ "Note" form.find("#note_commit_id").val() @@ -368,6 +371,9 @@ 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! diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss index 9e2240bd217..ae23e19172a 100644 --- a/app/assets/stylesheets/framework/markdown_area.scss +++ b/app/assets/stylesheets/framework/markdown_area.scss @@ -1,9 +1,7 @@ .div-dropzone-wrapper { .div-dropzone { position: relative; - padding: 0; - border: 0; - margin-bottom: 5px; + margin-bottom: -5px; .div-dropzone-focus { border-color: #66afe9 !important; @@ -25,12 +23,10 @@ .div-dropzone-spinner { position: absolute; - top: 100%; - left: 100%; - margin-top: -1.1em; - margin-left: -1.1em; + bottom: 10px; + right: 5px; opacity: 0; - font-size: 30px; + font-size: 20px; transition: opacity 200ms ease-in-out; } diff --git a/app/assets/stylesheets/framework/zen.scss b/app/assets/stylesheets/framework/zen.scss index e75f4471e6c..951d794916b 100644 --- a/app/assets/stylesheets/framework/zen.scss +++ b/app/assets/stylesheets/framework/zen.scss @@ -1,42 +1,51 @@ -.zennable { - .zen-backdrop { - &.fullscreen { - background-color: white; - position: fixed; - top: 0; - bottom: 0; - left: 0; - right: 0; - z-index: 1031; +.zen-backdrop { + &.fullscreen { + background-color: white; + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 1031; - textarea { - border: none; - box-shadow: none; - border-radius: 0; - color: #000; - font-size: 20px; - line-height: 26px; - padding: 30px; - display: block; - outline: none; - resize: none; - height: 100vh; - max-width: 900px; - margin: 0 auto; - } + textarea { + border: none; + box-shadow: none; + border-radius: 0; + color: #000; + font-size: 20px; + line-height: 26px; + padding: 30px; + display: block; + outline: none; + resize: none; + height: 100vh; + max-width: 900px; + margin: 0 auto; + } - .zen-control-leave { - display: block; - position: absolute; - top: 0; - } + .zen-control-leave { + display: block; + position: absolute; + top: 0; } } } .zen-cotrol { + padding: 0; color: #555; - line-height: 31px; + background: none; + border: 0; +} + +.zen-control-full { + color: #959494; + + &:hover { + color: $gl-link-color; + text-decoration: none; + } } .zen-control-leave { diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 554f87c05ad..561b37e5828 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -47,9 +47,7 @@ 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 + border: 0; &:focus { outline: 0; @@ -63,10 +61,11 @@ } .common-note-form { - margin: 0; - padding: $gl-padding; - border: 1px solid #E5E5E5; - border-radius: $border-radius-base; + .md-area { + padding: $gl-padding-top $gl-padding; + border: 1px solid #E5E5E5; + border-radius: $border-radius-base; + } } .note-form-actions { @@ -151,11 +150,43 @@ } } -.comment-hints { - color: #999; - background: #fff; - padding: 7px; - margin-top: -7px; - border: 1px solid $border-color; - font-size: 13px; +.comment-toolbar { + padding-top: $gl-padding-top; + border-top: 1px solid $border-color; +} + +.toolbar-button { + float: left; + margin-right: $gl-padding; + padding: 0; + background: none; + border: 0; + color: #959494; + font-size: 14px; + line-height: 16px; + + &:hover, + &:focus { + color: $gl-link-color; + outline: 0; + } + + &:last-child { + margin-right: 0; + } +} + +.toolbar-button-icon { + position: relative; + top: 1px; + margin-right: 3px; + color: inherit; + font-size: 16px; +} + +.toolbar-text { + float: left; + color: #959494; + font-size: 14px; + line-height: 16px; } -- cgit v1.2.1 From 38e32780a85463e862e5847a436be6819e28c81c Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Wed, 30 Mar 2016 10:04:21 +0100 Subject: Hides current user icon on mobile --- app/assets/stylesheets/pages/notes.scss | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'app/assets') diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 072de68c8e2..0f45c1fe33d 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -20,6 +20,12 @@ 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 { -- cgit v1.2.1 From af3284d98b68dedbdab3821fa99ee53437ee3d32 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Wed, 30 Mar 2016 10:19:58 +0100 Subject: Focus style for comment form --- app/assets/javascripts/notes.js.coffee | 6 ++++ .../stylesheets/framework/markdown_area.scss | 7 ++--- app/assets/stylesheets/pages/note_form.scss | 32 ++++++++++++++++------ 3 files changed, 32 insertions(+), 13 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/notes.js.coffee b/app/assets/javascripts/notes.js.coffee index 864156cb718..40326ec96a8 100644 --- a/app/assets/javascripts/notes.js.coffee +++ b/app/assets/javascripts/notes.js.coffee @@ -288,6 +288,12 @@ class @Notes else previewButton.removeClass("turn-on").addClass "turn-off" + textarea.on 'focus', -> + $(this).closest('.md-area').addClass 'is-focused' + + textarea.on 'blur', -> + $(this).closest('.md-area').removeClass 'is-focused' + autosize(textarea) new Autosave textarea, [ diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss index ae23e19172a..ea8e1c902cb 100644 --- a/app/assets/stylesheets/framework/markdown_area.scss +++ b/app/assets/stylesheets/framework/markdown_area.scss @@ -82,11 +82,8 @@ } .md-preview-holder { - background: #fff; - border: 1px solid #ddd; - min-height: 169px; - padding: 5px; - box-shadow: none; + min-height: 167px; + padding: 10px 0; } .markdown-area { diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 561b37e5828..7bd666d1c69 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -44,8 +44,7 @@ } .note-textarea { - padding-left: 0; - padding-right: 0; + padding: 10px 0; font-family: $regular_font; border: 0; @@ -63,8 +62,18 @@ .common-note-form { .md-area { padding: $gl-padding-top $gl-padding; - border: 1px solid #E5E5E5; + border: 1px solid #e5e5e5; border-radius: $border-radius-base; + + &.is-focused { + border-color: #3b99fc; + box-shadow: 0 0 4px rgba(#3b99fc, .7); + + .comment-toolbar, + .nav-links { + border-color: #3b99fc; + } + } } } @@ -156,8 +165,6 @@ } .toolbar-button { - float: left; - margin-right: $gl-padding; padding: 0; background: none; border: 0; @@ -171,8 +178,14 @@ outline: 0; } - &:last-child { - margin-right: 0; + @media (min-width: $screen-md-min) { + float: left; + margin-right: $gl-padding; + + &:last-child { + float: right; + margin-right: 0; + } } } @@ -185,8 +198,11 @@ } .toolbar-text { - float: left; color: #959494; font-size: 14px; line-height: 16px; + + @media (min-width: $screen-md-min) { + float: left; + } } -- cgit v1.2.1 From f0d2f370ccef7fd1fca4477111e6ded8133c4b36 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Wed, 30 Mar 2016 10:24:50 +0100 Subject: Removed css code that isnt used --- app/assets/javascripts/notes.js.coffee | 1 - app/assets/stylesheets/pages/note_form.scss | 28 ---------------------------- 2 files changed, 29 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/notes.js.coffee b/app/assets/javascripts/notes.js.coffee index 40326ec96a8..ae16769ad4b 100644 --- a/app/assets/javascripts/notes.js.coffee +++ b/app/assets/javascripts/notes.js.coffee @@ -305,7 +305,6 @@ class @Notes ] # remove notify commit author checkbox for non-commit notes - form.find(".js-notify-commit-author").remove() if form.find("#note_noteable_type").val() isnt "Commit" GitLab.GfmAutoComplete.setup() new DropzoneInput(form) form.show() diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 7bd666d1c69..56912791212 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -37,10 +37,6 @@ img { max-width: 100%; } - - .comment-hints { - margin-top: -12px; - } } .note-textarea { @@ -77,30 +73,6 @@ } } -.note-form-actions { - .note-form-option { - margin-top: 8px; - margin-left: 30px; - @extend .pull-left; - } - - .js-notify-commit-author { - float: left; - } - - .write-preview-btn { - // makes the "absolute" position for links relative to this - position: relative; - - // preview/edit buttons - > a { - position: absolute; - right: 5px; - top: 8px; - } - } -} - .note-edit-form { display: none; font-size: 15px; -- cgit v1.2.1 From 0581df2971d63bcb7966637b6a3da2b4d7feb62d Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Wed, 30 Mar 2016 13:39:41 +0100 Subject: Discussion form --- app/assets/javascripts/notes.js.coffee | 13 +++++++++---- app/assets/stylesheets/pages/note_form.scss | 5 +++++ 2 files changed, 14 insertions(+), 4 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/notes.js.coffee b/app/assets/javascripts/notes.js.coffee index ae16769ad4b..22cad1d6124 100644 --- a/app/assets/javascripts/notes.js.coffee +++ b/app/assets/javascripts/notes.js.coffee @@ -254,6 +254,9 @@ class @Notes # find the form form = $(".js-new-note-form") + # Set a global clone of the form for later cloning + @formClone = form.clone() + # show the form @setupNoteForm(form) @@ -452,15 +455,15 @@ class @Notes Shows the note form below the notes. ### replyToDiscussionNote: (e) => - form = $(".js-new-note-form") + form = @formClone.clone() replyLink = $(e.target).closest(".js-discussion-reply-button") replyLink.hide() # insert the form after the button - form.clone().insertAfter replyLink + replyLink.after form # show the form - @setupDiscussionNoteForm(replyLink, replyLink.next("form")) + @setupDiscussionNoteForm(replyLink, form) ### Shows the diff or discussion form and does some setup on it. @@ -485,7 +488,9 @@ class @Notes .text(form.find('.js-close-discussion-note-form').data('cancel-text')) @setupNoteForm form form.find(".js-note-text").focus() - form.addClass "js-discussion-note-form" + form + .removeClass('js-main-target-form') + .addClass("discussion-form js-discussion-note-form") ### Called when clicking on the "add a comment" button on the side of a diff line. diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 56912791212..85b323e2caf 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -73,6 +73,11 @@ } } +.discussion-form { + padding: $gl-padding-top $gl-padding; + background-color: #fff; +} + .note-edit-form { display: none; font-size: 15px; -- cgit v1.2.1 From 3b4c4dd7b35b662755fed58c6d1ed6f9ba82b575 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Wed, 30 Mar 2016 13:54:35 +0100 Subject: Logged out box --- app/assets/javascripts/notes.js.coffee | 3 +- app/assets/stylesheets/pages/merge_requests.scss | 44 +++++++----------------- 2 files changed, 14 insertions(+), 33 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/notes.js.coffee b/app/assets/javascripts/notes.js.coffee index 22cad1d6124..0ee1e70da2c 100644 --- a/app/assets/javascripts/notes.js.coffee +++ b/app/assets/javascripts/notes.js.coffee @@ -501,7 +501,6 @@ class @Notes addDiffNote: (e) => e.preventDefault() link = e.currentTarget - form = $(".js-new-note-form") row = $(link).closest("tr") nextRow = row.next() hasNotes = nextRow.is(".notes_holder") @@ -533,7 +532,7 @@ class @Notes addForm = true if addForm - newForm = form.clone() + newForm = @formClone.clone() newForm.appendTo row.next().find(targetContent) # show the form diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 7ff63ca20b6..b080490f75e 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -195,39 +195,21 @@ line-height: 31px; } -.disabled-comment-area { - padding: 16px 0; - - .disabled-profile { - width: 40px; - height: 40px; - background: $border-gray-dark; - border-radius: 20px; - display: inline-block; - margin-right: 10px; - } - - .disabled-comment { - background: $gray-light; - display: inline-block; - vertical-align: top; - height: 200px; - border-radius: 4px; - border: 1px solid $border-gray-normal; - padding-top: 90px; - text-align: center; - right: 20px; - position: absolute; - left: 70px; - margin-bottom: 20px; +.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: #b2b2b2; + line-height: 200px; - span { - color: #b2b2b2; + .disabled-comment-text { + line-height: normal; + } - a { - color: $md-link-color; - } - } + a { + color: $gl-link-color; } } -- cgit v1.2.1 From 40297b8f118742fc710f2ae0364d7bbcd82c40e6 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Wed, 30 Mar 2016 14:03:14 +0100 Subject: Reduced focus shadow --- app/assets/stylesheets/pages/note_form.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 85b323e2caf..c829ffa330d 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -63,7 +63,8 @@ &.is-focused { border-color: #3b99fc; - box-shadow: 0 0 4px rgba(#3b99fc, .7); + box-shadow: 0 0 2px rgba(#000, .2), + 0 0 4px rgba(#3b99fc, .5); .comment-toolbar, .nav-links { -- cgit v1.2.1 From 29f414aa5a4d63d5676d5c0e4d89584f45ef8c35 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Wed, 30 Mar 2016 16:20:43 +0100 Subject: Tests update --- app/assets/stylesheets/pages/notes.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 0f45c1fe33d..46a0724603e 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -155,7 +155,7 @@ ul.notes { &.notes_content { background-color: #fff; border-width: 1px 0; - padding-top: 0; + padding: 0; vertical-align: top; &.parallel{ border-width: 1px; -- cgit v1.2.1 From 1f5083343081adb6e4a9a438600163844d2e9875 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Wed, 30 Mar 2016 20:11:41 +0100 Subject: Updated tests --- app/assets/javascripts/notes.js.coffee | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/notes.js.coffee b/app/assets/javascripts/notes.js.coffee index 0ee1e70da2c..35547adf8a4 100644 --- a/app/assets/javascripts/notes.js.coffee +++ b/app/assets/javascripts/notes.js.coffee @@ -65,6 +65,8 @@ class @Notes # add diff note $(document).on "click", ".js-add-diff-note-button", @addDiffNote + $(document).on "mouseover", ".js-add-diff-note-button", -> + console.log $(this).data('line-code') # hide diff note form $(document).on "click", ".js-close-discussion-note-form", @cancelDiscussionForm @@ -264,6 +266,8 @@ class @Notes form.removeClass "js-new-note-form" form.addClass "js-main-target-form" + form.find("#note_line_code").remove() + ### General note form setup. @@ -500,8 +504,9 @@ class @Notes ### addDiffNote: (e) => e.preventDefault() - link = e.currentTarget - row = $(link).closest("tr") + $link = $(e.currentTarget) + console.log $link.data('line-code') + row = $link.closest("tr") nextRow = row.next() hasNotes = nextRow.is(".notes_holder") addForm = false @@ -510,7 +515,7 @@ class @Notes # In parallel view, look inside the correct left/right pane if @isParallelView() - lineType = $(link).data("lineType") + lineType = $link.data("lineType") targetContent += "." + lineType rowCssToAdd = "" @@ -536,7 +541,7 @@ class @Notes newForm.appendTo row.next().find(targetContent) # show the form - @setupDiscussionNoteForm $(link), newForm + @setupDiscussionNoteForm $link, newForm ### Called in response to "cancel" on a diff note form. @@ -561,7 +566,6 @@ class @Notes cancelDiscussionForm: (e) => e.preventDefault() - form = $(".js-new-note-form") form = $(e.target).closest(".js-discussion-note-form") @removeDiscussionNoteForm(form) -- cgit v1.2.1 From f62d7d261b6d321400a68fa23daf7eceaba66e05 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Mon, 4 Apr 2016 10:49:08 +0100 Subject: Removed console.log from notes --- app/assets/javascripts/notes.js.coffee | 3 --- 1 file changed, 3 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/notes.js.coffee b/app/assets/javascripts/notes.js.coffee index 35547adf8a4..86e3b860fcb 100644 --- a/app/assets/javascripts/notes.js.coffee +++ b/app/assets/javascripts/notes.js.coffee @@ -65,8 +65,6 @@ class @Notes # add diff note $(document).on "click", ".js-add-diff-note-button", @addDiffNote - $(document).on "mouseover", ".js-add-diff-note-button", -> - console.log $(this).data('line-code') # hide diff note form $(document).on "click", ".js-close-discussion-note-form", @cancelDiscussionForm @@ -505,7 +503,6 @@ class @Notes addDiffNote: (e) => e.preventDefault() $link = $(e.currentTarget) - console.log $link.data('line-code') row = $link.closest("tr") nextRow = row.next() hasNotes = nextRow.is(".notes_holder") -- cgit v1.2.1 From 51df93607fc5c4ef2cac13a90aaf7450c38fdf4f Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Mon, 4 Apr 2016 11:00:29 +0100 Subject: SCSS colors into variables --- app/assets/stylesheets/framework/variables.scss | 6 ++++++ app/assets/stylesheets/framework/zen.scss | 4 ++-- app/assets/stylesheets/pages/merge_requests.scss | 18 ------------------ app/assets/stylesheets/pages/note_form.scss | 11 +++++------ app/assets/stylesheets/pages/notes.scss | 18 ++++++++++++++++++ 5 files changed, 31 insertions(+), 26 deletions(-) (limited to 'app/assets') diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 98fe794d362..c2defd31884 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -217,3 +217,9 @@ $notes-light-color: #8e8e8e; $notes-action-color: #c3c3c3; $notes-role-color: #8e8e8e; $notes-role-border-color: #e4e4e4; + +$note-disabled-comment-color: #b2b2b2; +$note-form-border-color: #e5e5e5; +$note-toolbar-color: #959494; + +$zen-control-hover-color: #111; diff --git a/app/assets/stylesheets/framework/zen.scss b/app/assets/stylesheets/framework/zen.scss index 951d794916b..f870ea0d87f 100644 --- a/app/assets/stylesheets/framework/zen.scss +++ b/app/assets/stylesheets/framework/zen.scss @@ -40,7 +40,7 @@ } .zen-control-full { - color: #959494; + color: $note-toolbar-color; &:hover { color: $gl-link-color; @@ -57,6 +57,6 @@ font-size: 36px; &:hover { - color: #111; + color: $zen-control-hover-color; } } diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index b080490f75e..1c6a4208974 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -195,24 +195,6 @@ line-height: 31px; } -.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: #b2b2b2; - line-height: 200px; - - .disabled-comment-text { - line-height: normal; - } - - a { - color: $gl-link-color; - } -} - .builds { .table-holder { overflow-x: scroll; diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index c829ffa330d..a909776b437 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -58,17 +58,17 @@ .common-note-form { .md-area { padding: $gl-padding-top $gl-padding; - border: 1px solid #e5e5e5; + border: 1px solid $note-form-border-color; border-radius: $border-radius-base; &.is-focused { - border-color: #3b99fc; + border-color: $focus-border-color; box-shadow: 0 0 2px rgba(#000, .2), - 0 0 4px rgba(#3b99fc, .5); + 0 0 4px rgba($focus-border-color, .4); .comment-toolbar, .nav-links { - border-color: #3b99fc; + border-color: $focus-border-color; } } } @@ -139,6 +139,7 @@ .comment-toolbar { padding-top: $gl-padding-top; + color: $note-toolbar-color; border-top: 1px solid $border-color; } @@ -146,7 +147,6 @@ padding: 0; background: none; border: 0; - color: #959494; font-size: 14px; line-height: 16px; @@ -176,7 +176,6 @@ } .toolbar-text { - color: #959494; font-size: 14px; line-height: 16px; diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 46a0724603e..a9f88d2ccfd 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -287,3 +287,21 @@ ul.notes { } } } + +.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; + + .disabled-comment-text { + line-height: normal; + } + + a { + color: $gl-link-color; + } +} -- cgit v1.2.1 From 8e3f5ebaa080bec65b35c21b8a70f84c7ed9fa63 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Tue, 5 Apr 2016 09:07:40 +0100 Subject: CS multiline --- app/assets/javascripts/gl_dropdown.js.coffee | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee index 466213496e2..6a825a67a14 100644 --- a/app/assets/javascripts/gl_dropdown.js.coffee +++ b/app/assets/javascripts/gl_dropdown.js.coffee @@ -331,11 +331,11 @@ class GitLabDropdown ).join('') noResults: -> - html = "
  • " - html += "" - html += "No matching results." - html += "" - html += "
    • " + html = "
  • + + No matching results. + +
    • " highlightRow: (index) -> if @filterInput.val() isnt "" -- cgit v1.2.1 From 33faf219aaf72bb2c8a6df06fd42adf17bebfd14 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Date: Tue, 5 Apr 2016 11:43:30 -0700 Subject: Fix data check in update issue response --- app/assets/javascripts/issue.js.coffee | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/issue.js.coffee b/app/assets/javascripts/issue.js.coffee index d663e34871c..b30e493592d 100644 --- a/app/assets/javascripts/issue.js.coffee +++ b/app/assets/javascripts/issue.js.coffee @@ -49,7 +49,7 @@ class @Issue issueStatus = if isClose then 'close' else 'open' new Flash(issueFailMessage, 'alert') success: (data, textStatus, jqXHR) -> - if data.saved + if 'id' of data $(document).trigger('issuable:change'); if isClose $('a.btn-close').addClass('hidden') -- cgit v1.2.1 From b23e67bce5ae5f3bed8f27feba7eb5f833dcdca5 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Date: Tue, 5 Apr 2016 14:12:47 -0700 Subject: Add CI styling to all CI updates --- app/assets/stylesheets/pages/projects.scss | 2 +- app/assets/stylesheets/pages/status.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 4e6aa8cd1a6..a0ac06008b6 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -401,7 +401,7 @@ pre.light-well { } .commit_short_id { - margin-right: 5px; + margin: 0 5px; color: $gl-link-color; font-weight: 600; } diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss index 5e5e38a0ba6..dbb6daf0d70 100644 --- a/app/assets/stylesheets/pages/status.scss +++ b/app/assets/stylesheets/pages/status.scss @@ -1,4 +1,4 @@ -.container-fluid .content { +.container-fluid { .ci-status { padding: 2px 7px; margin-right: 5px; -- cgit v1.2.1