New sidebar structure
This commit is contained in:
Raimund Schlüßler
Родитель
03e2db4b83
Коммит
79186be77b
|
|
@ -167,6 +167,191 @@
|
|||
overflow-y: auto;
|
||||
position: relative;
|
||||
|
||||
.section {
|
||||
border-bottom: 1px dotted $gray;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
width: 100%;
|
||||
|
||||
> div {
|
||||
padding-left: 12px;
|
||||
line-height: 44px;
|
||||
|
||||
&.utils {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
padding-right: 15px;
|
||||
|
||||
a {
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
color: $gray;
|
||||
font-weight: bold;
|
||||
margin-left: 12px;
|
||||
line-height: 22px;
|
||||
width: calc(100% - 100px);
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin: 0;
|
||||
float: unset;
|
||||
}
|
||||
}
|
||||
|
||||
&.low,
|
||||
&.date {
|
||||
.section-title {
|
||||
color: $blue_due;
|
||||
}
|
||||
}
|
||||
|
||||
&.high .section-title {
|
||||
color: $red_overdue;
|
||||
}
|
||||
|
||||
&.medium .section-title {
|
||||
color: $yellow;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: $white;
|
||||
border: 1px solid $blue_background;
|
||||
border-radius: 0;
|
||||
margin-top: 0;
|
||||
color: $gray_dark;
|
||||
font-weight: 500;
|
||||
outline: medium none;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
border: medium none;
|
||||
box-shadow: none;
|
||||
width: calc(100% - 50px);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
box-shadow: 0 0 4px rgba($blue_background, .3), 0 1px 1px rgba($white, .4), 0 2px 4px rgba($blue_background, .1) inset, 0 0 4px rgba($blue_background, .2) inset;
|
||||
background: none repeat scroll 0 0 $gray_easy;
|
||||
margin: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
select {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
border-radius: 0;
|
||||
border: 1px solid $gray_light;
|
||||
padding: 0;
|
||||
width: 98px;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
height: 19px;
|
||||
}
|
||||
|
||||
.section-edit {
|
||||
display: none;
|
||||
margin-left: 12px;
|
||||
vertical-align: middle;
|
||||
width: calc(100% - 80px);
|
||||
}
|
||||
|
||||
&.editing {
|
||||
.icon {
|
||||
&.detail-save,
|
||||
&.icon-trash {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.section-edit {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
&.date {
|
||||
.icon.icon-percent {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover .icon.icon-trash {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.detail-note {
|
||||
padding: 20px 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.detail-categories-container {
|
||||
width: calc(100% - 40px);
|
||||
display: inline-block;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
&.detail-categories .select2-container-multi {
|
||||
.select2-choices {
|
||||
border: 1px solid transparent;
|
||||
|
||||
.select2-search-choice {
|
||||
color: $blue_due;
|
||||
font-weight: bold;
|
||||
line-height: 14px;
|
||||
margin: 2px 0 3px 5px;
|
||||
background-image: none;
|
||||
background-color: $gray_easy;
|
||||
box-shadow: none;
|
||||
border-color: $gray_light;
|
||||
min-height: 22px;
|
||||
|
||||
a.select2-search-choice-close {
|
||||
opacity: .4;
|
||||
display: initial;
|
||||
|
||||
@extend .icon;
|
||||
@extend .icon-close;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container-disabled .select2-choices {
|
||||
background-color: $white;
|
||||
background-image: none;
|
||||
border: none;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-search-field input {
|
||||
border: 0 none;
|
||||
box-shadow: none;
|
||||
font-weight: bold;
|
||||
margin-top: 0;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
&.active .select2-search-field input {
|
||||
color: $blue_due;
|
||||
}
|
||||
}
|
||||
|
||||
.note {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
|
|
@ -265,134 +450,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
border-bottom: 1px dotted $gray;
|
||||
height: 46px;
|
||||
padding: 9px 20px 9px 55px;
|
||||
position: relative;
|
||||
border-top: none;
|
||||
margin-bottom: 0;
|
||||
|
||||
.section-title {
|
||||
color: $gray;
|
||||
font-weight: bold;
|
||||
margin-top: 3px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.low,
|
||||
&.date {
|
||||
.section-title {
|
||||
color: $blue_due;
|
||||
}
|
||||
}
|
||||
|
||||
&.high .section-title {
|
||||
color: $red_overdue;
|
||||
}
|
||||
|
||||
&.medium .section-title {
|
||||
color: $yellow;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: $white;
|
||||
border: 1px solid $blue_background;
|
||||
border-radius: 0;
|
||||
margin-top: 0;
|
||||
color: $gray_dark;
|
||||
font-weight: 500;
|
||||
outline: medium none;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
border: medium none;
|
||||
box-shadow: none;
|
||||
width: calc(100% - 90px);
|
||||
margin: 0 36px 0 5px;
|
||||
height: 28px;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
box-shadow: 0 0 4px rgba($blue_background, .3), 0 1px 1px rgba($white, .4), 0 2px 4px rgba($blue_background, .1) inset, 0 0 4px rgba($blue_background, .2) inset;
|
||||
background: none repeat scroll 0 0 $gray_easy;
|
||||
float: left;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
select {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
border-radius: 0;
|
||||
border: 1px solid $gray_light;
|
||||
padding: 0;
|
||||
width: 98px;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
height: 19px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
left: 16px;
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
}
|
||||
|
||||
.section-edit {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.editing {
|
||||
.icon {
|
||||
&.detail-save,
|
||||
&.icon-trash {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.section-edit {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.date {
|
||||
.icon.icon-percent {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover .icon.icon-trash {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.detail-categories {
|
||||
height: auto;
|
||||
padding-left: 50px;
|
||||
}
|
||||
|
||||
&.detail-note {
|
||||
padding: 20px 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.select2-search-field input {
|
||||
border: 0 none;
|
||||
box-shadow: none;
|
||||
font-weight: bold;
|
||||
margin-top: 0;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
&.active .select2-search-field input {
|
||||
color: $blue_due;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.completed .body .section .section-title {
|
||||
|
|
@ -444,40 +501,3 @@ input {
|
|||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-categories .select2-container-multi {
|
||||
.select2-choices {
|
||||
border: 1px solid transparent;
|
||||
|
||||
.select2-search-choice {
|
||||
color: $blue_due;
|
||||
font-weight: bold;
|
||||
line-height: 14px;
|
||||
margin: 2px 0 3px 5px;
|
||||
background-image: none;
|
||||
background-color: $gray_easy;
|
||||
box-shadow: none;
|
||||
border-color: $gray_light;
|
||||
min-height: 22px;
|
||||
|
||||
a.select2-search-choice-close {
|
||||
opacity: .4;
|
||||
display: initial;
|
||||
|
||||
@extend .icon;
|
||||
@extend .icon-close;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container-disabled .select2-choices {
|
||||
background-color: $white;
|
||||
background-image: none;
|
||||
border: none;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
350
css/style.scss
350
css/style.scss
|
|
@ -913,6 +913,191 @@ tr:last-child .task-item {
|
|||
overflow-y: auto;
|
||||
position: relative;
|
||||
|
||||
.section {
|
||||
border-bottom: 1px dotted $gray;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
width: 100%;
|
||||
|
||||
> div {
|
||||
padding-left: 12px;
|
||||
line-height: 44px;
|
||||
|
||||
&.utils {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
padding-right: 15px;
|
||||
|
||||
a {
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
color: $gray;
|
||||
font-weight: bold;
|
||||
margin-left: 12px;
|
||||
line-height: 22px;
|
||||
width: calc(100% - 100px);
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin: 0;
|
||||
float: unset;
|
||||
}
|
||||
}
|
||||
|
||||
&.low,
|
||||
&.date {
|
||||
.section-title {
|
||||
color: $blue_due;
|
||||
}
|
||||
}
|
||||
|
||||
&.high .section-title {
|
||||
color: $red_overdue;
|
||||
}
|
||||
|
||||
&.medium .section-title {
|
||||
color: $yellow;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: $white;
|
||||
border: 1px solid $blue_background;
|
||||
border-radius: 0;
|
||||
margin-top: 0;
|
||||
color: $gray_dark;
|
||||
font-weight: 500;
|
||||
outline: medium none;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
border: medium none;
|
||||
box-shadow: none;
|
||||
width: calc(100% - 50px);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
box-shadow: 0 0 4px rgba($blue_background, .3), 0 1px 1px rgba($white, .4), 0 2px 4px rgba($blue_background, .1) inset, 0 0 4px rgba($blue_background, .2) inset;
|
||||
background: none repeat scroll 0 0 $gray_easy;
|
||||
margin: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
select {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
border-radius: 0;
|
||||
border: 1px solid $gray_light;
|
||||
padding: 0;
|
||||
width: 98px;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
height: 19px;
|
||||
}
|
||||
|
||||
.section-edit {
|
||||
display: none;
|
||||
margin-left: 12px;
|
||||
vertical-align: middle;
|
||||
width: calc(100% - 80px);
|
||||
}
|
||||
|
||||
&.editing {
|
||||
.icon {
|
||||
&.detail-save,
|
||||
&.icon-trash {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.section-edit {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
&.date {
|
||||
.icon.icon-percent {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover .icon.icon-trash {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.detail-note {
|
||||
padding: 20px 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.detail-categories-container {
|
||||
width: calc(100% - 40px);
|
||||
display: inline-block;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
&.detail-categories .select2-container-multi {
|
||||
.select2-choices {
|
||||
border: 1px solid transparent;
|
||||
|
||||
.select2-search-choice {
|
||||
color: $blue_due;
|
||||
font-weight: bold;
|
||||
line-height: 14px;
|
||||
margin: 2px 0 3px 5px;
|
||||
background-image: none;
|
||||
background-color: $gray_easy;
|
||||
box-shadow: none;
|
||||
border-color: $gray_light;
|
||||
min-height: 22px;
|
||||
|
||||
a.select2-search-choice-close {
|
||||
opacity: .4;
|
||||
display: initial;
|
||||
|
||||
@extend .icon;
|
||||
@extend .icon-close;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container-disabled .select2-choices {
|
||||
background-color: $white;
|
||||
background-image: none;
|
||||
border: none;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-search-field input {
|
||||
border: 0 none;
|
||||
box-shadow: none;
|
||||
font-weight: bold;
|
||||
margin-top: 0;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
&.active .select2-search-field input {
|
||||
color: $blue_due;
|
||||
}
|
||||
}
|
||||
|
||||
.note {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
|
|
@ -1011,134 +1196,6 @@ tr:last-child .task-item {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
border-bottom: 1px dotted $gray;
|
||||
height: 46px;
|
||||
padding: 9px 20px 9px 55px;
|
||||
position: relative;
|
||||
border-top: none;
|
||||
margin-bottom: 0;
|
||||
|
||||
.section-title {
|
||||
color: $gray;
|
||||
font-weight: bold;
|
||||
margin-top: 3px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.low,
|
||||
&.date {
|
||||
.section-title {
|
||||
color: $blue_due;
|
||||
}
|
||||
}
|
||||
|
||||
&.high .section-title {
|
||||
color: $red_overdue;
|
||||
}
|
||||
|
||||
&.medium .section-title {
|
||||
color: $yellow;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: $white;
|
||||
border: 1px solid $blue_background;
|
||||
border-radius: 0;
|
||||
margin-top: 0;
|
||||
color: $gray_dark;
|
||||
font-weight: 500;
|
||||
outline: medium none;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
border: medium none;
|
||||
box-shadow: none;
|
||||
width: calc(100% - 90px);
|
||||
margin: 0 36px 0 5px;
|
||||
height: 28px;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
box-shadow: 0 0 4px rgba($blue_background, .3), 0 1px 1px rgba($white, .4), 0 2px 4px rgba($blue_background, .1) inset, 0 0 4px rgba($blue_background, .2) inset;
|
||||
background: none repeat scroll 0 0 $gray_easy;
|
||||
float: left;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
select {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
border-radius: 0;
|
||||
border: 1px solid $gray_light;
|
||||
padding: 0;
|
||||
width: 98px;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
height: 19px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
left: 16px;
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
}
|
||||
|
||||
.section-edit {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.editing {
|
||||
.icon {
|
||||
&.detail-save,
|
||||
&.icon-trash {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.section-edit {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.date {
|
||||
.icon.icon-percent {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover .icon.icon-trash {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.detail-categories {
|
||||
height: auto;
|
||||
padding-left: 50px;
|
||||
}
|
||||
|
||||
&.detail-note {
|
||||
padding: 20px 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.select2-search-field input {
|
||||
border: 0 none;
|
||||
box-shadow: none;
|
||||
font-weight: bold;
|
||||
margin-top: 0;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
&.active .select2-search-field input {
|
||||
color: $blue_due;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.completed .body .section .section-title {
|
||||
|
|
@ -1191,43 +1248,6 @@ input {
|
|||
}
|
||||
}
|
||||
|
||||
.detail-categories .select2-container-multi {
|
||||
.select2-choices {
|
||||
border: 1px solid transparent;
|
||||
|
||||
.select2-search-choice {
|
||||
color: $blue_due;
|
||||
font-weight: bold;
|
||||
line-height: 14px;
|
||||
margin: 2px 0 3px 5px;
|
||||
background-image: none;
|
||||
background-color: $gray_easy;
|
||||
box-shadow: none;
|
||||
border-color: $gray_light;
|
||||
min-height: 22px;
|
||||
|
||||
a.select2-search-choice-close {
|
||||
opacity: .4;
|
||||
display: initial;
|
||||
|
||||
@extend .icon;
|
||||
@extend .icon-close;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container-disabled .select2-choices {
|
||||
background-color: $white;
|
||||
background-image: none;
|
||||
border: none;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* rules for icons
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,69 +0,0 @@
|
|||
/*
|
||||
* Timepicker stylesheet
|
||||
* Highly inspired from datepicker
|
||||
* FG - Nov 2010 - Web3R
|
||||
*
|
||||
* version 0.0.3 : Fixed some settings, more dynamic
|
||||
* version 0.0.4 : Removed width:100% on tables
|
||||
* version 0.1.1 : set width 0 on tables to fix an ie6 bug
|
||||
*/
|
||||
|
||||
.ui-timepicker-inline { display: inline; }
|
||||
|
||||
#ui-timepicker-div { padding: 0.2em; background-color: #fff; }
|
||||
.ui-timepicker-table { display: inline-table; width: 0; }
|
||||
.ui-timepicker-table table { margin:0.15em 0 0 0; border-collapse: collapse; }
|
||||
|
||||
.ui-timepicker-hours, .ui-timepicker-minutes { padding: 0.2em; }
|
||||
|
||||
.ui-timepicker-table .ui-timepicker-title { line-height: 1.8em; text-align: center; }
|
||||
.ui-timepicker-table td { padding: 0.1em; width: 2.2em; }
|
||||
.ui-timepicker-table th.periods { padding: 0.1em; width: 2.2em; }
|
||||
|
||||
/* span for disabled cells */
|
||||
.ui-timepicker-table td span {
|
||||
display:block;
|
||||
padding:0.2em 0.3em 0.2em 0.5em;
|
||||
width: 1.2em;
|
||||
|
||||
text-align:right;
|
||||
text-decoration:none;
|
||||
}
|
||||
/* anchors for clickable cells */
|
||||
.ui-timepicker-table td a {
|
||||
display:block;
|
||||
padding:0.2em 0.3em 0.2em 0.5em;
|
||||
width: 1.2em;
|
||||
cursor: pointer;
|
||||
text-align:right;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
|
||||
/* buttons and button pane styling */
|
||||
.ui-timepicker .ui-timepicker-buttonpane {
|
||||
background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0;
|
||||
}
|
||||
.ui-timepicker .ui-timepicker-buttonpane button { margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }
|
||||
/* The close button */
|
||||
.ui-timepicker .ui-timepicker-close { float: right }
|
||||
|
||||
/* the now button */
|
||||
.ui-timepicker .ui-timepicker-now { float: left; }
|
||||
|
||||
/* the deselect button */
|
||||
.ui-timepicker .ui-timepicker-deselect { float: left; }
|
||||
|
||||
|
||||
/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
|
||||
.ui-timepicker-cover {
|
||||
display: none; /*sorry for IE5*/
|
||||
display/**/: block; /*sorry for IE5*/
|
||||
position: absolute; /*must have*/
|
||||
z-index: -1; /*must have*/
|
||||
filter: mask(); /*must have*/
|
||||
top: -4px; /*must have*/
|
||||
left: -4px; /*must have*/
|
||||
width: 200px; /*must have*/
|
||||
height: 200px; /*must have*/
|
||||
}
|
||||
|
|
@ -18,94 +18,126 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="section detail-start handler" ng-class="{'date':isDue(task.start), 'editing':route.parameter=='startdate'}" ng-click="editStart($event, task)">
|
||||
<span class="icon icon-calendar" ng-class="{'icon-calendar-due':isDue(task.start), 'icon-calendar-overdue':isOverDue(task.start)}"></span>
|
||||
<div class="section-title" ng-class="{'overdue':isOverDue(task.start)}">
|
||||
<text>{{ task.start | startDetails }}</text>
|
||||
</div>
|
||||
<a class="handler end-edit" ng-click="deleteStartDate(task)">
|
||||
<span class="icon icon-trash"></span>
|
||||
</a>
|
||||
<span class="icon detail-save icon-checkmark-color handler end-edit"></span>
|
||||
<div class="section-edit">
|
||||
<input class="datepicker-input medium" type="text" key-value="" placeholder="dd.mm.yyyy" value="{{ task.start | dateTaskList }}" datepicker="start">
|
||||
<input class="timepicker-input medium handler" ng-hide="task.allDay" type="text" key-value="" placeholder="hh:mm" value="{{ task.start | timeTaskList }}" timepicker="start">
|
||||
</div>
|
||||
</div>
|
||||
<div class="section detail-date handler" ng-class="{'date':isDue(task.due), 'editing':route.parameter=='duedate'}" ng-click="editDueDate($event, task)">
|
||||
<span class="icon icon-calendar" ng-class="{'icon-calendar-due':isDue(task.due), 'icon-calendar-overdue':isOverDue(task.due)}"></span>
|
||||
<div class="section-title" ng-class="{'overdue':isOverDue(task.due)}">
|
||||
<text>{{ task.due | dateDetails }}</text>
|
||||
</div>
|
||||
<a class="handler end-edit" ng-click="deleteDueDate(task)">
|
||||
<span class="icon icon-trash"></span>
|
||||
</a>
|
||||
<span class="icon detail-save icon-checkmark-color handler end-edit"></span>
|
||||
<div class="section-edit">
|
||||
<input class="datepicker-input medium" type="text" key-value="" placeholder="dd.mm.yyyy" value="{{ task.due | dateTaskList }}" datepicker="due">
|
||||
<input class="timepicker-input medium" ng-hide="task.allDay" type="text" key-value="" placeholder="hh:mm" value="{{ task.due | timeTaskList }}" timepicker="due">
|
||||
</div>
|
||||
</div>
|
||||
<div class="section detail-all-day handler" ng-click="toggleAllDay(task)" ng-if="isAllDayPossible(task)" role="checkbox" aria-checked="{{task.allDay}}">
|
||||
<span class="icon detail-checkbox" ng-class="{'icon-checkmark': task.allDay, 'disabled': !task.calendar.writable}"></span>
|
||||
<div class="section-title">
|
||||
<text><?php p($l->t('All day')); ?></text>
|
||||
<ul class="sections">
|
||||
<li class="section detail-start handler" ng-class="{'date':isDue(task.start), 'editing':route.parameter=='startdate'}" ng-click="editStart($event, task)">
|
||||
<div>
|
||||
<span class="icon icon-calendar" ng-class="{'icon-calendar-due':isDue(task.start),
|
||||
'icon-calendar-overdue':isOverDue(task.start)}"></span>
|
||||
<span class="section-title" ng-class="{'overdue':isOverDue(task.start)}">
|
||||
<text>{{ task.start | startDetails }}</text>
|
||||
</span>
|
||||
<div class="section-edit">
|
||||
<input class="datepicker-input medium" type="text" key-value="" placeholder="dd.mm.yyyy" value="{{ task.start | dateTaskList }}" datepicker="start">
|
||||
<input class="timepicker-input medium handler" ng-hide="task.allDay" type="text" key-value="" placeholder="hh:mm" value="{{ task.start | timeTaskList }}" timepicker="start">
|
||||
</div>
|
||||
</div>
|
||||
<div class="utils">
|
||||
<a>
|
||||
<span class="icon detail-save icon-checkmark-color handler end-edit"></span>
|
||||
</a>
|
||||
<a class="handler end-edit" ng-click="deleteStartDate(task)">
|
||||
<span class="icon icon-trash"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section detail-priority handler" ng-class="{'editing':route.parameter=='priority','high':task.priority>5,'medium':task.priority==5,'low':task.priority > 0 && task.priority < 5, 'date':task.priority>0}" ng-click="editPriority($event, task)">
|
||||
<span class="icon icon-task-star" ng-class="{'icon-task-star-high':task.priority>5,'icon-task-star-medium':task.priority==5,'icon-task-star-low':task.priority > 0 && task.priority < 5}"></span>
|
||||
<div class="section-title">
|
||||
<text>{{ task.priority | priorityDetails}}</text>
|
||||
</div>
|
||||
<a class="handler end-edit" ng-click="deletePriority(task)">
|
||||
<span class="icon icon-trash"></span>
|
||||
</a>
|
||||
<span class="icon detail-save icon-checkmark-color handler end-edit"></span>
|
||||
<div class="section-edit">
|
||||
<input class="priority-input" type="text" ng-model="task.priority" ng-change="triggerUpdate(task)">
|
||||
<input type="range" ng-model="task.priority" min="0" max="9" step ="1" ng-change="triggerUpdate(task)">
|
||||
</div>
|
||||
</div>
|
||||
<div class="section detail-complete handler" ng-class="{'editing':route.parameter=='percent', 'date':task.complete>0}" ng-click="editPercent($event, task)">
|
||||
<span class="icon icon-percent" ng-class="{'icon-percent-active':task.complete>0}"></span>
|
||||
<div class="section-title">
|
||||
<text>{{ task.complete | percentDetails}}</text>
|
||||
</div>
|
||||
<a class="handler end-edit" ng-click="deletePercent(task)">
|
||||
<span class="icon icon-trash"></span>
|
||||
</a>
|
||||
<span class="icon detail-save icon-checkmark-color handler end-edit"></span>
|
||||
<div class="section-edit">
|
||||
<input class="percent-input" type="text" ng-model="task.complete" ng-change="setPercentComplete(task, task.complete)">
|
||||
<input type="range" ng-model="task.complete" min="0" max="100" step ="1" ng-change="setPercentComplete(task, task.complete)">
|
||||
</div>
|
||||
</div>
|
||||
<div class="section detail-categories" ng-class="{'active':task.cats.length>0}">
|
||||
<span class="icon icon-tag detail-categories" ng-class="{'icon-tag-active':task.cats.length>0}"></span>
|
||||
<!-- Edit line 1080 to show placeholder -->
|
||||
<ui-select multiple tagging tagging-label="<?php p($l->t('(New category)')); ?> " ng-model="task.cats" theme="select2" ng-disabled="!task.calendar.writable" style="width: 100%;"
|
||||
on-remove="removeCategory($item, $model)" on-select="addCategory($item, $model)">
|
||||
<ui-select-match placeholder="<?php p($l->t('Select categories...')); ?>">{{$item}}</ui-select-match>
|
||||
<ui-select-choices repeat="category in settingsmodel.getById('various').categories | filter:$select.search">
|
||||
{{category}}
|
||||
</ui-select-choices>
|
||||
</ui-select>
|
||||
</div>
|
||||
<div class="section detail-note">
|
||||
<div class="note">
|
||||
<div class="note-body selectable handler" ng-click="editNote($event, task)" oc-click-focus="{selector: '.expandingArea textarea', timeout: 0}">
|
||||
<div class="content-fakeable" ng-class="{'editing':route.parameter=='note'}">
|
||||
<div class="display-view" ng-bind-html="task.note | linky:'_blank':{rel: 'nofollow'}"></div>
|
||||
<div class="edit-view">
|
||||
<div class="expandingArea active">
|
||||
<pre><span>{{ task.note }}</span><br /><br /></pre>
|
||||
<textarea ng-model="task.note" ng-change="triggerUpdate(task)"></textarea>
|
||||
</li>
|
||||
<li class="section detail-date handler" ng-class="{'date':isDue(task.due), 'editing':route.parameter=='duedate'}" ng-click="editDueDate($event, task)">
|
||||
<div>
|
||||
<span class="icon icon-calendar" ng-class="{'icon-calendar-due':isDue(task.due), 'icon-calendar-overdue':isOverDue(task.due)}"></span>
|
||||
<span class="section-title" ng-class="{'overdue':isOverDue(task.due)}">
|
||||
<text>{{ task.due | dateDetails }}</text>
|
||||
</span>
|
||||
<div class="section-edit">
|
||||
<input class="datepicker-input medium" type="text" key-value="" placeholder="dd.mm.yyyy" value="{{ task.due | dateTaskList }}" datepicker="due">
|
||||
<input class="timepicker-input medium" ng-hide="task.allDay" type="text" key-value="" placeholder="hh:mm" value="{{ task.due | timeTaskList }}" timepicker="due">
|
||||
</div>
|
||||
</div>
|
||||
<div class="utils">
|
||||
<a>
|
||||
<span class="icon detail-save icon-checkmark-color handler end-edit"></span>
|
||||
</a>
|
||||
<a class="handler end-edit" ng-click="deleteDueDate(task)">
|
||||
<span class="icon icon-trash"></span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="section detail-all-day handler" ng-click="toggleAllDay(task)" ng-if="isAllDayPossible(task)" role="checkbox" aria-checked="{{task.allDay}}">
|
||||
<div>
|
||||
<span class="icon detail-checkbox" ng-class="{'icon-checkmark': task.allDay, 'disabled': !task.calendar.writable}"></span>
|
||||
<span class="section-title">
|
||||
<text><?php p($l->t('All day')); ?></text>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="section detail-priority handler" ng-class="{'editing':route.parameter=='priority','high':task.priority>5,'medium':task.priority==5,'low':task.priority > 0 && task.priority < 5, 'date':task.priority>0}" ng-click="editPriority($event, task)">
|
||||
<div>
|
||||
<span class="icon icon-task-star" ng-class="{'icon-task-star-high':task.priority>5,'icon-task-star-medium':task.priority==5,'icon-task-star-low':task.priority > 0 && task.priority < 5}"></span>
|
||||
<span class="section-title">
|
||||
<text>{{ task.priority | priorityDetails}}</text>
|
||||
</span>
|
||||
<div class="section-edit">
|
||||
<input class="priority-input" type="text" ng-model="task.priority" ng-change="triggerUpdate(task)">
|
||||
<input type="range" ng-model="task.priority" min="0" max="9" step ="1" ng-change="triggerUpdate(task)">
|
||||
</div>
|
||||
</div>
|
||||
<div class="utils">
|
||||
<a>
|
||||
<span class="icon detail-save icon-checkmark-color handler end-edit"></span>
|
||||
</a>
|
||||
<a class="handler end-edit" ng-click="deletePriority(task)">
|
||||
<span class="icon icon-trash"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="section detail-complete handler" ng-class="{'editing':route.parameter=='percent', 'date':task.complete>0}" ng-click="editPercent($event, task)">
|
||||
<div>
|
||||
<span class="icon icon-percent" ng-class="{'icon-percent-active':task.complete>0}"></span>
|
||||
<span class="section-title">
|
||||
<text>{{ task.complete | percentDetails}}</text>
|
||||
</span>
|
||||
<div class="section-edit">
|
||||
<input class="percent-input" type="text" ng-model="task.complete" ng-change="setPercentComplete(task, task.complete)">
|
||||
<input type="range" ng-model="task.complete" min="0" max="100" step ="1" ng-change="setPercentComplete(task, task.complete)">
|
||||
</div>
|
||||
</div>
|
||||
<div class="utils">
|
||||
<a>
|
||||
<span class="icon detail-save icon-checkmark-color handler end-edit"></span>
|
||||
</a>
|
||||
<a class="handler end-edit" ng-click="deletePercent(task)">
|
||||
<span class="icon icon-trash"></span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="section detail-categories" ng-class="{'active':task.cats.length>0}">
|
||||
<div>
|
||||
<span class="icon icon-tag detail-categories" ng-class="{'icon-tag-active':task.cats.length>0}"></span>
|
||||
<!-- Edit line 1080 to show placeholder -->
|
||||
<div class="detail-categories-container">
|
||||
<ui-select multiple tagging tagging-label="<?php p($l->t('(New category)')); ?> " ng-model="task.cats" theme="select2" ng-disabled="!task.calendar.writable" style="width: 100%;"
|
||||
on-remove="removeCategory($item, $model)" on-select="addCategory($item, $model)">
|
||||
<ui-select-match placeholder="<?php p($l->t('Select categories...')); ?>">{{$item}}</ui-select-match>
|
||||
<ui-select-choices repeat="category in settingsmodel.getById('various').categories | filter:$select.search">
|
||||
{{category}}
|
||||
</ui-select-choices>
|
||||
</ui-select>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="section detail-note">
|
||||
<div class="note">
|
||||
<div class="note-body selectable handler" ng-click="editNote($event, task)" oc-click-focus="{selector: '.expandingArea textarea', timeout: 0}">
|
||||
<div class="content-fakeable" ng-class="{'editing':route.parameter=='note'}">
|
||||
<div class="display-view" ng-bind-html="task.note | linky:'_blank':{rel: 'nofollow'}"></div>
|
||||
<div class="edit-view">
|
||||
<div class="expandingArea active">
|
||||
<pre><span>{{ task.note }}</span><br /><br /></pre>
|
||||
<textarea ng-model="task.note" ng-change="triggerUpdate(task)"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<a class="handler left close-all" ng-click="deleteTask(task)" ng-show="task.calendar.writable">
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче