github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

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

pull/7259/head
Ali 2022-07-27 09:40:22 +12:00 committed by GitHub
parent 82b848af0c
commit 1ef713d80b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 60 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/css/app.css
View File

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

2
app/kubernetes/custom-templates/kube-custom-templates-view/kube-custom-templates-view.html
View File

@ -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"

48
app/portainer/components/custom-templates-list/customTemplatesList.html
View File

@ -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 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 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="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input
type="text"
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..."
auto-focus
ng-model-options="{ debounce: 300 }"
/>
</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>

6
app/portainer/components/datatables/stacks-datatable/stacksDatatable.html
View File

@ -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>

49
app/portainer/components/template-list/template-item/templateItem.html
View File

@ -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>
<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>
<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>
{{ $ctrl.typeLabel }}
</span>
</span>
<div class="blocklist-item-line gap-2">
<span class="blocklist-item-title">
{{ $ctrl.model.Title }}
</span>
<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>
<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 }}
</div>
</div>
<!-- !blocklist-item-line1 -->
<span class="blocklist-item-actions" ng-transclude="actions"></span>

3
app/portainer/components/template-list/templateList.html
View File

@ -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"

3
app/portainer/components/widget/rd-widget-title.ts
View File

@ -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>