From 110c378deb794bb146f3372c41ee29e7f79bcb71 Mon Sep 17 00:00:00 2001 From: Nate Jones Date: Sat, 15 Mar 2014 21:35:53 +0000 Subject: [PATCH] Dialplan Edit layout and style mods Integrated autosize jquery script for text inputs Style and functionality mods on domain selector and Enhanced template --- app/dialplan/dialplan_edit.php | 194 +++++++++------------- resources/jquery/jquery.autosize.input.js | 110 ++++++++++++ themes/enhanced/template.php | 81 +++++++-- 3 files changed, 257 insertions(+), 128 deletions(-) create mode 100644 resources/jquery/jquery.autosize.input.js diff --git a/app/dialplan/dialplan_edit.php b/app/dialplan/dialplan_edit.php index ef47495600..3e1ff59421 100644 --- a/app/dialplan/dialplan_edit.php +++ b/app/dialplan/dialplan_edit.php @@ -157,9 +157,11 @@ if (count($_POST) > 0 && strlen($_POST["persistformvar"]) == 0) { if ($action == "add") { $_SESSION['message'] = $text['message-add']; } - if ($action == "update") { + else if ($action == "update") { $_SESSION['message'] = $text['message-update']; } + header("Location: ?id=".$dialplan_uuid."&app_uuid=".$app_uuid); + exit; } //(count($_POST)>0 && strlen($_POST["persistformvar"]) == 0) @@ -338,40 +340,34 @@ if (count($_POST) > 0 && strlen($_POST["persistformvar"]) == 0) { echo "\n"; echo "\n"; echo "\n"; - echo "\n"; echo "\n"; echo "\n"; echo "\n"; echo "\n"; echo "\n"; echo "\n"; echo "\n"; echo "\n"; echo "\n"; echo "\n"; echo "\n"; echo "\n"; echo "\n"; - - echo "\n"; - echo "\n"; - echo "
\n"; - echo " ".$text['label-name'].":\n"; + echo " ".$text['label-name']."\n"; echo "\n"; - echo " \n"; - echo "
\n"; - echo "\n"; + echo "		\n"; + echo " \n"; echo "
\n"; - echo " ".$text['label-number'].":\n"; + echo " ".$text['label-number']."\n"; echo "\n"; - echo " \n"; - echo "
\n"; - echo "\n"; + echo " \n"; echo "
\n"; - echo " ".$text['label-context'].":\n"; + echo " ".$text['label-context']."\n"; echo "\n"; - echo " \n"; - echo "
\n"; - echo "\n"; + echo " \n"; echo "
\n"; - echo " ".$text['label-continue'].":\n"; + echo " ".$text['label-continue']."\n"; echo "\n"; echo " \n"; - echo "
\n"; echo "
\n"; - echo " ".$text['header-dialplan_detail'].":\n"; - echo "\n"; + echo "
\n"; //dialplan details if ($action == "update") { - //start the table - echo "
"; - echo "\n"; - echo "\n"; - echo " "; - echo ""; - echo "
\n"; + + echo "\n"; + echo "\n"; + echo "
\n"; //define the alternating row styles $c = 0; @@ -416,56 +405,41 @@ if (count($_POST) > 0 && strlen($_POST["persistformvar"]) == 0) { \n"; - echo "\n"; - echo "\n"; - echo "\n"; - echo "\n"; - echo "\n"; - echo "\n"; - echo "\n"; - echo "\n"; - echo "\n"; - echo "\n"; - echo "\n"; - if ($result_count > 0) { + + echo "
".$text['label-tag']."".$text['label-type']."".$text['label-data']."".$text['label-break']."".$text['label-inline']."".$text['label-group']."".$text['label-order']." 
\n"; + $x = 0; foreach($details as $group) { - if ($x > 0) { - echo "
"; - echo ""; - echo "

"; - echo "
\n"; - echo "\n"; - echo "\n"; - echo "\n"; - echo "\n"; - echo "\n"; - echo "\n"; - echo "\n"; - echo "\n"; - echo "\n"; - echo "\n"; - echo "\n"; + if ($x != 0) { + echo ""; } - foreach($group as $row) { + echo "\n"; + echo "\n"; + echo "\n"; + echo "\n"; + echo "\n"; + echo "\n"; + echo "\n"; + echo "\n"; + echo "\n"; + echo "\n"; + + foreach($group as $index => $row) { //get the values from the database and set as variables $dialplan_detail_uuid = $row['dialplan_detail_uuid']; @@ -499,11 +473,11 @@ if (count($_POST) > 0 && strlen($_POST["persistformvar"]) == 0) { //determine whether to hide the element if (strlen($dialplan_detail_tag) == 0) { $element['hidden'] = false; - $element['visibility'] = "visibility:visible;"; + $element['visibility'] = "display: inline;"; } else { $element['hidden'] = true; - $element['visibility'] = "visibility:hidden;"; + $element['visibility'] = "display: none;"; } //add the primary key uuid if (strlen($dialplan_detail_uuid) > 0) { @@ -511,28 +485,26 @@ if (count($_POST) > 0 && strlen($_POST["persistformvar"]) == 0) { } //tag $selected = "selected=\"selected\" "; - if ($element['hidden']) { $element['width'] = '0'; } else { $element['width'] = '97'; } - echo "\n"; //type - if ($element['hidden']) { $element['width'] = '0'; } else { $element['width'] = '185'; } - echo "\n"; //data - if ($element['hidden']) { $element['width'] = '0'; } else { $element['width'] = '200'; } - echo "\n"; //break - if ($element['hidden']) { $element['width'] = '0'; } else { $element['width'] = '88'; } - echo "\n"; //inline - if ($element['hidden']) { $element['width'] = '0'; } else { $element['width'] = '65'; } - echo "\n"; //group - if ($element['hidden']) { $element['width'] = '0'; } else { $element['width'] = '30'; } - echo "\n"; //order - if ($element['hidden']) { $element['width'] = '0'; } else { $element['width'] = '32'; } - echo "\n"; //end the row echo "\n"; + if ($index != 999) { + echo ""; + } //increment the value $x++; } @@ -687,26 +657,21 @@ if (count($_POST) > 0 && strlen($_POST["persistformvar"]) == 0) { $x++; } //end foreach unset($sql, $result, $row_count); + + echo "
".$text['label-tag']."".$text['label-type']."".$text['label-data']."".$text['label-break']."".$text['label-inline']."".$text['label-group']."".$text['label-order']." 

".$text['label-tag']."".$text['label-type']."".$text['label-data']."".$text['label-break']."".$text['label-inline']."".$text['label-group']."".$text['label-order']." 
\n"; + echo "\n"; if ($element['hidden']) { echo " \n"; } - echo " \n"; echo " \n"; - echo " \n"; - echo " \n"; - echo " \n"; - echo " \n"; - echo " \n"; - //echo " \n"; + echo " \n"; + echo " \n"; + echo " \n"; + echo " \n"; + echo " \n"; + //echo " \n"; echo " \n"; echo "\n"; + echo "\n"; if ($element['hidden']) { echo " \n"; } - echo " \n"; if (strlen($dialplan_detail_type) > 0) { echo " \n"; echo " \n"; @@ -589,46 +561,42 @@ if (count($_POST) > 0 && strlen($_POST["persistformvar"]) == 0) { //echo " \n"; echo "\n"; + echo "\n"; if ($element['hidden']) { echo " \n"; } - echo " \n"; + echo " \n"; echo "\n"; + echo "\n"; if ($element['hidden']) { echo " \n"; } - echo " \n"; echo " \n"; - echo " \n"; - echo " \n"; - echo " \n"; - echo " \n"; + echo " \n"; + echo " \n"; + echo " \n"; + echo " \n"; echo " \n"; echo "\n"; + echo "\n"; if ($element['hidden']) { echo " \n"; } - echo " \n"; echo " \n"; - echo " \n"; - echo " \n"; + echo " \n"; + echo " \n"; echo " \n"; echo "\n"; + echo "\n"; if ($element['hidden']) { echo " \n"; } - echo " \n"; + echo " \n"; /* echo " \n"; + echo "\n"; if ($element['hidden']) { echo " \n"; } - echo " \n"; + echo " \n"; /* echo "
"; + } //end if results - echo "
"; - echo ""; - - echo "
"; - echo "
"; + echo "\n"; + echo "\n"; + echo ""; } //end if update - //echo "
\n"; - //echo " ".$text['description-conditions_and_actions']."\n"; - echo "\n"; - echo "\n"; - + echo "\n"; echo "\n"; - echo "\n"; echo "\n"; echo "\n"; echo "\n"; echo "\n"; echo "\n"; echo "\n"; echo "\n"; echo "\n"; diff --git a/resources/jquery/jquery.autosize.input.js b/resources/jquery/jquery.autosize.input.js new file mode 100644 index 0000000000..6ed3c3fe5e --- /dev/null +++ b/resources/jquery/jquery.autosize.input.js @@ -0,0 +1,110 @@ +// source: https://github.com/MartinF/jQuery.Autosize.Input + +var Plugins; +(function (Plugins) { + var AutosizeInput = (function () { + function AutosizeInput(input, options) { + var _this = this; + this._input = $(input); + this._options = options; + this._mirror = $(''); + $.each([ + 'fontFamily', + 'fontSize', + 'fontWeight', + 'fontStyle', + 'letterSpacing', + 'textTransform', + 'wordSpacing', + 'textIndent' + ], function (i, val) { + _this._mirror[0].style[val] = _this._input.css(val); + }); + $("body").append(this._mirror); + this._input.bind("keydown input", function (e) { + _this.update(); + }); + (function () { + _this.update(); + })(); + } + Object.defineProperty(AutosizeInput.prototype, "options", { + get: function () { + return this._options; + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(AutosizeInput, "instanceKey", { + get: function () { + return "autosizeInputInstance"; + }, + enumerable: true, + configurable: true + }); + AutosizeInput.prototype.update = function () { + var value = this._input.val(); + if(!value) { + value = this._input.attr("placeholder"); + } + if(value === this._mirror.text()) { + return; + } + this._mirror.text(value); + var newWidth = this._mirror.width() + this._options.space; + this._input.width(newWidth); + }; + return AutosizeInput; + })(); + Plugins.AutosizeInput = AutosizeInput; + var AutosizeInputOptions = (function () { + function AutosizeInputOptions(space) { + if (typeof space === "undefined") { space = 30; } + this._space = space; + } + Object.defineProperty(AutosizeInputOptions.prototype, "space", { + get: function () { + return this._space; + }, + set: function (value) { + this._space = value; + }, + enumerable: true, + configurable: true + }); + return AutosizeInputOptions; + })(); + Plugins.AutosizeInputOptions = AutosizeInputOptions; + (function ($) { + var pluginDataAttributeName = "autosize-input"; + var validTypes = [ + "text", + "password", + "search", + "url", + "tel", + "email" + ]; + $.fn.autosizeInput = function (options) { + return this.each(function () { + if(!(this.tagName == "INPUT" && $.inArray(this.type, validTypes) > -1)) { + return; + } + var $this = $(this); + if(!$this.data(Plugins.AutosizeInput.instanceKey)) { + if(options == undefined) { + var options = $this.data(pluginDataAttributeName); + if(!(options && typeof options == 'object')) { + options = new AutosizeInputOptions(); + } + } + $this.data(Plugins.AutosizeInput.instanceKey, new Plugins.AutosizeInput(this, options)); + } + }); + }; + $(function () { + $("input[data-" + pluginDataAttributeName + "]").autosizeInput(); + }); + })(jQuery); +})(Plugins || (Plugins = {})); + diff --git a/themes/enhanced/template.php b/themes/enhanced/template.php index 391dc9522e..1df47ec442 100644 --- a/themes/enhanced/template.php +++ b/themes/enhanced/template.php @@ -164,17 +164,23 @@ input.txt, textarea.txt, select.txt, .formfld { font-family: arial; font-size: 12px; color: #000; - width: 50%; text-align: left; padding: 5px; border: 1px solid #c0c0c0; background-color: #fff; - -webkit-box-shadow: 0px 0px 3px #cddaf0 inset; - -moz-box-shadow: 0px 0px 3px #cddaf0 inset; box-shadow: 0px 0px 3px #cddaf0 inset; + -moz-box-shadow: 0px 0px 3px #cddaf0 inset; + -webkit-box-shadow: 0px 0px 3px #cddaf0 inset; + border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; - border-radius: 3px; + } + +input.txt, .formfld { + transition: width 0.25s; + -moz-transition: width 0.25s; + -webkit-transition: width 0.25s; + max-width: 500px; } input.txt:focus, .formfld:focus { @@ -190,8 +196,12 @@ select.formfld { input.txt { width: 98.75%; -} + } + +input[type=text]::-ms-clear { + display: none; +} .vncell { border-bottom: 1px solid #fff; @@ -218,6 +228,31 @@ input.txt { border-right: 3px solid #cbcfd5; } +.vncellcol { + background-color: #e5e9f0; + padding: 8px; + padding-bottom: 6px; + text-align: left; + color: #000; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + border-radius: 4px; + border-bottom: 3px solid #e5e9f0; +} + +.vncellcolreq { + background-color: #e5e9f0; + padding: 8px; + padding-bottom: 6px; + text-align: left; + font-weight: bold; + color: #000; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + border-radius: 4px; + border-bottom: 3px solid #cbcfd5; +} + .vtable { border-bottom: 1px solid #e5e9f0; color: #666; @@ -225,8 +260,16 @@ input.txt { text-align: left; padding: 7px; background-color: #fff; + vertical-align: middle; } +.vtablerow { + color: #666; + text-align: left; + background-color: #fff; + vertical-align: middle; + height: 33px; +} .listbg { border-bottom: 1px solid #a4aebf; @@ -634,13 +677,15 @@ table tr:nth-last-child(-5) td:first-of-type { height: 100%; padding: 1px; background-color: #fff; - border: 1px solid #a4a4a4; + border: 1px solid #a4aebf; } DIV.domains_list_item { + border-bottom: 1px solid #c5d1e5; padding: 5px 8px 8px 8px; overflow: hidden; white-space: nowrap; + cursor: pointer; } DIV.domains_list_item SPAN.domain_list_item_description { @@ -675,6 +720,9 @@ table tr:nth-last-child(-5) td:first-of-type { + + + + + @@ -741,7 +798,7 @@ table tr:nth-last-child(-5) td:first-of-type {

- +
-
-
".$text['label-username'].":\n"; //echo "\n"; echo "
\n"; //echo "\n"; @@ -836,7 +893,7 @@ table tr:nth-last-child(-5) td:first-of-type { //echo " ".$text['label-password'].":\n"; //echo "\n"; echo "\n"; //echo "\n";
\n"; - echo " ".$text['label-order'].":\n"; + echo "\n"; + echo " ".$text['label-order']."\n"; echo "\n"; echo "
\n"; - echo " ".$text['label-enabled'].":\n"; + echo " ".$text['label-enabled']."\n"; echo "\n"; echo " \n"; - echo "
\n"; - echo "\n"; echo "
\n"; - echo " ".$text['label-description'].":\n"; + echo " ".$text['label-description']."\n"; echo "\n"; - echo " \n"; - echo "
\n"; + echo " \n"; echo "
\n"; - echo " \n"; + echo " \n"; echo "
\n"; - echo " \n"; + echo " \n"; echo "