Add a new color picker...

This commit is contained in:
Paulo Veiga 2011-08-09 01:45:24 -03:00
parent 234a54b166
commit 7d9af403fe
17 changed files with 5958 additions and 5534 deletions

View File

@ -50,7 +50,7 @@
<includes>
<include>${basedir}/target/tmp/header-min.js</include>
<include>${basedir}/target/tmp/ColorPicker-min.js</include>
<include>${basedir}/target/tmp/Loader-min.js</include>
<include>${basedir}/target/tmp/Functions-min.js</include>
<include>${basedir}/target/tmp/log4js-min.js</include>
<include>${basedir}/target/tmp/Monitor-min.js</include>
<include>${basedir}/target/tmp/Point-min.js</include>
@ -64,6 +64,7 @@
</aggregations>
<nomunge>true</nomunge>
<jswarn>false</jswarn>
<force>true</force>
</configuration>
</execution>
</executions>

View File

@ -0,0 +1,26 @@
/*
Function: $defined
Returns true if the passed in value/object is defined, that means is not null or undefined.
Arguments:
obj - object to inspect
*/
$defined = function(obj) {
return (obj != undefined);
};
$assert = function(assert, message) {
if (!$defined(assert) || !assert) {
var stack;
try {
null.eval();
} catch(e) {
stack = e;
}
wLogger.error(message + "," + stack);
// core.Logger.logError(message + "," + stack);
}
};

View File

