premium checks and layout updates for attachments

src/popup/app/vault/vaultAttachmentsController.js

@@ -2,10 +2,11 @@ angular
     .module('bit.vault')
 
     .controller('vaultAttachmentsController', function ($scope, $state, $stateParams, loginService, $q, toastr,
-        SweetAlert, utilsService, $analytics, i18nService, cryptoService) {
+        SweetAlert, utilsService, $analytics, i18nService, cryptoService, tokenService) {
         $scope.i18n = i18nService;
         utilsService.initListSectionItemListeners($(document), angular);
 
+        $scope.isPremium = tokenService.getPremium();
         loginService.get($stateParams.id, function (login) {
             $q.when(login.decrypt()).then(function (model) {
                 $scope.login = model;
@@ -15,7 +16,7 @@ angular
         $scope.canUseAttachments = false;
         cryptoService.getEncKey().then(function (key) {
             $scope.canUseAttachments = !!key;
-            if (!$scope.canUseAttachments) {
+            if (!$scope.canUseAttachments && $scope.isPremium) {
                 SweetAlert.swal({
                     title: i18nService.featureUnavailable,
                     text: i18nService.updateKey,

src/popup/app/vault/vaultViewLoginController.js

@@ -7,6 +7,7 @@ angular
         var from = $stateParams.from,
             totpInterval = null;
 
+        $scope.isPremium = tokenService.getPremium();
         $scope.login = null;
         loginService.get($stateParams.loginId, function (login) {
             if (!login) {

src/popup/app/vault/views/vaultAttachments.html

@@ -3,7 +3,7 @@
         <div class="left">
             <a href="" ng-click="close()">{{i18n.close}}</a>
         </div>
-        <div class="right">
+        <div class="right" ng-if="isPremium">
             <button type="submit" class="btn btn-link" ng-show="!theForm.$loading">{{i18n.submit}}</button>
             <i class="fa fa-spinner fa-lg fa-spin no-animation" ng-show="theForm.$loading"></i>
         </div>
@@ -17,16 +17,16 @@
                         {{i18n.noAttachments}}
                     </div>
                     <div class="list-section-item" ng-repeat="attachment in login.attachments">
-                        {{attachment.fileName}}
                         <span class="btn-list no-padding" stop-prop stop-click title="{{i18n.deleteAttachment}}"
                               ng-click="delete(attachment)">
                             <i class="fa fa-lg fa-trash"></i>
                         </span>
                         <small class="item-sub-label">{{attachment.sizeName}}</small>
+                        <span class="text">{{attachment.fileName}}</span>
                     </div>
                 </div>
             </div>
-            <div class="list-section">
+            <div class="list-section" ng-if="isPremium">
                 <div class="list-section-header">
                     {{i18n.newAttachment}}
                 </div>

src/popup/app/vault/views/vaultViewLogin.html

@@ -76,7 +76,7 @@
                 <div class="list-section-item pre">{{login.notes}}</div>
             </div>
         </div>
-        <div class="list-section" ng-if="login.attachments && login.attachments.length">
+        <div class="list-section" ng-if="isPremium && login.attachments && login.attachments.length">
             <div class="list-section-header">
                 {{i18n.attachments}}
             </div>
@@ -84,10 +84,10 @@
                 <a class="list-section-item list-allow-selection" href="#" stop-click
                    ng-repeat="attachment in login.attachments"
                    ng-click="download(attachment)">
-                    {{attachment.fileName}}
                     <i class="fa fa-download right-icon fa-fw no-animation" ng-if="!attachment.downloading"></i>
                     <i class="fa fa-spin fa-spinner right-icon fa-fw no-animation" ng-if="attachment.downloading"></i>
                     <small class="item-sub-label">{{attachment.sizeName}}</small>
+                    <span class="text">{{attachment.fileName}}</span>
                 </a>
             </div>
         </div>

src/popup/less/components.less

@@ -350,6 +350,7 @@
 
         .item-sub-label {
             float: right;
+            display: block;
             margin-right: 15px;
             color: @gray-light;
         }