diff --git a/modules/backend/assets/css/october.css b/modules/backend/assets/css/october.css index 461080942..49cb0a604 100644 --- a/modules/backend/assets/css/october.css +++ b/modules/backend/assets/css/october.css @@ -166,8 +166,8 @@ .control-filelist ul{padding:0;margin:0} .control-filelist ul li{font-weight:300;line-height:150%;position:relative;list-style:none} .control-filelist ul li a:hover{background:#dddddd} -.control-filelist ul li.active a{background:#dddddd;position:relative} -.control-filelist ul li.active a:after{position:absolute;height:100%;width:4px;left:0;top:0;background:#e67e22;display:block;content:' '} +.control-filelist ul li.active > a{background:#dddddd;position:relative} +.control-filelist ul li.active > a:after{position:absolute;height:100%;width:4px;left:0;top:0;background:#e67e22;display:block;content:' '} .control-filelist ul li a{display:block;padding:10px 40px 10px 20px;outline:none} .control-filelist ul li a:hover,.control-filelist ul li a:focus,.control-filelist ul li a:active{text-decoration:none} .control-filelist ul li a span{display:block} @@ -197,11 +197,14 @@ .control-filelist ul li .checkbox{position:absolute;top:13px;right:17px} .control-filelist ul li .checkbox label{margin-right:0} .control-filelist ul li .checkbox label:before{border-color:#cccccc} +.control-filelist.single-line ul li a span.title{text-overflow:ellipsis;overflow:hidden;white-space:nowrap} .control-filelist.hero ul li{background:#ffffff;border-bottom:none} .control-filelist.hero ul li > a{padding:16px 45px 15px 50px;font-size:13px;border-bottom:1px solid #ecf0f1} .control-filelist.hero ul li > a span.title{font-size:13px;font-weight:600;color:#2b3e50} +.control-filelist.hero ul li > a .list-icon{position:absolute;left:14px;top:20px;font-size:22px;color:#b7c0c2} .control-filelist.hero ul li > a:hover{background:#58b6f7;border-bottom:1px solid #58b6f7 !important} .control-filelist.hero ul li > a:hover span.title,.control-filelist.hero ul li > a:hover span.description{color:#ffffff !important} +.control-filelist.hero ul li > a:hover .list-icon{color:#ffffff !important} .control-filelist.hero ul li .checkbox{top:17px;right:17px} .control-filelist.hero ul li.active > a{border-bottom:1px solid #dddddd} .control-filelist.hero ul li.active > a:after{top:-1px;bottom:-1px;height:auto} @@ -209,7 +212,15 @@ .control-filelist.hero ul li.active > a > span.borders:before{top:-1px} .control-filelist.hero ul li.active > a:hover > span.borders:before{background-color:#58b6f7} .control-filelist.hero ul li > h4{padding-top:7px;padding-bottom:6px;border-bottom:1px solid #ecf0f1} +.control-filelist.hero ul li > div.controls{display:none;position:absolute;right:16px;top:15px} +.control-filelist.hero ul li > div.controls > a.control{width:16px;height:23px;background:transparent;overflow:hidden;display:inline-block;color:#ffffff !important;padding:0} +.control-filelist.hero ul li > div.controls > a.control:before{font-size:17px} +.control-filelist.hero ul li:hover > div.controls{display:block} .control-filelist.hero ul > li.group > ul > li > a{padding-left:66px} +.control-filelist.hero.single-level ul li:hover{background:#58b6f7} +.control-filelist.hero.single-level ul li:hover > a{background:#58b6f7;border-bottom:1px solid #58b6f7 !important} +.control-filelist.hero.single-level ul li:hover > a span.title,.control-filelist.hero.single-level ul li:hover > a span.description{color:#ffffff !important} +.control-filelist.hero.single-level ul li:hover > a .list-icon{color:#ffffff !important} .touch .control-filelist li:not(.active) a:hover{background:transparent} .control-scrollpanel{position:relative;background:#ecf0f1} .control-scrollpanel .control-scrollbar.vertical > .scrollbar-scrollbar{right:0} @@ -1629,7 +1640,7 @@ ul.status-list li span.status.info{background:#5bc0de} .control-toolbar .toolbar-item .btn-group .dropdown.last > .btn{border-bottom-right-radius:2px !important;border-top-right-radius:2px !important} .control-toolbar input.form-control[type=text]{height:auto;padding:8px 10px} [data-control=toolbar]{white-space:nowrap;width:100%;overflow:hidden} -#layout-side-panel .control-toolbar{padding:20px 0 20px 20px} +#layout-side-panel .control-toolbar,.panel-contents .control-toolbar{padding:20px 0 20px 20px} div.scoreboard{position:relative;padding:0} div.scoreboard:after,div.scoreboard:before{display:none;position:absolute;top:50%;margin-top:-7px;height:9px;font-size:10px;color:#bbbbbb} div.scoreboard:before{left:-6px;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f104"} @@ -3194,6 +3205,10 @@ body.mainmenu-open .mainmenu-collapsed ul{position:fixed;left:0;top:10px;bottom: #layout-side-panel .fix-button{position:absolute;right:2px;top:1px;display:block;width:20px;height:20px;font-size:13px} #layout-side-panel .fix-button i{display:block;text-align:center;margin-top:5px;color:#aaaaaa} #layout-side-panel .fix-button:hover{text-decoration:none;opacity:1 !important;filter:alpha(opacity=100) !important} +#layout-side-panel .fix-button-content-header .fix-button{top:9px;right:7px} +#layout-side-panel .fix-button-content-header .fix-button i{color:#eeeeee} +#layout-side-panel .sidepanel-content-header{background:#95a5a6;color:white;font-size:14px;padding:10px 15px;position:relative} +#layout-side-panel .sidepanel-content-header:after{content:'';display:block;width:0;height:0;border-left:7.5px solid transparent;border-right:7.5px solid transparent;border-top:8px solid #95a5a6;border-bottom-width:0;position:absolute;left:14px;bottom:-8px} body.side-panel-not-fixed #layout-side-panel{display:none} body.side-panel-not-fixed #layout-side-panel .fix-button{opacity:0.5;filter:alpha(opacity=50)} body.display-side-panel #layout-side-panel{display:block;position:absolute;z-index:500;width:300px;-webkit-box-shadow:2px 0px 2px 0 rgba(0,0,0,0.3);box-shadow:2px 0px 2px 0 rgba(0,0,0,0.3)} @@ -3342,6 +3357,13 @@ html.csstransitions body.outer.preload .outer-form-container{-webkit-transform:s .fancy-layout .field-richeditor{border:none;border-left:1px solid #e0e0e0 !important} .fancy-layout .field-richeditor,.fancy-layout .field-richeditor .redactor_box,.fancy-layout .field-richeditor .redactor_toolbar{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;border-top-right-radius:0;border-top-left-radius:0} .fancy-layout .field-richeditor .redactor-box textarea{background:white;padding:20px !important;color:#333333;font-size:14px} -.fancy-layout .secondary-content-tabs .field-richeditor .redactor-box .redactor-toolbar{margin:20px 20px 0 20px!important;-webkit-border-radius:3px !important;-moz-border-radius:3px !important;border-radius:3px !important} +.fancy-layout .secondary-content-tabs .field-richeditor .redactor-box .redactor-toolbar{margin:20px 20px 0 20px !important;-webkit-border-radius:3px !important;-moz-border-radius:3px !important;border-radius:3px !important} body.side-panel-not-fixed .fancy-layout .field-richeditor{border-left:none} -html.cssanimations .fancy-layout .form-tabless-fields .loading-indicator-container .loading-indicator > span{-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;background-image:url(../../../../../modules/system/assets/ui/images/loader-white.svg);background-size:20px 20px} \ No newline at end of file +html.cssanimations .fancy-layout .form-tabless-fields .loading-indicator-container .loading-indicator > span{-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;background-image:url('../../../system/assets/ui/images/loader-white.svg');background-size:20px 20px} +.flyout-container > .flyout{overflow:hidden;width:0;left:0 !important;-webkit-transition:width 0.1s;transition:width 0.1s} +.flyout-overlay{width:100%;height:100%;top:0;z-index:5000;position:absolute;background-color:rgba(0,0,0,0);-webkit-transition:background-color 0.3s;transition:background-color 0.3s} +.flyout-toggle{position:absolute;top:20px;left:0;width:23px;height:25px;background:#2b3e50;cursor:pointer;border-bottom-right-radius:4px;border-top-right-radius:4px;color:#bdc3c7;font-size:10px} +.flyout-toggle i{margin:7px 0 0 6px;display:inline-block} +.flyout-toggle:hover i{color:#ffffff} +body.flyout-visible{overflow:hidden} +body.flyout-visible .flyout-overlay{background-color:rgba(0,0,0,0.3)} diff --git a/modules/backend/assets/js/october-min.js b/modules/backend/assets/js/october-min.js index 8090547ea..8af52ee68 100644 --- a/modules/backend/assets/js/october-min.js +++ b/modules/backend/assets/js/october-min.js @@ -4083,7 +4083,10 @@ this.$src=$(options.inputPreset,parent),this.$src.on('keyup',function(){if(self. return $el.val(prefix+self.formatValue())}) this.$el.on('change',function(){self.cancelled=true})} -InputPreset.prototype.formatValue=function(){if(this.options.inputPresetType=='camel') +InputPreset.prototype.formatNamespace=function(){var value=toCamel(this.$src.val()) +return value.substr(0,1).toUpperCase()+value.substr(1)} +InputPreset.prototype.formatValue=function(){if(this.options.inputPresetType=='namespace'){return this.formatNamespace()} +if(this.options.inputPresetType=='camel') var value=toCamel(this.$src.val()) else{var value=slugify(this.$src.val())} if(this.options.inputPresetType=='url') @@ -4368,8 +4371,12 @@ this.init()} Sortable.prototype=Object.create(BaseProto) Sortable.prototype.constructor=Sortable Sortable.prototype.init=function(){this.$el.one('dispose-control',this.proxy(this.dispose)) -var sortableOptions={onDragStart:this.proxy(this.onDragStart),onDrag:this.proxy(this.onDrag),onDrop:this.proxy(this.onDrop)} -this.$el.jqSortable($.extend(sortableOptions,this.options))} +var +self=this,sortableOverrides={},sortableDefaults={onDragStart:this.proxy(this.onDragStart),onDrag:this.proxy(this.onDrag),onDrop:this.proxy(this.onDrop)} +if(this.options.onDragStart){sortableOverrides.onDragStart=function($item,container,_super,event){self.options.onDragStart($item,container,sortableDefaults.onDragStart,event)}} +if(this.options.onDrag){sortableOverrides.onDrag=function($item,position,_super,event){self.options.onDrag($item,position,sortableDefaults.onDrag,event)}} +if(this.options.onDrop){sortableOverrides.onDrop=function($item,container,_super,event){self.options.onDrop($item,container,sortableDefaults.onDrop,event)}} +this.$el.jqSortable($.extend({},sortableDefaults,this.options,sortableOverrides))} Sortable.prototype.dispose=function(){this.$el.jqSortable('destroy') this.$el.off('dispose-control',this.proxy(this.dispose)) this.$el.removeData('oc.sortable') @@ -4377,8 +4384,6 @@ this.$el=null this.options=null this.cursorAdjustment=null BaseProto.dispose.call(this)} -Sortable.prototype.onDrag=function($item,position,_super,event){if(this.cursorAdjustment){$item.css({left:position.left-this.cursorAdjustment.left,top:position.top-this.cursorAdjustment.top})} -else{$item.css(position)}} Sortable.prototype.onDragStart=function($item,container,_super,event){var offset=$item.offset(),pointer=container.rootGroup.pointer if(pointer){this.cursorAdjustment={left:pointer.left-offset.left,top:pointer.top-offset.top}} else{this.cursorAdjustment=null} @@ -4388,6 +4393,8 @@ $item.addClass('dragged') $('body').addClass('dragging') if(this.options.useAnimation){$item.data('oc.animated',true)} if(this.options.usePlaceholderClone){$(container.rootGroup.placeholder).html($item.html())}} +Sortable.prototype.onDrag=function($item,position,_super,event){if(this.cursorAdjustment){$item.css({left:position.left-this.cursorAdjustment.left,top:position.top-this.cursorAdjustment.top})} +else{$item.css(position)}} Sortable.prototype.onDrop=function($item,container,_super,event){$item.removeClass('dragged').removeAttr('style') $('body').removeClass('dragging') if($item.data('oc.animated')){$item.hide().slideDown(200)}} @@ -4953,12 +4960,12 @@ return this} $(document).render(function(){$('[data-control=scrollbar]').scrollbar()})}(window.jQuery);+function($){"use strict";var FileList=function(element,options){this.options=options this.$el=$(element) this.init();} -FileList.DEFAULTS={} +FileList.DEFAULTS={ignoreItemClick:false} FileList.prototype.init=function(){var self=this this.$el.on('click','li.group > h4 > a, li.group > div.group',function(){self.toggleGroup($(this).closest('li')) -return false;});this.$el.on('click','li.item > a',function(event){var e=$.Event('open.oc.list',{relatedTarget:$(this).parent().get(0),clickEvent:event}) +return false;});if(!this.options.ignoreItemClick){this.$el.on('click','li.item > a',function(event){var e=$.Event('open.oc.list',{relatedTarget:$(this).parent().get(0),clickEvent:event}) self.$el.trigger(e,this) -return false}) +return false})} this.$el.on('ajaxUpdate',$.proxy(this.update,this))} FileList.prototype.toggleGroup=function(group){var $group=$(group);$group.attr('data-status')=='expanded'?this.collapseGroup($group):this.expandGroup($group)} FileList.prototype.collapseGroup=function(group){var diff --git a/modules/backend/assets/js/october.filelist.js b/modules/backend/assets/js/october.filelist.js index 998abd7c2..97963724e 100644 --- a/modules/backend/assets/js/october.filelist.js +++ b/modules/backend/assets/js/october.filelist.js @@ -30,7 +30,7 @@ } FileList.DEFAULTS = { - + ignoreItemClick: false } FileList.prototype.init = function (){ @@ -42,12 +42,14 @@ return false; }); - this.$el.on('click', 'li.item > a', function(event) { - var e = $.Event('open.oc.list', {relatedTarget: $(this).parent().get(0), clickEvent: event}) - self.$el.trigger(e, this) + if (!this.options.ignoreItemClick) { + this.$el.on('click', 'li.item > a', function(event) { + var e = $.Event('open.oc.list', {relatedTarget: $(this).parent().get(0), clickEvent: event}) + self.$el.trigger(e, this) - return false - }) + return false + }) + } this.$el.on('ajaxUpdate', $.proxy(this.update, this)) } diff --git a/modules/backend/assets/js/october.flyout.js b/modules/backend/assets/js/october.flyout.js new file mode 100644 index 000000000..22f2e4d1c --- /dev/null +++ b/modules/backend/assets/js/october.flyout.js @@ -0,0 +1,222 @@ +/* + * Flyout plugin. + */ ++function ($) { "use strict"; + + var Base = $.oc.foundation.base, + BaseProto = Base.prototype + + // SCROLLPAD CLASS DEFINITION + // ============================ + + var Flyout = function(element, options) { + this.$el = $(element) + this.$overlay = null + this.options = options + + Base.call(this) + + this.init() + } + + Flyout.prototype = Object.create(BaseProto) + Flyout.prototype.constructor = Flyout + + Flyout.prototype.dispose = function() { + this.removeOverlay() + this.$el.removeData('oc.flyout') + this.$el = null + + if (this.options.flyoutToggle) { + this.removeToggle() + } + + BaseProto.dispose.call(this) + } + + Flyout.prototype.show = function() { + var $cells = this.$el.find('> .layout-cell'), + $flyout = this.$el.find('> .flyout') + + this.removeOverlay() + + for (var i = 0; i < $cells.length; i++) { + var $cell = $($cells[i]), + width = $cell.width() + + $cell.css('width', width) + } + + this.createOverlay() + + window.setTimeout(this.proxy(this.setBodyClass), 1) + $flyout.css('width', this.options.flyoutWidth) + + this.hideToggle() + } + + Flyout.prototype.hide = function() { + var $cells = this.$el.find('> .layout-cell'), + $flyout = this.$el.find('> .flyout') + + for (var i = 0; i < $cells.length; i++) { + var $cell = $($cells[i]) + + $cell.css('width', '') + } + + $flyout.css('width', 0) + + window.setTimeout(this.proxy(this.removeBodyClass), 1) + window.setTimeout(this.proxy(this.removeOverlayAndShowToggle), 300) + } + + // FLYOUT INTERNAL METHODS + // ============================ + + Flyout.prototype.init = function() { + this.build() + } + + Flyout.prototype.build = function() { + if (this.options.flyoutToggle) { + this.buildToggle() + } + } + + Flyout.prototype.buildToggle = function() { + var $toggleContainer = $(this.options.flyoutToggle), + $toggle = $('