From 586eb3ed0a3bdd8750f92fcc67d378989413c2bd Mon Sep 17 00:00:00 2001
From: Marin Treselj <marin@pixelipo.com>
Date: Thu, 13 Jul 2017 15:15:29 +0200
Subject: [PATCH] Redesign jQuery UI datepicker
Signed-off-by: Marin Treselj <marin@pixelipo.com>
---
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 fd26f46bcdb..e4592ad9489 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 13a164e13f2..3ea90d322bb 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 35fc300eafe..8cb3033be51 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 00000000000..34b2fda2426
--- /dev/null
+++ b/core/img/actions/arrow-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1" viewbox="0 0 16 16"><path d="m5.5 8 6 6v1l-7-7 7-7v1z"/></svg>
diff --git a/core/img/actions/arrow-right.svg b/core/img/actions/arrow-right.svg
new file mode 100644
index 00000000000..102b9cf6b5b
--- /dev/null
+++ b/core/img/actions/arrow-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1" viewbox="0 0 16 16"><path d="m10.5 8-6-6v-1l7 7-7 7v-1z"/></svg>
diff --git a/lib/private/legacy/template.php b/lib/private/legacy/template.php
index 4f7c11d0b64..f5ee2336831 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);
--
GitLab