VCST-567: redesign count (#2779)

feat: Improve Counter design.

Author: goldenmaya

.gitignore

@@ -10,6 +10,9 @@
 # User-specific files (MonoDevelop/Xamarin Studio)
 *.userprefs
 
+# Mac OS X specific files
+.DS_Store
+
 # Build results
 [Dd]ebug/
 [Dd]ebugPublic/

src/VirtoCommerce.Platform.Web/wwwroot/css/themes/main/sass/main.sass

@@ -1,11 +1,20 @@
-/* uncomment */
-//@import "bourbon"
-
 @import "includes/_constants.sass"
 @import "includes/_mixins.sass"
 @import "includes/_gfonts.sass"
 @import "includes/_reset.sass"
 
+// Components
+@import "modules/_vc-alert.sass"
+@import "modules/_vc-button.sass"
+@import "modules/_vc-button-social.sass"
+@import "modules/_vc-checkbox.sass"
+@import "modules/_vc-divider.sass"
+@import "modules/_vc-input.sass"
+@import "modules/_vc-link.sass"
+@import "modules/_vc-loader.sass"
+@import "modules/_vc-badge.sass"
+@import "modules/_vc-gridster.sass"
+
 @import "modules/_window-modals.sass"
 @import "modules/_dialogs.sass"
 @import "modules/_base-modules.sass"
@@ -21,17 +30,8 @@
 
 @import "blade-constructor.scss"
 
-// Login components
-@import "modules/_vc-alert.sass"
-@import "modules/_vc-button.sass"
-@import "modules/_vc-button-social.sass"
-@import "modules/_vc-checkbox.sass"
-@import "modules/_vc-divider.sass"
-@import "modules/_vc-input.sass"
-@import "modules/_vc-link.sass"
-@import "modules/_vc-loader.sass"
 @import "modules/_login-form.sass"
 @import "modules/_forgot-password.sass"
 @import "modules/_auth.sass"
 @import "modules/_socials.sass"
-@import "modules/_vc-gridster.sass"
+@import "modules/_blade-header.sass"

src/VirtoCommerce.Platform.Web/wwwroot/css/themes/main/sass/modules/_blade-header.sass

@@ -0,0 +1,35 @@
+.blade-header
+  box-sizing: border-box
+  position: absolute
+  display: flex
+  align-items: center
+  padding: 8px 16px
+  height: 50px
+  width: 100%
+  color: $whiteColor
+
+  &__icon
+    flex: none
+    display: flex
+    align-items: center
+    justify-content: center
+    margin: 0 12px 0 0
+    width: 30px
+    height: 30px
+    font-size: 30px
+
+  &__img
+    flex: none
+    margin: 0 12px 0 0
+    width: 30px
+    height: 30px
+    border-radius: 9999px
+    object-fit: contain
+    object-position: center
+
+  &__title
+    overflow: hidden
+    margin: 0 6px 0 0
+    font-size: 18px
+    text-overflow: ellipsis
+    white-space: nowrap

src/VirtoCommerce.Platform.Web/wwwroot/css/themes/main/sass/modules/_vc-badge.sass

@@ -0,0 +1,11 @@
+.vc-badge
+  flex: none
+  padding: 0px 4px
+  height: 16px
+  border-radius: 20px 
+  border: 1px solid #DFEEF9
+  background: #DFEEF9
+  font-size: 12px
+  font-weight: 700
+  line-height: 16px
+  color: #465769

src/VirtoCommerce.Platform.Web/wwwroot/js/app/modularity/blades/modules-list.tpl.html

@@ -2,11 +2,10 @@
     <div class="form-group">
         <div class="form-input __search">
             <input placeholder="{{'platform.placeholders.search-keyword' | translate }}" ng-model="blade.searchText" ng-keyup="gridApi.grid.queueGridRefresh()">
-            <button class="btn __other" style="position: relative;right: 45px;">
+            <button class="btn __other">
                 <i class="btn-ico fa fa-remove" title="Clear" ng-click="blade.searchText='';gridApi.grid.queueGridRefresh()"></i>
             </button>
         </div>
-        <p class="form-count">{{ 'platform.list.count' | translate }}: <span class="count">{{filteredEntitiesCount | number:0}}</span></p>
 
         <div ng-if="blade.mode==='available'" style="margin-top:10px">
             <div class="form-input">

src/VirtoCommerce.Platform.Web/wwwroot/js/app/navigation/blade/bladeContainer.tpl.html

@@ -41,15 +41,14 @@
                 </ul>
             </div>
 
-            <div class="blade-t" ng-class="{'__secondary': blade.subtitle}">
-                <i class="blade-t_ico" ng-if="!blade.currentEntity.iconUrl" ng-class="blade.headIcon ? blade.headIcon : 'fa fa-folder'">
-                    <i></i>
-                </i>
-                <i class="blade-t_ico" ng-if="blade.currentEntity.iconUrl">
-                    <img class="title-icon" ng-src="{{ blade.currentEntity.iconUrl }}">
-                </i>
-                <p class="blade-t_head">{{ blade.title | translate: blade.titleValues }}</p>
-                <p class="blade-t_subhead">{{ blade.subtitle | translate: blade.subtitleValues }}</p>
+            <div class="blade-header">
+                <i ng-if="!blade.currentEntity.iconUrl" ng-class="blade.headIcon ? blade.headIcon : 'fa fa-folder'" class="blade-header__icon"></i>
+
+                <img ng-if="blade.currentEntity.iconUrl" ng-src="{{ blade.currentEntity.iconUrl }}" class="blade-header__img" />
+
+                <div class="blade-header__title">{{ blade.title | translate: blade.titleValues }}</div>
+
+                <span ng-if="pageSettings.totalItems" class="vc-badge">{{ pageSettings.totalItems | number: 0 }}</ span>
             </div>
 
             <div class="blade-toolbar">

src/VirtoCommerce.Platform.Web/wwwroot/js/app/security/blades/account-list.tpl.html

@@ -2,11 +2,10 @@
     <div class="form-group">
         <div class="form-input __search">
             <input placeholder="{{ 'platform.placeholders.search-keyword' | translate }}" ng-model="filter.keyword" ng-keyup="$event.which === 13 && filter.criteriaChanged()">
-            <button class="btn __other" style="position: relative;right: 45px;">
+            <button class="btn __other">
                 <i class="btn-ico fa fa-remove" title="Clear" ng-click="filter.keyword=null;filter.criteriaChanged()"></i>
             </button>
         </div>
-        <p class="form-count">{{ 'platform.list.count' | translate }}: <span class="count">{{pageSettings.totalItems | number:0}}</span></p>
     </div>
 </div>
 <div class="blade-static __bottom" ng-if="pageSettings.itemsPerPageCount < pageSettings.totalItems" ng-include="'pagerTemplate.html'"></div>

src/VirtoCommerce.Platform.Web/wwwroot/js/app/security/blades/role-list.tpl.html

@@ -6,7 +6,6 @@
                 <i class="btn-ico fa fa-remove" title="Clear" ng-click="filter.keyword=null;filter.criteriaChanged()"></i>
             </button>
         </div>
-        <p class="form-count">{{ 'platform.list.count' | translate }}: <span class="count">{{pageSettings.totalItems | number:0}}</span></p>
     </div>
 </div>
 <div class="blade-static __bottom" ng-if="pageSettings.itemsPerPageCount < pageSettings.totalItems" ng-include="'pagerTemplate.html'"></div>

src/VirtoCommerce.Platform.Web/wwwroot/js/app/settings/blades/localizable-setting-value-list.html

@@ -2,13 +2,14 @@
   <div class="form-group">
     <div class="form-input __search">
       <input placeholder="{{'platform.placeholders.search-keyword' | translate}}" ng-model="blade.searchText" />
-      <button class="btn __other" style="position: relative;right: 45px;">
+
+      <button class="btn __other">
         <span class="btn-ico fa fa-times-circle" title="{{'platform.commands.clear' | translate}}" ng-click="blade.searchText=''"></span>
       </button>
     </div>
-    <p class="form-count">{{'platform.list.count' | translate}}: <span class="count">{{currentEntities.length | number:0}}</span></p>
   </div>
 </div>
+
 <div class="blade-content">
   <div class="blade-inner">
     <div class="inner-block" ng-init="setGridOptions({
@@ -34,6 +35,7 @@
     </div>
   </div>
 </div>
+
 <script type="text/ng-template" id="list-actions.cell.html">
   <div class="ui-grid-actions" left-click-menu="grid.appScope.contextMenuEntity = row.entity" data-target="prop_dic_item_menu">
     <span class="fa fa-ellipsis-v"></span>
@@ -48,4 +50,4 @@
        role="{{col.isRowHeader ? 'rowheader' : 'gridcell' }}"
        ui-grid-cell context-menu="grid.appScope.contextMenuEntity = row.entity"
        data-target="prop_dic_item_menu"></div>
-</script>
+</script>

src/VirtoCommerce.Platform.Web/wwwroot/js/app/settings/blades/setting-dictionary.tpl.html

@@ -6,7 +6,6 @@
                 <i class="btn-ico fa fa-remove" title="Clear" ng-click="blade.searchText=''"></i>
             </button>
         </div>
-        <p class="form-count">{{'platform.list.count' | translate}}: <span class="count">{{blade.currentEntity.allowedValues.length | number:0}}</span></p>
     </div>
 </div>
 <div class="blade-content">