Merge branch '46202-webide-file-states' into 'master'
Resolve "Introduce hover, active, focus states for files in sidebar of Web IDE" Closes #46202 See merge request gitlab-org/gitlab-ce!19969
This commit is contained in:
commit
d38eb9bb26
|
@ -89,14 +89,14 @@ export default {
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="multi-file-commit-list-item position-relative">
|
<div class="multi-file-commit-list-item position-relative">
|
||||||
<button
|
<div
|
||||||
v-tooltip
|
v-tooltip
|
||||||
:title="tooltipTitle"
|
:title="tooltipTitle"
|
||||||
:class="{
|
:class="{
|
||||||
'is-active': isActive
|
'is-active': isActive
|
||||||
}"
|
}"
|
||||||
type="button"
|
|
||||||
class="multi-file-commit-list-path w-100 border-0 ml-0 mr-0"
|
class="multi-file-commit-list-path w-100 border-0 ml-0 mr-0"
|
||||||
|
role="button"
|
||||||
@dblclick="fileAction"
|
@dblclick="fileAction"
|
||||||
@click="openFileInEditor"
|
@click="openFileInEditor"
|
||||||
>
|
>
|
||||||
|
@ -107,7 +107,7 @@ export default {
|
||||||
:css-classes="iconClass"
|
:css-classes="iconClass"
|
||||||
/>{{ file.name }}
|
/>{{ file.name }}
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</div>
|
||||||
<component
|
<component
|
||||||
:is="actionComponent"
|
:is="actionComponent"
|
||||||
:path="file.path"
|
:path="file.path"
|
||||||
|
|
|
@ -180,10 +180,6 @@
|
||||||
color: $border-and-box-shadow;
|
color: $border-and-box-shadow;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ide-file-list .file.file-active {
|
|
||||||
color: $border-and-box-shadow;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ide-sidebar-link {
|
.ide-sidebar-link {
|
||||||
&.active {
|
&.active {
|
||||||
color: $border-and-box-shadow;
|
color: $border-and-box-shadow;
|
||||||
|
|
|
@ -23,6 +23,7 @@
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
border-top: 1px solid $white-dark;
|
border-top: 1px solid $white-dark;
|
||||||
padding-bottom: $ide-statusbar-height;
|
padding-bottom: $ide-statusbar-height;
|
||||||
|
color: $gl-text-color;
|
||||||
|
|
||||||
&.is-collapsed {
|
&.is-collapsed {
|
||||||
.ide-file-list {
|
.ide-file-list {
|
||||||
|
@ -45,12 +46,8 @@
|
||||||
.file {
|
.file {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&.file-open {
|
|
||||||
background: $white-normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.file-active {
|
&.file-active {
|
||||||
font-weight: $gl-font-weight-bold;
|
background: $theme-gray-100;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ide-file-name {
|
.ide-file-name {
|
||||||
|
@ -58,7 +55,9 @@
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
max-width: inherit;
|
max-width: inherit;
|
||||||
line-height: 22px;
|
line-height: 16px;
|
||||||
|
display: inline-block;
|
||||||
|
height: 18px;
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
@ -86,12 +85,14 @@
|
||||||
|
|
||||||
.ide-new-btn {
|
.ide-new-btn {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
padding: 2px 5px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
background: $white-normal;
|
|
||||||
|
|
||||||
.ide-new-btn {
|
.ide-new-btn {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
@ -596,11 +597,17 @@
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
background: $white-normal;
|
background: $theme-gray-100;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background: $theme-gray-200;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.multi-file-commit-list-path {
|
.multi-file-commit-list-path {
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
&.is-active {
|
&.is-active {
|
||||||
background-color: $white-normal;
|
background-color: $white-normal;
|
||||||
}
|
}
|
||||||
|
@ -620,10 +627,6 @@
|
||||||
.multi-file-commit-list-file-path {
|
.multi-file-commit-list-file-path {
|
||||||
@include str-truncated(calc(100% - 30px));
|
@include str-truncated(calc(100% - 30px));
|
||||||
|
|
||||||
&:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
title: Update Web IDE file tree styles
|
||||||
|
merge_request: 19969
|
||||||
|
author:
|
||||||
|
type: changed
|
Loading…
Reference in New Issue