Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Save/Discard changes buttons cover bottom part of sidepanel Fix #230

Merged
merged 8 commits into from
Feb 28, 2018
Merged

Save/Discard changes buttons cover bottom part of sidepanel Fix #230

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3417a60
Add styles for proper sidebar dimensions calculation when save/discar…
Feb 26, 2018
0af3cc1
Add possibility to scroll side panel to currently opened test/url
Feb 26, 2018
071e45b
Add possibility to scroll side panel to currently opened test/url
Feb 26, 2018
458ccf0
Rename class selectors after CR
Feb 26, 2018
bd6da8d
Merge master
Feb 27, 2018
4f3a113
Merge branch 'master' into save-discard-changes-buttons
Feb 28, 2018
8b193ea
Reposition resizer. Add updated css file
Feb 28, 2018
1225622
Merge remote-tracking branch 'origin/save-discard-changes-buttons' in…
Feb 28, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ All notable changes to AET will be documented in this file.
## Unreleased
**List of changes that are finished but not yet released in any final version.**

- [PR-230](https://github.com/Cognifide/aet/pull/230) Bug Fixed: Side panel items not accessible when 'Save/Discard Changes' buttons are visible.
- [PR-229](https://github.com/Cognifide/aet/pull/229) Improved notes (new icons, buttons order)
- [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
Expand Down
16 changes: 9 additions & 7 deletions report/src/main/webapp/app/layout/sidepanel/sidepanel.view.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,8 @@
<!--
Tests/ reports listing
-->
<div class="aside-resizer"></div>

<div class="aside-report-summary">
<header>
Tests:
Expand Down Expand Up @@ -128,21 +130,21 @@
<h4 class="no-results" ng-if="sidepanel.testsStats.total === 0">
No results found
</h4>
<div class="js-rebase-all" ng-if="sidepanel.thereAreChangesToSave()"
ng-click="sidepanel.saveAllChanges()">

<div class="aside-actions-wrapper" ng-if="sidepanel.thereAreChangesToSave()">
<div class="js-rebase-all" ng-click="sidepanel.saveAllChanges()">
<span class="button button-blue button-wide">
<i class="glyphicon glyphicon-cloud-upload"></i>
Save all changes
</span>
</div>

<div class="js-cancel-all" ng-if="sidepanel.thereAreChangesToSave()"
ng-click="sidepanel.discardAllChanges()">
</div>
<div class="js-cancel-all" ng-click="sidepanel.discardAllChanges()">
<span class="button button-darkred button-wide">
<i class="glyphicon glyphicon-cloud-download"></i>
Discard all changes
</span>
</div>

</div>

<div class="aside-resizer"></div>
</div>
97 changes: 50 additions & 47 deletions report/src/main/webapp/assets/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3860,13 +3860,13 @@ table { border-collapse: collapse; border-spacing: 0; }
/* line 155, ../sass/_typography.scss */
.name { font-style: italic; }

/* line 61, ../../../../../../../../../../soft/programming/compilers-interpreters/Ruby233/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_user-interface.scss */
/* line 61, ../../../../../../../../../../../Ruby24-x64/lib/ruby/gems/2.4.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_user-interface.scss */
input[type=text]:-moz-placeholder { color: #85898e; }
/* line 64, ../../../../../../../../../../soft/programming/compilers-interpreters/Ruby233/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_user-interface.scss */
/* line 64, ../../../../../../../../../../../Ruby24-x64/lib/ruby/gems/2.4.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_user-interface.scss */
input[type=text]::-moz-placeholder { color: #85898e; }
/* line 67, ../../../../../../../../../../soft/programming/compilers-interpreters/Ruby233/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_user-interface.scss */
/* line 67, ../../../../../../../../../../../Ruby24-x64/lib/ruby/gems/2.4.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_user-interface.scss */
input[type=text]:-ms-input-placeholder { color: #85898e; }
/* line 56, ../../../../../../../../../../soft/programming/compilers-interpreters/Ruby233/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_user-interface.scss */
/* line 56, ../../../../../../../../../../../Ruby24-x64/lib/ruby/gems/2.4.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_user-interface.scss */
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. */
Expand Down Expand Up @@ -3971,88 +3971,91 @@ input[type=text]::-webkit-input-placeholder { color: #85898e; }
.aside-report.is-expanded ul { display: block; overflow: hidden; }
/* line 74, ../sass/_sidebar.scss */
.aside-report-container { height: calc(100vh - 240px); overflow: auto; }
/* line 79, ../sass/_sidebar.scss */
/* line 78, ../sass/_sidebar.scss */
.aside-report-container:not(:last-child) { height: calc(100vh - 240px - 124px); }
/* line 83, ../sass/_sidebar.scss */
.aside-report .test-name { color: #85898e; display: block; width: 100%; padding-left: 13px; border-top: solid 1px #313942; }
/* line 86, ../sass/_sidebar.scss */
.aside-report .test-name.passed { color: #6f9f00; }
/* line 90, ../sass/_sidebar.scss */
.aside-report .test-name.warning { color: #f0ad4e; }
.aside-report .test-name.passed { color: #6f9f00; }
/* line 94, ../sass/_sidebar.scss */
.aside-report .test-name.warning { color: #f0ad4e; }
/* line 98, ../sass/_sidebar.scss */
.aside-report .test-name.failed, .aside-report .test-name.processing_error { color: #bb5a5a; }
/* line 99, ../sass/_sidebar.scss */
/* line 103, ../sass/_sidebar.scss */
.aside-report .test-name.rebased { color: #0097fe; }
/* line 104, ../sass/_sidebar.scss */
/* line 108, ../sass/_sidebar.scss */
.aside-report .test-name.is-hidden + .urls-list { display: none; }
/* line 109, ../sass/_sidebar.scss */
/* line 113, ../sass/_sidebar.scss */
.aside-report .test-name.is-active { color: #ffffff; }
/* line 112, ../sass/_sidebar.scss */
/* line 116, ../sass/_sidebar.scss */
.aside-report .test-name.is-active:before { color: inherit; }
/* line 118, ../sass/_sidebar.scss */
/* line 122, ../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 128, ../sass/_sidebar.scss */
/* line 132, ../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 140, ../sass/_sidebar.scss */
/* line 144, ../sass/_sidebar.scss */
.aside-report.is-expanded i { -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); }
/* line 145, ../sass/_sidebar.scss */
/* line 149, ../sass/_sidebar.scss */
.aside-report ul { padding: 0; margin: 0 0 0 30px; background: #2c333b; display: none; }
/* line 151, ../sass/_sidebar.scss */
/* line 155, ../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 163, ../sass/_sidebar.scss */
/* line 167, ../sass/_sidebar.scss */
.aside-report ul li a { display: block; color: inherit; text-align: left; padding-left: 10px; }
/* line 171, ../sass/_sidebar.scss */
.aside-report ul li:before { position: absolute; left: -10px; font-size: 15px; left: -16px; }
/* line 178, ../sass/_sidebar.scss */
/* line 175, ../sass/_sidebar.scss */
.aside-report ul li:before { position: absolute; font-size: 15px; left: -16px; }
/* line 181, ../sass/_sidebar.scss */
.aside-report ul li.failed, .aside-report ul li.failedcommented, .aside-report ul li.processing_error { color: #bb5a5a; }
/* line 185, ../sass/_sidebar.scss */
/* line 188, ../sass/_sidebar.scss */
.aside-report ul li.passed { color: #6f9f00; }
/* line 190, ../sass/_sidebar.scss */
/* line 193, ../sass/_sidebar.scss */
.aside-report ul li.warning { color: #f0ad4e; }
/* line 195, ../sass/_sidebar.scss */
/* line 198, ../sass/_sidebar.scss */
.aside-report ul li.rebased { color: #0097fe; }
/* line 205, ../sass/_sidebar.scss */
/* line 208, ../sass/_sidebar.scss */
.aside.has-filters-applied .aside-report:not(.is-hidden) { max-height: none; }
/* line 207, ../sass/_sidebar.scss */
/* line 210, ../sass/_sidebar.scss */
.aside.has-filters-applied .aside-report:not(.is-hidden) ul { display: block; }
/* line 215, ../sass/_sidebar.scss */
/* line 218, ../sass/_sidebar.scss */
.aside.show-failed .url-name, .aside.show-failed .test-name { display: none; }
/* line 219, ../sass/_sidebar.scss */
/* line 222, ../sass/_sidebar.scss */
.aside.show-failed .url-name.failed, .aside.show-failed .test-name.failed { display: block; }
/* line 227, ../sass/_sidebar.scss */
.aside.show-commented .url-name, .aside.show-commented .test-name { display: none; }
/* line 230, ../sass/_sidebar.scss */
.aside.show-commented .url-name, .aside.show-commented .test-name { display: none; }
/* line 233, ../sass/_sidebar.scss */
.aside.show-commented .url-name.commented, .aside.show-commented .test-name.commented { display: block; }
/* line 238, ../sass/_sidebar.scss */
/* line 241, ../sass/_sidebar.scss */
.aside.show-passed .url-name, .aside.show-passed .test-name { display: none; }
/* line 240, ../sass/_sidebar.scss */
/* line 243, ../sass/_sidebar.scss */
.aside.show-passed .url-name.passed, .aside.show-passed .test-name.passed { display: block; }
/* line 248, ../sass/_sidebar.scss */
.aside.show-warning .url-name, .aside.show-warning .test-name { display: none; }
/* line 251, ../sass/_sidebar.scss */
.aside.show-warning .url-name, .aside.show-warning .test-name { display: none; }
/* line 254, ../sass/_sidebar.scss */
.aside.show-warning .url-name.warning, .aside.show-warning .test-name.warning { display: block; }

/* line 258, ../sass/_sidebar.scss */
/* line 261, ../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 266, ../sass/_sidebar.scss */
/* line 269, ../sass/_sidebar.scss */
.aside-report-summary header { float: left; color: #ffffff; font-size: 16px; text-transform: uppercase; }
/* line 273, ../sass/_sidebar.scss */
/* line 276, ../sass/_sidebar.scss */
.aside-report-summary .stats { font-size: 14px; color: #ffffff; }
/* line 277, ../sass/_sidebar.scss */
/* line 280, ../sass/_sidebar.scss */
.aside-report-summary .stats.has-errors { color: #f0ad4e; }
/* line 281, ../sass/_sidebar.scss */
/* line 284, ../sass/_sidebar.scss */
.aside-report-summary .stats.is-filtered { color: #ffffff; }

/* line 287, ../sass/_sidebar.scss */
/* line 290, ../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 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 309, ../sass/_sidebar.scss */
.js-rebase-all { bottom: 60px; }
/* line 302, ../sass/_sidebar.scss */
.aside-actions-wrapper { padding: 17px 0 16px; border-top: solid 1px #313942; }
/* line 306, ../sass/_sidebar.scss */
.aside-actions-wrapper .js-rebase-all, .aside-actions-wrapper .js-cancel-all { position: relative; width: 100%; background: #2c333b; z-index: 1; }
/* line 312, ../sass/_sidebar.scss */
.aside-actions-wrapper .js-rebase-all:not(:last-child), .aside-actions-wrapper .js-cancel-all:not(:last-child) { margin-bottom: 16px; }

/* line 313, ../sass/_sidebar.scss */
/* line 318, ../sass/_sidebar.scss */
.is-active { color: #ffffff !important; }
/* line 316, ../sass/_sidebar.scss */
/* line 321, ../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. */
Expand Down
29 changes: 17 additions & 12 deletions report/src/main/webapp/assets/sass/_sidebar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,8 +72,12 @@
}

&-container {
height: calc(100vh - 240px);
height: calc(100vh - #{$side_bar_header_height});
overflow: auto;

&:not(:last-child) {
height: calc(100vh - #{$side_bar_header_height} - #{$side_bar_manage_changes_wrapper_height});
}
}

.test-name {
Expand Down Expand Up @@ -170,7 +174,6 @@

&:before {
position: absolute;
left: -10px;
font-size: 15px;
left: -16px;
}
Expand Down Expand Up @@ -296,18 +299,20 @@
padding: 0 7px;
}

.js-rebase-all, .js-cancel-all {
position: fixed;
bottom: 0;
width: $width_for_fixed_element_in_sidebar;
.aside-actions-wrapper {
padding: 17px 0 16px;
border-top: solid 1px $border-color_dark;
padding: 16px;
background: $aside_background;
z-index: 1;
}

.js-rebase-all {
bottom: 60px;
.js-rebase-all, .js-cancel-all {
position: relative;
width: 100%;
background: $aside_background;
z-index: 1;

&:not(:last-child) {
margin-bottom: 16px;
}
}
}

.is-active {
Expand Down
6 changes: 4 additions & 2 deletions report/src/main/webapp/assets/sass/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,10 @@ $font_regular: 'montserratregular', sans-serif;
$font_light: 'montserratlight', sans-serif;
$font_bold: 'montserratbold', sans-serif;

//Dimensions
$side_bar_header_height: 240px;
$side_bar_manage_changes_wrapper_height: 124px;

/** NEW STYLES AFTER REFACTOR **/
$warning: #f0ad4e;
$rebased: #0097fe;
Expand All @@ -61,5 +65,3 @@ $warning_bg: #fff085;
$rebased_bg: #00c1ff;
$failed_bg: #ddacac;
$passed_bg: #caeb7f;

$width_for_fixed_element_in_sidebar: 350px;