feat(rxFeedback): Build out rxFeedback component

CHANGELOG.md

@@ -1,3 +1,13 @@
+<a name="0.10.6"></a>
+### 0.10.6 (2014-05-30)
+
+
+#### Bug Fixes
+
+* **rxAccountSearch:** Made account search work while in other apps ([d938a675](git@github.com:rackerlabs/encore-ui/commit/d938a6751e5a6a0410165f7d250b0e82ba2a30b3))
+* **ticketing:** Fixing URLs/Routes for new Ticketing Server ([f73887df](git@github.com:rackerlabs/encore-ui/commit/f73887df5246a9ee68209d28cdf532de5fb48239))
+
+
 <a name="0.10.5"></a>
 ### 0.10.5 (2014-05-23)
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "encore-ui",
-  "version": "0.10.5",
+  "version": "0.10.6",
   "main": ["./encore-ui-tpls.js"],
   "dependencies": {
     "angular": "~1.2.9",
@@ -9,7 +9,8 @@
     "angular-route": "~1.2.9",
     "angular-bootstrap": "~0.10.0",
     "lodash": "~2.4.1",
-    "momentjs": "~2.5.0"
+    "momentjs": "~2.5.0",
+    "html2canvas": "~0.4.1"
   },
   "devDependencies": {
     "angular-mocks": "~1.2.9"

demo/index.html

@@ -24,6 +24,7 @@
     <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
     <script src="bower_components/lodash/dist/lodash.compat.js"></script>
     <script src="bower_components/momentjs/moment.js"></script>
+    <script src="bower_components/html2canvas/build/html2canvas.js"></script>
     <!-- endbower -->
 
     <script src="dist/<%= config.fileNameTpl %>.js"></script>

grunt-tasks/options/karma.js

@@ -8,6 +8,7 @@ var files = [
     'demo/bower_components/angular-bootstrap/ui-bootstrap-tpls.js',
     'demo/bower_components/lodash/dist/lodash.compat.js',
     'demo/bower_components/momentjs/moment.js',
+    'demo/bower_components/html2canvas/build/html2canvas.js',
     'demo/bower_components/angular-mocks/angular-mocks.js',
     // endbower
     'utils/browser-helpers.js'

package.json

@@ -1,7 +1,7 @@
 {
   "author": "",
   "name": "EncoreUI",
-  "version": "0.10.5",
+  "version": "0.10.6",
   "homepage": "https://github.com/rackerlabs/encore-ui",
   "license": "Apache License, Version 2.0",
   "repository": {

src/configs/configs.js

@@ -13,4 +13,5 @@ angular.module('encore.ui.configs', [])
     { value: '/dev/xvdn', label: '/dev/xvdn' },
     { value: '/dev/xvdo', label: '/dev/xvdo' },
     { value: '/dev/xvdp', label: '/dev/xvdp' }
-]);
+])
+.constant('feedbackApi', '/api/feedback');

src/rxApp/docs/rxApp.html

@@ -8,7 +8,7 @@ <h3>Standard rxApp</h3>
     </rx-app>
 
     <h3>Customized rxApp (collapsible)</h3>
-    <rx-app collapsible-nav="true" site-title="My App" id="custom-rxApp" menu="customMenu" new-instance="true">
+    <rx-app collapsible-nav="true" site-title="My App" id="custom-rxApp" menu="customMenu" new-instance="true" hide-feedback="true">
         <rx-page title="'Customized Page Title'" subtitle="subtitle">
             <p class="clear">Click a link in the menu to see the active state change</p>
             <p>Click the toggle to hide the menu</p>

src/rxApp/rxApp.js

