mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #5713 from nextcloud/datepicker-redesign 

Redesign jQuery UI datepicker
This commit is contained in:
Marius Blüm 2017-07-23 22:06:18 +02:00 committed by GitHub
parent 2e7e03b2f7 25d29f06bc
commit 05d979c665
6 changed files with 85 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
core/css/header.scss
View File

@ -211,7 +211,8 @@ nav {
margin-left: -54px;
}
#navigation {
#navigation,
.ui-datepicker {
position: relative;
left: -100%;
width: 160px;

5
core/css/inputs.scss
View File

@ -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 */

77
core/css/styles.scss
View File

@ -964,6 +964,83 @@ code {
background-image: url('../img/actions/play-previous.svg?v=1');
}
/* ---- jQuery UI datepicker ---- */
.ui-widget.ui-datepicker {
margin-top: 10px;
padding: 4px 8px;
width: auto;
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
border: 1px solid transparent;
background: inherit;
}
.ui-widget-header {
padding: 7px;
font-size: 13px;
border: none;
background-color: $color-main-background;
color: $color-main-text;
.ui-datepicker-title {
line-height: 1;
font-weight: 300;
}
.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-datepicker-calendar {
th {
font-weight: normal;
color: nc-lighten($color-main-text, 33%);
opacity: .8;
}
tr:hover {
background-color: inherit;
}
td {
> * {
border-radius: 50%;
text-align: center;
font-weight: normal;
color: $color-main-text;
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 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%);
opacity: .8;
}
}
}
}
.ui-datepicker-prev, .ui-datepicker-next {
border: nc-lighten($color-main-text, 86%);
background: $color-main-background;

1
core/img/actions/arrow-left.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 140 B

1
core/img/actions/arrow-right.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 142 B

2
lib/private/legacy/template.php
View File

@ -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);