@ -24,18 +24,6 @@ core.Utils =
}
};
/*
Function: $defined
Returns true if the passed in value/object is defined, that means is not null or undefined.
Arguments:
obj - object to inspect
*/
function $defined(obj) {
return (obj != undefined);
}
;
/**
* http://kevlindev.com/tutorials/javascript/inheritance/index.htm
* A function used to extend one class with another
@ -58,21 +46,6 @@ objects.extend = function(subClass, baseClass) {
subClass.superClass = baseClass.prototype;
};
$assert = function(assert, message) {
if (!$defined(assert) || !assert) {
var stack;
try {
null.eval();
} catch(e) {
stack = e;
}
wLogger.error(message + "," + stack);
// core.Logger.logError(message + "," + stack);
}
};
Math.sign = function(value) {
return (value >= 0) ? 1 : -1;
};

View File

@ -176,6 +176,8 @@
files="widget/ToolbarItem.js"/>
<filelist dir="${basedir}/src/main/javascript/"
files="widget/ColorPickerPanel.js"/>
<filelist dir="${basedir}/src/main/javascript/"
files="widget/ColorPalettePanel.js"/>
<filelist dir="${basedir}/src/main/javascript/"
files="widget/IconPanel.js"/>
<filelist dir="${basedir}/src/main/javascript/"
@ -236,7 +238,6 @@
<include>DragTopic-min.js</include>
<include>DragManager-min.js</include>
<include>DragPivot-min.js</include>
<include>TopicBoard-min.js</include>
<include>CentralTopicBoard-min.js</include>
<include>MainTopicBoard-min.js</include>
<include>ConnectionLine-min.js</include>
@ -324,6 +325,7 @@
</aggregations>
<nomunge>true</nomunge>
<jswarn>false</jswarn>
<force>true</force>
</configuration>
</execution>
</executions>

View File

@ -0,0 +1,140 @@
/*
* Copyright [2011] [wisemapping]
*
* Licensed under WiseMapping Public License, Version 1.0 (the "License").
* It is basically the Apache License, Version 2.0 (the "License") plus the
* "powered by wisemapping" text requirement on every single page;
* you may not use this file except in compliance with the License.
* You may obtain a copy of the license at
*
* http://www.wisemapping.org/license
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
mindplot.widget.ColorPalettePanel = new Class({
Extends: mindplot.widget.ToolbarItem,
initialize : function(buttonId, model, baseUrl) {
this.parent(buttonId, model);
$assert(baseUrl, "baseUrl can not be null");
this.getButtonElem().addEvent('click', function() {
// Is the panel being displayed ?
if (this.isVisible()) {
this.hide();
} else {
this.show();
}
}.bind(this));
this._baseUrl = baseUrl;
},
_load : function() {
if (!mindplot.widget.ColorPalettePanel._panelContent) {
// Load all the CSS styles ...
Asset.css(this._baseUrl + '/colorPalette.css', {id: 'colorPaletteStyle', title: 'colorPalette'});
// Load panel html fragment ...
var result;
var request = new Request({
url: this._baseUrl + '/colorPalette.html',
method: 'get',
async: false,
onRequest: function() {
console.log("loading ...");
},
onSuccess: function(responseText) {
result = responseText;
},
onFailure: function() {
result = '<div>Sorry, your request failed :(</div>';
}
});
request.send();
mindplot.widget.ColorPalettePanel._panelContent = result;
}
return mindplot.widget.ColorPalettePanel._panelContent;
},
_init : function() {
if (!this._panelContent) {
var buttonElem = this.getButtonElem();
// Add panel content ..
var panelElem = this.buildPanel();
panelElem.setStyle('display', 'none');
panelElem.inject(buttonElem);
// Register on toolbar elements ...
var colorCells = panelElem.getElements('div[class=palette-colorswatch]');
var model = this.getModel();
colorCells.forEach(function(elem) {
elem.addEvent('click', function() {
var color = elem.getStyle("background-color");
model.setValue(color);
});
});
this._panelId = panelElem.id;
this._panelContent = true;
}
},
buildPanel: function() {
var content = new Element("div", {'class':'toolbarPanel','id': this._buttonId + 'colorPalette'});
content.innerHTML = this._load();
return content;
},
_getPanelElem : function () {
this._init();
return $(this._panelId);
},
show : function() {
if (!this.isVisible()) {
this.parent();
var panelElem = this._getPanelElem();
// Clear selected cell based on the color ...
var tdCells = panelElem.getElements("td[class='palette-cell palette-cell-selected']");
tdCells.forEach(function(elem) {
elem.className = 'palette-cell';
});
// Mark the cell as selected ...
var colorCells = panelElem.getElements('div[class=palette-colorswatch]');
var model = this.getModel();
colorCells.forEach(function(elem) {
var color = elem.getStyle("background-color");
if (model.getValue() == color) {
elem.parentNode.className = 'palette-cell palette-cell-selected';
}
});
// Finally, display the dialog ...
panelElem.setStyle('display', 'block');
}
},
hide : function() {
if (this.isVisible()) {
this.parent();
this._getPanelElem().setStyle('display', 'none');
}
},
isVisible : function() {
return this._getPanelElem().getStyle('display') == 'block';
}
});

View File

@ -16,7 +16,7 @@
* limitations under the License.
*/
mindplot.widget.ColorPicker = new Class({
mindplot.widget.ColorPickerPanel = new Class({
Extends: mindplot.widget.ToolbarItem,
initialize : function(buttonId, model) {
this.parent(buttonId, model);
@ -29,7 +29,7 @@ mindplot.widget.ColorPicker = new Class({
}.bind(this),
onChange: function(color) {
this.getModel().setValue(color.hex);
},
}.bind(this),
onComplete: function() {
this.hide();
}.bind(this)

View File

@ -39,16 +39,17 @@ mindplot.widget.IconPanel = new Class({
var buttonElem = this.getButtonElem();
var coord = buttonElem.getCoordinates();
var top = buttonElem.getTop() + coord.height + 2;
var left = buttonElem.getLeft();
var top = buttonElem.getTop() + coord.height + 7;
var left = buttonElem.getLeft() - 6;
panel.setStyles({
width:this.options.initialWidth,
height:0,position:'absolute',
height:0,
position:'absolute',
top:top,
left:left,
background:'#e5e5e5',
border:'1px solid #BBB4D6',
background:'#ffffff',
'border-color':'#CCC #666 #666 #CCC;',
zIndex:20,
overflow:'hidden'}
);

View File

@ -20,6 +20,8 @@ mindplot.widget.Menu = new Class({
initialize : function(designer, containerId) {
$assert(designer, "designer can not be null");
$assert(containerId, "containerId can not be null");
// @Todo: Remove hardcode ...
var baseUrl = "/mindplot/src/main/javascript/widget";
// Init variables ...
this._designer = designer;
@ -29,18 +31,19 @@ mindplot.widget.Menu = new Class({
// Stop event propagation ...
$(this._containerId).addEvent('click', function(event) {
event.stopPropagation();
return false;
});
$(this._containerId).addEvent('dblclick', function(event) {
event.stopPropagation();
return false;
});
// Create panels ...
var fontFamilyModel = {
getValue: function() {
var nodes = designer.getSelectedNodes();
var length = nodes.length;
if (length == 1) {
if (nodes.length == 1) {
return nodes[0].getFontFamily();
}
},
@ -55,8 +58,7 @@ mindplot.widget.Menu = new Class({
var fontSizeModel = {
getValue: function() {
var nodes = designer.getSelectedNodes();
var length = nodes.length;
if (length == 1) {
if (nodes.length == 1) {
return nodes[0].getFontSize();
}
},
@ -69,8 +71,7 @@ mindplot.widget.Menu = new Class({
var topicShapeModel = {
getValue: function() {
var nodes = designer.getSelectedNodes();
var length = nodes.length;
if (length == 1) {
if (nodes.length == 1) {
return nodes[0].getShapeType();
}
},
@ -95,38 +96,47 @@ mindplot.widget.Menu = new Class({
var topicColorModel =
{
getValue : function() {
var nodes = designer.getSelectedNodes();
if (nodes.length == 1) {
return nodes[0].getBackgroundColor();
}
return null;
},
setValue : function (hex) {
designer.setBackColor2SelectedNode(hex);
}
};
this._toolbarElems.push(new mindplot.widget.ColorPicker('topicColor', topicColorModel));
this._toolbarElems.push(new mindplot.widget.ColorPalettePanel('topicColor', topicColorModel, baseUrl));
// Border color item ...
var borderColorModel =
{
getValue : function() {
return null;
var nodes = designer.getSelectedNodes();
if (nodes.length == 1) {
return nodes[0].getBorderColor();
}
},
setValue : function (hex) {
designer.setBorderColor2SelectedNode(hex);
}
};
this._toolbarElems.push(new mindplot.widget.ColorPicker('topicBorder', borderColorModel));
this._toolbarElems.push(new mindplot.widget.ColorPalettePanel('topicBorder', borderColorModel, baseUrl));
// Font color item ...
var fontColorModel =
{
getValue : function() {
return null;
var nodes = designer.getSelectedNodes();
if (nodes.length == 1) {
return nodes[0].getFontColor();
}
},
setValue : function (hex) {
designer.setFontColor2SelectedNode(hex);
}
};
var fontColorPicker = new mindplot.widget.ColorPicker('fontColor', fontColorModel);
this._toolbarElems.push(fontColorPicker);
this._toolbarElems.push(new mindplot.widget.ColorPalettePanel('fontColor', fontColorModel, baseUrl));
// Register on close events ...
this._toolbarElems.forEach(function(elem) {
@ -198,8 +208,6 @@ mindplot.widget.Menu = new Class({
}
});
},
clear : function() {

View File

@ -41,6 +41,7 @@ mindplot.widget.ToolbarPanel = new Class({
elem.addEvent('click', function(event) {
var value = $defined(elem.getAttribute('model')) ? elem.getAttribute('model') : elem.id;
this.getModel().setValue(value);
event.stopPropagation();
this.hide();
}.bind(this));
}.bind(this));
@ -54,31 +55,31 @@ mindplot.widget.ToolbarPanel = new Class({
} else {
this.show();
}
}.bind(this));
return panelElem.id;
},
show : function() {
this.parent();
var menuElems = $(this._panelId).getElements('div');
var value = this.getModel().getValue();
menuElems.forEach(function(elem) {
var elemValue = $defined(elem.getAttribute('model')) ? elem.getAttribute('model') : elem.id;
if (elemValue == value)
elem.className = "toolbarPanelLinkSelectedLink";
else
elem.className = "toolbarPanelLink";
});
$(this._panelId).setStyle('display', 'block');
if (!this.isVisible()) {
this.parent();
var menuElems = $(this._panelId).getElements('div');
var value = this.getModel().getValue();
menuElems.forEach(function(elem) {
var elemValue = $defined(elem.getAttribute('model')) ? elem.getAttribute('model') : elem.id;
if (elemValue == value)
elem.className = "toolbarPanelLinkSelectedLink";
else
elem.className = "toolbarPanelLink";
});
$(this._panelId).setStyle('display', 'block');
}
},
hide : function() {
this.parent();
$(this._panelId).setStyle('display', 'none');
if (this.isVisible()) {
this.parent();
$(this._panelId).setStyle('display', 'none');
}
},
isVisible : function() {

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;
}

View File

@ -0,0 +1,401 @@
<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: #525c61;"
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>

View File

@ -0,0 +1,41 @@
<!DOCTYPE HTML>
<html>
<head>
<script type='text/javascript'
src='../../../../../wise-doc/src/main/webapp/js/mootools-core-1.3.2-full-compat.js'></script>
<script type='text/javascript'
src='../../../../../wise-doc/src/main/webapp/js/mootools-more-1.3.2.1-yui.js'></script>
<script type='text/javascript' src='../../../main/javascript/header.js'></script>
<script type='text/javascript' src='../../../../../core-js/target/classes/core.js'></script>
<script type='text/javascript' src='../../../main/javascript/widget/ToolbarItem.js'></script>
<script type='text/javascript' src='../../../main/javascript/widget/ColorPalettePanel.js'></script>
<script type='text/javascript'>
window.addEvent("load", function(e) {
var model = {
getValue: function() {
},
setValue : function(value) {
console.log("value:" + value);
}
};
var palette = new mindplot.widget.ColorPalette('myButton', model,"/mindplot/src/main/javascript/widget");
});
</script>
</head>
<body>
<div id="myButton" style="border: 1px red solid">
The button
</div>
</body>
</html>

View File

@ -86,6 +86,7 @@
</aggregations>
<nomunge>true</nomunge>
<jswarn>false</jswarn>
<force>true</force>
</configuration>
</execution>
</executions>

View File

@ -1,242 +0,0 @@
.bubbleContainer {
position: absolute;
z-index: 50;
opacity: 0;
width: auto;
overflow: hidden;
padding: 20px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #BCCCE1;
-moz-box-shadow: 5px 5px 5px #888;
-webkit-box-shadow: 5px 5px 5px #888;
box-shadow: 5px 5px 5px #888;
border: 1px solid black;
}
.bublePartContainer {
clear: both;
}
.bubblePart {
float: left;
}
.bubbleLeft {
background: transparent url(../images/bubbleTip_left.png) top left;
width: 12px;
height: 4px;
}
.bubbleCenter {
background-color: #362d2e;
text-align: center;
z-index: 60;
}
.bubbleRight {
background: transparent url(../images/bubbleTip_right.png) top left;
width: 23px;
height: 4px;
}
.bubbleTopLeft {
background: transparent url(../images/bubbleTip_corner_top_left.png) top left;
width: 12px;
height: 12px;
}
.bubbleHintTopLeft {
background: transparent url(../images/bubbleTip_pico_corner_top_left.png) top left;
width: 12px;
height: 57px;
}
.bubbleTopRight {
background: transparent url(../images/bubbleTip_corner_top_right.png) top left;
width: 23px;
height: 12px;
}
.bubbleHintTopRight {
background: transparent url(../images/bubbleTip_pico_corner_top_right.png) top left;
width: 23px;
height: 57px;
}
.bubbleTop {
background: transparent url(../images/bubbleTip_top.png) top left;
height: 12px;
width: 4px;
}
.bubbleHintTop {
background: transparent url(../images/bubbleTip_pico_top.png) top left;
height: 57px;
width: 4px;
}
.bubbleBottomLeft {
background: transparent url(../images/bubbleTip_corner_bottom_left.png) top left;
width: 12px;
height: 26px;
}
.bubbleHintBottomLeft {
background: transparent url(../images/bubbleTip_pico_corner_bottom_left.png) top left;
width: 12px;
height: 62px;
}
.bubbleBottomRight {
background: transparent url(../images/bubbleTip_corner_bottom_right.png) top left;
width: 23px;
height: 26px;
}
.bubbleHintBottomRight {
background: transparent url(../images/bubbleTip_pico_corner_bottom_right.png) top left;
width: 23px;
height: 62px;
}
.bubbleBottom {
background: transparent url(../images/bubbleTip_bottom.png) top left;
height: 26px;
width: 4px;
}
.bubbleHintBottom {
background: transparent url(../images/bubbleTip_pico_bottom.png) top left;
height: 62px;
width: 4px;
}
.bubbleBottomHint {
background: transparent url(../images/bubbleTip_bottom_pico.png) top left;
width: 58px;
height: 62px;
}
.bubbleTopHint {
background: transparent url(../images/bubbleTip_top_pico.png) top left;
width: 58px;
height: 57px;
}
.bubbleLeftBlue {
background: transparent url(../images/bubbleTip_left_blue.gif) top left;
width: 12px;
height: 4px;
}
.bubbleCenterBlue {
background-color: #BCCCE1;
z-index: 60;
overflow: hidden;
}
.bubbleRightBlue {
background: transparent url(../images/bubbleTip_right_blue.gif) top left;
width: 23px;
height: 3px;
}
.bubbleTopLeftBlue {
background: transparent url(../images/bubbleTip_corner_top_left_blue.gif) top left;
width: 12px;
height: 18px;
}
.bubbleHintTopLeftBlue {
background: transparent url(../images/bubbleTip_pico_corner_top_left_blue.gif) top left;
width: 13px;
height: 61px;
}
.bubbleTopRightBlue {
background: transparent url(../images/bubbleTip_corner_top_right_blue.gif) top left;
width: 23px;
height: 18px;
}
.bubbleHintTopRightBlue {
background: transparent url(../images/bubbleTip_pico_corner_top_right_blue.gif) top left;
width: 23px;
height: 61px;
}
.bubbleTopBlue {
background: transparent url(../images/bubbleTip_top_blue.gif) top left;
height: 18px;
width: 3px;
}
.bubbleHintTopBlue {
background: transparent url(../images/bubbleTip_pico_top_blue.gif) top left;
height: 61px;
width: 3px;
}
.bubbleBottomLeftBlue {
background: transparent url(../images/bubbleTip_corner_bottom_left_blue.gif) top left;
width: 13px;
height: 32px;
}
.bubbleHintBottomLeftBlue {
background: transparent url(../images/bubbleTip_pico_corner_bottom_left_blue.gif) top left;
width: 12px;
height: 62px;
}
.bubbleBottomRightBlue {
background: transparent url(../images/bubbleTip_corner_bottom_right_blue.gif) top left;
width: 23px;
height: 32px;
}
.bubbleHintBottomRightBlue {
background: transparent url(../images/bubbleTip_pico_corner_bottom_right_blue.gif) top left;
width: 23px;
height: 62px;
}
.bubbleBottomBlue {
background: transparent url(../images/bubbleTip_bottom_blue.gif) top left;
height: 32px;
width: 3px;
}
.bubbleHintBottomBlue {
background: transparent url(../images/bubbleTip_pico_bottom_blue.gif) top left;
height: 62px;
width: 3px;
}
.bubbleBottomHintBlue {
background: transparent url(../images/bubbleTip_bottom_pico_blue.png) top left;
width: 58px;
height: 62px;
}
.bubbleTopHintBlue {
background: transparent url(../images/bubbleTip_top_pico_blue.png) top left;
width: 58px;
height: 61px;
}
.btn-primary {
background: #3399CC;
border: 1px solid #006699;
color: #FFFFFF;
font-family: arial, helvetica, sans-serif;
font-size: 72%;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: normal;
overflow: visible;
padding: 2px 8px 1px;
vertical-align: middle;
}

View File

@ -400,8 +400,11 @@ div#fontColor {
.toolbarPanel {
color: black;
border: 1px solid #bbb4d6;
background: #E5E5E5;
border-color: #CCC #666 #666 #CCC;
border-style: solid;
border-width: 1px;
background: white;
padding: 2px;
display: none;
position: absolute;
z-index: 4;

View File

@ -10,7 +10,6 @@
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<title>WiseMapping - Editor </title>
<link rel="stylesheet" type="text/css" href="../css/editor.css"/>
<link rel="stylesheet" type="text/css" href="../css/bubble.css"/>
<!--<script type='text/javascript' src='../js/wiseLibrary.js'></script>-->
@ -21,10 +20,6 @@
<!--<script type='text/javascript' src='../js/windoo.js'></script>-->
<!--<script type='text/javascript' src='../js/wiseEditorLibrary.js'></script>-->
<!--<script type='text/javascript' src='../js/IconPanel.js'></script>-->
<!--<script type='text/javascript' src='../js/mooRainbow.js'></script>-->
<script type='text/javascript' src='../../../../../wise-webapp/src/main/webapp/js/mooRainbow.js'></script>
<script type='text/javascript' src='../js/core.js'></script>

File diff suppressed because it is too large Load Diff