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

Improves media drag n drop sorting

Browse Source
This commit is contained in:
perploug
2013-11-18 14:58:29 +01:00
parent 9ae9a4e52d
commit da2f3aefe6
8 changed files with 161 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Umbraco.Web.UI.Client/lib/angular/angular-ui-sortable.js vendored
View File

@@ -1 +1 @@
angular.module("ui.sortable",[]).value("uiSortableConfig",{}).directive("uiSortable",["uiSortableConfig",function(e){return{require:"?ngModel",link:function(t,n,r,i){function s(e,t){if(t&&typeof t==="function"){return function(n,r){e(n,r);t(n,r)}}return e}var o={};var u={receive:null,remove:null,start:null,stop:null,update:null};angular.extend(o,e);if(i){i.$render=function(){n.sortable("refresh")};u.start=function(e,t){t.item.sortable={index:t.item.index()}};u.update=function(e,t){t.item.sortable.resort=i};u.receive=function(e,t){t.item.sortable.relocate=true;i.$modelValue.splice(t.item.index(),0,t.item.sortable.moved)};u.remove=function(e,t){if(i.$modelValue.length===1){t.item.sortable.moved=i.$modelValue.splice(0,1)[0]}else{t.item.sortable.moved=i.$modelValue.splice(t.item.sortable.index,1)[0]}};u.stop=function(e,n){if(n.item.sortable.resort&&!n.item.sortable.relocate){var r,i;i=n.item.sortable.index;r=n.item.index();n.item.sortable.resort.$modelValue.splice(r,0,n.item.sortable.resort.$modelValue.splice(i,1)[0])}if(n.item.sortable.resort||n.item.sortable.relocate){t.$apply()}}}t.$watch(r.uiSortable,function(e,t){angular.forEach(e,function(e,t){if(u[t]){e=s(u[t],e)}n.sortable("option",t,e)})},true);angular.forEach(u,function(e,t){o[t]=s(e,o[t])});n.sortable(o)}}}])
angular.module("ui.sortable",[]).value("uiSortableConfig",{}).directive("uiSortable",["uiSortableConfig",function(e){return{require:"?ngModel",link:function(t,n,r,i){function s(e,t){if(t&&typeof t==="function"){return function(n,r){e(n,r);t(n,r)}}return e}var o={};var u={receive:null,remove:null,start:null,stop:null,update:null};angular.extend(o,e);if(i){i.$render=function(){n.sortable("refresh")};u.start=function(e,t){t.item.sortable={index:t.item.index()}};u.update=function(e,t){t.item.sortable.resort=i};u.receive=function(e,t){t.item.sortable.relocate=true;i.$modelValue.splice(t.item.index(),0,t.item.sortable.moved)};u.remove=function(e,t){if(i.$modelValue.length===1){t.item.sortable.moved=i.$modelValue.splice(0,1)[0]}else{t.item.sortable.moved=i.$modelValue.splice(t.item.sortable.index,1)[0]}};u.stop=function(e,n){if(n.item.sortable.resort&&!n.item.sortable.relocate){var r,i;i=n.item.sortable.index;r=n.item.index();n.item.sortable.resort.$modelValue.splice(r,0,n.item.sortable.resort.$modelValue.splice(i,1)[0])}if(n.item.sortable.resort||n.item.sortable.relocate){t.$apply()}}}t.$watch(r.uiSortable,function(e,t){angular.forEach(e,function(e,t){if(u[t]){e=s(u[t],e)}n.sortable("option",t,e);n.disableSelection()})},true);angular.forEach(u,function(e,t){o[t]=s(e,o[t])});n.sortable(o);n.disableSelection()}}}])

6
src/Umbraco.Web.UI.Client/lib/jquery/jquery-ui-1.10.3.custom.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

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

