kotovalexarian-likes-gitlab
/
gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

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
This commit is contained in:
Phil Hughes 2018-04-16 16:29:34 +01:00
parent bdc437fc76
commit 8de5cea076
No known key found for this signature in database
GPG Key ID: 32245528C52E0F9F
12 changed files with 111 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
app/assets/javascripts/ide/components/activity_bar.vue
View File

@ -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>

8
app/assets/javascripts/ide/components/ide.vue
View File

@ -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']),

22
app/assets/javascripts/ide/components/ide_project_tree.vue
View File

@ -1,28 +1,24 @@
<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>

11
app/assets/javascripts/ide/components/ide_side_bar.vue
View File

@ -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>

12
app/assets/javascripts/ide/components/repo_commit_section.vue
View File

@ -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']),

9
app/assets/javascripts/ide/index.js
View File

@ -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,
},
});
},

4
app/assets/javascripts/ide/stores/actions.js
View File

@ -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';

2
app/assets/javascripts/ide/stores/getters.js
View File

@ -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;
}

1
app/assets/javascripts/ide/stores/mutation_types.js
View File

@ -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';

10
app/assets/javascripts/ide/stores/mutations.js
View File

@ -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,

12
app/assets/stylesheets/framework/gitlab_theme.scss
View File

@ -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 {

64
app/assets/stylesheets/pages/repo.scss
View File

@ -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 {