diff --git a/appinfo/info.xml b/appinfo/info.xml index a1e984476..fcae103d6 100644 --- a/appinfo/info.xml +++ b/appinfo/info.xml @@ -36,7 +36,7 @@ pgsql sqlite mysql - + OCA\Deck\Cron\DeleteCron diff --git a/css/animations.scss b/css/animations.scss deleted file mode 100644 index fe3a85a48..000000000 --- a/css/animations.scss +++ /dev/null @@ -1,43 +0,0 @@ -/* - * @copyright Copyright (c) 2018 Michael Weimann - * - * @author 2018 Michael Weimann - * - * @license GNU AGPL version 3 or any later version - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as - * published by the Free Software Foundation, either version 3 of the - * License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see . - * - */ - -.compact-item.ng-enter, -.compact-item.ng-leave { - overflow: hidden; - transition: all 250ms linear; -} - -.compact-item.ng-enter { - max-height: 0; - - &.ng-enter-active { - max-height: 50px; - } -} - -.compact-item.ng-leave { - max-height: 50px; - - &.ng-leave-active { - max-height: 0; - } -} diff --git a/css/autocomplete.scss b/css/autocomplete.scss deleted file mode 100644 index 0837b3878..000000000 --- a/css/autocomplete.scss +++ /dev/null @@ -1,77 +0,0 @@ -/** - * based upon apps/comments/js/vendor/At.js/dist/css/jquery.atwho.css, - * only changed colors and font-weight - */ - -.atwho-view { - position:absolute; - top: 0; - left: 0; - display: none; - margin-top: 18px; - background: var(--color-main-background); - color: var(--color-main-text); - border: 1px solid var(--color-border); - border-radius: var(--border-radius); - box-shadow: 0 0 5px var(--color-box-shadow); - min-width: 120px; - z-index: 11110 !important; -} - -.atwho-view .atwho-header { - padding: 5px; - margin: 5px; - cursor: pointer; - border-bottom: solid 1px var(--color-border); - color: var(--color-main-text); - font-size: 11px; - font-weight: bold; -} - -.atwho-view .atwho-header .small { - color: var(--color-main-text); - float: right; - padding-top: 2px; - margin-right: -5px; - font-size: 12px; - font-weight: normal; -} - -.atwho-view .atwho-header:hover { - cursor: default; -} - -.atwho-view .cur { - background: var(--color-primary); - color: var(--color-primary-text); -} -.atwho-view .cur small { - color: var(--color-primary-text); -} -.atwho-view strong { - color: var(--color-main-text); - font-weight: normal; -} -.atwho-view .cur strong { - color: var(--color-primary-text); - font-weight: normal; -} -.atwho-view ul { - /* width: 100px; */ - list-style:none; - padding:0; - margin:auto; - max-height: 200px; - overflow-y: auto; -} -.atwho-view ul li { - display: block; - padding: 5px 10px; - border-bottom: 1px solid var(--color-border); - cursor: pointer; -} -.atwho-view small { - font-size: smaller; - color: var(--color-main-text); - font-weight: normal; -} diff --git a/css/comments.scss b/css/comments.scss deleted file mode 100644 index 665051cf0..000000000 --- a/css/comments.scss +++ /dev/null @@ -1,261 +0,0 @@ -/* - * Copyright (c) 2016 - * - * This file is licensed under the Affero General Public License version 3 - * or later. - * - * See the COPYING-README file. - * - */ - -#commentsTabView .emptycontent { - margin-top: 0; -} - -#commentsTabView .newCommentForm { - margin-left: 36px; - position: relative; -} - -#commentsTabView .newCommentForm .message { - width: 100%; - padding: 10px; - min-height: 44px; - margin: 0; - - /* Prevent the text from overlapping with the submit button. */ - padding-right: 30px; -} - -#commentsTabView .newCommentForm { - .submit, - .submitLoading { - width: 44px; - height: 44px; - margin: 0; - padding: 13px; - background-color: transparent; - border: none; - opacity: .3; - position: absolute; - bottom: 0; - right: 0; - } -} - -#commentsTabView .deleteLoading { - padding: 14px; - vertical-align: middle; -} - -#commentsTabView .newCommentForm .submit:not(:disabled):hover, -#commentsTabView .newCommentForm .submit:not(:disabled):focus { - opacity: 1; -} - -#commentsTabView .newCommentForm div.message { - resize: none; -} - -#commentsTabView .newCommentForm div.message:empty:before { - content: attr(data-placeholder); - color: grey; -} - -#commentsTabView .comment { - position: relative; - /** padding bottom is little more so that the top and bottom gap look uniform **/ - padding: 10px 0 15px; -} - -#commentsTabView .comments .comment { - border-top: 1px solid var(--color-border); -} - -#commentsTabView .comment .avatar, -.atwho-view-ul * .avatar{ - width: 32px; - height: 32px; - line-height: 32px; - margin-right: 5px; -} - -#commentsTabView .comment .message .avatar, -.atwho-view-ul * .avatar -{ - display: inline-block; -} - -#activityTabView li.comment.collapsed .activitymessage, -#commentsTabView .comment.collapsed .message { - white-space: pre-wrap; -} - -#activityTabView li.comment.collapsed .activitymessage, -#commentsTabView .comment.collapsed .message { - max-height: 70px; - overflow: hidden; -} - -#activityTabView li.comment .message-overlay, -#commentsTabView .comment .message-overlay { - display: none; -} - -#activityTabView li.comment.collapsed .message-overlay, -#commentsTabView .comment.collapsed .message-overlay { - display: block; - position: absolute; - z-index: 2; - height: 50px; - pointer-events: none; - left: 0; - right: 0; - bottom: 0; - background: -moz-linear-gradient(rgba(var(--color-main-background), 0), var(--color-main-background)); - background: -webkit-linear-gradient(rgba(var(--color-main-background), 0), var(--color-main-background)); - background: -o-linear-gradient(rgba(var(--color-main-background), 0), var(--color-main-background)); - background: -ms-linear-gradient(rgba(var(--color-main-background), 0), var(--color-main-background)); - background: linear-gradient(rgba(var(--color-main-background), 0), var(--color-main-background)); - background-repeat: no-repeat; -} - -#commentsTabView .hidden { - display: none !important; -} - -/** set min-height as 44px to ensure that it fits the button sizes. **/ -#commentsTabView .comment .authorRow { - min-height: 44px; -} -#commentsTabView .comment .authorRow .tooltip { - /** because of the padding on the element, the tooltip appear too far up, - adding this brings them closer to the element**/ - margin-top: 5px; -} - -.atwho-view-ul * .avatar-name-wrapper, -#commentsTabView .comment .authorRow { - position: relative; - display: inline-flex; - align-items: center; - width: 100%; -} - -#commentsTabView .comment:not(.newCommentRow) .message .avatar-name-wrapper:not(.currentUser), -#commentsTabView .comment:not(.newCommentRow) .message .avatar-name-wrapper:not(.currentUser) .avatar, -#commentsTabView .comment:not(.newCommentRow) .message .avatar-name-wrapper:not(.currentUser) .avatar img, -#commentsTabView .comment .authorRow .avatar:not(.currentUser), -#commentsTabView .comment .authorRow .author:not(.currentUser) { - cursor: pointer; -} - -.atwho-view-ul .avatar-name-wrapper, -.atwho-view-ul .avatar-name-wrapper .avatar, -.atwho-view-ul .avatar-name-wrapper .avatar img { - cursor: pointer; -} - -#commentsTabView .comments li .message .atwho-inserted, -#commentsTabView .newCommentForm .atwho-inserted { - .avatar-name-wrapper { - /* Make the wrapper the positioning context of its child contacts - * menu. */ - position: relative; - - display: inline; - vertical-align: top; - background-color: var(--color-background-dark); - border-radius: 50vh; - padding: 1px 7px 1px 1px; - - /* Ensure that the avatar and the user name will be kept together. */ - white-space: nowrap; - - .avatar { - img { - vertical-align: top; - } - height: 16px; - width: 16px; - vertical-align: middle; - padding: 1px; - margin-top: -3px; - margin-left: 0; - margin-right: 2px; - } - strong { - /* Ensure that the user name is shown in bold, as different browsers - * use different font weights for strong elements. */ - font-weight: bold; - } - } - .avatar-name-wrapper.currentUser { - background-color: var(--color-primary); - color: var(--color-primary-text); - } -} - -.atwho-view-ul * .avatar-name-wrapper { - white-space: nowrap; -} -#commentsTabView .comment .author, -#commentsTabView .comment .date { - opacity: .5; -} -#commentsTabView .comment .author { - max-width: 210px; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; -} -#commentsTabView .comment .date { - margin-left: auto; - /** this is to fix the tooltip being too close due to the margin-top applied - to bring the tooltip closer for the action icons **/ - padding: 10px 0px; -} - -#commentsTabView .comments > li:not(.newCommentRow) .message { - padding-left: 40px; - word-wrap: break-word; - overflow-wrap: break-word; -} - -#commentsTabView .comment .action { - opacity: 0.3; - padding: 14px; - display: block; -} - -#commentsTabView .comment .action:hover, -#commentsTabView .comment .action:focus { - opacity: 1; -} - -#commentsTabView .newCommentRow .action-container { - margin-left: auto; -} - -#commentsTabView .comment.disabled .message { - opacity: 0.3; -} - -#commentsTabView .comment.disabled .action { - display: none; -} - -#commentsTabView .message.error { - color: #e9322d; - border-color: #e9322d; - box-shadow: 0 0 6px #f8b9b7; -} - -.app-files .action-comment { - padding: 16px 14px; -} - -#commentsTabView .comment .message .contactsmenu-popover { - left: -6px; - top: 24px; -} diff --git a/css/comp-appnav.scss b/css/comp-appnav.scss deleted file mode 100644 index ebe9f1292..000000000 --- a/css/comp-appnav.scss +++ /dev/null @@ -1,113 +0,0 @@ -/* - * @copyright Copyright (c) 2017 Julius Härtl - * @copyright Copyright (c) 2016, John Molakvoæ - * - * @author Julius Härtl - * - * @license GNU AGPL version 3 or any later version - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as - * published by the Free Software Foundation, either version 3 of the - * License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see . - * - */ - -/** - * Hotfix for support a, - > span { - position: relative; - padding: 12px; - opacity: 0.5; - top: 0 !important; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - flex: 0 0 auto; - &.icon-home { - // Hide home text - text-indent: -9999px; - } - } - > a[class^='icon-'] { - padding: 0; - width: 44px; - } - &:not(:first-child) a { - } - &:last-child { - font-weight: 600; - margin-right: 10px; - // Allow multiple span next to the main 'a' - a ~ span { - padding-left: 0; - } - } - &:hover, &:focus, a:focus, &:active { - > a, - > span { - opacity: .7; - } - } -} \ No newline at end of file diff --git a/css/compact-mode.scss b/css/compact-mode.scss deleted file mode 100644 index 8006f8aa6..000000000 --- a/css/compact-mode.scss +++ /dev/null @@ -1,43 +0,0 @@ -/* - * @copyright Copyright (c) 2018 Michael Weimann - * - * @author 2018 Michael Weimann - * - * @license GNU AGPL version 3 or any later version - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as - * published by the Free Software Foundation, either version 3 of the - * License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see . - * - */ - -.compact-mode { - .card { - margin: $compact-board-item-margin; - - &:last-child { - margin: $compact-board-last-item-margin; - } - } - - .stack { - .as-sortable-placeholder { - margin: $compact-board-item-margin; - min-height: 43px; - height: 43px; - - &:last-child { - margin: $compact-board-last-item-margin; - } - } - } -} diff --git a/css/globalstyles.scss b/css/globalstyles.scss index 1a1a65d38..9fd0a5d9c 100644 --- a/css/globalstyles.scss +++ b/css/globalstyles.scss @@ -24,17 +24,5 @@ * */ -// colors -$color-warning-light: nc-lighten($color-warning, 15%); -$color-lightgrey: nc-darken($color-main-background, 4%); -$color-grey: nc-darken($color-main-background, 7%); -$color-darkgrey: nc-darken($color-main-background, 32%); - -// margins/paddings -$board-item-margin: 10px 10px 20px 10px; -$board-last-item-margin: 10px; - -$compact-board-item-margin: 5px 10px 10px 10px; -$compact-board-last-item-margin: 5px 10px 10px; - @import 'icons'; +@import 'print'; diff --git a/css/style.scss b/css/style.scss deleted file mode 100644 index 46340a55c..000000000 --- a/css/style.scss +++ /dev/null @@ -1,1650 +0,0 @@ -/* - * @copyright Copyright (c) 2016 Julius Härtl - * - * @author Julius Härtl - * @author Artem Anufrij - * @author Marin Treselj - * @author Oskar Kurz - * @author Ryan Fletcher - * - * @license GNU AGPL version 3 or any later version - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as - * published by the Free Software Foundation, either version 3 of the - * License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see . - * - */ - -// colors -$color-warning-light: nc-lighten($color-warning, 15%); -$color-lightgrey: nc-darken($color-main-background, 4%); -$color-grey: nc-darken($color-main-background, 7%); -$color-darkgrey: nc-darken($color-main-background, 32%); - -// margins/paddings -$board-item-margin: 10px 10px 20px 10px; -$board-last-item-margin: 10px; - -$compact-board-item-margin: 5px 10px 10px 10px; -$compact-board-last-item-margin: 5px 10px 10px; - -@import 'comp-appnav'; -@import 'icons'; -@import 'animations'; -@import 'compact-mode'; -@import 'autocomplete'; -@import 'comments'; - -/** - * General styles - */ - -button, -.button, -.app-deck .icon { - display: flex; - &.button-inline { - border: 0; - background-color: transparent; - } - &.button-inline:hover { - border: 0; - background-color: transparent; - } -} - -input.input-inline { - font-size: inherit !important; - font-weight: inherit; - background-color: transparent; - padding: 0; - border: none; - width: 100%; - border-radius: 0; -} - -#searchbox { - display: flex !important; -} - -.editable-inline { - cursor: text; -} - -/** - * Generic app layout - */ - -#content { - height: 100%; - min-height: initial; -} - -.app.app-deck { - width: 100%; - height: 100%; - display: flex; -} - -#app-content { - display: flex; - flex-direction: column; -} - -/** - * Navigation sidebar - */ - -#app-navigation { - /** menu */ - .board-bullet { - position: absolute; - margin-left: 17px; - margin-top: 16px; - width: 12px; - height: 12px; - border: none; - border-radius: 50%; - cursor: pointer; - } - .app-navigation-entry-utils-menu-share i { - height: 100%; - width: 100%; - } - - li { - transition: height 250ms ease-in-out, opacity 250ms ease-in-out, z-index 250ms ease-in-out; - } - .editing { - height: 82px; - - .icon-add { - background-position: 14px 14px; - } - } - .app-navigation-entry-edit { - .colorselect { - div, label { - height: 32px; - width: auto; - } - } - form { - display: flex; - } - } - -} - -#app-settings-content { - overflow: initial; - - .ui-select-match-item { - border: 1px solid var(--color-background-darker) !important; - .select-label { - color: var(--color-main-text); - } - } - - p.hint { - margin-top: 10px; - color: var(--color-text-light); - } -} - -/** - * Board view - */ -#board-status { - position: absolute; - z-index: 999; - width: 100%; - height: 100%; - background-color: var(--color-main-background, $color-main-background); -} - -#board { - position: absolute; - white-space: nowrap; - overflow: auto; - z-index: 100; - width: 100%; - bottom: 0px; - top: 44px; - - &.as-sortable-un-selectable { - .card-list { - min-height: 96px; - } - } - - .card { - opacity: 1; - - &.file-drop { - - } - } - - &.card-selected { - - .card { - box-shadow: 0px 0px 7px 0px var(--color-background-darker, $color-grey); - - &.current { - box-shadow: 0px 0px 7px 0px var(--color-text-lighter, $color-darkgrey); - } - } - } - -} - -// styles to provide a drop zone in empty stacks -.as-sortable-un-selectable { - .card-list { - min-height: 96px; - flex-grow: 1; - } - - // empty stack placeholders and last placeholders should fill the space - .emptyStack .as-sortable-placeholder, - li:last-child.as-sortable-placeholder { - height: 100% !important; - } -} - -#innerBoard { - padding: 10px; - - > .as-sortable-placeholder { - display: flex !important; - width: 320px; - min-width: 320px; - margin-top: 0; - margin-left: 0; - } - - > .as-sortable-drag { - background-color: var(--color-main-background $color-main-background); - } -} - -#controls { - width: inherit; - z-index: 120; - display: flex; - align-items: center; - position: inherit; - padding-left: 44px; - - .crumb { - order: 0; - - .bullet { - opacity: 1; - } - - a:nth-child(2), - a:nth-child(3) { - padding-left: 0; - margin-left: -5px; - } - - a .icon { - margin-top: 2px; - } - - .board-bullet { - display: inline-block; - width: 20px; - height: 20px; - border: none; - border-radius: 50%; - } - } - - button { - width: 36px; - height: 36px; - padding: 9px; - } - - #stack-add form { - button { - height: auto; - width: 32px; - } - } - input[type='text'] { - padding: 6px; - border: 0 none transparent; - min-height: initial; - background-color: transparent; - height: inherit; - } - - .icon-home { // TODO: deprecate this - background-position: 8px center; - padding: 10px 24px 10px 14px; - } -} - -#app-navigation-toggle-custom { - width: 44px; - height: 44px; - cursor: pointer; - opacity: 1; - display: inline-block !important; - position: fixed; -} - -.board-header-controls { - margin-left: auto; - align-items: center; - - &.app-popover-menu-utils { - display: flex; - - #popover-controls { - display: flex; - align-items: center; - } - - .popovermenu { - margin-top: 35px; - margin-right: 6px; - } - } -} - -.filter-select { - position: absolute; - right: auto; - top: 42px; - left: -21%; - - li { - padding: 3px; - overflow: hidden; - width: auto; - - span { - display: block; - float: left; - width: 20px; - height: 20px; - margin-right: 5px; - } - } -} - -#stack-add { - background-color: var(--color-background-dark, $color-lightgrey); - border-radius: 3px; - margin: 3px; - display: flex; - align-content: center; - height: 34px; - - > form { - display: flex; - align-content: center; - } - - input { - &:invalid, - &:-moz-submit-invalid, - &:-moz-ui-invalid { - box-shadow: none; - } - } -} - -.stack { - width: 100%; - vertical-align: top; - display: flex; - flex-direction: column; - - h3 { - padding: 10px 10px 8px; - margin: 0; - font-size: 12pt; - font-weight: normal; - overflow: hidden; - display: flex; - min-height: 40px; - - &:hover button { - display: flex; - } - - input { - padding: 0; - width: 100%; - margin: 0; - font-size: 12pt; - border: 0; - background-color: var(--color-main-background, $color-main-background); - min-height: initial; - } - - span { - white-space: normal; - overflow: hidden; - text-overflow: ellipsis; - } - - button { - margin-left: auto; - display: flex; - opacity: 0.3; - padding-right: 0; - } - } - - form { - width: 100%; - } - - .as-sortable-placeholder { - margin: $board-item-margin; - border: 1px dashed $color-darkgrey; - min-height: 96px; - transition: margin 250ms linear; - - &:last-child { - margin: $board-last-item-margin; - } - } - - &.as-sortable-item { - height: 100%; - display: flex; - } - - > ul { - display: flex; - flex-direction: column; - } - -} - -.card { - background-color: var(--color-main-background, $color-main-background); - margin: $board-item-margin; - white-space: normal; - position: relative; - box-shadow: 0 0 3px 1px var(--color-background-darker, $color-darkgrey); - border-radius: 3px; - transition: margin 250ms linear; - - &:last-child { - margin: $board-last-item-margin; - } - - &.archived .card-upper { - opacity: 0.5; - } - - .card-upper { - overflow: hidden; - position: relative; - padding: 5px; - } - - .card-assigned-users { - display: flex; - justify-content: flex-end; - flex-grow: 1; - .assigned-user { - z-index: 4; - margin: 6px 0 6px 6px; - } - } - - .card-controls { - background: var(--color-background-dark, $color-lightgrey); - display: flex; - position: relative; - padding-left: 10px; - - .card-options { - justify-content: flex-end; - } - - &:hover .card-options { - opacity: 1; - } - - .icon-description { - margin: 10px; - margin-left: 0px; - opacity: 0.5; - } - - .due { - border-radius: 3px; - margin: 6px 4px 6px 0px; - padding: 0 4px; - font-size: 90%; - opacity: 0.5; - display: flex; - align-items: center; - - .icon { - background-size: contain; - } - - &.overdue { - background-color: $color-error; - color: var(--color-primary-text, $color-primary-text); - - .icon-badge { - background-image: url('../img/calendar-white.svg'); - } - } - &.now { - background-color: $color-warning; - } - &.next { - background-color: $color-warning-light; - } - - span { - margin-left: 3px; - } - } - - .card-tasks, .card-files, .card-comments { - border-radius: 3px; - margin: 4px 4px 4px 0px; - padding: 0 2px; - font-size: 90%; - opacity: 0.5; - display: flex; - align-items: center; - - .icon { - background-size: contain; - margin-right: 2px; - } - } - } - - a { - display: block; - } - - h4 { - font-weight: normal; - font-size: 10pt; - padding: 0; - margin: 0 5px; - overflow: hidden; - text-overflow: ellipsis; - - span { - padding: 6px 0; - padding-top: 7px; - display: block; - } - - input { - width: 100%; - margin: 0; - } - } - - .labels { - position: relative; - margin-left: 5px; - - li { - padding: 0 4px; - margin: 0 2px 2px 0; - border-radius: 3px; - font-size: 75%; - border: none transparent; - float: left; - - span { - display: inline-block; - font-weight: bold; - background-color: inherit; - line-height: normal; - } - } - } - - &.create { - text-align: center; - margin: 20px 10px 10px; - border: 1px solid; - border-radius: 3px; - background-color: transparent; - overflow: hidden; - box-shadow: none; - cursor: pointer; - - &.emptyStack { - margin-top: 10px; - } - - &:hover { - text-align: center; - opacity: 1; - } - - .icon-add { - padding: 20px; - } - - h4 { - width: 100%; - padding: 0; - margin: 0; - - input { - width: 100%; - border: 0; - font-size: 10pt; - margin: 0; - padding: 10px; - } - } - } -} - -/* ng-sortable: Fix mobile touch scrolling */ -.as-sortable-item, -.as-sortable-item-handle { - -ms-touch-action: auto !important; - touch-action: auto !important; - -webkit-touch-callout: inherit !important; -} -/* disable scrolling only when a card is dragged */ -.as-sortable-un-selectable .as-sortable-item, -.as-sortable-un-selectable .as-sortable-item-handle { - -ms-touch-action: none !important; - touch-action: none !important; - -webkit-touch-callout: inherit !important; -} - - -.app-popover-menu-utils { - margin-left: auto; - min-height: 16px; -} - -.popovermenu:not(.action-item__menu) { - z-index: 999; - opacity: 1; - display: block; - - &.hidden { - display: none; - } - - ul { - display: flex !important; - flex-direction: column; - } -} - -.info { - padding-left: 5px; - padding-right: 5px; - display: inline-block; - opacity: 0.5; - - i { - margin-left: 2px; - } - - span { - margin-right: 2px; - } -} - -/** - * App sidebar - */ - -#sidebar-header { - - position: sticky; - top: 0; - background-color: var(--color-main-background, $color-main-background); - z-index: 200; - - h3 { - font-size: 14pt; - padding: 15px 15px 3px; - margin: 0; - overflow: hidden; - - input { - min-height: 0px; - margin: 0px; - } - } - - #card-dates { - font-size: 80%; - opacity: 0.5; - padding-left: 15px; - } - - .icon-close { - position: absolute; - top: 0px; - right: 0px; - padding: 14px; - height: 44px; - width: 44px; - } -} - -.drop-indicator { - display: none; -} -.card .nv-file-over, -.drop-indicator.nv-file-over { - display: block; - position: absolute; - width: 100%; - height: 100%; - background-color: var(--color-main-background, $color-main-background); - z-index: 100; - opacity: 0.9; - text-align: center; - - p { - width: calc(100% - 20px); - height: calc(100% - 20px); - position: absolute; - padding: 20px; - border: 1px dashed #AAA; - margin: 10px; - border-radius: 5px; - } -} - - -#card-meta { // TODO: use .card-block instead? - height: 100%; - display: flex; - flex-direction: column; - padding: 0 15px; - - .duedate { - display: flex; - align-content: center; - min-height: 38px; - - .timepicker-input { - width: 50px; - border-left: 0; - border-radius: 0px 3px 3px 0px; - } - - .datepicker-input { - width: 85px; - margin: 3px 0px; - border-radius: 3px 0px 0px 3px; - } - - .icon { - opacity: 0.5; - &:hover { - opacity: 1; - } - } - } - - .section-header { - border-bottom: 1px solid $color-lightgrey; - display: flex; - flex-shrink: 0; - margin-bottom: 5px; - margin-top: 10px; - h4 { - padding-top: 5px; - padding-bottom: 5px; - flex: 1; - } - } - - .section-header-tabbed { - margin-top: 10px; - margin-bottom: 5px; - flex-shrink: 0; - display: flex; - .tabHeaders { - margin: 0; - flex-grow: 1; - } - } - - .tabDetails { - display: flex; - height: 40px; - align-items: center; - justify-content: center; - input[type=button] { - width: 32px; - } - } - - .save-indicator { - border-radius: 3px; - margin: 5px; - padding: 0 10px; - font-size: 8pt; - display: none; - text-align: center; - &.saved { - background-color: $color-success; - color: $color-primary-text; - } - &.unsaved { - background-color: var(--color-background-dark, $color-lightgrey); - color: var(--color-text-light, $color-darkgrey); - } - } - - .icon-help { - opacity: 0.5; - padding: 5px 15px; - display: inline; - } - - .card-details-assign-users { - - .select2 .ui-select-choices-row-inner { - display: flex; - padding: 5px !important; - } - - .card-details-assign-users-list { - display: flex; - .assigned-user { - position: relative; - - .avatardiv-container { - margin-right: 5px; - } - } - .tooltip { - z-index: 998; - position: fixed; - } - } - } - - .icon-upload.icon-loading-small { - background-image: none; - } - .attachment-list-wrapper { - position: fixed; - width: 100%; - height: 100%; - background-color: rgba($color-darkgrey, 0.5); - left: 0; - top: 0; - z-index: 300; - } - .attachment-list { - &.selector { - padding: 10px; - position: absolute; - width: 30%; - max-width: 500px; - min-width: 200px; - max-height: 50%; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background-color: var(--color-main-background, $color-main-background); - z-index: 2; - border-radius: 3px; - box-shadow: 0 0 3px var(--color-background-dark, $color-darkgrey); - overflow: scroll; - } - h3.attachment-selector { - margin: 0 0 10px; - padding: 0; - .icon-close { - display: inline-block; - float: right; - } - } - - li.attachment { - display: flex; - padding: 3px; - - &.deleted { - opacity: .5; - } - - .fileicon { - display: inline-block; - min-width: 32px; - width: 32px; - height: 32px; - background-size: contain; - } - .details { - flex-grow: 1; - flex-shrink: 1; - min-width: 0; - flex-basis: 50%; - line-height: 110%; - padding: 2px; - } - .filename { - width: 70%; - display: flex; - .basename { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - padding-bottom: 2px; - } - .extension { - opacity: 0.7; - } - } - .filesize, .filedate { - font-size: 90%; - color: $color-darkgrey; - } - .app-popover-menu-utils { - position: relative; - right: -10px; - button { - height: 32px; - width: 42px; - } - } - button.icon-history { - width: 44px; - } - progress { - margin-top: 3px; - } - } - } - - .card-description { - &.section-header { - .save-indicator { - margin-bottom: 5px; - margin-top: 5px; - } - } - &.section-content { - height: 100%; - display: flex; - flex-direction: column; - - > div { - height: 100%; - } - - textarea { - width: 100%; - height: 200px; - border: none; - margin: 0; - padding: 0; - } - - .container { - background-color: var(--color-main-background, $color-main-background); - - } - } - } -} - -.activity-icon { - opacity: 1 !important; - .avatardiv-container { - top: -4px; - left: -7px; - margin-right: 5px; - img { - max-width: 24px; - max-height: 24px; - opacity: 1; - } - } - & > img { - opacity: 0.7; - } -} - -.activitysubject.commentAuthor { - margin-left: 26px; - margin-right: 0; - margin-top: 10px; -} -.activityTabView { - .activity { - margin-bottom: 20px; - } - .activitytime { - margin: 0 !important; - } -} -.activitysubject .app-popover-menu-utils { - display: inline-block; - position: relative; - a { - font-weight: normal; - } - button { - opacity: .5; - padding: 7px; - margin-left: 10px; - } -} - -#commentsTabView { - .newCommentRow .avatardiv-container { - left: -7px; - } - .comment { - position: relative; - padding: 0 0 15px; - - .avatardiv { - width: 24px; - height: 24px; - line-height: 24px; - } - } - .newCommentForm { - margin-left: 26px; - } -} - -.card-attachments { - .error { - padding-left: 38px; - margin-bottom: 5px; - background-position: 10px; - } -} - -.labels { - display: block; - overflow: hidden; - - li { - padding: 0px 0px 5px 0px; - border-radius: 3px; - margin: 1px; - color: $color-primary-text; - min-width: 20px; - display: flex; - } -} - -/** - * Color selection - */ -.colorselect { - overflow: hidden; - border-radius:3px; - flex-direction: row; - display: flex; - - .color { - opacity: 0.7; - height: 100%; - flex-grow: 1; - border: none; - } - - label.color { - flex-grow: 1; - } - - .selected { - background-image: url('../../../core/img/actions/checkmark.svg'); - background-position: center center; - background-repeat: no-repeat; - opacity: 1; - &.selected { - background-image: url('../../../core/img/actions/checkmark-white.svg'); - } - } - - .colorselect-label, .colorselect-label-white { - background-image: url('../img/color_picker-dark.svg'); - background-position: center center; - background-repeat: no-repeat; - opacity: 1; - input { - position: absolute; - visibility: hidden; - height: 32px; - width: 40px; - } - } - .colorselect-label-white { - background-image: url('../img/color_picker.svg'); - } -} - -.labels { - .colorselect { - padding: 0; - clear: none; - overflow: visible; - - .color { - width: 26px; - height: 26px; - } - } - - .label-edit { - display: flex; - width: 100%; - - .colorselect { - margin: 0px 0px 0px 3px; - } - - input { - border-bottom: 1px solid $color-lightgrey; - padding: 5px 5px 4px 5px !important; - } - } -} - - -/** - * Board list main screen area - */ -#boardlist { - position: absolute; - overflow: auto; - width: 100%; - bottom: 0px; - top: 44px; - - thead td { - opacity: .5; - padding: 15px; - } - - td { - padding: 0 10px; - border-bottom: 1px solid $color-grey; - - .board-bullet { - width: 32px; - height: 32px; - border-radius: 50%; - cursor: pointer; - margin: 6px; - } - - form { - display: flex; - width: 100%; - } - - .colorselect { - flex-grow: 1; - - div, - label { - min-width: 32px; - } - } - - input[type=text] { - flex-grow: 2; - } - - input[type=submit] { - width: 32px; - } - - .app-popover-menu-utils { - position: relative; - - button { - opacity: 0.5; - padding: 22px; - } - - &:hover button { - opacity: 1; - } - } - } - - .icon { - padding: 25px; - margin: 0 0 0 auto; - } - - tr.deleted td *, - tbody .board-create td { - opacity: 0.5; - } - - .board-edit-controls { - display: flex; - } - - input { - margin: 0px; - } - - #assigned-users { - display: flex; - - .avatardiv-container { - margin: 6px; - } - } -} - -/** - * Board details - */ - -#tabBoardShare .select2 .ui-select-choices-row-inner { - display: flex; - padding: 5px !important; -} - -#shareWithList { - list-style-type: none; - padding: 0 0 16px; - - li { - padding-top: 5px; - padding-bottom: 5px; - font-weight: bold; - white-space: normal; - display: flex; - align-items: center; - } - - .username { - padding-right: 8px; - padding-left: 8px; - white-space: nowrap; - text-overflow: ellipsis; - display: inline-block; - overflow: hidden; - vertical-align: middle; - flex-grow: 1; - } - - .icon-delete { - display: inline-block; - background-size: 16px 16px; - width: 16px; - height: 16px; - padding: 0; - margin-top: 10px; - } - - .sharingOptionsGroup { - margin-right:10px; - } - .shareOption { - margin-top: 5px; - } -} - -.avatardiv { - background-color: $color-lightgrey; - border-radius: 16px; - width: 32px; - height: 32px; - - .icon-group, .icon { - padding: 16px; - opacity: 0.5; - } - - &.has-contactsmenu img { - cursor: pointer; - } -} - -.avatardiv-container { - position: relative; -} - -.board-detail__deleted-list__item { - display: flex; - flex-direction: row; - - * { - flex-basis: 44px; - } - - .title { - flex-grow: 2; - } - .live-relative-timestamp { - flex-grow: 1; - } -} - -#board-detail-labels { - ul li { - input { - margin: 0px; - padding: 5px; - min-height: 0px; - } - - .label-title { - width: 100%; - padding: 4px; - border: none; - border-radius: 0px 0px 5px 5px; - } - - a.icon { - padding: 5px; - opacity: 0.5; - &:hover { - opacity: 1; - } - } - } - - .color { - width: 28px; - height: 100%; - } -} - -.label-create { - width: 100%; - padding: 0px 56px 0px 0px !important; - - a { - margin: 0px; - } - - .icon { - margin-right: 10px; - } -} - -.tabHeaders { - clear: both; - overflow: initial; - margin-bottom: 0; - .icon { - display: inline-block; - background-size: contain; - margin-right: 5px; - opacity: 0.5; - } -} - -.tabsContainer { - margin-top: 15px; - height: 100%; - - .tab { - height: 100%; - } -} - -.ui-select-offscreen { - display: none; -} - -.ui-select-match-item { - padding: 0; - float: left !important; - display: block; - border-radius: 3px !important; - - .select-label { - color: $color-primary-text; - padding: 6px 23px 6px 6px; - margin-right: -23px !important; - } - - .select2-search-choice-close { - z-index: 100; - position: relative; - display: inline-flex !important; - margin-right: 7px; - vertical-align: top; - } -} - -.select2-container { - width: 100%; - margin: 0; - - .select2-choices { - padding: 0 !important; - - .select2-search-choice { - padding: 3px 0 !important; - border: 0 !important; - overflow: hidden; - } - .select2-search-field { - margin-right: -10px; - flex-grow: 1; - input { - width: 100% !important; - } - } - } - - .select2-choice { - height: auto; - } -} - -.ui-select-container[disabled] .ui-select-match-item { - margin-right: 0 !important; - - .select-label { - padding: 4px; - min-width: 26px !important; - height: 100%; - display: inline-block; - } -} - -.select2-search input { - width: 100% !important; -} - -.select2-result-label { - padding: 0px !important; - display: flex; - span { - flex-grow: 1; - padding: 6px; - } -} - -/** - * 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: 0.5; - text-decoration: underline; - } - - 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, $color-lightgrey); - padding: 3px; - overflow: auto; - - code { - white-space: pre; - } - } - - img { - max-width: 100%; - max-height: 50vh; - margin: auto; - display: block; - } - - input[type=checkbox] { - margin: 0px 10px 0px 0px; - 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: $color-main-background; - } - - table { - margin-bottom: 10px; - border-collapse: collapse; - - thead { - background-color: var(--color-background-dark, $color-lightgrey); - } - td, th { - border: 1px solid var(--color-background-darker, $color-darkgrey); - padding: 3px; - } - } -} - -.section-wrapper { - display: flex; - max-width: 100%; - margin-top: 10px; -} - -.section-label { - background-position: 0px center; - width:28px; - flex-shrink: 0; -} - -.section-details { - flex-grow: 1; -} -/** - * Mobile optimizations - */ -@media (min-width: 481px) { - /* hide board actions on mobile */ - .board-header-controls { - display: flex; - - &.app-popover-menu-utils { - display: none; - } - } - - #innerBoard { - display: flex; - } - - .stack { - width: 320px; - min-width: 320px; - border-right: 1px solid $color-lightgrey; - margin-right: 10px; - padding-right: 10px; - - &:last-child { - border-right: 1px solid transparent; - } - - h3 button { - display: none; - } - h2:hover button { - display: inline-flex; - } - } -} - - -/** - * Hotfix for https://github.com/angular-ui/ui-select/issues/1652 - */ -.ui-select-dropdown.select2-drop-active { - opacity: 1 !important; -} - -/** - * Custom app sidebar handling - */ -body:not(.snapjs-left) { - .app-navigation-hide { - #app-content { - margin-left: 0 !important; /* overwrite margin since we want the translateX to handle it*/ - } - #app-navigation { - transform: translateX(-300px); - } - } -} -@media only screen and (max-width: 768px) { - #app-navigation-toggle-custom { - display: none; - } -} - -/** - * Print settings, better leave them at the eof - */ -@import 'print.scss'; diff --git a/src/App.vue b/src/App.vue index 784f1a394..5e114a40b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -95,6 +95,9 @@ export default { #content { #app-content { transition: margin-left 100ms ease; + position: relative; + overflow-x: hidden; + align-items: stretch; } #app-sidebar { diff --git a/src/components/ActivityEntry.vue b/src/components/ActivityEntry.vue index 82ddc8165..ca5017187 100644 --- a/src/components/ActivityEntry.vue +++ b/src/components/ActivityEntry.vue @@ -45,7 +45,7 @@ export default { }, parseMessage(activity) { const subject = activity.subject_rich[0] - const parameters = activity.subject_rich[1] + const parameters = JSON.parse(JSON.stringify(activity.subject_rich[1])) if (parameters.after && typeof parameters.after.id === 'string' && parameters.after.id.startsWith('dt:')) { const dateTime = parameters.after.id.substr(3) parameters.after.name = window.moment(dateTime).format('L LTS') diff --git a/src/components/Controls.vue b/src/components/Controls.vue index a6a032a8d..d2da1a815 100644 --- a/src/components/Controls.vue +++ b/src/components/Controls.vue @@ -23,21 +23,16 @@ @@ -93,6 +99,7 @@ export default { editing: false, copiedStack: '', newCardTitle: '', + showAddCard: false, } }, computed: { @@ -147,6 +154,7 @@ export default { } this.$store.dispatch('addCard', newCard) this.newCardTitle = '' + this.showAddCard = false }, }, } @@ -155,29 +163,24 @@ export default { diff --git a/src/components/board/TagsTabSidebar.vue b/src/components/board/TagsTabSidebar.vue index 45a92d9c9..ca33db14f 100644 --- a/src/components/board/TagsTabSidebar.vue +++ b/src/components/board/TagsTabSidebar.vue @@ -133,6 +133,7 @@ export default {