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

Default editor colors appear in the pallete.

Browse Source 
Remove discard changes button.
This commit is contained in:
Paulo Gustavo Veiga
2012-08-17 09:46:35 -03:00
parent 4cd765cfb9
commit f6953aad9c
4 changed files with 109 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
mindplot/src/main/javascript/widget/ColorPalettePanel.js
View File

@@ -17,34 +17,34 @@
*/
mindplot.widget.ColorPalettePanel = new Class({
Extends: mindplot.widget.ToolbarPaneItem,
Extends:mindplot.widget.ToolbarPaneItem,
initialize : function(buttonId, model, baseUrl) {
initialize:function (buttonId, model, baseUrl) {
this._baseUrl = baseUrl;
this.parent(buttonId, model);
$assert($defined(baseUrl), "baseUrl can not be null");
},
_load : function() {
_load:function () {
if (!mindplot.widget.ColorPalettePanel._panelContent) {
// Load all the CSS styles ...
Asset.css(this._baseUrl + '/colorPalette.css', {id: 'colorPaletteStyle', title: 'colorPalette'});
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() {
url:this._baseUrl + '/colorPalette.html',
method:'get',
async:false,
onRequest:function () {
console.log("loading ...");
},
onSuccess: function(responseText) {
onSuccess:function (responseText) {
result = responseText;
},
onFailure: function() {
onFailure:function () {
result = '<div>Sorry, your request failed :(</div>';
}
});
@@ -56,15 +56,15 @@ mindplot.widget.ColorPalettePanel = new Class({
},
buildPanel: function() {
var content = new Element("div", {'class':'toolbarPanel','id': this._buttonId + 'colorPalette'});
buildPanel:function () {
var content = new Element("div", {'class':'toolbarPanel', 'id':this._buttonId + 'colorPalette'});
content.innerHTML = this._load();
// Register on toolbar elements ...
var colorCells = content.getElements('div[class=palette-colorswatch]');
var model = this.getModel();
colorCells.each(function(elem) {
elem.addEvent('click', function() {
colorCells.each(function (elem) {
elem.addEvent('click', function () {
var color = elem.getStyle("background-color");
model.setValue(color);
this.hide();
@@ -74,12 +74,12 @@ mindplot.widget.ColorPalettePanel = new Class({
return content;
},
_updateSelectedItem : function() {
_updateSelectedItem:function () {
var panelElem = this.getPanelElem();
// Clear selected cell based on the color ...
var tdCells = panelElem.getElements("td[class='palette-cell palette-cell-selected']");
tdCells.each(function(elem) {
tdCells.each(function (elem) {
elem.className = 'palette-cell';
});
@@ -87,9 +87,15 @@ mindplot.widget.ColorPalettePanel = new Class({
var colorCells = panelElem.getElements('div[class=palette-colorswatch]');
var model = this.getModel();
var modelValue = model.getValue();
colorCells.each(function(elem) {
colorCells.each(function (elem) {
var color = elem.getStyle("background-color");
if (modelValue == color) {
if (modelValue != null && modelValue[0] == 'r') {
modelValue = modelValue.rgbToHex();
}
console.log("modelValue:" + modelValue);
console.log("color:" + color);
if (modelValue != null && modelValue.toUpperCase() == color.toUpperCase()) {
elem.parentNode.className = 'palette-cell palette-cell-selected';
}
});

56
mindplot/src/main/javascript/widget/colorPalette.html
View File

@@ -1,6 +1,7 @@
<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">
@@ -46,8 +47,8 @@
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(255, 255, 255);"
title="RGB (255, 255, 255)"></div>
style="background-color: rgb(254, 255, 255);"
title="RGB (254, 255, 255)"></div>
</td>
</tr>
</tbody>
@@ -395,4 +396,55 @@
</tbody>
</table>
</div>
<div class="palette" id=":2p">
<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(255, 255, 255);"
title="RGB (255, 255, 255)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(224, 229, 239);"
title="RGB (224, 229, 239)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color:rgb(80, 157, 192);"
title="RGB (80, 157, 192)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color:rgb(57, 113, 177);"
title="RGB (57, 113, 177)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(2, 59, 185);"
title="RGB (2, 59, 185)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(244, 184, 45);"
title="RGB (244, 184, 45)"></div>
</td>
<td class="palette-cell palette-cell-selected">
<div class="palette-colorswatch"
style="background-color: rgb(241, 163, 39);"
title="RGB (241, 163, 39)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(82, 92, 97);"
title="RGB (82, 92, 97)"></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>