diff --git a/img/btnArrowClose.xcf b/img/btnArrowClose.xcf new file mode 100644 index 0000000..87ecf05 Binary files /dev/null and b/img/btnArrowClose.xcf differ diff --git a/img/btnArrowOpen.xcf b/img/btnArrowOpen.xcf new file mode 100644 index 0000000..6af56ad Binary files /dev/null and b/img/btnArrowOpen.xcf differ diff --git a/js/buttonbehaviors.js b/js/buttonbehaviors.js index a97b9d5..80688a5 100644 --- a/js/buttonbehaviors.js +++ b/js/buttonbehaviors.js @@ -1,7 +1,7 @@ var twistIncrement = Math.PI/1800; var btnNew, btnPrevious, btnNext, btnOops, btnStop, btnInfo, btnRotate; -var btnSettings, btnWordArt, btnZoom, btnMove, btnUpDown, btnTwist, btnShape, btnEditClosed, btnEditOpen; +var btnSettings, btnWordArt, btnZoom, btnMove, btnUpDown, btnTwist, btnShape, btnEditClosed, btnEditOpen; btnToggleVerticalShapes; var btnDiv,btnConv,btnStraight,btnSine, buttonGroupAdd, popupWordArt; var state; @@ -41,7 +41,7 @@ function initButtonBehavior() { btnConv = $("#btnConv"); btnSine = $("#btnSine"); btnAdd = $("#btnAdd"); - btnToggleVertical = $("#btnToggleVertical"); + btnToggleVerticalShapes = $("#btnToggleVerticalShapes"); buttonGroupAdd = $("#buttonGroupAdd"); buttonGroupVerticalShapes = $("#buttonGroupVerticalShapes"); popupWordArt = $("#popupWordArt"); @@ -67,18 +67,29 @@ function initButtonBehavior() { btnConv.on("onButtonClick", onBtnConv); btnSine.on("onButtonClick", onBtnSine); btnAdd.on("onButtonClick", onBtnAdd); - btnToggleVertical.on("onButtonClick", onBtnToggleVertical); + btnToggleVerticalShapes.on("onButtonClick", onBtnToggleVerticalShapes); getSavedSketchStatus(); setSketchModified(false); - function onBtnToggleVertical() { - buttonGroupVerticalShapes.toggle(); + function onBtnToggleVerticalShapes() { + console.log("onBtnToggleVerticalShapes"); + + var btnImg; + if(buttonGroupVerticalShapes.is(":hidden")) { + btnImg = "img/buttons/btnArrowClose.png"; + } else { + btnImg = "img/buttons/btnArrowOpen.png"; + } + btnToggleVerticalShapes.attr("src",btnImg); + + buttonGroupVerticalShapes.fadeToggle(BUTTON_GROUP_SHOW_DURATION); + } function onBtnAdd() { - buttonGroupAdd.fadeToggle(POPUP_SHOW_DURATION); + buttonGroupAdd.fadeToggle(BUTTON_GROUP_SHOW_DURATION); } function onBtnStraight() { diff --git a/js/main.js b/js/main.js index 6f85cac..4731217 100644 --- a/js/main.js +++ b/js/main.js @@ -23,6 +23,7 @@ var showOrHide = false; var clientInfo = {}; var POPUP_SHOW_DURATION = 175; +var BUTTON_GROUP_SHOW_DURATION = 80; $(function() { console.log("ready"); diff --git a/less/buttons.less b/less/buttons.less index f8a1f34..f728552 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -165,8 +165,8 @@ } #buttonGroupVerticalShapes { - top: 10px; - left: 10px; + top: 7px; + left: 8px; padding-top: 20px; width: 65px; @@ -175,10 +175,10 @@ } } -#btnToggleVertical { +#btnToggleVerticalShapes { position: absolute; - top: 0; - left: 10px; + top: 3px; + left: 6px; } diff --git a/www/img/buttons/btnArrowClose.png b/www/img/buttons/btnArrowClose.png new file mode 100644 index 0000000..8e70a61 Binary files /dev/null and b/www/img/buttons/btnArrowClose.png differ diff --git a/www/img/buttons/btnArrowOpen.png b/www/img/buttons/btnArrowOpen.png index 7b76cdb..c84bd98 100644 Binary files a/www/img/buttons/btnArrowOpen.png and b/www/img/buttons/btnArrowOpen.png differ diff --git a/www/index.html b/www/index.html index a4a8423..b1edd70 100644 --- a/www/index.html +++ b/www/index.html @@ -105,7 +105,7 @@ - + @@ -114,6 +114,17 @@ +
+ + + + +
+ + + + +