Lots more Dashboard features/changes.
Internationalization and Help to come. Default dashlet demos/walkthroughs to come.
This commit is contained in:
Matthew Wilson
parent
440ca63333
commit
09bf2b263f
12 changed files with 369 additions and 281 deletions
|
|
@ -1,224 +1,235 @@
|
|||
body
|
||||
{
|
||||
margin: 0;
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
table.dashboardColumn
|
||||
{
|
||||
width: 100%;
|
||||
background: none;
|
||||
background-color:transparent;
|
||||
}
|
||||
|
||||
#dashboardContainer
|
||||
{
|
||||
font: 11px Lucida Grande, Verdana, Arial, Helvetica, sans serif;
|
||||
background-color:white;
|
||||
}
|
||||
|
||||
#dashboardChooserContainer
|
||||
{
|
||||
margin:0px;
|
||||
padding:0px;
|
||||
border:0px;
|
||||
}
|
||||
|
||||
#position1 {
|
||||
width:200px;
|
||||
max-width:200px;
|
||||
width:expression("200px");
|
||||
}
|
||||
|
||||
#position1 td {
|
||||
margin-top:40px;
|
||||
padding:5px;
|
||||
}
|
||||
|
||||
tbody.availableDashlet * div.content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#availableDashlets * td {
|
||||
width:200px;
|
||||
max-width:200px;
|
||||
width:expression("200px");
|
||||
}
|
||||
|
||||
#availableDashlets * div.content {
|
||||
width:200px;
|
||||
max-width:200px;
|
||||
width:expression("200px");
|
||||
height:30px;
|
||||
display:none;
|
||||
overflow-x:hidden;
|
||||
overflow-y:hidden;
|
||||
}
|
||||
|
||||
#columnsContainerDiv
|
||||
{
|
||||
margin:6px;
|
||||
}
|
||||
|
||||
td
|
||||
{
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
h1
|
||||
{
|
||||
font: 12px Lucida Grande, Verdana, Arial, Helvetica, sans serif;
|
||||
font-weight:bold;
|
||||
margin:0px;
|
||||
margin-bottom:3px;
|
||||
}
|
||||
|
||||
h2
|
||||
{
|
||||
font: 19px Verdana;
|
||||
margin-bottom:0px;
|
||||
padding-bottom:0px;
|
||||
}
|
||||
|
||||
ul
|
||||
{
|
||||
margin-top:2px;
|
||||
left:-10px;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
div.weatherTitle
|
||||
{
|
||||
font-weight:bold;
|
||||
color:white;
|
||||
}
|
||||
|
||||
div.content
|
||||
{
|
||||
|
||||
border-bottom:solid orange 1px;
|
||||
border-top:solid orange 1px;
|
||||
border-left:solid orange 1px;
|
||||
border-right:solid orange 1px;
|
||||
margin-bottom:10px;
|
||||
width:auto;
|
||||
padding:5px;
|
||||
padding-top:10px;
|
||||
background: #fff url('content_bg.gif') no-repeat top right;
|
||||
}
|
||||
|
||||
div.content a:link, div.content a:visited
|
||||
{
|
||||
color:#F48117;
|
||||
}
|
||||
|
||||
table.tableSearch
|
||||
{
|
||||
background-color:#F2F2F2;
|
||||
border:solid #CCC 1px;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
table.tableSearch td select
|
||||
{
|
||||
margin:0px;
|
||||
padding:0px;
|
||||
}
|
||||
|
||||
div.dragTitle
|
||||
{
|
||||
overflow-x:visible;
|
||||
background: url('dragable_bg.gif');
|
||||
width:100%;
|
||||
z-index:998;
|
||||
border:solid black 0px;
|
||||
height:22px;
|
||||
top:0px;
|
||||
left:0px;
|
||||
right:30px;
|
||||
position:absolute;
|
||||
}
|
||||
|
||||
span.headerTitle
|
||||
{
|
||||
display:block;
|
||||
float:left;
|
||||
z-index:999;
|
||||
margin-right:10px;
|
||||
padding-left:9px;
|
||||
padding-top:2px;
|
||||
}
|
||||
|
||||
span.options
|
||||
{
|
||||
display:block;
|
||||
position:absolute;
|
||||
top:0px;
|
||||
right:-1px;
|
||||
float:right;
|
||||
z-index:1000;
|
||||
padding-right:35px;
|
||||
background: transparent url('dragtitle_bg.gif') no-repeat top right;
|
||||
}
|
||||
span.options img {
|
||||
opacity:0;
|
||||
filter:alpha(opacity=0);
|
||||
}
|
||||
span.options:hover img {
|
||||
opacity:100;
|
||||
}
|
||||
span.optionsHoverIE img {
|
||||
filter:alpha(opacity=100);
|
||||
}
|
||||
div#availableDashlets * span.options:hover {
|
||||
opacity:0;
|
||||
filter:alpha(opacity=0);
|
||||
}
|
||||
div#availableDashlets * span.options {
|
||||
display:none;
|
||||
opacity:0;
|
||||
top:50px;
|
||||
filter:alpha(opacity=0);
|
||||
}
|
||||
div#availableDashlets * div.dragTrigger {
|
||||
background: none;
|
||||
}
|
||||
#hideNewContentButton,#showNewContentButton {
|
||||
/* position:absolute;*/
|
||||
color: #465D94;
|
||||
font-size: 1.2em;
|
||||
font-weight: 600;
|
||||
top: 20px;
|
||||
cursor: pointer; cursor: hand;
|
||||
left: 20px;
|
||||
width:200px;
|
||||
}
|
||||
#availableBox {
|
||||
display:none;
|
||||
}
|
||||
#availableBox2 {
|
||||
padding-top:40px;
|
||||
border:solid navy 2px;
|
||||
height: 600px;
|
||||
width:200px;
|
||||
max-width:200px;
|
||||
width:expression("200px");
|
||||
}
|
||||
|
||||
#availableDashlets {
|
||||
width:200px;
|
||||
max-width:200px;
|
||||
width:expression("200px");
|
||||
}
|
||||
|
||||
.availableDashlet
|
||||
{
|
||||
width:200px;
|
||||
max-width:200px;
|
||||
width:expression("200px");
|
||||
}
|
||||
|
||||
#availableDashlets tbody {
|
||||
height: 0px;
|
||||
body
|
||||
{
|
||||
margin: 0;
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
table.dashboardColumn
|
||||
{
|
||||
width: 100%;
|
||||
background: none;
|
||||
background-color:transparent;
|
||||
}
|
||||
.dashboardColumn td {
|
||||
width:100%;
|
||||
}
|
||||
|
||||
#dashboardContainer
|
||||
{
|
||||
font: 11px Lucida Grande, Verdana, Arial, Helvetica, sans serif;
|
||||
background-color:white;
|
||||
}
|
||||
|
||||
#dashboardChooserContainer
|
||||
{
|
||||
margin:0px;
|
||||
padding:0px;
|
||||
border:0px;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
#position1 {
|
||||
width:200px;
|
||||
max-width:200px;
|
||||
width:expression("200px");
|
||||
}
|
||||
|
||||
#position1 td {
|
||||
margin-top:40px;
|
||||
padding:5px;
|
||||
}
|
||||
|
||||
tbody.availableDashlet * div.content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#availableDashlets * td {
|
||||
width:200px;
|
||||
max-width:200px;
|
||||
}
|
||||
|
||||
#availableDashlets * div.content {
|
||||
width:200px;
|
||||
max-width:200px;
|
||||
height:30px;
|
||||
display:none;
|
||||
overflow-x:hidden;
|
||||
overflow-y:hidden;
|
||||
}
|
||||
|
||||
#columnsContainerDiv
|
||||
{
|
||||
margin:6px;
|
||||
}
|
||||
|
||||
td
|
||||
{
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
h1
|
||||
{
|
||||
font: 12px Lucida Grande, Verdana, Arial, Helvetica, sans serif;
|
||||
font-weight:bold;
|
||||
margin:0px;
|
||||
margin-bottom:3px;
|
||||
}
|
||||
|
||||
h2
|
||||
{
|
||||
font: 19px Verdana;
|
||||
margin-bottom:0px;
|
||||
padding-bottom:0px;
|
||||
}
|
||||
|
||||
ul
|
||||
{
|
||||
margin-top:2px;
|
||||
left:-10px;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
div.weatherTitle
|
||||
{
|
||||
font-weight:bold;
|
||||
color:white;
|
||||
}
|
||||
|
||||
div.content
|
||||
{
|
||||
overflow-x:hidden;
|
||||
border-bottom:solid orange 1px;
|
||||
border-top:solid orange 1px;
|
||||
border-left:solid orange 1px;
|
||||
border-right:solid orange 1px;
|
||||
margin-bottom:10px;
|
||||
padding:5px;
|
||||
padding-top:10px;
|
||||
background: #fff url('content_bg.gif') no-repeat top right;
|
||||
}
|
||||
|
||||
div.content a:link, div.content a:visited
|
||||
{
|
||||
color:#F48117;
|
||||
}
|
||||
|
||||
table.tableSearch
|
||||
{
|
||||
background-color:#F2F2F2;
|
||||
border:solid #CCC 1px;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
table.tableSearch td select
|
||||
{
|
||||
margin:0px;
|
||||
padding:0px;
|
||||
}
|
||||
|
||||
div.dragTitle
|
||||
{
|
||||
overflow-x:visible;
|
||||
background: url('dragable_bg.gif');
|
||||
width:100%;
|
||||
z-index:998;
|
||||
border:solid black 0px;
|
||||
height:22px;
|
||||
top:0px;
|
||||
left:0px;
|
||||
right:30px;
|
||||
position:absolute;
|
||||
}
|
||||
|
||||
span.headerTitle
|
||||
{
|
||||
overflow-x:visible;
|
||||
display:block;
|
||||
float:left;
|
||||
z-index:999;
|
||||
margin-right:10px;
|
||||
padding-left:9px;
|
||||
padding-top:2px;
|
||||
}
|
||||
|
||||
span.options
|
||||
{
|
||||
display:block;
|
||||
position:absolute;
|
||||
top:0px;
|
||||
right:-1px;
|
||||
float:right;
|
||||
z-index:1000;
|
||||
padding-right:35px;
|
||||
background: transparent url('dragtitle_bg.gif') no-repeat top right;
|
||||
}
|
||||
span.options img {
|
||||
opacity:0;
|
||||
filter:alpha(opacity=0);
|
||||
}
|
||||
span.options:hover img {
|
||||
opacity:100;
|
||||
}
|
||||
span.optionsHoverIE img {
|
||||
filter:alpha(opacity=100);
|
||||
}
|
||||
div#availableDashlets * span.options:hover {
|
||||
opacity:0;
|
||||
filter:alpha(opacity=0);
|
||||
}
|
||||
div#availableDashlets * span.options {
|
||||
display:none;
|
||||
opacity:0;
|
||||
top:50px;
|
||||
filter:alpha(opacity=0);
|
||||
}
|
||||
div#availableDashlets * div.dragTrigger {
|
||||
background: none;
|
||||
}
|
||||
#hideNewContentButton,#showNewContentButton {
|
||||
/* position:absolute;*/
|
||||
color: #465D94;
|
||||
font-size: 1.2em;
|
||||
font-weight: 600;
|
||||
top: 20px;
|
||||
cursor: pointer; cursor: hand;
|
||||
left: 20px;
|
||||
width:200px;
|
||||
}
|
||||
#availableBox {
|
||||
display:none;
|
||||
/* width:200px;
|
||||
max-width:200px;
|
||||
width:expression("200px");*/
|
||||
}
|
||||
#availableBox2 {
|
||||
padding-top:40px;
|
||||
border:solid navy 2px;
|
||||
height: 600px;
|
||||
/* width:200px;
|
||||
max-width:200px;
|
||||
width:expression("200px");*/
|
||||
}
|
||||
|
||||
#availableDashlets {
|
||||
/* width:200px;
|
||||
max-width:200px;
|
||||
width:expression("200px");*/
|
||||
}
|
||||
|
||||
.availableDashlet
|
||||
{
|
||||
/* width:200px;
|
||||
max-width:200px;
|
||||
width:expression("200px");*/
|
||||
}
|
||||
|
||||
#availableDashlets tbody {
|
||||
height: 0px;
|
||||
}
|
||||
#leftBox {
|
||||
width:210px;
|
||||
}
|
||||
#rightBox {
|
||||
width:100%;
|
||||
}
|
||||
|
|
@ -6,6 +6,7 @@ div.dragable:hover
|
|||
.dragable
|
||||
{
|
||||
position: relative;
|
||||
/*width:100%;*/
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
|
|
@ -25,13 +26,14 @@ div.dragTrigger
|
|||
|
||||
div.dragging
|
||||
{
|
||||
overflow-x:visible;
|
||||
position: relative;
|
||||
width: auto;
|
||||
filter:alpha(opacity=60);
|
||||
opacity:.60;
|
||||
cursor: pointer; cursor: hand;
|
||||
z-index: 2000;
|
||||
border: 1px dotted #cccccc;
|
||||
/* border: 1px dotted #cccccc; */
|
||||
}
|
||||
|
||||
div.dragging div.content
|
||||
|
|
@ -74,7 +76,7 @@ div.dragging div.content
|
|||
{
|
||||
position: relative;
|
||||
cursor: pointer; cursor: hand;
|
||||
background-color: #eeeeee;
|
||||
background-color: #dddddd;
|
||||
}
|
||||
|
||||
.empty
|
||||
|
|
@ -83,7 +85,7 @@ div.dragging div.content
|
|||
padding: 0px;
|
||||
margin: 3px;
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.blankTable {
|
||||
|
|
|
|||
|
|
@ -124,7 +124,7 @@ function dragable_init(url) {
|
|||
//window.scroll(10,500);
|
||||
//set up event handlers
|
||||
document.onmouseup=dragable_dragStop;
|
||||
document.onkeydown=dragable_checkKeyEvent;
|
||||
// document.onkeydown=dragable_checkKeyEvent;
|
||||
document.onmousemove=dragable_move;
|
||||
|
||||
//fill the draggableObject list
|
||||
|
|
@ -216,7 +216,8 @@ function dragable_dragStart(e){
|
|||
|
||||
//set the start td
|
||||
startTD=document.getElementById(fObj.id.substr(0,fObj.id.indexOf("_div")));
|
||||
|
||||
// alert("hdr" + fObj.id.substr(0,fObj.id.indexOf("_div")) + "_span");
|
||||
document.getElementById("hdr" + fObj.id.substr(0,fObj.id.indexOf("_div")) + "_span").style.overflowX="visible";
|
||||
fObj.className="dragging";
|
||||
// fObj.style.opacity = '0.6';
|
||||
// fObj.style.filter = 'alpha(opacity=' + 60 + ')';
|
||||
|
|
@ -403,13 +404,13 @@ function dragable_appendBlankRow(parent) {
|
|||
|
||||
|
||||
// deletes a dashlet (moves it from its current location to the bottom of position 1)
|
||||
function dragable_deleteContent(e,from) {
|
||||
function dragable_deleteContent(e,from,postNewContentMap) {
|
||||
from = dragable_getObjectByClass(from,"dragable");
|
||||
from = document.getElementById(from.id.substr(0,from.id.indexOf("_div")));
|
||||
dragable_moveContent(from,document.getElementById('position1').rows[document.getElementById('position1').rows.length - 1],"bottom");
|
||||
// e.preventDefault();
|
||||
// e.stopPropagation();
|
||||
dragable_postNewContentMap();
|
||||
if (postNewContentMap) {dragable_postNewContentMap();} // This will help avoid meaningless web server hits.
|
||||
}
|
||||
|
||||
//moves a table row from one table to another. from and to are table row objects
|
||||
|
|
@ -478,3 +479,30 @@ function dragable_getContentMap() {
|
|||
return contentMap;
|
||||
}
|
||||
|
||||
function dashboard_toggleEditForm(event,shortcutId,shortcutUrl) {
|
||||
//discover if form is there.
|
||||
var existingForm = document.getElementById("form" + shortcutId + "_div");
|
||||
if (existingForm) {
|
||||
var throwAway = existingForm.parentNode.removeChild(existingForm);
|
||||
return;
|
||||
}
|
||||
// Create the new form element.
|
||||
formDiv = document.createElement("div");
|
||||
formDiv.id = "form" + shortcutId + "_div";
|
||||
formDiv.className = "userPrefsForm";
|
||||
parentDiv = document.getElementById("td" + shortcutId + "_div");
|
||||
contentDiv = document.getElementById("ct" + shortcutId + "_div");
|
||||
parentDiv.insertBefore(formDiv,contentDiv);
|
||||
var hooha = AjaxRequest.get(
|
||||
{
|
||||
'url':shortcutUrl
|
||||
,'parameters':{
|
||||
'func':"getUserPrefsForm"
|
||||
}
|
||||
,'onSuccess':function(req){
|
||||
var myArr558 = req.responseText.split(/beginDebug/mg,1);
|
||||
formDiv.innerHTML = myArr558[0];
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue