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

Better tooltips

Browse Source
This commit is contained in:
jdescottes 2014-07-09 00:51:11 +02:00
parent f589e71686
commit 5e94b69aa0
21 changed files with 25397 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2557
css/piskel-style-packaged-2014-07-09-12-49.css Normal file
View File

File diff suppressed because it is too large Load Diff

30
index.html
View File

@ -28,11 +28,11 @@
<!-- do not delete, do not move :) -->
<!--body-main-start-->
<div id="main-wrapper" class="main-wrapper">
<iframe src="templates-2014-07-08-08-06/drawing-tools.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
<iframe src="templates-2014-07-09-12-49/drawing-tools.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
<div id="column-wrapper" class="column-wrapper">
<div class='column left-column'>
<iframe src="templates-2014-07-08-08-06/frames-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
<iframe src="templates-2014-07-09-12-49/frames-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
</div>
<div class='column main-column'>
@ -42,25 +42,25 @@
</div>
<div class="column right-column">
<iframe src="templates-2014-07-08-08-06/preview.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
<iframe src="templates-2014-07-08-08-06/layers-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
<iframe src="templates-2014-07-08-08-06/palettes-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
<iframe src="templates-2014-07-09-12-49/preview.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
<iframe src="templates-2014-07-09-12-49/layers-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
<iframe src="templates-2014-07-09-12-49/palettes-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
<div class="pull-bottom cursor-coordinates"></div>
</div>
</div>
<div id="application-action-section" data-pskl-controller="settings" class="sticky-section right-sticky-section">
<div class="sticky-section-wrap">
<iframe src="templates-2014-07-08-08-06/settings.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
<iframe src="templates-2014-07-09-12-49/settings.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
<div class="drawer vertical-centerer">
<div class="drawer-content" id="drawer-container">
<iframe src="templates-2014-07-08-08-06/settings/save.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates-2014-07-08-08-06/settings/application.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates-2014-07-08-08-06/settings/resize.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates-2014-07-08-08-06/settings/import.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates-2014-07-08-08-06/settings/localstorage.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates-2014-07-08-08-06/settings/export-gif.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates-2014-07-08-08-06/settings/export-png.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates-2014-07-09-12-49/settings/save.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates-2014-07-09-12-49/settings/application.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates-2014-07-09-12-49/settings/resize.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates-2014-07-09-12-49/settings/import.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates-2014-07-09-12-49/settings/localstorage.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates-2014-07-09-12-49/settings/export-gif.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates-2014-07-09-12-49/settings/export-png.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
</div>
</div>
</div>
@ -69,11 +69,11 @@
<div id="dialog-container-wrapper">
<div id="dialog-container">
<iframe src="templates-2014-07-08-08-06/dialogs/manage-palettes.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates-2014-07-09-12-49/dialogs/manage-palettes.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
</div>
</div>
<iframe src="templates-2014-07-08-08-06/cheatsheet.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
<iframe src="templates-2014-07-09-12-49/cheatsheet.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
<!--body-main-end-->
<!-- the comment above indicates the end of the markup reused by the editor integrated in piskelapp.com -->
<!-- do not delete, do not move :) -->

22392
js/piskel-packaged-2014-07-09-12-49.js Normal file
View File

File diff suppressed because one or more lines are too long

12
js/piskel-packaged-min-2014-07-09-12-49.js Normal file
View File

File diff suppressed because one or more lines are too long

6
js/piskel-packaged-min.js vendored
View File

File diff suppressed because one or more lines are too long

2
piskel-boot-0.1.0.js
View File

