diff --git a/src/opnsense/mvc/app/views/layouts/default.volt b/src/opnsense/mvc/app/views/layouts/default.volt index e43b09392..368bad093 100644 --- a/src/opnsense/mvc/app/views/layouts/default.volt +++ b/src/opnsense/mvc/app/views/layouts/default.volt @@ -169,6 +169,10 @@ + + + + diff --git a/src/opnsense/www/css/tokenize2.css b/src/opnsense/www/css/tokenize2.css new file mode 100644 index 000000000..e37456b09 --- /dev/null +++ b/src/opnsense/www/css/tokenize2.css @@ -0,0 +1,167 @@ +.tokenize > .tokens-container { + position: relative; + list-style: none; + padding: 0 0 5px 5px; + height: auto; + min-height: 34px; + cursor: text; + background-color: #fff; + border: 1px solid #ccc; + border-radius: 3px; +} + +.tokenize > .tokens-container.disabled { + background-color: #eee; + cursor: not-allowed; +} + +.tokenize.focus > .tokens-container { + outline: 0; + border-color: #66afe9; + -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); + box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); +} + +.tokenize > .tokens-container.input-sm { + padding: 0 0 4px 4px; + min-height: 30px; +} + +.tokenize > .tokens-container.input-lg { + padding: 0 0 9px 9px; + min-height: 46px; +} + +.tokenize > .tokens-container > .token { + padding: 0 1.2em 0 5px; + background-color: #eff2f7; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; +} + +.tokenize > .tokens-container > .token, +.tokenize > .tokens-container > .placeholder, +.tokenize > .tokens-container > .token-search { + border: 1px solid #cdd5e3; + display: inline-block; + margin: 5px 5px 0 0; + position: relative; + vertical-align: middle; +} + +.tokenize.sortable > .tokens-container > .token { + cursor: move; +} + +.tokenize.single > .tokens-container > .token { + display: block; + border-color: #fff; + background-color: transparent; +} + +.tokenize.sortable > .tokens-container > .token.shadow { + border-color: #ccc; + background-color: #ccc; + filter: alpha(opacity=50); + opacity: .2; +} + +.tokenize > .tokens-container > .placeholder, +.tokenize > .tokens-container > .token-search { + padding: 0; + border-color: #fff; +} + +.tokenize > .tokens-container > .placeholder { + color: #ccc; +} + +.tokenize > .tokens-container > .token-search > input { + padding: 0; + margin: 0; + line-height: 1em; + border: 1px solid #fff; + background: transparent; + border-left: none; + border-right: none; + outline: none; + width: 100%; +} + +.tokenize > .tokens-container > .token-search > input::-ms-clear { + display: none; +} + +.tokenize > .tokens-container.input-sm > .placeholder, +.tokenize > .tokens-container.input-sm > .token-search, +.tokenize > .tokens-container.input-sm > .token { + margin: 4px 4px 0 0; +} + +.tokenize > .tokens-container.input-lg > .placeholder, +.tokenize > .tokens-container.input-lg > .token-search, +.tokenize > .tokens-container.input-lg > .token { + margin: 9px 9px 0 0; +} + +.tokenize > .tokens-container > .token.pending-delete { + background-color: #5b72a4; + border-color: #425c96; + color: #fff +} + +.tokenize > .tokens-container > .token > .dismiss { + position: absolute; + right: 5px; + color: #a9b9d8; + text-decoration: none; + cursor: pointer; +} + +.tokenize > .tokens-container > .token > .dismiss:after { + content: "×"; +} + +.tokenize > .tokens-container > .token.pending-delete > .dismiss { + color: #aaa; +} + +.tokenize-dropdown { + position: absolute; + display: none; +} + +.tokenize-dropdown > .dropdown-menu { + min-height: 10px; + width: 100%; + display: block; + margin: -1px 0 0 0; + visibility: visible; + opacity: 1; +} + +.tokenize-dropdown > .dropdown-menu li { + cursor: pointer; +} + +.tokenize-dropdown > .dropdown-menu li > a .tokenize-highlight { + font-weight: bold; +} + +.tokenize-dropdown > .dropdown-menu li.locked { + padding: 3px 20px; + color: #333; + white-space: nowrap; +} + +.tokenize-dropdown > .dropdown-menu li.locked, +.tokenize-dropdown > .dropdown-menu li > a { + text-overflow: ellipsis; + overflow-x: hidden; +} + +.tokenize-dropdown > .dropdown-menu li:not(.active) a:hover, +.tokenize-dropdown > .dropdown-menu li:not(.active) a:focus { + background-color: transparent; +} \ No newline at end of file diff --git a/src/opnsense/www/js/tokenize2.min.js b/src/opnsense/www/js/tokenize2.min.js new file mode 100644 index 000000000..487ba9049 --- /dev/null +++ b/src/opnsense/www/js/tokenize2.min.js @@ -0,0 +1 @@ +!function(t){"function"==typeof define&&define.amd?define(["jquery"],t):"object"==typeof module&&module.exports?module.exports=function(e,o){return void 0===o&&(o="undefined"!=typeof window?require("jquery"):require("jquery")(e)),t(o),o}:t(jQuery)}(function(t){var e=function(o,i){this.control=!1,this.element=t(o),this.options=t.extend({},e.DEFAULTS,i),this.options.tabIndex=-1===this.options.tabIndex?0:this.options.tabIndex,this.options.sortable=1!==this.options.tokensMaxItems&&this.options.sortable,this.bind(),this.trigger("tokenize:load")},o=8,i=9,n=13,s=27,r=38,a=40,h=17,d=16;e.VERSION="1.0",e.DEBOUNCE=null,e.DEFAULTS={tokensMaxItems:0,tokensAllowCustom:!1,dropdownMaxItems:10,searchMinLength:0,searchFromStart:!0,searchHighlight:!0,displayNoResultsMessage:!1,noResultsMessageText:'No results mached "%s"',delimiter:",",dataSource:"select",debounce:0,placeholder:!1,sortable:!1,allowEmptyValues:!1,zIndexMargin:500,tabIndex:0},e.prototype.trigger=function(t,e,o,i){this.element.trigger(t,e,o,i)},e.prototype.bind=function(){this.element.on("tokenize:load",{},t.proxy(function(){this.init()},this)).on("tokenize:clear",{},t.proxy(function(){this.clear()},this)).on("tokenize:remap",{},t.proxy(function(){this.remap()},this)).on("tokenize:select",{},t.proxy(function(t,e){this.focus(e)},this)).on("tokenize:deselect",{},t.proxy(function(){this.blur()},this)).on("tokenize:search",{},t.proxy(function(t,e){this.find(e)},this)).on("tokenize:paste",{},t.proxy(function(){this.paste()},this)).on("tokenize:dropdown:up",{},t.proxy(function(){this.dropdownSelectionMove(-1)},this)).on("tokenize:dropdown:down",{},t.proxy(function(){this.dropdownSelectionMove(1)},this)).on("tokenize:dropdown:clear",{},t.proxy(function(){this.dropdownClear()},this)).on("tokenize:dropdown:show",{},t.proxy(function(){this.dropdownShow()},this)).on("tokenize:dropdown:hide",{},t.proxy(function(){this.dropdownHide()},this)).on("tokenize:dropdown:fill",{},t.proxy(function(t,e){this.dropdownFill(e)},this)).on("tokenize:dropdown:itemAdd",{},t.proxy(function(t,e){this.dropdownAddItem(e)},this)).on("tokenize:keypress",{},t.proxy(function(t,e){this.keypress(e)},this)).on("tokenize:keydown",{},t.proxy(function(t,e){this.keydown(e)},this)).on("tokenize:keyup",{},t.proxy(function(t,e){this.keyup(e)},this)).on("tokenize:tokens:reorder",{},t.proxy(function(){this.reorder()},this)).on("tokenize:tokens:add",{},t.proxy(function(t,e,o,i){this.tokenAdd(e,o,i)},this)).on("tokenize:tokens:remove",{},t.proxy(function(t,e){this.tokenRemove(e)},this))},e.prototype.init=function(){this.id=this.guid(),this.element.hide(),this.element.attr("multiple")||console.error("Attribute multiple is missing, tokenize2 can be buggy !"),this.dropdown=void 0,this.searchContainer=t('
  • '),this.input=t('').on("keydown",{},t.proxy(function(t){this.trigger("tokenize:keydown",[t])},this)).on("keypress",{},t.proxy(function(t){this.trigger("tokenize:keypress",[t])},this)).on("keyup",{},t.proxy(function(t){this.trigger("tokenize:keyup",[t])},this)).on("focus",{},t.proxy(function(){this.input.val().length>=this.options.searchMinLength&&this.input.val().length>0&&this.trigger("tokenize:search",[this.input.val()])},this)).on("paste",{},t.proxy(function(){this.options.tokensAllowCustom&&setTimeout(t.proxy(function(){this.trigger("tokenize:paste")},this),10)},this)),this.tokensContainer=t('