ahtlon/deck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

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

Browse Source 
Adds the compact mode
This commit is contained in:
Julius Härtl
2018-08-29 17:47:35 +02:00
committed by GitHub
parent 2c12a99020 b20ea4dea1
commit 33764f645b
11 changed files with 138 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
css/animations.scss Normal file
View File

@@ -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;
}
}

41
css/compact-mode.scss Normal file
View File

@@ -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;
}
}
}
}

10
css/icons.scss
View File

@@ -39,4 +39,12 @@
.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');
}

26
css/style.scss
View File

@@ -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 {

1
img/toggle_view_collapse.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 671 B

1
img/toggle_view_expand.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 671 B

10
js/controller/AppController.js
View File

@@ -4,20 +4,20 @@
* @author Julius Härtl <jus@bitgrid.net>
*
* @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/>.
*
*
*/
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() {

5
js/controller/BoardController.js
View File

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

10
templates/main.php
View File

@@ -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')); ?>
@@ -60,4 +66,4 @@ if (\OC_Util::getVersion()[0] < 14) {
<?php print_unescaped($this->inc('part.card.attachments')); ?>
</script>
</div>
</div>

4
templates/part.board.headerControls.php
View File

@@ -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>

5
templates/part.board.mainView.php
View File

@@ -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>