Commit d38eb9bb authored by Mike Greiling's avatar Mike Greiling

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