Commit 8de5cea0 authored by Phil Hughes's avatar Phil Hughes

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
......@@ -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>
......@@ -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']),
......
<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>
......@@ -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>
......
......@@ -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']),
......
......@@ -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,
},
});
},
......
......@@ -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';
......
......@@ -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;
}
......
......@@ -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';
......
......@@ -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,
......
......@@ -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 {
......
......@@ -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