Merge pull request #602 from nextcloud/feature/587/compact-mode

Adds the compact mode

css/animations.scss

@@ -0,0 +1,43 @@
+/*
+ * @copyright Copyright (c) 2018 Michael Weimann <mail@michael-weimann.eu>
+ *
+ * @author 2018 Michael Weimann <mail@michael-weimann.eu>
+ *
+ * @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 <http://www.gnu.org/licenses/>.
+ *
+ */
+
+.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;
+  }
+}

css/compact-mode.scss

@@ -0,0 +1,41 @@
+/*
+ * @copyright Copyright (c) 2018 Michael Weimann <mail@michael-weimann.eu>
+ *
+ * @author 2018 Michael Weimann <mail@michael-weimann.eu>
+ *
+ * @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 <http://www.gnu.org/licenses/>.
+ *
+ */
+
+.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;
+      }
+    }
+  }
+}

css/icons.scss

@@ -40,3 +40,11 @@
 .icon-badge {
   background-image: url('../../../core/img/places/calendar-dark.svg');
 }
+
+.icon-toggle-compact-collapsed {
+  background-image: url('../img/toggle_view_expand.svg');
+}
+
+.icon-toggle-compact-expanded {
+  background-image: url('../img/toggle_view_collapse.svg');
+}

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';
+// margins/paddings
-@import 'icons.scss';
+$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 {

img/toggle_view_collapse.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" version="1.1" viewBox="0 0 4.2333 4.2333" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -292.77)" display="none" stroke-width=".23666"><rect x=".28112" y="293.43" width="3.7042" height="1.1906" ry=".20225"/><rect x=".26458" y="295.15" width="3.7042" height="1.1906" ry=".20225"/></g><g transform="translate(0 -292.77)"><g transform="matrix(.040404 0 0 .040404 -3.0978 290.01)"><rect x="83.629" y="114.13" width="91.678" height="13.097" stroke-width="3.9049"/><path d="m155.25 81.388-26.194 26.194-26.194-26.154z" stroke-width="6.5484"/><path d="m155.25 159.97-26.194-26.194-26.194 26.154z" stroke-width="6.5484"/></g></g></svg>

img/toggle_view_expand.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" version="1.1" viewBox="0 0 4.2333 4.2333" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -292.77)" display="none" stroke-width=".23666"><rect x=".28112" y="293.43" width="3.7042" height="1.1906" ry=".20225"/><rect x=".26458" y="295.15" width="3.7042" height="1.1906" ry=".20225"/></g><g transform="translate(0 -292.77)"><g transform="matrix(.040404 0 0 .040404 -3.0978 290.01)"><rect x="83.629" y="114.13" width="91.678" height="13.097" stroke-width="3.9049"/><path d="m155.25 107.58-26.194-26.194-26.194 26.154z" stroke-width="6.5484"/><path d="m155.25 133.78-26.194 26.194-26.194-26.154z" stroke-width="6.5484"/></g></g></svg>

js/controller/AppController.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() {

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 () {

templates/main.php

@@ -34,7 +34,13 @@ if (\OC_Util::getVersion()[0] < 14) {
 }
 ?>
 
-<div class="app app-deck" data-ng-app="Deck" ng-controller="AppController" ng-cloak config="<?php p(json_encode($_)); ?>" ng-class="{'app-navigation-hide': appNavigationHide}">
+<div
+		class="app app-deck"
+		data-ng-app="Deck"
+		ng-controller="AppController"
+		ng-cloak
+		config="<?php p(json_encode($_)); ?>"
+		ng-class="{'app-navigation-hide': appNavigationHide, 'compact-mode': compactMode}">
 
 	<div id="app-navigation" data-ng-controller="ListController" ng-init="initSidebar()">
 		<?php print_unescaped($this->inc('part.navigation')); ?>

templates/part.board.headerControls.php

@@ -21,6 +21,10 @@
     <i class="icon icon-archive"></i>
     <span class="hidden-visually"><?php p($l->t('Hide archived cards')); ?></span>
 </button>
+<button ng-click="toggleCompactMode()" title="<?php p($l->t('Toggle compact mode')); ?>">
+	<i class="icon" ng-class="{ 'icon-toggle-compact-collapsed': compactMode, 'icon-toggle-compact-expanded': !compactMode }"></i>
+	<span class="hidden-visually"><?php p($l->t('Toggle compact mode')); ?></span>
+</button>
 <button ui-sref="board.detail({ id: id, tab: 0})"  title="<?php p($l->t('Board details')); ?>">
     <i class="icon icon-settings"></i>
     <span class="hidden-visually"><?php p($l->t('Board details')); ?></span>

templates/part.board.mainView.php

@@ -81,16 +81,15 @@
 										autofocus-on-insert required maxlength="100" />
 								</form>
 							</h4>
-							<ul class="labels">
+							<ul class="labels compact-item" ng-if="!compactMode">
 								<li ng-repeat="label in cardservice.get(c.id).labels"
 									ng-style="labelStyle(label.color)" title="{{ label.title }}">
 									<span>{{ label.title }}</span>
 								</li>
 							</ul>
-
 						</div>
 
-						<div class="card-controls">
+						<div class="card-controls compact-item" ng-if="!compactMode">
 							<i class="icon icon-filetype-text" ng-if="cardservice.get(c.id).description" title="{{ cardservice.get(c.id).description }}"></i>
 							<span class="due" ng-if="cardservice.get(c.id).duedate" ng-class="{'overdue': cardservice.get(c.id).overdue == 3, 'now': cardservice.get(c.id).overdue == 2, 'next': cardservice.get(c.id).overdue == 1  }" title="{{ cardservice.get(c.id).duedate }}">
 								<i class="icon icon-badge"></i>