diff options
| author | Sam Bigelow <sbigelow@gitlab.com> | 2019-03-29 00:37:06 +0300 |
|---|---|---|
| committer | Sam Bigelow <sbigelow@gitlab.com> | 2019-04-05 21:57:01 +0300 |
| commit | bf47270e9072fccc1bc9575b4d70b9d5c8ac021f (patch) | |
| tree | 4379be730ea34a581437acf70f096a9c9fe7d544 /app/assets/javascripts/lib/utils/common_utils.js | |
| parent | 361c7ca69787e75b3ad2c776245452bd49e4a13c (diff) | |
Improve diff navigation header
- Compare versions header is full width except in the unified diff mode
with no tree sidebar
- Bar is always full width, but the content within stays centered when
unified and no tree sidebar
- File header is the same height as the "Compare versions header"
- aligns with the design system grid guidelines => 56px
- Diff file headers use a button group, switch icon order to open file
externally being the last option, all buttons will become icon buttons
(icon delivery by @dimitrieh)
- If a file header becomes sticky no rounded corner/double border
problem is visible anymore
Diffstat (limited to 'app/assets/javascripts/lib/utils/common_utils.js')
| -rw-r--r-- | app/assets/javascripts/lib/utils/common_utils.js | 9 |
1 files changed, 4 insertions, 5 deletions
diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js index 59930f8d4a3..2906604da57 100644 --- a/app/assets/javascripts/lib/utils/common_utils.js +++ b/app/assets/javascripts/lib/utils/common_utils.js @@ -7,7 +7,7 @@ import axios from './axios_utils'; import { getLocationHash } from './url_utility'; import { convertToCamelCase } from './text_utility'; import { isObject } from './type_utility'; -import BreakpointInstance from '../../breakpoints'; +import breakpointInstance from '../../breakpoints'; export const getPagePath = (index = 0) => { const page = $('body').attr('data-page') || ''; @@ -198,11 +198,10 @@ export const contentTop = () => { const mrTabsHeight = $('.merge-request-tabs').outerHeight() || 0; const headerHeight = $('.navbar-gitlab').outerHeight() || 0; const diffFilesChanged = $('.js-diff-files-changed').outerHeight() || 0; - const mdScreenOrBigger = ['lg', 'md'].includes(BreakpointInstance.getBreakpointSize()); + const isDesktop = breakpointInstance.isDesktop(); const diffFileTitleBar = - (mdScreenOrBigger && $('.diff-file .file-title-flex-parent:visible').outerHeight()) || 0; - const compareVersionsHeaderHeight = - (mdScreenOrBigger && $('.mr-version-controls').outerHeight()) || 0; + (isDesktop && $('.diff-file .file-title-flex-parent:visible').outerHeight()) || 0; + const compareVersionsHeaderHeight = (isDesktop && $('.mr-version-controls').outerHeight()) || 0; return ( perfBar + |