summaryrefslogtreecommitdiff
path: root/app
diff options
context:
space:
mode:
Diffstat (limited to 'app')
-rw-r--r--app/assets/javascripts/due_date_select.js3
-rw-r--r--app/assets/javascripts/issuable_form.js3
-rw-r--r--app/assets/javascripts/member_expiration_date.js3
-rw-r--r--app/assets/stylesheets/framework/dropdowns.scss71
-rw-r--r--app/assets/stylesheets/framework/header.scss1
-rw-r--r--app/assets/stylesheets/framework/variables.scss5
-rw-r--r--app/assets/stylesheets/pages/search.scss15
-rw-r--r--app/views/shared/_personal_access_tokens_form.html.haml3
-rw-r--r--app/views/shared/milestones/_form_dates.html.haml4
9 files changed, 99 insertions, 9 deletions
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
View Lorry Controller Status