mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

New layout: application actions sticking to the right edge

Browse Source
This commit is contained in:
Vince
2013-06-15 19:04:36 +02:00
parent af95a41e52
commit 13de7cbcfb
4 changed files with 39 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
css/style.css
View File

@ -12,9 +12,9 @@ body {
text-align: center; text-align: center;
font-size: 0; font-size: 0;
position: absolute; position: absolute;
left: 104px; left: 100px; /* Reserve room for tools on the left edge of the screen. */
top: 10px; top: 10px;
right: 0; right: 50px; /* Reserve room for actions on the right edge of the screen. */
bottom: 10px; bottom: 10px;
} }
@ -47,8 +47,7 @@ body {
position: fixed; position: fixed;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; z-index: 10;
width: 140px;
} }
.sticky-section .wrap { .sticky-section .wrap {
@ -56,6 +55,24 @@ body {
vertical-align: middle; 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 * Canvases layout
@ -133,10 +150,6 @@ body {
overflow: hidden; overflow: hidden;
} }
.application-actions {
margin-top: 35px;
}
/** /**
* User messages * User messages
*/ */

2
css/tools.css
View File

@ -6,7 +6,6 @@
} }
.tool-icon { .tool-icon {
float: left;
cursor : pointer; cursor : pointer;
width: 46px; width: 46px;
height: 46px; height: 46px;
@ -219,5 +218,6 @@
font-size: 11px; font-size: 11px;
text-transform: uppercase; text-transform: uppercase;
color: #fff; color: #fff;
text-align: center;
} }

28
index.html
View File

@ -17,7 +17,7 @@
</head> </head>
<body> <body>
<div id="menubar" class="sticky-section"> <div class="sticky-section left-sticky-section" id="tool-section">
<div class="wrap"> <div class="wrap">
<ul id="tools-container" class="tools-wrapper"></ul> <ul id="tools-container" class="tools-wrapper"></ul>
<div class="palette-wrapper"> <div class="palette-wrapper">
@ -50,6 +50,20 @@
</div> </div>
</div> </div>
<div class="sticky-section right-sticky-section">
<div class="wrap">
<div class="tool-icon gear-icon" title="Preferences" rel="tooltip" data-placement="left"></div>
<a class="tool-icon gallery-icon" title="Visit gallery" href="http://juliandescottes.github.io/piskel-website/" rel="tooltip" data-placement="left" target="_blank"></a>
<div class="tool-icon save-icon" title="Save to gallery" onclick="piskel.storeSheet()" rel="tooltip" data-placement="left" ></div>
<div class="tool-icon upload-cloud-icon" title="Upload as an animated GIF" onclick="piskel.uploadAsAnimatedGIF()" rel="tooltip" data-placement="left">
<span class="label">GIF</span>
</div>
<div class="tool-icon upload-cloud-icon" title="Upload as a spritesheet PNG" onclick="piskel.uploadAsSpritesheetPNG()" rel="tooltip" data-placement="left">
<span class="label">PNG</span>
</div>
</div>
</div>
<div class="column-wrapper"> <div class="column-wrapper">
<div class='left-column'> <div class='left-column'>
@ -81,18 +95,6 @@
<input id="preview-fps" class="range-fps" type="range" min="1" max="24" value="12"/> <input id="preview-fps" class="range-fps" type="range" min="1" max="24" value="12"/>
</div> </div>
</div> </div>
<div class="application-actions">
<a class="tool-icon gallery-icon" title="Visit gallery" href="http://juliandescottes.github.io/piskel-website/" rel="tooltip" data-placement="bottom" target="_blank"></a>
<div class="tool-icon save-icon" title="Save to gallery" onclick="piskel.storeSheet()" rel="tooltip" data-placement="bottom" ></div>
<div class="tool-icon upload-cloud-icon" title="Upload as an animated GIF" onclick="piskel.uploadAsAnimatedGIF()" rel="tooltip" data-placement="bottom">
<span class="label">GIF</span>
</div>
<div class="tool-icon upload-cloud-icon" title="Upload as a spritesheet PNG" onclick="piskel.uploadAsSpritesheetPNG()" rel="tooltip" data-placement="bottom">
<span class="label">PNG</span>
</div>
<br/>
<div class="tool-icon gear-icon" title="Preferences" rel="tooltip" data-placement="bottom"></div>
</div>
</div> </div>
</div> </div>

4
js/controller/ToolController.js
View File

@ -58,7 +58,7 @@
this.selectTool_(this.toolInstances[tool]); this.selectTool_(this.toolInstances[tool]);
// Show tool as selected: // Show tool as selected:
$('#menubar .tool-icon.selected').removeClass('selected'); $('#tool-section .tool-icon.selected').removeClass('selected');
clickedTool.addClass('selected'); clickedTool.addClass('selected');
} }
} }
@ -105,7 +105,7 @@
// Set SimplePen as default selected tool: // Set SimplePen as default selected tool:
this.selectTool_(this.toolInstances.simplePen); this.selectTool_(this.toolInstances.simplePen);
// Activate listener on tool panel: // 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: // Show/hide the grid on drawing canvas:
$.publish(Events.GRID_DISPLAY_STATE_CHANGED, [this.isShowGridChecked_()]); $.publish(Events.GRID_DISPLAY_STATE_CHANGED, [this.isShowGridChecked_()]);