From 000bb569c8869950b8dc19036f3a5e325e0696ca Mon Sep 17 00:00:00 2001 From: Jeff Schiller Date: Thu, 24 Sep 2009 04:22:55 +0000 Subject: [PATCH] Completely rework layer list into a table git-svn-id: http://svg-edit.googlecode.com/svn/trunk@703 eee81c28-f429-11dd-99c0-75d572ba1ddd --- editor/svg-editor.css | 32 +++++++++++++++++---- editor/svg-editor.html | 11 ++++---- editor/svg-editor.js | 64 +++++++++++++++++++++++------------------- 3 files changed, 67 insertions(+), 40 deletions(-) diff --git a/editor/svg-editor.css b/editor/svg-editor.css index df3ad48b..fa31ac29 100644 --- a/editor/svg-editor.css +++ b/editor/svg-editor.css @@ -121,16 +121,36 @@ body { } #svg_editor #layerlist { - margin: 0px; + margin: 1px; + padding: 0px; width: 110px; + border-collapse: collapse; + border: 1px solid #808080; + background-color: #FFFFFF; } -/* TODO: Make this work in more than just Firefox */ -#svg_editor #layerlist option { -/* background-image: url('images/eye.png');*/ +#svg_editor #layerlist tr.layer { + background-color: #FFFFFF; + margin: 0px; + padding: 0px; +} +#svg_editor #layerlist tr.layersel { + border: 1px solid #808080; + background-color: #CCCCCC; +} + +#svg_editor #layerlist td.layervis { + background-image: url('images/eye.png'); background-repeat: no-repeat; - background-position: 4px center; - padding-left: 25px; + background-position: 3px center; + width: 22px; +} +#svg_editor #layerlist td.layerinvis { + background-image: none; +} + +#svg_editor #layerlist tr.layersel td.layername { + font-weight: bold; } #svg_editor div.palette_item { diff --git a/editor/svg-editor.html b/editor/svg-editor.html index a0af1a11..f89dc24f 100644 --- a/editor/svg-editor.html +++ b/editor/svg-editor.html @@ -50,11 +50,12 @@ Move Layer Down - + + + + + +
Layer 1
diff --git a/editor/svg-editor.js b/editor/svg-editor.js index 7efd99bb..0d64db8c 100644 --- a/editor/svg-editor.js +++ b/editor/svg-editor.js @@ -1102,8 +1102,8 @@ function svg_edit_setup() { svgCanvas.createLayer(newName); updateContextPanel(); populateLayers(); - $('#layerlist option').removeAttr("selected"); - $('#layerlist option:first').attr("selected", "selected"); + $('#layerlist tr.layer').removeClass("layersel"); + $('#layerlist tr.layer:first').addClass("layersel"); }); $('#layer_delete').click(function() { @@ -1113,39 +1113,40 @@ function svg_edit_setup() { // This matches what SvgCanvas does // TODO: make this behavior less brittle (svg-editor should get which // layer is selected from the canvas and then select that one in the UI) - $('#layerlist option:first').attr("selected", "selected"); + $('#layerlist tr.layer').removeClass("layersel"); + $('#layerlist tr.layer:first').addClass("layersel"); } }); $('#layer_up').click(function() { // find index position of selected option - var curIndex = $('#layerlist option:selected').prevAll().length; + var curIndex = $('#layerlist tr.layersel').prevAll().length; if (curIndex > 0) { - var total = $('#layerlist option').length; + var total = $('#layerlist tr.layer').length; curIndex--; svgCanvas.setCurrentLayerPosition(total-curIndex-1); populateLayers(); - $('#layerlist option').removeAttr("selected"); - $('#layerlist option:eq('+curIndex+')').attr("selected", "selected"); + $('#layerlist tr.layer').removeClass("layersel"); + $('#layerlist tr.layer:eq('+curIndex+')').addClass("layersel"); } }); $('#layer_down').click(function() { // find index position of selected option - var curIndex = $('#layerlist option:selected').prevAll().length; - var total = $('#layerlist option').length; + var curIndex = $('#layerlist tr.layersel').prevAll().length; + var total = $('#layerlist tr.layer').length; if (curIndex < total-1) { curIndex++; svgCanvas.setCurrentLayerPosition(total-curIndex-1); populateLayers(); - $('#layerlist option').removeAttr("selected"); - $('#layerlist option:eq('+curIndex+')').attr("selected", "selected"); + $('#layerlist tr.layer').removeClass("layersel"); + $('#layerlist tr.layer:eq('+curIndex+')').addClass("layersel"); } }); $('#layer_rename').click(function() { - var curIndex = $('#layerlist option:selected').prevAll().length; - var oldName = $('#layerlist option:selected').attr("value"); + var curIndex = $('#layerlist tr.layersel').prevAll().length; + var oldName = $('#layerlist tr.layersel td.layername').text(); var newName = prompt("Please enter the new layer name",""); if (!newName) return; if (oldName == newName) { @@ -1162,34 +1163,39 @@ function svg_edit_setup() { svgCanvas.renameCurrentLayer(newName); populateLayers(); - $('#layerlist option').removeAttr("selected"); - $('#layerlist option:eq('+curIndex+')').attr("selected", "selected"); + $('#layerlist tr.layer').removeClass("layersel"); + $('#layerlist tr.layer:eq('+curIndex+')').addClass("layersel"); }); var populateLayers = function(){ - $('#layerlist').empty(); + var layerlist = $('#layerlist tbody'); + layerlist.empty(); var layer = svgCanvas.getNumLayers(); // we get the layers in the reverse z-order (the layer rendered on top is listed first) while (layer--) { var name = svgCanvas.getLayer(layer); - $('#layerlist').append(""); + // contenteditable=\"true\" + layerlist.append("" + name + ""); } // if we only have one layer, then always make sure that layer is selected // (This is really only required upon first initialization) - if ($('#layerlist').size() == 1) { - $('#layerlist option:first').attr("selected", "selected"); + if (layerlist.size() == 1) { + $('#layerlist tr:first').addClass("layersel"); } - $('#layerlist option').mouseup(function(evt){ - $('#layerlist option').removeAttr("selected"); - var option = $(this); - option.attr("selected", "selected"); - svgCanvas.setCurrentLayer(option.attr("value")); - }).click(function(evt) { - var container = document.getElementById("layerlist"); -// var mouse_x = evt.pageX - container.boxObject.x; -// var mouse_y = evt.pageY - container.boxObject.y; - // mouse_x, mouse_y contain the relative x,y position of the click + // handle selection of layer + $('#layerlist td.layername').click(function(evt){ + $('#layerlist tr.layer').removeClass("layersel"); + var row = $(this.parentNode); + row.addClass("layersel"); + svgCanvas.setCurrentLayer(this.textContent); }); + + // if there were too few rows, let's add a few to make it not so lonely + var num = 5 - $('#layerlist tr.layer').size(); + while (num-- > 0) { + // FIXME: there must a better way to do this + layerlist.append("_"); + } }; populateLayers();