zhouxy108/wisemapping-open-source
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implements toolbar disabling.

Browse Source
This commit is contained in:
Paulo Veiga
2011-10-04 01:16:29 -03:00
parent b7bbe2c0b7
commit 9185883d30
24 changed files with 919 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
wise-doc/src/main/webapp/css/editor.css
View File

@@ -1,7 +1,6 @@
@import "common.css";
/* @Todo: Fix this ...*/
@import "widget/lightbox.css";
@import "libraries/moodialog/css/MooDialog.css";
@import "/mindplot/src/main/javascript/widget/lightbox.css";
@import "/mindplot/src/main/javascript/libraries/moodialog/css/MooDialog.css";
html {
overflow: hidden;
@@ -159,50 +158,25 @@ div#toolbar .buttonContainer {
-moz-margin-end: 7px;
}
div#toolbar .button {
div#toolbar .buttonOn, div#toolbar .buttonOff, div#toolbar .buttonActive, div#toolbar .buttonOn:hover {
width: 32px;
height: 36px;
float: left;
margin: 0 2px 2px 2px;
cursor: pointer;
text-align: center;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
div#toolbar .button:hover {
width: 32px;
height: 36px;
float: left;
div#toolbar .buttonOn:hover, div#toolbar .buttonActive {
margin: 0 1px;
cursor: pointer;
border: 1px solid black;
border-top-color: white;
border-left-color: white;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
cursor: pointer;
}
div#toolbar .buttonActive {
width: 32px;
height: 36px;
float: left;
margin: 0 1px;
cursor: pointer;
border: 1px solid black;
border-top-color: white;
border-left-color: white;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
div#toolbar .buttonOff {
opacity: 0.4;
}
div#toolbar .button img {
@@ -302,6 +276,11 @@ div#topicNote {
z-index: 4;
}
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;

74
wise-doc/src/main/webapp/css/widget/colorPalette.css Normal file
View File

@@ -0,0 +1,74 @@
.palette-panel {
/*background: white;*/
/*border-color: #CCC #666 #666 #CCC;*/
/*border-style: solid;*/
/*border-width: 1px;*/
cursor: default;
font: normal 13px Arial, sans-serif;
margin: 0;
outline: none;
padding: 4px 0;
z-index: 20000;
-webkit-user-select: none;
}
.palette {
cursor: default;
outline: none;
}
.palette-table {
border: 1px solid #666;
border-collapse: collapse;
margin: 5px;
}
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
.palette-table {
border-collapse: collapse;
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
.palette-cell {
border: 0;
border-right: 1px solid #666;
cursor: pointer;
height: 18px;
margin: 0;
text-align: center;
vertical-align: middle;
width: 18px;
}
.palette-cell .palette-colorswatch {
border: none;
font-size: x-small;
height: 18px;
position: relative;
width: 18px;
}
.palette-cell-selected .palette-colorswatch {
background: url(//ssl.gstatic.com/editor/editortoolbar.png) no-repeat -368px 0;
border: 1px solid #333;
color: white;
font-weight: bold;
height: 16px;
width: 16px;
}
.palette-colorswatch:hover {
border: 1px solid white;
height: 16px;
width: 16px;
}

398
wise-doc/src/main/webapp/css/widget/colorPalette.html Normal file
View File

@@ -0,0 +1,398 @@
<div id="color-palette" class="palette-panel palette-panel-vertical palette-panel-noaccel"
style="-webkit-user-select: none; left: 451px; top: 128px; visibility: visible; " role="menu" aria-haspopup="true"
aria-activedescendant="">
<div class="palette" id=":3p">
<table class="palette-table" cellspacing="0" cellpadding="0" role="grid"
aria-activedescendent="palette-cell-244">
<tbody class="palette-body">
<tr class="palette-row">
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(0, 0, 0);"
title="RGB (0, 0, 0)"></div>
</td>
<td class="palette-cell palette-cell-selected">
<div class="palette-colorswatch"
style="background-color: rgb(68, 68, 68);"
title="RGB (68, 68, 68)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(102, 102, 102);"
title="RGB (102, 102, 102)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(153, 153, 153);"
title="RGB (153, 153, 153)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(204, 204, 204);"
title="RGB (204, 204, 204)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(238, 238, 238);"
title="RGB (238, 238, 238)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(243, 243, 243);"
title="RGB (243, 243, 243)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(255, 255, 255);"
title="RGB (255, 255, 255)"></div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="palette" id=":3q">
<table class="palette-table" cellspacing="0" cellpadding="0" role="grid"
>
<tbody class="palette-body">
<tr class="palette-row">
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(255, 0, 0);"
title="RGB (255, 0, 0)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(255, 153, 0);"
title="RGB (255, 153, 0)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(255, 255, 0);"
title="RGB (255, 255, 0)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(0, 255, 0);"
title="RGB (0, 255, 0)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(0, 255, 255);"
title="RGB (0, 255, 255)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(0, 0, 255);"
title="RGB (0, 0, 255)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(153, 0, 255);"
title="RGB (153, 0, 255)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(255, 0, 255);"
title="RGB (255, 0, 255)"></div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="palette" id=":3r">
<table class="palette-table" cellspacing="0" cellpadding="0" role="grid">
<tbody class="palette-body">
<tr class="palette-row">
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(244, 204, 204);"
title="RGB (244, 204, 204)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(252, 229, 205);"
title="RGB (252, 229, 205)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(255, 242, 204);"
title="RGB (255, 242, 204)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(217, 234, 211);"
title="RGB (217, 234, 211)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(208, 224, 227);"
title="RGB (208, 224, 227)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(207, 226, 243);"
title="RGB (207, 226, 243)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(217, 210, 233);"
title="RGB (217, 210, 233)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(234, 209, 220);"
title="RGB (234, 209, 220)"></div>
</td>
</tr>
<tr class="palette-row">
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(234, 153, 153);"
title="RGB (234, 153, 153)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(249, 203, 156);"
title="RGB (249, 203, 156)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(255, 229, 153);"
title="RGB (255, 229, 153)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(182, 215, 168);"
title="RGB (182, 215, 168)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(162, 196, 201);"
title="RGB (162, 196, 201)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(159, 197, 232);"
title="RGB (159, 197, 232)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(180, 167, 214);"
title="RGB (180, 167, 214)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(213, 166, 189);"
title="RGB (213, 166, 189)"></div>
</td>
</tr>
<tr class="palette-row">
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(224, 102, 102);"
title="RGB (224, 102, 102)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(246, 178, 107);"
title="RGB (246, 178, 107)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(255, 217, 102);"
title="RGB (255, 217, 102)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(147, 196, 125);"
title="RGB (147, 196, 125)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(118, 165, 175);"
title="RGB (118, 165, 175)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(111, 168, 220);"
title="RGB (111, 168, 220)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(142, 124, 195);"
title="RGB (142, 124, 195)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(194, 123, 160);"
title="RGB (194, 123, 160)"></div>
</td>
</tr>
<tr class="palette-row">
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(204, 0, 0);"
title="RGB (204, 0, 0)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(230, 145, 56);"
title="RGB (230, 145, 56)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(241, 194, 50);"
title="RGB (241, 194, 50)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(106, 168, 79);"
title="RGB (106, 168, 79)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(69, 129, 142);"
title="RGB (69, 129, 142)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(61, 133, 198);"
title="RGB (61, 133, 198)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(103, 78, 167);"
title="RGB (103, 78, 167)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(166, 77, 121);"
title="RGB (166, 77, 121)"></div>
</td>
</tr>
<tr class="palette-row">
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(153, 0, 0);"
title="RGB (153, 0, 0)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(180, 95, 6);"
title="RGB (180, 95, 6)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(191, 144, 0);"
title="RGB (191, 144, 0)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(56, 118, 29);"
title="RGB (56, 118, 29)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(19, 79, 92);"
title="RGB (19, 79, 92)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(11, 83, 148);"
title="RGB (11, 83, 148)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(53, 28, 117)"
title="RGB (53, 28, 117)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(116, 27, 71);"
title="RGB (116, 27, 71)"></div>
</td>
</tr>
<tr class="palette-row">
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(102, 0, 0);"
title="RGB (102, 0, 0)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(120, 63, 4);"
title="RGB (120, 63, 4)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(127, 96, 0);"
title="RGB (127, 96, 0)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(39, 78, 19);"
title="RGB (39, 78, 19)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(12, 52, 61);"
title="RGB (12, 52, 61)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(7, 55, 99);"
title="RGB (7, 55, 99)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(32, 18, 77);"
title="RGB (32, 18, 77)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(76, 17, 48);"
title="RGB (76, 17, 48)"></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>

61
wise-doc/src/main/webapp/html/editor.html
View File

@@ -2,21 +2,21 @@
<html>
<head>
<title>WiseMapping - Editor </title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-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>
<!-- Internet Explorer 8 Hack -->
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<title>WiseMapping - Editor </title>
<!--<script type="text/javascript" src="http://docs.google.com/brix/static/api/js/jsapi.nocache.js"></script>-->
<link rel="stylesheet" type="text/css" href="../css/editor.css"/>
<link rel="stylesheet" type="text/css" href='/mindplot/src/main/javascript/libraries/moodialog/css/MooDialog.css'/>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js'></script>
<script type='text/javascript' src='../js/mootools-more-1.3.2.1-yui.js'></script>
<script type='text/javascript'
src='https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js'></script>
<script type='text/javascript'
src='/mindplot/src/main/javascript/libraries/mootools/mootools-more-1.3.2.1-yui.js'></script>
<script type='text/javascript' src='/core-js/target/classes/core.js'></script>
<!--<script type='text/javascript' src='js/core-min.js'></script>-->
<script type="text/javascript">
//Google-Brix framework load callback function
@@ -24,15 +24,17 @@
$(document).fireEvent('loadcomplete', 'brix');
};
var mapId = '10'; // @todo: Must be changed ...
var brixReady = false;
var mindReady = false;
var local = false;
var collab = 'standalone';
// var collab = 'brix';
$(document).addEvent('loadcomplete', function(resource) {
brixReady = resource == 'brix' ? true : brixReady;
mindReady = resource == 'mind' ? true : mindReady;
if (mindReady) {
designer = buildDesigner();
designer = buildDesigner(collab);
}
// If both resources has been loaded, start loading the framework...
@@ -49,13 +51,12 @@
}
});
} else if (local && mindReady) {
} else if (collab == 'standalone' && mindReady) {
// Load map from XML ...
var mapXml = '<map name="38298" version="pela"><topic central="true" text="test\nThis is working ?" id="1"/></map>';
var domDocument = core.Utils.createDocumentFromText(mapXml);
var serializer = mindplot.XMLMindmapSerializerFactory.getSerializerFromDocument(domDocument);
var mindmap = serializer.loadFromDom(domDocument);
mindmap.setId('1');
var mindmap = serializer.loadFromDom(domDocument, mapId);
// Now, load the map ...
designer.loadMap(mindmap);
@@ -116,12 +117,12 @@
<div id="editTab" class="tabContent">
<div id="file" class="buttonContainer" title="SYMB_ FILE">
<fieldset>
<div id="undoEdition" class="button" title="Undo Edition">
<div id="undoEdition" class="buttonOn" title="Undo Edition">
<div class="toolbarLabel">
<p>Undo</p>
</div>
</div>
<div id="redoEdition" class="button" title="Redo Edition">
<div id="redoEdition" class="buttonOn" title="Redo Edition">
<div class="toolbarLabel">
<p>Redo</p>
</div>
@@ -130,12 +131,12 @@
</div>
<div id="zoom" class="buttonContainer" title="Zoom">
<fieldset>
<div id="zoomIn" class="button" title="Zoom In">
<div id="zoomIn" class="buttonOn" title="Zoom In">
<div class="toolbarLabel">
<p>In</p>
</div>
</div>
<div id="zoomOut" class="button" title="Zoom Out">
<div id="zoomOut" class="buttonOn" title="Zoom Out">
<div class="toolbarLabel">
<p>Out</p>
</div>
@@ -144,42 +145,42 @@
</div>
<div id="node" class="buttonContainer" title="Node Properties">
<fieldset>
<div id="topicShape" class="button comboButton" title="SYMB_TOPIC_SHAPE">
<div id="topicShape" class="buttonOn comboButton" title="SYMB_TOPIC_SHAPE">
<div class="toolbarLabel">
<p>Shape</p>
</div>
</div>
<div id="addTopic" class="button" title="SYMB_ TOPIC_ADD">
<div id="addTopic" class="buttonOn" title="SYMB_ TOPIC_ADD">
<div class="toolbarLabel">
<p>Add</p>
</div>
</div>
<div id="deleteTopic" class="button" title="SYMB_ TOPIC_DELETE">
<div id="deleteTopic" class="buttonOn" title="SYMB_ TOPIC_DELETE">
<div class="toolbarLabel">
<p>Delete</p>
</div>
</div>
<div id="topicBorder" class="button" title="SYMB_ TOPIC_BORDER_COLOR">
<div id="topicBorder" class="buttonOn" title="SYMB_ TOPIC_BORDER_COLOR">
<div class="toolbarLabel">
<p>Border</p>
</div>
</div>
<div id="topicColor" class="button" title="Background Color">
<div id="topicColor" class="buttonOn" title="Background Color">
<div class="toolbarLabel">
<p>Color</p>
</div>
</div>
<div id="topicIcon" class="button" title="Change Icon">
<div id="topicIcon" class="buttonOn" title="Change Icon">
<div class="toolbarLabel">
<p>Icon</p>
</div>
</div>
<div id="topicNote" class="button" title="Add Note">
<div id="topicNote" class="buttonOn" title="Add Note">
<div class="toolbarLabel">
<p>Note</p>
</div>
</div>
<div id="topicLink" class="button" title="Add Link">
<div id="topicLink" class="buttonOn" title="Add Link">
<div class="toolbarLabel">
<p>Link</p>
</div>
@@ -193,27 +194,27 @@
</div>
<div id="font" class="buttonContainer" title="Font Properties">
<fieldset>
<div id="fontFamily" class="button comboButton" title="Font Style">
<div id="fontFamily" class="buttonOn comboButton" title="Font Style">
<div class="toolbarLabel">
<p>Style</p>
</div>
</div>
<div id="fontSize" class="button comboButton" title="Font Size">
<div id="fontSize" class="buttonOn comboButton" title="Font Size">
<div class="toolbarLabel">
<p>Size</p>
</div>
</div>
<div id="fontBold" class="button" title="Bold Style">
<div id="fontBold" class="buttonOn" title="Bold Style">
<div class="toolbarLabel">
<p>Bold</p>
</div>
</div>
<div id="fontItalic" class="button" title="Italic Style">
<div id="fontItalic" class="buttonOn" title="Italic Style">
<div class="toolbarLabel">
<p>Italic</p>
</div>
</div>
<div id="fontColor" class="button comboButton" title="Fond Color">
<div id="fontColor" class="buttonOn comboButton" title="Fond Color">
<div class="toolbarLabel">
<p>Color</p>
</div>

5
wise-doc/src/main/webapp/js/editor.js
View File

@@ -158,8 +158,8 @@ function buildDesigner() {
width: parseInt(screen.width)
});
var editorProperties = {zoom:0.85,saveOnLoad:true};
designer = new mindplot.MindmapDesigner(editorProperties, container);
var editorProperties = {zoom:0.85,saveOnLoad:true,collab:collab};
designer = new mindplot.Designer(editorProperties, container);
designer.setViewPort({
height: parseInt(window.innerHeight - 112), // Footer and Header
width: parseInt(window.innerWidth)
@@ -171,7 +171,6 @@ function buildDesigner() {
designer._cleanScreen = function() {
menu.clear()
};
return designer;
}