Commit db739548 authored by Paul Slaughter's avatar Paul Slaughter Committed by Phil Hughes

Web IDE context header redesign

parent 379083be
...@@ -13,11 +13,8 @@ export default { ...@@ -13,11 +13,8 @@ export default {
tooltip, tooltip,
}, },
computed: { computed: {
...mapGetters(['currentProject', 'hasChanges']), ...mapGetters(['hasChanges']),
...mapState(['currentActivityView']), ...mapState(['currentActivityView']),
goBackUrl() {
return document.referrer || this.currentProject.web_url;
},
}, },
methods: { methods: {
...mapActions(['updateActivityBarView']), ...mapActions(['updateActivityBarView']),
...@@ -36,22 +33,6 @@ export default { ...@@ -36,22 +33,6 @@ export default {
<template> <template>
<nav class="ide-activity-bar"> <nav class="ide-activity-bar">
<ul class="list-unstyled"> <ul class="list-unstyled">
<li v-once>
<a
v-tooltip
:href="goBackUrl"
:title="s__('IDE|Go back')"
:aria-label="s__('IDE|Go back')"
data-container="body"
data-placement="right"
class="ide-sidebar-link"
>
<icon
:size="16"
name="go-back"
/>
</a>
</li>
<li> <li>
<button <button
v-tooltip v-tooltip
......
<script>
import ProjectAvatarDefault from '~/vue_shared/components/project_avatar/default.vue';
export default {
components: {
ProjectAvatarDefault,
},
props: {
project: {
type: Object,
required: true,
},
},
};
</script>
<template>
<div class="context-header ide-context-header">
<a
:href="project.web_url"
:title="s__('IDE|Go to project')"
>
<project-avatar-default
:project="project"
:size="48"
/>
<span class="ide-sidebar-project-title">
<span class="sidebar-context-title">
{{ project.name }}
</span>
<span class="sidebar-context-title text-secondary">
{{ project.path_with_namespace }}
</span>
</span>
</a>
</div>
</template>
<script> <script>
import $ from 'jquery';
import { mapState, mapGetters } from 'vuex'; import { mapState, mapGetters } from 'vuex';
import ProjectAvatarImage from '~/vue_shared/components/project_avatar/image.vue';
import Icon from '~/vue_shared/components/icon.vue';
import tooltip from '~/vue_shared/directives/tooltip';
import PanelResizer from '~/vue_shared/components/panel_resizer.vue';
import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue'; import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
import Identicon from '../../vue_shared/components/identicon.vue';
import IdeTree from './ide_tree.vue'; import IdeTree from './ide_tree.vue';
import ResizablePanel from './resizable_panel.vue'; import ResizablePanel from './resizable_panel.vue';
import ActivityBar from './activity_bar.vue'; import ActivityBar from './activity_bar.vue';
...@@ -14,43 +8,28 @@ import CommitSection from './repo_commit_section.vue'; ...@@ -14,43 +8,28 @@ import CommitSection from './repo_commit_section.vue';
import CommitForm from './commit_sidebar/form.vue'; import CommitForm from './commit_sidebar/form.vue';
import IdeReview from './ide_review.vue'; import IdeReview from './ide_review.vue';
import SuccessMessage from './commit_sidebar/success_message.vue'; import SuccessMessage from './commit_sidebar/success_message.vue';
import MergeRequestDropdown from './merge_requests/dropdown.vue'; import IdeProjectHeader from './ide_project_header.vue';
import { activityBarViews } from '../constants'; import { activityBarViews } from '../constants';
export default { export default {
directives: {
tooltip,
},
components: { components: {
Icon,
PanelResizer,
SkeletonLoadingContainer, SkeletonLoadingContainer,
ResizablePanel, ResizablePanel,
ActivityBar, ActivityBar,
ProjectAvatarImage,
Identicon,
CommitSection, CommitSection,
IdeTree, IdeTree,
CommitForm, CommitForm,
IdeReview, IdeReview,
SuccessMessage, SuccessMessage,
MergeRequestDropdown, IdeProjectHeader,
},
data() {
return {
showTooltip: false,
showMergeRequestsDropdown: false,
};
}, },
computed: { computed: {
...mapState([ ...mapState([
'loading', 'loading',
'currentBranchId',
'currentActivityView', 'currentActivityView',
'changedFiles', 'changedFiles',
'stagedFiles', 'stagedFiles',
'lastCommitMsg', 'lastCommitMsg',
'currentMergeRequestId',
]), ]),
...mapGetters(['currentProject', 'someUncommitedChanges']), ...mapGetters(['currentProject', 'someUncommitedChanges']),
showSuccessMessage() { showSuccessMessage() {
...@@ -59,46 +38,6 @@ export default { ...@@ -59,46 +38,6 @@ export default {
(this.lastCommitMsg && !this.someUncommitedChanges) (this.lastCommitMsg && !this.someUncommitedChanges)
); );
}, },
branchTooltipTitle() {
return this.showTooltip ? this.currentBranchId : undefined;
},
},
watch: {
currentBranchId() {
this.$nextTick(() => {
if (!this.$refs.branchId) return;
this.showTooltip = this.$refs.branchId.scrollWidth > this.$refs.branchId.offsetWidth;
});
},
loading() {
this.$nextTick(() => {
this.addDropdownListeners();
});
},
},
mounted() {
this.addDropdownListeners();
},
beforeDestroy() {
$(this.$refs.mergeRequestDropdown)
.off('show.bs.dropdown')
.off('hide.bs.dropdown');
},
methods: {
addDropdownListeners() {
if (!this.$refs.mergeRequestDropdown) return;
$(this.$refs.mergeRequestDropdown)
.on('show.bs.dropdown', () => {
this.toggleMergeRequestDropdown();
}).on('hide.bs.dropdown', () => {
this.toggleMergeRequestDropdown();
});
},
toggleMergeRequestDropdown() {
this.showMergeRequestsDropdown = !this.showMergeRequestsDropdown;
},
}, },
}; };
</script> </script>
...@@ -108,12 +47,10 @@ export default { ...@@ -108,12 +47,10 @@ export default {
:collapsible="false" :collapsible="false"
:initial-width="340" :initial-width="340"
side="left" side="left"
class="flex-column"
> >
<activity-bar
v-if="!loading"
/>
<div class="multi-file-commit-panel-inner">
<template v-if="loading"> <template v-if="loading">
<div class="multi-file-commit-panel-inner">
<div <div
v-for="n in 3" v-for="n in 3"
:key="n" :key="n"
...@@ -121,81 +58,23 @@ export default { ...@@ -121,81 +58,23 @@ export default {
> >
<skeleton-loading-container /> <skeleton-loading-container />
</div> </div>
</div>
</template> </template>
<template v-else> <template v-else>
<div <ide-project-header
ref="mergeRequestDropdown" :project="currentProject"
class="context-header ide-context-header dropdown"
>
<button
type="button"
data-toggle="dropdown"
>
<div
v-if="currentProject.avatar_url"
class="avatar-container s40 project-avatar"
>
<project-avatar-image
:link-href="currentProject.path"
:img-src="currentProject.avatar_url"
:img-alt="currentProject.name"
:img-size="40"
class="avatar-container project-avatar"
/>
</div>
<identicon
v-else
:entity-id="currentProject.id"
:entity-name="currentProject.name"
size-class="s40"
/>
<div class="ide-sidebar-project-title">
<div class="sidebar-context-title">
{{ currentProject.name }}
</div>
<div class="d-flex">
<div
v-tooltip
v-if="currentBranchId"
ref="branchId"
:title="branchTooltipTitle"
class="sidebar-context-title ide-sidebar-branch-title"
>
<icon
name="branch"
css-classes="append-right-5"
/>{{ currentBranchId }}
</div>
<div
v-if="currentMergeRequestId"
:class="{
'prepend-left-8': currentBranchId
}"
class="sidebar-context-title ide-sidebar-branch-title"
>
<icon
name="git-merge"
css-classes="append-right-5"
/>!{{ currentMergeRequestId }}
</div>
</div>
</div>
<icon
class="ml-auto"
name="chevron-down"
/>
</button>
<merge-request-dropdown
:show="showMergeRequestsDropdown"
/> />
</div> <div class="ide-context-body d-flex flex-fill">
<div class="multi-file-commit-panel-inner-scroll"> <activity-bar />
<div class="multi-file-commit-panel-inner">
<div class="multi-file-commit-panel-inner-content">
<component <component
:is="currentActivityView" :is="currentActivityView"
/> />
</div> </div>
<commit-form /> <commit-form />
</template>
</div> </div>
</div>
</template>
</resizable-panel> </resizable-panel>
</template> </template>
...@@ -35,7 +35,6 @@ export default { ...@@ -35,7 +35,6 @@ export default {
<template> <template>
<ide-tree-list <ide-tree-list
header-class="d-flex w-100"
viewer-type="editor" viewer-type="editor"
> >
<template <template
......
...@@ -59,12 +59,16 @@ export default { ...@@ -59,12 +59,16 @@ export default {
> >
<slot name="header"></slot> <slot name="header"></slot>
</header> </header>
<div
class="ide-tree-body"
>
<repo-file <repo-file
v-for="file in currentTree.tree" v-for="file in currentTree.tree"
:key="file.key" :key="file.key"
:file="file" :file="file"
:level="0" :level="0"
/> />
</div>
</template> </template>
</div> </div>
</template> </template>
<script>
import Identicon from '../identicon.vue';
import ProjectAvatarImage from './image.vue';
export default {
components: {
Identicon,
ProjectAvatarImage,
},
props: {
project: {
type: Object,
required: true,
},
size: {
type: Number,
default: 40,
},
},
computed: {
sizeClass() {
return `s${this.size}`;
},
},
};
</script>
<template>
<span
:class="sizeClass"
class="avatar-container project-avatar"
>
<project-avatar-image
v-if="project.avatar_url"
:link-href="project.path"
:img-src="project.avatar_url"
:img-alt="project.name"
:img-size="size"
/>
<identicon
v-else
:entity-id="project.id"
:entity-name="project.name"
:size-class="sizeClass"
/>
</span>
</template>
...@@ -78,6 +78,7 @@ ...@@ -78,6 +78,7 @@
&.s26 { font-size: 20px; line-height: 1.33; } &.s26 { font-size: 20px; line-height: 1.33; }
&.s32 { font-size: 20px; line-height: 30px; } &.s32 { font-size: 20px; line-height: 30px; }
&.s40 { font-size: 16px; line-height: 38px; } &.s40 { font-size: 16px; line-height: 38px; }
&.s48 { font-size: 20px; line-height: 46px; }
&.s60 { font-size: 32px; line-height: 58px; } &.s60 { font-size: 32px; line-height: 58px; }
&.s70 { font-size: 34px; line-height: 70px; } &.s70 { font-size: 34px; line-height: 70px; }
&.s90 { font-size: 36px; line-height: 88px; } &.s90 { font-size: 36px; line-height: 88px; }
......
...@@ -55,6 +55,11 @@ ...@@ -55,6 +55,11 @@
.sidebar-context-title { .sidebar-context-title {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
&.text-secondary {
font-weight: normal;
font-size: 0.8em;
}
} }
} }
......
@import 'framework/variables'; @import 'framework/variables';
@import 'framework/mixins'; @import 'framework/mixins';
$ide-activity-bar-width: 60px;
$ide-context-header-padding: 10px;
$ide-project-avatar-end: $ide-context-header-padding + 48px;
$ide-tree-padding: $gl-padding;
$ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
.project-refs-form, .project-refs-form,
.project-refs-target-form { .project-refs-target-form {
display: inline-block; display: inline-block;
...@@ -24,7 +30,6 @@ ...@@ -24,7 +30,6 @@
display: flex; display: flex;
height: calc(100vh - #{$header-height}); height: calc(100vh - #{$header-height});
margin-top: 0; margin-top: 0;
border-top: 1px solid $white-dark;
padding-bottom: $ide-statusbar-height; padding-bottom: $ide-statusbar-height;
color: $gl-text-color; color: $gl-text-color;
...@@ -41,10 +46,10 @@ ...@@ -41,10 +46,10 @@
} }
.ide-file-list { .ide-file-list {
display: flex;
flex-direction: column;
flex: 1; flex: 1;
padding-left: $gl-padding; overflow: hidden;
padding-right: $gl-padding;
padding-bottom: $grid-size;
.file { .file {
height: 32px; height: 32px;
...@@ -517,15 +522,10 @@ ...@@ -517,15 +522,10 @@
> a, > a,
> button { > button {
height: 60px; text-decoration: none;
} padding-top: $gl-padding-8;
padding-bottom: $gl-padding-8;
} }
.projects-sidebar {
min-height: 0;
display: flex;
flex-direction: column;
flex: 1;
} }
.multi-file-commit-panel-inner { .multi-file-commit-panel-inner {
...@@ -537,11 +537,11 @@ ...@@ -537,11 +537,11 @@
width: 100%; width: 100%;
} }
.multi-file-commit-panel-inner-scroll { .multi-file-commit-panel-inner-content {
display: flex; display: flex;
flex: 1; flex: 1;
flex-direction: column; flex-direction: column;
overflow: auto; overflow: hidden;
background-color: $white-light; background-color: $white-light;
border-left: 1px solid $white-dark; border-left: 1px solid $white-dark;
border-top: 1px solid $white-dark; border-top: 1px solid $white-dark;
...@@ -803,12 +803,6 @@ ...@@ -803,12 +803,6 @@
height: calc(100vh - #{$header-height + $flash-height}); height: calc(100vh - #{$header-height + $flash-height});
} }
} }
.projects-sidebar {
.multi-file-commit-panel-inner-scroll {
flex: 1;
}
}
} }
} }
...@@ -964,7 +958,7 @@ ...@@ -964,7 +958,7 @@
.ide-activity-bar { .ide-activity-bar {
position: relative; position: relative;
flex: 0 0 60px; flex: 0 0 $ide-activity-bar-width;
z-index: 1; z-index: 1;
} }
...@@ -1060,10 +1054,12 @@ ...@@ -1060,10 +1054,12 @@
} }
.ide-tree-header { .ide-tree-header {
flex: 0 0 auto;
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 8px;
padding: 12px 0; padding: 12px 0;
margin-left: $ide-tree-padding;
margin-right: $ide-tree-padding;
border-bottom: 1px solid $white-dark; border-bottom: 1px solid $white-dark;
.ide-new-btn { .ide-new-btn {
...@@ -1075,6 +1071,12 @@ ...@@ -1075,6 +1071,12 @@
} }
} }
.ide-tree-body {
overflow: auto;
padding-left: $ide-tree-padding;
padding-right: $ide-tree-padding;
}
.ide-sidebar-branch-title { .ide-sidebar-branch-title {
font-weight: $gl-font-weight-normal; font-weight: $gl-font-weight-normal;
...@@ -1163,14 +1165,23 @@ ...@@ -1163,14 +1165,23 @@
} }
.ide-context-header { .ide-context-header {
.avatar {
flex: 0 0 38px;
}
.ide-merge-requests-dropdown.dropdown-menu { .ide-merge-requests-dropdown.dropdown-menu {
width: 385px; width: 385px;
max-height: initial; max-height: initial;
} }
.avatar-container {
flex: initial;
margin-right: 0;
}
.ide-sidebar-project-title {
margin-left: $ide-tree-text-start - $ide-project-avatar-end;
}
}
.ide-context-body {
overflow: hidden;
} }
.ide-sidebar-project-title { .ide-sidebar-project-title {
...@@ -1178,10 +1189,11 @@ ...@@ -1178,10 +1189,11 @@
.sidebar-context-title { .sidebar-context-title {
white-space: nowrap; white-space: nowrap;
} display: block;
.ide-sidebar-branch-title { &.text-secondary {
min-width: 50px; font-weight: normal;
}
} }
} }
......
---
title: Redesign Web IDE back button and context header
merge_request: 20850
author:
type: changed
...@@ -2911,7 +2911,7 @@ msgstr "" ...@@ -2911,7 +2911,7 @@ msgstr ""
msgid "IDE|Edit" msgid "IDE|Edit"
msgstr "" msgstr ""
msgid "IDE|Go back" msgid "IDE|Go to project"
msgstr "" msgstr ""
msgid "IDE|Open in file view" msgid "IDE|Open in file view"
......
...@@ -24,26 +24,6 @@ describe('IDE activity bar', () => { ...@@ -24,26 +24,6 @@ describe('IDE activity bar', () => {
resetStore(vm.$store); resetStore(vm.$store);
}); });
describe('goBackUrl', () => {
it('renders the Go Back link with the referrer when present', () => {
const fakeReferrer = '/example/README.md';
spyOnProperty(document, 'referrer').and.returnValue(fakeReferrer);
vm.$mount();
expect(vm.goBackUrl).toEqual(fakeReferrer);
});
it('renders the Go Back link with the project url when referrer is not present', () => {
const fakeReferrer = '';
spyOnProperty(document, 'referrer').and.returnValue(fakeReferrer);
vm.$mount();
expect(vm.goBackUrl).toEqual('testing');
});
});
describe('updateActivityBarView', () => { describe('updateActivityBarView', () => {
beforeEach(() => { beforeEach(() => {
spyOn(vm, 'updateActivityBarView'); spyOn(vm, 'updateActivityBarView');
......
import Vue from 'vue';
import ProjectAvatarDefault from '~/vue_shared/components/project_avatar/default.vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
import { projectData } from 'spec/ide/mock_data';
import { getFirstCharacterCapitalized } from '~/lib/utils/text_utility';
import { TEST_HOST } from 'spec/test_constants';
describe('ProjectAvatarDefault component', () => {
const Component = Vue.extend(ProjectAvatarDefault);
let vm;
beforeEach(() => {
vm = mountComponent(Component, {
project: projectData,
});
});
afterEach(() => {
vm.$destroy();
});
it('renders identicon if project has no avatar_url', done => {
const expectedText = getFirstCharacterCapitalized(projectData.name);
vm.project = {
...vm.project,
avatar_url: null,
};
vm.$nextTick()
.then(() => {
const identiconEl = vm.$el.querySelector('.identicon');
expect(identiconEl).not.toBe(null);
expect(identiconEl.textContent.trim()).toEqual(expectedText);
})
.then(done)
.catch(done.fail);
});
it('renders avatar image if project has avatar_url', done => {
const avatarUrl = `${TEST_HOST}/images/home/nasa.svg`;
vm.project = {
...vm.project,
avatar_url: avatarUrl,
};
vm.$nextTick()
.then(() => {
expect(vm.$el).toContainElement('.avatar');
expect(vm.$el).not.toContainElement('.identicon');
expect(vm.$el.querySelector('img')).toHaveAttr('src', avatarUrl);
})
.then(done)
.catch(done.fail);
});
});
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