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

starting palette implementation using creation wizard

Browse Source
This commit is contained in:
juliandescottes
2014-08-30 18:39:54 +02:00
parent 32e528525c
commit 073f46b0d7
10 changed files with 95 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/css/dialogs-create-palette.css Normal file
View File

@ -0,0 +1,21 @@
#dialog-container.create-palette {
width: 500px;
height: 200px;
top : 50%;
left : 50%;
position : absolute;
margin-left: -250px;
}
.show #dialog-container.create-palette {
margin-top: -100px;
}
.create-palette-method-item {
line-height : 24px;
}
.create-palette-method-item label{
margin-top: 3px;
margin-left: 5px;
}

3
src/css/toolbox-palettes-list.css
View File

@ -1,6 +1,5 @@
.palettes-list-select {
float:right;
max-width:90px;
max-width:120px;
margin-top: 3px;
}

2
src/index.html
View File

@ -67,7 +67,7 @@
<div id="dialog-container-wrapper">
<div id="dialog-container">
<iframe src="templates/dialogs/manage-palettes.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates/dialogs/create-palette.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates/dialogs/import-image.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates/dialogs/browse-local.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
</div>

19
src/js/controller/PalettesListController.js
View File

@ -20,11 +20,12 @@
this.paletteColorTemplate_ = pskl.utils.Template.get('palette-color-template');
this.colorListContainer_ = document.querySelector('.palettes-list-colors');
this.colorPaletteSelect_ = document.querySelector('.palettes-list-select');
this.paletteListOptGroup_ = document.querySelector('.palettes-list-select-group');
this.createPaletteButton_ = document.querySelector('.create-palette-button');
this.colorPaletteSelect_.addEventListener('change', this.onPaletteSelected_.bind(this));
this.colorListContainer_.addEventListener('mouseup', this.onColorContainerMouseup.bind(this));
this.colorListContainer_.addEventListener('contextmenu', this.onColorContainerContextMenu.bind(this));
this.createPaletteButton_.addEventListener('click', this.onCreatePaletteClick_.bind(this));
$.subscribe(Events.PALETTE_LIST_UPDATED, this.onPaletteListUpdated.bind(this));
$.subscribe(Events.CURRENT_COLORS_UPDATED, this.fillColorListContainer.bind(this));
@ -38,15 +39,15 @@
ns.PalettesListController.prototype.fillPaletteList = function () {
var palettes = [{
id : Constants.NO_PALETTE_ID,
name : 'No palette'
id : Constants.CURRENT_COLORS_PALETTE_ID,
name : 'Current colors'
}];
palettes = palettes.concat(this.retrievePalettes());
var html = palettes.map(function (palette) {
return pskl.utils.Template.replace('<option value="{{id}}">{{name}}</option>', palette);
}).join('');
this.paletteListOptGroup_.innerHTML = html;
this.colorPaletteSelect_.innerHTML = html;
};
ns.PalettesListController.prototype.fillColorListContainer = function () {
@ -96,17 +97,13 @@
ns.PalettesListController.prototype.onPaletteSelected_ = function (evt) {
var paletteId = this.colorPaletteSelect_.value;
if (paletteId === Constants.MANAGE_PALETTE_ID) {
$.publish(Events.DIALOG_DISPLAY, 'manage-palettes');
this.selectPaletteFromUserSettings();
} else {
pskl.UserSettings.set(pskl.UserSettings.SELECTED_PALETTE, paletteId);
}
this.fillColorListContainer();
};
ns.PalettesListController.prototype.onCreatePaletteClick_ = function (evt) {
$.publish(Events.DIALOG_DISPLAY, 'create-palette');
};
ns.PalettesListController.prototype.onColorContainerContextMenu = function (event) {
event.preventDefault();

12
src/js/controller/dialogs/CreatePaletteController.js Normal file
View File

@ -0,0 +1,12 @@
(function () {
var ns = $.namespace('pskl.controller.dialogs');
ns.CreatePaletteController = function (piskelController) {
};
pskl.utils.inherit(ns.CreatePaletteController, ns.AbstractDialogController);
ns.CreatePaletteController.prototype.init = function () {
this.superclass.init.call(this);
};
})();

4
src/js/controller/dialogs/DialogsController.js
View File

@ -6,6 +6,10 @@
template : 'templates/dialogs/manage-palettes.html',
controller : ns.PaletteManagerController
},
'create-palette' : {
template : 'templates/dialogs/create-palette.html',
controller : ns.CreatePaletteController
},
'browse-local' : {
template : 'templates/dialogs/browse-local.html',
controller : ns.BrowseLocalController

2
src/piskel-script-list.js
View File

@ -100,9 +100,11 @@
// Dialogs sub-controllers
"js/controller/dialogs/AbstractDialogController.js",
"js/controller/dialogs/PaletteManagerController.js",
"js/controller/dialogs/CreatePaletteController.js",
"js/controller/dialogs/ImportImageController.js",
"js/controller/dialogs/BrowseLocalController.js",
// Dialogs controller
"js/controller/dialogs/DialogsController.js",

1
src/piskel-style-list.js
View File

@ -15,6 +15,7 @@
"css/dialogs-import-image.css",
"css/dialogs-manage-palettes.css",
"css/dialogs-browse-local.css",
"css/dialogs-create-palette.css",
"css/toolbox.css",
"css/toolbox-layers-list.css",
"css/toolbox-palettes-list.css",

30
src/templates/dialogs/create-palette.html Normal file
View File

@ -0,0 +1,30 @@
<div class="dialog-wrapper">
<h3 class="dialog-head">
Create palette
<span class="palette-manager-close dialog-close">X</span>
</h3>
<div style="padding:10px 20px; font-size:1.3em">
Select your creation method :
<form action="">
<ul style="margin:10px 0" class="create-palette-method-list">
<li class="create-palette-method-item"><input type="radio" name="palette-creation-mode" id="palette-creation-mode-manual" value="manual" checked="checked"><label for="palette-creation-mode-manual">Manual</label></li>
<li class="create-palette-method-item"><input type="radio" name="palette-creation-mode" id="palette-creation-mode-import" value="import"><label for="palette-creation-mode-import">Import from existing file or image</label><br></li>
<li class="create-palette-method-item"><input type="radio" name="palette-creation-mode" id="palette-creation-mode-clone" value="clone"><label for="palette-creation-mode-clone">Clone existing palette</label>
<select class="palettes-list-select" style="margin:3px 0;">
<option value="current-colors">Current colors</option>
</select>
</li>
</ul>
<button class="button button-primary" style="float:right">Continue</button>
<button class="button" style="float:right">Cancel</button>
</form>
</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>

22
src/templates/palettes-list.html
View File

@ -1,13 +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 class="toolbox-title palettes-title"
style="overflow: hidden;height: 36px;box-sizing: border-box;border-bottom: 1px solid #444;">
<span style="line-height:20px ">Palettes</span>
<div
class="button button-primary create-palette-button"
title="Create new palette"
rel="tooltip"
data-placement="top"
style="width:20px; height:20px; float:right; font-size:1.1em">+</div>
</h3>
<div
class="palettes-actions"
style="background-color:#3f3f3f; border-bottom:#222; height:24px; padding:0 3px;">
<select class="palettes-list-select" style="margin:3px 0;"></select>
</div>
<div class="palettes-list-colors"></div>
<script type="text/template" id="palette-color-template">
<div class="palettes-list-color" data-color="{{color}}" title="{{color}}">