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..1a57ab7de 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 @@ -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..b56434672 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'; @@ -31,6 +31,8 @@ app.controller('AppController', function ($scope, $location, $http, $log, $rootS $scope.user = oc_current_user; $rootScope.config = JSON.parse($attrs.config); + $rootScope.compactMode = localStorage.getItem('deck.compactMode') === 'true'; + $scope.appNavigationHide = false; $scope.toggleSidebar = function() { diff --git a/js/controller/BoardController.js b/js/controller/BoardController.js index aa82d15f3..34a0c4d64 100644 --- a/js/controller/BoardController.js +++ b/js/controller/BoardController.js @@ -115,6 +115,11 @@ app.controller('BoardController', function ($rootScope, $scope, $stateParams, St } }); + $scope.toggleCompactMode = function() { + $rootScope.compactMode = !$rootScope.compactMode; + localStorage.setItem('deck.compactMode', JSON.stringify($rootScope.compactMode)); + }; + $scope.stacksData = StackService; $scope.stacks = []; $scope.$watch('stacksData', function () { 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')); ?> +
-
+