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 { ...@@ -30,80 +30,33 @@ export default {
/> />
</li> </li>
<li> <li>
<a <button
href="#" type="button"
class="ide-sidebar-link ide-activity-bar-link" class="ide-sidebar-link js-ide-edit-mode"
:class="{ :class="{
active: currentActivityView === $options.ActivityBarViews.edit active: currentActivityView === $options.ActivityBarViews.edit
}" }"
@click.prevent="updateActivityBarView($options.ActivityBarViews.edit)" @click.prevent="updateActivityBarView($options.ActivityBarViews.edit)"
> >
<icon <icon
:size="16"
name="code" name="code"
/> />
</a> </button>
</li> </li>
<li> <li>
<a <button
href="#" type="button"
class="ide-sidebar-link ide-activity-bar-link" class="ide-sidebar-link js-ide-commit-mode"
:class="{ :class="{
active: currentActivityView === $options.ActivityBarViews.commit active: currentActivityView === $options.ActivityBarViews.commit
}" }"
@click.prevent="updateActivityBarView($options.ActivityBarViews.commit)" @click.prevent="updateActivityBarView($options.ActivityBarViews.commit)"
> >
<icon <icon
:size="16"
name="commit" name="commit"
/> />
</a> </button>
</li> </li>
</ul> </ul>
</nav> </nav>
</template> </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 { ...@@ -19,14 +19,6 @@ export default {
type: String, type: String,
required: true, required: true,
}, },
noChangesStateSvgPath: {
type: String,
required: true,
},
committedStateSvgPath: {
type: String,
required: true,
},
}, },
computed: { computed: {
...mapState(['changedFiles', 'openFiles', 'viewer', 'currentMergeRequestId']), ...mapState(['changedFiles', 'openFiles', 'viewer', 'currentMergeRequestId']),
......
app/assets/javascripts/ide/components/ide_project_tree.vue
View file @ 8de5cea0
<script> <script>
import { mapGetters } from 'vuex';
import BranchesTree from './ide_project_branches_tree.vue'; import BranchesTree from './ide_project_branches_tree.vue';
export default { export default {
components: { components: {
BranchesTree, BranchesTree,
}, },
props: { computed: {
project: { ...mapGetters(['currentProjectWithTree']),
type: Object,
required: true,
},
}, },
}; };
</script> </script>
<template> <template>
<div class="projects-sidebar"> <div class="projects-sidebar">
<div class="multi-file-commit-panel-inner-scroll"> <branches-tree
<branches-tree v-for="branch in currentProjectWithTree.branches"
v-for="branch in project.branches" :key="branch.name"
:key="branch.name" :project-id="currentProjectWithTree.path_with_namespace"
:project-id="project.path_with_namespace" :branch="branch"
:branch="branch" />
/>
</div>
</div> </div>
</template> </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'; ...@@ -8,6 +8,7 @@ import Identicon from '../../vue_shared/components/identicon.vue';
import projectTree from './ide_project_tree.vue'; import projectTree from './ide_project_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';
import CommitSection from './repo_commit_section.vue';
export default { export default {
components: { components: {
...@@ -19,6 +20,7 @@ export default { ...@@ -19,6 +20,7 @@ export default {
ActivityBar, ActivityBar,
ProjectAvatarImage, ProjectAvatarImage,
Identicon, Identicon,
CommitSection,
}, },
computed: { computed: {
...mapState(['loading']), ...mapState(['loading']),
...@@ -75,10 +77,11 @@ export default { ...@@ -75,10 +77,11 @@ export default {
</div> </div>
</a> </a>
</div> </div>
<component <div class="multi-file-commit-panel-inner-scroll">
:is="activityBarComponent" <component
:project="currentProjectWithTree" :is="activityBarComponent"
/> />
</div>
</template> </template>
</div> </div>
</resizable-panel> </resizable-panel>
......
app/assets/javascripts/ide/components/repo_commit_section.vue
View file @ 8de5cea0
...@@ -21,16 +21,6 @@ export default { ...@@ -21,16 +21,6 @@ export default {
directives: { directives: {
tooltip, tooltip,
}, },
props: {
noChangesStateSvgPath: {
type: String,
required: true,
},
committedStateSvgPath: {
type: String,
required: true,
},
},
computed: { computed: {
...mapState([ ...mapState([
'currentProjectId', 'currentProjectId',
...@@ -38,6 +28,8 @@ export default { ...@@ -38,6 +28,8 @@ export default {
'rightPanelCollapsed', 'rightPanelCollapsed',
'lastCommitMsg', 'lastCommitMsg',
'changedFiles', 'changedFiles',
'noChangesStateSvgPath',
'committedStateSvgPath',
]), ]),
...mapState('commit', ['commitMessage', 'submitCommitLoading']), ...mapState('commit', ['commitMessage', 'submitCommitLoading']),
...mapGetters('commit', ['commitButtonDisabled', 'discardDraftButtonDisabled', 'branchName']), ...mapGetters('commit', ['commitButtonDisabled', 'discardDraftButtonDisabled', 'branchName']),
......
app/assets/javascripts/ide/index.js
View file @ 8de5cea0
...@@ -14,12 +14,17 @@ function initIde(el) { ...@@ -14,12 +14,17 @@ function initIde(el) {
components: { components: {
ide, ide,
}, },
created() {
this.$store.dispatch('setEmptyStateSvgs', {
emptyStateSvgPath: el.dataset.emptyStateSvgPath,
noChangesStateSvgPath: el.dataset.noChangesStateSvgPath,
committedStateSvgPath: el.dataset.committedStateSvgPath,
});
},
render(createElement) { render(createElement) {
return createElement('ide', { return createElement('ide', {
props: { props: {
emptyStateSvgPath: el.dataset.emptyStateSvgPath, 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) => { ...@@ -116,6 +116,10 @@ export const updateActivityBarView = ({ commit }, view) => {
commit(types.UPDATE_ACTIVITY_BAR_VIEW, 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/tree';
export * from './actions/file'; export * from './actions/file';
export * from './actions/project'; export * from './actions/project';
......
app/assets/javascripts/ide/stores/getters.js
View file @ 8de5cea0
...@@ -56,6 +56,8 @@ export const activityBarComponent = state => { ...@@ -56,6 +56,8 @@ export const activityBarComponent = state => {
switch (state.currentActivityView) { switch (state.currentActivityView) {
case ActivityBarViews.edit: case ActivityBarViews.edit:
return 'project-tree'; return 'project-tree';
case ActivityBarViews.commit:
return 'commit-section';
default: default:
return null; 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'; ...@@ -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_LEFT_PANEL_COLLAPSED = 'SET_LEFT_PANEL_COLLAPSED';
export const SET_RIGHT_PANEL_COLLAPSED = 'SET_RIGHT_PANEL_COLLAPSED'; export const SET_RIGHT_PANEL_COLLAPSED = 'SET_RIGHT_PANEL_COLLAPSED';
export const SET_RESIZING_STATUS = 'SET_RESIZING_STATUS'; export const SET_RESIZING_STATUS = 'SET_RESIZING_STATUS';
export const SET_EMPTY_STATE_SVGS = 'SET_EMPTY_STATE_SVGS';
// Project Mutation Types // Project Mutation Types
export const SET_PROJECT = 'SET_PROJECT'; export const SET_PROJECT = 'SET_PROJECT';
......
app/assets/javascripts/ide/stores/mutations.js
View file @ 8de5cea0
...@@ -100,6 +100,16 @@ export default { ...@@ -100,6 +100,16 @@ export default {
currentActivityView, currentActivityView,
}); });
}, },
[types.SET_EMPTY_STATE_SVGS](
state,
{ emptyStateSvgPath, noChangesStateSvgPath, committedStateSvgPath },
) {
Object.assign(state, {
emptyStateSvgPath,
noChangesStateSvgPath,
committedStateSvgPath,
});
},
...projectMutations, ...projectMutations,
...mergeRequestMutation, ...mergeRequestMutation,
...fileMutations, ...fileMutations,
......
app/assets/stylesheets/framework/gitlab_theme.scss
View file @ 8de5cea0
...@@ -184,6 +184,18 @@ ...@@ -184,6 +184,18 @@
.ide-file-list .file.file-active { .ide-file-list .file.file-active {
color: $color-700; color: $color-700;
} }
.ide-sidebar-link {
&:hover,
&:focus,
&.active {
color: $color-700;
}
&.active {
box-shadow: inset 3px 0 $color-700;
}
}
} }
body { body {
......
app/assets/stylesheets/pages/repo.scss
View file @ 8de5cea0
...@@ -112,14 +112,6 @@ ...@@ -112,14 +112,6 @@
.multi-file-loading-container { .multi-file-loading-container {
margin-top: 10px; margin-top: 10px;
padding: 10px; padding: 10px;
.animation-container {
background: $gray-light;
div {
background: $gray-light;
}
}
} }
.multi-file-table-col-commit-message { .multi-file-table-col-commit-message {
...@@ -423,7 +415,7 @@ ...@@ -423,7 +415,7 @@
width: 340px; width: 340px;
padding: 0; padding: 0;
background-color: $gray-light; background-color: $gray-light;
padding-right: 3px; padding-right: 1px;
.context-header { .context-header {
width: auto; width: auto;
...@@ -438,9 +430,10 @@ ...@@ -438,9 +430,10 @@
.multi-file-commit-panel-inner { .multi-file-commit-panel-inner {
display: flex; display: flex;
flex: 1;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
width: 100%; width: 0;
} }
.multi-file-commit-panel-inner-scroll { .multi-file-commit-panel-inner-scroll {
...@@ -448,8 +441,10 @@ ...@@ -448,8 +441,10 @@
flex: 1; flex: 1;
flex-direction: column; flex-direction: column;
overflow: auto; overflow: auto;
background-color: #fff; background-color: $white-light;
border-left: 1px solid #eaeaea; border-left: 1px solid $white-dark;
border-top: 1px solid $white-dark;
border-top-left-radius: $border-radius-small;
} }
.branch-header { .branch-header {
...@@ -763,7 +758,7 @@ ...@@ -763,7 +758,7 @@
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
width: 3px; width: 1px;
background-color: $white-dark; background-color: $white-dark;
&.dragright { &.dragright {
...@@ -791,10 +786,49 @@ ...@@ -791,10 +786,49 @@
} }
.ide-sidebar-link { .ide-sidebar-link {
padding: $gl-padding-8 $gl-padding;
display: flex; display: flex;
align-items: center; 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 { .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