diff --git a/css/animations.scss b/css/animations.scss new file mode 100644 index 000000000..fe3a85a48 --- /dev/null +++ b/css/animations.scss @@ -0,0 +1,43 @@ +/* + * @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/compact-mode.scss b/css/compact-mode.scss new file mode 100644 index 000000000..03761bef9 --- /dev/null +++ b/css/compact-mode.scss @@ -0,0 +1,41 @@ +/* + * @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; + + &:last-child { + margin: $compact-board-last-item-margin; + } + } + } +} diff --git a/css/icons.scss b/css/icons.scss index efa315e08..c4a7791fb 100644 --- a/css/icons.scss +++ b/css/icons.scss @@ -39,4 +39,12 @@ .icon-badge { background-image: url('../../../core/img/places/calendar-dark.svg'); -} \ No newline at end of file +} + +.icon-toggle-compact-collapsed { + background-image: url('../img/toggle_view_expand.svg'); +} + +.icon-toggle-compact-expanded { + background-image: url('../img/toggle_view_collapse.svg'); +} diff --git a/css/style.scss b/css/style.scss index 54ea444e7..c7d5419b8 100644 --- a/css/style.scss +++ b/css/style.scss @@ -24,13 +24,23 @@ * */ +// 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%); -@import 'comp-appnav.scss'; -@import 'icons.scss'; +// 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'; /** * General styles @@ -338,7 +348,7 @@ input.input-inline { flex-direction: column; h3 { - padding: 10px 10px 8px; + padding: 10px 10px 8px;; margin: 0; font-size: 12pt; font-weight: normal; @@ -380,16 +390,16 @@ input.input-inline { } .as-sortable-placeholder { - margin: 10px 10px 20px 10px; + margin: $board-item-margin; border: 1px dashed $color-darkgrey; min-height: 96px; + transition: margin 250ms linear; &:last-child { - margin: 10px; + margin: $board-last-item-margin; } } - > ul { display: flex; flex-direction: column; @@ -397,17 +407,17 @@ input.input-inline { } - .card { background-color: $color-main-background; - margin: 10px 10px 20px 10px; + margin: $board-item-margin; white-space: normal; position: relative; box-shadow: 0 0 3px $color-darkgrey; border-radius: 3px; + transition: margin 250ms linear; &:last-child { - margin: 10px; + margin: $board-last-item-margin; } &.archived .card-upper { diff --git a/img/toggle_view_collapse.svg b/img/toggle_view_collapse.svg new file mode 100644 index 000000000..9e2f6671c --- /dev/null +++ b/img/toggle_view_collapse.svg @@ -0,0 +1 @@ + diff --git a/img/toggle_view_expand.svg b/img/toggle_view_expand.svg new file mode 100644 index 000000000..5985d7248 --- /dev/null +++ b/img/toggle_view_expand.svg @@ -0,0 +1 @@ + diff --git a/js/controller/AppController.js b/js/controller/AppController.js index c2e4ef4cf..ef246cf34 100644 --- a/js/controller/AppController.js +++ b/js/controller/AppController.js @@ -4,20 +4,20 @@ * @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 . - * + * */ import app from '../app/App.js'; @@ -30,6 +30,7 @@ app.controller('AppController', function ($scope, $location, $http, $log, $rootS $scope.sidebar = $rootScope.sidebar; $scope.user = oc_current_user; $rootScope.config = JSON.parse($attrs.config); + $rootScope.compactMode = false; $scope.appNavigationHide = false; diff --git a/js/controller/BoardController.js b/js/controller/BoardController.js index aa82d15f3..0cb5fc42d 100644 --- a/js/controller/BoardController.js +++ b/js/controller/BoardController.js @@ -115,6 +115,10 @@ app.controller('BoardController', function ($rootScope, $scope, $stateParams, St } }); + $scope.toggleCompactMode = function() { + $rootScope.compactMode = !$rootScope.compactMode; + }; + $scope.stacksData = StackService; $scope.stacks = []; $scope.$watch('stacksData', function () { diff --git a/js/package-lock.json b/js/package-lock.json index e3009410d..fea740bab 100644 --- a/js/package-lock.json +++ b/js/package-lock.json @@ -2970,8 +2970,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -2992,14 +2991,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -3014,20 +3011,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -3144,8 +3138,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -3157,7 +3150,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -3172,7 +3164,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -3180,14 +3171,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -3206,7 +3195,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -3287,8 +3275,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -3300,7 +3287,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -3386,8 +3372,7 @@ "safe-buffer": { "version": "5.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -3423,7 +3408,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3443,7 +3427,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3487,14 +3470,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true } } }, diff --git a/templates/main.php b/templates/main.php index 2cd2310e6..636c1107b 100644 --- a/templates/main.php +++ b/templates/main.php @@ -34,7 +34,13 @@ if (\OC_Util::getVersion()[0] < 14) { } ?> -
+
inc('part.navigation')); ?> @@ -60,4 +66,4 @@ if (\OC_Util::getVersion()[0] < 14) { inc('part.card.attachments')); ?> -
\ No newline at end of file +
diff --git a/templates/part.board.headerControls.php b/templates/part.board.headerControls.php index bbfb6d79c..1a6c4e184 100644 --- a/templates/part.board.headerControls.php +++ b/templates/part.board.headerControls.php @@ -21,6 +21,10 @@ t('Hide archived cards')); ?> +
-
+