mirror of
https://github.com/appwrite/appwrite.git
synced 2026-05-26 13:51:13 +00:00
Added tags input field
This commit is contained in:
eldadfux committed
1 parent
49942a13dd
commit
a6a225ded0
9 files changed
+176
-9
No files matched your search
@@ -8,9 +8,11 @@ use Utopia\Locale\Locale;
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="zone xxl">
|
||||
<ul class="phases clear" data-ui-phases data-selected="{{router.params.tab}}">
|
||||
<li data-state="/console/users?project={{router.params.project}}">
|
||||
|
||||
<h2 style="display: none;">Explore</h2>
|
||||
|
||||
<div class="box dashboard database margin-bottom-xl">
|
||||
|
||||
@@ -27,13 +27,13 @@ use Utopia\Locale\Locale;
|
||||
<input type="hidden" name="folderId" id="files-folderId" data-cast-to="int" value="1">
|
||||
|
||||
<label for="file-read">Files</label>
|
||||
<input type="file" name="files" id="file-files" require>
|
||||
<input type="file" name="files" id="file-files" required>
|
||||
|
||||
<label for="file-read">Read Permissions</label>
|
||||
<input type="text" class="full-width" id="file-read" name="read" required autocomplete="off" data-cast-to="array" value="*" />
|
||||
|
||||
<input type="hidden" id="file-read" name="read" required data-forms-tags data-cast-to="json" value="<?php echo htmlentities(json_encode(['*'])); ?>" />
|
||||
|
||||
<label for="file-write">Write Permissions</label>
|
||||
<input type="text" class="full-width" id="file-write" name="write" required autocomplete="off" data-cast-to="array" value="*" />
|
||||
<input type="hidden" id="file-write" name="write" required data-forms-tags data-cast-to="json" value="<?php echo htmlentities(json_encode(['*'])); ?>" />
|
||||
|
||||
<hr />
|
||||
|
||||
|
||||
@@ -46,6 +46,7 @@ const configApp = {
|
||||
'public/scripts/views/forms/pell.js',
|
||||
'public/scripts/views/forms/remove.js',
|
||||
'public/scripts/views/forms/switch.js',
|
||||
'public/scripts/views/forms/tags.js',
|
||||
'public/scripts/views/forms/text-count.js',
|
||||
'public/scripts/views/forms/text-direction.js',
|
||||
'public/scripts/views/forms/text-resize.js',
|
||||
|
||||
Vendored
+9
-1
@@ -2437,7 +2437,15 @@ return meter.className='password-meter';if(score>60)
|
||||
return meter.className='password-meter strong';if(score>30)
|
||||
return meter.className='password-meter medium';if(score>=0)
|
||||
return meter.className='password-meter weak';};var meter=window.document.createElement('div');meter.className='password-meter';element.parentNode.insertBefore(meter,element.nextSibling);element.addEventListener('change',callback);element.addEventListener('keypress',callback);element.addEventListener('keyup',callback);element.addEventListener('keydown',callback);}});})(window);(function(window){"use strict";window.ls.container.get('view').add({selector:'data-forms-pell',controller:function(element,window,document,markdown){var div=document.createElement('div');element.className='pell hide';div.className='input pell';element.parentNode.insertBefore(div,element);element.tabIndex=-1;var turndownService=new TurndownService();turndownService.addRule('underline',{filter:['u'],replacement:function(content){return'__'+content+'__'}});var editor=window.pell.init({element:div,onChange:function onChange(html){element.value=turndownService.turndown(html);},defaultParagraphSeparator:'p',actions:[{name:'bold',icon:'<i class="icon-bold"></i>'},{name:'underline',icon:'<i class="icon-underline"></i>'},{name:'italic',icon:'<i class="icon-italic"></i>'},{name:'olist',icon:'<i class="icon-list-numbered"></i>'},{name:'ulist',icon:'<i class="icon-list-bullet"></i>'}]});element.addEventListener('change',function(){editor.content.innerHTML=markdown.render(element.value);});editor.content.setAttribute('placeholder',element.placeholder);editor.content.innerHTML=markdown.render(element.value);editor.content.tabIndex=0;editor.content.onkeydown=function preventTab(event){if(event.which===9){event.preventDefault();if(document.activeElement){var focussable=Array.prototype.filter.call(document.querySelectorAll('a:not([disabled]), button:not([disabled]), select:not([disabled]), input[type=text]:not([disabled]), input[type=checkbox]:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"])'),function(element){return element.offsetWidth>0||element.offsetHeight>0||element===document.activeElement});var index=focussable.indexOf(document.activeElement);if(index>-1){if(event.shiftKey){var prevElement=focussable[index-1]||focussable[focussable.length-1];prevElement.focus();}
|
||||
else{var nextElement=focussable[index+1]||focussable[0];nextElement.focus();}}}}};var clean=function(e){e.stopPropagation();e.preventDefault();var clipboardData=e.clipboardData||window.clipboardData;window.pell.exec('insertText',clipboardData.getData('Text'));return true;};div.addEventListener('paste',clean);div.addEventListener('drop',clean);}});})(window);(function(window){"use strict";window.ls.container.get('view').add({selector:'data-forms-remove',controller:function(element){Array.prototype.slice.call(element.querySelectorAll('[data-remove]')).map(function(obj){obj.addEventListener('click',function(){element.parentNode.removeChild(element);});});}});})(window);(function(window){"use strict";window.ls.container.get('view').add({selector:'data-forms-switch',controller:function(element){let input=window.document.createElement('input');input.type='checkbox';input.className='switch';let syncA=function(){element.value=(input.checked)?'on':'off';};let syncB=function(){input.checked=(element.value==='on');};input.addEventListener('input',syncA);input.addEventListener('change',syncA);element.addEventListener('input',syncB);element.addEventListener('change',syncB);syncA();element.parentNode.insertBefore(input,element);}});})(window);(function(window){"use strict";window.ls.container.get('view').add({selector:'data-forms-text-count',controller:function(element){var counter=document.createElement('span');counter.className='counter';element.parentNode.insertBefore(counter,element.nextSibling);var count=function(){if(0<=element.maxLength){counter.innerText=(element.maxLength-element.value.length).toString()+' / '+element.maxLength;}
|
||||
else{var nextElement=focussable[index+1]||focussable[0];nextElement.focus();}}}}};var clean=function(e){e.stopPropagation();e.preventDefault();var clipboardData=e.clipboardData||window.clipboardData;window.pell.exec('insertText',clipboardData.getData('Text'));return true;};div.addEventListener('paste',clean);div.addEventListener('drop',clean);}});})(window);(function(window){"use strict";window.ls.container.get('view').add({selector:'data-forms-remove',controller:function(element){Array.prototype.slice.call(element.querySelectorAll('[data-remove]')).map(function(obj){obj.addEventListener('click',function(){element.parentNode.removeChild(element);});});}});})(window);(function(window){"use strict";window.ls.container.get('view').add({selector:'data-forms-switch',controller:function(element){let input=window.document.createElement('input');input.type='checkbox';input.className='switch';let syncA=function(){element.value=(input.checked)?'on':'off';};let syncB=function(){input.checked=(element.value==='on');};input.addEventListener('input',syncA);input.addEventListener('change',syncA);element.addEventListener('input',syncB);element.addEventListener('change',syncB);syncA();element.parentNode.insertBefore(input,element);}});})(window);(function(window){"use strict";window.ls.container.get('view').add({selector:'data-forms-tags',controller:function(element){let array=[];let tags=window.document.createElement('div');let preview=window.document.createElement('ul');let add=window.document.createElement('input');tags.className='tags';preview.className='tags-list';add.type='text';add.className='add';tags.addEventListener('click',function(){add.focus();});add.addEventListener('keydown',function(event){if(((event.key==="Enter"||event.key===" "))&&(add.value.length>0)){array.push(add.value);add.value='';element.value=JSON.stringify(array);check();event.preventDefault();}
|
||||
if(((event.key==="Backspace"||event.key==="Delete"))&&(add.value==='')){array.splice(-1,1)
|
||||
element.value=JSON.stringify(array);check();}
|
||||
return false;});let check=function(){try{array=JSON.parse(element.value)||[];}
|
||||
catch(error){console.log('error',element.value);array=[];}
|
||||
if(!Array.isArray(array)){array=[];}
|
||||
preview.innerHTML='';for(let index=0;index<array.length;index++){let value=array[index];let tag=window.document.createElement('li');tag.className='tag';tag.textContent=value;tag.addEventListener('click',function(){console.log(index);array.splice(index,1);element.value=JSON.stringify(array);check();});preview.appendChild(tag);}
|
||||
if(element.required&&array.length===0){add.setCustomValidity('Please add permissions');}
|
||||
else{add.setCustomValidity('');}};tags.appendChild(preview);tags.appendChild(add);element.parentNode.insertBefore(tags,element);element.addEventListener('change',check);check();}});})(window);(function(window){"use strict";window.ls.container.get('view').add({selector:'data-forms-text-count',controller:function(element){var counter=document.createElement('span');counter.className='counter';element.parentNode.insertBefore(counter,element.nextSibling);var count=function(){if(0<=element.maxLength){counter.innerText=(element.maxLength-element.value.length).toString()+' / '+element.maxLength;}
|
||||
else{var words=(element.value!=='')?element.value.trim().split(' ').length:0;counter.innerText=words+' words and '+element.value.length.toString()+' chars';}};element.addEventListener('keyup',count);element.addEventListener('change',count);element.addEventListener('cut',count);element.addEventListener('paste',count);element.addEventListener('drop',count);count();}});})(window);(function(window){"use strict";window.ls.container.get('view').add({selector:'data-forms-text-direction',controller:function(element){var rtlStock='^ا^ب^ت^ث^ج^ح^خ^د^ذ^ر^ز^س^ش^ص^ض^ط^ظ^ع^غ^ف^ق^ك^ل^م^ن^ه^و^ي^א^ב^ג^ד^ה^ו^ז^ח^ט^י^כ^ך^ל^מ^ם^נ^ן^ס^ע^פ^ף^צ^ץ^ק^ר^ש^ת^';var special=['\n',' ','״','"','_','\'','!','@','#','$','^','&','%','*','(',')','+','=','-','[',']','\\','/','{','}','|',':','<','>','?',',','.','0','1','2','3','4','5','6','7','8','9'];var setDirection=function(){var value=(element.value[0])?element.value:'';var direction='ltr';var align='left';for(var i=0;i<value.length;i++){if(-1===special.indexOf(value[i])){var firstChar=value[i];break;}}
|
||||
if(-1<rtlStock.indexOf('^'+firstChar+'^')){direction='rtl';align='right';}
|
||||
element.style.direction=direction;element.style.textAlign=align;};element.addEventListener('keyup',setDirection);element.addEventListener('change',setDirection);element.addEventListener('cut',setDirection);element.addEventListener('paste',setDirection);element.addEventListener('drop',setDirection);setDirection();}});})(window);(function(window){"use strict";window.ls.container.get('view').add({selector:'data-forms-text-resize',controller:function(element,window){function resize(){var scrollLeft=window.pageXOffset||(window.document.documentElement||window.document.body.parentNode||window.document.body).scrollLeft;var scrollTop=window.pageYOffset||(window.document.documentElement||window.document.body.parentNode||window.document.body).scrollTop;var offset=element.offsetHeight-element.clientHeight;element.style.height='auto';element.style.height=element.scrollHeight+offset+'px';window.scrollTo(scrollLeft,scrollTop);}
|
||||
|
||||
Vendored
+9
-1
@@ -344,7 +344,15 @@ return meter.className='password-meter';if(score>60)
|
||||
return meter.className='password-meter strong';if(score>30)
|
||||
return meter.className='password-meter medium';if(score>=0)
|
||||
return meter.className='password-meter weak';};var meter=window.document.createElement('div');meter.className='password-meter';element.parentNode.insertBefore(meter,element.nextSibling);element.addEventListener('change',callback);element.addEventListener('keypress',callback);element.addEventListener('keyup',callback);element.addEventListener('keydown',callback);}});})(window);(function(window){"use strict";window.ls.container.get('view').add({selector:'data-forms-pell',controller:function(element,window,document,markdown){var div=document.createElement('div');element.className='pell hide';div.className='input pell';element.parentNode.insertBefore(div,element);element.tabIndex=-1;var turndownService=new TurndownService();turndownService.addRule('underline',{filter:['u'],replacement:function(content){return'__'+content+'__'}});var editor=window.pell.init({element:div,onChange:function onChange(html){element.value=turndownService.turndown(html);},defaultParagraphSeparator:'p',actions:[{name:'bold',icon:'<i class="icon-bold"></i>'},{name:'underline',icon:'<i class="icon-underline"></i>'},{name:'italic',icon:'<i class="icon-italic"></i>'},{name:'olist',icon:'<i class="icon-list-numbered"></i>'},{name:'ulist',icon:'<i class="icon-list-bullet"></i>'}]});element.addEventListener('change',function(){editor.content.innerHTML=markdown.render(element.value);});editor.content.setAttribute('placeholder',element.placeholder);editor.content.innerHTML=markdown.render(element.value);editor.content.tabIndex=0;editor.content.onkeydown=function preventTab(event){if(event.which===9){event.preventDefault();if(document.activeElement){var focussable=Array.prototype.filter.call(document.querySelectorAll('a:not([disabled]), button:not([disabled]), select:not([disabled]), input[type=text]:not([disabled]), input[type=checkbox]:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"])'),function(element){return element.offsetWidth>0||element.offsetHeight>0||element===document.activeElement});var index=focussable.indexOf(document.activeElement);if(index>-1){if(event.shiftKey){var prevElement=focussable[index-1]||focussable[focussable.length-1];prevElement.focus();}
|
||||
else{var nextElement=focussable[index+1]||focussable[0];nextElement.focus();}}}}};var clean=function(e){e.stopPropagation();e.preventDefault();var clipboardData=e.clipboardData||window.clipboardData;window.pell.exec('insertText',clipboardData.getData('Text'));return true;};div.addEventListener('paste',clean);div.addEventListener('drop',clean);}});})(window);(function(window){"use strict";window.ls.container.get('view').add({selector:'data-forms-remove',controller:function(element){Array.prototype.slice.call(element.querySelectorAll('[data-remove]')).map(function(obj){obj.addEventListener('click',function(){element.parentNode.removeChild(element);});});}});})(window);(function(window){"use strict";window.ls.container.get('view').add({selector:'data-forms-switch',controller:function(element){let input=window.document.createElement('input');input.type='checkbox';input.className='switch';let syncA=function(){element.value=(input.checked)?'on':'off';};let syncB=function(){input.checked=(element.value==='on');};input.addEventListener('input',syncA);input.addEventListener('change',syncA);element.addEventListener('input',syncB);element.addEventListener('change',syncB);syncA();element.parentNode.insertBefore(input,element);}});})(window);(function(window){"use strict";window.ls.container.get('view').add({selector:'data-forms-text-count',controller:function(element){var counter=document.createElement('span');counter.className='counter';element.parentNode.insertBefore(counter,element.nextSibling);var count=function(){if(0<=element.maxLength){counter.innerText=(element.maxLength-element.value.length).toString()+' / '+element.maxLength;}
|
||||
else{var nextElement=focussable[index+1]||focussable[0];nextElement.focus();}}}}};var clean=function(e){e.stopPropagation();e.preventDefault();var clipboardData=e.clipboardData||window.clipboardData;window.pell.exec('insertText',clipboardData.getData('Text'));return true;};div.addEventListener('paste',clean);div.addEventListener('drop',clean);}});})(window);(function(window){"use strict";window.ls.container.get('view').add({selector:'data-forms-remove',controller:function(element){Array.prototype.slice.call(element.querySelectorAll('[data-remove]')).map(function(obj){obj.addEventListener('click',function(){element.parentNode.removeChild(element);});});}});})(window);(function(window){"use strict";window.ls.container.get('view').add({selector:'data-forms-switch',controller:function(element){let input=window.document.createElement('input');input.type='checkbox';input.className='switch';let syncA=function(){element.value=(input.checked)?'on':'off';};let syncB=function(){input.checked=(element.value==='on');};input.addEventListener('input',syncA);input.addEventListener('change',syncA);element.addEventListener('input',syncB);element.addEventListener('change',syncB);syncA();element.parentNode.insertBefore(input,element);}});})(window);(function(window){"use strict";window.ls.container.get('view').add({selector:'data-forms-tags',controller:function(element){let array=[];let tags=window.document.createElement('div');let preview=window.document.createElement('ul');let add=window.document.createElement('input');tags.className='tags';preview.className='tags-list';add.type='text';add.className='add';tags.addEventListener('click',function(){add.focus();});add.addEventListener('keydown',function(event){if(((event.key==="Enter"||event.key===" "))&&(add.value.length>0)){array.push(add.value);add.value='';element.value=JSON.stringify(array);check();event.preventDefault();}
|
||||
if(((event.key==="Backspace"||event.key==="Delete"))&&(add.value==='')){array.splice(-1,1)
|
||||
element.value=JSON.stringify(array);check();}
|
||||
return false;});let check=function(){try{array=JSON.parse(element.value)||[];}
|
||||
catch(error){console.log('error',element.value);array=[];}
|
||||
if(!Array.isArray(array)){array=[];}
|
||||
preview.innerHTML='';for(let index=0;index<array.length;index++){let value=array[index];let tag=window.document.createElement('li');tag.className='tag';tag.textContent=value;tag.addEventListener('click',function(){console.log(index);array.splice(index,1);element.value=JSON.stringify(array);check();});preview.appendChild(tag);}
|
||||
if(element.required&&array.length===0){add.setCustomValidity('Please add permissions');}
|
||||
else{add.setCustomValidity('');}};tags.appendChild(preview);tags.appendChild(add);element.parentNode.insertBefore(tags,element);element.addEventListener('change',check);check();}});})(window);(function(window){"use strict";window.ls.container.get('view').add({selector:'data-forms-text-count',controller:function(element){var counter=document.createElement('span');counter.className='counter';element.parentNode.insertBefore(counter,element.nextSibling);var count=function(){if(0<=element.maxLength){counter.innerText=(element.maxLength-element.value.length).toString()+' / '+element.maxLength;}
|
||||
else{var words=(element.value!=='')?element.value.trim().split(' ').length:0;counter.innerText=words+' words and '+element.value.length.toString()+' chars';}};element.addEventListener('keyup',count);element.addEventListener('change',count);element.addEventListener('cut',count);element.addEventListener('paste',count);element.addEventListener('drop',count);count();}});})(window);(function(window){"use strict";window.ls.container.get('view').add({selector:'data-forms-text-direction',controller:function(element){var rtlStock='^ا^ب^ت^ث^ج^ح^خ^د^ذ^ر^ز^س^ش^ص^ض^ط^ظ^ع^غ^ف^ق^ك^ل^م^ن^ه^و^ي^א^ב^ג^ד^ה^ו^ז^ח^ט^י^כ^ך^ל^מ^ם^נ^ן^ס^ע^פ^ף^צ^ץ^ק^ר^ש^ת^';var special=['\n',' ','״','"','_','\'','!','@','#','$','^','&','%','*','(',')','+','=','-','[',']','\\','/','{','}','|',':','<','>','?',',','.','0','1','2','3','4','5','6','7','8','9'];var setDirection=function(){var value=(element.value[0])?element.value:'';var direction='ltr';var align='left';for(var i=0;i<value.length;i++){if(-1===special.indexOf(value[i])){var firstChar=value[i];break;}}
|
||||
if(-1<rtlStock.indexOf('^'+firstChar+'^')){direction='rtl';align='right';}
|
||||
element.style.direction=direction;element.style.textAlign=align;};element.addEventListener('keyup',setDirection);element.addEventListener('change',setDirection);element.addEventListener('cut',setDirection);element.addEventListener('paste',setDirection);element.addEventListener('drop',setDirection);setDirection();}});})(window);(function(window){"use strict";window.ls.container.get('view').add({selector:'data-forms-text-resize',controller:function(element,window){function resize(){var scrollLeft=window.pageXOffset||(window.document.documentElement||window.document.body.parentNode||window.document.body).scrollLeft;var scrollTop=window.pageYOffset||(window.document.documentElement||window.document.body.parentNode||window.document.body).scrollTop;var offset=element.offsetHeight-element.clientHeight;element.style.height='auto';element.style.height=element.scrollHeight+offset+'px';window.scrollTo(scrollLeft,scrollTop);}
|
||||
|
||||
Vendored
+1
-1
@@ -1 +1 @@
|
||||
.pull-start{float:left}.pull-end{float:right}img[src=""]{visibility:hidden;display:inline-block}.margin-end{margin-right:20px!important}.margin-start{margin-left:20px!important}.margin-end-small{margin-right:10px!important}.margin-start-small{margin-left:10px!important}.margin-end-large{margin-right:50px!important}.margin-start-large{margin-left:50px!important}.margin-end-no{margin-right:0!important}.margin-start-no{margin-left:0!important}.margin-top{margin-top:30px!important}.margin-bottom{margin-bottom:30px!important}.margin-top-no{margin-top:0!important}.margin-bottom-no{margin-bottom:0!important}.margin-top-xxl{margin-top:140px!important}.margin-top-xl{margin-top:80px!important}.margin-top-large{margin-top:50px!important}.margin-top-small{margin-top:15px!important}.margin-top-tiny{margin-top:5px!important}.margin-top-negative{margin-top:-30px!important}.margin-top-negative-tiny{margin-top:-5px!important}.margin-top-negative-small{margin-top:-15px!important}.margin-top-negative-large{margin-top:-50px!important}.margin-top-negative-xl{margin-top:-80px!important}.margin-top-negative-xxl{margin-top:-100px!important}.margin-bottom-xxl{margin-bottom:140px!important}.margin-bottom-xl{margin-bottom:80px!important}.margin-bottom-large{margin-bottom:50px!important}.margin-bottom-small{margin-bottom:15px!important}.margin-bottom-tiny{margin-bottom:5px!important}.margin-bottom-negative{margin-bottom:-30px!important}.margin-bottom-negative-tiny{margin-bottom:-5px!important}.margin-bottom-negative-small{margin-bottom:-15px!important}.margin-bottom-negative-large{margin-bottom:-50px!important}.margin-bottom-negative-xl{margin-bottom:-80px!important}.margin-bottom-negative-xl{margin-bottom:-100px!important}.ratio-wide{height:0;overflow:hidden;padding-top:56%;position:relative;width:100%}.ratio-wide>*{position:absolute;top:0;left:0;width:100%;height:100%}.ratio-square{height:0;overflow:hidden;padding-top:56%;position:relative;width:100%}.ratio-square>*{position:absolute;top:0;left:0;width:100%;height:100%}.clear:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}*{font-family:Poppins,sans-serif,Arial;-webkit-font-smoothing:antialiased;font-weight:300}h1,h2,h3,h4,h5,h6{margin:0}h4,h5,h6{font-weight:400}.link,a{color:#1e849e;text-decoration:none;border-left:2px solid transparent;border-right:2px solid transparent;border-bottom:solid 1px transparent}.link:hover,a:hover{border-bottom:dotted 1px #1e849e}.link.disabled,a.disabled{opacity:.5}.link.disabled:hover,a.disabled:hover{border-bottom:none}.link.tag:hover,a.tag:hover{border-bottom:none;opacity:.9}b,strong{font-weight:500}p{margin:0 0 20px 0;line-height:30px}p.note{color:#b9b9b9}.note,small{color:#797979}.text-size-small{font-size:13px}.text-size-normal{font-size:16px}.text-one-liner{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.text-bold{font-weight:400!important}.text-danger{color:#f53d3d}.text-success{color:#1bbf61}.text-upper{text-transform:uppercase}.text-warning{color:#ffed4d}.text-focus{color:#f02e65}.text-fade{color:#b9b9b9}.text-disclaimer{font-size:11px;color:#b9b9b9}.text-fade-extra{color:#b9b9b9;opacity:.5}.text-line-high-large{line-height:30px}.text-line-high-xl{line-height:40px}.text-sign{margin:5px 0;font-size:25px;width:25px;height:25px;line-height:25px;display:inline-block}.text-align-center{text-align:center}.text-align-start{text-align:left}.text-align-end{text-align:right}.text-align-left{text-align:left}.text-align-right{text-align:right}.text-dir-ltr{direction:ltr;display:inline-block}.text-dir-rtl{direction:rtl;display:inline-block}.icon-dot-3:before{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}table{width:calc(100% + 60px);font-size:14px;border-collapse:collapse;margin:-30px;border-radius:10px;overflow:hidden;position:relative;table-layout:fixed}table thead{box-shadow:0 0 2px rgba(0,0,0,.25);border-bottom:solid 1px #f1f3f5}table thead th{position:sticky;top:0}table.small{font-size:12px}table.open-end tbody tr:last-child{border-bottom:none;font-weight:700;background:#f7fbf7}table.full tbody td,table.full tbody th{vertical-align:top;white-space:normal;overflow:auto;line-height:24px;padding-top:20px;padding-bottom:20px;height:auto}table .avatar{width:30px;height:30px}table tr{border-bottom:solid 1px #f1f3f5}table tr:last-child{border-bottom:none}table tr:nth-child(even){background:#fbfbfb}table th{text-align:left;font-weight:400}table th i{color:#b9b9b9;font-size:10px;display:inline-block;vertical-align:top;line-height:16px;padding:0 3px}table td,table th{height:65px;padding:0 15px;line-height:50px}table td:first-child,table th:first-child{padding-left:30px}table td:last-child,table th:last-child{padding-right:30px}@media only screen and (max-width:550px){table td:first-child,table th:first-child{width:auto}}table td,table th{overflow:hidden;white-space:nowrap}@media only screen and (max-width:550px),only screeLine truncated
|
||||
.pull-start{float:left}.pull-end{float:right}img[src=""]{visibility:hidden;display:inline-block}.margin-end{margin-right:20px!important}.margin-start{margin-left:20px!important}.margin-end-small{margin-right:10px!important}.margin-start-small{margin-left:10px!important}.margin-end-large{margin-right:50px!important}.margin-start-large{margin-left:50px!important}.margin-end-no{margin-right:0!important}.margin-start-no{margin-left:0!important}.margin-top{margin-top:30px!important}.margin-bottom{margin-bottom:30px!important}.margin-top-no{margin-top:0!important}.margin-bottom-no{margin-bottom:0!important}.margin-top-xxl{margin-top:140px!important}.margin-top-xl{margin-top:80px!important}.margin-top-large{margin-top:50px!important}.margin-top-small{margin-top:15px!important}.margin-top-tiny{margin-top:5px!important}.margin-top-negative{margin-top:-30px!important}.margin-top-negative-tiny{margin-top:-5px!important}.margin-top-negative-small{margin-top:-15px!important}.margin-top-negative-large{margin-top:-50px!important}.margin-top-negative-xl{margin-top:-80px!important}.margin-top-negative-xxl{margin-top:-100px!important}.margin-bottom-xxl{margin-bottom:140px!important}.margin-bottom-xl{margin-bottom:80px!important}.margin-bottom-large{margin-bottom:50px!important}.margin-bottom-small{margin-bottom:15px!important}.margin-bottom-tiny{margin-bottom:5px!important}.margin-bottom-negative{margin-bottom:-30px!important}.margin-bottom-negative-tiny{margin-bottom:-5px!important}.margin-bottom-negative-small{margin-bottom:-15px!important}.margin-bottom-negative-large{margin-bottom:-50px!important}.margin-bottom-negative-xl{margin-bottom:-80px!important}.margin-bottom-negative-xl{margin-bottom:-100px!important}.ratio-wide{height:0;overflow:hidden;padding-top:56%;position:relative;width:100%}.ratio-wide>*{position:absolute;top:0;left:0;width:100%;height:100%}.ratio-square{height:0;overflow:hidden;padding-top:56%;position:relative;width:100%}.ratio-square>*{position:absolute;top:0;left:0;width:100%;height:100%}.clear:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}*{font-family:Poppins,sans-serif,Arial;-webkit-font-smoothing:antialiased;font-weight:300}h1,h2,h3,h4,h5,h6{margin:0}h4,h5,h6{font-weight:400}.link,a{color:#1e849e;text-decoration:none;border-left:2px solid transparent;border-right:2px solid transparent;border-bottom:solid 1px transparent}.link:hover,a:hover{border-bottom:dotted 1px #1e849e}.link.disabled,a.disabled{opacity:.5}.link.disabled:hover,a.disabled:hover{border-bottom:none}.link.tag:hover,a.tag:hover{border-bottom:none;opacity:.9}b,strong{font-weight:500}p{margin:0 0 20px 0;line-height:30px}p.note{color:#b9b9b9}.note,small{color:#797979}.text-size-small{font-size:13px}.text-size-normal{font-size:16px}.text-one-liner{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.text-bold{font-weight:400!important}.text-danger{color:#f53d3d}.text-success{color:#1bbf61}.text-upper{text-transform:uppercase}.text-warning{color:#ffed4d}.text-focus{color:#f02e65}.text-fade{color:#b9b9b9}.text-disclaimer{font-size:11px;color:#b9b9b9}.text-fade-extra{color:#b9b9b9;opacity:.5}.text-line-high-large{line-height:30px}.text-line-high-xl{line-height:40px}.text-sign{margin:5px 0;font-size:25px;width:25px;height:25px;line-height:25px;display:inline-block}.text-align-center{text-align:center}.text-align-start{text-align:left}.text-align-end{text-align:right}.text-align-left{text-align:left}.text-align-right{text-align:right}.text-dir-ltr{direction:ltr;display:inline-block}.text-dir-rtl{direction:rtl;display:inline-block}.icon-dot-3:before{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}table{width:calc(100% + 60px);font-size:14px;border-collapse:collapse;margin:-30px;border-radius:10px;overflow:hidden;position:relative;table-layout:fixed}table thead{box-shadow:0 0 2px rgba(0,0,0,.25);border-bottom:solid 1px #f1f3f5}table thead th{position:sticky;top:0}table.small{font-size:12px}table.open-end tbody tr:last-child{border-bottom:none;font-weight:700;background:#f7fbf7}table.full tbody td,table.full tbody th{vertical-align:top;white-space:normal;overflow:auto;line-height:24px;padding-top:20px;padding-bottom:20px;height:auto}table .avatar{width:30px;height:30px}table tr{border-bottom:solid 1px #f1f3f5}table tr:last-child{border-bottom:none}table tr:nth-child(even){background:#fbfbfb}table th{text-align:left;font-weight:400}table th i{color:#b9b9b9;font-size:10px;display:inline-block;vertical-align:top;line-height:16px;padding:0 3px}table td,table th{height:65px;padding:0 15px;line-height:50px}table td:first-child,table th:first-child{padding-left:30px}table td:last-child,table th:last-child{padding-right:30px}@media only screen and (max-width:550px){table td:first-child,table th:first-child{width:auto}}table td,table th{overflow:hidden;white-space:nowrap}@media only screen and (max-width:550px),only screeLine truncated
|
||||
Vendored
+1
-1
@@ -1 +1 @@
|
||||
.pull-start{float:right}.pull-end{float:left}img[src=""]{visibility:hidden;display:inline-block}.margin-end{margin-left:20px!important}.margin-start{margin-right:20px!important}.margin-end-small{margin-left:10px!important}.margin-start-small{margin-right:10px!important}.margin-end-large{margin-left:50px!important}.margin-start-large{margin-right:50px!important}.margin-end-no{margin-left:0!important}.margin-start-no{margin-right:0!important}.margin-top{margin-top:30px!important}.margin-bottom{margin-bottom:30px!important}.margin-top-no{margin-top:0!important}.margin-bottom-no{margin-bottom:0!important}.margin-top-xxl{margin-top:140px!important}.margin-top-xl{margin-top:80px!important}.margin-top-large{margin-top:50px!important}.margin-top-small{margin-top:15px!important}.margin-top-tiny{margin-top:5px!important}.margin-top-negative{margin-top:-30px!important}.margin-top-negative-tiny{margin-top:-5px!important}.margin-top-negative-small{margin-top:-15px!important}.margin-top-negative-large{margin-top:-50px!important}.margin-top-negative-xl{margin-top:-80px!important}.margin-top-negative-xxl{margin-top:-100px!important}.margin-bottom-xxl{margin-bottom:140px!important}.margin-bottom-xl{margin-bottom:80px!important}.margin-bottom-large{margin-bottom:50px!important}.margin-bottom-small{margin-bottom:15px!important}.margin-bottom-tiny{margin-bottom:5px!important}.margin-bottom-negative{margin-bottom:-30px!important}.margin-bottom-negative-tiny{margin-bottom:-5px!important}.margin-bottom-negative-small{margin-bottom:-15px!important}.margin-bottom-negative-large{margin-bottom:-50px!important}.margin-bottom-negative-xl{margin-bottom:-80px!important}.margin-bottom-negative-xl{margin-bottom:-100px!important}.ratio-wide{height:0;overflow:hidden;padding-top:56%;position:relative;width:100%}.ratio-wide>*{position:absolute;top:0;left:0;width:100%;height:100%}.ratio-square{height:0;overflow:hidden;padding-top:56%;position:relative;width:100%}.ratio-square>*{position:absolute;top:0;left:0;width:100%;height:100%}.clear:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}*{font-family:Poppins,sans-serif,Arial;-webkit-font-smoothing:antialiased;font-weight:300}h1,h2,h3,h4,h5,h6{margin:0}h4,h5,h6{font-weight:400}.link,a{color:#1e849e;text-decoration:none;border-left:2px solid transparent;border-right:2px solid transparent;border-bottom:solid 1px transparent}.link:hover,a:hover{border-bottom:dotted 1px #1e849e}.link.disabled,a.disabled{opacity:.5}.link.disabled:hover,a.disabled:hover{border-bottom:none}.link.tag:hover,a.tag:hover{border-bottom:none;opacity:.9}b,strong{font-weight:500}p{margin:0 0 20px 0;line-height:30px}p.note{color:#b9b9b9}.note,small{color:#797979}.text-size-small{font-size:13px}.text-size-normal{font-size:16px}.text-one-liner{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.text-bold{font-weight:400!important}.text-danger{color:#f53d3d}.text-success{color:#1bbf61}.text-upper{text-transform:uppercase}.text-warning{color:#ffed4d}.text-focus{color:#f02e65}.text-fade{color:#b9b9b9}.text-disclaimer{font-size:11px;color:#b9b9b9}.text-fade-extra{color:#b9b9b9;opacity:.5}.text-line-high-large{line-height:30px}.text-line-high-xl{line-height:40px}.text-sign{margin:5px 0;font-size:25px;width:25px;height:25px;line-height:25px;display:inline-block}.text-align-center{text-align:center}.text-align-start{text-align:right}.text-align-end{text-align:left}.text-align-left{text-align:left}.text-align-right{text-align:right}.text-dir-ltr{direction:ltr;display:inline-block}.text-dir-rtl{direction:rtl;display:inline-block}.icon-dot-3:before{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}table{width:calc(100% + 60px);font-size:14px;border-collapse:collapse;margin:-30px;border-radius:10px;overflow:hidden;position:relative;table-layout:fixed}table thead{box-shadow:0 0 2px rgba(0,0,0,.25);border-bottom:solid 1px #f1f3f5}table thead th{position:sticky;top:0}table.small{font-size:12px}table.open-end tbody tr:last-child{border-bottom:none;font-weight:700;background:#f7fbf7}table.full tbody td,table.full tbody th{vertical-align:top;white-space:normal;overflow:auto;line-height:24px;padding-top:20px;padding-bottom:20px;height:auto}table .avatar{width:30px;height:30px}table tr{border-bottom:solid 1px #f1f3f5}table tr:last-child{border-bottom:none}table tr:nth-child(even){background:#fbfbfb}table th{text-align:right;font-weight:400}table th i{color:#b9b9b9;font-size:10px;display:inline-block;vertical-align:top;line-height:16px;padding:0 3px}table td,table th{height:65px;padding:0 15px;line-height:50px}table td:first-child,table th:first-child{padding-right:30px}table td:last-child,table th:last-child{padding-left:30px}@media only screen and (max-width:550px){table td:first-child,table th:first-child{width:auto}}table td,table th{overflow:hidden;white-space:nowrap}@media only screen and (max-width:550px),only screLine truncated
|
||||
.pull-start{float:right}.pull-end{float:left}img[src=""]{visibility:hidden;display:inline-block}.margin-end{margin-left:20px!important}.margin-start{margin-right:20px!important}.margin-end-small{margin-left:10px!important}.margin-start-small{margin-right:10px!important}.margin-end-large{margin-left:50px!important}.margin-start-large{margin-right:50px!important}.margin-end-no{margin-left:0!important}.margin-start-no{margin-right:0!important}.margin-top{margin-top:30px!important}.margin-bottom{margin-bottom:30px!important}.margin-top-no{margin-top:0!important}.margin-bottom-no{margin-bottom:0!important}.margin-top-xxl{margin-top:140px!important}.margin-top-xl{margin-top:80px!important}.margin-top-large{margin-top:50px!important}.margin-top-small{margin-top:15px!important}.margin-top-tiny{margin-top:5px!important}.margin-top-negative{margin-top:-30px!important}.margin-top-negative-tiny{margin-top:-5px!important}.margin-top-negative-small{margin-top:-15px!important}.margin-top-negative-large{margin-top:-50px!important}.margin-top-negative-xl{margin-top:-80px!important}.margin-top-negative-xxl{margin-top:-100px!important}.margin-bottom-xxl{margin-bottom:140px!important}.margin-bottom-xl{margin-bottom:80px!important}.margin-bottom-large{margin-bottom:50px!important}.margin-bottom-small{margin-bottom:15px!important}.margin-bottom-tiny{margin-bottom:5px!important}.margin-bottom-negative{margin-bottom:-30px!important}.margin-bottom-negative-tiny{margin-bottom:-5px!important}.margin-bottom-negative-small{margin-bottom:-15px!important}.margin-bottom-negative-large{margin-bottom:-50px!important}.margin-bottom-negative-xl{margin-bottom:-80px!important}.margin-bottom-negative-xl{margin-bottom:-100px!important}.ratio-wide{height:0;overflow:hidden;padding-top:56%;position:relative;width:100%}.ratio-wide>*{position:absolute;top:0;left:0;width:100%;height:100%}.ratio-square{height:0;overflow:hidden;padding-top:56%;position:relative;width:100%}.ratio-square>*{position:absolute;top:0;left:0;width:100%;height:100%}.clear:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}*{font-family:Poppins,sans-serif,Arial;-webkit-font-smoothing:antialiased;font-weight:300}h1,h2,h3,h4,h5,h6{margin:0}h4,h5,h6{font-weight:400}.link,a{color:#1e849e;text-decoration:none;border-left:2px solid transparent;border-right:2px solid transparent;border-bottom:solid 1px transparent}.link:hover,a:hover{border-bottom:dotted 1px #1e849e}.link.disabled,a.disabled{opacity:.5}.link.disabled:hover,a.disabled:hover{border-bottom:none}.link.tag:hover,a.tag:hover{border-bottom:none;opacity:.9}b,strong{font-weight:500}p{margin:0 0 20px 0;line-height:30px}p.note{color:#b9b9b9}.note,small{color:#797979}.text-size-small{font-size:13px}.text-size-normal{font-size:16px}.text-one-liner{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.text-bold{font-weight:400!important}.text-danger{color:#f53d3d}.text-success{color:#1bbf61}.text-upper{text-transform:uppercase}.text-warning{color:#ffed4d}.text-focus{color:#f02e65}.text-fade{color:#b9b9b9}.text-disclaimer{font-size:11px;color:#b9b9b9}.text-fade-extra{color:#b9b9b9;opacity:.5}.text-line-high-large{line-height:30px}.text-line-high-xl{line-height:40px}.text-sign{margin:5px 0;font-size:25px;width:25px;height:25px;line-height:25px;display:inline-block}.text-align-center{text-align:center}.text-align-start{text-align:right}.text-align-end{text-align:left}.text-align-left{text-align:left}.text-align-right{text-align:right}.text-dir-ltr{direction:ltr;display:inline-block}.text-dir-rtl{direction:rtl;display:inline-block}.icon-dot-3:before{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}table{width:calc(100% + 60px);font-size:14px;border-collapse:collapse;margin:-30px;border-radius:10px;overflow:hidden;position:relative;table-layout:fixed}table thead{box-shadow:0 0 2px rgba(0,0,0,.25);border-bottom:solid 1px #f1f3f5}table thead th{position:sticky;top:0}table.small{font-size:12px}table.open-end tbody tr:last-child{border-bottom:none;font-weight:700;background:#f7fbf7}table.full tbody td,table.full tbody th{vertical-align:top;white-space:normal;overflow:auto;line-height:24px;padding-top:20px;padding-bottom:20px;height:auto}table .avatar{width:30px;height:30px}table tr{border-bottom:solid 1px #f1f3f5}table tr:last-child{border-bottom:none}table tr:nth-child(even){background:#fbfbfb}table th{text-align:right;font-weight:400}table th i{color:#b9b9b9;font-size:10px;display:inline-block;vertical-align:top;line-height:16px;padding:0 3px}table td,table th{height:65px;padding:0 15px;line-height:50px}table td:first-child,table th:first-child{padding-right:30px}table td:last-child,table th:last-child{padding-left:30px}@media only screen and (max-width:550px){table td:first-child,table th:first-child{width:auto}}table td,table th{overflow:hidden;white-space:nowrap}@media only screen and (max-width:550px),only screLine truncated
|
||||
@@ -5,7 +5,98 @@
|
||||
{
|
||||
selector: 'data-forms-tags',
|
||||
controller: function(element) {
|
||||
let array = [];
|
||||
let tags = window.document.createElement('div');
|
||||
let preview = window.document.createElement('ul');
|
||||
let add = window.document.createElement('input');
|
||||
|
||||
tags.className = 'tags';
|
||||
|
||||
preview.className = 'tags-list';
|
||||
|
||||
add.type = 'text';
|
||||
add.className = 'add';
|
||||
|
||||
//add.required = element.required;
|
||||
|
||||
tags.addEventListener('click', function() {
|
||||
add.focus();
|
||||
});
|
||||
|
||||
add.addEventListener('keydown', function(event) {
|
||||
if (((event.key === "Enter" || event.key === " ")) && (add.value.length > 0)) {
|
||||
array.push(add.value);
|
||||
|
||||
add.value = '';
|
||||
|
||||
element.value = JSON.stringify(array);
|
||||
|
||||
check();
|
||||
|
||||
event.preventDefault();
|
||||
}
|
||||
if (((event.key === "Backspace" || event.key === "Delete")) && (add.value === '')) {
|
||||
array.splice(-1, 1)
|
||||
|
||||
element.value = JSON.stringify(array);
|
||||
|
||||
check();
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
let check = function() {
|
||||
try {
|
||||
array = JSON.parse(element.value) || [];
|
||||
}
|
||||
catch(error) {
|
||||
console.log('error', element.value);
|
||||
array = [];
|
||||
}
|
||||
|
||||
if(!Array.isArray(array)) {
|
||||
array = [];
|
||||
}
|
||||
|
||||
preview.innerHTML = '';
|
||||
|
||||
for (let index = 0; index < array.length; index++) {
|
||||
let value = array[index];
|
||||
let tag = window.document.createElement('li');
|
||||
|
||||
tag.className = 'tag';
|
||||
tag.textContent = value;
|
||||
|
||||
tag.addEventListener('click', function () {
|
||||
console.log(index);
|
||||
|
||||
array.splice(index, 1);
|
||||
|
||||
element.value = JSON.stringify(array);
|
||||
|
||||
check();
|
||||
});
|
||||
|
||||
preview.appendChild(tag);
|
||||
}
|
||||
|
||||
if(element.required && array.length === 0) {
|
||||
add.setCustomValidity('Please add permissions');
|
||||
}
|
||||
else {
|
||||
add.setCustomValidity('');
|
||||
}
|
||||
};
|
||||
|
||||
tags.appendChild(preview);
|
||||
tags.appendChild(add);
|
||||
|
||||
element.parentNode.insertBefore(tags, element);
|
||||
|
||||
element.addEventListener('change', check);
|
||||
|
||||
check();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
@@ -222,7 +222,13 @@ select {
|
||||
width: ~"calc(100% - 32px)";
|
||||
margin-bottom: 30px;
|
||||
|
||||
&[xype=file] {
|
||||
&[type=file] {
|
||||
line-height: 0;
|
||||
padding: 15px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&[xtype=file] {
|
||||
line-height: normal;
|
||||
height: auto;
|
||||
border: none;
|
||||
@@ -1104,4 +1110,55 @@ ol {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tags {
|
||||
.input;
|
||||
background: #ffffff;
|
||||
min-height: 42px;
|
||||
height: auto;
|
||||
|
||||
.add {
|
||||
display: inline-block!important;
|
||||
border: none;
|
||||
padding: 0;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul.tags-list {
|
||||
display: inline;
|
||||
|
||||
li {
|
||||
display: inline-block!important;
|
||||
.func-margin-end(10px);
|
||||
font-size: 16px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none; /* Chrome all / Safari all */
|
||||
-moz-user-select: none; /* Firefox all */
|
||||
-ms-user-select: none; /* IE 10+ */
|
||||
user-select: none; /* Likely future */
|
||||
|
||||
&::before {
|
||||
.pull-end;
|
||||
content: '\e807';
|
||||
font-family: fontello;
|
||||
font-style: normal;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
font-size: 12px;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 4px;
|
||||
.func-margin-start(6px);
|
||||
.func-margin-end(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user