Add fist version of notifier. More work pending ...

This commit is contained in:
Paulo Veiga 2011-11-28 17:11:02 -03:00
parent 2441b78684
commit 3eeb9e32b9
13 changed files with 70 additions and 1213 deletions

View File

@ -188,6 +188,7 @@
files="collaboration/framework/brix/BrixCollaborativeModelFactory.js"/>
<filelist dir="${basedir}/src/main/javascript/"
files="collaboration/framework/brix/BrixFramework.js"/>
<filelist dir="${basedir}/src/main/javascript/widget/" files="ToolbarNotifier.js"/>
<filelist dir="${basedir}/src/main/javascript/widget/" files="ToolbarItem.js"/>
<filelist dir="${basedir}/src/main/javascript/widget/" files="ToolbarPaneItem.js"/>
<filelist dir="${basedir}/src/main/javascript/widget/" files="NoteEditor.js"/>

View File

@ -239,7 +239,7 @@ mindplot.Designer = new Class({
this._workspace.setZoom(scale);
}
else {
core.Monitor.getInstance().logMessage('Sorry, no more zoom can be applied. \n Why do you need more?');
$notify('No more zoom can be applied');
}
},
@ -256,7 +256,7 @@ mindplot.Designer = new Class({
this._workspace.setZoom(scale);
}
else {
core.Monitor.getInstance().logMessage('Sorry, no more zoom can be applied. \n Why do you need more?');
$notify('No more zoom can be applied');
}
},
@ -269,14 +269,14 @@ mindplot.Designer = new Class({
var nodes = this.getModel().filterSelectedTopics();
if (nodes.length <= 0) {
// If there are more than one node selected,
core.Monitor.getInstance().logMessage('Could not create a topic. Only one node must be selected.');
$notify('Could not create a topic. Only one node must be selected.');
return;
}
if (nodes.length != 1) {
// If there are more than one node selected,
core.Monitor.getInstance().logMessage('Could not create a topic. One topic must be selected.');
$notify('Could not create a topic. One topic must be selected.');
return;
}
@ -294,13 +294,13 @@ mindplot.Designer = new Class({
var nodes = this.getModel().filterSelectedTopics();
if (nodes.length <= 0) {
// If there are more than one node selected,
core.Monitor.getInstance().logMessage('Could not create a topic. Only one node must be selected.');
$notify('Could not create a topic. Only one node must be selected.');
return;
}
if (nodes.length > 1) {
// If there are more than one node selected,
core.Monitor.getInstance().logMessage('Could not create a topic. One topic must be selected.');
$notify('Could not create a topic. One topic must be selected.');
return;
}

View File

@ -103,7 +103,7 @@ mindplot.DesignerModel = new Class({
if (isValid) {
result.push(selectedNode.getId());
} else {
core.Monitor.getInstance().logMessage(errorMsg);
$notify(errorMsg);
}
}
return result;
@ -124,7 +124,7 @@ mindplot.DesignerModel = new Class({
if (isValid) {
result.push(selectedLine.getId());
} else {
core.Monitor.getInstance().logMessage(errorMsg);
$notify(errorMsg);
}
}
return result;

View File

@ -46,7 +46,7 @@ mindplot.PersistanceManager.save = function(mindmap, editorProperties, onSavedHa
}
},
errorHandler:function(message) {
var monitor = core.Monitor.getInstance();
var monitor = core.ToolbarNotifier.getInstance();
monitor.logError("Save could not be completed. Please,try again in a couple of minutes.");
// wLogger.error(message);
},
@ -75,7 +75,7 @@ mindplot.PersistanceManager.load = function(mapId) {
} else {
// Handle error message ...
var msg = response.msgDetails;
var monitor = core.Monitor.getInstance();
var monitor = core.ToolbarNotifier.getInstance();
monitor.logFatal("We're sorry, an error has occurred and we can't load your map. Please try again in a few minutes.");
// wLogger.error(msg);
}
@ -83,7 +83,7 @@ mindplot.PersistanceManager.load = function(mapId) {
verb:"GET",
async: false,
errorHandler:function(msg) {
var monitor = core.Monitor.getInstance();
var monitor = core.ToolbarNotifier.getInstance();
monitor.logFatal("We're sorry, an error has occurred and we can't load your map. Please try again in a few minutes.");
// wLogger.error(msg);
}

View File

@ -17,32 +17,49 @@
*/
mindplot.widget.ToolbarNotifier = new Class({
initialize : function() {
},
_showMsg : function(msg, msgKind) {
if (msgKind == core.ToolbarNotifier.MsgKind.ERROR) {
msg = "<div id='small_error_icon'>" + msg + "</div>";
}
this._msgElem.innerHTML = msg;
initialize : function() {
this._container = $('headerNotifier');
this._effect = new Fx.Elements(this._container, {
onComplete: function() {
this._container.setStyle('display', 'none');
}.bind(this),
link:'cancel',
duration:8000,
transition: Fx.Transitions.Expo.easeInOut
});
},
logError : function(userMsg) {
this.logMessage(userMsg, core.ToolbarNotifier.MsgKind.ERROR);
this.logMessage(userMsg, mindplot.widget.ToolbarNotifier.MsgKind.ERROR);
},
logMessage : function(msg, msgKind) {
console.log(msg);
},
logMessage : function(msg) {
$assert(msg, 'msg can not be null');
this._container.set('text', msg);
this._container.setStyle('display', 'block');
this._effect.start({
0: {
opacity: [1,0]
}
});
this._container.position({
relativeTo: $('header'),
position: 'upperCenter',
edge: 'centerTop'
});
}
});
core.ToolbarNotifier.MsgKind = {
mindplot.widget.ToolbarNotifier.MsgKind = {
INFO:1,
WARNING:2,
ERROR:3,
FATAL:4
};
$notifier = new mindplot.widget.ToolbarNotifier();
var toolbarNotifier = new mindplot.widget.ToolbarNotifier();
$notify = toolbarNotifier.logMessage.bind(toolbarNotifier);

View File

@ -22,7 +22,7 @@ TestCase("Mindplot test",{
{
designer.save(function()
{
// var monitor = core.Monitor.getInstance();
// var monitor = core.ToolbarNotifier.getInstance();
}, false);
}
};

View File

@ -1,787 +0,0 @@
@import "/mindplot/src/main/javascript/widget/lightbox.css";
@import "/mindplot/src/main/javascript/libraries/moodialog/css/MooDialog.css";
@header-height : 75px;
@header-toolbar-height : 35px;
@header-info-height : @header-height - @header-toolbar-height;
/* Common Default Style */
html {
overflow: hidden;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img {
border: 0;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
font-weight: normal;
}
ol, ul {
list-style: none;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
q:before, q:after {
content: '';
}
abbr, acronym {
border: 0;
}
/**
* Percents could work for IE, but for backCompat purposes, we are using keywords.
* x-small is for IE6/7 quirks mode.
*
*/
body {
font: 13px arial, helvetica, clean, sans-serif;
font-size: small;
font: x-small;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
table {
font-size: inherit;
font-size: 100%;
}
/**
* 99% for safari; 100% is too large
*/
select, input, textarea {
font: 99% arial, helvetica, clean, sans-serif;
}
/**
* Bump up !IE to get to 13px equivalent
*/
pre, code {
font: 115% monospace;
font-size: 100%;
}
/**
* Default line-height based on font-size rather than "computed-value"
* see: http://www.w3.org/TR/CSS21/visudet.html#line-height
*/
body * {
line-height: 1.22em;
}
* {
margin: 0;
padding: 0;
}
body {
font: normal 80% "trebuchet ms", verdana, arial, helvetica, sans-serif;
background-color: #fff;
}
img {
border: 0;
}
form {
padding: 0;
margin: 0;
}
p {
margin: 5px 0 5px 0;
}
ul {
list-style-position: inside;
}
a:link, a:visited {
font: bold 100%;
text-decoration: underline;
color: black;
}
a:hover, a:active {
font: bold 100%;
text-decoration: underline;
color: black;
}
h2 {
font-size: 160%;
color: #8e9181;
}
h1 {
font-style: normal;
font-size: 180%;
color: white;
padding-bottom: 2px;
}
h3 {
/* use as subhead on main body */
clear: left;
font-style: normal;
font-size: 130%;
color: #6b6f5b;
}
h4 {
/* use as headers in footer */
font-weight: bold;
font-size: 120%;
border-bottom: 1px solid #8e9181;
color: #e2e3dd;
padding-bottom: 10px;
width: 400px;
}
/**********************************************************/
/* End: Common Default Style */
/**********************************************************/
/**********************************************************/
/* Error Dialog ... */
/**********************************************************/
#waitDialog {
position: absolute;
top: 10px;
left: 10px;
height: 200px;
}
#waitingContainer, #errorContainer {
position: relative;
top: 80px;
height: 120px; /*background: whitesmoke;*/
background: #FEFEFE;
opacity: .99;
padding: 15px;
width: 100%;
border: 1px solid;
border-color: #a9a9a9;
}
#errorContainer {
width: 400px;
border: 1px solid red;
}
#waitingContainer .loadingText {
position: relative;
top: 50%;
margin-top: -35px;
font-size: 30px;
font-weight: bold;
vertical-align: text-bottom;
height: 30px;
float: left;
}
#errorContainer .loadingText {
position: relative;
top: 50%;
margin-top: -80px;
font-size: 15px;
font-weight: bold;
vertical-align: text-bottom;
height: 30px;
float: right;
padding-left: 120px;
}
#waitingContainer .loadingIcon {
position: relative;
background: url(../images/loadingIcon.gif) no-repeat;
top: 50%;
margin-top: -65px;
height: 100px;
width: 121px;
float: left;
clear: both;
}
#errorContainer .loadingIcon {
position: relative;
background: url(../images/errorIcon.png) no-repeat;
top: 50%;
margin-top: -65px;
height: 100px;
width: 121px;
float: left;
clear: both;
}
/********************************************************************************/
/* Toolbar Styles */
/********************************************************************************/
div#header {
width: 100%;
height: @header-height;
background: #393939; /* Old browsers */
background: -moz-linear-gradient(top, #393939 0%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #393939), color-stop(100%, #000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #393939 0%, #000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #393939 0%, #000000 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #393939 0%, #000000 100%); /* IE10+ */
background: linear-gradient(top, #393939 0%, #000000 100%); /* W3C */
}
div#headerLogo {
background: url(../images/logo-small.png) no-repeat center top;
height: 40px;
width: 80px;
float: left;
}
div#headerInfo {
width: 100%;
height: @header-info-height;
color: white;
}
div#headerActions {
text-align: right;
margin-top: 13px;
padding-right: 10px;
color: white;
float: right;
}
div#headerActions span {
border-bottom: 3px solid rgb(247, 201, 49);
}
div#headerActions a {
color: white;
text-decoration: none;
}
div#headerMapTitle {
width: 200px;
height:(@header-info-height ) - 13;
text-align: left;
padding-top: 13px;
padding-left: 50px;
color: white;
float: left;
font-style: italic;
}
div#headerMapTitle span {
padding: 4px 50px;
border: 1px solid rgb(90, 90, 90);
background-color: rgb(45, 45, 45);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}
div#toolbar {
width: 100%;
height: @header-toolbar-height;
background-image: linear-gradient(bottom, rgb(229, 227, 209) 47%, rgb(252, 250, 237) 87%);
background-image: -o-linear-gradient(bottom, rgb(229, 227, 209) 47%, rgb(252, 250, 237) 87%);
background-image: -moz-linear-gradient(bottom, rgb(229, 227, 209) 47%, rgb(252, 250, 237) 87%);
background-image: -webkit-linear-gradient(bottom, rgb(229, 227, 209) 47%, rgb(252, 250, 237) 87%);
background-image: -ms-linear-gradient(bottom, rgb(229, 227, 209) 47%, rgb(252, 250, 237) 87%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.47, rgb(229, 227, 209)), color-stop(0.87, rgb(252, 250, 237)));
border-bottom: 3px double rgb(190, 190, 190);
border-top: 1px solid rgb(190, 190, 190);
}
div#toolbar .buttonContainer {
height: @header-toolbar-height;
float: left;
margin-left: 5px;
}
/******************************************************************************************/
/* Buttons*/
/******************************************************************************************/
div#toolbar .buttonOn, div#toolbar .buttonOff, div#toolbar .buttonActive, div#toolbar .buttonOn:hover {
width: 28px;
height: 28px;
float: left;
text-align: center;
z-index: 4;
margin-top: 3px;
padding-top: 2px;
padding-left: 2px;
}
div#toolbar .buttonOn:hover {
cursor: pointer;
opacity: 1;
background: url(../images/btn-bg-hover.png) no-repeat center top;
}
div#toolbar .buttonOn {
opacity: 0.8;
background: url(../images/btn-bg-normal.png) no-repeat center top;
}
div#toolbar .buttonOff {
opacity: 0.4;
background: url(../images/btn-bg-normal.png) no-repeat center top;
}
div#exportAnchor {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
div#toolbar .buttonExtOn, div#toolbar .buttonExtOff, div#toolbar .buttonExtActive, div#toolbar .buttonExtOn:hover {
width: 40px;
height: 28px;
float: left;
text-align: left;
z-index: 4;
margin-top: 3px;
padding-top: 2px;
padding-left: 5px;
}
div#toolbar .buttonExtOn:hover {
opacity: 1;
background: url(../images/btne-bg-hover.png) no-repeat center top;
}
div#toolbar .buttonExtActive {
opacity: 1;
background: url(../images/btne-bg-selected.png) no-repeat center top;
}
div#toolbar .buttonExtOn {
opacity: 0.8;
background: url(../images/btne-bg-normal.png) no-repeat center top;
}
div#toolbar .buttonExtOff {
opacity: 0.4;
background: url(../images/btne-bg-normal.png) no-repeat center top;
}
div#exportAnchor {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
/*div#saveButton {*/
/*background: url(../images/save.png) no-repeat center top;*/
/*}*/
/*div#undoEdition {*/
/*background: url(../images/undo.png) no-repeat center top;*/
/*}*/
/*div#redoEdition {*/
/*background: url(../images/redo.png) no-repeat center top;*/
/*}*/
/*div#export {*/
/*background: url(../images/export.png) no-repeat center top;*/
/*}*/
/*div#zoomIn {*/
/*background: url(../images/zoom-in.png) no-repeat center top;*/
/*}*/
/*div#zoomOut {*/
/*background: url(../images/zoom-out.png) no-repeat center top;*/
/*}*/
/*div#addTopic {*/
/*background: url(../images/topic-add.png) no-repeat center top;*/
/*}*/
/*div#deleteTopic {*/
/*background: url(../images/topic-delete.png) no-repeat center top;*/
/*}*/
/*div#topicColor {*/
/*background: url(../images/topic-color.png) no-repeat center top;*/
/*}*/
/*div#topicIcon {*/
/*background: url(../images/topic-icon.png) no-repeat center top;*/
/*}*/
/*div#topicNote {*/
/*background: url(../images/note.png) no-repeat center top;*/
/*}*/
/*div#topicNote {*/
/*background: url(../images/topic-icon.png) no-repeat center top;*/
/*z-index: 4;*/
/*}*/
/*div#topicLink {*/
/*background: url(../images/topic-link.png) no-repeat center top;*/
/*z-index: 4;*/
/*}*/
/*div#topicNote {*/
/*background-image: url(../images/note.png);*/
/*z-index: 4;*/
/*}*/
/*div#topicBorder {*/
/*background: url(../images/topic-border.png) no-repeat center top;*/
/*}*/
/*div#fontFamily {*/
/*background: url(../images/font-type.png) no-repeat center top;*/
/*}*/
/*div#topicShape {*/
/*background: url(../images/topic-shape.png) no-repeat center top;*/
/*}*/
/*div#fontBold {*/
/*background: url(../images/font-bold.png) no-repeat center top;*/
/*}*/
/*div#fontItalic {*/
/*background: url(../images/font-italic.png) no-repeat center top;*/
/*}*/
/*div#fontColor {*/
/*background: url(../images/font-color.png) no-repeat center top;*/
/*}*/
/*div#fontSize {*/
/*background: url(../images/font-size.png) no-repeat center top;*/
/*}*/
/*div#shareIt {*/
/*background: url(../images/share.png) no-repeat center top;*/
/*}*/
/*div#publishIt {*/
/*background: url(../images/publish.png) no-repeat center top;*/
/*}*/
/*div#tagIt {*/
/*background: url(../images/tag.png) no-repeat center top;*/
/*}*/
div#topicRelation {
width: 56px;
background: url(../images/topic-relation.png) no-repeat center top;
z-index: 4;
}
div#colorPalette {
border: 1px solid #bbb4d6;
display: none;
position: absolute;
z-index: 4;
width: 160px;
top: 89px;
}
/*.toolbarPanel {*/
/*z-index: 4;*/
/*top: @header-height;*/
/*-moz-transition: opacity 0.218s ease 0s;*/
/*background: none repeat scroll 0 0 #FFFFFF;*/
/*border: 1px solid rgba(0, 0, 0, 0.2);*/
/*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);*/
/*cursor: default;*/
/*font-size: 13px;*/
/*margin: 0;*/
/*outline: medium none;*/
/*padding: 0 0 6px;*/
/*position: absolute;*/
/*}*/
div.toolbarPanelLink, div.toolbarPanelLinkSelectedLink {
cursor: pointer;
color: black;
margin: 1px;
cursor: pointer;
font-size: 12px;
padding: 5px 10px;
font-weight: bold;
}
div.toolbarPanelLink:hover, div.toolbarPanelLinkSelectedLink {
cursor: pointer;
background-color: #efefef;
}
div#mindplot {
position: relative;
top: 0;
left: 0;
width: 100%;
border: 0;
}
div#workspaceContainer {
/*background: url(../images/grid.gif) bottom left repeat !important;*/
}
div#small_error_icon {
padding-left: 18px;
min-height: 16px;
background: url(../images/error_icon.png) bottom left no-repeat !important;
}
.notesTip {
background-color: #dfcf3c;
padding: 5px 15px;
color: #666666;
/*font-weight: bold;*/
/*width: 100px;*/
font-size: 13px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}
.linkTip {
background-color: #dfcf3c;
padding: 5px 15px;
color: #666666;
/*font-weight: bold;*/
/*width: 100px;*/
font-size: 13px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}
.toolbarPaneTip {
background-color: rgb(228, 226, 210);
padding: 5px 5px;
color: #f5f5f5;
/*font-weight: bold;*/
/*width: 100px;*/
font-size: 11px;
-moz-border-radius: 60px;
-webkit-border-radius: 6px;
border-radius: 6px;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
border: 3px double rgb(190, 190, 190);
}
.toolbarTip {
background-color: #000000;
padding: 5px 5px;
color: #f5f5f5;
/*font-weight: bold;*/
/*width: 100px;*/
font-size: 11px;
}
/* */
.btn-primary {
cursor: pointer;
display: inline-block;
padding: 5px 14px 6px;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
color: #333;
font-size: 13px;
line-height: normal;
border: 1px solid #ccc;
border-bottom-color: #bbb;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-webkit-transition: 0.1s linear all;
-moz-transition: 0.1s linear all;
-ms-transition: 0.1s linear all;
-o-transition: 0.1s linear all;
transition: 0.1s linear all;
color: #ffffff;
background-color: #0064cd;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
background-image: -o-linear-gradient(top, #049cdb, #0064cd);
background-image: linear-gradient(top, #049cdb, #0064cd);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #0064cd #0064cd #003f81;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
margin-top: 7px;
}
.btn-primary:hover {
background-position: 0 -15px;
text-decoration: none;
}
.btn-secondary {
cursor: pointer;
display: inline-block;
background-color: #e6e6e6;
background-repeat: no-repeat;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
padding: 5px 14px 6px;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
color: #333;
font-size: 13px;
line-height: normal;
border: 1px solid #ccc;
border-bottom-color: #bbb;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-webkit-transition: 0.1s linear all;
-moz-transition: 0.1s linear all;
-ms-transition: 0.1s linear all;
-o-transition: 0.1s linear all;
transition: 0.1s linear all;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
margin-top: 7px;
}
.btn-secondary:hover {
background-position: 0 -15px;
text-decoration: none;
}
/** */
/* Modal dialogs definitions */
.tagItModalDialog, .historyModalDialog, .shareItModalDialog, .exportModalDialog, .publishModalDialog {
position: fixed;
top: 50%;
left: 50%;
z-index: 11000;
width: 400px;
margin: -250px 0 0 -250px;
background-color: #ffffff;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, 0.3);
border: 1px solid #999;
/* IE6-7 */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
padding: 30px;
}
.shareItModalDialog {
width: 500px;
}
.publishModalDialog {
width: 600px;
}
.tagItModalDialog .title, .historyModalDialog .title, .shareItModalDialog .title, .exportModalDialog .title, .publishModalDialog .title {
position: absolute;
top: 0;
left: 0;
right: 0;
border-bottom: 1px solid #a1aec5;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
border-bottom: 1px solid #eee;
padding: 5px 30px;
font-size: 18px
}
.tagItModalDialog .content {
height: 130px;
}
.historyModalDialog .content {
height: 300px;
}
.shareItModalDialog .content {
height: 300px;
}
.exportItModalDialog .content {
height: 280px;
}
.publishModalDialog .content {
height: 330px;
}
.modalDialog h1 {
font-size: 14px;
}
.modalDialog h2 {
font-size: 14px;
margin: 5px;
}
td.formLabel {
text-align: right;
padding: 2px 10px;
font-weight: bolder;
vertical-align: top;
}

View File

@ -7,9 +7,8 @@
<!--[if lt IE 9]>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<![endif]-->
<!--<script type="text/javascript" src="http://docs.google.com/brix/static/api/js/jsapi.nocache.js"></script>-->
<script type='text/javascript' src='../js/less-1.1.3.min.js'></script>
<link rel="stylesheet/less" type="text/css" href="../css/editor2.css"/>
<link rel="stylesheet/less" type="text/css" href="../css/editor.less"/>
<script type='text/javascript'
src='/mindplot/src/main/javascript/libraries/mootools/mootools-core-1.3.2-full-compress.js'></script>
@ -80,13 +79,11 @@
});
// @Todo: Hack for testing save ...
window.MapEditorService = {};
window.MapEditorService.saveMap = function(mapId, xmlMapStr, pref, saveHistory){
console.log(xmlMapStr);
window.MapEditorService.saveMap = function(mapId, xmlMapStr, pref, saveHistory) {
console.log(xmlMapStr);
};
</script>
<link rel="icon" href="../images/favicon.ico" type="image/x-icon">
@ -132,6 +129,7 @@
<div id="header">
<div id="headerInfo">
<div id="headerActions">
<span>MyWiseMappigs</span> | <span>Settings</span> | <span>Logout</span>
@ -146,7 +144,7 @@
<img src="../images/save.png"/>
</div>
<div id="discart" class="buttonOn" title="Discard">
<img src="../images/discart.png"/>
<img src="../images/discard.png"/>
</div>
<div id="print" class="buttonOn" title="Print">
<img src="../images/print.png"/>
@ -234,6 +232,9 @@
</div>
</div>
</div>
<div id="headerNotifier">
Algo de texto
</div>
</div>
<div id="mindplot"></div>

View File

@ -131,4 +131,5 @@ div#mapDetails .title {
font-weight: bold;
margin-left: 10px;
margin-right: 3px;
}

