diff --git a/scp/css/scp.css b/scp/css/scp.css
index 736d6f5a010c93c1c66a435e8c64f53942208a74..5940284adfc8eb2bc4a228c3c615c3206764fc72 100644
--- a/scp/css/scp.css
+++ b/scp/css/scp.css
@@ -1034,6 +1034,7 @@ h2 .reload {
position:absolute;
top:0.3em;
right:0.5em;
+ text-decoration:none;
}
.tip_shadow {
@@ -1068,7 +1069,6 @@ h2 .reload {
.tip_menu li a {
display:block;
width:auto;
- _width:0;
float:left;
padding:0 10px;
border-right:1px solid #ddd;
diff --git a/scp/js/tips.js b/scp/js/tips.js
index 44c924711c1b73bc012674acefce634f007b2eca..205eb6fc9d2df8edbbd17d3ad43dbfab76145d36 100644
--- a/scp/js/tips.js
+++ b/scp/js/tips.js
@@ -93,7 +93,6 @@ jQuery(function() {
tip_timer = setTimeout(function() {
$('.tip_box').remove();
$('body').append(the_tip.hide().fadeIn());
- console.log($(window).width(), tip_content.width(), the_tip.position())
if ($(window).width() < tip_content.outerWidth() + the_tip.position().left) {
the_tip.css({'left':x_pos-tip_content.outerWidth()-40+'px'});
tip_box.addClass('right');
diff --git a/setup/css/wizard.css b/setup/css/wizard.css
index c92b05447a6acb9992ea21be3ce13581840784a9..2dd02eced36596ac0fb570c21a6205e58de00023 100644
--- a/setup/css/wizard.css
+++ b/setup/css/wizard.css
@@ -1,3 +1,4 @@
+@import url("../../css/font-awesome.min.css");
body { background: url('../images/background.jpg?1312906017') top left repeat-x white; font-family: arial, helvetica, sans-serif; font-size: 10pt; color: #000; margin: 0; padding: 0; }
#wizard { background: #fff; width: 800px; margin: 30px auto; padding: 10px; border: 1px solid #2a67ac; border-right: 2px solid #2a67ac; border-bottom: 3px solid #2a67ac; overflow: hidden; margin-bottom:5px;}
@@ -60,13 +61,117 @@ form .row input { background: #fff; height: 22px; padding: 0; line-height: 22px;
form .row label, form .row span { display: block; float: left; width: 150px; line-height: 24px; }
form .row span { width: 600px; color: #666666; }
-.tip_box { display: block; height: 30px; position: absolute; z-index: 1000; }
-
-.tip_arrow { display: block; position: absolute; top: 5px; left: -11px; width: 12px; z-index: 700; }
-
-.tip_content { height: auto !important; height: 20px; min-height: 20px; padding: 10px 5px 5px 5px; border: 1px solid #666; background: #fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; z-index: 500; position: absolute; top: 0; left: -1px; width: 300px; }
-
-.tip_close { position: absolute; text-decoration: none; left: 100%; top: 0; margin-left: -12px; }
+.tip_box {
+ display:block;
+ height:30px;
+ position:absolute;
+ z-index:1000;
+}
+
+.tip_arrow {
+ display:block;
+ position:absolute;
+ top:5px;
+ left:-12px;
+ width:12px;
+ z-index:700;
+}
+
+.tip_box.right .tip_arrow {
+ top: 5px;
+ right: -12px;
+ left: auto;
+}
+
+.flip-x {
+ -moz-transform: scaleX(-1);
+ -o-transform: scaleX(-1);
+ -webkit-transform: scaleX(-1);
+ transform: scaleX(-1);
+ filter: FlipH;
+ -ms-filter: "FlipH";
+}
+
+.tip_content {
+ height:auto !important;
+ height:20px;
+ min-height:20px;
+ padding:10px;
+ border:1px solid #666;
+ background:#fff;
+ -moz-border-radius:5px;
+ -webkit-border-radius:5px;
+ border-radius:5px;
+ -moz-box-shadow: 3px 3px 3px #666;
+ -webkit-box-shadow: 3px 3px 3px #666;
+ box-shadow: 3px 3px 3px #666;
+ z-index:500;
+ position:absolute;
+ top:0;
+ left:-1px;
+ min-width:300px;
+ line-height: 1.15rem;
+}
+
+.tip_content .links {
+ margin-top: 0.7em;
+ padding-top: 0.4em;
+ border-top: 1px solid #ddd;
+}
+
+.tip_content .links a {
+ color: #548dd4;
+}
+
+.tip_content hr {
+
+ color: #ddd;
+ background-color: #ddd;
+ height: 1px;
+ border: 0;
+ padding: 0;
+ margin: 0.2em 0;
+ width: 100%;
+}
+
+.tip_close {
+ position:absolute;
+ top:0.3em;
+ right:0.5em;
+ text-decoration:none;
+}
+
+.tip_shadow {
+ display:none;
+ background:#000;
+ filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.60);
+ -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.60)";
+ zoom: 1;
+ position:absolute;
+ z-index:200;
+ top:0;
+ left:0;
+ width:auto !important;
+ width:310px;
+}
+
+.tip_content h1 {
+ font-size: 13pt;
+ margin-top: 0;
+ margin-bottom: 0.5em;
+ padding-bottom: 0.2em;
+ border-bottom: 1px solid #ddd;
+ padding-right: 1.5em;
+}
+
+i.help-tip {
+ vertical-align: inherit;
+ color: #aaa;
+}
+i.help-tip:hover {
+ color: black;
+ cursor: pointer;
+}
#overlay { display: none; position: fixed; background: #000; z-index: 2000; }
diff --git a/setup/inc/install.inc.php b/setup/inc/install.inc.php
index c9f16384398a75e5d6c919b2fdf08be948ff7189..e2d6a5a0f3b87b28f7466a91780b2d5d932956fb 100644
--- a/setup/inc/install.inc.php
+++ b/setup/inc/install.inc.php
@@ -17,13 +17,13 @@ $info=($_POST && $errors)?Format::htmlchars($_POST):array('prefix'=>'ost_','dbho
<div class="row">
<label>Helpdesk Name:</label>
<input type="text" name="name" size="45" tabindex="1" value="<?php echo $info['name']; ?>">
- <a class="tip" href="#helpdesk_name">?</a>
+ <a class="tip" href="#helpdesk_name"><i class="icon-question-sign help-tip"></i></a>
<font class="error"><?php echo $errors['name']; ?></font>
</div>
<div class="row">
<label>Default Email:</label>
<input type="text" name="email" size="45" tabindex="2" value="<?php echo $info['email']; ?>">
- <a class="tip" href="#system_email">?</a>
+ <a class="tip" href="#system_email"><i class="icon-question-sign help-tip"></i></a>
<font class="error"><?php echo $errors['email']; ?></font>
</div>
@@ -32,37 +32,37 @@ $info=($_POST && $errors)?Format::htmlchars($_POST):array('prefix'=>'ost_','dbho
<div class="row">
<label>First Name:</label>
<input type="text" name="fname" size="45" tabindex="3" value="<?php echo $info['fname']; ?>">
- <a class="tip" href="#first_name">?</a>
+ <a class="tip" href="#first_name"><i class="icon-question-sign help-tip"></i></a>
<font class="error"><?php echo $errors['fname']; ?></font>
</div>
<div class="row">
<label>Last Name:</label>
<input type="text" name="lname" size="45" tabindex="4" value="<?php echo $info['lname']; ?>">
- <a class="tip" href="#last_name">?</a>
+ <a class="tip" href="#last_name"><i class="icon-question-sign help-tip"></i></a>
<font class="error"><?php echo $errors['lname']; ?></font>
</div>
<div class="row">
<label>Email Address:</label>
<input type="text" name="admin_email" size="45" tabindex="5" value="<?php echo $info['admin_email']; ?>">
- <a class="tip" href="#email">?</a>
+ <a class="tip" href="#email"><i class="icon-question-sign help-tip"></i></a>
<font class="error"><?php echo $errors['admin_email']; ?></font>
</div>
<div class="row">
<label>Username:</label>
<input type="text" name="username" size="45" tabindex="6" value="<?php echo $info['username']; ?>" autocomplete="off">
- <a class="tip" href="#username">?</a>
+ <a class="tip" href="#username"><i class="icon-question-sign help-tip"></i></a>
<font class="error"><?php echo $errors['username']; ?></font>
</div>
<div class="row">
<label> Password:</label>
<input type="password" name="passwd" size="45" tabindex="7" value="<?php echo $info['passwd']; ?>" autocomplete="off">
- <a class="tip" href="#password">?</a>
+ <a class="tip" href="#password"><i class="icon-question-sign help-tip"></i></a>
<font class="error"><?php echo $errors['passwd']; ?></font>
</div>
<div class="row">
<label>Retype Password:</label>
<input type="password" name="passwd2" size="45" tabindex="8" value="<?php echo $info['passwd2']; ?>">
- <a class="tip" href="#password2">?</a>
+ <a class="tip" href="#password2"><i class="icon-question-sign help-tip"></i></a>
<font class="error"><?php echo $errors['passwd2']; ?></font>
</div>
@@ -71,31 +71,31 @@ $info=($_POST && $errors)?Format::htmlchars($_POST):array('prefix'=>'ost_','dbho
<div class="row">
<label>MySQL Table Prefix:</label>
<input type="text" name="prefix" size="45" tabindex="9" value="<?php echo $info['prefix']; ?>">
- <a class="tip" href="#db_prefix">?</a>
+ <a class="tip" href="#db_prefix"><i class="icon-question-sign help-tip"></i></a>
<font class="error"><?php echo $errors['prefix']; ?></font>
</div>
<div class="row">
<label>MySQL Hostname:</label>
<input type="text" name="dbhost" size="45" tabindex="10" value="<?php echo $info['dbhost']; ?>">
- <a class="tip" href="#db_host">?</a>
+ <a class="tip" href="#db_host"><i class="icon-question-sign help-tip"></i></a>
<font class="error"><?php echo $errors['dbhost']; ?></font>
</div>
<div class="row">
<label>MySQL Database:</label>
<input type="text" name="dbname" size="45" tabindex="11" value="<?php echo $info['dbname']; ?>">
- <a class="tip" href="#db_schema">?</a>
+ <a class="tip" href="#db_schema"><i class="icon-question-sign help-tip"></i></a>
<font class="error"><?php echo $errors['dbname']; ?></font>
</div>
<div class="row">
<label>MySQL Username:</label>
<input type="text" name="dbuser" size="45" tabindex="12" value="<?php echo $info['dbuser']; ?>">
- <a class="tip" href="#db_user">?</a>
+ <a class="tip" href="#db_user"><i class="icon-question-sign help-tip"></i></a>
<font class="error"><?php echo $errors['dbuser']; ?></font>
</div>
<div class="row">
<label>MySQL Password:</label>
<input type="password" name="dbpass" size="45" tabindex="13" value="<?php echo $info['dbpass']; ?>">
- <a class="tip" href="#db_password">?</a>
+ <a class="tip" href="#db_password"><i class="icon-question-sign help-tip"></i></a>
<font class="error"><?php echo $errors['dbpass']; ?></font>
</div>
<br>
diff --git a/setup/js/tips.js b/setup/js/tips.js
index 9fd2007e5a67cd2e98b85b3ef1df81deb092dfb4..af111e21ed7171f4e33b4f45256fc09be29d70d0 100644
--- a/setup/js/tips.js
+++ b/setup/js/tips.js
@@ -20,54 +20,69 @@ jQuery(function($) {
})
.live('mouseover click', function(e) {
e.preventDefault();
- var tip_num = this.rel;
- if($('.' + tip_num).length == 0) {
+ var elem = $(this),
+ pos = elem.offset(),
+ y_pos = pos.top - 8,
+ x_pos = pos.left + elem.width() + 16,
+ tip_arrow = $('<img>')
+ .attr('src', './images/tip_arrow.png')
+ .addClass('tip_arrow'),
+ tip_box = $('<div>')
+ .addClass('tip_box'),
+ tip_content = $('<div>')
+ .append('<a href="#" class="tip_close"><i class="icon-remove-circle"></i></a>')
+ .addClass('tip_content'),
+ the_tip = tip_box
+ .append(tip_content.append(tip_arrow))
+ .css({
+ "top":y_pos + "px",
+ "left":x_pos + "px"
+ }),
+ tip_timer = setTimeout(function() {
+ $('.tip_box').remove();
+ $('body').append(the_tip.hide().fadeIn());
+ if ($(window).width() < tip_content.outerWidth() + the_tip.position().left) {
+ the_tip.css({'left':x_pos-tip_content.outerWidth()-40+'px'});
+ tip_box.addClass('right');
+ tip_arrow.addClass('flip-x');
+ }
+ }, 500);
- var elem = $(this),
- pos = elem.offset(),
- y_pos = pos.top - 12,
- x_pos = pos.left + elem.width() + 20,
- tip_arrow = $('<img>')
- .attr('src', './images/tip_arrow.png')
- .addClass('tip_arrow'),
- tip_box = $('<div>')
- .addClass('tip_box'),
- tip_content = $('<div>')
- .append('<a href="#" class="tip_close">x</a>')
- .addClass('tip_content'),
- the_tip = tip_box
- .append(tip_arrow)
- .append(tip_content)
- .css({
- "top":y_pos + "px",
- "left":x_pos + "px"
- })
- .addClass(tip_num),
- tip_timer = setTimeout(function() {
- $('.tip_box').remove();
- $('body').append(the_tip.hide().fadeIn());
- }, 500);
+ elem.live('mouseout', function() {
+ clearTimeout(tip_timer);
+ });
- elem.live('mouseout', function() {
+ getHelpTips().then(function(tips) {
+ var section = tips[elem.attr('href').substr(1)];
+ if (!section) {
+ elem.remove();
clearTimeout(tip_timer);
- });
-
- getHelpTips().then(function(tips) {
- var section = tips[elem.attr('href').substr(1)];
- if (!section) {
- elem.remove();
- clearTimeout(tip_timer);
- return;
- }
- tip_content.append(
- $('<b>').append(section.title))
- .append(section.content);
- });
- $('.' + tip_num + ' .tip_shadow').css({
- "height":$('.' + tip_num).height() + 5
- });
- }
+ return;
+ }
+ tip_content.append(
+ $('<h1>')
+ .append('<i class="icon-info-sign faded"> ')
+ .append(section.title)
+ ).append(section.content);
+ if (section.links) {
+ var links = $('<div class="links">');
+ $.each(section.links, function(i,l) {
+ var icon = l.href.match(/^http/)
+ ? 'icon-external-link' : 'icon-share-alt';
+ links.append($('<div>')
+ .append($('<a>')
+ .html(l.title)
+ .prepend('<i class="'+icon+'"></i> ')
+ .attr('href', l.href).attr('target','_blank'))
+ );
+ });
+ tip_content.append(links);
+ }
+ });
+ $('.tip_shadow', the_tip).css({
+ "height":the_tip.height() + 5
+ });
});
$('body')