@@ -100,7 +100,6 @@ angular.module('encore.ui.rxApp', ['encore.ui.rxEnvironment', 'ngSanitize', 'ngR
         href: 'ticketing',
         linkText: 'Ticketing',
         key: 'ticketing',
-        visibility: '"!unified" | rxEnvironmentMatch',
         children: [
             {
                 href: 'ticketing/list',
@@ -318,11 +317,15 @@ angular.module('encore.ui.rxApp', ['encore.ui.rxEnvironment', 'ngSanitize', 'ngR
             menu: '=?',
             collapsibleNav: '@',
             collapsedNav: '=?',
-            newInstance: '@?'
+            newInstance: '@?',
+            hideFeedback: '@?'
         },
         link: function (scope) {
             scope.appRoutes = scope.newInstance ? rxAppRoutes.createInstance() : rxAppRoutes;
 
+            // default hideFeedback to false
+            scope.hideFeedback = scope.hideFeedback ? true : false;
+
             // we only want to set new menu data if a new instance of rxAppRoutes was created
             // or if scope.menu was defined
             if (scope.newInstance || scope.menu) {

src/rxApp/rxApp.less

@@ -7,6 +7,7 @@
  */
 .rx-app {
     @navTransitionDuration: .2s;
+    @appMenuWidth: 300px;
 
     min-height: 100%;
     .flexbox-display();
@@ -18,13 +19,14 @@
     }
 
     .rx-app-menu {
-        .flexbox(0 0 300px);
+        .flexbox(0 0 @appMenuWidth);
         color: #fff;
         font-size: 15px;
         font-weight: 200;
         background: @appMenuBg;
         line-height: @appLineHeight;
         padding-bottom: 10em;
+        position: relative;
     }
 
     .site-branding {
@@ -116,7 +118,8 @@
 
         .site-title,
         .site-options,
-        .rx-app-nav {
+        .rx-app-nav,
+        .rx-app-help {
             display: none;
         }
     }
@@ -360,6 +363,30 @@
         }
     }
 
+    .rx-app-help {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: @appMenuWidth;
+        background: @appHelpBg;
+        border-top: 1px solid @appHelpBorder;
+        line-height: 3em;
+        padding-bottom: 1px;
+        font-size: .8em;
+        text-shadow: 1px 1px 0px rgba(26, 26, 26, 0.2);
+
+        .rx-feedback .modal-link {
+            background: url(images/icon-feedback.png) no-repeat 20px calc(~"50% + 1px");
+            vertical-align: middle;
+            color: @orangeText;
+            padding: 0 21px 0 41px;
+            float: right;
+        }
+    }
+
+
+    // Page Styles
+
     .page-header {
         background: linear-gradient(to bottom, #e7e7e7 0%, #d6d6d6 100%);
         border-bottom: 1px solid #bbb;

src/rxApp/rxApp.spec.js

@@ -245,11 +245,13 @@ describe('rxAppRoutes', function () {
 });
 
 describe('rxApp', function () {
-    var scope, compile, rootScope, el, elCustom, elCollapsible, elCollapsibleVar, defaultNav, appRoutes;
+    var scope, scopeCustomNav, collapsibleScope, compile, rootScope, el, elCustom, elCollapsible,
+        elCollapsibleVar, defaultNav, appRoutes;
     var standardTemplate = '<rx-app></rx-app>';
     var collapsibleTemplate = '<rx-app collapsible-nav="true"></rx-app>';
     var collapsibleExternalVarTemplate = '<rx-app collapsible-nav="true" collapsed-nav="collapsed"></rx-app>';
-    var customTemplate = '<rx-app site-title="My App" menu="customNav" new-instance="true"></rx-app>';
+    var customTemplate = '<rx-app site-title="My App" menu="customNav" new-instance="true"' +
+        'hide-feedback="true"></rx-app>';
 
     var customNav = [{
         title: 'Example Menu',
@@ -277,20 +279,23 @@ describe('rxApp', function () {
         // Inject in angular constructs
         inject(function ($rootScope, $compile, encoreNav, rxAppRoutes) {
             rootScope = $rootScope;
-            scope = $rootScope.$new();
             compile = $compile;
             defaultNav = encoreNav;
             appRoutes = rxAppRoutes;
-
-            scope.collapsed = false;
         });
 
-        scope.customNav = customNav;
+        scope = rootScope.$new();
+
+        collapsibleScope = rootScope.$new();
+        collapsibleScope.collapsed = false;
+
+        scopeCustomNav = rootScope.$new();
+        scopeCustomNav.customNav = customNav;
 
         el = helpers.createDirective(standardTemplate, compile, scope);
-        elCustom = helpers.createDirective(customTemplate, compile, scope);
-        elCollapsible = helpers.createDirective(collapsibleTemplate, compile, scope);
-        elCollapsibleVar = helpers.createDirective(collapsibleExternalVarTemplate, compile, scope);
+        elCustom = helpers.createDirective(customTemplate, compile, scopeCustomNav);
+        elCollapsible = helpers.createDirective(collapsibleTemplate, compile, collapsibleScope);
+        elCollapsibleVar = helpers.createDirective(collapsibleExternalVarTemplate, compile, rootScope.$new());
     });
 
     describe('default menu', function () {
@@ -310,6 +315,17 @@ describe('rxApp', function () {
             expect(navTitle.textContent).to.equal(defaultNav[0].title);
         });
 
+        it('should have a feedback link if not disabled', function () {
+            var feedbackLink = el[0].querySelector('rx-feedback');
+
+            // validate it matches 'Encore'
+            expect(feedbackLink).to.exist;
+
+            var notFeedbackLink = elCustom[0].querySelector('rx-feedback');
+
+            expect(notFeedbackLink).to.not.exist;
+        });
+
         it('should not show the collapsible toggle if collapsible is not true', function () {
             var collapsibleToggle = el[0].querySelector('.collapsible-toggle');
 
@@ -336,7 +352,7 @@ describe('rxApp', function () {
             elScope.collapsedNav = true;
 
             // We need to run the digest to update the classes
-            scope.$digest();
+            collapsibleScope.$digest();
             collapsibleMenu = elCollapsible[0].querySelector('.collapsed');
             expect(collapsibleMenu).to.be.not.null;
         });

src/rxApp/templates/rxApp.html

@@ -17,6 +17,9 @@ <h2 class="nav-section-title">{{ section.title }}</h2>
                 <rx-app-nav items="section.children" level="1"></rx-app-nav>
             </div>
         </nav>
+        <div class="rx-app-help clearfix">
+            <rx-feedback ng-if="!hideFeedback"></rx-feedback>
+        </div>
     </nav>
     <div class="rx-app-content" ng-transclude></div>
 </div>

src/rxDiskSize/docs/rxDiskSize.html

@@ -5,4 +5,9 @@
         <li>{{sizeTB}} &rarr; {{sizeTB | rxDiskSize}}</li>
         <li>{{sizePB}} &rarr; {{sizePB | rxDiskSize}}</li>
     </ul>
+    <ul>
+        <li>{{sizeGB}} GB &rarr; {{sizeGB | rxDiskSize:'GB'}}</li>
+        <li>{{sizeTB}} TB &rarr; {{sizeTB | rxDiskSize:'TB'}}</li>
+        <li>{{sizePB}} PB &rarr; {{sizePB | rxDiskSize:'PB'}}</li>
+    </ul>
 </div>

src/rxDiskSize/rxDiskSize.js

@@ -1,9 +1,13 @@
 angular.module('encore.ui.rxDiskSize', [])
 .filter('rxDiskSize', function () {
-    return function (size) {
+    return function (size, unit) {
         var units = ['GB', 'TB', 'PB'];
-        var unit = Math.floor(Math.log(size) / Math.log(1000));
+        var index = _.indexOf(units, unit);
 
-        return size / Math.pow(1000, Math.floor(unit)).toFixed(1) + ' ' + units[unit];
+        if (index === -1) {
+            index = Math.floor(Math.log(size) / Math.log(1000));
+        }
+
+        return size / Math.pow(1000, Math.floor(index)).toFixed(1) + ' ' + units[index];
     };
 });

src/rxDiskSize/rxDiskSize.spec.js

@@ -15,18 +15,37 @@ describe('rxDiskSize', function () {
         expect(!!disksize).to.be.true;
     });
 
-    it('should convert convert 100 to 100 GB', function () {
+    it('should convert 100 to 100 GB', function () {
         var size = 100;
         expect(disksize(size)).to.equal('100 GB');
     });
 
-    it('should convert convert 1000 to 1 TB', function () {
+    it('should convert 1000 to 1 TB', function () {
         var size = 1000;
         expect(disksize(size)).to.equal('1 TB');
     });
 
-    it('should convert convert 1000000 to 1 PB', function () {
+    it('should convert 1000000 to 1 PB', function () {
         var size = 1000000;
         expect(disksize(size)).to.equal('1 PB');
     });
-});
+
+    it('should convert 500 with a GB unit specified to 500 GB', function () {
+        var size = 500;
+        var unit = 'GB';
+        expect(disksize(size, unit)).to.equal('500 GB');
+    });
+
+    it('should convert 5000 with a TB unit specified to 5 TB', function () {
+        var size = 5000;
+        var unit = 'TB';
+        expect(disksize(size, unit)).to.equal('5 TB');
+    });
+
+    it('should convert 5000000 with a PB unit specified to 5 PB', function () {
+        var size = 5000000;
+        var unit = 'PB';
+        expect(disksize(size, unit)).to.equal('5 PB');
+    });
+
+});

src/rxFeedback/README.md

@@ -0,0 +1,3 @@
+[![experimental](http://badges.github.io/stability-badges/dist/experimental.svg)](http://github.com/badges/stability-badges)
+
+Component built to gather and send user feedback

src/rxFeedback/docs/rxFeedback.html

@@ -0,0 +1,4 @@
+<!-- Sample HTML goes here as a live example of how to the component can be used -->
+<div ng-controller="rxFeedbackCtrl">
+    <rx-feedback id="rxFeedback"></rx-feedback>
+</div>

src/rxFeedback/docs/rxFeedback.js

@@ -0,0 +1,4 @@
+/*jshint unused:false*/
+function rxFeedbackCtrl ($scope) {
+
+}

src/rxFeedback/docs/rxFeedback.midway.js

@@ -0,0 +1,17 @@
+var demoPage = require('../../../utils/demo.page.js');
+var rxFeedbackPage = require('../rxFeedback.page.js').rxFeedback;
+var expect = require('chai').use(require('chai-as-promised')).expect;
+
+// Add midway tests to run
+describe('rxFeedback', function () {
+    var rxFeedback;
+
+    before(function () {
+        demoPage.go('#/component/rxFeedback');
+        rxFeedback = rxFeedbackPage.initialize($('#rxFeedback'));
+    });
+
+    it('should show element', function () {
+        expect(rxFeedback.isDisplayed()).to.eventually.be.true;
+    });
+});