Skip to content

G
gitlab-ce
Commit 8de5cea0 authored by Phil Hughes's avatar Phil Hughes
Browse files
Options

moved CSS out of the components 

hooked up commit section to activity bar
fixed commit section SVGs not loading
added the different theme defintions to the activity bar
parent bdc437fc
Hide whitespace changes
Inline Side-by-side
Showing with 111 additions and 107 deletions
app/assets/javascripts/ide/components/activity_bar.vue
View file @ 8de5cea0
......@@ -30,80 +30,33 @@ export default {
/>
</li>
<li>
<a
href="#"
class="ide-sidebar-link ide-activity-bar-link"
<button
type="button"
class="ide-sidebar-link js-ide-edit-mode"
:class="{
active: currentActivityView === $options.ActivityBarViews.edit
}"
@click.prevent="updateActivityBarView($options.ActivityBarViews.edit)"
>
<icon
:size="16"
name="code"
/>
</a>
</button>
</li>
<li>
<a
href="#"
class="ide-sidebar-link ide-activity-bar-link"
<button
type="button"
class="ide-sidebar-link js-ide-commit-mode"
:class="{
active: currentActivityView === $options.ActivityBarViews.commit
}"
@click.prevent="updateActivityBarView($options.ActivityBarViews.commit)"
>
<icon
:size="16"
name="commit"
/>
</a>
</button>
</li>
</ul>
</nav>
</template>
<style>
.ide-activity-bar {
position: relative;
flex: 0 0 60px;
z-index: 2;
}
.ide-activity-bar-link {
position: relative;
height: 55px;
margin: 2.5px 0;
color: #707070;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
}
.ide-activity-bar-link svg {
margin: 0 auto;
fill: currentColor;
}
.ide-activity-bar-link.active {
color: #4b4ba3;
background-color: #fff;
border-top: 1px solid #eaeaea;
border-bottom: 1px solid #eaeaea;
box-shadow: inset 3px 0 #4b4ba3;
}
a.ide-sidebar-link.ide-activity-bar-link.active::after {
content: '';
position: absolute;
right: -1px;
top: 0;
bottom: 0;
width: 1px;
background: #fff;
}
.ide-activity-bar-link:hover {
color: #4b4ba3;
background-color: #fff;
}
</style>
app/assets/javascripts/ide/components/ide.vue
View file @ 8de5cea0
......@@ -19,14 +19,6 @@ export default {
type: String,
required: true,
},
noChangesStateSvgPath: {
type: String,
required: true,
},
committedStateSvgPath: {
type: String,
required: true,
},
},
computed: {
...mapState(['changedFiles', 'openFiles', 'viewer', 'currentMergeRequestId']),
......
app/assets/javascripts/ide/components/ide_project_tree.vue
View file @ 8de5cea0
<script>
import { mapGetters } from 'vuex';
import BranchesTree from './ide_project_branches_tree.vue';
export default {
components: {
BranchesTree,
},
props: {
project: {
type: Object,
required: true,
},
computed: {
...mapGetters(['currentProjectWithTree']),
},
};
</script>
<template>
<div class="projects-sidebar">
<div class="multi-file-commit-panel-inner-scroll">
<branches-tree
v-for="branch in project.branches"
:key="branch.name"
:project-id="project.path_with_namespace"
:branch="branch"
/>
</div>
<branches-tree
v-for="branch in currentProjectWithTree.branches"
:key="branch.name"
:project-id="currentProjectWithTree.path_with_namespace"
:branch="branch"
/>
</div>
</template>
app/assets/javascripts/ide/components/ide_side_bar.vue
View file @ 8de5cea0
......@@ -8,6 +8,7 @@ import Identicon from '../../vue_shared/components/identicon.vue';
import projectTree from './ide_project_tree.vue';
import ResizablePanel from './resizable_panel.vue';
import ActivityBar from './activity_bar.vue';
import CommitSection from './repo_commit_section.vue';
export default {
components: {
......@@ -19,6 +20,7 @@ export default {
ActivityBar,
ProjectAvatarImage,
Identicon,
CommitSection,
},
computed: {
...mapState(['loading']),
......@@ -75,10 +77,11 @@ export default {
</div>
</a>
</div>
<component
:is="activityBarComponent"
:project="currentProjectWithTree"
/>
<div class="multi-file-commit-panel-inner-scroll">
<component
:is="activityBarComponent"
/>
</div>
</template>
</div>
</resizable-panel>
......
app/assets/javascripts/ide/components/repo_commit_section.vue
View file @ 8de5cea0
......@@ -21,16 +21,6 @@ export default {
directives: {
tooltip,
},
props: {
noChangesStateSvgPath: {
type: String,
required: true,
},
committedStateSvgPath: {
type: String,
required: true,
},
},
computed: {
...mapState([
'currentProjectId',
......@@ -38,6 +28,8 @@ export default {
'rightPanelCollapsed',
'lastCommitMsg',
'changedFiles',
'noChangesStateSvgPath',
'committedStateSvgPath',
]),
...mapState('commit', ['commitMessage', 'submitCommitLoading']),
...mapGetters('commit', ['commitButtonDisabled', 'discardDraftButtonDisabled', 'branchName']),
......
app/assets/javascripts/ide/index.js
View file @ 8de5cea0
......@@ -14,12 +14,17 @@ function initIde(el) {
components: {
ide,
},
created() {
this.$store.dispatch('setEmptyStateSvgs', {
emptyStateSvgPath: el.dataset.emptyStateSvgPath,
noChangesStateSvgPath: el.dataset.noChangesStateSvgPath,
committedStateSvgPath: el.dataset.committedStateSvgPath,
});
},
render(createElement) {
return createElement('ide', {
props: {
emptyStateSvgPath: el.dataset.emptyStateSvgPath,
noChangesStateSvgPath: el.dataset.noChangesStateSvgPath,
committedStateSvgPath: el.dataset.committedStateSvgPath,
},
});
},
......
app/assets/javascripts/ide/stores/actions.js
View file @ 8de5cea0
......@@ -116,6 +116,10 @@ export const updateActivityBarView = ({ commit }, view) => {
commit(types.UPDATE_ACTIVITY_BAR_VIEW, view);
};
export const setEmptyStateSvgs = ({ commit }, svgs) => {
commit(types.SET_EMPTY_STATE_SVGS, svgs);
};
export * from './actions/tree';
export * from './actions/file';
export * from './actions/project';
......
app/assets/javascripts/ide/stores/getters.js
View file @ 8de5cea0
......@@ -56,6 +56,8 @@ export const activityBarComponent = state => {
switch (state.currentActivityView) {
case ActivityBarViews.edit:
return 'project-tree';
case ActivityBarViews.commit:
return 'commit-section';
default:
return null;
}
......
app/assets/javascripts/ide/stores/mutation_types.js
View file @ 8de5cea0
......@@ -5,6 +5,7 @@ export const SET_LAST_COMMIT_MSG = 'SET_LAST_COMMIT_MSG';
export const SET_LEFT_PANEL_COLLAPSED = 'SET_LEFT_PANEL_COLLAPSED';
export const SET_RIGHT_PANEL_COLLAPSED = 'SET_RIGHT_PANEL_COLLAPSED';
export const SET_RESIZING_STATUS = 'SET_RESIZING_STATUS';
export const SET_EMPTY_STATE_SVGS = 'SET_EMPTY_STATE_SVGS';
// Project Mutation Types
export const SET_PROJECT = 'SET_PROJECT';
......
app/assets/javascripts/ide/stores/mutations.js
View file @ 8de5cea0
......@@ -100,6 +100,16 @@ export default {
currentActivityView,
});
},
[types.SET_EMPTY_STATE_SVGS](
state,
{ emptyStateSvgPath, noChangesStateSvgPath, committedStateSvgPath },
) {
Object.assign(state, {
emptyStateSvgPath,
noChangesStateSvgPath,
committedStateSvgPath,
});
},
...projectMutations,
...mergeRequestMutation,
...fileMutations,
......
app/assets/stylesheets/framework/gitlab_theme.scss
View file @ 8de5cea0
......@@ -184,6 +184,18 @@
.ide-file-list .file.file-active {
color: $color-700;
}
.ide-sidebar-link {
&:hover,
&:focus,
&.active {
color: $color-700;
}
&.active {
box-shadow: inset 3px 0 $color-700;
}
}
}
body {
......
app/assets/stylesheets/pages/repo.scss
View file @ 8de5cea0
......@@ -112,14 +112,6 @@
.multi-file-loading-container {
margin-top: 10px;
padding: 10px;
.animation-container {
background: $gray-light;
div {
background: $gray-light;
}
}
}
.multi-file-table-col-commit-message {
......@@ -423,7 +415,7 @@
width: 340px;
padding: 0;
background-color: $gray-light;
padding-right: 3px;
padding-right: 1px;
.context-header {
width: auto;
......@@ -438,9 +430,10 @@
.multi-file-commit-panel-inner {
display: flex;
flex: 1;
flex-direction: column;
height: 100%;
width: 100%;
width: 0;
}
.multi-file-commit-panel-inner-scroll {
......@@ -448,8 +441,10 @@
flex: 1;
flex-direction: column;
overflow: auto;
background-color: #fff;
border-left: 1px solid #eaeaea;
background-color: $white-light;
border-left: 1px solid $white-dark;
border-top: 1px solid $white-dark;
border-top-left-radius: $border-radius-small;
}
.branch-header {
......@@ -763,7 +758,7 @@
position: absolute;
top: 0;
bottom: 0;
width: 3px;
width: 1px;
background-color: $white-dark;
&.dragright {
......@@ -791,10 +786,49 @@
}
.ide-sidebar-link {
padding: $gl-padding-8 $gl-padding;
display: flex;
align-items: center;
font-weight: $gl-font-weight-bold;
position: relative;
height: 55px;
width: 100%;
margin: 2.5px 0;
padding: $gl-padding-8 $gl-padding;
color: $gl-text-color-secondary;
background-color: transparent;
border: 0;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
outline: 0;
svg {
margin: 0 auto;
}
&:hover,
&:focus {
background-color: $white-light;
}
&.active {
background-color: $white-light;
border-top-color: $white-dark;
border-bottom-color: $white-dark;
&::after {
content: '';
position: absolute;
right: -1px;
top: 0;
bottom: 0;
width: 1px;
background: $white-light;
}
}
}
.ide-activity-bar {
position: relative;
flex: 0 0 60px;
}
.ide-commit-message-field {
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7