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

feat(templates): template configuration is now placed on top of template list (#253)

pull/254/head
Anthony Lapenna 2016-10-02 16:11:20 +13:00 committed by GitHub
parent 6e9fe26fde
commit 422a982d60
3 changed files with 49 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
app/components/templates/templates.html
View File

@ -7,31 +7,11 @@
<rd-header-content>Templates</rd-header-content> <rd-header-content>Templates</rd-header-content>
</rd-header> </rd-header>
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12">
<rd-widget>
<rd-widget-header icon="fa-rocket" title="Available templates">
<div class="pull-right">
<i id="loadTemplatesSpinner" class="fa fa-cog fa-2x fa-spin" style="margin-top: 5px;"></i>
</div>
</rd-widget-header>
<rd-widget-body classes="padding">
<div class="template-list">
<div ng-repeat="tpl in templates" class="container-template hvr-grow" id="template_{{ $index }}" ng-click="selectTemplate($index)">
<img class="logo" ng-src="{{ tpl.logo }}" />
<div class="title">{{ tpl.title }}</div>
<div class="description">{{ tpl.description }}</div>
</div>
</div>
</rd-widget-body>
</rd-widget>
</div>
</div>
<div class="row" ng-if="selectedTemplate"> <div class="row" ng-if="selectedTemplate">
<div class="col-lg-12 col-md-12 col-xs-12"> <div class="col-lg-12 col-md-12 col-xs-12">
<rd-widget> <rd-widget>
<rd-widget-header icon="fa-cogs" title="Configuration"></rd-widget-header> <rd-widget-custom-header icon="selectedTemplate.logo" title="selectedTemplate.image">
</rd-widget-custom-header>
<rd-widget-body classes="padding"> <rd-widget-body classes="padding">
<form class="form-horizontal"> <form class="form-horizontal">
<div class="form-group" ng-if="globalNetworkCount === 0 && !swarm_mode"> <div class="form-group" ng-if="globalNetworkCount === 0 && !swarm_mode">
@ -71,6 +51,12 @@
<input ng-if="!var.type || !var.type === 'container'" type="text" class="form-control" ng-model="var.value" id="field_{{ $index }}"> <input ng-if="!var.type || !var.type === 'container'" type="text" class="form-control" ng-model="var.value" id="field_{{ $index }}">
</div> </div>
</div> </div>
<div class="form-group">
<div class="col-sm-12">
<button type="button" class="btn btn-default btn-sm" ng-disabled="!formValues.network" ng-click="createTemplate()">Create</button>
<i id="createContainerSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
</div>
</div>
</form> </form>
</rd-widget-body> </rd-widget-body>
</rd-widget> </rd-widget>
@ -78,10 +64,26 @@
</div> </div>
<div class="row" ng-if="selectedTemplate"> <div class="row" ng-if="selectedTemplate">
<div class="col-lg-12 col-md-12 col-xs-12" style="text-align: center;">
<div>
<i id="createContainerSpinner" class="fa fa-cog fa-3x fa-spin" style="margin-bottom: 5px; display: none;"></i>
</div> </div>
<button type="button" class="btn btn-default btn-lg" ng-disabled="!formValues.network" ng-click="createTemplate()">Create</button>
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12">
<rd-widget>
<rd-widget-header icon="fa-rocket" title="Available templates">
<div class="pull-right">
<i id="loadTemplatesSpinner" class="fa fa-cog fa-2x fa-spin" style="margin-top: 5px;"></i>
</div>
</rd-widget-header>
<rd-widget-body classes="padding">
<div class="template-list">
<div ng-repeat="tpl in templates" class="container-template hvr-grow" id="template_{{ $index }}" ng-click="selectTemplate($index)">
<img class="logo" ng-src="{{ tpl.logo }}" />
<div class="title">{{ tpl.title }}</div>
<div class="description">{{ tpl.description }}</div>
</div>
</div>
</rd-widget-body>
</rd-widget>
</div> </div>
</div> </div>

15
app/directives/widget-custom-header.js Normal file
View File

@ -0,0 +1,15 @@
angular
.module('portainer')
.directive('rdWidgetCustomHeader', function rdWidgetCustomHeader() {
var directive = {
requires: '^rdWidget',
scope: {
title: '=',
icon: '='
},
transclude: true,
template: '<div class="widget-header"><div class="row"><span class="pull-left"><img class="custom-header-ico" ng-src="{{icon}}"></img> <span class="small text-muted"> {{title}} </span> </span><span class="pull-right col-xs-6 col-sm-4" ng-transclude></span></div></div>',
restrict: 'E'
};
return directive;
});

5
assets/css/app.css
View File

@ -216,6 +216,11 @@ input[type="radio"] {
flex-wrap: wrap; flex-wrap: wrap;
} }
.custom-header-ico {
max-width: 16px;
max-height: 16px;
}
.container-template { .container-template {
font-size: 1em; font-size: 1em;
width: 256px; width: 256px;