Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
李少辉-开发者
gitlab-foss
提交
164dbc6b
G
gitlab-foss
项目概览
李少辉-开发者
/
gitlab-foss
通知
15
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
G
gitlab-foss
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
164dbc6b
编写于
6月 07, 2018
作者:
A
Annabel Gray
提交者:
Phil Hughes
6月 07, 2018
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Resolve "Introduce new navigation themes in GitLab 11.0"
上级
ce001db9
变更
13
隐藏空白更改
内联
并排
Showing
13 changed file
with
216 addition
and
122 deletion
+216
-122
app/assets/stylesheets/framework/gitlab_theme.scss
app/assets/stylesheets/framework/gitlab_theme.scss
+109
-53
app/assets/stylesheets/framework/header.scss
app/assets/stylesheets/framework/header.scss
+2
-0
app/assets/stylesheets/framework/variables.scss
app/assets/stylesheets/framework/variables.scss
+32
-0
app/assets/stylesheets/pages/profiles/preferences.scss
app/assets/stylesheets/pages/profiles/preferences.scss
+35
-40
app/views/layouts/devise.html.haml
app/views/layouts/devise.html.haml
+1
-1
app/views/layouts/devise_empty.html.haml
app/views/layouts/devise_empty.html.haml
+1
-1
app/views/profiles/preferences/show.html.haml
app/views/profiles/preferences/show.html.haml
+1
-7
changelogs/unreleased/43597-new-navigation-themes.yml
changelogs/unreleased/43597-new-navigation-themes.yml
+5
-0
config/gitlab.yml.example
config/gitlab.yml.example
+8
-3
doc/development/fe_guide/style_guide_scss.md
doc/development/fe_guide/style_guide_scss.md
+5
-5
lib/gitlab/themes.rb
lib/gitlab/themes.rb
+10
-5
spec/helpers/preferences_helper_spec.rb
spec/helpers/preferences_helper_spec.rb
+3
-3
spec/lib/gitlab/themes_spec.rb
spec/lib/gitlab/themes_spec.rb
+4
-4
未找到文件。
app/assets/stylesheets/framework/gitlab_theme.scss
浏览文件 @
164dbc6b
...
...
@@ -3,26 +3,26 @@
*/
@mixin
gitlab-theme
(
$
color-100
,
$
color-200
,
$
color-500
,
$
color-700
,
$
color-800
,
$
color-900
,
$
location-badge-color
,
$
search-and-nav-links
,
$
active-tab-border
,
$
border-and-box-shadow
,
$
sidebar-text
,
$
nav-svg-color
,
$color-alternate
)
{
// Header
.navbar-gitlab
{
background-color
:
$
color-900
;
background-color
:
$
nav-svg-color
;
.navbar-collapse
{
color
:
$
color-200
;
color
:
$
search-and-nav-links
;
}
.container-fluid
{
.navbar-toggler
{
border-left
:
1px
solid
lighten
(
$
color-700
,
10%
);
border-left
:
1px
solid
lighten
(
$
border-and-box-shadow
,
10%
);
}
}
...
...
@@ -31,40 +31,40 @@
>
li
{
>
a
:hover
,
>
a
:focus
{
background-color
:
rgba
(
$
color-200
,
0
.2
);
background-color
:
rgba
(
$
search-and-nav-links
,
0
.2
);
}
&
.active
>
a
,
&
.dropdown.show
>
a
{
color
:
$
color-900
;
color
:
$
nav-svg-color
;
background-color
:
$color-alternate
;
}
&
.line-separator
{
border-left
:
1px
solid
rgba
(
$
color-200
,
0
.2
);
border-left
:
1px
solid
rgba
(
$
search-and-nav-links
,
0
.2
);
}
}
}
.navbar-sub-nav
{
color
:
$
color-200
;
color
:
$
search-and-nav-links
;
}
.nav
{
>
li
{
color
:
$
color-200
;
color
:
$
search-and-nav-links
;
>
a
{
&
.header-user-dropdown-toggle
{
.header-user-avatar
{
border-color
:
$
color-200
;
border-color
:
$
search-and-nav-links
;
}
}
&
:hover
,
&
:focus
{
@include
media-breakpoint-up
(
sm
)
{
background-color
:
rgba
(
$
color-200
,
0
.2
);
background-color
:
rgba
(
$
search-and-nav-links
,
0
.2
);
}
svg
{
...
...
@@ -75,12 +75,12 @@
&
.active
>
a
,
&
.dropdown.show
>
a
{
color
:
$
color-900
;
color
:
$
nav-svg-color
;
background-color
:
$color-alternate
;
&
:hover
{
svg
{
fill
:
$
color-900
;
fill
:
$
nav-svg-color
;
}
}
}
...
...
@@ -88,7 +88,7 @@
.impersonated-user
,
.impersonated-user
:hover
{
svg
{
fill
:
$
color-900
;
fill
:
$
nav-svg-color
;
}
}
}
...
...
@@ -99,34 +99,34 @@
>
a
{
&
:hover
,
&
:focus
{
background-color
:
rgba
(
$
color-200
,
0
.2
);
background-color
:
rgba
(
$
search-and-nav-links
,
0
.2
);
}
}
}
.search
{
form
{
background-color
:
rgba
(
$
color-200
,
0
.2
);
background-color
:
rgba
(
$
search-and-nav-links
,
0
.2
);
&
:hover
{
background-color
:
rgba
(
$
color-200
,
0
.3
);
background-color
:
rgba
(
$
search-and-nav-links
,
0
.3
);
}
}
.location-badge
{
color
:
$
color-100
;
background-color
:
rgba
(
$
color-200
,
0
.1
);
border-right
:
1px
solid
$
color-800
;
color
:
$
location-badge-color
;
background-color
:
rgba
(
$
search-and-nav-links
,
0
.1
);
border-right
:
1px
solid
$
sidebar-text
;
}
.
search-input
:
:
placeholder
{
color
:
rgba
(
$
color-200
,
0
.8
);
color
:
rgba
(
$
search-and-nav-links
,
0
.8
);
}
.search-input-wrap
{
.search-icon
,
.clear-icon
{
fill
:
rgba
(
$
color-200
,
0
.8
);
fill
:
rgba
(
$
search-and-nav-links
,
0
.8
);
}
}
...
...
@@ -141,38 +141,34 @@
.search-input-wrap
{
.search-icon
{
fill
:
rgba
(
$
color-200
,
0
.8
);
fill
:
rgba
(
$
search-and-nav-links
,
0
.8
);
}
}
}
}
.btn-sign-in
{
background-color
:
$color-100
;
color
:
$color-900
;
}
// Sidebar
.nav-sidebar
li
.active
{
box-shadow
:
inset
4px
0
0
$
color-700
;
box-shadow
:
inset
4px
0
0
$
border-and-box-shadow
;
>
a
{
color
:
$
color-800
;
color
:
$
sidebar-text
;
}
svg
{
fill
:
$
color-800
;
fill
:
$
sidebar-text
;
}
}
.sidebar-top-level-items
>
li
.active
.badge.badge-pill
{
color
:
$
color-800
;
color
:
$
sidebar-text
;
}
.nav-links
li
{
&
.active
a
,
a
.active
{
border-bottom
:
2px
solid
$
color-500
;
border-bottom
:
2px
solid
$
active-tab-border
;
.badge.badge-pill
{
font-weight
:
$gl-font-weight-bold
;
...
...
@@ -181,27 +177,27 @@
}
.branch-header-title
{
color
:
$
color-700
;
color
:
$
border-and-box-shadow
;
}
.ide-file-list
.file.file-active
{
color
:
$
color-700
;
color
:
$
border-and-box-shadow
;
}
.ide-sidebar-link
{
&
.active
{
color
:
$
color-700
;
box-shadow
:
inset
3px
0
$
color-700
;
color
:
$
border-and-box-shadow
;
box-shadow
:
inset
3px
0
$
border-and-box-shadow
;
&
.is-right
{
box-shadow
:
inset
-3px
0
$
color-700
;
box-shadow
:
inset
-3px
0
$
border-and-box-shadow
;
}
}
}
}
body
{
&
.ui
_
indigo
{
&
.ui
-
indigo
{
@include
gitlab-theme
(
$indigo-100
,
$indigo-200
,
...
...
@@ -213,19 +209,19 @@ body {
);
}
&
.ui
_dark
{
&
.ui
-light-indigo
{
@include
gitlab-theme
(
$
theme-gray
-100
,
$
theme-gray
-200
,
$
theme-gray
-500
,
$
theme-gray-7
00
,
$
theme-gray-8
00
,
$
theme-gray-9
00
,
$
indigo
-100
,
$
indigo
-200
,
$
indigo
-500
,
$
indigo-5
00
,
$
indigo-7
00
,
$
indigo-7
00
,
$white-light
);
}
&
.ui
_
blue
{
&
.ui
-
blue
{
@include
gitlab-theme
(
$theme-blue-100
,
$theme-blue-200
,
...
...
@@ -237,7 +233,19 @@ body {
);
}
&
.ui_green
{
&
.ui-light-blue
{
@include
gitlab-theme
(
$theme-light-blue-100
,
$theme-light-blue-200
,
$theme-light-blue-500
,
$theme-light-blue-500
,
$theme-light-blue-700
,
$theme-light-blue-700
,
$white-light
);
}
&
.ui-green
{
@include
gitlab-theme
(
$theme-green-100
,
$theme-green-200
,
...
...
@@ -249,7 +257,55 @@ body {
);
}
&
.ui_light
{
&
.ui-light-green
{
@include
gitlab-theme
(
$theme-green-100
,
$theme-green-200
,
$theme-green-500
,
$theme-green-500
,
$theme-light-green-700
,
$theme-light-green-700
,
$white-light
);
}
&
.ui-red
{
@include
gitlab-theme
(
$theme-red-100
,
$theme-red-200
,
$theme-red-500
,
$theme-red-700
,
$theme-red-800
,
$theme-red-900
,
$white-light
);
}
&
.ui-light-red
{
@include
gitlab-theme
(
$theme-light-red-100
,
$theme-light-red-200
,
$theme-light-red-500
,
$theme-light-red-500
,
$theme-light-red-700
,
$theme-light-red-700
,
$white-light
);
}
&
.ui-dark
{
@include
gitlab-theme
(
$theme-gray-100
,
$theme-gray-200
,
$theme-gray-500
,
$theme-gray-700
,
$theme-gray-800
,
$theme-gray-900
,
$white-light
);
}
&
.ui-light
{
@include
gitlab-theme
(
$theme-gray-900
,
$theme-gray-700
,
...
...
app/assets/stylesheets/framework/header.scss
浏览文件 @
164dbc6b
...
...
@@ -437,6 +437,8 @@
}
.btn-sign-in
{
background-color
:
$indigo-100
;
color
:
$indigo-900
;
margin-top
:
3px
;
font-weight
:
$gl-font-weight-bold
;
...
...
app/assets/stylesheets/framework/variables.scss
浏览文件 @
164dbc6b
...
...
@@ -117,6 +117,15 @@ $theme-blue-800: #25496e;
$theme-blue-900
:
#1a3652
;
$theme-blue-950
:
#0f2235
;
$theme-light-blue-50
:
#f2f7fc
;
$theme-light-blue-100
:
#ebf1f7
;
$theme-light-blue-200
:
#c9dcf2
;
$theme-light-blue-300
:
#83abd4
;
$theme-light-blue-400
:
#4d86bf
;
$theme-light-blue-500
:
#367cc2
;
$theme-light-blue-600
:
#3771ab
;
$theme-light-blue-700
:
#2261a1
;
$theme-green-50
:
#f2faf6
;
$theme-green-100
:
#e4f3ea
;
$theme-green-200
:
#c0dfcd
;
...
...
@@ -129,6 +138,29 @@ $theme-green-800: #145d33;
$theme-green-900
:
#0d4524
;
$theme-green-950
:
#072d16
;
$theme-light-green-700
:
#156b39
;
$theme-red-50
:
#fcf4f2
;
$theme-red-100
:
#fae9e6
;
$theme-red-200
:
#ebcac5
;
$theme-red-300
:
#d99b91
;
$theme-red-400
:
#b0655a
;
$theme-red-500
:
#ad4a3b
;
$theme-red-600
:
#9e4133
;
$theme-red-700
:
#912f20
;
$theme-red-800
:
#78291d
;
$theme-red-900
:
#691a16
;
$theme-red-950
:
#36140f
;
$theme-light-red-50
:
#fff6f5
;
$theme-light-red-100
:
#fae2de
;
$theme-light-red-200
:
#f7d5d0
;
$theme-light-red-300
:
#d9796a
;
$theme-light-red-400
:
#cf604e
;
$theme-light-red-500
:
#c24b38
;
$theme-light-red-600
:
#b03927
;
$theme-light-red-700
:
#a62e21
;
$black
:
#000
;
$black-transparent
:
rgba
(
0
,
0
,
0
,
0
.3
);
$almost-black
:
#242424
;
...
...
app/assets/stylesheets/pages/profiles/preferences.scss
浏览文件 @
164dbc6b
@mixin
application-theme-preview
(
$color-1
,
$color-2
,
$color-3
,
$color-4
)
{
.one
{
background-color
:
$color-1
;
border-top-left-radius
:
$border-radius-default
;
}
.two
{
background-color
:
$color-2
;
border-top-right-radius
:
$border-radius-default
;
}
.three
{
background-color
:
$color-3
;
border-bottom-left-radius
:
$border-radius-default
;
}
.four
{
background-color
:
$color-4
;
border-bottom-right-radius
:
$border-radius-default
;
}
}
.multi-file-editor-options
{
label
{
margin-right
:
20px
;
...
...
@@ -38,44 +16,61 @@
.application-theme
{
label
{
margin
-right
:
20px
;
margin
:
0
$gl-padding
$gl-padding
0
;
text-align
:
center
;
}
.preview
{
font-size
:
0
;
margin-bottom
:
10px
;
height
:
48px
;
border-radius
:
4px
;
min-width
:
135px
;
margin-bottom
:
$gl-padding-8
;
&
.ui-indigo
{
background-color
:
$indigo-900
;
}
&
.ui-light-indigo
{
background-color
:
$indigo-700
;
}
&
.
indigo
{
@include
application-theme-preview
(
$indigo-900
,
$indigo-700
,
$indigo-800
,
$indigo-500
)
;
&
.
ui-blue
{
background-color
:
$theme-blue-900
;
}
&
.
dark
{
@include
application-theme-preview
(
$theme-gray-900
,
$theme-gray-700
,
$theme-gray-800
,
$theme-gray-600
)
;
&
.
ui-light-blue
{
background-color
:
$theme-light-blue-700
;
}
&
.
light
{
@include
application-theme-preview
(
$theme-gray-600
,
$theme-gray-200
,
$theme-gray-400
,
$theme-gray-100
)
;
&
.
ui-green
{
background-color
:
$theme-green-900
;
}
&
.
blue
{
@include
application-theme-preview
(
$theme-blue-900
,
$theme-blue-700
,
$theme-blue-800
,
$theme-blue-500
)
;
&
.
ui-light-green
{
background-color
:
$theme-light-green-700
;
}
&
.green
{
@include
application-theme-preview
(
$theme-green-900
,
$theme-green-700
,
$theme-green-800
,
$theme-green-500
);
&
.ui-red
{
background-color
:
$theme-red-900
;
}
&
.ui-light-red
{
background-color
:
$theme-light-red-700
;
}
&
.ui-dark
{
background-color
:
$theme-gray-900
;
}
&
.ui-light
{
background-color
:
$theme-gray-200
;
}
}
.preview-row
{
display
:
block
;
}
.quadrant
{
display
:
inline-block
;
height
:
50px
;
width
:
80px
;
}
}
.syntax-theme
{
...
...
app/views/layouts/devise.html.haml
浏览文件 @
164dbc6b
!!! 5
%html
.devise-layout-html
{
class:
system_message_class
}
=
render
"layouts/head"
%body
.ui
_
indigo.login-page.application.navless
{
data:
{
page:
body_data_page
}
}
%body
.ui
-
indigo.login-page.application.navless
{
data:
{
page:
body_data_page
}
}
.page-wrap
=
render
"layouts/header/empty"
.login-page-broadcast
...
...
app/views/layouts/devise_empty.html.haml
浏览文件 @
164dbc6b
!!! 5
%html
{
lang:
"en"
,
class:
system_message_class
}
=
render
"layouts/head"
%body
.ui
_
indigo.login-page.application.navless
%body
.ui
-
indigo.login-page.application.navless
=
render
"layouts/header/empty"
=
render
"layouts/broadcast"
.container.navless-container
...
...
app/views/profiles/preferences/show.html.haml
浏览文件 @
164dbc6b
...
...
@@ -9,13 +9,7 @@
.col-lg-8.application-theme
-
Gitlab
::
Themes
.
each
do
|
theme
|
=
label_tag
do
.preview
{
class:
theme
.
name
.
downcase
}
.preview-row
.quadrant.one
.quadrant.two
.preview-row
.quadrant.three
.quadrant.four
.preview
{
class:
theme
.
css_class
}
=
f
.
radio_button
:theme_id
,
theme
.
id
,
checked:
Gitlab
::
Themes
.
for_user
(
@user
).
id
==
theme
.
id
=
theme
.
name
...
...
changelogs/unreleased/43597-new-navigation-themes.yml
0 → 100644
浏览文件 @
164dbc6b
---
title
:
Add additional theme color options
merge_request
:
author
:
type
:
changed
config/gitlab.yml.example
浏览文件 @
164dbc6b
...
...
@@ -78,10 +78,15 @@ production: &base
# username_changing_enabled: false # default: true - User can change her username/namespace
## Default theme ID
## 1 - Indigo
## 2 -
Dark
## 3 -
Light
## 4 - Blue
## 2 -
Light Indigo
## 3 -
Blue
## 4 -
Light
Blue
## 5 - Green
## 6 - Light Green
## 7 - Red
## 8 - Light Red
## 9 - Dark
## 10 - Light
# default_theme: 1 # default: 1
## Automatic issue closing
...
...
doc/development/fe_guide/style_guide_scss.md
浏览文件 @
164dbc6b
...
...
@@ -216,12 +216,12 @@ If you want a line or set of lines to be ignored by the linter, you can use
`// scss-lint:disable RuleName`
(
[
more info
][
disabling-linters
]
):
```
scss
// This lint rule is disabled because
the class name comes from a gem.
// scss-lint:disable
SelectorFormat
.ui_indigo
{
background-color
:
#333
;
// This lint rule is disabled because
it is supported only in Chrome/Safari
// scss-lint:disable
PropertySpelling
body
{
text-decoration-skip
:
ink
;
}
// scss-lint:enable
SelectorFormat
// scss-lint:enable
PropertySpelling
```
Make sure a comment is added on the line above the
`disable`
rule, otherwise the
...
...
lib/gitlab/themes.rb
浏览文件 @
164dbc6b
...
...
@@ -12,11 +12,16 @@ module Gitlab
# All available Themes
THEMES
=
[
Theme
.
new
(
1
,
'Indigo'
,
'ui_indigo'
),
Theme
.
new
(
2
,
'Dark'
,
'ui_dark'
),
Theme
.
new
(
3
,
'Light'
,
'ui_light'
),
Theme
.
new
(
4
,
'Blue'
,
'ui_blue'
),
Theme
.
new
(
5
,
'Green'
,
'ui_green'
)
Theme
.
new
(
1
,
'Indigo'
,
'ui-indigo'
),
Theme
.
new
(
2
,
'Light Indigo'
,
'ui-light-indigo'
),
Theme
.
new
(
3
,
'Blue'
,
'ui-blue'
),
Theme
.
new
(
4
,
'Light Blue'
,
'ui-light-blue'
),
Theme
.
new
(
5
,
'Green'
,
'ui-green'
),
Theme
.
new
(
6
,
'Light Green'
,
'ui-light-green'
),
Theme
.
new
(
7
,
'Red'
,
'ui-red'
),
Theme
.
new
(
8
,
'Light Red'
,
'ui-light-red'
),
Theme
.
new
(
9
,
'Dark'
,
'ui-dark'
),
Theme
.
new
(
10
,
'Light'
,
'ui-light'
)
].
freeze
# Convenience method to get a space-separated String of all the theme
...
...
spec/helpers/preferences_helper_spec.rb
浏览文件 @
164dbc6b
...
...
@@ -31,9 +31,9 @@ describe PreferencesHelper do
describe
'#user_application_theme'
do
context
'with a user'
do
it
"returns user's theme's css_class"
do
stub_user
(
theme_id:
3
)
stub_user
(
theme_id:
10
)
expect
(
helper
.
user_application_theme
).
to
eq
'ui
_
light'
expect
(
helper
.
user_application_theme
).
to
eq
'ui
-
light'
end
it
'returns the default when id is invalid'
do
...
...
@@ -41,7 +41,7 @@ describe PreferencesHelper do
allow
(
Gitlab
.
config
.
gitlab
).
to
receive
(
:default_theme
).
and_return
(
1
)
expect
(
helper
.
user_application_theme
).
to
eq
'ui
_
indigo'
expect
(
helper
.
user_application_theme
).
to
eq
'ui
-
indigo'
end
end
...
...
spec/lib/gitlab/themes_spec.rb
浏览文件 @
164dbc6b
...
...
@@ -5,16 +5,16 @@ describe Gitlab::Themes, lib: true do
it
'returns a space-separated list of class names'
do
css
=
described_class
.
body_classes
expect
(
css
).
to
include
(
'ui
_
indigo'
)
expect
(
css
).
to
include
(
'
ui_
dark '
)
expect
(
css
).
to
include
(
'
ui_
blue'
)
expect
(
css
).
to
include
(
'ui
-
indigo'
)
expect
(
css
).
to
include
(
'
ui-
dark '
)
expect
(
css
).
to
include
(
'
ui-
blue'
)
end
end
describe
'.by_id'
do
it
'returns a Theme by its ID'
do
expect
(
described_class
.
by_id
(
1
).
name
).
to
eq
'Indigo'
expect
(
described_class
.
by_id
(
3
).
name
).
to
eq
'Light'
expect
(
described_class
.
by_id
(
10
).
name
).
to
eq
'Light'
end
end
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录