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

Fix(ui):docker-templates-ui [EE-3485] (#7170) 

* EE-3485 update ui

* EE-3485 update ui

* EE-3485 use feather icon to replace trash icon

Co-authored-by: RexWangPT <rex.wang@portainer.io>
pull/7152/head
Chao Geng 2022-07-14 23:16:59 +08:00 committed by GitHub
parent e4fc41fc94
commit 39f9173956
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 150 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
app/portainer/components/forms/stack-from-template-form/stackFromTemplateForm.html
View File

@ -5,29 +5,28 @@
<form class="form-horizontal" name="stackTemplateForm"> <form class="form-horizontal" name="stackTemplateForm">
<!-- description --> <!-- description -->
<div ng-if="$ctrl.template.Note"> <div ng-if="$ctrl.template.Note">
<div class="col-sm-12 form-section-title"> Information </div> <div class="form-section-title"> Information </div>
<div class="form-group"> <div class="col-sm-12 form-group">
<div class="col-sm-12">
<div class="template-note" ng-bind-html="$ctrl.template.Note"></div> <div class="template-note" ng-bind-html="$ctrl.template.Note"></div>
</div> </div>
</div> </div>
</div>
<!-- !description --> <!-- !description -->
<div class="col-sm-12 form-section-title"> Configuration </div> <div class="form-section-title"> Configuration </div>
<!-- name-input --> <!-- name-input -->
<div class="form-group"> <div class="form-group">
<label for="template_name" class="col-sm-2 control-label text-left">Name</label> <label for="template_name" class="col-sm-2 control-label text-left">Name</label>
<div class="col-sm-10"> <div class="col-sm-6">
<input type="text" name="template_name" class="form-control" ng-model="$ctrl.formValues.name" ng-pattern="$ctrl.nameRegex" placeholder="e.g. myStack" required /> <input type="text" name="template_name" class="form-control" ng-model="$ctrl.formValues.name" ng-pattern="$ctrl.nameRegex" placeholder="e.g. myStack" required />
</div> </div>
</div> </div>
<div class="form-group" ng-show="stackTemplateForm.template_name.$invalid"> <div class="form-group" ng-if="stackTemplateForm.template_name.$invalid">
<div class="col-sm-12 small text-warning"> <div class="col-sm-12 small text-warning">
<div ng-messages="stackTemplateForm.template_name.$error"> <div ng-messages="stackTemplateForm.template_name.$error">
<p ng-message="pattern"> <p ng-message="pattern">
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
<span>This field must consist of lower case alphanumeric characters, '_' or '-' (e.g. 'my-name', or 'abc-123').</span> <span>This field must consist of lower case alphanumeric characters, '_' or '-' (e.g. 'my-name', or 'abc-123').</span>
</p> </p>
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
</div> </div>
</div> </div>
</div> </div>
@ -38,7 +37,7 @@
{{ var.label }} {{ var.label }}
<portainer-tooltip ng-if="var.description" message="var.description"></portainer-tooltip> <portainer-tooltip ng-if="var.description" message="var.description"></portainer-tooltip>
</label> </label>
<div class="col-sm-10"> <div class="col-sm-6">
<input type="text" class="form-control" ng-if="!var.select" ng-model="var.value" id="field_{{ $index }}" /> <input type="text" class="form-control" ng-if="!var.select" ng-model="var.value" id="field_{{ $index }}" />
<select class="form-control" ng-if="var.select" ng-model="var.value" id="field_{{ $index }}"> <select class="form-control" ng-if="var.select" ng-model="var.value" id="field_{{ $index }}">
<option selected disabled hidden value="">Select value</option> <option selected disabled hidden value="">Select value</option>
@ -53,12 +52,12 @@
<por-access-control-form form-data="$ctrl.formValues.AccessControlData"></por-access-control-form> <por-access-control-form form-data="$ctrl.formValues.AccessControlData"></por-access-control-form>
<!-- !access-control --> <!-- !access-control -->
<!-- actions --> <!-- actions -->
<div class="col-sm-12 form-section-title"> Actions </div> <div class="form-section-title"> Actions </div>
<div class="form-group"> <div class="form-group">
<div class="col-sm-12"> <div class="col-sm-12">
<button <button
type="button" type="button"
class="btn btn-primary btn-sm" class="btn btn-primary"
ng-disabled="$ctrl.state.actionInProgress || !$ctrl.formValues.name || !$ctrl.state.deployable || stackTemplateForm.$invalid" ng-disabled="$ctrl.state.actionInProgress || !$ctrl.formValues.name || !$ctrl.state.deployable || stackTemplateForm.$invalid"
ng-click="$ctrl.createTemplate()" ng-click="$ctrl.createTemplate()"
button-spinner="$ctrl.state.actionInProgress" button-spinner="$ctrl.state.actionInProgress"
@ -66,11 +65,9 @@
<span ng-hide="$ctrl.state.actionInProgress">Deploy the stack</span> <span ng-hide="$ctrl.state.actionInProgress">Deploy the stack</span>
<span ng-show="$ctrl.state.actionInProgress">Deployment in progress...</span> <span ng-show="$ctrl.state.actionInProgress">Deployment in progress...</span>
</button> </button>
<button type="button" class="btn btn-sm btn-default" ng-click="$ctrl.unselectTemplate($ctrl.template)">Hide</button> <button type="button" class="btn btn-default" ng-click="$ctrl.unselectTemplate($ctrl.template)">Hide</button>
<div class="cols-sm-12 small text-danger" ng-if="$ctrl.state.formValidationError" style="margin-left: 5px; margin-top: 5px">{{ $ctrl.state.formValidationError }}</div> <div class="cols-sm-12 small text-danger space-left mt-1" ng-if="$ctrl.state.formValidationError">{{ $ctrl.state.formValidationError }}</div>
<div class="cols-sm-12 small text-danger" ng-if="!$ctrl.state.deployable" style="margin-left: 5px; margin-top: 5px" <div class="cols-sm-12 small text-danger space-left mt-1" ng-if="!$ctrl.state.deployable">This template type cannot be deployed on this environment.</div>
>This template type cannot be deployed on this environment.</div
>
</div> </div>
</div> </div>
<!-- !actions --> <!-- !actions -->

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

@ -2,15 +2,15 @@
<rd-widget> <rd-widget>
<rd-widget-body classes="no-padding"> <rd-widget-body classes="no-padding">
<div class="toolBar"> <div class="toolBar">
<div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px"></i> {{ $ctrl.titleText }} </div> <div class="toolBarTitle"> <i class="fa mr-1" ng-class="$ctrl.titleIcon" aria-hidden="true"></i> {{ $ctrl.titleText }} </div>
</div> </div>
<div class="mx-3">
<div class="actionBar"> <div class="actionBar">
<div> <div>
<button type="button" class="btn btn-sm btn-primary" ui-sref="docker.templates.new" ng-if="$ctrl.showAddAction"> <button type="button" class="btn btn-sm btn-primary" ui-sref="docker.templates.new" ng-if="$ctrl.showAddAction">
<i class="fa fa-plus space-right" aria-hidden="true"></i>Add template <i class="fa fa-plus space-right" aria-hidden="true"></i>Add template
</button> </button>
<span ng-class="{ 'pull-right': $ctrl.showAddAction }" style="width: 25%"> <span ng-class="{ 'pull-right': $ctrl.showAddAction }">
<ui-select ng-model="$ctrl.state.selectedCategory"> <ui-select ng-model="$ctrl.state.selectedCategory">
<ui-select-match placeholder="Select a category" allow-clear="true"> <ui-select-match placeholder="Select a category" allow-clear="true">
<span>{{ $select.selected }}</span> <span>{{ $select.selected }}</span>
@ -22,9 +22,9 @@
</span> </span>
</div> </div>
<div class="small text-muted" style="margin: 15px 0 0 5px"> <div class="small text-muted mt-3">
<label for="show_stacks" class="control-label text-left"> Show container templates </label> <label for="show_stacks" class="control-label text-left"> Show container templates </label>
<label class="switch" style="margin-left: 20px"> <label class="switch space-left">
<input type="checkbox" name="show_stacks" ng-model="$ctrl.state.showContainerTemplates" ng-change="$ctrl.updateCategories()" /><i></i> <input type="checkbox" name="show_stacks" ng-model="$ctrl.state.showContainerTemplates" ng-change="$ctrl.updateCategories()" /><i></i>
</label> </label>
</div> </div>
@ -42,7 +42,7 @@
ng-model-options="{ debounce: 300 }" ng-model-options="{ debounce: 300 }"
/> />
</div> </div>
</div>
<div class="blocklist"> <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"

150
app/portainer/views/templates/templates.html
View File

@ -15,24 +15,22 @@
<!-- container-form --> <!-- container-form -->
<div class="col-sm-12" ng-if="state.selectedTemplate && state.selectedTemplate.Type === 1"> <div class="col-sm-12" ng-if="state.selectedTemplate && state.selectedTemplate.Type === 1">
<rd-widget> <rd-widget>
<rd-widget-custom-header icon="state.selectedTemplate.Logo" title-text="state.selectedTemplate.Image"></rd-widget-custom-header> <rd-widget-custom-header icon="state.selectedTemplate.Logo" title-text="state.selectedTemplate.Title"></rd-widget-custom-header>
<rd-widget-body classes="padding"> <rd-widget-body classes="padding">
<form class="form-horizontal" name="selectedTemplateType1"> <form class="form-horizontal" name="selectedTemplateType1">
<!-- description --> <!-- description -->
<div ng-if="state.selectedTemplate.Note"> <div ng-if="state.selectedTemplate.Note">
<div class="col-sm-12 form-section-title"> Information </div> <div class="form-section-title"> Information </div>
<div class="form-group"> <div class="col-sm-12 form-group">
<div class="col-sm-12"> <div class="template-note" ng-bind-html="state.selectedTemplate.Note"></div>
<div class="template-note" ng-if="state.selectedTemplate.Note" ng-bind-html="state.selectedTemplate.Note"></div>
</div>
</div> </div>
</div> </div>
<!-- !description --> <!-- !description -->
<div class="col-sm-12 form-section-title"> Configuration </div> <div class="form-section-title"> Configuration </div>
<!-- name-input --> <!-- name-input -->
<div class="form-group"> <div class="form-group">
<label for="container_name" class="col-sm-2 control-label text-left">Name</label> <label for="container_name" class="col-sm-2 control-label text-left">Name</label>
<div class="col-sm-10"> <div class="col-sm-6">
<input type="text" name="container_name" class="form-control" ng-model="formValues.name" placeholder="e.g. web (optional)" /> <input type="text" name="container_name" class="form-control" ng-model="formValues.name" placeholder="e.g. web (optional)" />
</div> </div>
</div> </div>
@ -40,7 +38,7 @@
<!-- network-input --> <!-- network-input -->
<div class="form-group"> <div class="form-group">
<label for="container_network" class="col-sm-2 control-label text-left">Network</label> <label for="container_network" class="col-sm-2 control-label text-left">Network</label>
<div class="col-sm-10"> <div class="col-sm-6">
<select class="form-control" ng-options="net.Name for net in availableNetworks | orderBy: 'Name'" ng-model="formValues.network"> <select class="form-control" ng-options="net.Name for net in availableNetworks | orderBy: 'Name'" ng-model="formValues.network">
<option disabled hidden value="">Select a network</option> <option disabled hidden value="">Select a network</option>
</select> </select>
@ -53,7 +51,7 @@
{{ var.label }} {{ var.label }}
<portainer-tooltip ng-if="var.description" message="var.description"></portainer-tooltip> <portainer-tooltip ng-if="var.description" message="var.description"></portainer-tooltip>
</label> </label>
<div class="col-sm-10"> <div class="col-sm-6">
<input type="text" class="form-control" ng-if="!var.select" ng-model="var.value" id="field_{{ $index }}" /> <input type="text" class="form-control" ng-if="!var.select" ng-model="var.value" id="field_{{ $index }}" />
<select class="form-control" ng-if="var.select" ng-model="var.value" id="field_{{ $index }}"> <select class="form-control" ng-if="var.select" ng-model="var.value" id="field_{{ $index }}">
<option selected disabled hidden value="">Select value</option> <option selected disabled hidden value="">Select value</option>
@ -65,8 +63,7 @@
<!-- access-control --> <!-- access-control -->
<por-access-control-form form-data="formValues.AccessControlData"></por-access-control-form> <por-access-control-form form-data="formValues.AccessControlData"></por-access-control-form>
<!-- !access-control --> <!-- !access-control -->
<div class="form-group"> <div class="form-group col-sm-12">
<div class="col-sm-12">
<a class="small interactive" ng-if="!state.showAdvancedOptions" ng-click="state.showAdvancedOptions = true;"> <a class="small interactive" ng-if="!state.showAdvancedOptions" ng-click="state.showAdvancedOptions = true;">
<i class="fa fa-plus space-right" aria-hidden="true"></i> Show advanced options <i class="fa fa-plus space-right" aria-hidden="true"></i> Show advanced options
</a> </a>
@ -74,33 +71,21 @@
<i class="fa fa-minus space-right" aria-hidden="true"></i> Hide advanced options <i class="fa fa-minus space-right" aria-hidden="true"></i> Hide advanced options
</a> </a>
</div> </div>
</div>
<div ng-if="state.showAdvancedOptions"> <div ng-if="state.showAdvancedOptions">
<!-- port-mapping --> <!-- port-mapping -->
<div class="form-group"> <div class="form-group mt-2">
<div class="col-sm-12" style="margin-top: 5px">
<label class="control-label text-left">Port mapping</label>
<span class="label label-default interactive" style="margin-left: 10px" ng-click="addPortBinding()">
<i class="fa fa-plus-circle" aria-hidden="true"></i> map additional port
</span>
</div>
<div class="col-sm-12" style="margin-top: 10px" ng-if="state.selectedTemplate.Ports.length > 0">
<span class="small text-muted">Portainer will automatically assign a port if you leave the host port empty.</span>
</div>
<!-- !port-mapping -->
<!-- port-mapping-input-list -->
<div class="col-sm-12"> <div class="col-sm-12">
<div class="col-sm-12 form-inline" style="margin-top: 10px"> <label class="control-label text-left">Port mapping</label>
<div ng-repeat="portBinding in state.selectedTemplate.Ports" style="margin-top: 2px"> <div class="mt-1" ng-if="state.selectedTemplate.Ports.length > 0">
<div class="small text-muted">Portainer will automatically assign a port if you leave the host port empty.</div>
<div class="form-inline mt-2" ng-repeat="portBinding in state.selectedTemplate.Ports">
<!-- host-port --> <!-- host-port -->
<div class="input-group col-sm-4 input-group-sm"> <div class="input-group col-sm-4 input-group-sm">
<span class="input-group-addon">host</span> <span class="input-group-addon">host</span>
<input type="text" class="form-control" ng-model="portBinding.hostPort" placeholder="e.g. 80 or 1.2.3.4:80 (optional)" /> <input type="text" class="form-control" ng-model="portBinding.hostPort" placeholder="e.g. 80 or 1.2.3.4:80 (optional)" />
</div> </div>
<!-- !host-port --> <!-- !host-port -->
<span style="margin: 0 10px 0 10px"> <i class="fa fa-long-arrow-alt-right space-left space-right" aria-hidden="true"></i>
<i class="fa fa-long-arrow-alt-right" aria-hidden="true"></i>
</span>
<!-- container-port --> <!-- container-port -->
<div class="input-group col-sm-4 input-group-sm"> <div class="input-group col-sm-4 input-group-sm">
<span class="input-group-addon">container</span> <span class="input-group-addon">container</span>
@ -110,34 +95,29 @@
<!-- protocol-actions --> <!-- protocol-actions -->
<div class="input-group col-sm-3 input-group-sm"> <div class="input-group col-sm-3 input-group-sm">
<div class="btn-group btn-group-sm"> <div class="btn-group btn-group-sm">
<label class="btn btn-primary" ng-model="portBinding.protocol" uib-btn-radio="'tcp'">TCP</label> <label class="btn btn-light" ng-model="portBinding.protocol" uib-btn-radio="'tcp'">TCP</label>
<label class="btn btn-primary" ng-model="portBinding.protocol" uib-btn-radio="'udp'">UDP</label> <label class="btn btn-light" ng-model="portBinding.protocol" uib-btn-radio="'udp'">UDP</label>
</div> </div>
<button class="btn btn-sm btn-danger" type="button" ng-click="removePortBinding($index)"> <button class="btn btn-light" type="button" ng-click="removePortBinding($index)">
<i class="fa fa-trash" aria-hidden="true"></i> <pr-icon icon="'trash'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
</button> </button>
</div> </div>
<!-- !protocol-actions --> <!-- !protocol-actions -->
</div> </div>
</div> </div>
<div class="small interactive text-muted" ng-click="addPortBinding()"> <i class="fa fa-plus space-right mt-3" aria-hidden="true"></i> Add map additional port </div>
</div> </div>
</div> </div>
<!-- !port-mapping-input-list --> <!-- !port-mapping -->
<!-- volume-mapping --> <!-- volume-mapping -->
<div class="form-group"> <div class="form-group mt-4">
<div class="col-sm-12" style="margin-top: 5px"> <div class="col-sm-12">
<label class="control-label text-left">Volume mapping</label> <label class="control-label text-left">Volume mapping</label>
<span class="label label-default interactive" style="margin-left: 10px" ng-click="addVolume()"> <div class="mt-1" ng-if="state.selectedTemplate.Volumes.length > 0">
<i class="fa fa-plus-circle" aria-hidden="true"></i> map additional volume <div class="small text-muted">Portainer will automatically create and map a local volume when using the <b>auto</b> option.</div>
</span> <div class="mt-2" ng-repeat="volume in state.selectedTemplate.Volumes">
</div>
<div class="col-sm-12" style="margin-top: 10px" ng-if="state.selectedTemplate.Volumes.length > 0">
<span class="small text-muted">Portainer will automatically create and map a local volume when using the <b>auto</b> option.</span>
</div>
<div ng-repeat="volume in state.selectedTemplate.Volumes">
<div class="col-sm-12" style="margin-top: 10px">
<!-- volume-line1 --> <!-- volume-line1 -->
<div class="col-sm-12 form-inline"> <div class="form-inline">
<!-- container-path --> <!-- container-path -->
<div class="input-group input-group-sm col-sm-6"> <div class="input-group input-group-sm col-sm-6">
<span class="input-group-addon">container</span> <span class="input-group-addon">container</span>
@ -145,21 +125,21 @@
</div> </div>
<!-- !container-path --> <!-- !container-path -->
<!-- volume-type --> <!-- volume-type -->
<div class="input-group col-sm-5" style="margin-left: 5px"> <div class="input-group col-sm-5 space-left">
<div class="btn-group btn-group-sm"> <div class="btn-group btn-group-sm">
<label class="btn btn-primary" ng-model="volume.type" uib-btn-radio="'auto'" ng-click="volume.bind = ''">Auto</label> <label class="btn btn-light" ng-model="volume.type" uib-btn-radio="'auto'" ng-click="volume.bind = ''">Auto</label>
<label class="btn btn-primary" ng-model="volume.type" uib-btn-radio="'volume'" ng-click="volume.bind = ''">Volume</label> <label class="btn btn-light" ng-model="volume.type" uib-btn-radio="'volume'" ng-click="volume.bind = ''">Volume</label>
<label class="btn btn-primary" ng-model="volume.type" uib-btn-radio="'bind'" ng-click="volume.bind = ''" ng-if="isAdmin || allowBindMounts">Bind</label> <label class="btn btn-light" ng-model="volume.type" uib-btn-radio="'bind'" ng-click="volume.bind = ''" ng-if="isAdmin || allowBindMounts">Bind</label>
</div> </div>
<button class="btn btn-sm btn-danger" type="button" ng-click="removeVolume($index)"> <button class="btn btn-light" type="button" ng-click="removeVolume($index)">
<i class="fa fa-trash" aria-hidden="true"></i> <pr-icon icon="'trash'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
</button> </button>
</div> </div>
<!-- !volume-type --> <!-- !volume-type -->
</div> </div>
<!-- !volume-line1 --> <!-- !volume-line1 -->
<!-- volume-line2 --> <!-- volume-line2 -->
<div class="col-sm-12 form-inline" style="margin-top: 5px" ng-if="volume.type !== 'auto'"> <div class="form-inline mt-1" ng-if="volume.type !== 'auto'">
<i class="fa fa-long-arrow-alt-right" aria-hidden="true"></i> <i class="fa fa-long-arrow-alt-right" aria-hidden="true"></i>
<!-- volume --> <!-- volume -->
<div class="input-group input-group-sm col-sm-6" ng-if="volume.type === 'volume'"> <div class="input-group input-group-sm col-sm-6" ng-if="volume.type === 'volume'">
@ -180,10 +160,10 @@
</div> </div>
<!-- !bind --> <!-- !bind -->
<!-- read-only --> <!-- read-only -->
<div class="input-group input-group-sm col-sm-5" style="margin-left: 5px"> <div class="input-group input-group-sm col-sm-5 space-left">
<div class="btn-group btn-group-sm"> <div class="btn-group btn-group-sm">
<label class="btn btn-primary" ng-model="volume.readonly" uib-btn-radio="false">Writable</label> <label class="btn btn-light" ng-model="volume.readonly" uib-btn-radio="false">Writable</label>
<label class="btn btn-primary" ng-model="volume.readonly" uib-btn-radio="true">Read-only</label> <label class="btn btn-light" ng-model="volume.readonly" uib-btn-radio="true">Read-only</label>
</div> </div>
</div> </div>
<!-- !read-only --> <!-- !read-only -->
@ -191,44 +171,37 @@
<!-- !volume-line2 --> <!-- !volume-line2 -->
</div> </div>
</div> </div>
<div class="small interactive text-muted" ng-click="addVolume()"> <i class="fa fa-plus space-right mt-3" aria-hidden="true"></i> Add map additional volume </div>
</div>
</div> </div>
<!-- !volume-mapping --> <!-- !volume-mapping -->
<!-- extra-host --> <!-- extra-host -->
<div class="form-group"> <div class="form-group mt-4">
<div class="col-sm-12" style="margin-top: 5px">
<label class="control-label text-left">Hosts file entries</label>
<span class="label label-default interactive" style="margin-left: 10px" ng-click="addExtraHost()">
<i class="fa fa-plus-circle" aria-hidden="true"></i> add additional entry
</span>
</div>
<!-- extra-host-input-list -->
<div class="col-sm-12"> <div class="col-sm-12">
<div class="col-sm-12 form-inline" style="margin-top: 10px"> <label class="control-label text-left">Hosts file entries</label>
<div ng-repeat="(idx, host) in state.selectedTemplate.Hosts track by $index" style="margin-top: 2px"> <!-- extra-host-input-list -->
<div class="mt-1" ng-if="state.selectedTemplate.Hosts.length > 0">
<div class="form-inline mt-2" ng-repeat="(idx, host) in state.selectedTemplate.Hosts track by $index">
<div class="input-group col-sm-5 input-group-sm"> <div class="input-group col-sm-5 input-group-sm">
<span class="input-group-addon">value</span> <span class="input-group-addon">value</span>
<input type="text" class="form-control" ng-model="state.selectedTemplate.Hosts[idx]" placeholder="e.g. host:IP" /> <input type="text" class="form-control" ng-model="state.selectedTemplate.Hosts[idx]" placeholder="e.g. host:IP" />
</div> </div>
<button class="btn btn-sm btn-danger" type="button" ng-click="removeExtraHost($index)"> <button class="btn btn-light" type="button" ng-click="removeExtraHost($index)">
<i class="fa fa-trash" aria-hidden="true"></i> <pr-icon icon="'trash'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
</button> </button>
</div> </div>
</div> </div>
<div class="small interactive text-muted" ng-click="addExtraHost()"> <i class="fa fa-plus space-right mt-3" aria-hidden="true"></i> Add additional entry </div>
</div> </div>
</div> </div>
<!-- !extra-host --> <!-- !extra-host -->
<!-- labels --> <!-- labels -->
<div class="form-group"> <div class="form-group mt-4">
<div class="col-sm-12" style="margin-top: 5px">
<label class="control-label text-left">Labels</label>
<span class="label label-default interactive" style="margin-left: 10px" ng-click="addLabel()">
<i class="fa fa-plus-circle" aria-hidden="true"></i> add label
</span>
</div>
<!-- labels-input-list -->
<div class="col-sm-12"> <div class="col-sm-12">
<div class="col-sm-12 form-inline" style="margin-top: 10px"> <label class="control-label text-left">Labels</label>
<div ng-repeat="label in state.selectedTemplate.Labels" style="margin-top: 2px"> <!-- labels-input-list -->
<div class="mt-1" ng-if="state.selectedTemplate.Labels.length > 0">
<div class="form-inline mt-2" ng-repeat="label in state.selectedTemplate.Labels">
<div class="input-group col-sm-5 input-group-sm"> <div class="input-group col-sm-5 input-group-sm">
<span class="input-group-addon">name</span> <span class="input-group-addon">name</span>
<input type="text" class="form-control" ng-model="label.name" placeholder="e.g. com.example.foo" /> <input type="text" class="form-control" ng-model="label.name" placeholder="e.g. com.example.foo" />
@ -237,19 +210,20 @@
<span class="input-group-addon">value</span> <span class="input-group-addon">value</span>
<input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" /> <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" />
</div> </div>
<button class="btn btn-sm btn-danger" type="button" ng-click="removeLabel($index)"> <button class="btn btn-light" type="button" ng-click="removeLabel($index)">
<i class="fa fa-trash" aria-hidden="true"></i> <pr-icon icon="'trash'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
</button> </button>
</div> </div>
</div> </div>
</div>
<!-- !labels-input-list --> <!-- !labels-input-list -->
<div class="small interactive text-muted" ng-click="addLabel()"> <i class="fa fa-plus space-right mt-3" aria-hidden="true"></i> Add label </div>
</div>
</div> </div>
<!-- !labels --> <!-- !labels -->
<!-- hostname --> <!-- hostname -->
<div class="form-group"> <div class="form-group mt-4">
<label for="container_hostname" class="col-sm-2 control-label text-left">Hostname</label> <label for="container_hostname" class="col-sm-2 control-label text-left">Hostname</label>
<div class="col-sm-10"> <div class="col-sm-6">
<input type="text" name="container_hostname" class="form-control" ng-model="state.selectedTemplate.Hostname" placeholder="leave empty to use docker default" /> <input type="text" name="container_hostname" class="form-control" ng-model="state.selectedTemplate.Hostname" placeholder="leave empty to use docker default" />
</div> </div>
</div> </div>
@ -257,12 +231,12 @@
</div> </div>
<!-- !advanced-options --> <!-- !advanced-options -->
<!-- actions --> <!-- actions -->
<div class="col-sm-12 form-section-title"> Actions </div> <div class="form-section-title"> Actions </div>
<div class="form-group"> <div class="form-group">
<div class="col-sm-12"> <div class="col-sm-12">
<button <button
type="button" type="button"
class="btn btn-primary btn-sm" class="btn btn-primary"
ng-disabled="state.actionInProgress || !formValues.network" ng-disabled="state.actionInProgress || !formValues.network"
ng-click="createTemplate()" ng-click="createTemplate()"
button-spinner="state.actionInProgress" button-spinner="state.actionInProgress"
@ -270,8 +244,8 @@
<span ng-hide="state.actionInProgress">Deploy the container</span> <span ng-hide="state.actionInProgress">Deploy the container</span>
<span ng-show="state.actionInProgress">Deployment in progress...</span> <span ng-show="state.actionInProgress">Deployment in progress...</span>
</button> </button>
<button type="button" class="btn btn-sm btn-default" ng-click="unselectTemplate(state.selectedTemplate)">Hide</button> <button type="button" class="btn btn-default" ng-click="unselectTemplate(state.selectedTemplate)">Hide</button>
<span class="text-danger" ng-if="state.formValidationError" style="margin-left: 5px">{{ state.formValidationError }}</span> <span class="text-danger space-left" ng-if="state.formValidationError">{{ state.formValidationError }}</span>
</div> </div>
</div> </div>
<!-- !actions --> <!-- !actions -->