diff --git a/css/style.css b/css/style.css index 7d94ec42..f7d06ea4 100644 --- a/css/style.css +++ b/css/style.css @@ -12,9 +12,9 @@ body { text-align: center; font-size: 0; position: absolute; - left: 104px; + left: 100px; /* Reserve room for tools on the left edge of the screen. */ top: 10px; - right: 0; + right: 50px; /* Reserve room for actions on the right edge of the screen. */ bottom: 10px; } @@ -47,8 +47,7 @@ body { position: fixed; top: 0; bottom: 0; - left: 0; - width: 140px; + z-index: 10; } .sticky-section .wrap { @@ -56,6 +55,24 @@ body { vertical-align: middle; } +.left-sticky-section.sticky-section { + left: 0; + max-width: 100px; +} + +.left-sticky-section .tool-icon { + float: left; +} + +.right-sticky-section.sticky-section { + right: 0; + width: 50px; +} + +.right-sticky-section .tool-icon { + float: right; +} + /** * Canvases layout @@ -133,10 +150,6 @@ body { overflow: hidden; } -.application-actions { - margin-top: 35px; -} - /** * User messages */ diff --git a/css/tools.css b/css/tools.css index 95a5a2f2..d3c3d342 100644 --- a/css/tools.css +++ b/css/tools.css @@ -6,7 +6,6 @@ } .tool-icon { - float: left; cursor : pointer; width: 46px; height: 46px; @@ -219,5 +218,6 @@ font-size: 11px; text-transform: uppercase; color: #fff; + text-align: center; } diff --git a/index.html b/index.html index 505997ae..378817c6 100644 --- a/index.html +++ b/index.html @@ -17,7 +17,7 @@ - diff --git a/js/controller/ToolController.js b/js/controller/ToolController.js index 26b008c6..cbf1d615 100644 --- a/js/controller/ToolController.js +++ b/js/controller/ToolController.js @@ -58,7 +58,7 @@ this.selectTool_(this.toolInstances[tool]); // Show tool as selected: - $('#menubar .tool-icon.selected').removeClass('selected'); + $('#tool-section .tool-icon.selected').removeClass('selected'); clickedTool.addClass('selected'); } } @@ -105,7 +105,7 @@ // Set SimplePen as default selected tool: this.selectTool_(this.toolInstances.simplePen); // Activate listener on tool panel: - $("#menubar").click($.proxy(this.onToolIconClicked_, this)); + $("#tool-section").click($.proxy(this.onToolIconClicked_, this)); // Show/hide the grid on drawing canvas: $.publish(Events.GRID_DISPLAY_STATE_CHANGED, [this.isShowGridChecked_()]);