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
0
Merge Requests
0
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
Boxiang Sun
gitlab-ce
Commits
b8a63380
Commit
b8a63380
authored
7 years ago
by
Nur Rony
Committed by
Clement Ho
7 years ago
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Adding animation for all dropdown
parent
c76812c7
No related merge requests found
Changes
16
Hide whitespace changes
Inline
Side-by-side
Showing
16 changed files
with
124 additions
and
26 deletions
+124
-26
app/assets/javascripts/due_date_select.js
app/assets/javascripts/due_date_select.js
+2
-1
app/assets/javascripts/issuable_form.js
app/assets/javascripts/issuable_form.js
+2
-1
app/assets/javascripts/member_expiration_date.js
app/assets/javascripts/member_expiration_date.js
+2
-1
app/assets/stylesheets/framework/dropdowns.scss
app/assets/stylesheets/framework/dropdowns.scss
+69
-2
app/assets/stylesheets/framework/header.scss
app/assets/stylesheets/framework/header.scss
+1
-0
app/assets/stylesheets/framework/variables.scss
app/assets/stylesheets/framework/variables.scss
+5
-0
app/assets/stylesheets/pages/search.scss
app/assets/stylesheets/pages/search.scss
+14
-1
app/views/shared/_personal_access_tokens_form.html.haml
app/views/shared/_personal_access_tokens_form.html.haml
+2
-1
app/views/shared/milestones/_form_dates.html.haml
app/views/shared/milestones/_form_dates.html.haml
+2
-2
changelogs/unreleased/26208-animate-drodowns.yml
changelogs/unreleased/26208-animate-drodowns.yml
+4
-0
features/steps/project/commits/commits.rb
features/steps/project/commits/commits.rb
+2
-0
features/steps/project/source/browse_files.rb
features/steps/project/source/browse_files.rb
+3
-3
spec/features/issues_spec.rb
spec/features/issues_spec.rb
+2
-1
spec/features/merge_requests/create_new_mr_spec.rb
spec/features/merge_requests/create_new_mr_spec.rb
+4
-4
spec/features/merge_requests/versions_spec.rb
spec/features/merge_requests/versions_spec.rb
+4
-5
spec/features/projects/issuable_templates_spec.rb
spec/features/projects/issuable_templates_spec.rb
+6
-4
No files found.
app/assets/javascripts/due_date_select.js
View file @
b8a63380
...
...
@@ -170,8 +170,9 @@ class DueDateSelectors {
const
$datePicker
=
$
(
this
);
const
calendar
=
new
Pikaday
({
field
:
$datePicker
.
get
(
0
),
theme
:
'
gitlab-theme
'
,
theme
:
'
gitlab-theme
animate-picker
'
,
format
:
'
yyyy-mm-dd
'
,
container
:
$datePicker
.
parent
().
get
(
0
),
onSelect
(
dateText
)
{
$datePicker
.
val
(
dateFormat
(
new
Date
(
dateText
),
'
yyyy-mm-dd
'
));
}
...
...
This diff is collapsed.
Click to expand it.
app/assets/javascripts/issuable_form.js
View file @
b8a63380
...
...
@@ -39,8 +39,9 @@
if
(
$issuableDueDate
.
length
)
{
calendar
=
new
Pikaday
({
field
:
$issuableDueDate
.
get
(
0
),
theme
:
'
gitlab-theme
'
,
theme
:
'
gitlab-theme
animate-picker
'
,
format
:
'
yyyy-mm-dd
'
,
container
:
$issuableDueDate
.
parent
().
get
(
0
),
onSelect
:
function
(
dateText
)
{
$issuableDueDate
.
val
(
dateFormat
(
new
Date
(
dateText
),
'
yyyy-mm-dd
'
));
}
...
...
This diff is collapsed.
Click to expand it.
app/assets/javascripts/member_expiration_date.js
View file @
b8a63380
...
...
@@ -18,9 +18,10 @@
const
calendar
=
new
Pikaday
({
field
:
$input
.
get
(
0
),
theme
:
'
gitlab-theme
'
,
theme
:
'
gitlab-theme
animate-picker
'
,
format
:
'
yyyy-mm-dd
'
,
minDate
:
new
Date
(),
container
:
$input
.
parent
().
get
(
0
),
onSelect
(
dateText
)
{
$input
.
val
(
dateFormat
(
new
Date
(
dateText
),
'
yyyy-mm-dd
'
));
...
...
This diff is collapsed.
Click to expand it.
app/assets/stylesheets/framework/dropdowns.scss
View file @
b8a63380
...
...
@@ -14,14 +14,32 @@
}
}
@mixin
set-visible
{
transform
:
translateY
(
0
);
visibility
:
visible
;
opacity
:
1
;
transition-duration
:
100ms
,
150ms
,
25ms
;
transition-delay
:
35ms
,
50ms
,
25ms
;
}
@mixin
set-invisible
{
transform
:
translateY
(
-10px
);
visibility
:
hidden
;
opacity
:
0
;
transition-property
:
opacity
,
transform
,
visibility
;
transition-duration
:
70ms
,
250ms
,
250ms
;
transition-timing-function
:
linear
,
$dropdown-animation-timing
;
transition-delay
:
25ms
,
50ms
,
0ms
;
}
.open
{
.dropdown-menu
,
.dropdown-menu-nav
{
display
:
block
;
@include
set-visible
;
@media
(
max-width
:
$screen-xs-max
)
{
width
:
100%
;
min-width
:
240px
;
}
}
...
...
@@ -161,8 +179,9 @@
.dropdown-menu
,
.dropdown-menu-nav
{
display
:
none
;
display
:
block
;
position
:
absolute
;
width
:
100%
;
top
:
100%
;
left
:
0
;
z-index
:
9
;
...
...
@@ -176,6 +195,12 @@
border
:
1px
solid
$dropdown-border-color
;
border-radius
:
$border-radius-base
;
box-shadow
:
0
2px
4px
$dropdown-shadow-color
;
overflow
:
hidden
;
@include
set-invisible
;
@media
(
max-width
:
$screen-sm-min
)
{
width
:
100%
;
}
&
.is-loading
{
.dropdown-content
{
...
...
@@ -252,6 +277,23 @@
}
}
.filtered-search-box-input-container
.dropdown-menu
,
.filtered-search-box-input-container
.dropdown-menu-nav
,
.comment-type-dropdown
.dropdown-menu
{
display
:
none
;
opacity
:
1
;
visibility
:
visible
;
transform
:
translateY
(
0
);
}
.filtered-search-box-input-container
{
.dropdown-menu
,
.dropdown-menu-nav
{
max-width
:
280px
;
width
:
auto
;
}
}
.dropdown-menu-drop-up
{
top
:
auto
;
bottom
:
100%
;
...
...
@@ -326,6 +368,10 @@
.dropdown-select
{
width
:
$dropdown-width
;
@media
(
max-width
:
$screen-sm-min
)
{
width
:
100%
;
}
}
.dropdown-menu-align-right
{
...
...
@@ -568,3 +614,24 @@
.droplab-item-ignore
{
pointer-events
:
none
;
}
.pika-single.animate-picker.is-bound
,
.pika-single.animate-picker.is-bound.is-hidden
{
/*
* Having `!important` is not recommended but
* since `pikaday` sets positioning inline
* there's no way it can be gracefully overridden
* using config options.
*/
position
:
absolute
!
important
;
display
:
block
;
}
.pika-single.animate-picker.is-bound
{
@include
set-visible
;
}
.pika-single.animate-picker.is-bound.is-hidden
{
@include
set-invisible
;
overflow
:
hidden
;
}
This diff is collapsed.
Click to expand it.
app/assets/stylesheets/framework/header.scss
View file @
b8a63380
...
...
@@ -329,6 +329,7 @@ header {
.header-user
{
.dropdown-menu-nav
{
width
:
auto
;
min-width
:
140px
;
margin-top
:
-5px
;
...
...
This diff is collapsed.
Click to expand it.
app/assets/stylesheets/framework/variables.scss
View file @
b8a63380
...
...
@@ -561,3 +561,8 @@ $filter-name-text-color: rgba(0, 0, 0, 0.55);
$filter-value-text-color
:
rgba
(
0
,
0
,
0
,
0
.85
);
$filter-name-selected-color
:
#ebebeb
;
$filter-value-selected-color
:
#d7d7d7
;
/*
Animation Functions
*/
$dropdown-animation-timing
:
cubic-bezier
(
0
.23
,
1
,
0
.32
,
1
);
This diff is collapsed.
Click to expand it.
app/assets/stylesheets/pages/search.scss
View file @
b8a63380
...
...
@@ -124,7 +124,13 @@ input[type="checkbox"]:hover {
// Custom dropdown positioning
.dropdown-menu
{
top
:
37px
;
transition-property
:
opacity
,
transform
;
transition-duration
:
250ms
,
250ms
;
transition-delay
:
0ms
,
25ms
;
transition-timing-function
:
$dropdown-animation-timing
;
transform
:
translateY
(
0
);
opacity
:
0
;
display
:
block
;
left
:
-5px
;
padding
:
0
;
...
...
@@ -156,6 +162,13 @@ input[type="checkbox"]:hover {
color
:
$layout-link-gray
;
}
}
.dropdown-menu
{
transition-duration
:
100ms
,
75ms
;
transition-delay
:
75ms
,
100ms
;
transform
:
translateY
(
13px
);
opacity
:
1
;
}
}
&
.has-value
{
...
...
This diff is collapsed.
Click to expand it.
app/views/shared/_personal_access_tokens_form.html.haml
View file @
b8a63380
...
...
@@ -30,9 +30,10 @@
new
Pikaday
({
field
:
$dateField
.
get
(
0
),
theme
:
'
gitlab-theme
'
,
theme
:
'
gitlab-theme
animate-picker
'
,
format
:
'
yyyy-mm-dd
'
,
minDate
:
new
Date
(),
container
:
$dateField
.
parent
().
get
(
0
),
onSelect
:
function
(
dateText
)
{
$dateField
.
val
(
dateFormat
(
new
Date
(
dateText
),
'
yyyy-mm-dd
'
));
}
...
...
This diff is collapsed.
Click to expand it.
app/views/shared/milestones/_form_dates.html.haml
View file @
b8a63380
...
...
@@ -3,10 +3,10 @@
=
f
.
label
:start_date
,
"Start Date"
,
class:
"control-label"
.col-sm-10
=
f
.
text_field
:start_date
,
class:
"datepicker form-control"
,
placeholder:
"Select start date"
%a
.inline.prepend-top-5.js-clear-start-date
{
href:
"#"
}
Clear start date
%a
.inline.p
ull-right.p
repend-top-5.js-clear-start-date
{
href:
"#"
}
Clear start date
.col-md-6
.form-group
=
f
.
label
:due_date
,
"Due Date"
,
class:
"control-label"
.col-sm-10
=
f
.
text_field
:due_date
,
class:
"datepicker form-control"
,
placeholder:
"Select due date"
%a
.inline.prepend-top-5.js-clear-due-date
{
href:
"#"
}
Clear due date
%a
.inline.p
ull-right.p
repend-top-5.js-clear-due-date
{
href:
"#"
}
Clear due date
This diff is collapsed.
Click to expand it.
changelogs/unreleased/26208-animate-drodowns.yml
0 → 100644
View file @
b8a63380
---
title
:
Add animations to all the dropdowns
merge_request
:
8419
author
:
This diff is collapsed.
Click to expand it.
features/steps/project/commits/commits.rb
View file @
b8a63380
...
...
@@ -178,11 +178,13 @@ class Spinach::Features::ProjectCommits < Spinach::FeatureSteps
def
select_using_dropdown
(
dropdown_type
,
selection
,
is_commit
=
false
)
dropdown
=
find
(
".js-compare-
#{
dropdown_type
}
-dropdown"
)
dropdown
.
find
(
".compare-dropdown-toggle"
).
click
dropdown
.
find
(
'.dropdown-menu'
,
visible:
true
)
dropdown
.
fill_in
(
"Filter by Git revision"
,
with:
selection
)
if
is_commit
dropdown
.
find
(
'input[type="search"]'
).
send_keys
(
:return
)
else
find_link
(
selection
,
visible:
true
).
click
end
dropdown
.
find
(
'.dropdown-menu'
,
visible:
false
)
end
end
This diff is collapsed.
Click to expand it.
features/steps/project/source/browse_files.rb
View file @
b8a63380
...
...
@@ -87,9 +87,9 @@ class Spinach::Features::ProjectSourceBrowseFiles < Spinach::FeatureSteps
step
'I fill the new branch name'
do
first
(
'button.js-target-branch'
,
visible:
true
).
click
fi
rst
(
'.create-new-branch'
,
visible:
true
).
click
fi
rst
(
'#new_branch_name'
,
visible:
true
).
set
(
'new_branch_name'
)
fi
rst
(
'.js-new-branch-btn'
,
visible:
true
).
click
fi
nd
(
'.create-new-branch'
,
visible:
true
).
click
fi
nd
(
'#new_branch_name'
,
visible:
true
).
set
(
'new_branch_name'
)
fi
nd
(
'.js-new-branch-btn'
,
visible:
true
).
click
end
step
'I fill the new file name with an illegal name'
do
...
...
This diff is collapsed.
Click to expand it.
spec/features/issues_spec.rb
View file @
b8a63380
...
...
@@ -414,7 +414,8 @@ describe 'Issues', feature: true do
it
'will not send ajax request when no data is changed'
do
page
.
within
'.labels'
do
click_link
'Edit'
first
(
'.dropdown-menu-close'
).
click
find
(
'.dropdown-menu-close'
,
match: :first
).
click
expect
(
page
).
not_to
have_selector
(
'.block-loading'
)
end
...
...
This diff is collapsed.
Click to expand it.
spec/features/merge_requests/create_new_mr_spec.rb
View file @
b8a63380
...
...
@@ -20,13 +20,13 @@ feature 'Create New Merge Request', feature: true, js: true do
expect
(
page
).
to
have_content
(
'Target branch'
)
first
(
'.js-source-branch'
).
click
fi
rst
(
'.dropdown-source-branch .dropdown-content a'
,
text:
'v1.1.0'
).
click
fi
nd
(
'.dropdown-source-branch .dropdown-content a'
,
match: :first
).
click
expect
(
page
).
to
have_content
"b83d6e3"
end
it
'selects the target branch sha when a tag with the same name exists'
do
visit
namespace_project_merge_requests_path
(
project
.
namespace
,
project
)
visit
namespace_project_merge_requests_path
(
project
.
namespace
,
project
)
click_link
'New merge request'
...
...
@@ -46,8 +46,8 @@ feature 'Create New Merge Request', feature: true, js: true do
expect
(
page
).
to
have_content
(
'Source branch'
)
expect
(
page
).
to
have_content
(
'Target branch'
)
fi
rst
(
'.js-source-branch'
).
click
fi
rst
(
'.dropdown-source-branch .dropdown-content a'
,
text:
'orphaned-branch'
).
click
fi
nd
(
'.js-source-branch'
,
match: :first
).
click
fi
nd
(
'.dropdown-source-branch .dropdown-content a'
,
text:
'orphaned-branch'
,
match: :first
).
click
click_button
"Compare branches"
click_link
"Changes"
...
...
This diff is collapsed.
Click to expand it.
spec/features/merge_requests/versions_spec.rb
View file @
b8a63380
...
...
@@ -107,14 +107,13 @@ feature 'Merge Request versions', js: true, feature: true do
it
'should have 0 chages between versions'
do
page
.
within
'.mr-version-compare-dropdown'
do
expect
(
page
).
to
have_content
'version 1'
expect
(
find
(
'.dropdown-toggle'
)
).
to
have_content
'version 1'
end
page
.
within
'.mr-version-dropdown'
do
find
(
'.btn-default'
).
click
find
(
:link
,
'version 1'
).
trigger
(
'click'
)
click_link
'version 1'
end
expect
(
page
).
to
have_content
'0 changed files'
end
end
...
...
@@ -129,12 +128,12 @@ feature 'Merge Request versions', js: true, feature: true do
it
'should set the compared versions to be the same'
do
page
.
within
'.mr-version-compare-dropdown'
do
expect
(
page
).
to
have_content
'version 2'
expect
(
find
(
'.dropdown-toggle'
)
).
to
have_content
'version 2'
end
page
.
within
'.mr-version-dropdown'
do
find
(
'.btn-default'
).
click
find
(
:link
,
'version 1'
).
trigger
(
'click'
)
click_link
'version 1'
end
page
.
within
'.mr-version-compare-dropdown'
do
...
...
This diff is collapsed.
Click to expand it.
spec/features/projects/issuable_templates_spec.rb
View file @
b8a63380
...
...
@@ -163,12 +163,14 @@ feature 'issuable templates', feature: true, js: true do
end
def
select_template
(
name
)
first
(
'.js-issuable-selector'
).
click
first
(
'.js-issuable-selector-wrap .dropdown-content a'
,
text:
name
).
click
find
(
'.js-issuable-selector'
).
click
find
(
'.js-issuable-selector-wrap .dropdown-content a'
,
text:
name
,
match: :first
).
click
end
def
select_option
(
name
)
first
(
'.js-issuable-selector'
).
click
first
(
'.js-issuable-selector-wrap .dropdown-footer-list a'
,
text:
name
).
click
find
(
'.js-issuable-selector'
).
click
find
(
'.js-issuable-selector-wrap .dropdown-footer-list a'
,
text:
name
,
match: :first
).
click
end
end
This diff is collapsed.
Click to expand it.
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