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