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

Moves the folder selector on the mediapicker

Browse Source 
To the item itself, instead of external button
This commit is contained in:
perploug
2013-11-19 16:26:07 +01:00
parent b6bca084c5
commit 863c7d11b7
4 changed files with 56 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/Umbraco.Web.UI.Client/src/less/property-editors.less
View File

@@ -231,14 +231,16 @@ ul.color-picker li a {
.umb-photo-folder .picrow{
overflow-y: hidden;
position: relative;
}
.umb-photo-folder .picrow a, .umb-photo-preview{
.umb-photo-folder .picrow div, .umb-photo-preview{
margin: 0px;
padding: 0px;
border: none;
display: inline-block;
vertical-align: top;
position: relative;
}
.umb-photo-folder a:hover{text-decoration: none}
@@ -251,6 +253,21 @@ ul.color-picker li a {
text-decoration: none;
}
//this is a temp hack, to provide selectors in the dialog:
.umb-dialogs-mediapicker .umb-photo-folder .pic:hover .selector-overlay{
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
padding: 5px;
background: black;
z-index: 100;
display: block;
text-align: center;
color: white;
opacity: 0.4;
}
.umb-photo-folder .umb-non-thumbnail i{
color: @grayLight;
font-size: 70px;
@@ -267,6 +284,7 @@ ul.color-picker li a {
.umb-photo-folder .selected:before{
content: "\e165";
font-family: Icomoon;
position: absolute;
bottom: 10px;
right: 10px;
@@ -285,6 +303,7 @@ ul.color-picker li a {
width: 32px;
overflow: hidden;
display: block;
z-index: 100;
}

12
src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.controller.js
View File

@@ -36,6 +36,10 @@ angular.module("umbraco")
$scope.gotoFolder = function(folder) {
if(!folder){
folder = {id: -1, name: "Media", icon: "icon-folder"};
}
if (folder.id > 0) {
entityResource.getAncestors(folder.id, "media")
.then(function(anc) {
@@ -72,7 +76,7 @@ angular.module("umbraco")
$scope.options.formData.currentFolder = folder.id;
$scope.currentFolder = folder;
};
@@ -80,9 +84,9 @@ angular.module("umbraco")
$scope.gotoFolder($scope.options.formData.currentFolder);
});
$scope.clickHandler = function(image, ev) {
$scope.clickHandler = function(image, ev, select) {
if (image.contentTypeAlias.toLowerCase() == 'folder') {
if (image.contentTypeAlias.toLowerCase() == 'folder' && !select) {
$scope.gotoFolder(image);
}else{
eventsService.publish("Umbraco.Dialogs.MediaPickerController.Select", image);
@@ -124,5 +128,5 @@ angular.module("umbraco")
};
//default root item
$scope.gotoFolder({id: -1, name: "Media", icon: "icon-folder"});
$scope.gotoFolder();
});

15
src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.html
View File

@@ -1,7 +1,7 @@
<form ng-controller="Umbraco.Dialogs.MediaPickerController" id="fileupload" method="POST" enctype="multipart/form-data"
data-file-upload="options" data-file-upload-progress="" data-ng-class="{'fileupload-processing': processing() || loadingFiles}">
<div class="umb-panel">
<div class="umb-panel umb-dialogs-mediapicker">
<div class="umb-panel-header">
<div class="umb-el-wrap umb-panel-buttons">
@@ -26,10 +26,10 @@ data-file-upload="options" data-file-upload-progress="" data-ng-class="{'fileupl
<div class="row">
<ul class="breadcrumb span12">
<li><a href ng-click="gotoFolder(-1)" prevent-default>Media</a> / </li>
<li><a href ng-click="gotoFolder()" prevent-default>Media</a> / </li>
<li ng-repeat="item in path">
<a href ng-click="gotoFolder(item.id)" prevent-default>{{item.name}}</a> /
<a href ng-click="gotoFolder(item)" prevent-default>{{item.name}}</a> /
</li>
<li>
@@ -48,7 +48,7 @@ data-file-upload="options" data-file-upload-progress="" data-ng-class="{'fileupl
</div>
</div>
<div class="umb-panel-body umb-scrollable" auto-scale="70">
<div class="umb-panel-body with-footer">
<div style="height: 10px; margin: 10px 0px 10px 0px" class="umb-loader"
ng-hide="active() == 0"></div>
@@ -68,13 +68,6 @@ data-file-upload="options" data-file-upload-progress="" data-ng-class="{'fileupl
<localize key="general_cancel">Cancel</localize>
</a>
<button
class="btn"
ng-hide="onlyImages || dialogOptions.multiPicker"
ng-click="selectFolder(currentFolder)">
<localize key="buttons_selectCurrentFolder">Select current folder</localize>
</button>
<button
class="btn btn-primary"
ng-show="dialogOptions.multiPicker"

42
src/Umbraco.Web.UI.Client/src/views/directives/html/umb-photo-folder.html
View File

@@ -1,24 +1,30 @@
<div class="umb-photo-folder">
<div class="picrow" ng-repeat="row in rows">
<a
href="#media/media/edit/{{img.id}}"
ng-click="clickHandler(img, $event)"
ng-switch="img.thumbnail"
ng-repeat="img in row.photos"
style="margin: 0px; padding: 0px; border: none; display: inline-block"
ng-class="img.cssclass"
title="{{img.name}}">
<div class="pic" ng-class="img.cssclass" style="margin: 0px; padding: 0px; border: none; display: inline-block; overflow: hidden" ng-style="img.style" ng-repeat="img in row.photos">
<a
href="#media/media/edit/{{img.id}}"
ng-click="clickHandler(img, $event, false)"
ng-switch="img.thumbnail"
title="{{img.name}}">
<div ng-style="img.style" class="umb-non-thumbnail" ng-switch-when="none">
<i class="icon large {{img.icon}}"></i>
{{img.name}}
</div>
<div ng-style="img.style" class="umb-non-thumbnail" ng-switch-when="none">
<i class="icon large {{img.icon}}"></i>
{{img.name}}
</div>
<img class="umb-photo"
ng-switch-default
ng-src="{{img.thumbnail}}"
ng-style="img.style"
alt="{{img.name}}"/>
</a>
<a href ng-click="clickHandler(img, $event, true)" ng-show="img.contentTypeAlias === 'Folder'" class="selector-overlay">
Select
</a>
<div>
</div>
<img class="umb-photo"
ng-switch-default
ng-src="{{img.thumbnail}}"
ng-style="img.style"
alt="{{img.name}}"/>
</a>
</div>
</div>