Updated styles for Pikaday
This commit is contained in:
Phil Hughes
parent
df6f6e316a
commit
2b9457412c
8 changed files with 73 additions and 172 deletions
|
|
@ -27,7 +27,6 @@
|
|||
this.initGlDropdown();
|
||||
this.initRemoveDueDate();
|
||||
this.initDatePicker();
|
||||
this.initStopPropagation();
|
||||
}
|
||||
|
||||
initGlDropdown() {
|
||||
|
|
@ -48,8 +47,8 @@
|
|||
|
||||
const calendar = new Pikaday({
|
||||
field: $dueDateInput.get(0),
|
||||
theme: 'gitlab-theme',
|
||||
format: 'yyyy-mm-dd',
|
||||
defaultDate: new Date($dueDateInput.val()),
|
||||
onSelect: (dateText) => {
|
||||
const formattedDate = dateFormat(new Date(dateText), 'yyyy-mm-dd');
|
||||
|
||||
|
|
@ -64,6 +63,8 @@
|
|||
}
|
||||
});
|
||||
|
||||
calendar.setDate(new Date($dueDateInput.val()));
|
||||
|
||||
this.$datePicker.append(calendar.el);
|
||||
this.$datePicker.data('pikaday', calendar);
|
||||
}
|
||||
|
|
@ -85,11 +86,6 @@
|
|||
});
|
||||
}
|
||||
|
||||
initStopPropagation() {
|
||||
$(document).off('click', '.ui-datepicker-header a').on('click', '.ui-datepicker-header a', (e) => {
|
||||
return e.stopImmediatePropagation();
|
||||
});
|
||||
}
|
||||
|
||||
saveDueDate(isDropdown) {
|
||||
this.parseSelectedDate();
|
||||
|
|
@ -175,12 +171,13 @@
|
|||
const $datePicker = $(this);
|
||||
const calendar = new Pikaday({
|
||||
field: $datePicker.get(0),
|
||||
theme: 'gitlab-theme',
|
||||
format: 'yyyy-mm-dd',
|
||||
defaultDate: new Date($datePicker.val()),
|
||||
onSelect(dateText) {
|
||||
$datePicker.val(dateFormat(new Date(dateText), 'yyyy-mm-dd'));
|
||||
}
|
||||
});
|
||||
calendar.setDate(new Date($datePicker.val()));
|
||||
|
||||
$datePicker.data('pikaday', calendar);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -37,14 +37,15 @@
|
|||
this.initMoveDropdown();
|
||||
$issuableDueDate = $('#issuable-due-date');
|
||||
if ($issuableDueDate.length) {
|
||||
new Pikaday({
|
||||
var calendar = new Pikaday({
|
||||
field: $issuableDueDate.get(0),
|
||||
theme: 'gitlab-theme',
|
||||
format: 'yyyy-mm-dd',
|
||||
defaultDate: new Date($issuableDueDate.val()),
|
||||
onSelect: function(dateText) {
|
||||
$issuableDueDate.val(dateFormat(new Date(dateText), 'yyyy-mm-dd'));
|
||||
}
|
||||
});
|
||||
calendar.setDate(new Date($issuableDueDate.val()));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,9 +18,9 @@
|
|||
|
||||
const calendar = new Pikaday({
|
||||
field: $input.get(0),
|
||||
theme: 'gitlab-theme',
|
||||
format: 'yyyy-mm-dd',
|
||||
minDate: new Date(),
|
||||
defaultDate: new Date($input.val()),
|
||||
onSelect: (dateText) => {
|
||||
$input.val(dateFormat(new Date(dateText), 'yyyy-mm-dd'));
|
||||
|
||||
|
|
@ -30,6 +30,8 @@
|
|||
},
|
||||
});
|
||||
|
||||
calendar.setDate(new Date($input.val()));
|
||||
|
||||
$input.data('pikaday', calendar);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -43,3 +43,56 @@
|
|||
float: right;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.pika-single.gitlab-theme {
|
||||
.pika-label {
|
||||
color: $gl-gray;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
th {
|
||||
padding: 2px 0;
|
||||
color: $note-disabled-comment-color;
|
||||
font-weight: normal;
|
||||
text-transform: lowercase;
|
||||
border-top: 1px solid $calendar-border-color;
|
||||
}
|
||||
|
||||
abbr {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
td {
|
||||
border: 1px solid $calendar-border-color;
|
||||
|
||||
&:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.pika-day {
|
||||
border-radius: 0;
|
||||
background-color: $white-light;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.is-today {
|
||||
.pika-day {
|
||||
color: inherit;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.is-selected .pika-day,
|
||||
.pika-day:hover,
|
||||
.is-today .pika-day:hover {
|
||||
background: $gl-primary;
|
||||
color: $white-light;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -502,119 +502,16 @@
|
|||
max-height: 230px;
|
||||
}
|
||||
|
||||
.ui-widget {
|
||||
table {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&.ui-datepicker-inline {
|
||||
padding: 0 10px;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ui-datepicker-header {
|
||||
padding: 0 8px 10px;
|
||||
border: 0;
|
||||
|
||||
.ui-icon {
|
||||
background: none;
|
||||
font-size: 20px;
|
||||
text-indent: 0;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
color: $dropdown-title-btn-color;
|
||||
font: normal normal normal 14px/1 FontAwesome;
|
||||
font-size: inherit;
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ui-datepicker-calendar {
|
||||
.ui-state-hover,
|
||||
.ui-state-active {
|
||||
color: $white-light;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-datepicker-prev,
|
||||
.ui-datepicker-next {
|
||||
top: 0;
|
||||
height: 15px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
|
||||
.ui-icon::before {
|
||||
color: $md-link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ui-datepicker-prev {
|
||||
left: 0;
|
||||
|
||||
.ui-icon::before {
|
||||
content: '\f104';
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-datepicker-next {
|
||||
right: 0;
|
||||
|
||||
.ui-icon::before {
|
||||
content: '\f105';
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0;
|
||||
border: 1px solid $calendar-border-color;
|
||||
|
||||
&:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
line-height: 17px;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-datepicker-title {
|
||||
color: $gl-text-color;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
font-weight: normal;
|
||||
}
|
||||
.pika-single {
|
||||
position: relative!important;
|
||||
top: 0!important;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
th {
|
||||
padding: 2px 0;
|
||||
color: $note-disabled-comment-color;
|
||||
font-weight: normal;
|
||||
text-transform: lowercase;
|
||||
border-top: 1px solid $calendar-border-color;
|
||||
}
|
||||
|
||||
.ui-datepicker-unselectable {
|
||||
background-color: $gray-light;
|
||||
.pika-lendar {
|
||||
margin-top: -5px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,42 +2,6 @@
|
|||
font-family: $regular_font;
|
||||
font-size: $font-size-base;
|
||||
|
||||
&.ui-datepicker,
|
||||
&.ui-datepicker-inline {
|
||||
border: 1px solid $jq-ui-border;
|
||||
padding: 10px;
|
||||
width: 270px;
|
||||
|
||||
.ui-datepicker-header {
|
||||
background: $white-light;
|
||||
border-color: $jq-ui-border;
|
||||
|
||||
.ui-datepicker-prev,
|
||||
.ui-datepicker-next {
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.ui-datepicker-prev {
|
||||
left: 2px;
|
||||
}
|
||||
|
||||
.ui-datepicker-next {
|
||||
right: 2px;
|
||||
}
|
||||
|
||||
.ui-state-hover {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-datepicker-calendar td a {
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&.ui-autocomplete {
|
||||
border-color: $jq-ui-border;
|
||||
padding: 0;
|
||||
|
|
@ -59,16 +23,6 @@
|
|||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.ui-datepicker-calendar {
|
||||
.ui-state-active,
|
||||
.ui-state-hover,
|
||||
.ui-state-focus {
|
||||
border: 1px solid $gl-primary;
|
||||
background: $gl-primary;
|
||||
color: $white-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ui-sortable-handle {
|
||||
|
|
|
|||
|
|
@ -201,10 +201,6 @@
|
|||
color: $note-disabled-comment-color;
|
||||
}
|
||||
|
||||
.datepicker.personal-access-tokens-expires-at .ui-state-disabled span {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.created-personal-access-token-container {
|
||||
#created-personal-access-token {
|
||||
width: 90%;
|
||||
|
|
|
|||
|
|
@ -90,6 +90,7 @@
|
|||
|
||||
new Pikaday({
|
||||
field: $dateField.get(0),
|
||||
theme: 'gitlab-theme',
|
||||
format: 'yyyy-mm-dd',
|
||||
minDate: new Date(),
|
||||
onSelect: function(dateText) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue