Dev Changed navigation elements to jQuery UI buttons and added icons

git-svn-id: file:///Users/Shitiz/Downloads/lssvn/source/limesurvey_ci@11189 b72ed6b6-b9f8-46b5-92b4-906544132732
LimeSurvey · Oct 17, 2011 · 6294386 · 6294386
1 parent 9ba3e30
commit 6294386
Show file tree

Hide file tree

Showing 30 changed files with 1,702 additions and 144 deletions.
diff --git a/application/controllers/admin/templates.php b/application/controllers/admin/templates.php
@@ -710,6 +710,7 @@ function _initcssfiles()
         $cssfiles[]=array('name'=>'ie_fix_6.css');
         $cssfiles[]=array('name'=>'ie_fix_7.css');
         $cssfiles[]=array('name'=>'ie_fix_8.css');
+		$cssfiles[]=array('name'=>'jquery-ui-custom.css');
         $cssfiles[]=array('name'=>'print_template.css');
         $cssfiles[]=array('name'=>'template.js');
 

diff --git a/application/helpers/frontend_helper.php b/application/helpers/frontend_helper.php
@@ -2252,31 +2252,31 @@ function surveymover()
             //first step and we do not want to go back to the welcome screen since we don't show that...
             //so skip the prev button
         } else {
-            $surveymover .= "<input class='submit' accesskey='p' type='button' onclick=\"javascript:document.limesurvey.move.value = 'moveprev'; $('#limesurvey').submit();\" value=' &lt;&lt; "
-            . $clang->gT("Previous")." ' name='move2' id='moveprevbtn' $disabled />\n";
+            $surveymover .= "<button class='submit' accesskey='p' type='button' onclick=\"javascript:document.limesurvey.move.value = 'moveprev'; $('#limesurvey').submit();\" value='"
+			. $clang->gT("Previous")."' name='move2' id='moveprevbtn' $disabled>". $clang->gT("Previous")."</button>\n";
         }
     }
 
     if (isset($_SESSION['step']) && $_SESSION['step'] && (!$_SESSION['totalsteps'] || ($_SESSION['step'] < $_SESSION['totalsteps'])))
     {
-        $surveymover .=  "\t<input class='submit' type='submit' accesskey='n' onclick=\"javascript:document.limesurvey.move.value = 'movenext';\" value=' "
-        . $clang->gT("Next")." &gt;&gt; ' name='move2' id='movenextbtn' $disabled />\n";
+        $surveymover .=  "\t<button class='submit' type='submit' accesskey='n' onclick=\"javascript:document.limesurvey.move.value = 'movenext';\"
+		value='".$clang->gT("Next")."' name='move2' id='movenextbtn' $disabled>".$clang->gT("Next")."</button>\n";
     }
     // here, in some lace, is where I must modify to turn the next button conditionable
     if (!isset($_SESSION['step']) || !$_SESSION['step'])
     {
-        $surveymover .=  "\t<input class='submit' type='submit' accesskey='n' onclick=\"javascript:document.limesurvey.move.value = 'movenext';\" value=' "
-        . $clang->gT("Next")." &gt;&gt; ' name='move2' id='movenextbtn' $disabled />\n";
+        $surveymover .=  "\t<button class='submit' type='submit' accesskey='n' onclick=\"javascript:document.limesurvey.move.value = 'movenext';\" 
+		value='".$clang->gT("Next")."' name='move2' id='movenextbtn' $disabled>".$clang->gT("Next")."</button>\n";
     }
     if (isset($_SESSION['step']) && $_SESSION['step'] && ($_SESSION['step'] == $_SESSION['totalsteps']) && $presentinggroupdescription == "yes")
     {
-        $surveymover .=  "\t<input class='submit' type='submit' onclick=\"javascript:document.limesurvey.move.value = 'movenext';\" value=' "
-        . $clang->gT("Next")." &gt;&gt; ' name='move2' id=\"movenextbtn\" $disabled />\n";
+        $surveymover .=  "\t<button class='submit' type='submit' accesskey='n' onclick=\"javascript:document.limesurvey.move.value = 'movenext';\" 
+		value='".$clang->gT("Next")."' name='move2' id=\"movenextbtn\" $disabled>".$clang->gT("Next")."</button>\n";
     }
     if (($_SESSION['step'] && ($_SESSION['step'] == $_SESSION['totalsteps']) && !$presentinggroupdescription) || $thissurvey['format'] == 'A')
     {
-        $surveymover .= "\t<input class=\"submit\" type=\"submit\" accesskey=\"l\" onclick=\"javascript:document.limesurvey.move.value = 'movesubmit';\" value=\""
-        . $clang->gT("Submit")."\" name=\"move2\" id=\"movesubmitbtn\" $disabled />\n";
+        $surveymover .= "\t<button class=\"submit\" type=\"submit\" accesskey=\"l\" onclick=\"javascript:document.limesurvey.move.value = 'movesubmit';\" 
+		value=\"".$clang->gT("Submit")."\" name=\"move2\" id=\"movesubmitbtn\" $disabled>".$clang->gT("Submit")."</button>\n";
     }
 
     //	$surveymover .= "<input type='hidden' name='PHPSESSID' value='".session_id()."' id='PHPSESSID' />\n";

