Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
李少辉-开发者
gitlab-foss
提交
198926dc
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,发现更多精彩内容 >>
提交
198926dc
编写于
3月 10, 2016
作者:
J
Jacob Schatz
浏览文件
操作
浏览文件
下载
差异文件
Merge branch 'enhanced-dropdow-css' into 'master'
New dropdown UI See #3279 for the designs See merge request !3110
上级
60ddd5ef
22b89f35
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
408 addition
and
2 deletion
+408
-2
app/assets/stylesheets/framework/dropdowns.scss
app/assets/stylesheets/framework/dropdowns.scss
+216
-0
app/assets/stylesheets/framework/variables.scss
app/assets/stylesheets/framework/variables.scss
+12
-0
app/views/help/ui.html.haml
app/views/help/ui.html.haml
+180
-2
未找到文件。
app/assets/stylesheets/framework/dropdowns.scss
浏览文件 @
198926dc
...
...
@@ -17,6 +17,47 @@
.dropdown-menu
{
display
:
block
;
}
.dropdown-menu-toggle
{
border-color
:
$dropdown-toggle-hover-border-color
;
.fa
{
color
:
$dropdown-toggle-hover-icon-color
;
}
}
}
.dropdown-menu-toggle
{
position
:
relative
;
min-width
:
160px
;
padding
:
5px
20px
5px
10px
;
background-color
:
$dropdown-toggle-bg
;
color
:
$dropdown-toggle-color
;
font-size
:
15px
;
text-align
:
left
;
border
:
1px
solid
$dropdown-toggle-border-color
;
border-radius
:
2px
;
outline
:
0
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
;
overflow
:
hidden
;
.fa
{
position
:
absolute
;
top
:
50%
;
right
:
6px
;
margin-top
:
-4px
;
color
:
$dropdown-toggle-icon-color
;
font-size
:
10px
;
}
&
:hover
,
{
border-color
:
$dropdown-toggle-hover-border-color
;
.fa
{
color
:
$dropdown-toggle-hover-icon-color
;
}
}
}
.dropdown-menu
{
...
...
@@ -36,6 +77,21 @@
border-radius
:
$border-radius-base
;
box-shadow
:
0
2px
4px
$dropdown-shadow-color
;
&
.is-loading
{
.dropdown-content
{
display
:
none
;
}
.dropdown-loading
{
display
:
block
;
}
}
ul
{
margin
:
0
;
padding
:
0
;
}
li
{
text-align
:
left
;
list-style
:
none
;
...
...
@@ -68,6 +124,57 @@
}
}
.dropdown-menu-paging
{
.dropdown-page-two
{
display
:
none
;
}
&
.is-page-two
{
.dropdown-page-one
{
display
:
none
;
}
.dropdown-page-two
{
display
:
block
;
}
}
}
.dropdown-menu-user
{
.avatar
{
float
:
left
;
width
:
30px
;
height
:
30px
;
margin
:
0
10px
0
0
;
}
}
.dropdown-menu-user-link
{
padding-top
:
7px
;
padding-bottom
:
7px
;
}
.dropdown-menu-user-full-name
{
display
:
block
;
margin-bottom
:
2px
;
line-height
:
1
;
text-overflow
:
ellipsis
;
overflow
:
hidden
;
white-space
:
nowrap
;
}
.dropdown-menu-user-username
{
display
:
block
;
line-height
:
1
;
text-overflow
:
ellipsis
;
overflow
:
hidden
;
white-space
:
nowrap
;
}
.dropdown-select
{
width
:
280px
;
}
.dropdown-menu-align-right
{
left
:
auto
;
right
:
0
;
...
...
@@ -101,3 +208,112 @@
font-size
:
13px
;
line-height
:
22px
;
}
.dropdown-title
{
position
:
relative
;
margin-bottom
:
10px
;
padding-left
:
30px
;
padding-right
:
30px
;
padding-bottom
:
10px
;
font-weight
:
600
;
line-height
:
1
;
text-align
:
center
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
;
border-bottom
:
1px
solid
$dropdown-divider-color
;
overflow
:
hidden
;
}
.dropdown-title-button
{
position
:
absolute
;
top
:
-1px
;
padding
:
0
;
color
:
$dropdown-title-btn-color
;
font-size
:
14px
;
border
:
0
;
background
:
none
;
&
:hover
{
color
:
darken
(
$dropdown-title-btn-color
,
15%
);
}
}
.dropdown-menu-close
{
right
:
0
;
}
.dropdown-menu-back
{
left
:
0
;
}
.dropdown-input
{
position
:
relative
;
margin-bottom
:
10px
;
.fa
{
position
:
absolute
;
top
:
10px
;
right
:
10px
;
color
:
#C7C7C7
;
font-size
:
12px
;
pointer-events
:
none
;
}
}
.dropdown-input-field
{
width
:
100%
;
padding
:
0
7px
;
color
:
$dropdown-input-color
;
line-height
:
30px
;
border
:
1px
solid
$dropdown-divider-color
;
border-radius
:
2px
;
outline
:
0
;
&
:focus
{
color
:
$dropdown-link-color
;
border-color
:
$dropdown-input-focus-border
;
box-shadow
:
0
0
4px
$dropdown-input-focus-shadow
;
+
.fa
{
color
:
$dropdown-link-color
;
}
}
&
:hover
{
+
.fa
{
color
:
$dropdown-link-color
;
}
}
}
.dropdown-content
{
max-height
:
200px
;
overflow-y
:
scroll
;
}
.dropdown-footer
{
padding-top
:
10px
;
margin-top
:
10px
;
font-size
:
13px
;
border-top
:
1px
solid
$dropdown-divider-color
;
}
.dropdown-loading
{
position
:
absolute
;
top
:
0
;
right
:
0
;
bottom
:
0
;
left
:
0
;
display
:
none
;
z-index
:
9
;
background-color
:
$dropdown-loading-bg
;
font-size
:
28px
;
.fa
{
position
:
absolute
;
top
:
50%
;
left
:
50%
;
margin-top
:
-14px
;
margin-left
:
-14px
;
}
}
app/assets/stylesheets/framework/variables.scss
浏览文件 @
198926dc
...
...
@@ -138,3 +138,15 @@ $dropdown-shadow-color: rgba(#000, .1);
$dropdown-divider-color
:
rgba
(
#000
,
.1
);
$dropdown-header-color
:
#959494
;
$dropdown-caret-color
:
#54565B
;
$dropdown-title-btn-color
:
#BFBFBF
;
$dropdown-input-color
:
#C7C7C7
;
$dropdown-input-focus-border
:
rgb
(
58
,
171
,
240
);
$dropdown-input-focus-shadow
:
rgba
(
#000
,
.2
);
$dropdown-loading-bg
:
rgba
(
#fff
,
.6
);
$dropdown-toggle-bg
:
#fff
;
$dropdown-toggle-color
:
#626262
;
$dropdown-toggle-border-color
:
#EAEAEA
;
$dropdown-toggle-hover-border-color
:
darken
(
$dropdown-toggle-border-color
,
15%
);
$dropdown-toggle-icon-color
:
#C4C4C4
;
$dropdown-toggle-hover-icon-color
:
$dropdown-toggle-hover-border-color
;
app/views/help/ui.html.haml
浏览文件 @
198926dc
...
...
@@ -18,6 +18,8 @@
=
link_to
'Nav'
,
'#nav'
%li
=
link_to
'Buttons'
,
'#buttons'
%li
=
link_to
'Dropdowns'
,
'#dropdowns'
%li
=
link_to
'Panels'
,
'#panels'
%li
...
...
@@ -180,9 +182,9 @@
.nav-controls
=
text_field_tag
'sample'
,
nil
,
class:
'form-control'
.dropdown
%button
.dropdown-
toggle.btn
{
type:
'button'
,
'data-toggle'
=>
'dropdown'
}
%button
.dropdown-
menu-toggle
{
type:
'button'
,
'data-toggle'
=>
'dropdown'
}
%span
Sort by name
%b
.caret
=
icon
(
'chevron-down'
)
%ul
.dropdown-menu
%li
%a
Sort by date
...
...
@@ -212,6 +214,182 @@
%button
.btn.btn-danger
{
:type
=>
"button"
}
Danger
%button
.btn.btn-link
{
:type
=>
"button"
}
Link
%h2
#dropdowns
Dropdowns
.example
.clearfix
.dropdown.inline.pull-left
%button
.dropdown-menu-toggle
{
type:
'button'
,
data:
{
toggle:
'dropdown'
}}
Dropdown
=
icon
(
'chevron-down'
)
%ul
.dropdown-menu
%li
%a
{
href:
"#"
}
Dropdown Option
.dropdown.inline.pull-right
%button
.dropdown-menu-toggle
{
type:
'button'
,
data:
{
toggle:
'dropdown'
}}
Dropdown
=
icon
(
'chevron-down'
)
%ul
.dropdown-menu.dropdown-menu-align-right
%li
%a
{
href:
"#"
}
Dropdown Option
.example
%div
.dropdown.inline
%button
.dropdown-menu-toggle
{
type:
'button'
,
data:
{
toggle:
'dropdown'
}}
Dropdown
=
icon
(
'chevron-down'
)
%ul
.dropdown-menu.dropdown-menu-selectable
%li
%a
.is-active
{
href:
"#"
}
Dropdown Option
.example
%div
.dropdown.inline
%button
.dropdown-menu-toggle
{
type:
'button'
,
data:
{
toggle:
'dropdown'
}}
Dropdown
=
icon
(
'chevron-down'
)
.dropdown-menu.dropdown-select.dropdown-menu-selectable
.dropdown-title
%span
Dropdown Title
%button
.dropdown-title-button.dropdown-menu-close
{
aria:
{
label:
"Close"
}}
=
icon
(
'times'
)
.dropdown-input
%input
.dropdown-input-field
{
type:
"search"
,
placeholder:
"Filter results"
}
=
icon
(
'search'
)
.dropdown-content
%ul
%li
%a
.is-active
{
href:
"#"
}
Dropdown Option
%li
%a
{
href:
"#"
}
Dropdown Option
%li
.divider
%li
%a
{
href:
"#"
}
Dropdown Option
%li
%a
{
href:
"#"
}
Dropdown Option
%li
%a
{
href:
"#"
}
Dropdown Option
%li
%a
{
href:
"#"
}
Dropdown Option
%li
%a
{
href:
"#"
}
Dropdown Option
.dropdown-footer
%strong
Tip:
If an author is not a member of this project, you can still filter by his name while using the search field.
.dropdown.inline
%button
.dropdown-menu-toggle
{
type:
'button'
,
data:
{
toggle:
'dropdown'
}}
Dropdown loading
=
icon
(
'chevron-down'
)
.dropdown-menu.dropdown-select.dropdown-menu-selectable.is-loading
.dropdown-title
%span
Dropdown Title
%button
.dropdown-title-button.dropdown-menu-close
{
aria:
{
label:
"Close"
}}
=
icon
(
'times'
)
.dropdown-input
%input
.dropdown-input-field
{
type:
"search"
,
placeholder:
"Filter results"
}
=
icon
(
'search'
)
.dropdown-content
%ul
%li
%a
.is-active
{
href:
"#"
}
Dropdown Option
%li
%a
{
href:
"#"
}
Dropdown Option
%li
.divider
%li
%a
{
href:
"#"
}
Dropdown Option
%li
%a
{
href:
"#"
}
Dropdown Option
%li
%a
{
href:
"#"
}
Dropdown Option
%li
%a
{
href:
"#"
}
Dropdown Option
%li
%a
{
href:
"#"
}
Dropdown Option
.dropdown-footer
%strong
Tip:
If an author is not a member of this project, you can still filter by his name while using the search field.
.dropdown-loading
=
icon
(
'spinner spin'
)
.example
%div
.dropdown.inline
%button
.dropdown-menu-toggle
{
type:
'button'
,
data:
{
toggle:
'dropdown'
}}
Dropdown user
=
icon
(
'chevron-down'
)
.dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-user
.dropdown-title
%span
Dropdown Title
%button
.dropdown-title-button.dropdown-menu-close
{
aria:
{
label:
"Close"
}}
=
icon
(
'times'
)
.dropdown-input
%input
.dropdown-input-field
{
type:
"search"
,
placeholder:
"Filter results"
}
=
icon
(
'search'
)
.dropdown-content
%ul
%li
%a
.dropdown-menu-user-link.is-active
{
href:
"#"
}
=
link_to_member_avatar
(
current_user
,
size:
30
)
%strong
.dropdown-menu-user-full-name
=
current_user
.
name
.dropdown-menu-user-username
=
current_user
.
to_reference
.example
%div
.dropdown.inline
%button
.dropdown-menu-toggle
{
type:
'button'
,
data:
{
toggle:
'dropdown'
}}
Dropdown page 2
=
icon
(
'chevron-down'
)
.dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-user.dropdown-menu-paging.is-page-two
.dropdown-page-one
.dropdown-title
%button
.dropdown-title-button.dropdown-menu-back
{
aria:
{
label:
"Go back"
}}
=
icon
(
'arrow-left'
)
%span
Dropdown Title
%button
.dropdown-title-button.dropdown-menu-close
{
aria:
{
label:
"Close"
}}
=
icon
(
'times'
)
.dropdown-input
%input
.dropdown-input-field
{
type:
"search"
,
placeholder:
"Filter results"
}
=
icon
(
'search'
)
.dropdown-content
%ul
%li
%a
.dropdown-menu-user-link.is-active
{
href:
"#"
}
=
link_to_member_avatar
(
current_user
,
size:
30
)
%strong
.dropdown-menu-user-full-name
=
current_user
.
name
.dropdown-menu-user-username
=
current_user
.
to_reference
.dropdown-page-two
.dropdown-title
%button
.dropdown-title-button.dropdown-menu-back
{
aria:
{
label:
"Go back"
}}
=
icon
(
'arrow-left'
)
%span
Create label
%button
.dropdown-title-button.dropdown-menu-close
{
aria:
{
label:
"Close"
}}
=
icon
(
'times'
)
.dropdown-input
%input
.dropdown-input-field
{
type:
"search"
,
placeholder:
"Name new label"
}
.dropdown-content
%button
.btn.btn-primary
Create
%h2
#panels
Panels
.row
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录