mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
update right drawer
This commit is contained in:
jdescottes
24
templates/cheatsheet.html
Normal file
24
templates/cheatsheet.html
Normal 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>
|
||||
27
templates/dialogs/browse-local.html
Normal file
27
templates/dialogs/browse-local.html
Normal file
@@ -0,0 +1,27 @@
|
||||
<div class="dialog-wrapper">
|
||||
<h3 class="dialog-head">
|
||||
Browse Local Piskels
|
||||
<span class="palette-manager-close dialog-close">X</span>
|
||||
</h3>
|
||||
<div style="padding:10px 20px; font-size:1.5em">
|
||||
<table class="local-piskels-list">
|
||||
<thead>
|
||||
<tr class="local-piskel-list-head">
|
||||
<td class="local-piskel-name">Name</td>
|
||||
<td class="local-piskel-save-date">Date</td>
|
||||
<td colspan=2>Actions</td>
|
||||
|
||||
</tr>
|
||||
</thead>
|
||||
<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><button type="button" data-action="load" data-name="{{name}}" class="button button-primary local-piskel-load-button">Load</button></td>
|
||||
<td><button type="button" data-action="delete" data-name="{{name}}" class="button local-piskel-delete-button">Delete</button></td>
|
||||
</tr>
|
||||
</script>
|
||||
</div>
|
||||
27
templates/dialogs/import-image.html
Normal file
27
templates/dialogs/import-image.html
Normal file
@@ -0,0 +1,27 @@
|
||||
<div class="dialog-wrapper">
|
||||
<h3 class="dialog-head">
|
||||
Import Image
|
||||
<span class="palette-manager-close dialog-close">X</span>
|
||||
</h3>
|
||||
<div class="import-options" style="padding:10px 20px; font-size:1.5em">
|
||||
<form action="" method="POST" name="import-image-form">
|
||||
<div class="import-section">
|
||||
<span class="import-section-title import-section-title-small">Name :</span><span class="import-image-file-name"></span>
|
||||
</div>
|
||||
<div class="import-section">
|
||||
<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">
|
||||
<span class="import-section-title import-section-title-small">Size :</span>
|
||||
<input type="text" class="textfield import-size-field" name="resize-width"/>x
|
||||
<input type="text" class="textfield import-size-field" name="resize-height"/>
|
||||
</div>
|
||||
<div class="import-section">
|
||||
<span class="import-section-title">Smooth resize :</span>
|
||||
<input type="checkbox" checked="checked" name="smooth-resize-checkbox" value="1"/>
|
||||
</div>
|
||||
<input type="submit" name="import-submit" class="button button-primary import-button" value="Import" />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
57
templates/dialogs/manage-palettes.html
Normal file
57
templates/dialogs/manage-palettes.html
Normal file
@@ -0,0 +1,57 @@
|
||||
<div class="palette-manager-wrapper">
|
||||
<h3 class="palette-manager-head dialog-head">
|
||||
Palette manager
|
||||
<span class="palette-manager-close dialog-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"> </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>
|
||||
63
templates/drawing-tools.html
Normal file
63
templates/drawing-tools.html
Normal file
@@ -0,0 +1,63 @@
|
||||
<div class="sticky-section left-sticky-section" id="tool-section">
|
||||
<div class="sticky-section-wrap">
|
||||
<div class="vertical-centerer">
|
||||
<ul id="tools-container" class="tools-wrapper">
|
||||
<!-- Drawing tools will be inserted here -->
|
||||
</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>
|
||||
|
||||
<!-- Templates -->
|
||||
|
||||
<!-- Drawing tool icon-button -->
|
||||
<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>
|
||||
|
||||
<!-- Drawing tool tooltip container -->
|
||||
<script type="text/template" id="drawing-tool-tooltip-container-template">
|
||||
<div class='tools-tooltip-container'>
|
||||
<div>{{helptext}} <span class='tools-tooltip-shortcut'>({{shortcut}})</span></div>
|
||||
{{descriptors}}
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<!-- Drawing tool tooltip line for modifier -->
|
||||
<script type="text/template" id="drawing-tool-tooltip-descriptor-template">
|
||||
<div class='tools-tooltip-descriptor'>
|
||||
<span class='tools-tooltip-descriptor-button'>{{key}}</span>
|
||||
{{description}}
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<!-- Drawing tool tooltip line -->
|
||||
<script type="text/template" id="drawing-tool-tooltip-descriptor-simple-template">
|
||||
<div class='tools-tooltip-descriptor'>
|
||||
{{description}}
|
||||
</div>
|
||||
</script>
|
||||
</div>
|
||||
7
templates/frames-list.html
Normal file
7
templates/frames-list.html
Normal 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/layers-list.html
Normal file
20
templates/layers-list.html
Normal 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" >↑</button>
|
||||
<button class="button toolbox-button layers-button-arrow" data-action="down" >↓</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"> </span>
|
||||
</li>
|
||||
</script>
|
||||
<ul class="layers-list"></ul>
|
||||
</div>
|
||||
19
templates/palettes-list.html
Normal file
19
templates/palettes-list.html
Normal 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/preview.html
Normal file
13
templates/preview.html
Normal 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>
|
||||
53
templates/settings.html
Normal file
53
templates/settings.html
Normal file
@@ -0,0 +1,53 @@
|
||||
<div class="vertical-centerer">
|
||||
|
||||
|
||||
<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 the drawing area"
|
||||
rel="tooltip" data-placement="left">
|
||||
</div>
|
||||
|
||||
<div
|
||||
data-setting="save"
|
||||
class="tool-icon save-icon"
|
||||
title="Save to your gallery, save locally<br/>or export as a file"
|
||||
rel="tooltip" data-placement="left" >
|
||||
</div>
|
||||
|
||||
<div
|
||||
data-setting="png"
|
||||
class="tool-icon export-icon"
|
||||
title="Export as Image, as Spritesheet<br/>or as Animated GIF"
|
||||
rel="tooltip" data-placement="left">
|
||||
</div>
|
||||
|
||||
<div
|
||||
data-setting="import"
|
||||
class="tool-icon local-storage-icon"
|
||||
title="Import piskel"
|
||||
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>
|
||||
38
templates/settings/application.html
Normal file
38
templates/settings/application.html
Normal 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>
|
||||
|
||||
40
templates/settings/export.html
Normal file
40
templates/settings/export.html
Normal file
@@ -0,0 +1,40 @@
|
||||
<div class="settings-section">
|
||||
<div class="settings-title">
|
||||
Export Spritesheet
|
||||
</div>
|
||||
<div class="png-export-preview"></div>
|
||||
<div class="settings-item">
|
||||
<span class="settings-description">PNG with all frames side by side.</span>
|
||||
<button type="button" class="button button-primary png-download-button">Download PNG</button>
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<span class="settings-description">ZIP with one PNG file per frame.</span>
|
||||
<div>
|
||||
<button type="button" class="button button-primary zip-generate-button"/>Download ZIP</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-title">
|
||||
Export to Animated GIF
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<form action="" method="POST" class="gif-export-form">
|
||||
<div style="margin:10px 0;">
|
||||
<label>Select resolution:</label>
|
||||
<select class="gif-export-select-resolution"></select>
|
||||
<script type="text/template" id="gif-export-option-template">
|
||||
<option value="{{value}}">{{label}}</option>
|
||||
</script>
|
||||
</div>
|
||||
<div style="margin:10px 0;">
|
||||
<button type="button" class="button button-primary gif-download-button">Download GIF</button>
|
||||
<button type="button" class="button button gif-upload-button">Get public URL</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="clearfix">
|
||||
<div class="gif-export-preview"></div>
|
||||
<div class="gif-upload-status"></div>
|
||||
</div>
|
||||
<span class="gif-export-progress-status"></span>
|
||||
<div class="gif-export-progress-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
55
templates/settings/import.html
Normal file
55
templates/settings/import.html
Normal file
@@ -0,0 +1,55 @@
|
||||
<div class="settings-section">
|
||||
<div class="settings-title">
|
||||
Load from Browser
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<span>Load a <span style="font-weight:bold;color:white">local piskel</span> saved in this Browser</span>
|
||||
<div class="import-section">
|
||||
<button type="button" class="button button-primary browse-local-button">Browse local saves</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-title">
|
||||
Load .piskel file
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<span>Load a <span style="font-weight:bold;color:white">.piskel</span> file from your computer</span>
|
||||
|
||||
<div class="import-section">
|
||||
<button type="button" class="button button-primary open-piskel-button">Browse .piskel files</button>
|
||||
<span class="file-input-open-piskel-status"></span>
|
||||
<input style="display:none"
|
||||
type="file" name="open-piskel-input"
|
||||
value="file" accept=".piskel"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-title">
|
||||
Import From Picture
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<div style="margin-top:5px;margin-bottom:5px;">Supports : <span style="font-weight:bold;color:white">PNG, JPG, BMP, Animated GIF ...</span></div>
|
||||
<div class="import-section">
|
||||
<button type="button" class="button button-primary file-input-button">Browse images</button>
|
||||
<input style="display:none"
|
||||
type="file" name="file-upload-input"
|
||||
value="file" accept="image/*"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-title">
|
||||
Recover recent sessions
|
||||
</div>
|
||||
<div class="settings-item previous-session">
|
||||
<!-- <span>Load a <span style="font-weight:bold;color:white">backup</span> from a recent session</span>
|
||||
<div class="import-section">
|
||||
<button type="button" class="button button-primary load-recent-button">Browse recent sessions</button>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<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>
|
||||
31
templates/settings/localstorage.html
Normal file
31
templates/settings/localstorage.html
Normal 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/settings/resize.html
Normal file
20
templates/settings/resize.html
Normal 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>
|
||||
42
templates/settings/save.html
Normal file
42
templates/settings/save.html
Normal file
@@ -0,0 +1,42 @@
|
||||
<div class="settings-section">
|
||||
<form action="" method="POST" name="save-form">
|
||||
<div class="settings-title">Describe your piskel</div>
|
||||
<div class="settings-item">
|
||||
<div class="settings-form-section" style="overflow:hidden">
|
||||
<label class="row" style="float:left;line-height:28px;">Title : </label>
|
||||
<input id="save-name" type="text" class="save-field textfield" style="float:left;width:200px;margin-left:10px;"/>
|
||||
</div>
|
||||
<div class="settings-form-section">
|
||||
<textarea id="save-description" class="save-field textfield" placeholder="Description ..."></textarea>
|
||||
</div>
|
||||
<div class="settings-form-section save-public-section">
|
||||
<label class="row">
|
||||
Public : <input type="checkbox" value="1" name="save-public-checkbox"/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-title">Save online</div>
|
||||
<div class="settings-item">
|
||||
<input type="button" class="button button-primary" id="save-online-button" value="Upload" />
|
||||
<div id="save-online-status" class="save-status"></div>
|
||||
</div>
|
||||
<div class="settings-title">Save offline in Browser</div>
|
||||
<div class="settings-item">
|
||||
<div id="save-browser-status" class="save-status">Your piskel will be saved locally and will only be accessible from this browser.</div>
|
||||
<input type="button" class="button button-primary" id="save-browser-button" value="Save in Browser" />
|
||||
</div>
|
||||
<div class="settings-title">Save offline as File</div>
|
||||
<div class="settings-item">
|
||||
<div id="save-file-status" class="save-status"></div>
|
||||
<input type="button" class="button" id="save-file-button" value="Save as File" />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script type="text/template" id="save-please-login-partial">
|
||||
<span>Login to <a href="http://piskelapp.com" target="_blank">piskelapp.com</a> to save and share your sprites online !</span>
|
||||
</script>
|
||||
|
||||
<script type="text/template" id="save-file-status-template">
|
||||
<span>Your piskel will be downloaded as <span class="save-file-name">{{name}}<span></span>
|
||||
</script>
|
||||
</div>
|
||||
Reference in New Issue
Block a user