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

design improvements

Browse source
This commit is contained in:
Phil Hughes 2018-09-04 09:00:25 +01:00
parent 1f808ffe9e
commit ebc15f4318
No known key found for this signature in database
GPG key ID: 32245528C52E0F9F
5 changed files with 54 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/assets/javascripts/ide/components/commit_sidebar/list.vue
View file

@ -97,7 +97,7 @@ export default {
class="ide-commit-list-container"
>
<header
class="multi-file-commit-panel-header"
class="multi-file-commit-panel-header d-flex mb-0"
>
<div
class="d-flex align-items-center flex-fill"
@ -131,7 +131,7 @@ export default {
<icon
:name="actionBtnIcon"
:size="16"
class="mr-0"
class="ml-auto mr-auto"
/>
</button>
<button
@ -144,7 +144,7 @@ export default {
'disabled-content': !filesLength
}"
type="button"
class="d-flex ide-staged-action-btn p-0 border-0 align-items-center prepend-left-8"
class="d-flex ide-staged-action-btn p-0 border-0 align-items-center"
data-placement="bottom"
data-container="body"
data-boundary="viewport"
@ -153,7 +153,7 @@ export default {
<icon
:size="16"
name="remove-all"
class="mr-0"
class="ml-auto mr-auto"
/>
</button>
</div>

29
app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
View file

@ -2,6 +2,7 @@
import { mapActions } from 'vuex';
import tooltip from '~/vue_shared/directives/tooltip';
import Icon from '~/vue_shared/components/icon.vue';
import FileIcon from '~/vue_shared/components/file_icon.vue';
import StageButton from './stage_button.vue';
import UnstageButton from './unstage_button.vue';
import { viewerTypes } from '../../constants';
@ -12,6 +13,7 @@ export default {
Icon,
StageButton,
UnstageButton,
FileIcon,
},
directives: {
tooltip,
@ -48,7 +50,7 @@ export default {
return `${getCommitIconMap(this.file).icon}${suffix}`;
},
iconClass() {
return `${getCommitIconMap(this.file).class} append-right-8`;
return `${getCommitIconMap(this.file).class} ml-auto mr-auto`;
},
fullKey() {
return `${this.keyPrefix}-${this.file.key}`;
@ -105,17 +107,24 @@ export default {
@click="openFileInEditor"
>
<span class="multi-file-commit-list-file-path d-flex align-items-center">
<icon
:name="iconName"
:size="16"
:css-classes="iconClass"
<file-icon
:file-name="file.name"
class="append-right-8"
/>{{ file.name }}
</span>
<div class="ml-auto d-flex align-items-center">
<div class="d-flex align-items-center ide-commit-list-changed-icon">
<icon
:name="iconName"
:size="16"
:css-classes="iconClass"
/>
</div>
<component
:is="actionComponent"
:path="file.path"
/>
</div>
</div>
<component
:is="actionComponent"
:path="file.path"
class="d-flex position-absolute"
/>
</div>
</template>

8
app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue
View file

@ -46,15 +46,16 @@ export default {
:aria-label="__('Stage changes')"
:title="__('Stage changes')"
type="button"
class="btn btn-blank append-right-8 d-flex align-items-center"
class="btn btn-blank d-flex align-items-center"
data-container="body"
data-boundary="viewport"
data-placement="bottom"
@click="stageChange(path)"
@click.stop.prevent="stageChange(path)"
>
<icon
:size="16"
name="mobile-issue-close"
class="ml-auto mr-auto"
/>
</button>
<button
@ -66,11 +67,12 @@ export default {
data-container="body"
data-boundary="viewport"
data-placement="bottom"
@click="showDiscardModal"
@click.stop.prevent="showDiscardModal"
>
<icon
:size="16"
name="remove"
class="ml-auto mr-auto"
/>
</button>
<gl-modal

3
app/assets/javascripts/ide/components/commit_sidebar/unstage_button.vue
View file

@ -36,11 +36,12 @@ export default {
data-container="body"
data-boundary="viewport"
data-placement="bottom"
@click="unstageChange(path)"
@click.stop.prevent="unstageChange(path)"
>
<icon
:size="16"
name="redo"
class="ml-auto mr-auto"
/>
</button>
</div>

33
app/assets/stylesheets/page_bundles/ide.scss
View file

@ -567,9 +567,7 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
}
.multi-file-commit-panel-header {
display: flex;
align-items: center;
margin-bottom: 0;
height: 48px;
border-bottom: 1px solid $white-dark;
padding: 12px 0;
}
@ -583,8 +581,6 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
flex: 1;
overflow: auto;
padding: $grid-size 0;
margin-left: -$grid-size;
margin-right: -$grid-size;
min-height: 60px;
&.form-text.text-muted {
@ -649,6 +645,8 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
.multi-file-commit-list-path {
cursor: pointer;
height: 32px;
padding-right: 0;
&.is-active {
background-color: $white-normal;
@ -657,6 +655,10 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
&:hover,
&:focus {
outline: 0;
.multi-file-discard-btn {
display: flex;
}
}
svg {
@ -676,13 +678,16 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
}
.multi-file-discard-btn {
top: 4px;
right: 8px;
bottom: 4px;
display: none;
svg {
top: 0;
}
.btn {
width: 32px;
height: 32px;
}
}
.multi-file-commit-form {
@ -797,6 +802,10 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
}
.ide-staged-action-btn {
width: 32px;
height: 32px;
color: inherit;
> svg {
top: 0;
}
@ -1443,7 +1452,13 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
}
.ide-commit-editor-header {
height: 65px;
padding: 8px 16px;
background-color: $white-normal;
background-color: $theme-gray-50;
box-shadow: inset 0 -1px $white-dark;
}
.ide-commit-list-changed-icon {
width: 32px;
height: 32px;
}