Commit 4afd7237 authored by Tim Zallmann's avatar Tim Zallmann

Added Changes based on UX Review

parent d9b7c33f
...@@ -13,8 +13,7 @@ export default { ...@@ -13,8 +13,7 @@ export default {
}, },
computed: { computed: {
changedIcon() { changedIcon() {
if (this.file.tempFile) return 'file-addition'; return this.file.tempFile ? 'file-addition' : 'file-modified';
return this.file.changed ? 'file-modified' : 'git-merge';
}, },
changedIconClass() { changedIconClass() {
return `multi-${this.changedIcon}`; return `multi-${this.changedIcon}`;
......
<script> <script>
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import { __, sprintf } from '~/locale';
export default { export default {
components: { components: {
...@@ -11,10 +12,10 @@ export default { ...@@ -11,10 +12,10 @@ export default {
required: false, required: false,
default: false, default: false,
}, },
hasMergeRequest: { mergeRequestId: {
type: Boolean, type: String,
required: false, required: false,
default: false, default: '',
}, },
viewer: { viewer: {
type: String, type: String,
...@@ -48,8 +49,8 @@ export default { ...@@ -48,8 +49,8 @@ export default {
}" }"
data-toggle="dropdown" data-toggle="dropdown"
> >
<template v-if="viewer === 'mrdiff'"> <template v-if="viewer === 'mrdiff' && mergeRequestId">
{{ __('Reviewing (merge request)') }} {{ sprintf(__('Reviewing (merge request !%{mergeRequestId})'), { mergeRequestId }) }}
</template> </template>
<template v-else-if="viewer === 'editor'"> <template v-else-if="viewer === 'editor'">
{{ __('Editing') }} {{ __('Editing') }}
...@@ -65,26 +66,27 @@ export default { ...@@ -65,26 +66,27 @@ export default {
</button> </button>
<div class="dropdown-menu dropdown-menu-selectable dropdown-open-left"> <div class="dropdown-menu dropdown-menu-selectable dropdown-open-left">
<ul> <ul>
<li v-if="hasMergeRequest"> <template v-if="mergeRequestId">
<a <li>
href="#" <a
@click.prevent="changeMode('mrdiff')" href="#"
:class="{ @click.prevent="changeMode('mrdiff')"
'is-active': viewer === 'mrdiff', :class="{
}" 'is-active': viewer === 'mrdiff',
}"
>
<strong class="dropdown-menu-inner-title">{{ sprintf(__('Reviewing (merge request !%{mergeRequestId})'), { mergeRequestId }) }}</strong>
<span class="dropdown-menu-inner-content">
{{ __('Compare changes with the merge request target branch') }}
</span>
</a>
</li>
<li
role="separator"
class="divider"
> >
<strong class="dropdown-menu-inner-title">{{ __('Reviewing (merge request)') }}</strong> </li>
<span class="dropdown-menu-inner-content"> </template>
{{ __('Compare changes of the merge request') }}
</span>
</a>
</li>
<li
v-if="hasMergeRequest"
role="separator"
class="divider"
>
</li>
<li> <li>
<a <a
href="#" href="#"
......
...@@ -6,6 +6,7 @@ import repoTabs from './repo_tabs.vue'; ...@@ -6,6 +6,7 @@ import repoTabs from './repo_tabs.vue';
import repoFileButtons from './repo_file_buttons.vue'; import repoFileButtons from './repo_file_buttons.vue';
import ideStatusBar from './ide_status_bar.vue'; import ideStatusBar from './ide_status_bar.vue';
import repoEditor from './repo_editor.vue'; import repoEditor from './repo_editor.vue';
import { currentMergeRequest } from '../stores/getters';
export default { export default {
components: { components: {
...@@ -31,8 +32,8 @@ export default { ...@@ -31,8 +32,8 @@ export default {
}, },
}, },
computed: { computed: {
...mapState(['changedFiles', 'openFiles', 'viewer']), ...mapState(['changedFiles', 'openFiles', 'viewer', 'currentMergeRequestId']),
...mapGetters(['activeFile', 'hasChanges', 'hasMergeRequest']), ...mapGetters(['activeFile', 'hasChanges', 'currentMergeRequest']),
}, },
mounted() { mounted() {
const returnValue = 'Are you sure you want to lose unsaved changes?'; const returnValue = 'Are you sure you want to lose unsaved changes?';
...@@ -63,7 +64,7 @@ export default { ...@@ -63,7 +64,7 @@ export default {
:files="openFiles" :files="openFiles"
:viewer="viewer" :viewer="viewer"
:has-changes="hasChanges" :has-changes="hasChanges"
:has-merge-request="hasMergeRequest" :merge-request-id="currentMergeRequestId"
/> />
<repo-editor <repo-editor
class="multi-file-edit-pane-content" class="multi-file-edit-pane-content"
......
<script>
import icon from '~/vue_shared/components/icon.vue';
import tooltip from '../../vue_shared/directives/tooltip';
export default {
components: {
icon,
},
directives: {
tooltip,
},
props: {
file: {
type: Object,
required: true,
},
},
};
</script>
<template>
<icon
name="git-merge"
v-tooltip
title="Part of merge request changes"
css-classes="ide-file-changed-icon"
:size="12"
/>
</template>
...@@ -6,6 +6,7 @@ import router from '../ide_router'; ...@@ -6,6 +6,7 @@ import router from '../ide_router';
import newDropdown from './new_dropdown/index.vue'; import newDropdown from './new_dropdown/index.vue';
import fileStatusIcon from './repo_file_status_icon.vue'; import fileStatusIcon from './repo_file_status_icon.vue';
import changedFileIcon from './changed_file_icon.vue'; import changedFileIcon from './changed_file_icon.vue';
import mrFileIcon from './mr_file_icon.vue';
export default { export default {
name: 'RepoFile', name: 'RepoFile',
...@@ -15,6 +16,7 @@ export default { ...@@ -15,6 +16,7 @@ export default {
fileStatusIcon, fileStatusIcon,
fileIcon, fileIcon,
changedFileIcon, changedFileIcon,
mrFileIcon,
}, },
props: { props: {
file: { file: {
...@@ -99,11 +101,16 @@ export default { ...@@ -99,11 +101,16 @@ export default {
:file="file" :file="file"
/> />
</span> </span>
<changed-file-icon <span class="pull-right">
:file="file" <mr-file-icon
v-if="file.changed || file.tempFile || file.mrChange" :file="file"
class="prepend-top-5 pull-right" v-if="file.mrChange"
/> />
<changed-file-icon
:file="file"
v-if="file.changed || file.tempFile"
/>
</span>
<new-dropdown <new-dropdown
v-if="isTree" v-if="isTree"
:project-id="file.projectId" :project-id="file.projectId"
......
<script> <script>
import icon from '~/vue_shared/components/icon.vue'; import icon from '~/vue_shared/components/icon.vue';
import tooltip from '~/vue_shared/directives/tooltip'; import tooltip from '~/vue_shared/directives/tooltip';
import '~/lib/utils/datetime_utility'; import '~/lib/utils/datetime_utility';
export default { export default {
components: { components: {
icon, icon,
},
directives: {
tooltip,
},
props: {
file: {
type: Object,
required: true,
}, },
directives: { },
tooltip, computed: {
lockTooltip() {
return `Locked by ${this.file.file_lock.user.name}`;
}, },
props: { },
file: { };
type: Object,
required: true,
},
},
computed: {
lockTooltip() {
return `Locked by ${this.file.file_lock.user.name}`;
},
},
};
</script> </script>
<template> <template>
......
...@@ -21,10 +21,10 @@ export default { ...@@ -21,10 +21,10 @@ export default {
type: Boolean, type: Boolean,
required: true, required: true,
}, },
hasMergeRequest: { mergeRequestId: {
type: Boolean, type: String,
required: true, required: false,
default: false, default: '',
}, },
}, },
data() { data() {
...@@ -59,7 +59,7 @@ export default { ...@@ -59,7 +59,7 @@ export default {
:viewer="viewer" :viewer="viewer"
:show-shadow="showShadow" :show-shadow="showShadow"
:has-changes="hasChanges" :has-changes="hasChanges"
:has-merge-request="hasMergeRequest" :merge-request-id="mergeRequestId"
@click="updateViewer" @click="updateViewer"
/> />
</div> </div>
......
...@@ -105,7 +105,7 @@ export default { ...@@ -105,7 +105,7 @@ export default {
class="btn btn-sm btn-default inline js-web-ide" class="btn btn-sm btn-default inline js-web-ide"
type="button" type="button"
> >
{{ s__("mrWidget|Open in Web IDE") }} {{ s__("mrWidget|Web IDE") }}
</a> </a>
<button <button
data-target="#modal_merge_info" data-target="#modal_merge_info"
......
...@@ -50,6 +50,7 @@ ...@@ -50,6 +50,7 @@
flex: 1; flex: 1;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: inherit;
svg { svg {
vertical-align: middle; vertical-align: middle;
...@@ -720,9 +721,7 @@ ...@@ -720,9 +721,7 @@
} }
.ide-view { .ide-view {
height: calc( height: calc(100vh - #{$header-height + $performance-bar-height + $flash-height});
100vh - #{$header-height + $performance-bar-height + $flash-height}
);
} }
} }
} }
......
...@@ -144,7 +144,7 @@ describe('MRWidgetHeader', () => { ...@@ -144,7 +144,7 @@ describe('MRWidgetHeader', () => {
it('renders web ide button', () => { it('renders web ide button', () => {
const button = vm.$el.querySelector('.js-web-ide'); const button = vm.$el.querySelector('.js-web-ide');
expect(button.textContent.trim()).toEqual('Open in Web IDE'); expect(button.textContent.trim()).toEqual('Web IDE');
expect(button.getAttribute('href')).toEqual('undefined/-/ide/projectabc'); expect(button.getAttribute('href')).toEqual('undefined/-/ide/projectabc');
}); });
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment