yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Final tweaks to TreeSource picker

Browse Source 
Better help text, polish icons and margins, made sure it toggles UI
correctly for each type of tree
This commit is contained in:
perploug
2014-01-29 11:21:54 +01:00
parent 3e5553d9b0
commit 9ce79e98a3
2 changed files with 67 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/Umbraco.Web.UI.Client/src/views/prevalueeditors/treesource.controller.js
View File

@@ -37,10 +37,13 @@ angular.module('umbraco')
};
$scope.clear = function() {
$scope.model.value.id = undefined;
$scope.node = undefined;
$scope.model.value.id = undefined;
$scope.node = undefined;
$scope.model.value.query = undefined;
};
//we always need to ensure we dont submit anything broken
$scope.$on("formSubmitting", function (ev, args) {
if($scope.model.value.type === "member"){
$scope.model.value.id = -1;

101
src/Umbraco.Web.UI.Client/src/views/prevalueeditors/treesource.html
View File

@@ -1,54 +1,77 @@
<div ng-controller="Umbraco.PrevalueEditors.TreeSourceController" class="umb-editor umb-contentpicker">
<select ng-model="model.value.type" class="umb-editor">
<select ng-model="model.value.type" class="umb-editor" ng-change="clear()">
<option value="content">Content</option>
<option value="media">Media</option>
<option value="member">Members</option>
</select>
<br/><br/>
<div ng-hide="model.value.type !== 'content'">
<ul class="unstyled list-icons" ng-if="node" >
<li>
<i class="icon icon-delete red hover-show pull-right" ng-click="clear()"></i>
<i class="icon {{node.icon}} hover-hide"></i>
<a href prevent-default ng-click="openContentPicker()" >{{node.name}}</a>
</li>
</ul>
<div ng-show="multipicker || !node">
<span ng-hide="showSearch || model.value.query">
<ul class="unstyled list-icons" ng-if="node" style="margin-top: 30px">
<li>
<i class="icon icon-delete red hover-show pull-right" ng-click="clear()"></i>
<i class="icon {{node.icon}} hover-hide"></i>
<a href prevent-default ng-click="openContentPicker()" >{{node.name}}</a>
</li>
</ul>
<div ng-if="!node && model.value.type !== 'member'" style="margin-top: 30px">
<span ng-hide="showSearch || model.value.query">
<ul class="unstyled list-icons">
<li>
<i class="icon icon-add blue"></i>
<a href ng-click="openContentPicker()" prevent-default>
<localize key="general_choose">Choose</localize>...
<localize key="general_choose">Choose a root node</localize>...
</a>
<br/>
<a href ng-click="showSearch = true">Enter query</a>
</span>
<span ng-show="showSearch || model.value.query">
<input type="text"
ng-model="model.value.query"
class="umb-editor umb-textstring"
placeholder="Enter query">
</li>
<li ng-show="model.value.type == 'content'">
<i class="icon icon-search"></i>
<a href ng-click="showSearch = true">Query for root node with xpath</a>
</li>
</ul>
</span>
<br/>
<small>
Available placeholders: <br/>
<code>$current</code>: current page or closest found ancestor<br/>
<code>$parent</code>: parent page or closest found ancestor<br/>
<code>$root</code>: root of the content tree<br/>
<code>$site</code>: Ancestor node at level 1 <br/>
<span ng-show="showSearch || model.value.query">
<input type="text"
ng-model="model.value.query"
class="umb-editor umb-textstring"
placeholder="Enter xpath query">
<ul class="unstyled list-icons" style="margin-top: 15px">
<li style="max-width: 600px">
<i class="icon icon-help-alt"></i>
<a href ng-click="showHelp = 1" prevent-default>
Show xpath query help
</a>
<small ng-if="showHelp">
<p>
Use Xpath query to set a root node on the tree, either based on a search from the root of the content tree, or by using a context-aware placeholder.
</p>
<p>
Placeholders finds the nearest published ID and runs its query from there. so for instance:
<pre>$parent/newsArticle</pre>
Will try to get the parent if available, but will then fall back to the nearest ancestor and query for all news articles there.
</p>
<p>
Available placeholders: <br/>
<code>$current</code>: current page or closest found ancestor<br/>
<code>$parent</code>: parent page or closest found ancestor<br/>
<code>$root</code>: root of the content tree<br/>
<code>$site</code>: Ancestor node at level 1 <br/>
</p>
</small>
<a href ng-click="showSearch = false; model.value.query = ''; openContentPicker()"> ...Or pick a node</a>
</span>
</div>
</li>
<li>
<i class="icon icon-delete red"></i>
<a href ng-click="showSearch = false; model.value.query = ''"> Cancel and clear query</a>
</li>
</ul>
</span>
</div>
</div>