From d3c30475b9546bc65ce3ca7b20b297e78665ceea Mon Sep 17 00:00:00 2001 From: Samuel Georges Date: Sat, 5 Dec 2015 10:06:26 +1100 Subject: [PATCH] Add support for including small buttons in list columns Recompile assets --- modules/system/assets/js/lang/lang.es.js | 2 +- modules/system/assets/ui/docs/list.md | 37 +++++++++- modules/system/assets/ui/less/list.less | 16 +++-- modules/system/assets/ui/storm-min.js | 86 +++++++++++------------- modules/system/assets/ui/storm.css | 9 +-- 5 files changed, 90 insertions(+), 60 deletions(-) diff --git a/modules/system/assets/js/lang/lang.es.js b/modules/system/assets/js/lang/lang.es.js index f75ba0115..b47683deb 100644 --- a/modules/system/assets/js/lang/lang.es.js +++ b/modules/system/assets/js/lang/lang.es.js @@ -5,5 +5,5 @@ if ($.oc === undefined) $.oc = {} if ($.oc.langMessages === undefined) $.oc.langMessages = {} $.oc.langMessages['es'] = $.extend( $.oc.langMessages['es'] || {}, - {"markdowneditor":{"formatting":"Formatting","quote":"Quote","code":"Code","header1":"Header 1","header2":"Header 2","header3":"Header 3","header4":"Header 4","header5":"Header 5","header6":"Header 6","bold":"Bold","italic":"Italic","unorderedlist":"Unordered List","orderedlist":"Ordered List","video":"Video","image":"Image","link":"Link","horizontalrule":"Insert Horizontal Rule","fullscreen":"Full screen","preview":"Preview"},"mediamanager":{"insert_link":"Insert Media Link","insert_image":"Insert Media Image","insert_video":"Insert Media Video","insert_audio":"Insert Media Audio","invalid_file_empty_insert":"Please select file to insert a links to.","invalid_file_single_insert":"Please select a single file.","invalid_image_empty_insert":"Please select image(s) to insert.","invalid_video_empty_insert":"Please select a video file to insert.","invalid_audio_empty_insert":"Please select an audio file to insert."},"alert":{"confirm_button_text":"OK","cancel_button_text":"Cancel"}} + {"markdowneditor":{"formatting":"Formateo","quote":"Cita","code":"C\u00f3digo","header1":"Encabezado 1","header2":"Encabezado 2","header3":"Encabezado 3","header4":"Encabezado 4","header5":"Encabezado 5","header6":"Encabezado 6","bold":"Negrita","italic":"Cursiva","unorderedlist":"Lista Desordenada","orderedlist":"Lista Ordenada","video":"Video","image":"Imagen","link":"V\u00ednculo","horizontalrule":"Insertar Regla Horizontal","fullscreen":"Pantalla completa","preview":"Previsualizar"},"mediamanager":{"insert_link":"Insertar Media V\u00ednculo","insert_image":"Insertar Media Imagen","insert_video":"Insertar Media Video","insert_audio":"Insertar Media Audio","invalid_file_empty_insert":"Por favor seleccione archivo para insertar v\u00ednculo.","invalid_file_single_insert":"Por favor seleccione un solo archivo.","invalid_image_empty_insert":"Por favor seleccione una imagen(es) para insertar.","invalid_video_empty_insert":"Por favor seleccione un archivo de video para insertar.","invalid_audio_empty_insert":"Por favor seleccione un archivo de audio para insertar."},"alert":{"confirm_button_text":"OK","cancel_button_text":"Cancelar"}} ); \ No newline at end of file diff --git a/modules/system/assets/ui/docs/list.md b/modules/system/assets/ui/docs/list.md index 1285c48f6..521cac1ab 100644 --- a/modules/system/assets/ui/docs/list.md +++ b/modules/system/assets/ui/docs/list.md @@ -175,7 +175,7 @@ Lists are responsive by default and will collapse at a breakpoint of `980px`. Th ### Row classes -The following classes are available to use on the table row elements. +The following colored classes are available to use on the table row elements.
@@ -246,4 +246,37 @@ It might be fun to include a status column!
-
\ No newline at end of file + + +### Button column + +You may add a small button to a list column by adding the `column-button` class to the table data (TD) element. + +
+ + + + + + + + + + + + + +
ActionName
+ + Open Google + + + + Petoria + +
+
+ diff --git a/modules/system/assets/ui/less/list.less b/modules/system/assets/ui/less/list.less index c3e35a373..5d4d66599 100644 --- a/modules/system/assets/ui/less/list.less +++ b/modules/system/assets/ui/less/list.less @@ -84,7 +84,7 @@ table.table.data { color: @color-list-text; border-color: @color-list-grid; - a { + a:not(.btn) { color: @color-list-text; &:hover { text-decoration: none; @@ -135,7 +135,7 @@ table.table.data { background: @color-list-hover-bg !important; color: white; - a, span, i[class^="icon-"] { + a:not(.btn), span, i[class^="icon-"] { color: white; } } @@ -211,6 +211,14 @@ table.table.data { padding-right: 0; } + td.column-compact { + padding: 0; + } + + td.column-button { + padding: 5px; + } + &.icons { td i[class^="icon-"] { display: inline-block; @@ -226,10 +234,6 @@ table.table.data { cursor: pointer; .user-select(none); } - - td.column-compact { - padding: 0; - } } &.no-active-indicator tbody { diff --git a/modules/system/assets/ui/storm-min.js b/modules/system/assets/ui/storm-min.js index 681f251b7..dc60aa294 100644 --- a/modules/system/assets/ui/storm-min.js +++ b/modules/system/assets/ui/storm-min.js @@ -2682,9 +2682,8 @@ var href=link.attr('href'),onclick=(typeof link.get(0).onclick=="function")?link $(this).find('td').not('.'+options.excludeClass).click(function(){if(onclick) onclick.apply(link.get(0)) else -window.location=href;}) -$(this).addClass(options.linkedClass) -link.hide().after(link.html())})} +window.location=href}) +$(this).addClass(options.linkedClass)})} RowLink.DEFAULTS={target:'a',excludeClass:'nolink',linkedClass:'rowlink'} var old=$.fn.rowLink $.fn.rowLink=function(option){var args=Array.prototype.slice.call(arguments,1) @@ -3455,7 +3454,8 @@ if(propertyEditor&&!propertyEditor.supportsExternalParameterEditor()){continue} var cell=row.querySelector('td'),propertyDefinition=this.findPropertyDefinition(property),editor=new $.oc.inspector.externalParameterEditor(this,propertyDefinition,cell) this.externalParameterEditors.push(editor)}} Surface.prototype.applyGroupIndexAttribute=function(property,row,group,isGroupedControl){if(property.itemType=='group'||isGroupedControl){row.setAttribute('data-group-index',this.getGroupManager().getGroupIndex(group)) -row.setAttribute('data-parent-group-index',this.getGroupManager().getGroupIndex(group.parentGroup))}else{if(group.parentGroup){row.setAttribute('data-parent-group-index',this.getGroupManager().getGroupIndex(group))}}} +row.setAttribute('data-parent-group-index',this.getGroupManager().getGroupIndex(group.parentGroup))} +else{if(group.parentGroup){row.setAttribute('data-parent-group-index',this.getGroupManager().getGroupIndex(group))}}} Surface.prototype.applyGroupLevelToRow=function(row,group){if(row.hasAttribute('data-group-level')){return} var th=this.getRowHeadElement(row) if(th===null){throw new Error('Cannot find TH element for the Inspector row')} @@ -3474,7 +3474,8 @@ if(row){this.toggleGroup(row,true)}}} Surface.prototype.expandOrCollapseRows=function(rows,collapse,duration,noAnimation){var row=rows.pop(),self=this if(row){if(!noAnimation){setTimeout(function toggleRow(){$.oc.foundation.element.toggleClass(row,'collapsed',collapse) $.oc.foundation.element.toggleClass(row,'expanded',!collapse) -self.expandOrCollapseRows(rows,collapse,duration,noAnimation)},duration)}else{$.oc.foundation.element.toggleClass(row,'collapsed',collapse) +self.expandOrCollapseRows(rows,collapse,duration,noAnimation)},duration)} +else{$.oc.foundation.element.toggleClass(row,'collapsed',collapse) $.oc.foundation.element.toggleClass(row,'expanded',!collapse) self.expandOrCollapseRows(rows,collapse,duration,noAnimation)}}} Surface.prototype.getGroupManager=function(){return this.getRootSurface().groupManager} @@ -3511,11 +3512,9 @@ $.oc.foundation.element.addClass(cell,'active')} Surface.prototype.markPropertyChanged=function(property,changed){var row=this.tableContainer.querySelector('tr[data-property="'+property+'"]') if(changed){$.oc.foundation.element.addClass(row,'changed')} else{$.oc.foundation.element.removeClass(row,'changed')}} -Surface.prototype.findPropertyEditor=function(property){for(var i=0,len=this.editors.length;i0){var valuesStr=$.trim($valuesField.val()) -try{return valuesStr.length===0?{}:$.parseJSON(valuesStr)}catch(err){throw new Error('Error parsing Inspector field values. '+err)}} +try{return valuesStr.length===0?{}:$.parseJSON(valuesStr)} +catch(err){throw new Error('Error parsing Inspector field values. '+err)}} var values={},attributes=this.$element.get(0).attributes for(var i=0,len=attributes.length;i \
\ \ - \ + \
\ '} PopupBase.prototype.updateDisplayedValue=function(value){this.setLinkText(this.getLink(),value)} @@ -4296,7 +4292,7 @@ TextEditor.prototype.getPopupContent=function(){return'
\
\ \ - \ + \
\
'} TextEditor.prototype.configurePopup=function(popup){var $textarea=$(popup).find('textarea'),value=this.inspector.getPropertyValue(this.propertyDefinition.property) @@ -4334,7 +4330,8 @@ if(value===undefined){value=this.propertyDefinition.default} if(value!==undefined&&value.length!==undefined&&value.length>0&&typeof value!=='string'){var textValues=[] for(var i=0,len=value.length;i \
\ \ - \ + \
\ '} ObjectListEditor.prototype.buildPopupContents=function(popup){this.buildItemsTable(popup)} @@ -4546,7 +4543,8 @@ if(!selectedRow){throw new Exception('A row is not found for the updated data')} if(property!==this.propertyDefinition.titleProperty){return} value=$.trim(value) if(value.length===0){value='[No title]' -$.oc.foundation.element.addClass(selectedRow,'disabled')}else{$.oc.foundation.element.removeClass(selectedRow,'disabled')} +$.oc.foundation.element.addClass(selectedRow,'disabled')} +else{$.oc.foundation.element.removeClass(selectedRow,'disabled')} selectedRow.firstChild.textContent=value} ObjectListEditor.prototype.getSelectedRow=function(){if(!this.popup){throw new Error('Trying to get selected row without a popup reference.')} var rows=this.getTableBody().children @@ -4571,7 +4569,8 @@ var nextRow=selectedRow.nextElementSibling,prevRow=selectedRow.previousElementSi this.disposeInspector() tbody.removeChild(selectedRow) var newSelectedRow=nextRow?nextRow:prevRow -if(newSelectedRow){this.selectRow(newSelectedRow)}else{tbody.appendChild(this.buildEmptyRow())} +if(newSelectedRow){this.selectRow(newSelectedRow)} +else{tbody.appendChild(this.buildEmptyRow())} this.updateScrollpads()} ObjectListEditor.prototype.applyDataToParentInspector=function(){var selectedRow=this.getSelectedRow(),tbody=this.getTableBody(),dataRows=tbody.querySelectorAll('tr[data-inspector-values]'),link=this.getLink(),result=this.getEmptyValue() if(selectedRow){if(!this.validateKeyValue()){return} @@ -4681,7 +4680,7 @@ ObjectEditor.prototype.getUndefinedValue=function(){var result={} for(var i=0,len=this.propertyDefinition.properties.length;i \ @@ -4780,7 +4778,7 @@ DictionaryEditor.prototype.getPopupContent=function(){return'
\
\ \ - \ + \
\
'} DictionaryEditor.prototype.configurePopup=function(popup){this.buildItemsTable(popup.get(0)) @@ -4885,10 +4883,8 @@ DictionaryEditor.prototype.onCommand=function(ev){var command=ev.currentTarget.g switch(command){case'create-item':this.createItem() break;case'delete-item':this.deleteItem() break;}} -DictionaryEditor.prototype.onKeyDown=function(ev){if(ev.keyCode==40) -return this.navigateDown(ev) -else if(ev.keyCode==38) -return this.navigateUp(ev)} +DictionaryEditor.prototype.onKeyDown=function(ev){if(ev.keyCode==40){return this.navigateDown(ev)} +else if(ev.keyCode==38){return this.navigateUp(ev)}} $.oc.inspector.propertyEditors.dictionary=DictionaryEditor}(window.jQuery);+function($){"use strict";var Base=$.oc.inspector.propertyEditors.string,BaseProto=Base.prototype var AutocompleteEditor=function(inspector,propertyDefinition,containerCell,group){Base.call(this,inspector,propertyDefinition,containerCell,group)} AutocompleteEditor.prototype=Object.create(BaseProto) @@ -4991,18 +4987,15 @@ BaseValidator.prototype.getMessage=function(defaultMessage){if(this.options.mess if(defaultMessage!==undefined){return defaultMessage} return this.defaultMessage} BaseValidator.prototype.isScalar=function(value){if(value===undefined||value===null){return true} -if(typeof value==='string'||typeof value=='number'||typeof value=='boolean'){return true} -return false} +return!!(typeof value==='string'||typeof value=='number'||typeof value=='boolean');} BaseValidator.prototype.isValid=function(value){return null} $.oc.inspector.validators.base=BaseValidator}(window.jQuery);+function($){"use strict";var Base=$.oc.inspector.validators.base,BaseProto=Base.prototype var BaseNumber=function(options){Base.call(this,options)} BaseNumber.prototype=Object.create(BaseProto) BaseNumber.prototype.constructor=Base -BaseNumber.prototype.doCommonChecks=function(value){if(this.options.min!==undefined||this.options.max!==undefined){if(this.options.min!==undefined){if(this.options.min.value===undefined) -throw new Error('The min.value parameter is not defined in the Inspector validator configuration') +BaseNumber.prototype.doCommonChecks=function(value){if(this.options.min!==undefined||this.options.max!==undefined){if(this.options.min!==undefined){if(this.options.min.value===undefined){throw new Error('The min.value parameter is not defined in the Inspector validator configuration')} if(valuethis.options.max.value){return this.options.max.message!==undefined?this.options.max.message:"The value should not be greater than "+this.options.max.value}}}} $.oc.inspector.validators.baseNumber=BaseNumber}(window.jQuery);+function($){"use strict";var Base=$.oc.inspector.validators.base,BaseProto=Base.prototype var RequiredValidator=function(options){Base.call(this,options) @@ -5055,8 +5048,7 @@ if(typeof value=='boolean'){this.throwError('The Length Inspector validator cann var length=null if(Object.prototype.toString.call(value)==='[object Array]'||typeof value==='string'){length=value.length} else if(typeof value==='object'){length=this.getObjectLength(value)} -if(this.options.min!==undefined||this.options.max!==undefined){if(this.options.min!==undefined){if(this.options.min.value===undefined) -throw new Error('The min.value parameter is not defined in the Length Inspector validator configuration.') +if(this.options.min!==undefined||this.options.max!==undefined){if(this.options.min!==undefined){if(this.options.min.value===undefined){throw new Error('The min.value parameter is not defined in the Length Inspector validator configuration.')} if(length span:after,table.table.data thead th.active > table.table.data thead tr th:first-child{padding-left:5px} table.table.data tbody tr:nth-child(even) td,table.table.data tbody tr:nth-child(even) th{background-color:#f5f5f5} table.table.data tbody td,table.table.data tbody th{padding:11px 15px;color:#666666;border-color:#eeeeee} -table.table.data tbody td a,table.table.data tbody th a{color:#666666} -table.table.data tbody td a:hover,table.table.data tbody th a:hover{text-decoration:none} +table.table.data tbody td a:not(.btn),table.table.data tbody th a:not(.btn){color:#666666} +table.table.data tbody td a:not(.btn):hover,table.table.data tbody th a:not(.btn):hover{text-decoration:none} table.table.data tbody td div.progress,table.table.data tbody th div.progress{position:relative;overflow:visible;height:auto;margin-bottom:0;background-color:transparent;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:none;box-shadow:none} table.table.data tbody td div.progress div.bar,table.table.data tbody th div.progress div.bar{position:absolute;left:-15px;top:-11px;bottom:-11px;background:#0181b9;opacity:0.3;filter:alpha(opacity=30)} table.table.data tbody td div.progress a,table.table.data tbody th div.progress a{position:relative} @@ -2355,7 +2355,7 @@ table.table.data tbody tr td:first-child{border-left:3px solid transparent;paddi table.table.data tbody tr.active td{color:#000000} table.table.data tbody tr.active td:first-child{border-left:3px solid #ff9933} table.table.data tbody tr:not(.no-data):hover td,table.table.data tbody tr:not(.no-data).selected td{background:#4da7e8 !important;color:white} -table.table.data tbody tr:not(.no-data):hover td a,table.table.data tbody tr:not(.no-data).selected td a,table.table.data tbody tr:not(.no-data):hover td span,table.table.data tbody tr:not(.no-data).selected td span,table.table.data tbody tr:not(.no-data):hover td i[class^="icon-"],table.table.data tbody tr:not(.no-data).selected td i[class^="icon-"]{color:white} +table.table.data tbody tr:not(.no-data):hover td a:not(.btn),table.table.data tbody tr:not(.no-data).selected td a:not(.btn),table.table.data tbody tr:not(.no-data):hover td span,table.table.data tbody tr:not(.no-data).selected td span,table.table.data tbody tr:not(.no-data):hover td i[class^="icon-"],table.table.data tbody tr:not(.no-data).selected td i[class^="icon-"]{color:white} table.table.data tbody tr.hidden td,table.table.data tbody tr.hidden th,table.table.data tbody tr.hidden td a,table.table.data tbody tr.hidden th a{display:none} table.table.data tbody tr.strike td,table.table.data tbody tr.strike th,table.table.data tbody tr.strike td a,table.table.data tbody tr.strike th a{text-decoration:line-through} table.table.data tbody tr.frozen td,table.table.data tbody tr.frozen th,table.table.data tbody tr.frozen td a,table.table.data tbody tr.frozen th a{color:#337ab7} @@ -2368,9 +2368,10 @@ table.table.data tbody tr.safe td,table.table.data tbody tr.special td,table.tab table.table.data tbody td.column-break-word{word-wrap:break-word;word-break:break-all} table.table.data tbody td.column-single-line{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} table.table.data tbody td.column-slim{padding-left:0;padding-right:0} +table.table.data tbody td.column-compact{padding:0} +table.table.data tbody td.column-button{padding:5px} table.table.data tbody.icons td i[class^="icon-"]{display:inline-block;margin-right:7px;font-size:15px;color:#95a5a6;position:relative;top:1px} table.table.data tbody.clickable{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} -table.table.data tbody td.column-compact{padding:0} table.table.data.no-active-indicator tbody tr td:first-child{border-left:none} table.table.data tfoot a{color:#666666;text-decoration:none} table.table.data tfoot td,table.table.data tfoot th{border-color:#e2e2e2;padding:10px 15px}