Finish cleaning up sidebar
This commit is contained in:
Raimund Schlüßler
parent
02f5f2f0cb
commit
29cd46f293
3 changed files with 503 additions and 457 deletions
|
|
@ -52,28 +52,13 @@
|
|||
min-height: 50px;
|
||||
word-wrap: break-word;
|
||||
|
||||
.checkbox {
|
||||
float: left;
|
||||
padding: 16px 17px 18px;
|
||||
|
||||
.icon {
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
&.editing {
|
||||
.title-text {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.star {
|
||||
padding: 13px;
|
||||
float: right;
|
||||
|
||||
.icon {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
background-size: 144px 144px;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.expandable-container {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -100,6 +85,47 @@
|
|||
}
|
||||
}
|
||||
|
||||
.expandable-container {
|
||||
background: none repeat scroll 0 0 $white;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid $gray;
|
||||
padding: 0 6px;
|
||||
display: none !important;
|
||||
margin: 13px 0;
|
||||
width: calc(100% - 100px);
|
||||
line-height: 24px;
|
||||
min-height: 24px;
|
||||
|
||||
.expandingArea {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
float: left;
|
||||
padding: 16px 17px 18px;
|
||||
|
||||
.icon {
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.star {
|
||||
padding: 13px;
|
||||
float: right;
|
||||
|
||||
.icon {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
background-size: 144px 144px;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
textarea,
|
||||
pre {
|
||||
box-shadow: none;
|
||||
|
|
@ -134,32 +160,6 @@
|
|||
padding: 0 !important;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.expandable-container {
|
||||
background: none repeat scroll 0 0 $white;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid $gray;
|
||||
padding: 0 6px;
|
||||
display: none !important;
|
||||
margin: 13px 0;
|
||||
width: calc(100% - 100px);
|
||||
line-height: 24px;
|
||||
min-height: 24px;
|
||||
|
||||
.expandingArea {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
&.editing {
|
||||
.title-text {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.expandable-container {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
|
|
@ -173,6 +173,72 @@
|
|||
position: relative;
|
||||
margin-bottom: 0;
|
||||
width: 100%;
|
||||
color: $gray;
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: unset;
|
||||
}
|
||||
|
||||
&.low,
|
||||
&.date {
|
||||
color: $blue_due;
|
||||
}
|
||||
|
||||
&.high {
|
||||
color: $red_overdue;
|
||||
}
|
||||
|
||||
&.medium {
|
||||
color: $yellow;
|
||||
}
|
||||
|
||||
&.date:hover .icon.icon-trash {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.date .icon {
|
||||
&.icon-calendar-due,
|
||||
&.icon-calendar-overdue,
|
||||
&.icon-percent {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.detail-note {
|
||||
padding: 20px 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&.editing {
|
||||
.icon {
|
||||
&.detail-save,
|
||||
&.icon-trash {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.section-edit {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
&.icon-trash {
|
||||
display: none;
|
||||
margin-left: auto;
|
||||
right: 22px;
|
||||
}
|
||||
|
||||
&.detail-save {
|
||||
display: none;
|
||||
margin-left: auto;
|
||||
right: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
> div {
|
||||
padding-left: 12px;
|
||||
|
|
@ -191,7 +257,6 @@
|
|||
}
|
||||
|
||||
.section-title {
|
||||
color: $gray;
|
||||
font-weight: bold;
|
||||
margin-left: 12px;
|
||||
line-height: 22px;
|
||||
|
|
@ -206,21 +271,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.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;
|
||||
|
|
@ -246,6 +296,27 @@
|
|||
min-height: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
&.datepicker-input {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
&.timepicker-input {
|
||||
width: calc(40% - 10px);
|
||||
}
|
||||
|
||||
&.duration-input {
|
||||
margin: 2px 0 0 .3em;
|
||||
width: 35px;
|
||||
}
|
||||
|
||||
&.percent-input,
|
||||
&.priority-input {
|
||||
width: 35px;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
border-radius: 0;
|
||||
|
|
@ -265,38 +336,6 @@
|
|||
line-height: 0;
|
||||
}
|
||||
|
||||
&.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;
|
||||
|
|
@ -351,117 +390,89 @@
|
|||
&.active .select2-search-field input {
|
||||
color: $blue_due;
|
||||
}
|
||||
}
|
||||
|
||||
.note {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: $gray_light;
|
||||
font-size: 13px;
|
||||
line-height: 26px;
|
||||
margin: 0 20px;
|
||||
padding: 5px 15px;
|
||||
cursor: text;
|
||||
|
||||
.expandingArea {
|
||||
position: relative;
|
||||
margin-left: -1px;
|
||||
|
||||
textarea,
|
||||
pre {
|
||||
box-shadow: none;
|
||||
background: none repeat scroll 0 0 transparent;
|
||||
border: medium none;
|
||||
font-size: 13px;
|
||||
line-height: 26px;
|
||||
padding: 0;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
textarea {
|
||||
margin: 0 0 0 1px;
|
||||
border-radius: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
resize: none;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
color: $gray_dark;
|
||||
font-weight: 500;
|
||||
outline: medium none;
|
||||
}
|
||||
|
||||
pre {
|
||||
border: 0 none !important;
|
||||
display: block;
|
||||
margin: 0;
|
||||
outline: 0 none;
|
||||
padding: 0 !important;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.note-body,
|
||||
.note-edit {
|
||||
.note {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: $gray_light;
|
||||
font-size: 13px;
|
||||
line-height: 26px;
|
||||
margin: 0 20px;
|
||||
padding: 5px 15px;
|
||||
cursor: text;
|
||||
min-height: 140px;
|
||||
word-wrap: break-word;
|
||||
|
||||
a {
|
||||
cursor: text;
|
||||
.expandingArea {
|
||||
position: relative;
|
||||
margin-left: -1px;
|
||||
|
||||
textarea,
|
||||
pre {
|
||||
box-shadow: none;
|
||||
background: none repeat scroll 0 0 transparent;
|
||||
border: medium none;
|
||||
line-height: 26px;
|
||||
padding: 0;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
textarea {
|
||||
margin: 0 0 0 1px;
|
||||
border-radius: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
resize: none;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
color: $gray_dark;
|
||||
font-weight: 500;
|
||||
outline: medium none;
|
||||
}
|
||||
|
||||
pre {
|
||||
border: 0 none !important;
|
||||
display: block;
|
||||
margin: 0;
|
||||
outline: 0 none;
|
||||
padding: 0 !important;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.content-fakeable {
|
||||
cursor: text !important;
|
||||
.note-body,
|
||||
.note-edit {
|
||||
min-height: 140px;
|
||||
word-wrap: break-word;
|
||||
cursor: text;
|
||||
|
||||
.display-view {
|
||||
display: block;
|
||||
}
|
||||
.content-fakeable {
|
||||
&.editing {
|
||||
.display-view {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.edit-view {
|
||||
display: none !important;
|
||||
}
|
||||
.edit-view {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.editing {
|
||||
.display-view {
|
||||
display: none !important;
|
||||
cursor: text;
|
||||
display: block;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.edit-view {
|
||||
display: block !important;
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.edit-view {
|
||||
cursor: text !important;
|
||||
}
|
||||
|
||||
.display-view {
|
||||
cursor: text !important;
|
||||
white-space: pre-wrap;
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.completed .body .section .section-title {
|
||||
color: $gray !important;
|
||||
}
|
||||
|
||||
.task-list .task-body .title-wrapper .title a {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.disabled .body .section {
|
||||
.select2-search-field input {
|
||||
width: auto;
|
||||
|
|
@ -474,31 +485,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
&.datepicker-input {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
&.timepicker-input {
|
||||
width: calc(40% - 10px);
|
||||
}
|
||||
|
||||
&.duration-input {
|
||||
margin: 2px 0 0 .3em;
|
||||
width: 35px;
|
||||
}
|
||||
|
||||
&.percent-input,
|
||||
&.priority-input {
|
||||
width: 35px;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.date .icon {
|
||||
&.icon-calendar-due,
|
||||
&.icon-calendar-overdue {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
411
css/style.scss
411
css/style.scss
|
|
@ -798,28 +798,13 @@ tr:last-child .task-item {
|
|||
min-height: 50px;
|
||||
word-wrap: break-word;
|
||||
|
||||
.checkbox {
|
||||
float: left;
|
||||
padding: 16px 17px 18px;
|
||||
|
||||
.icon {
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
&.editing {
|
||||
.title-text {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.star {
|
||||
padding: 13px;
|
||||
float: right;
|
||||
|
||||
.icon {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
background-size: 144px 144px;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.expandable-container {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -846,6 +831,47 @@ tr:last-child .task-item {
|
|||
}
|
||||
}
|
||||
|
||||
.expandable-container {
|
||||
background: none repeat scroll 0 0 $white;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid $gray;
|
||||
padding: 0 6px;
|
||||
display: none !important;
|
||||
margin: 13px 0;
|
||||
width: calc(100% - 100px);
|
||||
line-height: 24px;
|
||||
min-height: 24px;
|
||||
|
||||
.expandingArea {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
float: left;
|
||||
padding: 16px 17px 18px;
|
||||
|
||||
.icon {
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.star {
|
||||
padding: 13px;
|
||||
float: right;
|
||||
|
||||
.icon {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
background-size: 144px 144px;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
textarea,
|
||||
pre {
|
||||
box-shadow: none;
|
||||
|
|
@ -880,32 +906,6 @@ tr:last-child .task-item {
|
|||
padding: 0 !important;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.expandable-container {
|
||||
background: none repeat scroll 0 0 $white;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid $gray;
|
||||
padding: 0 6px;
|
||||
display: none !important;
|
||||
margin: 13px 0;
|
||||
width: calc(100% - 100px);
|
||||
line-height: 24px;
|
||||
min-height: 24px;
|
||||
|
||||
.expandingArea {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
&.editing {
|
||||
.title-text {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.expandable-container {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
|
|
@ -919,6 +919,72 @@ tr:last-child .task-item {
|
|||
position: relative;
|
||||
margin-bottom: 0;
|
||||
width: 100%;
|
||||
color: $gray;
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: unset;
|
||||
}
|
||||
|
||||
&.low,
|
||||
&.date {
|
||||
color: $blue_due;
|
||||
}
|
||||
|
||||
&.high {
|
||||
color: $red_overdue;
|
||||
}
|
||||
|
||||
&.medium {
|
||||
color: $yellow;
|
||||
}
|
||||
|
||||
&.date:hover .icon.icon-trash {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.date .icon {
|
||||
&.icon-calendar-due,
|
||||
&.icon-calendar-overdue,
|
||||
&.icon-percent {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.detail-note {
|
||||
padding: 20px 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&.editing {
|
||||
.icon {
|
||||
&.detail-save,
|
||||
&.icon-trash {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.section-edit {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
&.icon-trash {
|
||||
display: none;
|
||||
margin-left: auto;
|
||||
right: 22px;
|
||||
}
|
||||
|
||||
&.detail-save {
|
||||
display: none;
|
||||
margin-left: auto;
|
||||
right: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
> div {
|
||||
padding-left: 12px;
|
||||
|
|
@ -937,7 +1003,6 @@ tr:last-child .task-item {
|
|||
}
|
||||
|
||||
.section-title {
|
||||
color: $gray;
|
||||
font-weight: bold;
|
||||
margin-left: 12px;
|
||||
line-height: 22px;
|
||||
|
|
@ -952,21 +1017,6 @@ tr:last-child .task-item {
|
|||
}
|
||||
}
|
||||
|
||||
&.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;
|
||||
|
|
@ -992,6 +1042,27 @@ tr:last-child .task-item {
|
|||
min-height: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
&.datepicker-input {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
&.timepicker-input {
|
||||
width: calc(40% - 10px);
|
||||
}
|
||||
|
||||
&.duration-input {
|
||||
margin: 2px 0 0 .3em;
|
||||
width: 35px;
|
||||
}
|
||||
|
||||
&.percent-input,
|
||||
&.priority-input {
|
||||
width: 35px;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
border-radius: 0;
|
||||
|
|
@ -1011,38 +1082,6 @@ tr:last-child .task-item {
|
|||
line-height: 0;
|
||||
}
|
||||
|
||||
&.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;
|
||||
|
|
@ -1097,117 +1136,89 @@ tr:last-child .task-item {
|
|||
&.active .select2-search-field input {
|
||||
color: $blue_due;
|
||||
}
|
||||
}
|
||||
|
||||
.note {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: $gray_light;
|
||||
font-size: 13px;
|
||||
line-height: 26px;
|
||||
margin: 0 20px;
|
||||
padding: 5px 15px;
|
||||
cursor: text;
|
||||
|
||||
.expandingArea {
|
||||
position: relative;
|
||||
margin-left: -1px;
|
||||
|
||||
textarea,
|
||||
pre {
|
||||
box-shadow: none;
|
||||
background: none repeat scroll 0 0 transparent;
|
||||
border: medium none;
|
||||
font-size: 13px;
|
||||
line-height: 26px;
|
||||
padding: 0;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
textarea {
|
||||
margin: 0 0 0 1px;
|
||||
border-radius: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
resize: none;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
color: $gray_dark;
|
||||
font-weight: 500;
|
||||
outline: medium none;
|
||||
}
|
||||
|
||||
pre {
|
||||
border: 0 none !important;
|
||||
display: block;
|
||||
margin: 0;
|
||||
outline: 0 none;
|
||||
padding: 0 !important;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.note-body,
|
||||
.note-edit {
|
||||
.note {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: $gray_light;
|
||||
font-size: 13px;
|
||||
line-height: 26px;
|
||||
margin: 0 20px;
|
||||
padding: 5px 15px;
|
||||
cursor: text;
|
||||
min-height: 140px;
|
||||
word-wrap: break-word;
|
||||
|
||||
a {
|
||||
cursor: text;
|
||||
.expandingArea {
|
||||
position: relative;
|
||||
margin-left: -1px;
|
||||
|
||||
textarea,
|
||||
pre {
|
||||
box-shadow: none;
|
||||
background: none repeat scroll 0 0 transparent;
|
||||
border: medium none;
|
||||
line-height: 26px;
|
||||
padding: 0;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
textarea {
|
||||
margin: 0 0 0 1px;
|
||||
border-radius: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
resize: none;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
color: $gray_dark;
|
||||
font-weight: 500;
|
||||
outline: medium none;
|
||||
}
|
||||
|
||||
pre {
|
||||
border: 0 none !important;
|
||||
display: block;
|
||||
margin: 0;
|
||||
outline: 0 none;
|
||||
padding: 0 !important;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.content-fakeable {
|
||||
cursor: text !important;
|
||||
.note-body,
|
||||
.note-edit {
|
||||
min-height: 140px;
|
||||
word-wrap: break-word;
|
||||
cursor: text;
|
||||
|
||||
.display-view {
|
||||
display: block;
|
||||
}
|
||||
.content-fakeable {
|
||||
&.editing {
|
||||
.display-view {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.edit-view {
|
||||
display: none !important;
|
||||
}
|
||||
.edit-view {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.editing {
|
||||
.display-view {
|
||||
display: none !important;
|
||||
cursor: text;
|
||||
display: block;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.edit-view {
|
||||
display: block !important;
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.edit-view {
|
||||
cursor: text !important;
|
||||
}
|
||||
|
||||
.display-view {
|
||||
cursor: text !important;
|
||||
white-space: pre-wrap;
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.completed .body .section .section-title {
|
||||
color: $gray !important;
|
||||
}
|
||||
|
||||
.task-list .task-body .title-wrapper .title a {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.disabled .body .section {
|
||||
.select2-search-field input {
|
||||
width: auto;
|
||||
|
|
@ -1221,34 +1232,6 @@ tr:last-child .task-item {
|
|||
}
|
||||
}
|
||||
|
||||
input {
|
||||
&.datepicker-input {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
&.timepicker-input {
|
||||
width: calc(40% - 10px);
|
||||
}
|
||||
|
||||
&.duration-input {
|
||||
margin: 2px 0 0 .3em;
|
||||
width: 35px;
|
||||
}
|
||||
|
||||
&.percent-input,
|
||||
&.priority-input {
|
||||
width: 35px;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.date .icon {
|
||||
&.icon-calendar-due,
|
||||
&.icon-calendar-overdue {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* rules for icons
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,34 +1,64 @@
|
|||
<div ng-controller="DetailsController" ng-click="endEdit($event)" class="content-wrapper handler">
|
||||
<div class="flex-container" ng-show="TaskState()=='found'" ng-class="{'disabled': !task.calendar.writable}">
|
||||
<div ng-controller="DetailsController"
|
||||
ng-click="endEdit($event)"
|
||||
class="content-wrapper handler">
|
||||
<div class="flex-container"
|
||||
ng-show="TaskState()=='found'"
|
||||
ng-class="{'disabled': !task.calendar.writable}">
|
||||
<div class="title" ng-class="{'editing':route.parameter=='name'}">
|
||||
<a class="checkbox" ng-click="toggleCompleted(task)" role="checkbox" aria-checked="{{task.completed}}" aria-label="<?php p($l->t('Task is completed')); ?>">
|
||||
<a class="checkbox"
|
||||
ng-click="toggleCompleted(task)"
|
||||
role="checkbox"
|
||||
aria-checked="{{task.completed}}"
|
||||
aria-label="<?php p($l->t('Task is completed')); ?>">
|
||||
<span class="icon detail-checkbox" ng-class="{'icon-checkmark':task.completed, 'disabled': !task.calendar.writable}"></span>
|
||||
</a>
|
||||
<a class="star" ng-click="toggleStarred(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, 'disabled': !task.calendar.writable}"></span>
|
||||
<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, 'disabled': !task.calendar.writable}"></span>
|
||||
</a>
|
||||
<div class="title-text handler" ng-class="{'strike-through':task.completed}" ng-click="editName($event, task)"
|
||||
oc-click-focus="{selector: '#editName', timeout: 0}" ng-bind-html="task.summary | linky:'_blank':{rel: 'nofollow'}">
|
||||
<div class="title-text handler"
|
||||
ng-class="{'strike-through':task.completed}"
|
||||
ng-click="editName($event, task)"
|
||||
oc-click-focus="{selector: '#editName', timeout: 0}"
|
||||
ng-bind-html="task.summary | linky:'_blank':{rel: 'nofollow'}">
|
||||
</div>
|
||||
<div class="expandable-container handler">
|
||||
<div class="expandingArea active">
|
||||
<pre><span>{{ task.summary }}</span><br /></pre>
|
||||
<textarea id="editName" maxlength="200" ng-model="task.summary" ng-keydown="endName($event)" ng-change="triggerUpdate(task)"></textarea>
|
||||
<textarea id="editName"
|
||||
maxlength="200"
|
||||
ng-model="task.summary"
|
||||
ng-keydown="endName($event)"
|
||||
ng-change="triggerUpdate(task)">
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<ul class="sections">
|
||||
<li class="section detail-start handler" ng-class="{'date':isDue(task.start), 'editing':route.parameter=='startdate'}" ng-click="editStart($event, task)">
|
||||
<li class="section detail-start handler"
|
||||
ng-class="{'date':isDue(task.start), 'editing':route.parameter=='startdate', 'high':isOverDue(task.start)}"
|
||||
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)}">
|
||||
<span class="section-title">
|
||||
<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">
|
||||
<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">
|
||||
|
|
@ -40,15 +70,28 @@
|
|||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="section detail-date handler" ng-class="{'date':isDue(task.due), 'editing':route.parameter=='duedate'}" ng-click="editDueDate($event, task)">
|
||||
<li class="section detail-date handler"
|
||||
ng-class="{'date':isDue(task.due), 'editing':route.parameter=='duedate', 'high':isOverDue(task.due)}"
|
||||
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)}">
|
||||
<span class="section-title">
|
||||
<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">
|
||||
<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">
|
||||
|
|
@ -60,7 +103,11 @@
|
|||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="section detail-all-day handler" ng-click="toggleAllDay(task)" ng-if="isAllDayPossible(task)" role="checkbox" aria-checked="{{task.allDay}}">
|
||||
<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">
|
||||
|
|
@ -68,15 +115,26 @@
|
|||
</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)">
|
||||
<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="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)">
|
||||
<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">
|
||||
|
|
@ -87,15 +145,25 @@
|
|||
<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)">
|
||||
<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)">
|
||||
<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">
|
||||
|
|
@ -112,8 +180,16 @@
|
|||
<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
|
||||
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}}
|
||||
|
|
@ -124,7 +200,9 @@
|
|||
</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="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">
|
||||
|
|
@ -140,7 +218,9 @@
|
|||
</ul>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<a class="handler left close-all" ng-click="deleteTask(task)" ng-show="task.calendar.writable">
|
||||
<a class="handler left close-all"
|
||||
ng-click="deleteTask(task)"
|
||||
ng-show="task.calendar.writable">
|
||||
<span class="icon icon-trash"></span>
|
||||
</a>
|
||||
<a class="handler right close-all">
|
||||
|
|
@ -148,11 +228,11 @@
|
|||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div ng-show="TaskState()=='loading'" class="notice">
|
||||
<div ng-show="TaskState()=='loading'" class="notice">
|
||||
<?php p($l->t('Loading the task...')); ?>
|
||||
<div class="loading" style="height: 50px;"></div>
|
||||
</div>
|
||||
<div ng-show="TaskState()==null" class="notice">
|
||||
<div ng-show="TaskState()==null" class="notice">
|
||||
<?php p($l->t('Task not found!')); ?>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue