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 { .blocklist-item-logo {
width: 100%; width: 100%;
max-width: 60px; max-width: 60px;
height: 100%;
max-height: 60px; 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 <custom-templates-list
ng-if="$ctrl.templates" ng-if="$ctrl.templates"
title-text="Templates" title-text="Templates"
title-icon="fa-rocket" title-icon="edit"
templates="$ctrl.templates" templates="$ctrl.templates"
table-key="customTemplates" table-key="customTemplates"
is-edit-allowed="$ctrl.isEditAllowed" is-edit-allowed="$ctrl.isEditAllowed"

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

@ -1,25 +1,29 @@
<div class="datatable"> <div class="datatable">
<rd-widget> <rd-widget>
<rd-widget-header icon="{{ $ctrl.titleIcon }}" feather-icon="true" title-text="{{ $ctrl.titleText }}"></rd-widget-header>
<rd-widget-body classes="no-padding"> <rd-widget-body classes="no-padding">
<div class="actionBar"> <div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap">
<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> <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> <div class="searchBar vertical-center !mr-0">
<pr-icon icon="'search'" feather="true"></pr-icon>
<div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input <input
type="text" type="text"
class="searchInput" class="searchInput"
ng-model="$ctrl.state.textFilter" ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()" ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..." placeholder="Search for a template..."
auto-focus auto-focus
ng-model-options="{ debounce: 300 }" ng-model-options="{ debounce: 300 }"
/> />
</div> </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 <template-item
ng-repeat="template in $ctrl.templates | filter:$ctrl.state.textFilter" ng-repeat="template in $ctrl.templates | filter:$ctrl.state.textFilter"
model="template" model="template"
@ -27,11 +31,15 @@
on-select="($ctrl.onSelectClick)" on-select="($ctrl.onSelectClick)"
> >
<template-item-actions> <template-item-actions>
<div ng-if="$ctrl.isEditAllowed(template)" style="display: flex"> <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-primary btn-xs" style="margin-right: 10px"> <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 Edit
</a> </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> </div>
</template-item-actions> </template-item-actions>
</template-item> </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> <pr-icon icon="'layers'" feather="true" class-name="'icon-nested-blue vertical-center'" mode="'primary'"></pr-icon>
{{ $ctrl.titleText }} {{ $ctrl.titleText }}
</div> </div>
<div class="searchBar vertical-center"> <div class="searchBar vertical-center !mr-0">
<pr-icon icon="'search'" feather="true"></pr-icon> <pr-icon icon="'search'" feather="true"></pr-icon>
<input <input
type="text" type="text"
@ -235,8 +235,8 @@
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="footer" ng-if="$ctrl.dataset"> <div class="footer pl-5" ng-if="$ctrl.dataset">
<div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> <div class="infoBar !ml-0" ng-if="$ctrl.state.selectedItemCount !== 0">
{{ $ctrl.state.selectedItemCount }} {{ $ctrl.state.selectedItemCount }}
item(s) selected item(s) selected
</div> </div>

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

@ -1,36 +1,37 @@
<!-- template --> <!-- 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"> <div class="blocklist-item-box">
<!-- template-image --> <!-- 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 }}" /> <img class="blocklist-item-logo" ng-src="{{ $ctrl.model.Logo }}" />
</span> </div>
<span class="blocklist-item-logo" ng-if="!$ctrl.model.Logo"> <div class="blocklist-item-logo vertical-center justify-center" ng-if="!$ctrl.model.Logo">
<i class="fa fa-rocket fa-4x blue-icon" aria-hidden="true"></i> <pr-icon icon="'svg-rocket'" class-name="'[&>*]:!h-10 [&>*]:!w-auto [&>*>path]:stroke-blue-8'" mode="'primary'"></pr-icon>
</span> </div>
<!-- !template-image --> <!-- !template-image -->
<!-- template-details --> <!-- template-details -->
<div class="col-sm-12 template-item-details"> <div class="col-sm-12 template-item-details">
<!-- blocklist-item-line1 --> <!-- blocklist-item-line1 -->
<div class="blocklist-item-line"> <div class="blocklist-item-line gap-2">
<span>
<span class="blocklist-item-title"> <span class="blocklist-item-title">
{{ $ctrl.model.Title }} {{ $ctrl.model.Title }}
</span> </span>
<span class="space-left blocklist-item-subtitle"> <div class="inline-flex items-center space-left blocklist-item-subtitle">
<span ng-if="$ctrl.model.Type != 3"> <div ng-if="$ctrl.model.Type != 3" class="vertical-center">
<i class="fab fa-linux" aria-hidden="true" ng-if="$ctrl.model.Platform === 1 || $ctrl.model.Platform === 'linux' || !$ctrl.model.Platform"></i> <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> <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> <pr-icon
</span> icon="'svg-microsoft'"
<span ng-if="$ctrl.model.Type === 3"> ng-if="$ctrl.model.Platform === 2 || $ctrl.model.Platform === 'windows' || !$ctrl.model.Platform"
<i class="fa fa-dharmachakra" aria-hidden="true"></i> class-name="'[&>*]:flex [&>*]:items-center'"
</span> size="'lg'"
<span> ></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 }} {{ $ctrl.typeLabel }}
</span> </div>
</span>
</span>
</div> </div>
<!-- !blocklist-item-line1 --> <!-- !blocklist-item-line1 -->
<span class="blocklist-item-actions" ng-transclude="actions"></span> <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>
</div> </div>
<div class="blocklist !px-[20px] gap-y-2 !pb-[20px]">
<div class="blocklist">
<template-item <template-item
ng-repeat="template in $ctrl.templates | filter: $ctrl.filterByTemplateType | filter:$ctrl.filterByCategory | filter:$ctrl.state.textFilter" ng-repeat="template in $ctrl.templates | filter: $ctrl.filterByTemplateType | filter:$ctrl.filterByCategory | filter:$ctrl.state.textFilter"
model="template" model="template"

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

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