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 {
<div class="d-flex ide-commit-editor-header align-items-center">
<file-icon :file-name="activeFile.name" :size="16" class="mr-2" />
<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">
<button
v-if="!isStaged"
......
......@@ -37,6 +37,11 @@ export default {
required: false,
default: 12,
},
isCentered: {
type: Boolean,
required: false,
default: true,
},
},
computed: {
changedIcon() {
......@@ -78,7 +83,12 @@ export default {
</script>
<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" />
</span>
</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';
describe('Changed file icon', () => {
let vm;
beforeEach(() => {
function factory(props = {}) {
const component = Vue.extend(changedFileIcon);
vm = createComponent(component, {
...props,
file: {
tempFile: false,
changed: true,
},
});
});
}
afterEach(() => {
vm.$destroy();
});
it('centers icon', () => {
factory({
isCentered: true,
});
expect(vm.$el.classList).toContain('ml-auto');
});
describe('changedIcon', () => {
it('equals file-modified when not a temp file and has changes', () => {
factory();
expect(vm.changedIcon).toBe('file-modified');
});
it('equals file-addition when a temp file', () => {
factory();
vm.file.tempFile = true;
expect(vm.changedIcon).toBe('file-addition');
......@@ -34,10 +47,14 @@ describe('Changed file icon', () => {
describe('changedIconClass', () => {
it('includes file-modified when not a temp file', () => {
factory();
expect(vm.changedIconClass).toContain('file-modified');
});
it('includes file-addition when a temp file', () => {
factory();
vm.file.tempFile = true;
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