@ -1,6 +1,6 @@
(function () {
var version = '-2014-07-08-08-06';
var version = '-2014-07-09-12-49';
var versionHasNotBeenReplaced = version.indexOf('@@') === 0;
if (versionHasNotBeenReplaced) {
version = '';

24
templates-2014-07-09-12-49/cheatsheet.html Normal file
View File

@ -0,0 +1,24 @@
<div id="cheatsheet-wrapper" style="display:none">
<div class="cheatsheet-container">
<div class="cheatsheet-section">
<h3>Tool shortcuts</h3>
<ul class="cheatsheet-tool-shortcuts"></ul>
</div>
<div class="cheatsheet-section">
<h3>Misc shortcuts</h3>
<ul class="cheatsheet-misc-shortcuts"></ul>
</div>
<div class="cheatsheet-section">
<h3>Selection shortcuts</h3>
<ul class="cheatsheet-selection-shortcuts"></ul>
</div>
</div>
</div>
<span class="cheatsheet-link">Keyboard shortcuts</a>
<script type="text/template" id="cheatsheet-shortcut-template">
<li class="cheatsheet-shortcut">
<div class="cheatsheet-icon {{shortcutIcon}}"></div>
<span class="cheatsheet-key">{{shortcutKey}}</span>
<span class="cheatsheet-description">{{shortcutDescription}}</span>
</li>
</script>

57
templates-2014-07-09-12-49/dialogs/manage-palettes.html Normal file
View File

@ -0,0 +1,57 @@
<div class="palette-manager-wrapper">
<h3 class="palette-manager-head">
Palette manager
<span class="palette-manager-close">X</span>
</h3>
<div class="palette-manager-body">
<div class="palette-manager-drawer">
<div class="palette-manager-actions">
<button type="button" class="palette-manager-actions-button button " data-action="create">Create</button>
<button type="button" class="palette-manager-actions-button button " data-action="save-all">Save all</button>
</div>
<ul class="palette-manager-list">
</ul>
</div>
<div class="palette-manager-details">
<div class="palette-manager-details-head"></div>
<div class="palette-manager-details-body"></div>
</div>
</div>
</div>
<script type="text/template" id="palette-details-head-template">
<span class="palette-manager-details-head-name">{{name}}</span>
<span class="action-icon edit-icon" title="edit name">&nbsp;</span>
<div class="palette-manager-details-head-actions">
<button class="palette-manager-palette-button button button-primary" {{save:disabled}} data-action="save" type="button">Save</button>
<button class="palette-manager-palette-button button " {{revert:disabled}} data-action="revert" type="button">Revert</button>
<button class="palette-manager-palette-button button " {{delete:disabled}} data-action="delete" type="button">Delete</button>
</div>
</script>
<script type="text/template" id="palette-color-card-template">
<div class="palette-manager-color-card" data-color-id="{{colorId}}">
<span class="palette-manager-delete-card" title="remove this color">X</span>
<div class="palette-manager-color-square" style="background-color:{{hex}}"></div>
<div class="palette-manager-color-details allow-user-select">
<ul>
<li>{{hex}}</li>
<li>{{rgb}}</li>
<li>{{hsl}}</li>
</ul>
</div>
</div>
</script>
<script type="text/template" id="palette-new-color-template">
<div class="palette-manager-color-card {{classname}}">
<div class="palette-manager-color-square">Add</div>
<div class="palette-manager-color-details">
<ul>
<li>Hex</li>
<li>RGB</li>
<li>HSL</li>
</ul>
</div>
</div>
</script>

34
templates-2014-07-09-12-49/drawing-tools.html Normal file
View File

@ -0,0 +1,34 @@
<div class="sticky-section left-sticky-section" id="tool-section">
<div class="sticky-section-wrap">
<div class="vertical-centerer">
<script type="text/template" id="drawing-tool-item-template">
<li rel="tooltip" data-placement="right" class="{{cssclass}}" data-tool-id="{{toolid}}" title="{{title}}"></li>
</script>
<ul id="tools-container" class="tools-wrapper"></ul>
<div class="palette-wrapper">
<div
class="tool-icon tool-color-picker"
title="Primary - left mouse button"
rel="tooltip"
data-placement="right"
>
<input id="color-picker" class="color" type="text"/>
</div>
<div
class="tool-icon tool-color-picker"
title="Secondary - right mouse button"
rel="tooltip"
data-placement="right"
>
<input id="secondary-color-picker" class="secondary-color-picker color" type="text" />
</div>
<div
class="swap-colors-icon"
title="Swap colors (X)"
rel="tooltip"
data-placement="right"
></div>
</div>
</div>
</div>
</div>

7
templates-2014-07-09-12-49/frames-list.html Normal file
View File

@ -0,0 +1,7 @@
<div id="preview-list-wrapper" class="preview-list-wrapper">
<div id="preview-list-scroller" class="preview-list-scroller">
<ul class="preview-list" id="preview-list"></ul>
</div>
<div class="top-overflow"></div>
<div class="bottom-overflow"></div>
</div>

20
templates-2014-07-09-12-49/layers-list.html Normal file
View File

@ -0,0 +1,20 @@
<div class="toolbox-container layers-list-container">
<h3 class="toolbox-title layers-title">Layers
<div title="Toggle layer preview (alt+L)"
rel="tooltip"
data-placement="top"
class="layers-toggle-preview piskel-icon-eye"></div>
</h3>
<div class="toolbox-button-container layers-button-container">
<button class="button toolbox-button" data-action="add" >Add</button>
<button class="button toolbox-button" data-action="delete" >Delete</button>
<button class="button toolbox-button layers-button-arrow" data-action="up" >&#8593;</button>
<button class="button toolbox-button layers-button-arrow" data-action="down" >&#8595;</button>
</div>
<script type="text/template" id="layer-item-template">
<li class="layer-item {{isselected:current-layer-item}}" data-layer-index="{{layerindex}}">{{layername}}
<span class="action-icon edit-icon" title="edit name">&nbsp;</span>
</li>
</script>
<ul class="layers-list"></ul>
</div>

19
templates-2014-07-09-12-49/palettes-list.html Normal file
View File

@ -0,0 +1,19 @@
<div class="toolbox-container palettes-list-container">
<h3 class="toolbox-title palettes-title" style="overflow:hidden">
<span style="line-height:24px ">Palettes</span>
<select class="palettes-list-select">
<option value="__current-colors">Current colors</option>
<option value="__manage-palettes">Create custom palettes</option>
<optgroup class="palettes-list-select-group" label="Custom palettes">
</optgroup>
</select>
</h3>
<div class="palettes-list-colors"></div>
<script type="text/template" id="palette-color-template">
<div class="palettes-list-color" data-color="{{color}}" title="{{color}}">
<div data-color="{{color}}" style="background:{{color}}"></div>
</div>
</script>
</div>

13
templates-2014-07-09-12-49/preview.html Normal file
View File

@ -0,0 +1,13 @@
<div id="animated-preview-container" class="preview-container">
<div id="animated-preview-canvas-container" class="canvas-container">
<div class="canvas-background"></div>
</div>
<div>
<div title="Toggle onion skin (alt+O)"
rel="tooltip"
data-placement="bottom"
class="piskel-icon-onion preview-toggle-onion-skin"></div>
<span id="display-fps" class="display-fps"></span>
<input id="preview-fps" class="range-fps" type="range" min="1" max="24"/>
</div>
</div>

52
templates-2014-07-09-12-49/settings.html Normal file
View File

@ -0,0 +1,52 @@
<div class="vertical-centerer">
<div
data-setting="save"
class="tool-icon save-icon"
title="Save to gallery"
rel="tooltip" data-placement="left" >
</div>
<div
data-setting="user"
class="tool-icon gear-icon"
title="Preferences"
rel="tooltip" data-placement="left">
</div>
<div
data-setting="resize"
class="tool-icon resize-icon"
title="Resize"
rel="tooltip" data-placement="left">
</div>
<div
data-setting="import"
class="tool-icon import-icon"
title="Import an existing picture"
rel="tooltip" data-placement="left">
</div>
<div
data-setting="localstorage"
class="tool-icon local-storage-icon"
title="Browse piskels saved locally"
rel="tooltip" data-placement="left">
</div>
<div
data-setting="gif"
class="tool-icon upload-cloud-icon"
title="Export Animation"
rel="tooltip" data-placement="left">
<span class="label">ANIM</span>
</div>
<div
data-setting="png"
class="tool-icon upload-cloud-icon"
title="Export Spritesheet"
rel="tooltip" data-placement="left">
<span class="label">SHEET</span>
</div>
</div>

38
templates-2014-07-09-12-49/settings/application.html Normal file
View File

@ -0,0 +1,38 @@
<div class="settings-section">
<div class="settings-title">
Canvas settings:
</div>
<div class="settings-item">
<label>Background:</label>
<div id="background-picker-wrapper" class="background-picker-wrapper">
<div class="background-picker light-picker-background" data-background-class="light-canvas-background"
rel="tooltip" data-placement="bottom" title="light / high contrast">
</div>
<div class="background-picker medium-picker-background" data-background-class="medium-canvas-background"
rel="tooltip" data-placement="bottom" title="medium / high contrast">
</div>
<div class="background-picker lowcont-medium-picker-background" data-background-class="lowcont-medium-canvas-background"
rel="tooltip" data-placement="bottom" title="medium / low contrast">
</div>
<div class="background-picker lowcont-dark-picker-background" data-background-class="lowcont-dark-canvas-background"
rel="tooltip" data-placement="bottom" title="dark / low contrast">
</div>
</div>
</div>
<div class="settings-item">
<label for="grid-width">Grid :</label>
<select id="grid-width">
<option value="0">Disabled</option>
<option value="1">Enabled - 1px wide</option>
<option value="2">Enabled - 2px wide</option>
<option value="3">Enabled - 3px wide</option>
<option value="4">Enabled - 4px wide</option>
</select>
</div>
<!-- <div class="settings-item">
<label for="tiled-preview">Display tiled preview :</label>
<input type="checkbox" value="1" id="tiled-preview" name="tiled-preview-checkbox"/>
</div> -->
</div>

22
templates-2014-07-09-12-49/settings/export-gif.html Normal file
View File

@ -0,0 +1,22 @@
<div class="settings-section">
<div class="settings-title">
Export to Animated GIF
</div>
<div class="settings-item">
<form action="" method="POST" class="gif-export-form">
<label>Select resolution:</label>
<script type="text/template" id="gif-export-radio-template">
<label style="display:block"><input type="radio" name="gif-zoom-level" value="{{value}}"/>
{{label}}</label>
</script>
<div class="gif-export-radio-group"></div>
<button type="button" class="button button-primary gif-download-button">Download GIF</button>
<button type="button" class="button button gif-upload-button">Export online</button>
</form>
<span class="gif-export-progress-status"></span>
<div class="gif-export-progress-bar"></div>
<div class="gif-export-preview"></div>
<div class="gif-upload-status"></div>
</div>
</div>

23
templates-2014-07-09-12-49/settings/export-png.html Normal file
View File

@ -0,0 +1,23 @@
<div class="settings-section">
<div class="settings-title">
Export Spritesheet as PNG
</div>
<div class="settings-item">
<span>Preview : </span>
<div class="png-export-preview"></div>
<div class="png-export-radio-group"></div>
<button type="button" class="button button-primary png-download-button">Download PNG</button>
<button type="button" class="button png-upload-button">Export online</button>
<!-- <input type="button" class="button png-download-button" value="Download" /> -->
<div class="png-upload-status"></div>
</div>
<div class="settings-title">
Export Spritesheet as ZIP
</div>
<div class="settings-item">
<span class="settings-description">A ZIP archive will be created with one PNG file per frame.</span>
<div>
<button type="button" class="button button-primary zip-generate-button"/>Download ZIP</button>
</div>
</div>
</div>

34
templates-2014-07-09-12-49/settings/import.html Normal file
View File

@ -0,0 +1,34 @@
<div class="settings-section">
<div class="settings-title">
Import Picture
</div>
<div class="settings-item">
<form action="" method="POST" name="import-form">
<div class="import-section">
<span class="import-section-title import-section-title-small">File :</span>
<button type="button" class="button button-primary file-input-button">Browse</button>
<span class="file-input-status"></span>
<input style="display:none"
type="file" name="file-upload-input"
value="file" accept="image/*"/>
</div>
<div class="import-section import-section-disabled">
<span class="import-section-title import-section-title-small" style="vertical-align:top">Info :</span>
<div class="import-section-preview"></div>
</div>
<div class="import-section import-section-disabled">
<span class="import-section-title import-section-title-small">Size :</span>
<input type="text" disabled="disabled" class="textfield import-size-field" name="resize-width"/>x
<input type="text" disabled="disabled" class="textfield import-size-field" name="resize-height"/>
</div>
<div class="import-section import-section-disabled">
<span class="import-section-title">Smooth resize :</span>
<input type="checkbox" disabled="disabled" checked="checked" name="smooth-resize-checkbox" value="1"/>
</div>
<input type="submit" name="import-submit" disabled="disabled" class="button button-primary import-button" value="Import" />
<span class="settings-description" style="margin-top:5px;">Animated GIFs will be split in several frames. Other images will be imported as a single-frame.</span>
</form>
</div>
</div>

31
templates-2014-07-09-12-49/settings/localstorage.html Normal file
View File

@ -0,0 +1,31 @@
<div class="settings-section">
<div class="settings-title">
Restore previous session
</div>
<div class="settings-item previous-session">
</div>
<div class="settings-title">
Browse Local Piskels
</div>
<div class="settings-item">
<table class="local-piskels-list">
<tbody></tbody>
</table>
</div>
<script type="text/template" id="local-storage-item-template">
<tr class="local-piskel-item">
<td class="local-piskel-name">{{name}}</td>
<td class="local-piskel-save-date">{{date}}</td>
<td><a class="local-piskel-load-link" data-action="load" data-name="{{name}}" href="javascript:void(0);">load</a></td>
<td><a class="local-piskel-delete-link" data-action="delete" data-name="{{name}}" href="javascript:void(0);">x</a></td>
</tr>
</script>
<script type="text/template" id="previous-session-info-template">
<div>
Restore a backup of <span style="color:gold">{{name}}</span>, saved at <span style="color:white">{{date}}</span> ?
<div style="margin-top:10px;">
<button type="button" class="button button-primary restore-session-button">Restore</button>
</div>
</div>
</script>
</div>

20
templates-2014-07-09-12-49/settings/resize.html Normal file
View File

@ -0,0 +1,20 @@
<div class="settings-section">
<div class="settings-title">
Resize drawing area
</div>
<div class="settings-item">
<form action="" method="POST" name="resize-form">
<div class="resize-section">
<span class="resize-section-title resize-section-title-small">Size :</span>
<input type="text" class="textfield resize-size-field" name="resize-width"/>x
<input type="text" class="textfield resize-size-field" name="resize-height"/>
</div>
<div class="resize-section">
<span class="resize-section-title resize-section-title-small">Resize canvas content : </span>
<input type="checkbox" class="resize-content-checkbox" name="resize-content-checkbox" value="true"/>
</div>
<input type="submit" class="button button-primary resize-button" value="Resize" />
<input type="button" class="button resize-cancel-button" value="Cancel" />
</form>
</div>
</div>

23
templates-2014-07-09-12-49/settings/save.html Normal file
View File

@ -0,0 +1,23 @@
<div class="settings-section">
<div class="settings-title">Save</div>
<div class="settings-item">
<form action="" method="POST" name="save-form">
<div class="settings-form-section">
<label class="row">Title : </label>
<input id="save-name" type="text" class="save-field textfield"/>
</div>
<div class="settings-form-section">
<label class="row">Description :</label>
<textarea id="save-description" class="save-field textfield" placeholder="Your piskel in a few words"></textarea>
</div>
<div class="settings-form-section">
<label class="row">
Public : <input type="checkbox" value="1" name="save-public-checkbox"/>
</label>
</div>
<input type="submit" class="button button-primary" id="save-cloud-button" value="Upload" />
<input type="button" class="button" id="save-local-button" value="Local save" />
<div id="save-status" class="status"></div>
</form>
</div>
</div>