",
+ options: {
+ disabled: false,
+
+ // callbacks
+ create: null
+ },
+ _createWidget: function( options, element ) {
+ element = $( element || this.defaultElement || this )[ 0 ];
+ this.element = $( element );
+ this.uuid = uuid++;
+ this.eventNamespace = "." + this.widgetName + this.uuid;
+ this.options = $.widget.extend( {},
+ this.options,
+ this._getCreateOptions(),
+ options );
+
+ this.bindings = $();
+ this.hoverable = $();
+ this.focusable = $();
+
+ if ( element !== this ) {
+ $.data( element, this.widgetFullName, this );
+ this._on( true, this.element, {
+ remove: function( event ) {
+ if ( event.target === element ) {
+ this.destroy();
+ }
+ }
+ });
+ this.document = $( element.style ?
+ // element within the document
+ element.ownerDocument :
+ // element is window or document
+ element.document || element );
+ this.window = $( this.document[0].defaultView || this.document[0].parentWindow );
+ }
+
+ this._create();
+ this._trigger( "create", null, this._getCreateEventData() );
+ this._init();
+ },
+ _getCreateOptions: $.noop,
+ _getCreateEventData: $.noop,
+ _create: $.noop,
+ _init: $.noop,
+
+ destroy: function() {
+ this._destroy();
+ // we can probably remove the unbind calls in 2.0
+ // all event bindings should go through this._on()
+ this.element
+ .unbind( this.eventNamespace )
+ // 1.9 BC for #7810
+ // TODO remove dual storage
+ .removeData( this.widgetName )
+ .removeData( this.widgetFullName )
+ // support: jquery <1.6.3
+ // http://bugs.jquery.com/ticket/9413
+ .removeData( $.camelCase( this.widgetFullName ) );
+ this.widget()
+ .unbind( this.eventNamespace )
+ .removeAttr( "aria-disabled" )
+ .removeClass(
+ this.widgetFullName + "-disabled " +
+ "ui-state-disabled" );
+
+ // clean up events and states
+ this.bindings.unbind( this.eventNamespace );
+ this.hoverable.removeClass( "ui-state-hover" );
+ this.focusable.removeClass( "ui-state-focus" );
+ },
+ _destroy: $.noop,
+
+ widget: function() {
+ return this.element;
+ },
+
+ option: function( key, value ) {
+ var options = key,
+ parts,
+ curOption,
+ i;
+
+ if ( arguments.length === 0 ) {
+ // don't return a reference to the internal hash
+ return $.widget.extend( {}, this.options );
+ }
+
+ if ( typeof key === "string" ) {
+ // handle nested keys, e.g., "foo.bar" => { foo: { bar: ___ } }
+ options = {};
+ parts = key.split( "." );
+ key = parts.shift();
+ if ( parts.length ) {
+ curOption = options[ key ] = $.widget.extend( {}, this.options[ key ] );
+ for ( i = 0; i < parts.length - 1; i++ ) {
+ curOption[ parts[ i ] ] = curOption[ parts[ i ] ] || {};
+ curOption = curOption[ parts[ i ] ];
+ }
+ key = parts.pop();
+ if ( value === undefined ) {
+ return curOption[ key ] === undefined ? null : curOption[ key ];
+ }
+ curOption[ key ] = value;
+ } else {
+ if ( value === undefined ) {
+ return this.options[ key ] === undefined ? null : this.options[ key ];
+ }
+ options[ key ] = value;
+ }
+ }
+
+ this._setOptions( options );
+
+ return this;
+ },
+ _setOptions: function( options ) {
+ var key;
+
+ for ( key in options ) {
+ this._setOption( key, options[ key ] );
+ }
+
+ return this;
+ },
+ _setOption: function( key, value ) {
+ this.options[ key ] = value;
+
+ if ( key === "disabled" ) {
+ this.widget()
+ .toggleClass( this.widgetFullName + "-disabled ui-state-disabled", !!value )
+ .attr( "aria-disabled", value );
+ this.hoverable.removeClass( "ui-state-hover" );
+ this.focusable.removeClass( "ui-state-focus" );
+ }
+
+ return this;
+ },
+
+ enable: function() {
+ return this._setOption( "disabled", false );
+ },
+ disable: function() {
+ return this._setOption( "disabled", true );
+ },
+
+ _on: function( suppressDisabledCheck, element, handlers ) {
+ var delegateElement,
+ instance = this;
+
+ // no suppressDisabledCheck flag, shuffle arguments
+ if ( typeof suppressDisabledCheck !== "boolean" ) {
+ handlers = element;
+ element = suppressDisabledCheck;
+ suppressDisabledCheck = false;
+ }
+
+ // no element argument, shuffle and use this.element
+ if ( !handlers ) {
+ handlers = element;
+ element = this.element;
+ delegateElement = this.widget();
+ } else {
+ // accept selectors, DOM elements
+ element = delegateElement = $( element );
+ this.bindings = this.bindings.add( element );
+ }
+
+ $.each( handlers, function( event, handler ) {
+ function handlerProxy() {
+ // allow widgets to customize the disabled handling
+ // - disabled as an array instead of boolean
+ // - disabled class as method for disabling individual parts
+ if ( !suppressDisabledCheck &&
+ ( instance.options.disabled === true ||
+ $( this ).hasClass( "ui-state-disabled" ) ) ) {
+ return;
+ }
+ return ( typeof handler === "string" ? instance[ handler ] : handler )
+ .apply( instance, arguments );
+ }
+
+ // copy the guid so direct unbinding works
+ if ( typeof handler !== "string" ) {
+ handlerProxy.guid = handler.guid =
+ handler.guid || handlerProxy.guid || $.guid++;
+ }
+
+ var match = event.match( /^(\w+)\s*(.*)$/ ),
+ eventName = match[1] + instance.eventNamespace,
+ selector = match[2];
+ if ( selector ) {
+ delegateElement.delegate( selector, eventName, handlerProxy );
+ } else {
+ element.bind( eventName, handlerProxy );
+ }
+ });
+ },
+
+ _off: function( element, eventName ) {
+ eventName = (eventName || "").split( " " ).join( this.eventNamespace + " " ) + this.eventNamespace;
+ element.unbind( eventName ).undelegate( eventName );
+ },
+
+ _delay: function( handler, delay ) {
+ function handlerProxy() {
+ return ( typeof handler === "string" ? instance[ handler ] : handler )
+ .apply( instance, arguments );
+ }
+ var instance = this;
+ return setTimeout( handlerProxy, delay || 0 );
+ },
+
+ _hoverable: function( element ) {
+ this.hoverable = this.hoverable.add( element );
+ this._on( element, {
+ mouseenter: function( event ) {
+ $( event.currentTarget ).addClass( "ui-state-hover" );
+ },
+ mouseleave: function( event ) {
+ $( event.currentTarget ).removeClass( "ui-state-hover" );
+ }
+ });
+ },
+
+ _focusable: function( element ) {
+ this.focusable = this.focusable.add( element );
+ this._on( element, {
+ focusin: function( event ) {
+ $( event.currentTarget ).addClass( "ui-state-focus" );
+ },
+ focusout: function( event ) {
+ $( event.currentTarget ).removeClass( "ui-state-focus" );
+ }
+ });
+ },
+
+ _trigger: function( type, event, data ) {
+ var prop, orig,
+ callback = this.options[ type ];
+
+ data = data || {};
+ event = $.Event( event );
+ event.type = ( type === this.widgetEventPrefix ?
+ type :
+ this.widgetEventPrefix + type ).toLowerCase();
+ // the original event may come from any element
+ // so we need to reset the target on the new event
+ event.target = this.element[ 0 ];
+
+ // copy original event properties over to the new event
+ orig = event.originalEvent;
+ if ( orig ) {
+ for ( prop in orig ) {
+ if ( !( prop in event ) ) {
+ event[ prop ] = orig[ prop ];
+ }
+ }
+ }
+
+ this.element.trigger( event, data );
+ return !( $.isFunction( callback ) &&
+ callback.apply( this.element[0], [ event ].concat( data ) ) === false ||
+ event.isDefaultPrevented() );
+ }
+};
+
+$.each( { show: "fadeIn", hide: "fadeOut" }, function( method, defaultEffect ) {
+ $.Widget.prototype[ "_" + method ] = function( element, options, callback ) {
+ if ( typeof options === "string" ) {
+ options = { effect: options };
+ }
+ var hasOptions,
+ effectName = !options ?
+ method :
+ options === true || typeof options === "number" ?
+ defaultEffect :
+ options.effect || defaultEffect;
+ options = options || {};
+ if ( typeof options === "number" ) {
+ options = { duration: options };
+ }
+ hasOptions = !$.isEmptyObject( options );
+ options.complete = callback;
+ if ( options.delay ) {
+ element.delay( options.delay );
+ }
+ if ( hasOptions && $.effects && $.effects.effect[ effectName ] ) {
+ element[ method ]( options );
+ } else if ( effectName !== method && element[ effectName ] ) {
+ element[ effectName ]( options.duration, options.easing, callback );
+ } else {
+ element.queue(function( next ) {
+ $( this )[ method ]();
+ if ( callback ) {
+ callback.call( element[ 0 ] );
+ }
+ next();
+ });
+ }
+ };
+});
+
+}));
diff --git a/src/Umbraco.Web.UI.Client/src/app.dev.js b/src/Umbraco.Web.UI.Client/src/app.dev.js
index 3cd4ef1df6..54b6befd02 100644
--- a/src/Umbraco.Web.UI.Client/src/app.dev.js
+++ b/src/Umbraco.Web.UI.Client/src/app.dev.js
@@ -6,7 +6,8 @@ var app = angular.module('umbraco', [
'umbraco.httpbackend',
'ngCookies',
'ngMobile',
- 'ui.sortable'
+ 'ui.sortable',
+ 'blueimp.fileupload'
]);
/* For Angular 1.2: we need to load in Route, animate and touch seperately
diff --git a/src/Umbraco.Web.UI.Client/src/app.js b/src/Umbraco.Web.UI.Client/src/app.js
index 856cd889f1..c2f834ac5f 100644
--- a/src/Umbraco.Web.UI.Client/src/app.js
+++ b/src/Umbraco.Web.UI.Client/src/app.js
@@ -5,7 +5,9 @@ var app = angular.module('umbraco', [
'umbraco.services',
'ngCookies',
'ngMobile',
- 'ui.sortable'
+
+ 'ui.sortable',
+ 'blueimp.fileupload'
]);
diff --git a/src/Umbraco.Web.UI.Client/src/less/forms.less b/src/Umbraco.Web.UI.Client/src/less/forms.less
index f14465b6d4..4b7ce8f762 100644
--- a/src/Umbraco.Web.UI.Client/src/less/forms.less
+++ b/src/Umbraco.Web.UI.Client/src/less/forms.less
@@ -17,6 +17,30 @@
+/* SEACH FORM */
+.form-search {
+ position: relative;
+ padding: 0;
+}
+.form-search .icon-search {
+ position: absolute;
+ top: 6px;
+ left: 4px;
+ color: @grayLight;
+}
+.form-search input {
+ width: 90%;
+ font-size: @fontSizeLarge;
+ font-weight: 400;
+ color: @gray;
+ border: 1px solid @grayLight;
+ padding: 4px 0px 4px 16px;
+ padding-left: 25px !Important;
+ line-height: 22px;
+ background: @white
+}
+
+
// GENERAL STYLES
// --------------
diff --git a/src/Umbraco.Web.UI.Client/src/less/hacks.less b/src/Umbraco.Web.UI.Client/src/less/hacks.less
index 662203fe6c..6665b4c750 100644
--- a/src/Umbraco.Web.UI.Client/src/less/hacks.less
+++ b/src/Umbraco.Web.UI.Client/src/less/hacks.less
@@ -35,6 +35,47 @@ iframe, .content-column-body {
display: none;
}
+/* JQUERY FILEUPLOAD TEMP STYLES */
+
+.fileinput-button {
+ position: relative;
+ overflow: hidden;
+}
+.fileinput-button input {
+ position: absolute;
+ top: 0;
+ right: 0;
+ margin: 0;
+ opacity: 0;
+ filter: alpha(opacity=0);
+ transform: translate(-300px, 0) scale(4);
+ font-size: 23px;
+ direction: ltr;
+ cursor: pointer;
+}
+.fileupload-buttonbar .btn,
+.fileupload-buttonbar .toggle {
+ margin-bottom: 5px;
+}
+.progress-animated .progress-bar,
+.progress-animated .bar {
+ background: url(../img/progressbar.gif) !important;
+ filter: none;
+}
+.fileupload-loading {
+ float: right;
+ width: 32px;
+ height: 32px;
+ background: url(../img/loading.gif) center no-repeat;
+ background-size: contain;
+ display: none;
+}
+.fileupload-processing .fileupload-loading {
+ display: block;
+}
+
+
+
/* TINYMCE OVERRIDES */
.mce-tinymce{border: 1px solid @grayLight !important; }
diff --git a/src/Umbraco.Web.UI.Client/src/less/modals.less b/src/Umbraco.Web.UI.Client/src/less/modals.less
index 91a38cc36f..bceda6079d 100644
--- a/src/Umbraco.Web.UI.Client/src/less/modals.less
+++ b/src/Umbraco.Web.UI.Client/src/less/modals.less
@@ -1,6 +1,7 @@
/* Modals
// -------------------------*/
+/* Modalcolumn is used for menu panels */
.umb-modalcolumn {
background: #fff;
border-left: #f6f6f6 1px solid;
@@ -20,6 +21,7 @@
top: 13px;
right: 15px
}
+
.umb-modalcolumn .umb-modal-close-icon {
position: absolute;
top: 17px;
@@ -41,11 +43,11 @@
}
+/* umb.dialog is used for the dialogs on the conent tree*/
.umb-dialog {
padding: 20px 20px 0px 20px;
outline: none;
}
-
.umb-dialog .umb-btn-toolbar {
text-align: right;
padding-top: 15px;
@@ -53,11 +55,12 @@
clear: both;
border-top: #efefef 1px solid
}
-
.umb-dialog-body{
overflow:auto;
}
+/* modal and umb-modal are used for right.hand dialogs */
+
.modal.fade.in{border: none !important; border-radius: none !important;}
.umb-modal.fade {
outline: none;
@@ -98,43 +101,28 @@
display: block;
}
+/*Modal default panel styles*/
+.umb-modal .umb-panel-header {
+ padding: 20px;
+ background: @white;
+ border: none;
+ height: auto;
+}
+.umb-modal .umb-panel-body{
+ padding: 0px 20px 0px 20px;
+}
.umb-modal.fade.in.wide {
margin-left: -640px;
width: 640px !important;
}
-
-/* MEDIA PICKER */
-.umb-modal .umb-btn-toolbar {
- margin: 10px 0 0 0
-}
-
-.umb-modal .form-search {
- position: relative;
- padding: 0;
-}
-
-.umb-modal .form-search input {
- padding: 4px 24px;
- width: 350px
- }
-
-.umb-modal .form-search .icon-search {
- position: absolute;
- top: 8px;
- left: 8px;
- color: @grayLight;
-}
-
.umb-modal i {
font-size: 14px;
}
-
.umb-modal .breadcrumb {
background: none;
padding: 0
}
-
.umb-modal .thumbnail {
padding: 0;
border:none;
@@ -185,7 +173,6 @@
/* YSOD */
-
/* These styles are an exact replica of a real .Net YSOD */
.umb-modal .ysod {
font-family:"Verdana";font-weight:normal;font-size: .7em;color:black;padding:5px;
diff --git a/src/Umbraco.Web.UI.Client/src/less/panel.less b/src/Umbraco.Web.UI.Client/src/less/panel.less
index fe7e9096d5..e146b57826 100644
--- a/src/Umbraco.Web.UI.Client/src/less/panel.less
+++ b/src/Umbraco.Web.UI.Client/src/less/panel.less
@@ -3,13 +3,14 @@
.umb-panel{background: white;}
.umb-panel-header {
- border-bottom: 1px solid @grayLight;
- background: @grayLighter;
- margin: 0;
height: 79px;
padding: 20px 20px 0px 20px;
+ background: @grayLighter;
+ border-bottom: 1px solid @grayLight;
+ height: 79px;
}
+
.umb-panel-header h1.umb-headline-editor {
cursor: text;
}
@@ -50,31 +51,6 @@
}
-.umb-panel-header .form-search {
- position: relative;
- padding: 13px 0 0 0
-}
-
-.umb-panel-header .form-search input {
- padding-left: 25px;
- width: 83%;
- font-size: @fontSizeLarge;
- font-weight: 400;
- color: @gray;
- border: 1px solid @grayLight;
- padding: 4px 0px 4px 6px;
- line-height: 22px;
- margin: 4px 0 0 -7px;
- background: @white
- }
-
-.umb-panel-header .form-search .icon-search {
- position: absolute;
- top: 24px;
- left: 8px;
- color: @grayLight;
-}
-
.umb-panel-header i {
font-size: 14px;
}
@@ -91,6 +67,11 @@
clear: both;
}
+.umb-panel-footer {
+ margin: 0;
+ padding: 20px;
+}
+
/* TABS */
diff --git a/src/Umbraco.Web.UI.Client/src/loader.js b/src/Umbraco.Web.UI.Client/src/loader.js
index 25dee79aca..8815a8bffe 100644
--- a/src/Umbraco.Web.UI.Client/src/loader.js
+++ b/src/Umbraco.Web.UI.Client/src/loader.js
@@ -27,8 +27,15 @@ yepnope({
'lib/angular/1.2/angular-mocks.js',
*/
+ /* temporary sorter lib, should be updated */
'lib/angular/angular-ui-sortable.js',
+ /* App-wide file-upload helper */
+ 'lib/jquery/jquery.upload/js/jquery.fileupload.js',
+ 'lib/jquery/jquery.upload/js/jquery.fileupload-process.js',
+ 'lib/jquery/jquery.upload/js/jquery.fileupload-angular.js',
+
+
'lib/bootstrap/js/bootstrap.js',
'lib/underscore/underscore.js',
'lib/umbraco/Extensions.js',
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.controller.js
index dd4861b403..895f278a8f 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.controller.js
@@ -1,8 +1,19 @@
//used for the media picker dialog
angular.module("umbraco")
.controller("Umbraco.Dialogs.MediaPickerController",
- function ($scope, mediaResource, imageHelper) {
+ function ($scope, mediaResource, $log, imageHelper) {
+ $scope.options = {
+ url: "/"
+ };
+
+ $log.log("added");
+
+ $scope.$on('fileuploadadd', function(event, files){
+ $scope.submitFiles();
+ });
+
+ /*
mediaResource.rootMedia()
.then(function(data) {
$scope.images = data;
@@ -11,7 +22,8 @@ angular.module("umbraco")
img.thumbnail = imageHelper.getThumbnail({ imageModel: img, scope: $scope });
});
});
-
+ */
+
$scope.selectMediaItem = function(image) {
if (image.contentTypeAlias.toLowerCase() == 'folder') {
mediaResource.getChildren(image.id)
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.html b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.html
index 96c49fb249..2112ead1f2 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.html
@@ -1,33 +1,59 @@
-