Commit b9f1dec3 authored by Filipa Lacerda's avatar Filipa Lacerda

Merge branch 'web-ide-commit-header-icon-alignment-fix' into 'master'

Fixes alignment of changed icon in Web IDE

Closes #57649

See merge request gitlab-org/gitlab-ce!25202
parents e842df60 9a642f7a
...@@ -44,7 +44,7 @@ export default { ...@@ -44,7 +44,7 @@ export default {
<div class="d-flex ide-commit-editor-header align-items-center"> <div class="d-flex ide-commit-editor-header align-items-center">
<file-icon :file-name="activeFile.name" :size="16" class="mr-2" /> <file-icon :file-name="activeFile.name" :size="16" class="mr-2" />
<strong class="mr-2"> {{ activeFile.path }} </strong> <strong class="mr-2"> {{ activeFile.path }} </strong>
<changed-file-icon :file="activeFile" class="ml-0" /> <changed-file-icon :file="activeFile" :is-centered="false" />
<div class="ml-auto"> <div class="ml-auto">
<button <button
v-if="!isStaged" v-if="!isStaged"
......
...@@ -37,6 +37,11 @@ export default { ...@@ -37,6 +37,11 @@ export default {
required: false, required: false,
default: 12, default: 12,
}, },
isCentered: {
type: Boolean,
required: false,
default: true,
},
}, },
computed: { computed: {
changedIcon() { changedIcon() {
...@@ -78,7 +83,12 @@ export default { ...@@ -78,7 +83,12 @@ export default {
</script> </script>
<template> <template>
<span v-gl-tooltip.right :title="tooltipTitle" class="file-changed-icon ml-auto"> <span
v-gl-tooltip.right
:title="tooltipTitle"
:class="{ 'ml-auto': isCentered }"
class="file-changed-icon"
>
<icon v-if="showIcon" :name="changedIcon" :size="size" :css-classes="changedIconClass" /> <icon v-if="showIcon" :name="changedIcon" :size="size" :css-classes="changedIconClass" />
</span> </span>
</template> </template>
......
---
title: Fixed alignment of changed icon in Web IDE
merge_request:
author:
type: fixed
...@@ -5,27 +5,40 @@ import createComponent from 'spec/helpers/vue_mount_component_helper'; ...@@ -5,27 +5,40 @@ import createComponent from 'spec/helpers/vue_mount_component_helper';
describe('Changed file icon', () => { describe('Changed file icon', () => {
let vm; let vm;
beforeEach(() => { function factory(props = {}) {
const component = Vue.extend(changedFileIcon); const component = Vue.extend(changedFileIcon);
vm = createComponent(component, { vm = createComponent(component, {
...props,
file: { file: {
tempFile: false, tempFile: false,
changed: true, changed: true,
}, },
}); });
}); }
afterEach(() => { afterEach(() => {
vm.$destroy(); vm.$destroy();
}); });
it('centers icon', () => {
factory({
isCentered: true,
});
expect(vm.$el.classList).toContain('ml-auto');
});
describe('changedIcon', () => { describe('changedIcon', () => {
it('equals file-modified when not a temp file and has changes', () => { it('equals file-modified when not a temp file and has changes', () => {
factory();
expect(vm.changedIcon).toBe('file-modified'); expect(vm.changedIcon).toBe('file-modified');
}); });
it('equals file-addition when a temp file', () => { it('equals file-addition when a temp file', () => {
factory();
vm.file.tempFile = true; vm.file.tempFile = true;
expect(vm.changedIcon).toBe('file-addition'); expect(vm.changedIcon).toBe('file-addition');
...@@ -34,10 +47,14 @@ describe('Changed file icon', () => { ...@@ -34,10 +47,14 @@ describe('Changed file icon', () => {
describe('changedIconClass', () => { describe('changedIconClass', () => {
it('includes file-modified when not a temp file', () => { it('includes file-modified when not a temp file', () => {
factory();
expect(vm.changedIconClass).toContain('file-modified'); expect(vm.changedIconClass).toContain('file-modified');
}); });
it('includes file-addition when a temp file', () => { it('includes file-addition when a temp file', () => {
factory();
vm.file.tempFile = true; vm.file.tempFile = true;
expect(vm.changedIconClass).toContain('file-addition'); expect(vm.changedIconClass).toContain('file-addition');
......
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