From 586eb3ed0a3bdd8750f92fcc67d378989413c2bd Mon Sep 17 00:00:00 2001 From: Marin Treselj Date: Thu, 13 Jul 2017 15:15:29 +0200 Subject: [PATCH 1/7] Redesign jQuery UI datepicker Signed-off-by: Marin Treselj --- core/css/apps.scss | 3 +- core/css/inputs.scss | 5 +- core/css/styles.scss | 79 ++++++++++++++++++++++++++++++++ core/img/actions/arrow-left.svg | 1 + core/img/actions/arrow-right.svg | 1 + lib/private/legacy/template.php | 2 +- 6 files changed, 87 insertions(+), 4 deletions(-) create mode 100644 core/img/actions/arrow-left.svg create mode 100644 core/img/actions/arrow-right.svg diff --git a/core/css/apps.scss b/core/css/apps.scss index fd26f46bcd..e4592ad948 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -595,7 +595,8 @@ kbd { .bubble, .app-navigation-entry-menu, -.popovermenu { +.popovermenu, +.ui-datepicker { position: absolute; background-color: $color-main-background; color: nc-lighten($color-main-text, 20%); diff --git a/core/css/inputs.scss b/core/css/inputs.scss index 13a164e13f..3ea90d322b 100644 --- a/core/css/inputs.scss +++ b/core/css/inputs.scss @@ -492,8 +492,9 @@ input { } .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { - border: none; - background: nc-darken($color-main-background, 3%); + border: 1px solid transparent; + background: inherit; + color: $color-primary; } /* Animation */ diff --git a/core/css/styles.scss b/core/css/styles.scss index 35fc300eaf..8cb3033be5 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -964,6 +964,85 @@ code { background-image: url('../img/actions/play-previous.svg?v=1'); } +/* ---- jQuery UI datepicker ---- */ +.ui-widget.ui-datepicker { + margin-left: -110px !important; + margin-top: 10px; + border-radius: 3px; + + .ui-state-default, + .ui-widget-content .ui-state-default, + .ui-widget-header .ui-state-default { + border: 1px solid transparent; + background: inherit; + } + + .ui-state-hover, + .ui-state-focus { + background: inherit; + color: $color-primary; + } + + .ui-widget-header { + margin: 3px 3px 3px 0; + padding: 7px 6px; + font-size: 13px; + border: none; // 1px solid #dbdbdb; + border-radius: 3px; + background-color: $color-main-background; + color: $color-main-text; + + .ui-datepicker-title { + line-height: 1; + } + + .ui-icon { + opacity: .5; + } + + .ui-state-hover .ui-icon { + opacity: 1; + } + + .ui-icon.ui-icon-circle-triangle-e { + background: url("../img/actions/arrow-right.svg") center center no-repeat; + } + + .ui-icon.ui-icon-circle-triangle-w { + background: url("../img/actions/arrow-left.svg") center center no-repeat; + } + } + + .ui-datepicker-calendar { + th.ui-datepicker-week-end { + color: $color-primary; + } + + td { + padding: 0; + + a { + border-radius: 3px; + text-align: center; + } + + &.ui-datepicker-week-end a { + color: $color-primary; + } + + &.ui-datepicker-today a { + background-color: nc-lighten($color-main-text, 86%); + } + + &.ui-datepicker-current-day .ui-state-active { + background-color: $color-primary; + color: $color-primary-text; + } + } + } +} + + .ui-datepicker-prev, .ui-datepicker-next { border: nc-lighten($color-main-text, 86%); background: $color-main-background; diff --git a/core/img/actions/arrow-left.svg b/core/img/actions/arrow-left.svg new file mode 100644 index 0000000000..34b2fda242 --- /dev/null +++ b/core/img/actions/arrow-left.svg @@ -0,0 +1 @@ + diff --git a/core/img/actions/arrow-right.svg b/core/img/actions/arrow-right.svg new file mode 100644 index 0000000000..102b9cf6b5 --- /dev/null +++ b/core/img/actions/arrow-right.svg @@ -0,0 +1 @@ + diff --git a/lib/private/legacy/template.php b/lib/private/legacy/template.php index 4f7c11d0b6..f5ee233683 100644 --- a/lib/private/legacy/template.php +++ b/lib/private/legacy/template.php @@ -108,9 +108,9 @@ class OC_Template extends \OC\Template\Base { } } + OC_Util::addStyle('server', null, true); OC_Util::addStyle('jquery-ui-fixes',null,true); OC_Util::addVendorStyle('jquery-ui/themes/base/jquery-ui',null,true); - OC_Util::addStyle('server', null, true); OC_Util::addVendorStyle('select2/select2', null, true); OC_Util::addStyle('jquery.ocdialog'); OC_Util::addTranslations("core", null, true); From 82a52a8f1706c83915e4462bc6845da7eb33acfd Mon Sep 17 00:00:00 2001 From: Marin Treselj Date: Fri, 14 Jul 2017 15:05:41 +0200 Subject: [PATCH 2/7] Fixes issues mentioned in comments. - [x] Highlight for selected date should be bold text. - [x] Hover highlight for day should be the same as for the selected date. - [x] Remove hover effect on the week. - [x] Row for days of the week should indeed stay, but non-bold and at 50% opacity so it doesn't take away the focus. - [x] Dates of previous and next months a bit lighter. - [x] Remove marking the weekend blue. - [x] The box centered below the date field, with triangle in the middle. Signed-off-by: Marin Treselj --- core/css/header.scss | 3 ++- core/css/styles.scss | 31 +++++++++++++++++-------------- 2 files changed, 19 insertions(+), 15 deletions(-) diff --git a/core/css/header.scss b/core/css/header.scss index 2e06c13d22..41bb578309 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -211,7 +211,8 @@ nav { margin-left: -54px; } -#navigation { +#navigation, +.ui-datepicker { position: relative; left: -100%; width: 160px; diff --git a/core/css/styles.scss b/core/css/styles.scss index 8cb3033be5..a2e8288910 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -966,9 +966,7 @@ code { /* ---- jQuery UI datepicker ---- */ .ui-widget.ui-datepicker { - margin-left: -110px !important; margin-top: 10px; - border-radius: 3px; .ui-state-default, .ui-widget-content .ui-state-default, @@ -977,12 +975,6 @@ code { background: inherit; } - .ui-state-hover, - .ui-state-focus { - background: inherit; - color: $color-primary; - } - .ui-widget-header { margin: 3px 3px 3px 0; padding: 7px 6px; @@ -1014,8 +1006,13 @@ code { } .ui-datepicker-calendar { - th.ui-datepicker-week-end { - color: $color-primary; + th { + font-weight: normal; + color: nc-lighten($color-main-text, 33%); + } + + tr:hover { + background-color: inherit; } td { @@ -1024,19 +1021,25 @@ code { a { border-radius: 3px; text-align: center; + font-weight: normal; + color: $color-main-text; } - &.ui-datepicker-week-end a { - color: $color-primary; + &.ui-datepicker-week-end a:not(.ui-state-hover), + .ui-priority-secondary { + color: nc-lighten($color-main-text, 33%); } - &.ui-datepicker-today a { + &.ui-datepicker-today a:not(.ui-state-hover) { background-color: nc-lighten($color-main-text, 86%); } - &.ui-datepicker-current-day .ui-state-active { + &.ui-datepicker-current-day .ui-state-active, + .ui-state-hover, + .ui-state-focus { background-color: $color-primary; color: $color-primary-text; + font-weight: bold; } } } From db6619fcf4b00147377eda09a7ecc3e704704e57 Mon Sep 17 00:00:00 2001 From: Marin Treselj Date: Fri, 14 Jul 2017 15:14:25 +0200 Subject: [PATCH 3/7] Add padding to popover Signed-off-by: Marin Treselj --- core/css/styles.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/core/css/styles.scss b/core/css/styles.scss index a2e8288910..d67d78c2dc 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -967,6 +967,7 @@ code { /* ---- jQuery UI datepicker ---- */ .ui-widget.ui-datepicker { margin-top: 10px; + padding: 4px 8px; .ui-state-default, .ui-widget-content .ui-state-default, From b26d133e28fb46d49f297c6835f097c6cdfaefc8 Mon Sep 17 00:00:00 2001 From: Marin Treselj Date: Fri, 14 Jul 2017 15:18:13 +0200 Subject: [PATCH 4/7] Remove deprecation Signed-off-by: Marin Treselj --- core/css/apps.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index e4592ad948..fd26f46bcd 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -595,8 +595,7 @@ kbd { .bubble, .app-navigation-entry-menu, -.popovermenu, -.ui-datepicker { +.popovermenu { position: absolute; background-color: $color-main-background; color: nc-lighten($color-main-text, 20%); From 0ba8903aad3f58619e2cd8adcbe0fdd079d6f80c Mon Sep 17 00:00:00 2001 From: Marin Treselj Date: Mon, 17 Jul 2017 11:08:40 +0200 Subject: [PATCH 5/7] Make dates slightly larger and perfectly rounded. SCSS cleanup, fix fringe cases, add margin between dates, un-bold title. Signed-off-by: Marin Treselj --- core/css/styles.scss | 50 +++++++++++++++++++------------------------- 1 file changed, 21 insertions(+), 29 deletions(-) diff --git a/core/css/styles.scss b/core/css/styles.scss index d67d78c2dc..f453525e6a 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -968,6 +968,7 @@ code { .ui-widget.ui-datepicker { margin-top: 10px; padding: 4px 8px; + width: auto; .ui-state-default, .ui-widget-content .ui-state-default, @@ -975,78 +976,69 @@ code { border: 1px solid transparent; background: inherit; } - .ui-widget-header { - margin: 3px 3px 3px 0; - padding: 7px 6px; + padding: 7px; font-size: 13px; - border: none; // 1px solid #dbdbdb; - border-radius: 3px; + font-weight: normal; + border: none; background-color: $color-main-background; color: $color-main-text; .ui-datepicker-title { line-height: 1; } - .ui-icon { opacity: .5; - } + &.ui-icon-circle-triangle-e { + background: url("../img/actions/arrow-right.svg") center center no-repeat; + } + &.ui-icon-circle-triangle-w { + background: url("../img/actions/arrow-left.svg") center center no-repeat; + } + } .ui-state-hover .ui-icon { opacity: 1; } - - .ui-icon.ui-icon-circle-triangle-e { - background: url("../img/actions/arrow-right.svg") center center no-repeat; - } - - .ui-icon.ui-icon-circle-triangle-w { - background: url("../img/actions/arrow-left.svg") center center no-repeat; - } } - .ui-datepicker-calendar { th { font-weight: normal; color: nc-lighten($color-main-text, 33%); } - tr:hover { background-color: inherit; } - td { - padding: 0; - - a { - border-radius: 3px; + > * { + border-radius: 50%; text-align: center; font-weight: normal; color: $color-main-text; - } - - &.ui-datepicker-week-end a:not(.ui-state-hover), - .ui-priority-secondary { - color: nc-lighten($color-main-text, 33%); + padding: 6px; + line-height: 12px; } &.ui-datepicker-today a:not(.ui-state-hover) { background-color: nc-lighten($color-main-text, 86%); } - &.ui-datepicker-current-day .ui-state-active, + &.ui-datepicker-current-day a.ui-state-active, .ui-state-hover, .ui-state-focus { background-color: $color-primary; color: $color-primary-text; font-weight: bold; } + + &.ui-datepicker-week-end :not(.ui-state-hover), + .ui-priority-secondary:not(.ui-state-hover) { + color: nc-lighten($color-main-text, 33%); + } } } } - .ui-datepicker-prev, .ui-datepicker-next { border: nc-lighten($color-main-text, 86%); background: $color-main-background; From d138324eef5d2d77aa2effaff18ec0f707068c9e Mon Sep 17 00:00:00 2001 From: Marin Treselj Date: Fri, 21 Jul 2017 09:12:38 +0200 Subject: [PATCH 6/7] Make weekday names brighter, lighter month/year title. Signed-off-by: Marin Treselj --- core/css/styles.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/core/css/styles.scss b/core/css/styles.scss index f453525e6a..8e64452e31 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -979,7 +979,7 @@ code { .ui-widget-header { padding: 7px; font-size: 13px; - font-weight: normal; + font-weight: 300; border: none; background-color: $color-main-background; color: $color-main-text; @@ -1005,6 +1005,7 @@ code { th { font-weight: normal; color: nc-lighten($color-main-text, 33%); + opacity: .8; } tr:hover { background-color: inherit; @@ -1034,6 +1035,7 @@ code { &.ui-datepicker-week-end :not(.ui-state-hover), .ui-priority-secondary:not(.ui-state-hover) { color: nc-lighten($color-main-text, 33%); + opacity: .8; } } } From 25d29f06bc5eee77470bb4a17638a65d26413e3f Mon Sep 17 00:00:00 2001 From: Marin Treselj Date: Fri, 21 Jul 2017 09:26:54 +0200 Subject: [PATCH 7/7] Fix font-weight for datepicker title. Signed-off-by: Marin Treselj --- core/css/styles.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/css/styles.scss b/core/css/styles.scss index 8e64452e31..f2acca38e1 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -979,13 +979,13 @@ code { .ui-widget-header { padding: 7px; font-size: 13px; - font-weight: 300; border: none; background-color: $color-main-background; color: $color-main-text; .ui-datepicker-title { line-height: 1; + font-weight: 300; } .ui-icon { opacity: .5;