View File

@ -62,3 +62,19 @@ div#headerMapTitle span {
border-radius: 3px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}
div#headerNotifier {
border: 1px solid rgb(241,163,39);
background-color: rgb(252,235,192);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
position: absolute;
padding: 5px 9px;
color:back;
white-space:nowrap;
margin-top:5px;
/*margin-top:-34px;*/
display:none;
/*right: 5px;*/
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 673 B

View File

@ -16,399 +16,7 @@
* limitations under the License.
*/
/******************************************************************/
/* MOOdalBox 1.3.b4 */
/* A modal box (inline popup), used to display remote content */
/* loaded using AJAX, written for the mootools framework */
/* by Razvan Brates, razvan [at] e-magine.ro */
/******************************************************************/
/* http://www.e-magine.ro/moodalbox */
/******************************************************************/
/* */
/* MIT style license: */
/* http://en.wikipedia.org/wiki/MIT_License */
/* */
/* mootools found at: */
/* http://mootools.net/ */
/* */
/* Original code based on "Slimbox", by Christophe Beyls: */
/* http://www.digitalia.be/software/slimbox */
/******************************************************************/
// Constants defined here can be changed for easy config / translation
// (defined as vars, because of MSIE's lack of support for const)
var _ERROR_MESSAGE = "Oops.. there was a problem with your request.<br /><br />" +
"Please try again.<br /><br />" +
"<em>Click anywhere to close.</em>";
// the error message displayed when the request has a problem
var _RESIZE_DURATION = 400;
// Duration of height and width resizing (ms)
var _INITIAL_WIDTH = 250;
// Initial width of the box (px)
var _INITIAL_HEIGHT = 250;
// Initial height of the box (px)
var _CONTENTS_WIDTH = 500;
// Actual width of the box (px)
var _CONTENTS_HEIGHT = 400;
// Actual height of the box (px)
var _DEF_CONTENTS_WIDTH = 500;
// Default width of the box (px) - used for resetting when a different setting was used
var _DEF_CONTENTS_HEIGHT = 400;
// Default height of the box (px) - used for resetting when a different setting was used
var _DEF_FULLSCREEN_WIDTH = 0.95;
// Default fullscreen width (%)
var _DEF_FULLSCREEN_HEIGHT = 0.8;
// Default fullscreen height (%)
var _ANIMATE_CAPTION = true;
// Enable/Disable caption animation
var _EVAL_SCRIPTS = true;
// Option to evaluate scripts in the response text
var _EVAL_RESPONSE = false;
// Option to evaluate the whole response text
// The MOOdalBox object in its beauty
var MOOdalBox = {
// init the MOOdalBox
init: function (options) {
// init default options
this.options = Object.extend({
resizeDuration: _RESIZE_DURATION,
initialWidth: _INITIAL_WIDTH,
initialHeight: _INITIAL_HEIGHT,
contentsWidth: _CONTENTS_WIDTH,
contentsHeight: _CONTENTS_HEIGHT,
defContentsWidth: _DEF_CONTENTS_WIDTH,
defContentsHeight: _DEF_CONTENTS_HEIGHT,
defFullscreenWidth: _DEF_FULLSCREEN_WIDTH,
defFullscreenHeight:_DEF_FULLSCREEN_HEIGHT,
animateCaption: _ANIMATE_CAPTION,
evalScripts: _EVAL_SCRIPTS,
evalResponse: _EVAL_RESPONSE
}, options || {});
// scan anchors for those opening a MOOdalBox
this.anchors = [];
this.scanAnchors(document.body, false);
// scan forms for those opening a MOOdalBox
this.forms = [];
this.scanForms(document.body, false);
// add event listeners
// @Todo: Deprecated method ...
// this.eventKeyDown = this.keyboardListener.bindWithEvent(this);
this.eventPosition = this.position.bind(this);
// init the HTML elements
// the overlay (clickable to close)
this.overlay = new Element('div').setProperty('id', 'mb_overlay').inject(document.body);
this.overlayDiv = new Element('div').setOpacity(0).setStyles({position: 'absolute', border: 0, width: '100%', backgroundColor: "black", zIndex: 98}).inject(document.body);
// the center element
this.center = new Element('div').setProperty('id', 'mb_center').setStyles({width: this.options.initialWidth + 'px', height: this.options.initialHeight + 'px', marginLeft: '-' + (this.options.initialWidth / 2) + 'px', display: 'none'}).inject(document.body);
// the actual page contents
this.contents = new Element('div').setProperty('id', 'mb_contents').inject(this.center);
// the bottom part (caption / close)
this.bottom = new Element('div').setProperty('id', 'mb_bottom').setStyle('display', 'none').inject(document.body);
this.closelink = new Element('a').setProperties({id: 'mb_close_link', href: '#'}).inject(this.bottom);
this.caption = new Element('div').setProperty('id', 'mb_caption').inject(this.bottom);
new Element('div').setStyle('clear', 'both').inject(this.bottom);
this.error = new Element('div').setProperty('id', 'mb_error').innerHTML = _ERROR_MESSAGE;
// attach the close event to the close button / the overlay
this.closelink.onclick = this.overlay.onclick = this.close.bind(this);
// init the effects
var nextEffect = this.nextEffect.bind(this);
this.fx = {
overlay: new Fx.Morph(this.overlay).set({'opacity':0, duration: 500 }).hide(),
resize: this.center.effects({ onComplete: nextEffect }),
contents: this.contents.effect('opacity', { duration: 500, onComplete: nextEffect }),
bottom: this.bottom.effects({ duration: 400, onComplete: nextEffect })
};
// AJAX related options
var ajaxFailure = this.ajaxFailure.bind(this);
this.ajaxOptions = {
update: this.contents,
evalScripts: this.options.evalScripts,
evalResponse: this.options.evalResponse,
onComplete: nextEffect,
onFailure: ajaxFailure,
encoding: 'utf-8'
};
this.ajaxRequest = Class.empty;
},
click: function(link) {
return this.open(link.href, link.title, link.rel, false);
},
open: function(sLinkHref, sLinkTitle, sLinkRel, oForm) {
//Remove window key event listeners.
this.eventContainer = new Element('div');
this.eventContainer.cloneEvents($(document), 'keydown');
$(document).removeEvents('keydown');
this.href = sLinkHref;
this.title = sLinkTitle;
this.rel = sLinkRel;
if (oForm) {
if (oForm.method == 'get') {
this.href += "?" + oForm.toQueryString();
this.ajaxOptions = Object.extend(this.ajaxOptions, {method: 'get', postBody: ''});
} else {
this.ajaxOptions = Object.extend(this.ajaxOptions, {method: 'post', postBody: oForm});
}
} else {
this.ajaxOptions = Object.extend(this.ajaxOptions, {method: 'get', postBody: ''});
}
this.ajaxOptions.encoding = 'utf-8';
this.position();
this.setup(true);
this.top = Window.getScrollTop() + (Window.getHeight() / 15);
this.center.setStyles({top: this.top + 'px', display: ''});
this.fx.overlay.custom(0.8);
return this.loadContents(sLinkHref);
},
position: function() {
this.overlay.setStyles({top: Window.getScrollTop() + 'px', height: Window.getHeight() + 'px'});
this.overlayDiv.setStyles({top: Window.getScrollTop() + 'px', height: Window.getHeight() + 'px'});
},
scanAnchors: function(oWhere, bForce) {
// scan anchors for those opening a MOOdalBox
$$($(oWhere).getElements('a')).each(function(el) {
// we use a regexp to check for links that
// have a rel attribute starting with "moodalbox"
if (el.href && ((el.rel && el.rel.test('^moodalbox', 'i')) || (bForce && !el.onclick))) {
if (bForce && !el.rel) {
// if we're forcing links to open in a moodalbox, we're keeping the current size
el.rel = "moodalbox " + this.options.contentsWidth + "px " + this.options.contentsHeight + "px";
if (this.wizardMode) el.rel += " wizard";
}
el.onclick = this.click.pass(el, this);
this.anchors.push(el);
}
}, this);
},
scanForms: function (oWhere, bForce) {
// scan forms for those opening a MOOdalBox
$$($(oWhere).getElements('form')).each(function(el) {
// we use a regexp to check for links that
// have a rel attribute starting with "moodalbox"
el.rel = el.getProperty('rel');
if ((el.rel && el.rel.test('^moodalbox', 'i')) || bForce) {
if (bForce && !el.rel) {
// if we're forcing links to open in a moodalbox, we're keeping the current size
el.rel = "moodalbox " + this.options.contentsWidth + "px " + this.options.contentsHeight + "px";
if (this.wizardMode) el.rel += " wizard";
}
el.onsubmit = this.open.pass([el.action, el.title, el.rel, el], this);
this.forms.push(el);
}
}, this);
},
setup: function(open) {
//var elements = $A($$('object'));
//elements.extend($$(window.ActiveXObject ? 'select' : 'embed'));
//elements.each(function(el){ el.style.visibility = open ? 'hidden' : ''; });
// use an iframe to show under everything
var fn = open ? 'addEvent' : 'removeEvent';
window[fn]('scroll', this.eventPosition)[fn]('resize', this.eventPosition);
document[fn]('keydown', this.eventKeyDown);
this.step = 0;
},
loadContents: function() {
if (this.step) return false;
this.step = 1;
// check to see if there are specified dimensions
// if not, fall back to default values
// fullscreen switch concept originally by Lennart Pilon (http://ljpilon.nl/)
// we check for a "fullscreen" switch
if (this.rel.test("fullscreen")) {
this.options.contentsWidth = this.options.defFullscreenWidth * window.getWidth();
this.options.contentsHeight = this.options.defFullscreenHeight * window.getHeight();
} else { // we check for other specified dimensions (px or %)
var aDim = this.rel.match(/[0-9.]+(px|%)/g);
if (aDim && aDim[0]) { //first dimension is interpreted as width
var w = aDim[0].toInt();
if (aDim[0].test("%")) {
this.options.contentsWidth = (w > 0) ? 0.01 * w * window.getWidth() : this.options.defFullscreenWidth * window.getWidth();
} else {
this.options.contentsWidth = (w > 0) ? w : this.options.defContentsWidth;
}
} else { // we switch to defaults if there aren't any dimensions specified
this.options.contentsWidth = this.options.defContentsWidth;
this.options.contentsHeight = this.options.defContentsHeight;
}
if (aDim && aDim[1]) { // we have a second dimension specified, which we'll interpret as height
var h = aDim[1].toInt();
if (aDim[1].test("%")) {
this.options.contentsHeight = (h > 0) ? 0.01 * h * window.getHeight() : this.options.defFullscreenHeight * window.getHeight();
} else {
this.options.contentsHeight = (h > 0) ? h : this.options.defContentsHeight;
}
} else if (aDim && aDim[0]) {
// we have the first dimension specified, but not the second
// so we interpret as width = height = the given value
if (aDim[0].test("%")) {
this.options.contentsHeight = (w > 0) ? 0.01 * w * window.getHeight() : this.options.defFullscreenHeight * window.getHeight();
} else {
this.options.contentsHeight = (w > 0) ? w : this.options.defContentsHeight;
}
}
// correct a little approximation bug (size flickers)
this.options.contentsWidth = Math.floor(this.options.contentsWidth);
this.options.contentsHeight = Math.floor(this.options.contentsHeight);
}
this.wizardMode = this.rel.test("wizard");
// this is where we'll check for other options passed via the rel attribute
this.bottom.setStyles({opacity: '0', height: '0px', display: 'none'});
this.center.className = 'mb_loading';
this.fx.contents.hide();
// AJAX call here
this.ajaxRequest = new Ajax(this.href, this.ajaxOptions).request();
// make the local timeout call here
return false;
},
ajaxFailure: function () {
this.contents.innerHTML = '';
this.error.clone().inject(this.contents);
this.nextEffect();
this.center.setStyle('cursor', 'pointer');
this.bottom.setStyle('cursor', 'pointer');
this.center.onclick = this.bottom.onclick = this.close.bind(this);
},
// make the local timeout function here
nextEffect: function() {
switch (this.step++) {
case 1:
// remove previous styling from the elements
// (e.g. styling applied in case of an error)
this.center.className = '';
this.center.setStyle('cursor', 'default');
this.bottom.setStyle('cursor', 'default');
this.center.onclick = this.bottom.onclick = '';
this.caption.innerHTML = this.title;
this.contents.setStyles({width: this.options.contentsWidth + "px", height: this.options.contentsHeight + "px"});
if (this.center.clientHeight != this.contents.offsetHeight) {
this.fx.resize.options.duration = this.options.resizeDuration;
this.fx.resize.custom({height: [this.center.clientHeight, this.contents.offsetHeight]});
break;
}
this.step++;
case 2:
if (this.center.clientWidth != this.contents.offsetWidth) {
this.fx.resize.custom({width: [this.center.clientWidth, this.contents.offsetWidth], marginLeft: [-this.center.clientWidth / 2, -this.contents.offsetWidth / 2]});
break;
}
this.step++;
case 3:
this.bottom.setStyles({top: (this.top + this.center.clientHeight) + 'px', width: this.contents.style.width, marginLeft: this.center.style.marginLeft, display: ''});
// check to see if in wizard mode and parse links
if (this.wizardMode) this.scanAnchors(this.contents, true);
if (this.wizardMode) this.scanForms(this.contents, true);
this.fx.contents.custom(0, 1);
break;
case 4:
if (this.options.animateCaption) {
this.fx.bottom.custom({opacity: [0, 1], height: [0, this.bottom.scrollHeight]});
break;
}
this.bottom.setStyles({opacity: '1', height: this.bottom.scrollHeight + 'px'});
case 5:
this.step = 0;
}
},
keyboardListener: function(event) {
// close the MOOdalBox when the user presses CTRL + W, CTRL + X, ESC
if ((event.control && event.key == 'w') || (event.control && event.key == 'x') || (event.key == 'esc')) {
this.close();
event.stop();
}
},
close: function() {
//restore key event listeners
$(document).cloneEvents(this.eventContainer, 'keydown');
this.eventContainer.removeEvents('keydown');
if (this.step < 0) return;
this.step = -1;
for (var f in this.fx) this.fx[f].clearTimer();
this.center.style.display = this.bottom.style.display = 'none';
this.center.className = 'mb_loading';
this.fx.overlay.chain(this.setup.pass(false, this)).custom(0);
this.overlayDiv.style.display = "none";
return false;
},
config: function(options) {
this.options = Object.extend(this.options, options || {});
return false;
// to be used on links
}
};
// Moodal Dialog startup
//window.addEvent('domready', MOOdalBox.init.bind(MOOdalBox));
// @Todo: This must be reviewed ...
function displayLoading() {
$('headerLoading').style.visibility = 'visible';
}

View File

@ -35,7 +35,7 @@ function setUpToolbar(designer, readOnly) {
if (designer.needsSave()) {
designer.save(function() {
var monitor = core.Monitor.getInstance();
var monitor = core.ToolbarNotifier.getInstance();
}, false);
}
}).periodical(30000);