diff --git a/scripts/survey_runtime.js b/scripts/survey_runtime.js
@@ -109,12 +109,30 @@ $(document).ready(function()
             });
         }
     }
-// #index
+
+	// #index
     if ($("#index").size() && $("#index .row.current").size()){
         var idx = $("#index");
         var row = $("#index .row.current");
         idx.scrollTop(row.position().top - idx.height() / 2 - row.height() / 2);
     }
+
+	// Nav buttons
+	if ($.browser.msie && $.browser.version.substr(0,1)<8 && $('button.submit').length > 0) { // Get rid of the focus outline in IE7
+		$('#movenextbtn, #movesubmitbtn').focus().blur(); 
+	}
+
+	$('#moveprevbtn').button({
+		icons: {
+			primary: 'ui-icon-triangle-1-w'
+		}
+    });
+	$('#movenextbtn').button({
+		icons: {
+			secondary: 'ui-icon-triangle-1-e'
+		}
+	});
+	$('#movesubmitbtn, input.saveall, input.clearall').button();
 });
 
 gmaps = new Object;

diff --git a/templates/basic/ie_fix_7.css b/templates/basic/ie_fix_7.css
@@ -1,4 +1,37 @@
 /* The following styles are for all versions of IE 7 */
+
+/*** Start jQuery UI Theme Styles ***/
+
+.ui-button,
+input.ui-button { 
+	padding: 0.2em 0 0.1em 0;
+}
+
+.ui-button-icon-only .ui-icon,
+.ui-button-text-icon-primary .ui-icon,
+.ui-button-text-icon-secondary .ui-icon,
+.ui-button-text-icons .ui-icon,
+.ui-button-icons-only .ui-icon {
+}
+
+.ui-button-text-icon-primary .ui-button-text {
+	padding: 0 0 0 1.0em; 
+}
+
+.ui-button-text-icon-secondary .ui-button-text {
+	padding: 0 1.2em 0 0; 
+}
+
+.ui-button-text-icons .ui-button-text {
+	padding: 0 1.0em; 
+}
+
+/*** End jQuery UI Theme Styles ***/
+
+#moveprevbtn {
+	margin-right: 0.3em;
+}
+
 .yes-no .answer ul, .gender .answer ul, .choice-5-pt-radio .answer ul {
   margin-left: 2.5em;
 }

