Commit 1f7bc0c5 authored by Clement Ho's avatar Clement Ho

Merge branch '26208-animate-drodowns' into 'master'

Adding animation for all dropdown

Closes #26208

See merge request !8419
parents c76812c7 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'));
}
......
......@@ -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'));
}
......
......@@ -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'));
......
......@@ -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;
}
......@@ -329,6 +329,7 @@ header {
.header-user {
.dropdown-menu-nav {
width: auto;
min-width: 140px;
margin-top: -5px;
......
......@@ -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);
......@@ -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 {
......
......@@ -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'));
}
......
......@@ -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.pull-right.prepend-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.pull-right.prepend-top-5.js-clear-due-date{ href: "#" } Clear due date
---
title: Add animations to all the dropdowns
merge_request: 8419
author:
......@@ -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
......@@ -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
first('.create-new-branch', visible: true).click
first('#new_branch_name', visible: true).set('new_branch_name')
first('.js-new-branch-btn', visible: true).click
find('.create-new-branch', visible: true).click
find('#new_branch_name', visible: true).set('new_branch_name')
find('.js-new-branch-btn', visible: true).click
end
step 'I fill the new file name with an illegal name' do
......
......@@ -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
......
......@@ -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
first('.dropdown-source-branch .dropdown-content a', text: 'v1.1.0').click
find('.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')
first('.js-source-branch').click
first('.dropdown-source-branch .dropdown-content a', text: 'orphaned-branch').click
find('.js-source-branch', match: :first).click
find('.dropdown-source-branch .dropdown-content a', text: 'orphaned-branch', match: :first).click
click_button "Compare branches"
click_link "Changes"
......
......@@ -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
......
......@@ -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
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