diff --git a/css/src/markdown.scss b/css/src/markdown.scss deleted file mode 100644 index 0c0e34073..000000000 --- a/css/src/markdown.scss +++ /dev/null @@ -1,126 +0,0 @@ -/** - * Markdown rendering - */ -#markdown { - width: 100% !important; - min-height: 40px; - cursor: text; - - p { - margin-bottom: 15px; - } - - * { - white-space: normal; - word-wrap: break-word; - overflow-wrap: break-word; - } - - a { - opacity: .5; - text-decoration: underline; - } - - s { - text-decoration: line-through; - } - - em { - font-style: italic; - } - - ol, - ul { - margin-left: 20px; - margin-bottom: 10px; - } - - ul { - list-style-type: disc; - } - - h1 { - font-size: 18px; - font-weight: 600; - margin-bottom: 5px; - } - - h2 { - font-size: 16px; - font-weight: 600; - } - - h3 { - font-size: 14px; - font-weight: 600; - } - - h4 { - font-size: 13px; - font-weight: 600; - } - - h6 { - font-size: 12px; - font-weight: 600; - } - - pre { - background-color: var(--color-background-dark); - padding: 3px; - overflow: auto; - - code { - white-space: pre; - } - } - - img { - max-width: 100%; - max-height: 50vh; - margin: auto; - display: block; - } - - input[type=checkbox] { - margin: 0 10px 0 0; - line-height: 10px; - font-size: 10px; - display: inline-block; - min-height: 12px; - } - - li input[type='checkbox'].checkbox + label::before { - margin-left: -15px; - - } - input[type='checkbox'].checkbox + label::before { - position: relative; - z-index: 100; - margin-right: 10px; - margin-top: 0; - } - li input[type='checkbox'].checkbox:not(:checked) + label::before { - background-color: var(--color-main-background); - } - - table { - margin-bottom: 10px; - border-collapse: collapse; - - thead { - background-color: var(--color-background-dark); - } - td, th { - border: 1px solid var(--color-background-darker); - padding: 3px; - } - } - - blockquote { - padding: 10px 20px; - margin: 0 0 20px; - font-size: 17.5px; - border-left: 5px solid var(--color-background-dark); - } -} diff --git a/css/src/style.scss b/css/src/style.scss index 76c5bb830..c963cacbc 100644 --- a/css/src/style.scss +++ b/css/src/style.scss @@ -1,4 +1,7 @@ @include icon-black-white('circle', 'tasks', 1); +@include icon-black-white('reminder', 'tasks', 1); +@include icon-black-white('repeat', 'tasks', 1); +@include icon-black-white('note', 'tasks', 1); // Hack for https://github.com/nextcloud/nextcloud-vue/issues/1384 body { @@ -147,549 +150,8 @@ $blue_due: #4271a6; // due dates and low importance } /** - * rules for app-sidebar - */ - -#app-sidebar { - .flex-container { - display: flex; - flex-direction: column; - height: 100%; - } - - .content-wrapper { - padding: 0; - box-sizing: border-box; - height: 100%; - overflow: hidden; - - .notice { - color: var(--color-text-lighter); - font-size: 16px; - position: absolute; - text-align: center; - top: 50%; - width: 100%; - } - - .footer { - border-top: 1px solid var(--color-border-dark); - flex: 0 0 auto; - height: 44px; - display: flex; - justify-content: space-between; - - > span { - padding: 14px; - - &.info { - cursor: default; - } - - .icon { - display: block; - } - } - } - - .title { - flex: 0 0 auto; - display: flex; - align-items: center; - background-color: var(--color-background-hover); - border-bottom: 1px solid var(--color-border-dark); - font-size: 16px; - font-weight: bold; - min-height: 50px; - word-wrap: break-word; - - &.editing { - .title-text { - display: none !important; - } - - .expandable-container { - display: inline-block !important; - } - } - - .detail-checkbox { - padding: 11px 10px; - padding-right: 7px; - - input[type='checkbox'].checkbox + label { - &::before { - border-width: 2px; - border-radius: var(--border-radius); - border-color: var(--color-border-dark); - } - - &:hover { - border-color: var(--color-border-dark); - } - - &.priority-high::before { - border-color: $red_overdue; - } - - &.priority-medium::before { - border-color: $yellow; - } - - &.priority-low::before { - border-color: $blue_due; - } - } - } - - .title-wrapper { - flex-grow: 1; - - .title-text, - .expandable-container { - max-height: 110px; - overflow-y: hidden; - margin: 13px 0; - min-height: 24px; - width: 100%; - padding: 0 6px; - } - - .title-text { - cursor: text; - display: inline-block; - line-height: 22px; - // this border is to adjust the size of the div to the size - // of the input field for editing the title - // (setting a padding always led to a small flickering) - border: 1px solid transparent; - - &.strike-through { - text-decoration: line-through; - } - } - - .expandable-container { - border: 1px solid #a0a0a0; - display: none; - line-height: 24px; - - .expandingArea { - position: relative; - } - } - - textarea, - pre { - box-shadow: none; - font-size: 16px; - font-weight: bold; - line-height: 22px; - min-height: 22px; - background: none repeat scroll 0 0 transparent; - border: medium none; - padding: 0; - white-space: pre-wrap; - word-wrap: break-word; - } - - textarea { - margin: 0; - border-radius: 0; - height: 100%; - left: 0; - overflow: hidden; - position: absolute; - resize: none; - top: 0; - width: 100%; - } - - pre { - border: 0 none !important; - display: block; - margin: 0; - outline: 0 none; - padding: 0 !important; - visibility: hidden; - } - } - - .status-display { - margin: 17px 6px; - min-width: 16px; - } - - button { - padding: 10px; - display: flex; - align-items: center; - justify-content: center; - - .icon { - transform: scale(1.5); - } - } - } - - .body { - flex: 1 1 auto; - overflow-y: auto; - position: relative; - - .section { - border-bottom: 1px dotted var(--color-text-lighter); - padding: 0; - position: relative; - margin-bottom: 0; - width: 100%; - color: var(--color-text-lighter); - display: flex; - - > div { - display: flex; - line-height: 44px; - - &.section-content { - flex-grow: 1; - min-width: 0; - - &.note { - border-width: 1px; - border-style: solid; - border-color: var(--color-border-dark); - 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; - 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: var(--color-main-text); - 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 { - min-height: 140px; - word-wrap: break-word; - cursor: text; - width: 100%; - - .content-fakeable { - &.editing { - .display-view { - display: none !important; - } - - .edit-view { - display: block !important; - } - } - - .display-view { - cursor: text; - } - - .edit-view { - display: none !important; - } - } - } - } - - .section-icon { - padding: 14px; - height: 44px; - width: 44px; - - .icon { - display: block; - - &.sprt-color { - opacity: 1; - cursor: unset; - } - } - - .calendar-indicator { - display: block; - width: 16px; - height: 16px; - border: none; - border-radius: 50%; - } - } - - .section-title { - font-weight: bold; - display: inline-block; - width: calc(100% - 44px); - padding-right: 14px; - cursor: pointer; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - .section-edit { - display: none; - flex-grow: 1; - - .mx-datepicker { - &.date { - width: 58%; - } - &.time { - width: 39% - } - } - } - - .detail-multiselect-container { - width: calc(100% - 44px); - display: flex; - align-items: center; - padding-right: 20px; - - &.blue .multiselect__single { - color: $blue_due; - } - - .multiselect.multiselect-vue { - width: 100%; - margin: 1px -1px; - vertical-align: middle; - - &.multiselect--disabled { - background-color: var(--color-main-background) !important; - cursor: default; - .multiselect__single, input:not([type='range']):disabled { - background-color: var(--color-main-background) !important; - cursor: default; - } - } - - &.multiselect--active .multiselect__tags { - border: 1px solid var(--color-border-dark); - } - - .multiselect__tags { - border: 1px solid transparent; - - .multiselect__tags-wrap { - padding-left: 0; - } - - .multiselect__input { - padding: 0 !important; - font-weight: bold; - } - - .multiselect__single { - padding-left: 0 !important; - font-weight: bold; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - } - - .multiselect__tag { - color: $blue_due; - background: var(--color-background-dark); - font-weight: bold; - } - - .multiselect__element { - line-height: 1.3em; - } - } - } - } - - &.section-utils button { - display: none; - } - } - - &.date:hover button.delete { - display: block !important; - } - - &.editing { - .section-utils button { - display: block !important; - } - - .section-title { - display: none !important; - } - - .section-edit { - display: inline-block !important; - } - } - - &:last-of-type { - border-bottom: unset; - } - - &.low, - &.date { - color: $blue_due; - } - - &.high { - color: $red_overdue; - } - - &.medium { - color: $yellow; - } - - &.detail-note { - padding: 20px 0; - height: auto; - } - - &.detail-all-day { - label { - padding-left: 14px; - width: 100%; - - &::before { - border-width: 2px; - border-radius: var(--border-radius); - } - } - - div, - span { - cursor: pointer; - } - - input[type='checkbox'].checkbox + label { - &::before { - margin-left: 0; - } - > span { - font-weight: bold; - margin-left: 7px; - } - } - } - - input[type='range'] { - border: medium none; - box-shadow: none; - width: calc(100% - 50px); - vertical-align: middle; - } - - input[type='number'] { - background: none repeat scroll 0 0 var(--color-background-dark); - margin: 0; - min-height: 0; - } - - input { - border-radius: 0; - margin-top: 0; - color: var(--color-main-text); - font-weight: 500; - outline: medium none; - padding: 4px; - - &.duration-input { - margin: 2px 0 0 .3em; - width: 44px; - } - - &.percent-input, - &.priority-input { - width: 44px; - margin-top: 0; - } - } - - input::-webkit-outer-spin-button, - input::-webkit-inner-spin-button { - -webkit-appearance: none; - } - - select { - background-color: rgba(0, 0, 0, 0); - border-radius: 0; - border: 1px solid var(--color-border-dark); - padding: 0; - width: 98px; - margin: 0; - font-weight: normal; - height: 19px; - } - } - } - - .disabled .body .section { - > div { - .calendar-indicator { - cursor: default; - } - } - - &.detail-all-day { - div, - span { - cursor: default; - } - } - - &.date:hover .icon.sprt-trash { - display: none; - } - } - } -} - -/** - * rules for icons - */ +* rules for icons +*/ .collection .icon { opacity: 1; } diff --git a/css/tasks.scss b/css/tasks.scss index d9bed43d7..6e8054b4e 100644 --- a/css/tasks.scss +++ b/css/tasks.scss @@ -22,7 +22,6 @@ @import './sprites-color'; @import './sprites-bw'; @import './src/style'; -@import './src/markdown'; @import './src/Calendars/Calendar.scss'; @import './src/Calendars/CalendarShares.scss'; diff --git a/img/note.svg b/img/note.svg new file mode 100644 index 000000000..2ef5580fc --- /dev/null +++ b/img/note.svg @@ -0,0 +1 @@ + diff --git a/img/reminder.svg b/img/reminder.svg new file mode 100644 index 000000000..108eb4fc9 --- /dev/null +++ b/img/reminder.svg @@ -0,0 +1 @@ + diff --git a/img/repeat.svg b/img/repeat.svg new file mode 100644 index 000000000..2ed9c37db --- /dev/null +++ b/img/repeat.svg @@ -0,0 +1 @@ +Loop \ No newline at end of file diff --git a/img/src/bw/clock.svg b/img/src/bw/clock.svg deleted file mode 100644 index 20b110c38..000000000 --- a/img/src/bw/clock.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/img/src/color/calendar-due.svg b/img/src/color/calendar-due.svg deleted file mode 100644 index e7ba7ca85..000000000 --- a/img/src/color/calendar-due.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/img/src/color/calendar-overdue.svg b/img/src/color/calendar-overdue.svg deleted file mode 100644 index 838854c9c..000000000 --- a/img/src/color/calendar-overdue.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/img/src/color/clock-due.svg b/img/src/color/clock-due.svg deleted file mode 100644 index 2286affb2..000000000 --- a/img/src/color/clock-due.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/img/src/color/clock-overdue.svg b/img/src/color/clock-overdue.svg deleted file mode 100644 index 875555b5c..000000000 --- a/img/src/color/clock-overdue.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/img/src/color/duedate-due.svg b/img/src/color/duedate-due.svg deleted file mode 100644 index f11f4527f..000000000 --- a/img/src/color/duedate-due.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/img/src/color/duedate-overdue.svg b/img/src/color/duedate-overdue.svg deleted file mode 100644 index d19dfa617..000000000 --- a/img/src/color/duedate-overdue.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/img/src/color/startdate-due.svg b/img/src/color/startdate-due.svg deleted file mode 100644 index 0f582e006..000000000 --- a/img/src/color/startdate-due.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/img/src/color/startdate-overdue.svg b/img/src/color/startdate-overdue.svg deleted file mode 100644 index ed9c62d98..000000000 --- a/img/src/color/startdate-overdue.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/App.vue b/src/App.vue index 0538e6aca..2062ef572 100644 --- a/src/App.vue +++ b/src/App.vue @@ -20,16 +20,14 @@ License along with this library. If not, see . --> @@ -37,6 +35,7 @@ License along with this library. If not, see . import AppNavigation from './views/AppNavigation.vue' import client from './services/cdav.js' +import { emit } from '@nextcloud/event-bus' import AppContent from '@nextcloud/vue/dist/Components/AppContent' import Content from '@nextcloud/vue/dist/Components/Content' @@ -102,16 +101,9 @@ export default { * * @param {Object} $event the event */ - closeDetails($event) { - if (!($event.target.closest('.reactive') || $event.target.classList.contains('reactive') - || $event.target.classList.contains('mx-btn') // For some reason the click-outside handlers fire for the datepicker month and year buttons!? - ) - && !$event.target.closest('#app-sidebar') && this.$route.params.taskId) { - if (this.$route.params.calendarId) { - this.$router.push({ name: 'calendars', params: { calendarId: this.$route.params.calendarId } }) - } else { - this.$router.push({ name: 'collections', params: { collectionId: this.$route.params.collectionId } }) - } + closeAppSidebar($event) { + if (!($event.target.closest('.reactive') || $event.target.classList.contains('reactive')) && this.$route.params.taskId) { + emit('tasks:close-appsidebar') } }, }, diff --git a/src/components/AppSidebar/CalendarPickerItem.vue b/src/components/AppSidebar/CalendarPickerItem.vue new file mode 100644 index 000000000..8d26433e9 --- /dev/null +++ b/src/components/AppSidebar/CalendarPickerItem.vue @@ -0,0 +1,145 @@ + + + + + + + diff --git a/src/components/AppSidebar/CalendarPickerOption.vue b/src/components/AppSidebar/CalendarPickerOption.vue new file mode 100644 index 000000000..1a52e3f6b --- /dev/null +++ b/src/components/AppSidebar/CalendarPickerOption.vue @@ -0,0 +1,137 @@ + + + + + + + diff --git a/src/components/AppSidebar/CheckboxItem.vue b/src/components/AppSidebar/CheckboxItem.vue new file mode 100644 index 000000000..776a22d7a --- /dev/null +++ b/src/components/AppSidebar/CheckboxItem.vue @@ -0,0 +1,95 @@ + + + + + + + diff --git a/src/components/AppSidebar/DatetimePickerItem.vue b/src/components/AppSidebar/DatetimePickerItem.vue new file mode 100644 index 000000000..6f10cc67a --- /dev/null +++ b/src/components/AppSidebar/DatetimePickerItem.vue @@ -0,0 +1,249 @@ + + + + + + + diff --git a/src/components/AppSidebar/MultiselectItem.vue b/src/components/AppSidebar/MultiselectItem.vue new file mode 100644 index 000000000..4d01c3017 --- /dev/null +++ b/src/components/AppSidebar/MultiselectItem.vue @@ -0,0 +1,163 @@ + + + + + + + diff --git a/src/components/AppSidebar/MultiselectOption.vue b/src/components/AppSidebar/MultiselectOption.vue new file mode 100644 index 000000000..d0bb5b984 --- /dev/null +++ b/src/components/AppSidebar/MultiselectOption.vue @@ -0,0 +1,94 @@ + + + + + + + diff --git a/src/components/AppSidebar/NotesItem.vue b/src/components/AppSidebar/NotesItem.vue new file mode 100644 index 000000000..95c8fbeec --- /dev/null +++ b/src/components/AppSidebar/NotesItem.vue @@ -0,0 +1,324 @@ + + +