diff --git a/templates/basic/template.css b/templates/basic/template.css
@@ -1,3 +1,127 @@
+
+
+/*** Start jQuery UI Theme Styles ***/
+
+button.ui-button::-moz-focus-inner {
+	border: 0; 
+	padding: 0;   /* Get rid of extra padding in focused button in FF */
+}
+
+.ui-button { 
+	position: relative; 
+	padding: 0.1em 0 0.1em 0; 
+	cursor: pointer;
+	font-family: Arial, Verdana, Geneva, sans-serif;
+	font-size: 1.0em;
+	font-weight: normal;
+	line-height: normal;
+}
+
+button.ui-state-default,
+input.ui-state-default {  
+	color: #333333; 
+	border: 1px solid #A0A0A0;
+}
+
+button.ui-state-hover,
+input.ui-state-hover {  
+	color: #212121; 
+	border: 1px solid #999999;
+}
+
+button.ui-state-active,
+input.ui-state-active {  
+	color: #212121; 
+	border: 1px solid #AAAAAA; 
+}
+
+.ui-button-icon-only { 
+	width: 2.2em; /* To make room for the icon, a width needs to be set here */
+} 
+
+button.ui-button-icon-only { 
+	width: 2.4em; /* Button elements seem to need a little more width */
+}
+
+.ui-button-icons-only { 
+	width: 3.4em; 
+} 
+
+button.ui-button-icons-only {
+	width: 3.7em; 
+}
+
+/* Button text elements */
+.ui-button-text-only .ui-button-text {
+	padding: 0 1em; 
+}
+
+.ui-button-icon-only .ui-button-text, 
+.ui-button-icons-only .ui-button-text {
+	text-indent: -9999999px; 
+}
+
+.ui-button-text-icon-primary .ui-button-text {
+	padding: 0 0.7em 0 1.7em; 
+}
+
+.ui-button-text-icon-secondary .ui-button-text {
+	padding: 0 1.7em 0 0.7em; 
+}
+
+.ui-button-text-icons .ui-button-text {
+	padding: 0 1.7em; 
+}
+
+input.ui-button {
+	padding: 0.1em 1em 0.1em 1em;  /* No icon support for input elements, provide padding by default */
+}
+
+/* Button icon element(s) */
+.ui-button-icon-only .ui-icon,
+.ui-button-text-icon-primary .ui-icon,
+.ui-button-text-icon-secondary .ui-icon,
+.ui-button-text-icons .ui-icon,
+.ui-button-icons-only .ui-icon {
+	position: absolute;
+	top: 50%;
+	margin-top: -8px; 
+}
+
+.ui-button-icon-only .ui-icon {
+	left: 50%; 
+	margin-left: -8px; 
+}
+
+.ui-button-text-icon-primary .ui-button-icon-primary, 
+.ui-button-text-icons .ui-button-icon-primary, 
+.ui-button-icons-only .ui-button-icon-primary {
+	left: .4em; 
+}
+
+.ui-button-text-icon-secondary .ui-button-icon-secondary, 
+.ui-button-text-icons .ui-button-icon-secondary, 
+.ui-button-icons-only .ui-button-icon-secondary {
+	right: .4em; 
+}
+
+.ui-button-text-icons .ui-button-icon-secondary, 
+.ui-button-icons-only .ui-button-icon-secondary {
+	right: .4em; 
+}
+
+/* Button sets*/
+.ui-buttonset {
+	margin-right: 7px; 
+}
+
+.ui-buttonset .ui-button {
+	margin-left: 0;
+	margin-right: -.3em; 
+}
+
+/*** End jQuery UI Theme Styles ***/
+
 body {
   font-family: arial, verdana, sans-serif;
   font-size: 14px;
@@ -725,16 +849,6 @@ table.rank td.helptext {
   background-color: #eee;
 }
 
-/* Jquery CSS
- */ /** UI Base **/
-.ui-wrapper {
-  border: 1px solid #50A029;
-}
-
-.ui-wrapper input,.ui-wrapper textarea {
-  border: 0;
-}
-
 /** UI Slider **/
 .numeric-multi label.slider-label {
   display: table-cell;

diff --git a/templates/bluengrey/ie_fix_7.css b/templates/bluengrey/ie_fix_7.css
@@ -1,4 +1,38 @@
 /* The following styles are for all versions of IE 7 */
+
+/*** Start jQuery UI Theme Styles ***/
+
+.ui-button,
+input.ui-button { 
+	padding: 0.1em 0 0.1em 0; 
+}
+
+.ui-button-icon-only .ui-icon,
+.ui-button-text-icon-primary .ui-icon,
+.ui-button-text-icon-secondary .ui-icon,
+.ui-button-text-icons .ui-icon,
+.ui-button-icons-only .ui-icon {
+	margin-top: -9px;
+}
+
+.ui-button-text-icon-primary .ui-button-text {
+	padding: 0 0 0 1.0em; 
+}
+
+.ui-button-text-icon-secondary .ui-button-text {
+	padding: 0 1.2em 0 0; 
+}
+
+.ui-button-text-icons .ui-button-text {
+	padding: 0 1.0em; 
+}
+
+/*** End jQuery UI Theme Styles ***/
+
+.submit-buttons button {
+	margin: 0 5px 5px 5px;
+}
+
 .yes-no .answers ul, .gender .answers ul, .choice-5-pt-radio .answers ul {
   margin-left: 2.5em;
 }

diff --git a/templates/bluengrey/ie_fix_8.css b/templates/bluengrey/ie_fix_8.css
@@ -1,4 +1,17 @@
 /* The following styles are for IE 8 only*/
+
+/*** Start jQuery UI Theme Styles ***/
+
+/* Button icon element(s) */
+.ui-button-icon-only .ui-icon,
+.ui-button-text-icon-primary .ui-icon,
+.ui-button-text-icon-secondary .ui-icon,
+.ui-button-text-icons .ui-icon,
+.ui-button-icons-only .ui-icon {
+	margin-top: -9px;
+}
+
+/*** End jQuery UI Theme Styles ***/
 .rank label {
   line-height: 27px;
 }