diff --git a/app/assets/images/Info-UI.PNG b/app/assets/images/Info-UI.PNG index 92795486..7f48ed8d 100644 Binary files a/app/assets/images/Info-UI.PNG and b/app/assets/images/Info-UI.PNG differ diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 1a011c7d..158e1ee0 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -11,6 +11,7 @@ //= require jquery.tagify //= require jquery.cookie //= require jquery.endless-scroll +//= require bootstrap-modal //= require modernizr //= require chosen //= require raphael diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index d92a5bb3..09d9d62d 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -313,3 +313,12 @@ img.lil_av { padding:10px 0; padding-bottom:0; } + +.info_link { + margin-right:5px; + float:left; + + img { + width:20px; + } +} diff --git a/app/views/merge_requests/_how_to_merge.html.haml b/app/views/merge_requests/_how_to_merge.html.haml new file mode 100644 index 00000000..19caca3f --- /dev/null +++ b/app/views/merge_requests/_how_to_merge.html.haml @@ -0,0 +1,25 @@ +%div#modal_merge_info.modal.hide + .modal-header + %a.close{:href => "#"} × + %h3 How To Merge + .modal-body + %pre + :erb + git fetch origin + git checkout -b <%=@merge_request.source_branch%> origin/<%=@merge_request.source_branch%> + git checkout <%=@merge_request.target_branch%> + git merge <%=@merge_request.source_branch%> + git push origin <%=@merge_request.target_branch%> + + +:javascript + $(function(){ + var modal = $('#modal_merge_info').modal({modal: true}); + $('.info_link').bind("click", function(){ + modal.show(); + }); + $('.modal-header .close').bind("click", function(){ + modal.hide(); + }) + }) + diff --git a/app/views/merge_requests/show.html.haml b/app/views/merge_requests/show.html.haml index b270175d..dd3fc7c6 100644 --- a/app/views/merge_requests/show.html.haml +++ b/app/views/merge_requests/show.html.haml @@ -22,12 +22,18 @@ .back_link = link_to project_merge_requests_path(@project) do ← To merge requests + + %hr - if @merge_request.closed .alert-message.error Closed - else - .alert-message.success Open + .alert-message.success + = link_to "#", :class => "info_link", :title => "How To Merge" do + = image_tag "Info-UI.PNG" + Open += render "merge_requests/how_to_merge" %div.well %div diff --git a/vendor/assets/javascripts/bootstrap-modal.js b/vendor/assets/javascripts/bootstrap-modal.js new file mode 100644 index 00000000..b328217f --- /dev/null +++ b/vendor/assets/javascripts/bootstrap-modal.js @@ -0,0 +1,260 @@ +/* ========================================================= + * bootstrap-modal.js v1.4.0 + * http://twitter.github.com/bootstrap/javascript.html#modal + * ========================================================= + * Copyright 2011 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ========================================================= */ + + +!function( $ ){ + + "use strict" + + /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) + * ======================================================= */ + + var transitionEnd + + $(document).ready(function () { + + $.support.transition = (function () { + var thisBody = document.body || document.documentElement + , thisStyle = thisBody.style + , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined + return support + })() + + // set CSS transition event type + if ( $.support.transition ) { + transitionEnd = "TransitionEnd" + if ( $.browser.webkit ) { + transitionEnd = "webkitTransitionEnd" + } else if ( $.browser.mozilla ) { + transitionEnd = "transitionend" + } else if ( $.browser.opera ) { + transitionEnd = "oTransitionEnd" + } + } + + }) + + + /* MODAL PUBLIC CLASS DEFINITION + * ============================= */ + + var Modal = function ( content, options ) { + this.settings = $.extend({}, $.fn.modal.defaults, options) + this.$element = $(content) + .delegate('.close', 'click.modal', $.proxy(this.hide, this)) + + if ( this.settings.show ) { + this.show() + } + + return this + } + + Modal.prototype = { + + toggle: function () { + return this[!this.isShown ? 'show' : 'hide']() + } + + , show: function () { + var that = this + this.isShown = true + this.$element.trigger('show') + + escape.call(this) + backdrop.call(this, function () { + var transition = $.support.transition && that.$element.hasClass('fade') + + that.$element + .appendTo(document.body) + .show() + + if (transition) { + that.$element[0].offsetWidth // force reflow + } + + that.$element.addClass('in') + + transition ? + that.$element.one(transitionEnd, function () { that.$element.trigger('shown') }) : + that.$element.trigger('shown') + + }) + + return this + } + + , hide: function (e) { + e && e.preventDefault() + + if ( !this.isShown ) { + return this + } + + var that = this + this.isShown = false + + escape.call(this) + + this.$element + .trigger('hide') + .removeClass('in') + + $.support.transition && this.$element.hasClass('fade') ? + hideWithTransition.call(this) : + hideModal.call(this) + + return this + } + + } + + + /* MODAL PRIVATE METHODS + * ===================== */ + + function hideWithTransition() { + // firefox drops transitionEnd events :{o + var that = this + , timeout = setTimeout(function () { + that.$element.unbind(transitionEnd) + hideModal.call(that) + }, 500) + + this.$element.one(transitionEnd, function () { + clearTimeout(timeout) + hideModal.call(that) + }) + } + + function hideModal (that) { + this.$element + .hide() + .trigger('hidden') + + backdrop.call(this) + } + + function backdrop ( callback ) { + var that = this + , animate = this.$element.hasClass('fade') ? 'fade' : '' + if ( this.isShown && this.settings.backdrop ) { + var doAnimate = $.support.transition && animate + + this.$backdrop = $('