@@ -14,14 +14,14 @@
}
.umb-modal .umb-editor {
width: 95%;
width: 95%;
}
.umb-dialog .umb-editor {
width: 95%;
width: 95%;
}
.umb-dialog .umb-control-group .help-block {
width: 95%;
width: 95%;
}
.umb-codeeditor{
@@ -37,21 +37,21 @@
.umb-contentpicker li a:hover .hover-show{display: inline-block;}
.umb-contentpicker-popover .search-holder {
padding: 10px;
padding: 10px;
}
/* CODEMIRROR DATATYPE */
div.umb-codeeditor {
border: 1px solid #e8e8e8;
border: 1px solid #e8e8e8;
}
div.umb-codeeditor .umb-el-wrap {
padding: 0px;
padding: 0px;
}
div.umb-codeeditor .umb-btn-toolbar {
padding: 0px;
margin: 0px;
border-bottom: #e8e8e8 1px solid;
background: #f7f7f7
padding: 0px;
margin: 0px;
border-bottom: #e8e8e8 1px solid;
background: #f7f7f7
}
@@ -65,8 +65,8 @@ div.umb-codeeditor .umb-btn-toolbar {
/* Special case to support helviticons for the tiny mce button controls */
.mce-ico.mce-i-custom[class^="icon-"],
.mce-ico.mce-i-custom[class*=" icon-"] {
font-family: icomoon;
font-size:16px !important;
font-family: icomoon;
font-size:16px !important;
}
@@ -74,13 +74,13 @@ div.umb-codeeditor .umb-btn-toolbar {
// Color picker
// --------------------------------------------------
ul.color-picker li {
padding: 2px;
margin: 3px;
border: 2px solid transparent;
width: 60px;
padding: 2px;
margin: 3px;
border: 2px solid transparent;
width: 60px;
}
ul.color-picker li.active {
border: 2px dashed #d9d9d9;
border: 2px dashed #d9d9d9;
}
ul.color-picker li a {
height: 50px;
@@ -89,8 +89,8 @@ ul.color-picker li a {
}
.control-group.color-picker-preval .thumbnail {
width:30px;
border:none;
width:30px;
border:none;
}
@@ -108,50 +108,70 @@ ul.color-picker li a {
text-decoration: none;
}
//wtf? where does this opacity crap comes from?
.umb-mediapicker *:hover{
opacity: 1 !important;
.umb-mediapicker .picked-image{
position: absolute;
bottom: 10px;
right: 10px;
opacity: 0.5;
font-size: 24px;
color: red;
background: white;
line-height: 36px;
text-align: center;
-moz-border-radius: 15px;
border-radius: 15px;
height: 32px;
width: 32px;
overflow: hidden;
display: none;
text-decoration: none;
}
.umb-mediapicker .picked-image:hover:before{
content: "\e1a4";
font-family: Icomoon;
position: absolute;
bottom: 10px;
right: 10px;
opacity: 0.5;
.umb-thumbnails{
position: relative;
}
font-size: 24px;
color: red;
background: white;
line-height: 36px;
text-align: center;
-moz-border-radius: 15px;
border-radius: 15px;
height: 32px;
width: 32px;
overflow: hidden;
display: block;
}
.umb-thumbnails i{margin: auto;}
.umb-thumbnails a{
outline: none;
border:none !important;
box-shadow:none !important;
}
.umb-thumbnails .thumbnail {
.umb-sortable-thumbnails {
list-style-type: none;
margin: 0;
padding: 0;
border:none;
}
display: block;
width: 520px;
}
.umb-thumbnails > li {
margin: 1px;
text-align: center;
}
.umb-thumbnails i{margin: auto;}
.umb-thumbnails a{
outline: none;
border:none !important;
box-shadow:none !important;
}
.umb-sortable-thumbnails li{
display: inline-block;
border: 1px solid @grayLighter;
padding: 2px;
background: white;
margin: 5px;
position: relative;
}
.umb-sortable-thumbnails li:hover a{
display: block;
}
.umb-sortable-thumbnails li img
{
max-width:100%;
max-height:100%;
margin:auto;
display:block;
}
//
@@ -167,16 +187,16 @@ ul.color-picker li a {
}
.umb-upload-drop-zone .info, .umb-upload-button-big{
display: block;
padding: 20px;
opacity: 1;
display: block;
padding: 20px;
opacity: 1;
border: 1px dashed @grayLight;
background: none;
text-align: center;
font-size: 14px;
border: 1px dashed @grayLight;
background: none;
text-align: center;
font-size: 14px;
color: @grayLight;
color: @grayLight;
}
.umb-upload-button-big:hover{color: @grayLight;}
@@ -200,7 +220,7 @@ ul.color-picker li a {
// --------------------------------------------------
.umb-photo-folder .picrow{
overflow-y: hidden;
overflow-y: hidden;
}
.umb-photo-folder .picrow a, .umb-photo-preview{
@@ -235,76 +255,76 @@ ul.color-picker li a {
}
.umb-photo-folder .selected:before{
content: "\e165";
font-family: Icomoon;
position: absolute;
bottom: 10px;
right: 10px;
content: "\e165";
font-family: Icomoon;
position: absolute;
bottom: 10px;
right: 10px;
font-size: 24px;
color: black;
opacity: 0.5;
background: white;
line-height: 36px;
text-align: center;
-moz-border-radius: 15px;
border-radius: 15px;
font-size: 24px;
color: black;
opacity: 0.5;
background: white;
height: 32px;
width: 32px;
overflow: hidden;
display: block;
}
line-height: 36px;
text-align: center;
-moz-border-radius: 15px;
border-radius: 15px;
height: 32px;
width: 32px;
overflow: hidden;
display: block;
}
//
// File upload
// --------------------------------------------------
.umb-fileupload .preview {
border-radius: 5px;
border: 1px solid #a0a0a0;
padding: 3px;
background: #efefef;
float: left;
margin-right: 30px;
margin-bottom: 30px
}
.umb-fileupload ul {
list-style: none;
vertical-align: middle;
margin-bottom: 0px
}
.umb-fileupload label {
vertical-align: middle;
padding-left: 7px;
font-weight: normal
}
.umb-fileupload .preview-file {
color: #666;
height: 45px;
width: 55px;
text-align: center;
text-transform: uppercase;
font-size: 10px;
padding-top: 27px
}
.umb-fileupload input {
font-size: 12px
}
//
// File upload
// --------------------------------------------------
.umb-fileupload .preview {
border-radius: 5px;
border: 1px solid #a0a0a0;
padding: 3px;
background: #efefef;
float: left;
margin-right: 30px;
margin-bottom: 30px
}
.umb-fileupload ul {
list-style: none;
vertical-align: middle;
margin-bottom: 0px
}
.umb-fileupload label {
vertical-align: middle;
padding-left: 7px;
font-weight: normal
}
.umb-fileupload .preview-file {
color: #666;
height: 45px;
width: 55px;
text-align: center;
text-transform: uppercase;
font-size: 10px;
padding-top: 27px
}
.umb-fileupload input {
font-size: 12px
}
//
// Member group picker
// --------------------------------------------------
.umb-member-group-box {
width: 45%;
width: 45%;
}
.umb-member-group-box:nth-child(1){
float:left;
float:left;
}
.umb-member-group-box:nth-child(2){
float:right;
float:right;
}
//

2
src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.controller.js
View File

@@ -59,7 +59,7 @@ angular.module('umbraco').controller("Umbraco.PropertyEditors.MediaPickerControl
};
$scope.sortableOptions = {
update: function(e, ui) {
update: function(e, ui) {
var r = [];
angular.forEach($scope.renderModel, function(value, key){
r.push(value.id);

12
src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html
View File

@@ -1,15 +1,15 @@
<div class="umb-editor umb-mediapicker" ng-controller="Umbraco.PropertyEditors.MediaPickerController">
<ul ui-sortable="sortableOptions" ng-model="images" class="thumbnails umb-thumbnails">
<li class="umb-thumbnail thumbnail span3" style="width: 124px;" ng-repeat="image in images">
<a href class="picked-image" ng-click="remove($index)">
<ul ui-sortable="sortableOptions" ng-model="images" class="umb-sortable-thumbnails">
<li style="width: 120px; height: 100px; overflow: hidden;" ng-repeat="image in images">
<img ng-src="{{image.src}}" alt="">
</a>
<a href class="picked-image" ng-click="remove($index)"><i class="icon icon-delete"></i></a>
</li>
</ul>
<ul class="thumbnails umb-thumbnails" ng-if="showAdd()">
<li class="umb-thumbnail thumbnail">
<ul class="umb-sortable-thumbnails" ng-if="showAdd()">
<li>
<a href="#" class="add-link" ng-click="add()" prevent-default>
<i class="icon icon-add large"></i>
</a>

2
src/Umbraco.Web.UI/umbraco/config/lang/en.xml
View File

@@ -255,7 +255,7 @@
<key alias="newtab">New tab</key>
<key alias="tab">Tab</key>
<key alias="thumbnail">Thumbnail</key>
<key alias="iscontainercontenttype">Use as container content type</key>
<key alias="hasListView">Enable list view</key>
</area>
<area alias="editdatatype">
<key alias="addPrevalue">Add prevalue</key>

7
src/Umbraco.Web/UI/JavaScript/JsInitialize.js
View File

@@ -1,10 +1,13 @@
[
'lib/jquery/jquery-ui-1.10.3.custom.min.js',
/*
'lib/jquery/jquery-ui-1.10.3.custom.min.js',
'lib/jquery/jquery.ui.core.min.js',
'lib/jquery/jquery.ui.widget.min.js',
'lib/jquery/jquery.ui.mouse.min.js',
'lib/jquery/jquery.ui.sortable.min.js',
'lib/moment.min.js',
*/
'lib/angular/1.1.5/angular-cookies.min.js',
'lib/angular/1.1.5/angular-mobile.js',

2
src/Umbraco.Web/umbraco.presentation/umbraco/controls/ContentTypeControlNew.ascx.cs
View File

@@ -104,7 +104,7 @@ namespace umbraco.controls
pp_description.Text = ui.Text("editcontenttype", "description", Security.CurrentUser);
pp_icon.Text = ui.Text("icon", Security.CurrentUser);
pp_isContainer.Text = ui.Text("editcontenttype", "iscontainercontenttype", Security.CurrentUser);
pp_isContainer.Text = ui.Text("editcontenttype", "hasListView", Security.CurrentUser);
// we'll disable this...
if (!Page.IsPostBack && _contentType.MasterContentType != 0)