diff --git a/CHANGELOG.md b/CHANGELOG.md index 8cd33e986..610195474 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ All notable changes to AET will be documented in this file. **List of changes that are finished but not yet released in any final version.** - [PR-226](https://github.com/Cognifide/aet/pull/226) Side panel follows the currently opened report while navigating them using keyboard shortcuts. The unused mCustomScrollbar plugin was removed. +- [PR-225](https://github.com/Cognifide/aet/pull/225) Added sidebar resize functionality for report app - [PR-221](https://github.com/Cognifide/aet/pull/221) Added crosshair buttons for scrolling Side Panel to currently opened url/test. - [PR-209](https://github.com/Cognifide/aet/pull/209) Selenium upgraded to 3.8.1. Guava upgraded to 23.6-jre diff --git a/report/src/main/webapp/app/app.config.js b/report/src/main/webapp/app/app.config.js index 4d433c72a..668a8ab5f 100644 --- a/report/src/main/webapp/app/app.config.js +++ b/report/src/main/webapp/app/app.config.js @@ -54,7 +54,7 @@ require.config({ //toolbarBottom 'toolbarBottomController': 'layout/toolbar/toolbarBottom.controller', //sidepanel - 'sidepanelToggleDirective': 'layout/sidepanel/sidepanelToggle.directive', + 'sidepanelDirective': 'layout/sidepanel/sidepanel.directive', 'sidepanelStatusFilterDirective': 'layout/sidepanel/sidepanelStatusFilter.directive', 'sidepanelSearchDirective': 'layout/sidepanel/sidepanelSearch.directive', 'sidepanelToggleLinkDirective': 'layout/sidepanel/toggleLink.directive', diff --git a/report/src/main/webapp/app/app.module.js b/report/src/main/webapp/app/app.module.js index c8ed47075..86ae1f15f 100644 --- a/report/src/main/webapp/app/app.module.js +++ b/report/src/main/webapp/app/app.module.js @@ -49,7 +49,7 @@ define(['angularAMD', 'viewModeService', // sidepanel - 'sidepanelToggleDirective', + 'sidepanelDirective', 'sidepanelStatusFilterDirective', 'sidepanelSearchDirective', 'sidepanelToggleLinkDirective', @@ -93,12 +93,8 @@ define(['angularAMD', $rootScope.fullSourceVisible = userSettingsService.isFullSourceVisible(); }]); - app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', - '$compileProvider', - function ($stateProvider, $urlRouterProvider, $locationProvider, - $compileProvider) { - $compileProvider.debugInfoEnabled(false); - + app.config(['$stateProvider', '$urlRouterProvider', + function ($stateProvider, $urlRouterProvider) { $stateProvider .state('root', angularAMD.route({ views: { diff --git a/report/src/main/webapp/app/layout/sidepanel/sidepanel.directive.js b/report/src/main/webapp/app/layout/sidepanel/sidepanel.directive.js new file mode 100644 index 000000000..03011d0c5 --- /dev/null +++ b/report/src/main/webapp/app/layout/sidepanel/sidepanel.directive.js @@ -0,0 +1,128 @@ +/* + * AET + * + * Copyright (C) 2013 Cognifide Limited + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +define(['angularAMD'], function (angularAMD) { + 'use strict'; + // custom prefix for custom directive 'aet' see: http://bit.ly/29U2YFf + angularAMD.directive('aetSidepanel', + ['$rootScope', 'localStorageService', SidepanelDirective]); + + function SidepanelDirective($rootScope, localStorageService) { + var EXPANDED_SIDEBAR_KEY_NAME = 'aet:expandedSidepanel'; + var INIT_SIDEPANEL_WIDTH = 350; + var $sidepanel; + var $content; + var $toggleIcon; + + var onWindowResizeThrottled = _.throttle(onWindowResize, 100); + + return { + restrict: 'AE', + link: linkFunc + }; + + function linkFunc($scope, $element) { + var newWidth = INIT_SIDEPANEL_WIDTH; + var isSidepanelResized = false; + + $scope.sidebarExpanded = true; + + $rootScope.$on('$stateChangeSuccess', function() { + $content = $element.find('.main'); + $sidepanel = $element.find('.aside'); + $toggleIcon = $element.find('.toolbar-toggle i'); + }); + + $scope.$watch('sidebarExpanded', function(newValue, oldValue) { + if (newValue !== oldValue) { + toggleSidepanel(); + } + }); + + $element.on('mousedown', '.aside-resizer', function (e) { + isSidepanelResized = true; + + e.preventDefault(); + }); + + $element.on('mousemove', _.throttle(function (e) { + if (isSidepanelResized) { + newWidth = limitSidepanelSize(e.pageX); + updateWidth(newWidth); + e.preventDefault(); + } + }, 10)); + + $element.on('mouseup', function () { + isSidepanelResized = false; + }); + + $element.on('click', '.toolbar-toggle', function () { + $scope.sidebarExpanded = !$scope.sidebarExpanded; + $scope.$apply(); + }); + + $(window).on('resize', onWindowResizeThrottled); + } + + function isExpanded() { + return localStorageService.get(EXPANDED_SIDEBAR_KEY_NAME); + } + + function toggleSidepanel() { + if (isExpanded()) { + close(); + } else { + expand(); + } + } + + function onWindowResize() { + updateWidth(limitSidepanelSize($sidepanel.outerWidth())); + } + + function expand() { + $content.css('left', $sidepanel.outerWidth()); + $content.css('width', document.body.clientWidth - $sidepanel.outerWidth()); + $sidepanel.css('left', 0); + + $(window).on('resize', onWindowResizeThrottled); + localStorageService.put(EXPANDED_SIDEBAR_KEY_NAME, true); + } + + function close() { + $content.css('left', 0); + $content.css('width', ''); + $sidepanel.css('left', -$sidepanel.outerWidth()); + + $(window).off('resize', onWindowResizeThrottled); + localStorageService.put(EXPANDED_SIDEBAR_KEY_NAME, false); + } + + function updateWidth(newWidth) { + var newContentWidth = document.body.clientWidth - newWidth; + + $content.css('left', newWidth); + $content.css('width', newContentWidth); + $sidepanel.css('width', newWidth); + } + + function limitSidepanelSize(xPos) { + return Math.min(Math.max(INIT_SIDEPANEL_WIDTH, xPos), document.body.clientWidth/2); + } + } +}); diff --git a/report/src/main/webapp/app/layout/sidepanel/sidepanel.view.html b/report/src/main/webapp/app/layout/sidepanel/sidepanel.view.html index a2039df2d..6dc4a2e10 100644 --- a/report/src/main/webapp/app/layout/sidepanel/sidepanel.view.html +++ b/report/src/main/webapp/app/layout/sidepanel/sidepanel.view.html @@ -17,7 +17,7 @@ limitations under the License. --> -
+
@@ -143,4 +143,6 @@

Discard all changes

+ +
\ No newline at end of file diff --git a/report/src/main/webapp/app/layout/sidepanel/sidepanelToggle.directive.js b/report/src/main/webapp/app/layout/sidepanel/sidepanelToggle.directive.js deleted file mode 100644 index 5ccca4d72..000000000 --- a/report/src/main/webapp/app/layout/sidepanel/sidepanelToggle.directive.js +++ /dev/null @@ -1,80 +0,0 @@ -/* - * AET - * - * Copyright (C) 2013 Cognifide Limited - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -define(['angularAMD'], function (angularAMD) { - 'use strict'; - // custom prefix for custom directive 'aet' see: http://bit.ly/29U2YFf - angularAMD.directive('aetSidepanelToggle', - ['$rootScope', 'localStorageService', ToggleSidepanelDirective]); - - function ToggleSidepanelDirective($rootScope, localStorageService) { - var EXPANDED_SIDEBAR_KEY_NAME = 'aet:expandedSidepanel', - directive; - - directive = { - restrict: 'AE', - scope: { - 'type': '@' - }, - link: linkFunc - }; - - return directive; - - function linkFunc(scope, element) { - var storedExpanded = localStorageService.get(EXPANDED_SIDEBAR_KEY_NAME); - if (storedExpanded === null) { - expand(); - } - $rootScope.sidebarExpanded = isExpanded(); - var toggleIcon = element.children('i'); - element.on('click', function () { - $('body').toggleClass('menu-expanded'); - toggle(); - - if (isExpanded()) { - toggleIcon.removeClass('glyphicon-chevron-right').addClass( - 'glyphicon-chevron-left'); - } else { - toggleIcon.removeClass('glyphicon-chevron-left').addClass( - 'glyphicon-chevron-right'); - } - }); - } - - function expand() { - localStorageService.put(EXPANDED_SIDEBAR_KEY_NAME, true); - } - - function close() { - localStorageService.put(EXPANDED_SIDEBAR_KEY_NAME, false); - } - - function isExpanded() { - var storedState = localStorageService.get(EXPANDED_SIDEBAR_KEY_NAME); - return storedState; - } - - function toggle() { - if (isExpanded()) { - close(); - } else { - expand(); - } - } - } -}); diff --git a/report/src/main/webapp/app/layout/toolbar/toolbarTop.view.html b/report/src/main/webapp/app/layout/toolbar/toolbarTop.view.html index 6f98d5888..562345c96 100644 --- a/report/src/main/webapp/app/layout/toolbar/toolbarTop.view.html +++ b/report/src/main/webapp/app/layout/toolbar/toolbarTop.view.html @@ -19,8 +19,8 @@ -->
-
- +
diff --git a/report/src/main/webapp/assets/css/main.css b/report/src/main/webapp/assets/css/main.css index b3027818a..22d218e1f 100644 --- a/report/src/main/webapp/assets/css/main.css +++ b/report/src/main/webapp/assets/css/main.css @@ -3956,101 +3956,103 @@ input[type=text]::-webkit-input-placeholder { color: #85898e; } /* AET Copyright (C) 2013 Cognifide Limited Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ /* line 18, ../sass/_sidebar.scss */ -.aside { -webkit-transition: left 0.3s, width 0.3s; -o-transition: left 0.3s, width 0.3s; transition: left 0.3s, width 0.3s; background: #2c333b; position: fixed; top: 0; left: -350px; width: 350px; height: 100%; overflow: hidden; text-align: center; z-index: 99; } -/* line 30, ../sass/_sidebar.scss */ +.aside { -webkit-transition: left 0.1s, width 0.1s; -o-transition: left 0.1s, width 0.1s; transition: left 0.1s, width 0.1s; background: #2c333b; position: fixed; top: 0; left: -350px; width: 350px; padding: 0 1.5rem; height: 100%; overflow: hidden; text-align: center; z-index: 99; } +/* line 31, ../sass/_sidebar.scss */ .menu-expanded .aside { left: 0; } -/* line 34, ../sass/_sidebar.scss */ +/* line 35, ../sass/_sidebar.scss */ +.aside-resizer { -webkit-transition: left 0.1s, width 0.1s; -o-transition: left 0.1s, width 0.1s; transition: left 0.1s, width 0.1s; display: block; height: 100%; width: 1.5rem; position: absolute; top: 0; right: 0; z-index: 100; cursor: col-resize; background-color: #2c333b; } +/* line 48, ../sass/_sidebar.scss */ .aside .logo-holder { width: 100%; padding-top: 10px; text-align: center; background: #2c333b; height: 80px; top: 0; z-index: 2; } -/* line 44, ../sass/_sidebar.scss */ +/* line 58, ../sass/_sidebar.scss */ .aside-report { line-height: 47px; max-height: 47px; overflow: hidden; position: relative; } -/* line 50, ../sass/_sidebar.scss */ +/* line 64, ../sass/_sidebar.scss */ .aside-report.is-expanded { max-height: initial; overflow-y: auto; } -/* line 54, ../sass/_sidebar.scss */ +/* line 68, ../sass/_sidebar.scss */ .aside-report.is-expanded ul { display: block; overflow: hidden; } -/* line 60, ../sass/_sidebar.scss */ +/* line 74, ../sass/_sidebar.scss */ .aside-report-container { height: calc(100vh - 240px); overflow: auto; } -/* line 65, ../sass/_sidebar.scss */ +/* line 79, ../sass/_sidebar.scss */ .aside-report .test-name { color: #85898e; display: block; width: 100%; padding-left: 13px; border-top: solid 1px #313942; } -/* line 72, ../sass/_sidebar.scss */ +/* line 86, ../sass/_sidebar.scss */ .aside-report .test-name.passed { color: #6f9f00; } -/* line 76, ../sass/_sidebar.scss */ +/* line 90, ../sass/_sidebar.scss */ .aside-report .test-name.warning { color: #f0ad4e; } -/* line 80, ../sass/_sidebar.scss */ +/* line 94, ../sass/_sidebar.scss */ .aside-report .test-name.failed, .aside-report .test-name.processing_error { color: #bb5a5a; } -/* line 85, ../sass/_sidebar.scss */ +/* line 99, ../sass/_sidebar.scss */ .aside-report .test-name.rebased { color: #0097fe; } -/* line 90, ../sass/_sidebar.scss */ +/* line 104, ../sass/_sidebar.scss */ .aside-report .test-name.is-hidden + .urls-list { display: none; } -/* line 95, ../sass/_sidebar.scss */ +/* line 109, ../sass/_sidebar.scss */ .aside-report .test-name.is-active { color: #ffffff; } -/* line 98, ../sass/_sidebar.scss */ +/* line 112, ../sass/_sidebar.scss */ .aside-report .test-name.is-active:before { color: inherit; } -/* line 104, ../sass/_sidebar.scss */ +/* line 118, ../sass/_sidebar.scss */ .aside-report span { white-space: nowrap; overflow: hidden; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; color: inherit; font-family: "montserratlight", sans-serif; font-size: 15px; width: 80%; display: block; cursor: pointer; text-align: left; } -/* line 114, ../sass/_sidebar.scss */ +/* line 128, ../sass/_sidebar.scss */ .aside-report span i { -webkit-transition: transform, 100ms ease-out; -o-transition: transform, 100ms ease-out; transition: transform, 100ms ease-out; font-size: 13px; position: relative; top: 2px; display: inline-block; margin-right: 10px; } -/* line 126, ../sass/_sidebar.scss */ +/* line 140, ../sass/_sidebar.scss */ .aside-report.is-expanded i { -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); } -/* line 131, ../sass/_sidebar.scss */ +/* line 145, ../sass/_sidebar.scss */ .aside-report ul { padding: 0; margin: 0 0 0 30px; background: #2c333b; display: none; } -/* line 137, ../sass/_sidebar.scss */ +/* line 151, ../sass/_sidebar.scss */ .aside-report ul li { width: 80%; display: block; font-size: 15px; font-family: "montserratlight", sans-serif; background: #2c333b; position: relative; line-height: normal; margin-bottom: 20px; margin-left: 15px; color: #77777c; } -/* line 149, ../sass/_sidebar.scss */ +/* line 163, ../sass/_sidebar.scss */ .aside-report ul li a { display: block; color: inherit; text-align: left; padding-left: 10px; } -/* line 157, ../sass/_sidebar.scss */ +/* line 171, ../sass/_sidebar.scss */ .aside-report ul li:before { position: absolute; left: -10px; font-size: 15px; left: -16px; } -/* line 164, ../sass/_sidebar.scss */ +/* line 178, ../sass/_sidebar.scss */ .aside-report ul li.failed, .aside-report ul li.failedcommented, .aside-report ul li.processing_error { color: #bb5a5a; } -/* line 171, ../sass/_sidebar.scss */ +/* line 185, ../sass/_sidebar.scss */ .aside-report ul li.passed { color: #6f9f00; } -/* line 176, ../sass/_sidebar.scss */ +/* line 190, ../sass/_sidebar.scss */ .aside-report ul li.warning { color: #f0ad4e; } -/* line 181, ../sass/_sidebar.scss */ +/* line 195, ../sass/_sidebar.scss */ .aside-report ul li.rebased { color: #0097fe; } -/* line 191, ../sass/_sidebar.scss */ +/* line 205, ../sass/_sidebar.scss */ .aside.has-filters-applied .aside-report:not(.is-hidden) { max-height: none; } -/* line 193, ../sass/_sidebar.scss */ +/* line 207, ../sass/_sidebar.scss */ .aside.has-filters-applied .aside-report:not(.is-hidden) ul { display: block; } -/* line 201, ../sass/_sidebar.scss */ +/* line 215, ../sass/_sidebar.scss */ .aside.show-failed .url-name, .aside.show-failed .test-name { display: none; } -/* line 205, ../sass/_sidebar.scss */ +/* line 219, ../sass/_sidebar.scss */ .aside.show-failed .url-name.failed, .aside.show-failed .test-name.failed { display: block; } -/* line 213, ../sass/_sidebar.scss */ +/* line 227, ../sass/_sidebar.scss */ .aside.show-commented .url-name, .aside.show-commented .test-name { display: none; } -/* line 216, ../sass/_sidebar.scss */ +/* line 230, ../sass/_sidebar.scss */ .aside.show-commented .url-name.commented, .aside.show-commented .test-name.commented { display: block; } -/* line 224, ../sass/_sidebar.scss */ +/* line 238, ../sass/_sidebar.scss */ .aside.show-passed .url-name, .aside.show-passed .test-name { display: none; } -/* line 226, ../sass/_sidebar.scss */ +/* line 240, ../sass/_sidebar.scss */ .aside.show-passed .url-name.passed, .aside.show-passed .test-name.passed { display: block; } -/* line 234, ../sass/_sidebar.scss */ +/* line 248, ../sass/_sidebar.scss */ .aside.show-warning .url-name, .aside.show-warning .test-name { display: none; } -/* line 237, ../sass/_sidebar.scss */ +/* line 251, ../sass/_sidebar.scss */ .aside.show-warning .url-name.warning, .aside.show-warning .test-name.warning { display: block; } -/* line 244, ../sass/_sidebar.scss */ +/* line 258, ../sass/_sidebar.scss */ .aside-report-summary { display: table; width: 100%; border-bottom: solid 1px #313942; text-transform: uppercase; padding: 0 15px; line-height: 40px; } -/* line 252, ../sass/_sidebar.scss */ +/* line 266, ../sass/_sidebar.scss */ .aside-report-summary header { float: left; color: #ffffff; font-size: 16px; text-transform: uppercase; } -/* line 259, ../sass/_sidebar.scss */ +/* line 273, ../sass/_sidebar.scss */ .aside-report-summary .stats { font-size: 14px; color: #ffffff; } -/* line 263, ../sass/_sidebar.scss */ +/* line 277, ../sass/_sidebar.scss */ .aside-report-summary .stats.has-errors { color: #f0ad4e; } -/* line 267, ../sass/_sidebar.scss */ +/* line 281, ../sass/_sidebar.scss */ .aside-report-summary .stats.is-filtered { color: #ffffff; } -/* line 273, ../sass/_sidebar.scss */ +/* line 287, ../sass/_sidebar.scss */ .report-item-stats { color: #85898e; position: absolute; right: 21px; top: 6px; background: #3c4550; font-family: "montserratbold", sans-serif; font-size: 14px; line-height: 32px; padding: 0 7px; } -/* line 285, ../sass/_sidebar.scss */ +/* line 299, ../sass/_sidebar.scss */ .js-rebase-all, .js-cancel-all { position: fixed; bottom: 0; width: 350px; border-top: solid 1px #313942; padding: 16px; background: #2c333b; z-index: 1; } -/* line 295, ../sass/_sidebar.scss */ +/* line 309, ../sass/_sidebar.scss */ .js-rebase-all { bottom: 60px; } -/* line 299, ../sass/_sidebar.scss */ +/* line 313, ../sass/_sidebar.scss */ .is-active { color: #ffffff !important; } -/* line 302, ../sass/_sidebar.scss */ +/* line 316, ../sass/_sidebar.scss */ .is-active a, .is-active:before { color: #ffffff !important; } /* AET Copyright (C) 2013 Cognifide Limited Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ @@ -4380,7 +4382,7 @@ a:hover, a:focus, a:active { text-decoration: none; } body { color: #333333; font-family: "montserratregular", sans-serif; } /* line 68, ../sass/main.scss */ -.main { -webkit-transition: left 0.3s, width 0.3s; -o-transition: left 0.3s, width 0.3s; transition: left 0.3s, width 0.3s; position: relative; width: 100%; left: 0; } +.main { -webkit-transition: left 0.1s, width 0.1s; -o-transition: left 0.1s, width 0.1s; transition: left 0.1s, width 0.1s; position: relative; width: 100%; left: 0; } /* line 74, ../sass/main.scss */ .menu-expanded .main { left: 350px; width: calc(100% - 350px); } diff --git a/report/src/main/webapp/assets/sass/_sidebar.scss b/report/src/main/webapp/assets/sass/_sidebar.scss index 6ede02979..bc98addb2 100644 --- a/report/src/main/webapp/assets/sass/_sidebar.scss +++ b/report/src/main/webapp/assets/sass/_sidebar.scss @@ -16,12 +16,13 @@ * limitations under the License. */ .aside { - @include transition(left 0.3s, width 0.3s); + @include transition(left 0.1s, width 0.1s); background: $aside_background; position: fixed; top: 0; left: -350px; width: 350px; + padding: 0 1.5rem; height: 100%; overflow: hidden; text-align: center; @@ -31,6 +32,19 @@ left: 0; } + &-resizer { + @include transition(left 0.1s, width 0.1s); + display: block; + height: 100%; + width: 1.5rem; + position: absolute; + top: 0; + right: 0; + z-index: 100; + cursor: col-resize; + background-color: $aside_background; + } + .logo-holder { width: 100%; padding-top: 10px; @@ -303,4 +317,4 @@ &:before { color: $white !important; } -} +} \ No newline at end of file diff --git a/report/src/main/webapp/assets/sass/main.scss b/report/src/main/webapp/assets/sass/main.scss index 8c090da0f..3e0fd405e 100644 --- a/report/src/main/webapp/assets/sass/main.scss +++ b/report/src/main/webapp/assets/sass/main.scss @@ -66,7 +66,7 @@ body { } .main { - @include transition(left 0.3s, width 0.3s); + @include transition(left 0.1s, width 0.1s); position: relative; width: 100%; left: 0; diff --git a/report/src/main/webapp/report.html b/report/src/main/webapp/report.html index 353e2294b..b3ef88f6c 100644 --- a/report/src/main/webapp/report.html +++ b/report/src/main/webapp/report.html @@ -27,7 +27,7 @@ - +

Saving data...

Failed to