From b8a63380324e05b0c46fe1ce216c6602fca0ef99 Mon Sep 17 00:00:00 2001 From: Nur Rony Date: Fri, 21 Apr 2017 15:05:38 +0000 Subject: Adding animation for all dropdown --- app/assets/javascripts/due_date_select.js | 3 +- app/assets/javascripts/issuable_form.js | 3 +- app/assets/javascripts/member_expiration_date.js | 3 +- app/assets/stylesheets/framework/dropdowns.scss | 71 +++++++++++++++++++++- app/assets/stylesheets/framework/header.scss | 1 + app/assets/stylesheets/framework/variables.scss | 5 ++ app/assets/stylesheets/pages/search.scss | 15 ++++- .../shared/_personal_access_tokens_form.html.haml | 3 +- app/views/shared/milestones/_form_dates.html.haml | 4 +- changelogs/unreleased/26208-animate-drodowns.yml | 4 ++ features/steps/project/commits/commits.rb | 2 + features/steps/project/source/browse_files.rb | 6 +- spec/features/issues_spec.rb | 3 +- spec/features/merge_requests/create_new_mr_spec.rb | 8 +-- spec/features/merge_requests/versions_spec.rb | 9 ++- spec/features/projects/issuable_templates_spec.rb | 10 +-- 16 files changed, 124 insertions(+), 26 deletions(-) create mode 100644 changelogs/unreleased/26208-animate-drodowns.yml diff --git a/app/assets/javascripts/due_date_select.js b/app/assets/javascripts/due_date_select.js index dd95b6530f6..a8fc5b41fb4 100644 --- a/app/assets/javascripts/due_date_select.js +++ b/app/assets/javascripts/due_date_select.js @@ -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')); } diff --git a/app/assets/javascripts/issuable_form.js b/app/assets/javascripts/issuable_form.js index de184ab2675..687c2bb6110 100644 --- a/app/assets/javascripts/issuable_form.js +++ b/app/assets/javascripts/issuable_form.js @@ -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')); } diff --git a/app/assets/javascripts/member_expiration_date.js b/app/assets/javascripts/member_expiration_date.js index 129d2dc5f0a..e034729bd39 100644 --- a/app/assets/javascripts/member_expiration_date.js +++ b/app/assets/javascripts/member_expiration_date.js @@ -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')); diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index b87e712c763..30d785464ac 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -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; +} diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 0077ea41d3b..6d9218310eb 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -329,6 +329,7 @@ header { .header-user { .dropdown-menu-nav { + width: auto; min-width: 140px; margin-top: -5px; diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 3ef6ec3f912..ad592a45941 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -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); diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss index 543d2ece3df..b9818ffcf42 100644 --- a/app/assets/stylesheets/pages/search.scss +++ b/app/assets/stylesheets/pages/search.scss @@ -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 { diff --git a/app/views/shared/_personal_access_tokens_form.html.haml b/app/views/shared/_personal_access_tokens_form.html.haml index e8062848fc3..b20055a564e 100644 --- a/app/views/shared/_personal_access_tokens_form.html.haml +++ b/app/views/shared/_personal_access_tokens_form.html.haml @@ -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')); } diff --git a/app/views/shared/milestones/_form_dates.html.haml b/app/views/shared/milestones/_form_dates.html.haml index ed94773ef89..a74cdbe274b 100644 --- a/app/views/shared/milestones/_form_dates.html.haml +++ b/app/views/shared/milestones/_form_dates.html.haml @@ -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 diff --git a/changelogs/unreleased/26208-animate-drodowns.yml b/changelogs/unreleased/26208-animate-drodowns.yml new file mode 100644 index 00000000000..580f6c12f67 --- /dev/null +++ b/changelogs/unreleased/26208-animate-drodowns.yml @@ -0,0 +1,4 @@ +--- +title: Add animations to all the dropdowns +merge_request: 8419 +author: diff --git a/features/steps/project/commits/commits.rb b/features/steps/project/commits/commits.rb index 97ffd4b4ea2..de737cdc823 100644 --- a/features/steps/project/commits/commits.rb +++ b/features/steps/project/commits/commits.rb @@ -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 diff --git a/features/steps/project/source/browse_files.rb b/features/steps/project/source/browse_files.rb index f5e8f7a7c32..b4741f06d1b 100644 --- a/features/steps/project/source/browse_files.rb +++ b/features/steps/project/source/browse_files.rb @@ -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 diff --git a/spec/features/issues_spec.rb b/spec/features/issues_spec.rb index 362d167befa..55eca187f6c 100644 --- a/spec/features/issues_spec.rb +++ b/spec/features/issues_spec.rb @@ -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 diff --git a/spec/features/merge_requests/create_new_mr_spec.rb b/spec/features/merge_requests/create_new_mr_spec.rb index 3a4ec07b2b0..16b09933bda 100644 --- a/spec/features/merge_requests/create_new_mr_spec.rb +++ b/spec/features/merge_requests/create_new_mr_spec.rb @@ -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" diff --git a/spec/features/merge_requests/versions_spec.rb b/spec/features/merge_requests/versions_spec.rb index 68a68f5d3f3..7a2da623c58 100644 --- a/spec/features/merge_requests/versions_spec.rb +++ b/spec/features/merge_requests/versions_spec.rb @@ -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 diff --git a/spec/features/projects/issuable_templates_spec.rb b/spec/features/projects/issuable_templates_spec.rb index 62d0aedda48..6cdca0f114b 100644 --- a/spec/features/projects/issuable_templates_spec.rb +++ b/spec/features/projects/issuable_templates_spec.rb @@ -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 -- cgit v1.2.1