BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Unverified Commit 8de5cea0 by Phil Hughes
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
Showing with 111 additions and 107 deletions
app/assets/javascripts/ide/components/activity_bar.vue
......@@ -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
......@@ -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
<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
......@@ -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
......@@ -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
......@@ -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
......@@ -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
......@@ -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
......@@ -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
......@@ -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
......@@ -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
......@@ -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