Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
1
Merge Requests
1
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
nexedi
gitlab-ce
Commits
199839be
Commit
199839be
authored
May 25, 2021
by
Denys Mishunov
Committed by
Francisco Javier López
May 25, 2021
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
The setup for refactoring styles in the left panel [without disabling Startup CSS]
parent
4b489b16
Changes
7
Hide whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
398 additions
and
7 deletions
+398
-7
app/assets/stylesheets/framework.scss
app/assets/stylesheets/framework.scss
+1
-1
app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar.scss
...rk/contextual_sidebar_refactoring/contextual_sidebar.scss
+7
-0
app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_base.scss
...ntextual_sidebar_refactoring/contextual_sidebar_base.scss
+0
-4
app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss
...xtual_sidebar_refactoring/contextual_sidebar_variant.scss
+383
-0
app/assets/stylesheets/performance_bar.scss
app/assets/stylesheets/performance_bar.scss
+4
-0
app/helpers/nav_helper.rb
app/helpers/nav_helper.rb
+0
-1
app/views/layouts/application.html.haml
app/views/layouts/application.html.haml
+3
-1
No files found.
app/assets/stylesheets/framework.scss
View file @
199839be
...
...
@@ -39,7 +39,7 @@
@import
'framework/selects'
;
@import
'framework/sidebar'
;
@import
'framework/contextual_sidebar_header'
;
@import
'framework/contextual_sidebar'
;
@import
'framework/contextual_sidebar
_refactoring/contextual_sidebar
'
;
@import
'framework/tables'
;
@import
'framework/notes'
;
@import
'framework/tabs'
;
...
...
app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar.scss
0 → 100644
View file @
199839be
body
:not
(
.sidebar-refactoring
)
{
@import
'contextual_sidebar_base'
;
}
body
.sidebar-refactoring
{
@import
'contextual_sidebar_variant'
;
}
app/assets/stylesheets/framework/contextual_sidebar.scss
→
app/assets/stylesheets/framework/contextual_sidebar
_refactoring/contextual_sidebar_base
.scss
View file @
199839be
...
...
@@ -175,10 +175,6 @@
overflow
:
auto
;
}
.with-performance-bar
.nav-sidebar
{
top
:
$header-height
+
$performance-bar-height
;
}
.sidebar-sub-level-items
{
display
:
none
;
padding-bottom
:
8px
;
...
...
app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss
0 → 100644
View file @
199839be
.page-with-contextual-sidebar
{
transition
:
padding-left
$sidebar-transition-duration
;
@include
media-breakpoint-up
(
md
)
{
padding-left
:
$contextual-sidebar-collapsed-width
;
}
@include
media-breakpoint-up
(
xl
)
{
padding-left
:
$contextual-sidebar-width
;
}
.issues-bulk-update.right-sidebar.right-sidebar-expanded
.issuable-sidebar-header
{
padding
:
10px
0
15px
;
}
}
.page-with-icon-sidebar
{
@include
media-breakpoint-up
(
md
)
{
padding-left
:
$contextual-sidebar-collapsed-width
;
}
}
.settings-avatar
{
background-color
:
$white
;
svg
{
fill
:
$gl-text-color-secondary
;
margin
:
auto
;
}
}
@mixin
collapse-contextual-sidebar-content
{
@include
context-header-collapsed
;
.sidebar-top-level-items
>
li
{
.sidebar-sub-level-items
{
&
:not
(
.flyout-list
)
{
display
:
none
;
}
}
}
.nav-icon-container
{
margin-right
:
0
;
}
.toggle-sidebar-button
{
padding
:
16px
;
width
:
$contextual-sidebar-collapsed-width
-
1px
;
.collapse-text
,
.icon-chevron-double-lg-left
{
display
:
none
;
}
.icon-chevron-double-lg-right
{
display
:
block
;
margin
:
0
;
}
}
}
.nav-sidebar
{
transition
:
width
$sidebar-transition-duration
,
left
$sidebar-transition-duration
;
position
:
fixed
;
z-index
:
600
;
width
:
$contextual-sidebar-width
;
top
:
$header-height
;
bottom
:
0
;
left
:
0
;
background
:
linear-gradient
(
$purple-200
,
$orange-200
);
box-shadow
:
inset
-1px
0
0
$border-color
;
transform
:
translate3d
(
0
,
0
,
0
);
&
:not
(
.sidebar-collapsed-desktop
)
{
@media
(
min-width
:
map-get
(
$grid-breakpoints
,
sm
))
and
(
max-width
:
map-get
(
$grid-breakpoints
,
sm
))
{
box-shadow
:
inset
-1px
0
0
$border-color
,
2px
1px
3px
$dropdown-shadow-color
;
}
}
@mixin
collapse-contextual-sidebar
{
width
:
$contextual-sidebar-collapsed-width
;
.nav-sidebar-inner-scroll
{
overflow-x
:
hidden
;
}
.badge.badge-pill
:not
(
.fly-out-badge
),
.nav-item-name
{
@include
gl-sr-only
;
}
.sidebar-top-level-items
>
li
>
a
{
min-height
:
45px
;
}
.fly-out-top-item
{
display
:
block
;
}
.avatar-container
{
margin
:
0
auto
;
}
}
&
.sidebar-collapsed-desktop
{
@include
collapse-contextual-sidebar
;
}
&
.sidebar-expanded-mobile
{
left
:
0
;
}
a
{
text-decoration
:
none
;
}
ul
{
padding-left
:
0
;
list-style
:
none
;
}
li
{
white-space
:
nowrap
;
a
{
transition
:
padding
$sidebar-transition-duration
;
display
:
flex
;
align-items
:
center
;
padding
:
12px
$gl-padding
;
color
:
$gl-text-color-secondary
;
}
.nav-item-name
{
flex
:
1
;
}
&
.active
{
>
a
{
font-weight
:
$gl-font-weight-bold
;
}
}
}
@include
media-breakpoint-down
(
sm
)
{
left
:
(
-
$contextual-sidebar-width
);
}
.nav-icon-container
{
display
:
flex
;
margin-right
:
8px
;
}
.fly-out-top-item
{
display
:
none
;
}
svg
{
height
:
16px
;
width
:
16px
;
}
@media
(
min-width
:
map-get
(
$grid-breakpoints
,
md
))
and
(
max-width
:
map-get
(
$grid-breakpoints
,
xl
)
-
1px
)
{
&
:not
(
.sidebar-expanded-mobile
)
{
@include
collapse-contextual-sidebar
;
@include
collapse-contextual-sidebar-content
;
}
}
}
.nav-sidebar-inner-scroll
{
height
:
100%
;
width
:
100%
;
overflow
:
auto
;
}
.sidebar-sub-level-items
{
display
:
none
;
padding-bottom
:
8px
;
>
li
{
a
{
padding
:
8px
16px
8px
40px
;
&
:hover
,
&
:focus
{
background
:
$link-active-background
;
color
:
$gl-text-color
;
}
}
&
.active
{
a
{
&
,
&
:hover
,
&
:focus
{
background
:
$link-active-background
;
}
}
}
}
}
.sidebar-top-level-items
{
margin-bottom
:
60px
;
>
li
{
>
a
{
@include
media-breakpoint-up
(
sm
)
{
margin-right
:
1px
;
}
&
:hover
{
color
:
$gl-text-color
;
}
}
&
.is-showing-fly-out
{
>
a
{
margin-right
:
1px
;
}
.sidebar-sub-level-items
{
@include
media-breakpoint-up
(
sm
)
{
position
:
fixed
;
top
:
0
;
left
:
0
;
min-width
:
150px
;
margin-top
:
-1px
;
padding
:
4px
1px
;
background-color
:
$white
;
box-shadow
:
2px
1px
3px
$dropdown-shadow-color
;
border
:
1px
solid
$gray-darker
;
border-left
:
0
;
border-radius
:
0
3px
3px
0
;
&
:
:
before
{
content
:
''
;
position
:
absolute
;
top
:
-30px
;
bottom
:
-30px
;
left
:
-10px
;
right
:
-30px
;
z-index
:
-1
;
}
&
.is-above
{
margin-top
:
1px
;
}
.divider
{
height
:
1px
;
margin
:
4px
-1px
;
padding
:
0
;
background-color
:
$dropdown-divider-bg
;
}
>
.active
{
box-shadow
:
none
;
>
a
{
background-color
:
transparent
;
}
}
a
{
padding
:
8px
16px
;
color
:
$gl-text-color
;
&
:hover
,
&
:focus
{
background-color
:
$gray-darker
;
}
}
}
}
}
.badge.badge-pill
{
background-color
:
$inactive-badge-background
;
color
:
$gl-text-color-secondary
;
}
&
.active
{
background
:
$link-active-background
;
>
a
{
margin-left
:
4px
;
// Subtract width of left border on active element
padding-left
:
$gl-padding-12
;
}
.badge.badge-pill
{
font-weight
:
$gl-font-weight-bold
;
}
.sidebar-sub-level-items
:not
(
.is-fly-out-only
)
{
display
:
block
;
}
}
&
.active
>
a
:hover
,
&
.is-over
>
a
{
background-color
:
$link-hover-background
;
}
}
}
// Collapsed nav
.toggle-sidebar-button
,
.close-nav-button
{
@include
side-panel-toggle
;
}
.toggle-sidebar-button
,
.close-nav-button
{
position
:
fixed
;
bottom
:
0
;
width
:
$contextual-sidebar-width
-
1px
;
border-top
:
1px
solid
$border-color
;
svg
{
margin-right
:
8px
;
}
.icon-chevron-double-lg-right
{
display
:
none
;
}
}
.collapse-text
{
white-space
:
nowrap
;
overflow
:
hidden
;
}
.sidebar-collapsed-desktop
{
@include
collapse-contextual-sidebar-content
;
}
.fly-out-top-item
{
>
a
{
display
:
flex
;
}
.fly-out-badge
{
margin-left
:
8px
;
}
}
.fly-out-top-item-name
{
flex
:
1
;
}
// Mobile nav
.close-nav-button
{
display
:
none
;
}
@include
media-breakpoint-down
(
sm
)
{
.close-nav-button
{
display
:
flex
;
}
.toggle-sidebar-button
{
display
:
none
;
}
.mobile-overlay
{
display
:
none
;
&
.mobile-nav-open
{
display
:
block
;
position
:
fixed
;
background-color
:
$black-transparent
;
height
:
100%
;
width
:
100%
;
z-index
:
$zindex-dropdown-menu
;
}
}
}
app/assets/stylesheets/performance_bar.scss
View file @
199839be
...
...
@@ -135,3 +135,7 @@
#modal-peek-pg-queries-content
{
color
:
$black
;
}
.with-performance-bar
.nav-sidebar
{
top
:
$header-height
+
$performance-bar-height
!
important
;
}
app/helpers/nav_helper.rb
View file @
199839be
...
...
@@ -12,7 +12,6 @@ module NavHelper
def
page_with_sidebar_class
class_name
=
page_gutter_class
class_name
<<
'page-with-contextual-sidebar'
if
defined?
(
@left_sidebar
)
&&
@left_sidebar
class_name
<<
'sidebar-refactoring'
if
Feature
.
enabled?
(
:sidebar_refactor
,
current_user
,
default_enabled: :yaml
)
class_name
<<
'page-with-icon-sidebar'
if
collapsed_sidebar?
&&
@left_sidebar
class_name
-=
[
'right-sidebar-expanded'
]
if
defined?
(
@right_sidebar
)
&&
!
@right_sidebar
...
...
app/views/layouts/application.html.haml
View file @
199839be
-
page_classes
=
page_class
<<
@html_class
-
page_classes
=
page_classes
.
flatten
.
compact
-
body_classes
=
[
user_application_theme
,
user_tab_width
,
@body_class
,
client_class_list
]
-
body_classes
<<
'sidebar-refactoring'
if
sidebar_refactor_enabled?
!!! 5
%html
{
lang:
I18n
.
locale
,
class:
page_classes
}
=
render
"layouts/head"
%body
{
class:
"#{user_application_theme} #{user_tab_width} #{@body_class} #{client_class_list}"
,
data:
body_data
}
%body
{
class:
body_classes
,
data:
body_data
}
=
render
"layouts/init_auto_complete"
if
@gfm_form
=
render
"layouts/init_client_detection_flags"
=
render
'peek/bar'
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment