From e08c430422a408d72799db112bad4c5c234694b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julius=20H=C3=A4rtl?= Date: Wed, 25 Jul 2018 17:50:42 +0200 Subject: [PATCH 1/5] Move app sidebar out of app content MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Julius Härtl --- css/style.scss | 47 +++++++++++++++++-------------- js/app/Config.js | 7 +++-- templates/main.php | 20 ++++++------- templates/part.board.mainView.php | 1 - templates/part.board.php | 4 --- templates/part.card.php | 8 +++--- 6 files changed, 43 insertions(+), 44 deletions(-) delete mode 100644 templates/part.board.php diff --git a/css/style.scss b/css/style.scss index 673c4b45c..064458d3c 100644 --- a/css/style.scss +++ b/css/style.scss @@ -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; diff --git a/js/app/Config.js b/js/app/Config.js index 8a8510496..fcb2203fe 100644 --- a/js/app/Config.js +++ b/js/app/Config.js @@ -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' } diff --git a/templates/main.php b/templates/main.php index 0dc3b7fb8..9e61ad6e8 100644 --- a/templates/main.php +++ b/templates/main.php @@ -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'); +} ?> -
+
inc('part.navigation')); ?> inc('part.settings')); */ ?>
-
-
-
+
+
- - - -
+
\ No newline at end of file diff --git a/templates/part.board.mainView.php b/templates/part.board.mainView.php index 1b9ae6fdd..bc5f483c2 100644 --- a/templates/part.board.mainView.php +++ b/templates/part.board.mainView.php @@ -37,7 +37,6 @@
- {{ cardOpen }}
diff --git a/templates/part.board.php b/templates/part.board.php deleted file mode 100644 index 7fe90db85..000000000 --- a/templates/part.board.php +++ /dev/null @@ -1,4 +0,0 @@ -inc('part.board.mainView')); ?> -
-
diff --git a/templates/part.card.php b/templates/part.card.php index dcfecc96a..a21f4735b 100644 --- a/templates/part.card.php +++ b/templates/part.card.php @@ -1,5 +1,5 @@ -
-
+
+

t('Drop your files here to upload it to the card')); ?>

