Feature/winter edition (#238)

* Work in progress * Work in progress part 2 - refactoring names, adding snowfall lib * changes in styling - fixing issue with accept suite button being too high * Simplifying markup for status icons * Changed Christmas date - left wrong one after debugging * Updated changelog file * Moved winterEdition to new themes folder * Changed data-checking function name * Added jquery snowfall asset - no licence header yet * Added info about jQuery Snowfall licence
wttech · Apr 18, 2018 · cc933bc · cc933bc
1 parent 48445b3
commit cc933bc
Show file tree

Hide file tree

Showing 16 changed files with 114 additions and 53 deletions.
diff --git 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-239](https://github.com/Cognifide/aet/pull/239) Switch off default require.js timeouts.
+- [PR-238](https://github.com/Cognifide/aet/pull/238) AET Winter Edition introduced
 - [PR-233](https://github.com/Cognifide/aet/pull/233) Font Awesome introduced to AET
 - [PR-228](https://github.com/Cognifide/aet/pull/228) Remove 'jump to' button from whole suite view.
 - [PR-230](https://github.com/Cognifide/aet/pull/230) Bug Fixed: Side panel items not accessible when 'Save/Discard Changes' buttons are visible.

diff --git a/report/NOTICE b/report/NOTICE
@@ -31,3 +31,4 @@ This project includes:
 
   Jasmine under MIT, version 2.4.1 from https://github.com/jasmine/jasmine/releases
   Font Awesome under CC BY 4.0, version 5.0.6 from https://fontawesome.com/
+  jQuery Snowfall under Apache, version 1.7.1 from https://github.com/loktar00/JQuery-Snowfall
diff --git a/report/pom.xml b/report/pom.xml
@@ -73,6 +73,7 @@
                 <exclude>src/main/webapp/.jshintrc</exclude>
 
                 <exclude>src/main/webapp/assets/libs/**</exclude>
+                <exclude>src/main/webapp/assets/js/**</exclude>
                 <exclude>src/test/jasmine/lib/**</exclude>
 
                 <exclude>src/main/webapp/node_modules/**</exclude>

diff --git a/report/src/main/webapp/app/app.config.js b/report/src/main/webapp/app/app.config.js
@@ -26,6 +26,7 @@ require.config({
     'angularAMD': '../assets/libs/angularAMD/angularAMD',
     'lodash': '../assets/libs/lodash/dist/lodash',
     'angular-bootstrap': '../assets/libs/angular-bootstrap/ui-bootstrap-tpls',
+    'snowfall': '../assets/js/snowfall/snowfall.min',
     // **************** AET custom ********************
     //components
     'testSearchFilter': 'components/testSearch.filter',
@@ -34,6 +35,7 @@ require.config({
     'urlStatusFilter': 'components/urlStatus.filter',
     'keyboardShortcutsDirective': 'components/keyboardShortcuts.directive',
     'hidePopoversDirective': 'components/hidePopovers.directive',
+    'winterEdition': 'themes/winterEdition.directive',
     //services
     'endpointConfiguration': 'services/endpointConfiguration.service',
     'artifactsService': 'services/artifacts.service',

diff --git a/report/src/main/webapp/app/app.module.js b/report/src/main/webapp/app/app.module.js
@@ -24,13 +24,15 @@ define(['angularAMD',
   'angular-ui-router',
   'jquery',
   'bootstrap',
+  'snowfall',
   // components
   'hidePopoversDirective',
   'keyboardShortcutsDirective',
   'testSearchFilter',
   'testStatusFilter',
   'urlSearchFilter',
   'urlStatusFilter',
+  'winterEdition',
   // services
   'endpointConfiguration',
   'artifactsService',
@@ -78,6 +80,17 @@ define(['angularAMD',
         userSettingsService,
         metadataLoaderService) {
 
+      $rootScope.theme = {
+        name: 'regular',
+        statusClasses: {
+          passed: 'fa-check',
+          failed: 'fa-times',
+          warning: 'fa-exclamation-triangle',
+          rebased: 'fa-cloud-upload-alt',
+          unrebased: 'fa-cloud-download-alt'
+        }
+      };
+
       $rootScope.metadataSaveInProgress = false;
       metadataLoaderService.setup();
 

diff --git a/report/src/main/webapp/app/layout/main/suite/mainView.suite.view.html b/report/src/main/webapp/app/layout/main/suite/mainView.suite.view.html
@@ -26,17 +26,11 @@
         <div class="inner">
           <div ng-class="test.getStatus()">
             <div class="test-count test-count-dashboard">
-              <div ng-if="test.getStatus() == 'failed'" class="failed">
-                <i class="fas fa-times"></i>
-              </div>
-              <div ng-if="test.getStatus() == 'passed'">
-                <i class="fas fa-check"></i>
-              </div>
-              <div ng-if="test.getStatus() == 'warning'">
-                <i class="fas fa-exclamation-triangle"></i>
+              <div ng-if="test.getStatus() != 'rebased'" class="failed">
+                <i class="fas {{theme.statusClasses[test.getStatus()]}}"></i>
               </div>
               <div ng-if="test.getStatus() == 'rebased'">
-                <i class="fas fa-cloud-upload-alt"></i>
+                <i class="fas {{theme.statusClasses[test.getStatus()]}}"></i>
               </div>
               <span>{{test.name}}</span>
             </div>

diff --git a/report/src/main/webapp/app/layout/main/test/mainView.test.view.html b/report/src/main/webapp/app/layout/main/test/mainView.test.view.html
@@ -27,17 +27,11 @@
           <div class="inner">
             <div ng-class="url.getStatus()">
               <div class="test-count test-count-dashboard">
-                <div ng-if="url.getStatus() == 'failed'">
-                  <i class="fas fa-times"></i>
-                </div>
-                <div ng-if="url.getStatus() == 'passed'">
-                  <i class="fas fa-check"></i>
-                </div>
-                <div ng-if="url.getStatus() == 'warning'">
-                  <i class="fas fa-exclamation-triangle"></i>
+                <div ng-if="url.getStatus() != 'rebased'">
+                  <i class="fas {{theme.statusClasses[url.getStatus()]}}"></i>
                 </div>
                 <div ng-if="url.getStatus() == 'rebased'">
-                  <i class="fas fa-cloud-upload-alt"></i>
+                  <i class="fas {{theme.statusClasses[url.getStatus()]}}"></i>
                 </div>
                 <div class="tile-stats">
                   <span class="statistics">Url cases statistics:</span>

diff --git a/report/src/main/webapp/app/layout/sidepanel/sidepanel.view.html b/report/src/main/webapp/app/layout/sidepanel/sidepanel.view.html
@@ -20,7 +20,7 @@
 <div class="aside" ui-view="aside">
   <div class="logo-holder">
     <a ui-sref="suite">
-      <img class="logo" src="assets/img/logo.png" alt="">
+      <img class="logo" ng-src="assets/img/logo_{{theme.name}}.png" alt="">
     </a>
   </div>
   <!--
@@ -135,17 +135,11 @@
         <li ng-repeat="url in test.urls | filter: {name: $root.searchText} | aetUrlStatusFilter:$root.activeFilters | orderBy:'name' as filteredUrls"
             ng-class="[url.getStatus()]" class="url-name">
           <div aet-truncate-urls class="text-left nowrap">
-              <div ng-if="url.getStatus() == 'failed'" class="fontawesome">
-                  <i class="fas fa-times"></i>
-              </div>
-              <div ng-if="url.getStatus() == 'passed'" class="fontawesome">
-                  <i class="fas fa-check"></i>
-              </div>
-              <div ng-if="url.getStatus() == 'warning'" class="fontawesome">
-                  <i class="fas fa-exclamation-triangle"></i>
+              <div ng-if="url.getStatus() != 'rebased'" class="fontawesome">
+                  <i class="fas {{theme.statusClasses[url.getStatus()]}}"></i>
               </div>
               <div ng-if="url.getStatus() == 'rebased'" class="fontawesome">
-                  <i class="fas fa-cloud-upload-alt"></i>
+                  <i class="fas {{theme.statusClasses[url.getStatus()]}}"></i>
               </div>
               <a class="test-url" ui-sref-active="is-active"
                ui-sref="url({'suite':$root.params.project,'test':test.name, 'url':url.name})">
@@ -164,13 +158,13 @@ <h4 class="no-results" ng-if="sidepanel.testsStats.total === 0">
   <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="fas fa-cloud-upload-alt"></i>
+            <i class="fas {{theme.statusClasses['rebased']}}"></i>
             Save all changes
         </span>
     </div>
     <div class="js-cancel-all" ng-click="sidepanel.discardAllChanges()">
         <span class="button button-darkred button-wide">
-            <i class="fas fa-cloud-download-alt"></i>
+            <i class="fas {{theme.statusClasses['unrebased']}}"></i>
             Discard all changes
         </span>
     </div>

diff --git a/report/src/main/webapp/app/layout/toolbar/toolbarBottom.view.html b/report/src/main/webapp/app/layout/toolbar/toolbarBottom.view.html
@@ -101,7 +101,7 @@ <h5 ng-if="toolbarBottom.viewMode == 'url'">
       <span class="button js-rebase-suite button-red"
             data-ng-if="toolbarBottom.showRevertButton()"
             data-ng-click="toolbarBottom.revertAcceptedPatterns()">
-                <i class="fas fa-cloud-download-alt"></i>
+                <i class="fas {{theme.statusClasses['unrebased']}}"></i>
                 Revert {{toolbarBottom.viewMode}}
             </span>
     </div>

diff --git a/report/src/main/webapp/app/themes/winterEdition.directive.js b/report/src/main/webapp/app/themes/winterEdition.directive.js
@@ -0,0 +1,61 @@
+/*
+ * 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('aetWinterEdition', WinterEdition);
+
+  function WinterEdition() {
+    return {
+      restrict: 'AE',
+      link: linkFunc
+    };
+
+    function linkFunc($scope) {
+      var WINTER_THEME = {
+        name: 'winter',
+        statusClasses: {
+          passed: 'fa-tree',
+          failed: 'fa-gift',
+          warning: 'fa-bell',
+          rebased: 'fa-snowflake',
+          unrebased: 'fa-eraser'
+        }
+      };
+      var TODAY = new Date();
+      var CHRISTMAS_DATE = new Date(TODAY.getFullYear(), 11, 25);
+      var DAY_MARGIN = 14;
+      var isChristmas = isDateWithinMargin(TODAY, CHRISTMAS_DATE, DAY_MARGIN);
+
+      if (isChristmas) {
+        _.merge($scope.theme, WINTER_THEME);
+        snowFall.snow(document.body, {flakeCount: 200, maxSpeed: 20});
+      }
+    }
+
+    function isDateWithinMargin(today, eventDate, dayMargin) {
+      var eventStartDate = new Date(eventDate);
+      var eventEndDate = new Date(eventDate);
+
+      eventStartDate.setDate(eventStartDate.getDate()-dayMargin);
+      eventEndDate.setDate(eventEndDate.getDate()+dayMargin);
+
+      return today >= eventStartDate && today <= eventEndDate;
+    }
+  }
+});
diff --git a/report/src/main/webapp/assets/css/main.css b/report/src/main/webapp/assets/css/main.css
@@ -3857,13 +3857,13 @@ table { border-collapse: collapse; border-spacing: 0; }
 /* line 143, ../sass/_typography.scss */
 .name { font-style: italic; }
 
-/* line 61, ../../../../../../../../../../../Library/Ruby/Gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_user-interface.scss */
+/* line 61, C:/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, ../../../../../../../../../../../Library/Ruby/Gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_user-interface.scss */
+/* line 64, C:/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, ../../../../../../../../../../../Library/Ruby/Gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_user-interface.scss */
+/* line 67, C:/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, ../../../../../../../../../../../Library/Ruby/Gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_user-interface.scss */
+/* line 56, C:/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. */
@@ -3878,7 +3878,7 @@ input[type=text]::-webkit-input-placeholder { color: #85898e; }
 /* line 43, ../sass/_toolbar.scss */
 .toolbar-toggle span { display: block; width: 20px; background: #77777c; height: 3px; margin-bottom: 3px; }
 /* line 52, ../sass/_toolbar.scss */
-.toolbar-link { -webkit-transition: width, 0.3s; -o-transition: width, 0.3s; transition: width, 0.3s; width: calc(100% - 200px); background: #ffffff; }
+.toolbar-link { -webkit-transition: width, 0.3s; -o-transition: width, 0.3s; transition: width, 0.3s; width: calc(100% - 400px); background: #ffffff; }
 /* line 57, ../sass/_toolbar.scss */
 .toolbar-link > { float: right; }
 /* line 62, ../sass/_toolbar.scss */
@@ -3922,35 +3922,35 @@ input[type=text]::-webkit-input-placeholder { color: #85898e; }
 /* line 173, ../sass/_toolbar.scss */
 .toolbar-nav div svg { margin: 7px 2px; display: block; color: #85898e; }
 /* line 180, ../sass/_toolbar.scss */
-.toolbar-btns { border-left: solid 1px #ededed; padding-left: 30px; padding-top: 15px; height: 73px; display: flex; }
+.toolbar-btns { border-left: solid 1px #ededed; padding-left: 20px; padding-top: 15px; height: 73px; display: flex; }
 /* line 187, ../sass/_toolbar.scss */
-.toolbar-btns .button { float: left; margin-left: 12px; }
+.toolbar-btns .button { float: left; margin-left: 15px; }
 /* line 192, ../sass/_toolbar.scss */
 .tab-content-toolbar .toolbar-btns { padding-top: 3px; padding-right: 15px; height: 47px; }
 
 /* line 200, ../sass/_toolbar.scss */
-.comments-status { width: 45px; font-family: "montserratlight", sans-serif; font-size: 30px; display: block; line-height: 44px; cursor: pointer; }
-/* line 208, ../sass/_toolbar.scss */
+.comments-status { font-family: "montserratlight", sans-serif; font-size: 30px; display: block; line-height: 44px; cursor: pointer; }
+/* line 207, ../sass/_toolbar.scss */
 .comments-status.small { line-height: 37px; font-size: 11px; }
-/* line 213, ../sass/_toolbar.scss */
+/* line 212, ../sass/_toolbar.scss */
 .comments-status.present { color: #6f9f00; }
-/* line 217, ../sass/_toolbar.scss */
+/* line 216, ../sass/_toolbar.scss */
 .comments-status.absent { color: #3c4550; }
 
-@media (max-width: 1300px) { /* line 222, ../sass/_toolbar.scss */
+@media (max-width: 1300px) { /* line 221, ../sass/_toolbar.scss */
   .tab-content-toolbar { height: 94px; } }
-/* line 228, ../sass/_toolbar.scss */
+/* line 227, ../sass/_toolbar.scss */
 .tab-content-toolbar .toolbar-btns, .tab-content-toolbar .comments-status { width: auto; }
-/* line 232, ../sass/_toolbar.scss */
+/* line 231, ../sass/_toolbar.scss */
 .tab-content-toolbar .toolbar-blocks { display: inline; }
 
-/* line 237, ../sass/_toolbar.scss */
+/* line 236, ../sass/_toolbar.scss */
 .important-message { background: #fff085; }
 
-/* line 241, ../sass/_toolbar.scss */
+/* line 240, ../sass/_toolbar.scss */
 .button-dark.js-trigger-modal { display: inline-block; }
 
-/* line 245, ../sass/_toolbar.scss */
+/* line 244, ../sass/_toolbar.scss */
 .preformatted { font-family: monospace; }
 
 /* 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. */

diff --git a/report/src/main/webapp/assets/img/logo.png → ...c/main/webapp/assets/img/logo_regular.png b/report/src/main/webapp/assets/img/logo.png → ...c/main/webapp/assets/img/logo_regular.png
diff --git a/report/src/main/webapp/assets/img/logo_winter.png b/report/src/main/webapp/assets/img/logo_winter.png
diff --git a/report/src/main/webapp/assets/js/snowfall/snowfall.min.js b/report/src/main/webapp/assets/js/snowfall/snowfall.min.js
diff --git a/report/src/main/webapp/assets/sass/_toolbar.scss b/report/src/main/webapp/assets/sass/_toolbar.scss
@@ -51,7 +51,7 @@
 
   &-link {
     @include transition(width, 0.3s);
-    width: calc(100% - 200px);
+    width: calc(100% - 400px);
     background: $white;
 
     > {
@@ -179,14 +179,14 @@
   }
   &-btns {
     border-left: solid 1px $border-color;
-    padding-left: 30px;
+    padding-left: 20px;
     padding-top: 15px;
     height: 73px;
     display: flex;
 
     .button {
       float: left;
-      margin-left: 12px;
+      margin-left: 15px;
     }
 
     .tab-content-toolbar & {
@@ -198,7 +198,6 @@
 }
 
 .comments-status {
-  width: 45px;
   font-family: $font_light;
   font-size: 30px;
   display: block;

diff --git a/report/src/main/webapp/report.html b/report/src/main/webapp/report.html
@@ -28,7 +28,7 @@
   <script defer src="assets/icons/fontawesome-all.js"></script>
 </head>
 
-<body aet-hide-popovers aet-keyboard-shortcuts aet-sidepanel ng-class="{ 'menu-expanded': sidebarExpanded }">
+<body aet-hide-popovers aet-keyboard-shortcuts aet-sidepanel aet-winter-edition ng-class="{ 'menu-expanded': sidebarExpanded }">
 
 <div class="screen-cover js-loader-app" ng-if="metadataSaveInProgress"><h1>Saving data...</h1></div>
 <div class="screen-cover data-loading-error" ng-if="metadataLoadingStatus == 'FAILED'"><h1>Failed to