committing the new dash design, along with delete button functionality. edit button functionality to come.

This commit is contained in:
Matthew Wilson 2005-12-01 01:15:42 +00:00
parent fdfb9bf5ae
commit 48d69dfd28
28 changed files with 379 additions and 187 deletions

View file

@ -27,7 +27,6 @@ my $quiet;
start();
addTimeZonesToUserPreferences();
fixVeryLateDates();
removeUnneededFiles();
updateCollaboration();
addPhotoField();
@ -41,6 +40,7 @@ addInOutBoard();
addDashboardStuff();
addZipArchive();
updateUserProfileDayLabels();
fixVeryLateDates();
finish();
#-------------------------------------------------
@ -202,67 +202,28 @@ my $newAsset = $folder->addChild({
}, 'PBtmplBlankStyle000001');
$newAsset->commit;
$template = <<STOP;
<style type="text/css">
table.dashboardColumn {
width: 100%;
background: none;
background-color:transparent;
}
.availableDashlet {
}
div#dashboardContainer {
font: 11px Lucida Grande, Verdana, Arial, Helvetica, sans serif;
background: url(^Extras;wobject/Dashboard/background.gif) repeat-x #fff;
}
table#dashboardChooserContainer {
margin:0px;
padding:0px;
border:0px;
}
tbody.availableDashlet * div.content { display: none; }
div#availableDashlets * td {width:100px;}
div#availableDashlets * div.content {width:100px; overflow-x:hidden;}
div#columnsContainerDiv {
margin:6px;
}
td {vertical-align: top;}
h1 {
font: 15px Lucida Grande, Verdana, Arial, Helvetica, sans serif;
}
</style>
<style type="text/css"> \@import "^Extras;wobject/Dashboard/draggable.css"; </style>
<style type="text/css"> \@import "^Extras;wobject/Dashboard/dashboard.css"; </style>
<script src="^Extras;wobject/Dashboard/draggable.js" type="text/javascript"></script>
<div id="dashboardContainer">
<a name="id<tmpl_var assetId>" id="id<tmpl_var assetId>">
</a>
<table id="dashboardChooserContainer" width="100%">
<table id="dashboardChooserContainer" width="100%" border="0">
<tr>
<td>
<div style="display:none;cursor: hand;" id="hideNewContentButton" onclick="makeInactive(this);makeInactive(document.getElementById('availableDashlets'));makeActive(document.getElementById('showNewContentButton'));">Hide New Content List</div>
<div id="availableDashlets" style="display:none;">
<table cellpadding="0" cellspacing="0" border="0" id="position1" class="dashboardColumn" width="100px">
<tbody class="availableDashlet" width="100px">
<tmpl_loop position1_loop>
<tr id="td<tmpl_var id>">
<td>
<div id="td<tmpl_var id>_div" class="dragable">
<div class="dragTrigger"><tmpl_var dashletTitle>
</div>
<div class="content"><tmpl_var content>
</div>
</div>
</td>
</tr>
</tmpl_loop>
</tbody>
</table>
</div>
<div style="display:none;cursor: hand;" id="hideNewContentButton" onclick="makeInactive(this);makeInactive(document.getElementById('availableBox'));makeActive(document.getElementById('showNewContentButton'));">Hide New Content List</div>
<div id="availableBox"><div id="availableBox2">
<div id="availableDashlets">
<table cellpadding="0" cellspacing="0" border="0" id="position1" class="dashboardColumn">
<tbody class="availableDashlet">
<tmpl_loop position1_loop><tr id="td<tmpl_var id>"><td><div id="td<tmpl_var id>_div" class="dragable"><div class="dragTrigger"><div class="dragTitle"><span class="headerTitle"><tmpl_var dashletTitle></span><span class="options" onmouseover="this.className='options optionsHoverIE'" onmouseout="this.className='options'"><a href="#"><img src="^Extras;wobject/Dashboard/edit_btn.jpg" border="0"></a><a href="#" onclick="dragable_deleteContent(event,this);this.parentNode.onmouseout();"><img src="^Extras;wobject/Dashboard/delete_btn.jpg" border="0"></a><br /></span></div></div>
<div class="content"><tmpl_var content></div></div></td></tr></tmpl_loop>
</tbody></table>
</div></div></div>
</td>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr><td> <div id="showNewContentButton" style="cursor: hand;" onclick="makeInactive(this);makeActive(document.getElementById('availableDashlets'));makeActive(document.getElementById('hideNewContentButton'));">Add New Content</div></td><td>
<tr><td style="width:80px;"> <div id="showNewContentButton" onclick="makeInactive(this);makeActive(document.getElementById('availableBox'));makeActive(document.getElementById('hideNewContentButton'));">Add New Content</div></td><td>
<tmpl_if showAdmin>
<p>
<tmpl_var controls>
@ -311,19 +272,8 @@ function AjaxRequestEnd() { }
<td width="33%">
<table cellpadding="0" cellspacing="0" border="0" id="position2" class="dashboardColumn" width="100%">
<tbody>
<tmpl_loop position2_loop>
<tr id="td<tmpl_var id>">
<td>
<div id="td<tmpl_var id>_div" class="dragable">
<div class="dragTrigger"><tmpl_var dashletTitle>
</div>
<div class="content">
<tmpl_var content>
</div>
</div>
</td>
</tr>
</tmpl_loop>
<tmpl_loop position2_loop><tr id="td<tmpl_var id>"><td><div id="td<tmpl_var id>_div" class="dragable"><div class="dragTrigger"><div class="dragTitle"><span class="headerTitle"><tmpl_var dashletTitle></span><span class="options" onmouseover="this.className='options optionsHoverIE'" onmouseout="this.className='options'"><a href="#"><img src="^Extras;wobject/Dashboard/edit_btn.jpg" border="0"></a><a href="#" onclick="dragable_deleteContent(event,this);this.parentNode.onmouseout();"><img src="^Extras;wobject/Dashboard/delete_btn.jpg" border="0"></a><br /></span></div></div>
<div class="content"><tmpl_var content></div></div></td></tr></tmpl_loop>
</tbody>
</table>
</td>
@ -332,20 +282,8 @@ function AjaxRequestEnd() { }
<td width="33%">
<table cellpadding="0" cellspacing="0" border="0" id="position3" class="dashboardColumn" width="100%">
<tbody>
<tmpl_loop position3_loop>
<tr id="td<tmpl_var id>">
<td>
<div id="td<tmpl_var id>_div" class="dragable">
<div class="dragTrigger">
<tmpl_var dashletTitle>
</div>
<div class="content">
<tmpl_var content>
</div>
</div>
</td>
</tr>
</tmpl_loop>
<tmpl_loop position3_loop><tr id="td<tmpl_var id>"><td><div id="td<tmpl_var id>_div" class="dragable"><div class="dragTrigger"><div class="dragTitle"><span class="headerTitle"><tmpl_var dashletTitle></span><span class="options" onmouseover="this.className='options optionsHoverIE'" onmouseout="this.className='options'"><a href="#"><img src="^Extras;wobject/Dashboard/edit_btn.jpg" border="0"></a><a href="#" onclick="dragable_deleteContent(event,this);this.parentNode.onmouseout();"><img src="^Extras;wobject/Dashboard/delete_btn.jpg" border="0"></a><br /></span></div></div>
<div class="content"><tmpl_var content></div></div></td></tr></tmpl_loop>
</tbody>
</table>
</td>
@ -353,40 +291,17 @@ function AjaxRequestEnd() { }
<td width="33%">
<table cellpadding="0" cellspacing="0" border="0" id="position4" class="dashboardColumn" width="100%">
<tbody>
<tmpl_loop position4_loop>
<tr id="td<tmpl_var id>">
<td>
<div id="td<tmpl_var id>_div" class="dragable">
<div class="dragTrigger">
<tmpl_var dashletTitle>
</div>
<div class="content"><tmpl_var content>
</div>
</div>
</td>
</tr>
</tmpl_loop>
<tmpl_loop position4_loop><tr id="td<tmpl_var id>"><td><div id="td<tmpl_var id>_div" class="dragable"><div class="dragTrigger"><div class="dragTitle"><span class="headerTitle"><tmpl_var dashletTitle></span><span class="options" onmouseover="this.className='options optionsHoverIE'" onmouseout="this.className='options'"><a href="#"><img src="^Extras;wobject/Dashboard/edit_btn.jpg" border="0"></a><a href="#" onclick="dragable_deleteContent(event,this);this.parentNode.onmouseout();"><img src="^Extras;wobject/Dashboard/delete_btn.jpg" border="0"></a><br /></span></div></div>
<div class="content"><tmpl_var content></div></div></td></tr></tmpl_loop>
</tbody>
</table>
</td>
</tr>
</table>
</div>
<table>
<tr id="blank" class="hidden">
<td>
<div>
<div class="empty">&nbsp;
</div>
</div>
</td>
</tr>
</table>
<table class="blankTable"><tr id="blank" class="hidden"><td class="blankColumn"><div><div class="empty">&nbsp;</div></div></td></tr></table>
<tmpl_var dragger.init>
</td>
</tr>
</table>
</div>
</td></tr></table></div>
STOP
$newAsset = $folder->addChild({
title=>"Dashboard Default View",

View file

@ -216,8 +216,8 @@ sub view {
}
}
$vars{showAdmin} = ($session{var}{adminOn} && $self->canEdit);
WebGUI::Style::setScript($session{config}{extrasURL}."/wobject/Dashboard/draggable.js",{ type=>"text/javascript" });
WebGUI::Style::setLink($session{config}{extrasURL}."/wobject/Dashboard/draggable.css",{ type=>"text/css", rel=>"stylesheet", media=>"all" });
# WebGUI::Style::setScript($session{config}{extrasURL}."/wobject/Dashboard/draggable.js",{ type=>"text/javascript" });
# WebGUI::Style::setLink($session{config}{extrasURL}."/wobject/Dashboard/draggable.css",{ type=>"text/css", rel=>"stylesheet", media=>"all" });
$vars{"dragger.init"} = '
<script type="text/javascript">
dragable_init("'.$self->getUrl.'");

View file

@ -98,16 +98,14 @@ sub _getLocationData {
$document =~ m!<hr>\s<div\salign="center">\s(.*?)<br>.*?<br>.*?<br>.*?<br>\s(.*?):\s(.*?) &deg;F<br>!;
$locData = {
query => $location,
cityState => $1,
sky => $2,
tempF => $3,
cityState => $1 || $location,
sky => $2 || 'N/A',
tempF => $3 || 'N/A',
iconUrl => $session{config}{extrasURL}.'/wobject/WeatherData/'.$self->_chooseWeatherConditionsIcon($2).'.jpg'
};
$cache->set($locData, 60*60) if $locData->{cityState};
$cache->set($locData, 60*60) if $locData->{sky} ne 'NULL';
}
return $locData;
# return $cityState.'<br />'.$sky.'<br />'.$ftemp.'&deg;F<br /><img src="'.$iconUrl.'" />';
}
#-------------------------------------------------------------------
@ -121,6 +119,7 @@ largely from http://www.weather.gov/data/current_obs/weather.php
sub _chooseWeatherConditionsIcon {
my $self = shift;
my $currCond = shift;
if (isIn($currCond,'','N/A','NULL')) {return 'unknown';}
if (isIn($currCond,'Mostly Cloudy','Mostly Cloudy with Haze','Mostly Cloudy and Breezy')) {return 'bkn';}
if (isIn($currCond,'Fair','Clear','Fair with Haze','Clear with Haze','Fair and Breezy','Clear and Breezy')) {return 'skc';}
if (isIn($currCond,'A Few Clouds','A Few Clouds with Haze','A Few Clouds and Breezy')) {return 'few';}

Binary file not shown.

After

Width:  |  Height:  |  Size: 923 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 88 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

View file

@ -0,0 +1,224 @@
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;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 997 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

View file

@ -1,57 +1,94 @@
div.dragable:hover {
div.dragable:hover
{
border: 1px dashed #aaaaaa;
}
.dragable{
position: relative;
border: 1px dotted #cccccc;
.dragable
{
position: relative;
border: 1px solid #fff;
}
div.dragTrigger{
div.dragTrigger
{
position: relative;
top:0px;
left:0px;
cursor: move;
width:100%;
cursor: move;
width:100%;
font-size:10pt;
font-weight:bold;
font-face:verdana;
color:white;
height:22px;
}
.dragging{
position: relative;
width: auto;
opacity:0.6;
-moz-opacity:0.6;
filter: alpha(opacity=60);
cursor: hand;
z-index: 2000;
border: 1px dotted #cccccc;
div.dragging
{
position: relative;
width: auto;
filter:alpha(opacity=60);
opacity:.60;
cursor: pointer; cursor: hand;
z-index: 2000;
border: 1px dotted #cccccc;
}
div.dragging div.content
{
opacity:.60;
filter: alpha(opacity=60);
}
.draggedOverTop{
position: relative;
border: 1px dotted #aaaaaa;
border-top: 8px #aaaaaa dotted;
border: 1px dotted white;
margin-top: -1px;
border-top: 50px #dddddd solid;
}
.draggedOverBottom {
position: relative;
border: 1px dotted #aaaaaa;
border-bottom: 8px #aaaaaa dotted;
border: 1px dotted white;
margin-bottom: -1px;
border-bottom: 50px #dddddd solid;
}
.hidden{
display: none;
.hidden
{
display: none;
}
.blank {
position: relative;
opacity:0.5;
-moz-opacity:0.5;
filter: alpha(opacity=50);
cursor: hand;
background-color: white;
.blank
{
position: relative;
opacity:0.5;
-moz-opacity:0.5;
filter: alpha(opacity=50);
cursor: pointer; cursor: hand;
background-color: white;
width:100%;
}
.blankOver {
position: relative;
cursor: hand;
background-color: #eeeeee;
.blankOver
{
position: relative;
cursor: pointer; cursor: hand;
background-color: #eeeeee;
}
.empty {
position: relative;
padding: 0px;
margin: 3px;
width: 100%;
height: 250px;
.empty
{
position: relative;
padding: 0px;
margin: 3px;
width: 100%;
height: 250px;
}
.blankTable {
width:100%;
}
.blankColumn {
width:100%;
}

View file

@ -1,7 +1,7 @@
//Confugration
//sets the drag accruacy
//a value of 0 is most accurate. The number can be raised to improve performance.
var accuracy = 2;
var accuracy = 4;
//list of the content item names. Could be searched for, but hard coded for performance
var draggableObjectList=new Array();
@ -185,15 +185,15 @@ function dragable_move(e){
z.style.left=(temp1+e.clientX-x)+"px";
z.style.top=(temp2+e.clientY-y)+"px";
return false
}else {
// }else {
tmp = dragable_spy(dom? e.pageX: (e.clientX + docElement.scrollLeft),dom? e.pageY: (e.clientY + docElement.scrollTop));
// tmp = dragable_spy(dom? e.pageX: (e.clientX + docElement.scrollLeft),dom? e.pageY: (e.clientY + docElement.scrollTop));
if (tmp.length == 0) {
currentDiv = null;
}else {
currentDiv = tmp[0];
}
// if (tmp.length == 0) {
// currentDiv = null;
// }else {
// currentDiv = tmp[0];
// }
}
}
@ -202,7 +202,11 @@ function dragable_dragStart(e){
e=dom? e : event;
var fObj=dom? e.target : e.srcElement
if (fObj.className != "dragTrigger") {
if (fObj.nodeName=='IMG') { return;}
fObj2 = dragable_getObjectByClass(fObj,"dragTrigger");
if (!fObj2) {
return;
}
@ -250,12 +254,12 @@ function dragable_spy(x, y) {
td = draggableObjectList[i];
//this is a hack
if (td == null || td == startTD) continue;
if (td == null || td == startTD || !td.parentNode || !td.parentNode.parentNode) { continue; }
var fObj=td;
y1=0;
x1=0
x1=0;
var gap = (td.className=='blank' || (td.parentNode.parentNode.rows.length == td.rowIndex + 1)) ? 500 : 0
while (fObj!=null && fObj.tagName!=topelement){
y1+=fObj.offsetTop;
@ -268,7 +272,7 @@ function dragable_spy(x, y) {
returnArray[0] = td;
returnArray[1] = "top";
return returnArray;
}else if (y> y1 && y< (y1 + td.offsetHeight)) {
}else if (y> y1 && y< (y1 + td.offsetHeight + gap)) {
returnArray[0] = td;
returnArray[1] = "bottom";
return returnArray;
@ -330,31 +334,24 @@ function dragable_dragStop(e) {
divName=endTD.id + "_div";
document.getElementById(divName).className="dragable";
// document.getElementById(divName).style.opacity = null;
// document.getElementById(divName).style.filter = null;
// document.getElementById(divName).style.filter = null;
}
AjaxRequest.get(
{
'url':pageURL
,'method':'POST'
,'map':dragable_getContentMap()
,'func':'setContentPositions'
}
);
dragable_postNewContentMap();
}
for(i=0;i<dragableList.length;i++) {
dragableList[i].style.top=0;
dragableList[i].style.left=0;
dragableList[i].style.top='0px';
dragableList[i].style.left='0px';
dragableList[i].className="dragable";
}
//this is a ie hack for a render bug
for(i=0;i<draggableObjectList.length;i++) {
if (draggableObjectList[i]) {
draggableObjectList[i].style.top=1;
draggableObjectList[i].style.left=1;
draggableObjectList[i].style.top=0;
draggableObjectList[i].style.left=0;
draggableObjectList[i].style.top='1px';
draggableObjectList[i].style.left='1px';
draggableObjectList[i].style.top='0px';
draggableObjectList[i].style.left='0px';
}
}
}
@ -366,7 +363,17 @@ function dragable_dragStop(e) {
endTD=null;
}
}
function dragable_postNewContentMap() {
// AjaxRequest.get(
// {
// 'url':pageURL
// ,'method':'POST'
// ,'map':dragable_getContentMap()
// ,'func':'setContentPositions'
// }
// );
}
//gets the element children of a dom object
function dragable_getElementChildren(obj) {
@ -388,14 +395,24 @@ function dragable_appendBlankRow(parent) {
blankClone.id = "blank" + new Date().getTime() + blankCount++;
draggableObjectList[draggableObjectList.length] = blankClone;
parent.appendChild(blankClone);
blankClone.style.top=0;
blankClone.style.left=0;
blankClone.style.top='0px';
blankClone.style.left='0px';
blank.className="hidden";
}
// deletes a dashlet (moves it from its current location to the bottom of position 1)
function dragable_deleteContent(e,from) {
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();
}
//moves a table row from one table to another. from and to are table row objects
//if the last row is remvoed from a table, id blank is placed in the table
//if the last row is removed from a table, id blank is placed in the table
function dragable_moveContent(from, to,position) {
if (from!=to && from && to) {
var fromParent = from.parentNode;

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 855 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 361 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 199 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 799 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 680 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 361 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 350 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 127 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 607 B