diff options
-rw-r--r-- | app/assets/javascripts/flash.js | 3 | ||||
-rw-r--r-- | app/assets/javascripts/ide/components/repo_commit_section.vue | 5 | ||||
-rw-r--r-- | app/assets/javascripts/ide/stores/actions.js | 6 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/repo.scss | 36 | ||||
-rw-r--r-- | app/views/ide/index.html.haml | 3 | ||||
-rw-r--r-- | app/views/layouts/nav_only.html.haml | 5 |
6 files changed, 46 insertions, 12 deletions
diff --git a/app/assets/javascripts/flash.js b/app/assets/javascripts/flash.js index 44deab9288e..c48d5ee9f3d 100644 --- a/app/assets/javascripts/flash.js +++ b/app/assets/javascripts/flash.js @@ -10,6 +10,7 @@ const hideFlash = (flashEl, fadeTransition = true) => { flashEl.addEventListener('transitionend', () => { flashEl.remove(); + document.body.classList.remove('flash-shown'); }, { once: true, passive: true, @@ -86,6 +87,8 @@ const createFlash = function createFlash( flashContainer.style.display = 'block'; + document.body.classList.add('flash-shown'); + return flashContainer; }; diff --git a/app/assets/javascripts/ide/components/repo_commit_section.vue b/app/assets/javascripts/ide/components/repo_commit_section.vue index 5279417a72a..60661018b23 100644 --- a/app/assets/javascripts/ide/components/repo_commit_section.vue +++ b/app/assets/javascripts/ide/components/repo_commit_section.vue @@ -34,6 +34,9 @@ export default { commitButtonDisabled() { return this.commitMessage === '' || this.submitCommitsLoading || !this.changedFiles.length; }, + disabledBtnClass() { + return `btn btn-default btn-sm append-right-10 prepend-left-10 ${this.submitCommitsLoading ? ' disabled':''}`; + }, commitMessageCount() { return this.commitMessage.length; }, @@ -152,7 +155,7 @@ you started editing. Would you like to create a new branch?`)" <button type="submit" :disabled="commitButtonDisabled" - class="btn btn-default btn-sm append-right-10 prepend-left-10" + :class="disabledBtnClass" > <i v-if="submitCommitsLoading" diff --git a/app/assets/javascripts/ide/stores/actions.js b/app/assets/javascripts/ide/stores/actions.js index 335882bb6d7..e28b202fb91 100644 --- a/app/assets/javascripts/ide/stores/actions.js +++ b/app/assets/javascripts/ide/stores/actions.js @@ -111,6 +111,7 @@ export const commitChanges = ( } additions, ${data.stats.deletions} deletions.`, 'notice', ); + window.dispatchEvent(new Event('resize')); if (newMr) { dispatch( @@ -139,7 +140,10 @@ export const commitChanges = ( window.scrollTo(0, 0); } }) - .catch(() => flash('Error committing changes. Please try again.')); + .catch(() => { + flash('Error committing changes. Please try again.'); + window.dispatchEvent(new Event('resize')); + }); export const createTempEntry = ( { state, dispatch }, diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss index acbd9936706..6b88394b1c4 100644 --- a/app/assets/stylesheets/pages/repo.scss +++ b/app/assets/stylesheets/pages/repo.scss @@ -496,19 +496,43 @@ table.table tr td.multi-file-table-name { } } -.ide-flash-container.flash-container { - margin-top: $header-height; - margin-bottom: 0; +.ide.nav-only { + .flash-container { + margin-top: $header-height; + margin-bottom: 0; + } + + .alert-wrapper .flash-container .flash-alert:last-child { + margin-bottom: 0; + } + + .content { + margin-top: $header-height; + } } -.with-performance-bar { - .ide-flash-container.flash-container { - margin-top: $header-height + $performance-bar-height; +.with-performance-bar .ide.nav-only { + .flash-container { + margin-top: #{$header-height + $performance-bar-height}; + } + + .content { + margin-top: #{$header-height + $performance-bar-height}; } .ide-view { height: calc(100vh - #{$header-height + $performance-bar-height}); } + + &.flash-shown { + .content { + margin-top: 0; + } + + .ide-view { + height: calc(100vh - #{$header-height + $performance-bar-height + 52}); + } + } } diff --git a/app/views/ide/index.html.haml b/app/views/ide/index.html.haml index cb413f197de..2acd94f8cb3 100644 --- a/app/views/ide/index.html.haml +++ b/app/views/ide/index.html.haml @@ -1,11 +1,10 @@ +- @body_class = 'ide' - page_title 'IDE' - content_for :page_specific_javascripts do = webpack_bundle_tag 'common_vue' = webpack_bundle_tag 'ide' -.ide-flash-container.flash-container - #ide.ide-loading{ data: {"empty-state-svg-path" => image_path('illustrations/multi_file_editor_empty.svg')} } .text-center = icon('spinner spin 2x') diff --git a/app/views/layouts/nav_only.html.haml b/app/views/layouts/nav_only.html.haml index 6fa4b39dc10..0811211f7b2 100644 --- a/app/views/layouts/nav_only.html.haml +++ b/app/views/layouts/nav_only.html.haml @@ -1,7 +1,7 @@ !!! 5 %html{ lang: I18n.locale, class: page_class } = render "layouts/head" - %body{ class: "#{user_application_theme} #{@body_class}", data: { page: body_data_page } } + %body{ class: "#{user_application_theme} #{@body_class} nav-only", data: { page: body_data_page } } = render 'peek/bar' = render "layouts/header/default" = render 'shared/outdated_browser' @@ -10,4 +10,5 @@ = render "layouts/broadcast" = yield :flash_message = render "layouts/flash" - = yield + .content{ id: "content-body" } + = yield |