Skip to content
Snippets Groups Projects
Commit a4087cd5 authored by Jared Hancock's avatar Jared Hancock
Browse files

install: Make help tip consistent with scp tips

parent ddafcb06
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
scp/css/scp.css
+ 1
− 1
View file @ a4087cd5
......@@ -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;
......
scp/js/tips.js
+ 0
− 1
View file @ a4087cd5
......@@ -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');
......
setup/css/wizard.css
+ 112
− 7
View file @ a4087cd5
@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; }
......
setup/inc/install.inc.php
+ 13
− 13
View file @ a4087cd5
......@@ -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>
......
setup/js/tips.js
+ 59
− 44
View file @ a4087cd5
......@@ -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')
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment