feat(ui): custom template item EE-3738 (#7303)

app/assets/css/app.css

@@ -283,7 +283,6 @@ a[ng-click] {
 .blocklist-item-logo {
   width: 100%;
   max-width: 60px;
-  height: 100%;
   max-height: 60px;
 }
 

app/kubernetes/custom-templates/kube-custom-templates-view/kube-custom-templates-view.html

@@ -5,7 +5,7 @@
     <custom-templates-list
       ng-if="$ctrl.templates"
       title-text="Templates"
-      title-icon="fa-rocket"
+      title-icon="edit"
       templates="$ctrl.templates"
       table-key="customTemplates"
       is-edit-allowed="$ctrl.isEditAllowed"

app/portainer/components/custom-templates-list/customTemplatesList.html

@@ -1,25 +1,29 @@
 <div class="datatable">
   <rd-widget>
-    <rd-widget-header icon="{{ $ctrl.titleIcon }}" feather-icon="true" title-text="{{ $ctrl.titleText }}"></rd-widget-header>
     <rd-widget-body classes="no-padding">
-      <div class="actionBar">
-        <button type="button" class="btn btn-sm btn-primary" ui-state="$ctrl.createPath"> <i class="fa fa-plus space-right" aria-hidden="true"></i>Add Custom Template </button>
-      </div>
-
-      <div class="searchBar">
-        <i class="fa fa-search searchIcon" aria-hidden="true"></i>
+      <div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap">
+        <rd-widget-header icon="{{ $ctrl.titleIcon }}" feather-icon="true" title-text="Custom Templates" class="!flex-auto !mr-0" parent-classes="!p-0"></rd-widget-header>
+        <div class="searchBar vertical-center !mr-0">
+          <pr-icon icon="'search'" feather="true"></pr-icon>
           <input
             type="text"
             class="searchInput"
             ng-model="$ctrl.state.textFilter"
             ng-change="$ctrl.onTextFilterChange()"
-          placeholder="Search..."
+            placeholder="Search for a template..."
             auto-focus
             ng-model-options="{ debounce: 300 }"
           />
         </div>
+        <div class="actionBar">
+          <button type="button" class="btn btn-sm btn-primary" ui-state="$ctrl.createPath">
+            <pr-icon icon="'plus'" feather="true"></pr-icon>
+            Add Custom Template
+          </button>
+        </div>
+      </div>
 
-      <div class="blocklist">
+      <div class="blocklist !px-[20px] gap-y-2 !pb-[20px]">
         <template-item
           ng-repeat="template in $ctrl.templates | filter:$ctrl.state.textFilter"
           model="template"
@@ -27,11 +31,15 @@
           on-select="($ctrl.onSelectClick)"
         >
           <template-item-actions>
-            <div ng-if="$ctrl.isEditAllowed(template)" style="display: flex">
-              <a ui-state="$ctrl.editPath" ui-state-params="{id: template.Id}" ng-click="$event.stopPropagation();" class="btn btn-primary btn-xs" style="margin-right: 10px">
+            <div ng-if="$ctrl.isEditAllowed(template)" class="vertical-center">
+              <a ui-state="$ctrl.editPath" ui-state-params="{id: template.Id}" ng-click="$event.stopPropagation();" class="btn btn-secondary btn-sm vertical-center">
+                <pr-icon icon="'edit'" feather="true"></pr-icon>
                 Edit
               </a>
-              <button class="btn btn-danger btn-xs" ng-click="$ctrl.onDeleteClick(template.Id); $event.stopPropagation();">Delete</button>
+              <button class="btn btn-dangerlight btn-sm vertical-center" ng-click="$ctrl.onDeleteClick(template.Id); $event.stopPropagation();">
+                <pr-icon icon="'trash-2'" feather="true" mode="'danger'"></pr-icon>
+                Delete
+              </button>
             </div>
           </template-item-actions>
         </template-item>

app/portainer/components/datatables/stacks-datatable/stacksDatatable.html

@@ -6,7 +6,7 @@
           <pr-icon icon="'layers'" feather="true" class-name="'icon-nested-blue vertical-center'" mode="'primary'"></pr-icon>
           {{ $ctrl.titleText }}
         </div>
-        <div class="searchBar vertical-center">
+        <div class="searchBar vertical-center !mr-0">
           <pr-icon icon="'search'" feather="true"></pr-icon>
           <input
             type="text"
@@ -235,8 +235,8 @@
           </tbody>
         </table>
       </div>
-      <div class="footer" ng-if="$ctrl.dataset">
-        <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0">
+      <div class="footer pl-5" ng-if="$ctrl.dataset">
+        <div class="infoBar !ml-0" ng-if="$ctrl.state.selectedItemCount !== 0">
           {{ $ctrl.state.selectedItemCount }}
           item(s) selected
         </div>

app/portainer/components/template-list/template-item/templateItem.html

@@ -1,36 +1,37 @@
 <!-- template -->
-<div ng-class="{ 'blocklist-item--selected': $ctrl.model.Selected }" class="blocklist-item template-item" ng-click="$ctrl.onSelect($ctrl.model)">
+<div ng-class="{ 'blocklist-item--selected': $ctrl.model.Selected }" class="blocklist-item template-item !mr-0 !my-0" ng-click="$ctrl.onSelect($ctrl.model)">
   <div class="blocklist-item-box">
     <!-- template-image -->
-    <span ng-if="$ctrl.model.Logo">
+    <div ng-if="$ctrl.model.Logo" class="vertical-center justify-center">
       <img class="blocklist-item-logo" ng-src="{{ $ctrl.model.Logo }}" />
-    </span>
-    <span class="blocklist-item-logo" ng-if="!$ctrl.model.Logo">
-      <i class="fa fa-rocket fa-4x blue-icon" aria-hidden="true"></i>
-    </span>
+    </div>
+    <div class="blocklist-item-logo vertical-center justify-center" ng-if="!$ctrl.model.Logo">
+      <pr-icon icon="'svg-rocket'" class-name="'[&>*]:!h-10 [&>*]:!w-auto [&>*>path]:stroke-blue-8'" mode="'primary'"></pr-icon>
+    </div>
     <!-- !template-image -->
     <!-- template-details -->
     <div class="col-sm-12 template-item-details">
       <!-- blocklist-item-line1 -->
-      <div class="blocklist-item-line">
-        <span>
+      <div class="blocklist-item-line gap-2">
         <span class="blocklist-item-title">
           {{ $ctrl.model.Title }}
         </span>
-          <span class="space-left blocklist-item-subtitle">
-            <span ng-if="$ctrl.model.Type != 3">
-              <i class="fab fa-linux" aria-hidden="true" ng-if="$ctrl.model.Platform === 1 || $ctrl.model.Platform === 'linux' || !$ctrl.model.Platform"></i>
+        <div class="inline-flex items-center space-left blocklist-item-subtitle">
+          <div ng-if="$ctrl.model.Type != 3" class="vertical-center">
+            <i class="fab fa-linux space-right" aria-hidden="true" ng-if="$ctrl.model.Platform === 1 || $ctrl.model.Platform === 'linux' || !$ctrl.model.Platform"></i>
             <span ng-if="!$ctrl.model.Platform"> &amp; </span>
-              <i class="fab fa-windows" aria-hidden="true" ng-if="$ctrl.model.Platform === 2 || $ctrl.model.Platform === 'windows' || !$ctrl.model.Platform"></i>
-            </span>
-            <span ng-if="$ctrl.model.Type === 3">
-              <i class="fa fa-dharmachakra" aria-hidden="true"></i>
-            </span>
-            <span>
+            <pr-icon
+              icon="'svg-microsoft'"
+              ng-if="$ctrl.model.Platform === 2 || $ctrl.model.Platform === 'windows' || !$ctrl.model.Platform"
+              class-name="'[&>*]:flex [&>*]:items-center'"
+              size="'lg'"
+            ></pr-icon>
+          </div>
+          <div ng-if="$ctrl.model.Type === 3" class="vertical-center">
+            <pr-icon icon="'svg-kubernetes'" size="'lg'" class="align-bottom" class-name="'[&>*]:flex [&>*]:items-center'"></pr-icon>
+          </div>
           {{ $ctrl.typeLabel }}
-            </span>
-          </span>
-        </span>
+        </div>
       </div>
       <!-- !blocklist-item-line1 -->
       <span class="blocklist-item-actions" ng-transclude="actions"></span>

app/portainer/components/template-list/templateList.html

@@ -56,8 +56,7 @@
           </div>
         </div>
       </div>
-
-      <div class="blocklist">
+      <div class="blocklist !px-[20px] gap-y-2 !pb-[20px]">
         <template-item
           ng-repeat="template in $ctrl.templates | filter: $ctrl.filterByTemplateType | filter:$ctrl.filterByCategory | filter:$ctrl.state.textFilter"
           model="template"

app/portainer/components/widget/rd-widget-title.ts

@@ -5,12 +5,13 @@ export const rdWidgetTitle = {
     icon: '@',
     featherIcon: '<',
     classes: '@?',
+    parentClasses: '@?',
   },
   transclude: {
     title: '?headerTitle',
   },
   template: `
-    <div class="widget-header">
+    <div class="widget-header" ng-class="$ctrl.parentClasses">
       <div class="row">
         <span ng-class="$ctrl.classes" class="pull-left vertical-center">
           <pr-icon icon="$ctrl.icon" feather="$ctrl.featherIcon"></pr-icon>