Move app sidebar out of app content

Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2018-07-25 17:50:42 +02:00
parent aa4db7f789
commit 9e21c8597f
6 changed files with 43 additions and 44 deletions

View File

@@ -70,6 +70,32 @@ input.input-inline {
cursor: text;
}
/**
* Generic app layout
*/
.app.app-deck {
width: 100%;
height: 100%;
display: flex;
}
#app-content {
display: flex;
flex-direction: column;
}
#content-wrapper {
overflow: hidden;
position: fixed;
width: 100%;
height: 100%;
#content {
height: calc(100% - 50px);
min-height: initial;
}
}
/**
* Navigation sidebar
*/
@@ -617,17 +643,6 @@ input.input-inline {
/**
* App sidebar
*/
#app-sidebar {
right: -500px;
max-width: 100%;
width: 500px;
display:flex;
flex-direction: column;
&.details-visible {
right: 0;
}
}
#sidebar-header {
h3 {
@@ -922,16 +937,6 @@ input.input-inline {
}
}
#app-content {
overflow: hidden;
display: flex;
flex-direction: column;
&.details-visible {
margin-right: 500px;
}
}
.labels {
display: block;
overflow: hidden;

View File

@@ -71,8 +71,9 @@ app.config(function ($provide, $interpolateProvider, $httpProvider, $urlRouterPr
tab: {value: 0, dynamic: true},
},
views: {
'sidebarView': {
templateUrl: '/board.sidebarView.html'
'sidebarView@': {
templateUrl: '/board.sidebarView.html',
controller: 'BoardController'
}
}
})
@@ -82,7 +83,7 @@ app.config(function ($provide, $interpolateProvider, $httpProvider, $urlRouterPr
tab: {value: 0, dynamic: true},
},
views: {
'sidebarView': {
'sidebarView@': {
templateUrl: '/card.sidebarView.html',
controller: 'CardController'
}

View File

@@ -28,32 +28,30 @@ Util::addScript('deck', 'build/vendor');
Util::addStyle('deck', 'style');
Util::addScript('deck', 'build/deck');
if (\OC_Util::getVersion()[0] < 14) {
Util::addStyle('deck', 'comp-13');
}
?>
<div id="app" class="app-deck" data-ng-app="Deck" ng-controller="AppController" ng-cloak config="<?php p(json_encode($_)); ?>">
<div class="app app-deck" data-ng-app="Deck" ng-controller="AppController" ng-cloak config="<?php p(json_encode($_)); ?>">
<div id="app-navigation" data-ng-controller="ListController" ng-init="initSidebar()">
<?php print_unescaped($this->inc('part.navigation')); ?>
<?php /* print_unescaped($this->inc('part.settings')); */ ?>
</div>
<div id="app-content" ng-class="{ 'details-visible': sidebar.show }">
<div ui-view></div>
</div>
<div id="app-content" ng-class="{ 'details-visible': sidebar.show }"><div ui-view></div></div>
<div id="app-sidebar" ng-class="{ 'details-visible': sidebar.show }" ng-if="sidebar.show" class="details-view scroll-container" ui-view="sidebarView"></div>
<route-loading-indicator></route-loading-indicator>
<script type="text/ng-template" id="/boardlist.mainView.html">
<?php print_unescaped($this->inc('part.boardlist')); ?>
</script>
<script type="text/ng-template" id="/board.sidebarView.html">
<?php print_unescaped($this->inc('part.board.sidebarView')); ?>
</script>
<script type="text/ng-template" id="/board.mainView.html">
<?php print_unescaped($this->inc('part.board.mainView')); ?>
</script>
<script type="text/ng-template" id="/board.html">
<?php print_unescaped($this->inc('part.board')); ?>
<?php print_unescaped($this->inc('part.board.mainView')); ?>
</script>
<script type="text/ng-template" id="/card.sidebarView.html">
<?php print_unescaped($this->inc('part.card')); ?>

View File

@@ -37,7 +37,6 @@
</div>
<div id="board" class="scroll-container" ng-click="sidebar.show=false" ui-sref="board" ng-class="{'card-selected': params.cardId}">
{{ cardOpen }}
<search on-search="search" class="ng-hide"></search>
<div id="innerBoard" data-ng-model="stacks" data-as-sortable="sortOptionsStack">

View File

@@ -1,4 +0,0 @@
<?php print_unescaped($this->inc('part.board.mainView')); ?>
<div id="app-sidebar" class="details-view scroll-container"
ng-class="{ 'details-visible': sidebar.show }" ui-view="sidebarView">
</div>

View File

@@ -1,5 +1,5 @@
<div nv-file-drop="" uploader="uploader" class="drop-zone" options="{cardId: cardservice.getCurrent().id}">
<div class="drop-indicator" nv-file-over uploader="uploader">
<div nv-file-drop="" uploader="fileservice.uploader" class="drop-zone" options="{cardId: cardservice.getCurrent().id}">
<div class="drop-indicator" nv-file-over uploader="fileservice.uploader">
<p><?php p($l->t('Drop your files here to upload it to the card')); ?></p>
</div>
<div id="board-status" ng-if="statusservice.active">
@@ -97,8 +97,8 @@
<span class="save-indicator saved"><?php p($l->t('Saved')); ?></span>
<span class="save-indicator unsaved"><?php p($l->t('Unsaved changes')); ?></span>
<a ng-if="params.tab === 0" href="https://github.com/nextcloud/deck/wiki/Markdown-Help" target="_blank" class="icon icon-help" data-toggle="tooltip" data-placement="left" title="<?php p($l->t('Formatting help')); ?>"><span class="hidden-visually"><?php p($l->t('Formatting help')); ?></span></a>
<label ng-if="params.tab === 1" for="attachment-upload" class="button icon-upload" ng-class="{'icon-loading-small': uploader.isUploading}" data-toggle="tooltip" data-placement="left" title="<?php p($l->t('Upload attachment')); ?>"></label>
<input id="attachment-upload" type="file" nv-file-select="" uploader="uploader" class="hidden" options="{cardId: cardservice.getCurrent().id}"/>
<label ng-if="params.tab === 1" for="attachment-upload" class="button icon-upload" ng-class="{'icon-loading-small': fileservice.uploader.isUploading}" data-toggle="tooltip" data-placement="left" title="<?php p($l->t('Upload attachment')); ?>"></label>
<input id="attachment-upload" type="file" nv-file-select="" uploader="fileservice.uploader" class="hidden" options="{cardId: cardservice.getCurrent().id}"/>
<input ng-if="status.cardEditDescription" type="button" ng-mousedown="status.continueEdit = true; status.selectAttachment = true;" class="icon-files-dark" data-toggle="tooltip" data-placement="left" title="<?php p($l->t('Insert attachment')); ?>"/>
</div>