Commit cdc467e8 authored by Phil Hughes's avatar Phil Hughes

moved dropdown into new component

update dropdown icon
make clearing the editor more performant
parent d5138d6a
......@@ -151,7 +151,7 @@
background-color: $white-light;
&.shadow {
box-shadow: 0 0 10px rgba(0,0,0,.4);
box-shadow: 0 0 10px $dropdown-shadow-color;
}
.btn {
......
<script>
import Icon from '~/vue_shared/components/icon.vue';
export default {
components: {
Icon,
},
props: {
viewer: {
type: String,
required: true,
},
showShadow: {
type: Boolean,
required: true,
},
},
methods: {
changeMode(mode) {
this.$emit('click', mode);
},
},
};
</script>
<template>
<div
class="dropdown"
:class="{
shadow: showShadow,
}"
>
<button
type="button"
class="btn btn-primary btn-sm"
data-toggle="dropdown"
>
<template v-if="viewer === 'editor'">
{{ __('Editing') }}
</template>
<template v-else>
{{ __('Reviewing') }}
</template>
<icon
name="angle-down"
:size="12"
css-classes="caret-down"
/>
</button>
<div class="dropdown-menu dropdown-menu-selectable dropdown-open-left">
<ul>
<li>
<a
href="#"
@click.prevent="changeMode('editor')"
:class="{
'is-active': viewer === 'editor',
}"
>
<strong class="dropdown-menu-inner-title">{{ __('Editing') }}</strong>
<span class="dropdown-menu-inner-content">
{{ __('View and edit lines') }}
</span>
</a>
</li>
<li>
<a
href="#"
@click.prevent="changeMode('diff')"
:class="{
'is-active': viewer === 'diff',
}"
>
<strong class="dropdown-menu-inner-title">{{ __('Reviewing') }}</strong>
<span class="dropdown-menu-inner-content">
{{ __('Compare changes with the last commit') }}
</span>
</a>
</li>
</ul>
</div>
</div>
</template>
<script>
import { mapActions, mapState } from 'vuex';
import RepoTab from './repo_tab.vue';
import EditorMode from './editor_mode_dropdown.vue';
export default {
components: {
'repo-tab': RepoTab,
RepoTab,
EditorMode,
},
data() {
return {
......@@ -17,16 +19,16 @@
'viewer',
]),
},
methods: {
...mapActions([
'updateViewer',
]),
},
updated() {
if (!this.$refs.tabsScroller) return;
this.showShadow = this.$refs.tabsScroller.scrollWidth > this.$refs.tabsScroller.offsetWidth;
},
methods: {
...mapActions([
'updateViewer',
]),
},
};
</script>
......@@ -42,53 +44,10 @@
:tab="tab"
/>
</ul>
<div
class="dropdown"
:class="{
shadow: showShadow,
}"
>
<button class="btn btn-primary btn-sm" data-toggle="dropdown">
<template v-if="viewer === 'editor'">
Editing
</template>
<template v-else>
Reviewing
</template>
<i class="fa fa-chevron-down"></i>
</button>
<div class="dropdown-menu dropdown-menu-selectable dropdown-open-left">
<ul>
<li>
<a
href="#"
@click.prevent="updateViewer('editor')"
:class="{
'is-active': viewer === 'editor',
}"
>
<strong class="dropdown-menu-inner-title">Editing</strong>
<span class="dropdown-menu-inner-content">
View and edit lines
</span>
</a>
</li>
<li>
<a
href="#"
@click.prevent="updateViewer('diff')"
:class="{
'is-active': viewer === 'diff',
}"
>
<strong class="dropdown-menu-inner-title">Reviewing</strong>
<span class="dropdown-menu-inner-content">
Compare changes with the last commit
</span>
</a>
</li>
</ul>
</div>
</div>
<editor-mode
:viewer="viewer"
:show-shadow="showShadow"
@click="updateViewer"
/>
</div>
</template>
......@@ -7,6 +7,12 @@ import editorOptions from './editor_options';
import gitlabTheme from 'ee/ide/lib/themes/gl_theme'; // eslint-disable-line import/first
const clearDomElement = (el) => {
while (el.firstChild) {
el.removeChild(el.firstChild);
}
};
export default class Editor {
static create(monaco) {
if (this.editorInstance) return this.editorInstance;
......@@ -34,9 +40,7 @@ export default class Editor {
createInstance(domElement) {
if (!this.instance) {
Object.assign(domElement, {
innerHTML: '',
});
clearDomElement(domElement);
this.disposable.add(
this.instance = this.monaco.editor.create(domElement, {
......@@ -59,9 +63,7 @@ export default class Editor {
createDiffInstance(domElement) {
if (!this.instance) {
Object.assign(domElement, {
innerHTML: '',
});
clearDomElement(domElement);
this.disposable.add(
this.instance = this.monaco.editor.createDiffEditor(domElement, {
......
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