@@ -97,8 +97,8 @@ t('Saved')); ?> t('Unsaved changes')); ?> t('Formatting help')); ?> - - + +
From bf9811bf1192f35805834b98c79ad7a7f3687b9c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julius=20H=C3=A4rtl?= Date: Wed, 25 Jul 2018 17:51:01 +0200 Subject: [PATCH 2/5] Add CSS rules for 13 to be backward compatible MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Julius Härtl --- css/comp-13.scss | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 css/comp-13.scss diff --git a/css/comp-13.scss b/css/comp-13.scss new file mode 100644 index 000000000..776bcdc4b --- /dev/null +++ b/css/comp-13.scss @@ -0,0 +1,29 @@ +#content-wrapper #content { + height: 100%; +} +#app-content { + flex-grow: 1; + height: 100%; +} + +#app-sidebar { + right: -500px; + max-width: 100%; + width: 500px; + display:flex; + flex-direction: column; + + &.details-visible { + right: 0; + } +} + +#app-content { + &.details-visible { + margin-right: 500px; + } +} + +#content[class*='app-'] * { + box-sizing: border-box; +} From 725ba6ff72996ba0a7969c86dd8f9afeeec6d3e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julius=20H=C3=A4rtl?= Date: Wed, 25 Jul 2018 20:51:41 +0200 Subject: [PATCH 3/5] Move app sidebar handling to angular/css MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Julius Härtl --- css/comp-13.scss | 12 ++++++++++++ css/style.scss | 21 ++++++++++++++++++++- js/app/Run.js | 20 -------------------- js/controller/AppController.js | 9 +++++++++ templates/main.php | 4 ++-- 5 files changed, 43 insertions(+), 23 deletions(-) diff --git a/css/comp-13.scss b/css/comp-13.scss index 776bcdc4b..1d888ee92 100644 --- a/css/comp-13.scss +++ b/css/comp-13.scss @@ -27,3 +27,15 @@ #content[class*='app-'] * { box-sizing: border-box; } + + +body:not(.snapjs-left) { + .app-navigation-hide { + #app-content { + margin-left: 0 !important; /* overwrite margin since we want the translateX to handle it*/ + } + #app-navigation { + display: none; + } + } +} \ No newline at end of file diff --git a/css/style.scss b/css/style.scss index 064458d3c..dfcbaf4fc 100644 --- a/css/style.scss +++ b/css/style.scss @@ -264,7 +264,7 @@ input.input-inline { } } -#app-navigation-toggle { +#app-navigation-toggle-custom { width: 44px; height: 44px; cursor: pointer; @@ -1439,3 +1439,22 @@ input.input-inline { .ui-select-dropdown.select2-drop-active { opacity: 1 !important; } + +/** + * Custom app sidebar handling + */ +body:not(.snapjs-left) { + .app-navigation-hide { + #app-content { + margin-left: 0 !important; /* overwrite margin since we want the translateX to handle it*/ + } + #app-navigation { + transform: translateX(-300px); + } + } +} +@media only screen and (max-width: 768px) { + #app-navigation-toggle-custom { + display: none; + } +} \ No newline at end of file diff --git a/js/app/Run.js b/js/app/Run.js index 6fef22355..60523305c 100644 --- a/js/app/Run.js +++ b/js/app/Run.js @@ -56,26 +56,6 @@ app.run(function ($document, $rootScope, $transitions, BoardService) { OC.filePath('deck', 'img', 'app-512.png') ); - $('#app-navigation-toggle').off('click'); - // App sidebar on mobile - var snapper = new Snap({ - element: document.getElementById('app-content'), - disable: 'right', - maxPosition: 250, - touchToDrag: false - }); - - $('#app-navigation-toggle').click(function () { - if ($(window).width() > 768) { - $('#app-navigation').toggle('hidden'); - } else { - if (snapper.state().state === 'left') { - snapper.close(); - } else { - snapper.open('left'); - } - } - }); // Select all elements with data-toggle="tooltips" in the document $('body').tooltip({ selector: '[data-toggle="tooltip"]' diff --git a/js/controller/AppController.js b/js/controller/AppController.js index 62f4e088a..356d3f283 100644 --- a/js/controller/AppController.js +++ b/js/controller/AppController.js @@ -30,4 +30,13 @@ app.controller('AppController', function ($scope, $location, $http, $log, $rootS $scope.sidebar = $rootScope.sidebar; $scope.user = oc_current_user; $rootScope.config = JSON.parse($attrs.config); + + $scope.appNavigationHide = false; + + $scope.toggleSidebar = function() { + if ($(window).width() > 768) { + $scope.appNavigationHide = !$scope.appNavigationHide; + console.log($scope.appNavigationHide); + } + } }); diff --git a/templates/main.php b/templates/main.php index 9e61ad6e8..2cd2310e6 100644 --- a/templates/main.php +++ b/templates/main.php @@ -34,13 +34,13 @@ if (\OC_Util::getVersion()[0] < 14) { } ?> -
+
inc('part.navigation')); ?> inc('part.settings')); */ ?>
-
+
From c33783ac819f17a1d391dbb22b8521a6e14075fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julius=20H=C3=A4rtl?= Date: Wed, 25 Jul 2018 20:56:13 +0200 Subject: [PATCH 4/5] Cleanup css MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Julius Härtl --- css/comp-13.scss | 13 +++++-------- css/style.scss | 24 ++++++++++++------------ 2 files changed, 17 insertions(+), 20 deletions(-) diff --git a/css/comp-13.scss b/css/comp-13.scss index 1d888ee92..770fd8727 100644 --- a/css/comp-13.scss +++ b/css/comp-13.scss @@ -4,6 +4,10 @@ #app-content { flex-grow: 1; height: 100%; + + &.details-visible { + margin-right: 500px; + } } #app-sidebar { @@ -18,21 +22,14 @@ } } -#app-content { - &.details-visible { - margin-right: 500px; - } -} - #content[class*='app-'] * { box-sizing: border-box; } - body:not(.snapjs-left) { .app-navigation-hide { #app-content { - margin-left: 0 !important; /* overwrite margin since we want the translateX to handle it*/ + margin-left: 0 !important; } #app-navigation { display: none; diff --git a/css/style.scss b/css/style.scss index dfcbaf4fc..4f0d73c8c 100644 --- a/css/style.scss +++ b/css/style.scss @@ -73,27 +73,27 @@ input.input-inline { /** * 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; } + + .app.app-deck { + width: 100%; + height: 100%; + display: flex; + } + + #app-content { + display: flex; + flex-direction: column; + } } /** From b84f118b4d8ee9f8c4fd0663eb8b3db4ea19f08f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julius=20H=C3=A4rtl?= Date: Fri, 27 Jul 2018 00:06:26 +0200 Subject: [PATCH 5/5] Fix eslint MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Julius Härtl --- js/controller/AppController.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/controller/AppController.js b/js/controller/AppController.js index 356d3f283..c2e4ef4cf 100644 --- a/js/controller/AppController.js +++ b/js/controller/AppController.js @@ -38,5 +38,5 @@ app.controller('AppController', function ($scope, $location, $http, $log, $rootS $scope.appNavigationHide = !$scope.appNavigationHide; console.log($scope.appNavigationHide); } - } + }; });