add extra markup for the infinite editor

This commit is contained in:
Mads Rasmussen
2018-08-01 19:01:44 +02:00
parent 0a31ac6ef3
commit 3e36e06d77
2 changed files with 88 additions and 54 deletions

View File

@@ -26,6 +26,12 @@ function MacroPickerController($scope, entityResource, macroResource, umbPropEdi
}
};
$scope.close = function() {
if($scope.model.close) {
$scope.model.close();
}
}
/** changes the view to edit the params of the selected macro */
/** if there is pnly one macro, and it has parameters - editor can skip selecting the Macro **/
function editParams(insertIfNoParameters) {

View File

@@ -1,63 +1,91 @@
<div ng-controller="Umbraco.Overlays.MacroPickerController">
<div ng-switch="wizardStep">
<umb-editor-view>
<umb-editor-header
name="model.title"
name-locked="true"
hide-alias="true"
hide-icon="true"
hide-description="true">
</umb-editor-header>
<div ng-switch-when="macroSelect">
<umb-editor-container>
<umb-box>
<umb-box-content>
<div ng-switch="wizardStep">
<div class="form-search">
<i class="icon-search"></i>
<input type="text"
style="width: 100%"
ng-model="searchTerm"
class="umb-search-field search-query input-block-level"
localize="placeholder"
placeholder="@placeholders_filter"
umb-auto-focus
no-dirty-check />
</div>
<div ng-switch-when="macroSelect">
<div class="form-search">
<i class="icon-search"></i>
<input type="text"
style="width: 100%"
ng-model="searchTerm"
class="umb-search-field search-query input-block-level"
localize="placeholder"
placeholder="@placeholders_filter"
umb-auto-focus
no-dirty-check />
</div>
<ul class="umb-card-grid">
<li ng-repeat="availableItem in macros | orderBy:'name' | filter:searchTerm"
ng-click="selectMacro(availableItem)"
class="-three-in-row">
<a class="umb-card-grid-item" href="" title="{{ availableItem.name }}">
<i class="icon-settings-alt"></i>
{{ availableItem.name }}
</a>
</li>
</ul>
<umb-empty-state ng-if="nomacros"
position="center">
<localize key="defaultdialogs_noMacros">
There are no macros available to insert
</localize>
</umb-empty-state>
</div>
<div ng-switch-when="paramSelect">
<h5>{{model.selectedMacro.name}}</h5>
<ul class="unstyled">
<li ng-repeat="param in model.macroParams">
<ng-form name="parameterForm">
<umb-control-group label="{{param.name}}">
<umb-property-editor model="param"></umb-property-editor>
</umb-control-group>
</ng-form>
</li>
</ul>
<umb-empty-state ng-if="noMacroParams"
position="center">
<localize key="defaultdialogs_noMacroParams">There are no parameters for this macro</localize>
</umb-empty-state>
</div>
</div>
</umb-box-content>
</umb-box>
</umb-editor-container>
<ul class="umb-card-grid">
<li ng-repeat="availableItem in macros | orderBy:'name' | filter:searchTerm"
ng-click="selectMacro(availableItem)"
class="-three-in-row">
<a class="umb-card-grid-item" href="" title="{{ availableItem.name }}">
<i class="icon-settings-alt"></i>
{{ availableItem.name }}
</a>
</li>
</ul>
<umb-editor-footer>
<umb-editor-footer-content-right>
<umb-button
type="button"
button-style="link"
label-key="general_close"
action="close()">
</umb-button>
</umb-editor-footer-content-right>
</umb-editor-footer>
<umb-empty-state ng-if="nomacros"
position="center">
<localize key="defaultdialogs_noMacros">
There are no macros available to insert
</localize>
</umb-empty-state>
</div>
<div ng-switch-when="paramSelect">
<h5>{{model.selectedMacro.name}}</h5>
<ul class="unstyled">
<li ng-repeat="param in model.macroParams">
<ng-form name="parameterForm">
<umb-control-group label="{{param.name}}">
<umb-property-editor model="param"></umb-property-editor>
</umb-control-group>
</ng-form>
</li>
</ul>
<umb-empty-state ng-if="noMacroParams"
position="center">
<localize key="defaultdialogs_noMacroParams">There are no parameters for this macro</localize>
</umb-empty-state>
</div>
</div>
</umb-editor-view>
</div>