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

Fixed topbar css

Browse Source 
Aded InputComponents.js to take care (dynamically create, add events) of input elements.
This commit is contained in:
Nicola 2022-01-31 00:16:27 +01:00
parent 79a3c07b82
commit 82aa5ab114
9 changed files with 144 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build.js
View File

@ -56,7 +56,7 @@ function compile_page(){
.pipe(handlebars({encoding: 'utf8', debug: true, bustCache: true})
.partials('./views/[!index]*.hbs').partials('./views/popups/*.hbs')
//.helpers({ svg: hb_svg })
.partials('./views/components/*.hbs')
.helpers('./helpers/**/*.js')
.data({
projectSlug: 'pixel-editor',

56
css/_components.scss Normal file
View File

@ -0,0 +1,56 @@
.checkbox-holder {
position:relative;
width:15px;
height:15px;
display:block;
.checkbox {
display: inline-block;
cursor: pointer;
padding-right: 1em;
.box {
color: $basetext;
background: darken($basecolor, 5%);
border: none;
padding: 0.5rem;
border-radius: 0.5rem;
box-sizing: border-box;
margin-right: 0.5rem;
display: inline-block;
vertical-align: middle;
border: solid 2px $basecolor;
pointer-events: none;
svg {
visibility: hidden;
width: 1em;
height: 1em;
display: block;
path {
fill: $basetext;
}
}
}
//checked
&.checked .box svg {
visibility: visible;
}
label {
display: inline-block;
pointer-events: none;
} //hover label or box
&:hover:not(.disabled){
border-color: $basecolor;
}
&.disabled {
cursor: not-allowed;
.box svg path {fill: $basetext;}
}
}
}

12
css/_main-menu.scss
View File

@ -108,6 +108,11 @@ li#editor-info {
display:inline;
padding-right:20px;
}
.checkbox-holder {
display: inline;
}
input {
margin-left:10px;
background-color:darken($basecolor, 6%);
@ -122,12 +127,5 @@ li#editor-info {
width:25px;
height:15px;
}
input[type=checkbox] {
padding:1px;
width:20px;
height:20px;
background-color:darken($basecolor, 5%) !important;
}
}
}

1
css/pixel-editor.scss
View File

@ -2,6 +2,7 @@
@import 'general';
@import 'zindex';
@import 'shake';
@import 'components';
@import 'help';
@import 'layers';
@import 'canvas';

59
js/InputComponents.js Normal file
View File

@ -0,0 +1,59 @@
const InputComponents = (() => {
setInputEvents();
function setInputEvents() {
// Make the checkboxes toggleable
let checkboxes = document.getElementsByClassName("checkbox");
for (let i=0; i<checkboxes.length; i++) {
Events.on("click", checkboxes[i], toggleBox);
}
}
function toggleBox(event) {
if (event.target.classList.contains("checked"))
event.target.classList.remove("checked");
else
event.target.classList.add("checked");
}
function createCheckbox(id, label) {
let element = document.createElement("div");
let inner = document.createElement("div");
let hiddenInput = document.createElement("input");
let box = document.createElement("div");
let labelEl = document.createElement("label");
labelEl.innerHTML = label;
box.innerHTML = '\
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\
width="405.272px" height="405.272px" viewBox="0 0 405.272 405.272" style="enable-background:new 0 0 405.272 405.272;"\
xml:space="preserve">\
<g>\
<path d="M393.401,124.425L179.603,338.208c-15.832,15.835-41.514,15.835-57.361,0L11.878,227.836\
c-15.838-15.835-15.838-41.52,0-57.358c15.841-15.841,41.521-15.841,57.355-0.006l81.698,81.699L336.037,67.064\
c15.841-15.841,41.523-15.829,57.358,0C409.23,82.902,409.23,108.578,393.401,124.425z"/>\
</g>\
</svg>';
element.className = "checkbox-holder";
inner.className = "checkbox";
hiddenInput.type = "hidden";
box.className = "box";
box.id = id;
inner.appendChild(labelEl);
inner.appendChild(hiddenInput);
inner.appendChild(box);
element.appendChild(inner);
}
function updated() {
setInputEvents();
}
return {
updated,
createCheckbox
}
})();

6
js/pixel-editor.js
View File

@ -9,6 +9,7 @@
/** UTILITY AND INPUT **/
//=include Util.js
//=include Events.js
//=include InputComponents.js
//=include Dialogue.js
//=include History.js
//=include Settings.js
@ -70,9 +71,10 @@ PresetModule.instrumentPresetMenu();
//when the page is done loading, you can get ready to start
window.onload = function () {
//featureToggles.onLoad();
// First cursor update
ToolManager.currentTool().updateCursor();
// Apply checkboxes
//check if there are any url parameters
if (window.location.pathname.replace('/pixel-editor/','').length <= 1) {

10
svg/check.svg Normal file
View File

@ -0,0 +1,10 @@
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="405.272px" height="405.272px" viewBox="0 0 405.272 405.272" style="enable-background:new 0 0 405.272 405.272;"
xml:space="preserve">
<g>
<path d="M393.401,124.425L179.603,338.208c-15.832,15.835-41.514,15.835-57.361,0L11.878,227.836
c-15.838-15.835-15.838-41.52,0-57.358c15.841-15.841,41.521-15.841,57.355-0.006l81.698,81.699L336.037,67.064
c15.841-15.841,41.523-15.829,57.358,0C409.23,82.902,409.23,108.578,393.401,124.425z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 581 B

7
views/components/checkbox.hbs Normal file
View File

@ -0,0 +1,7 @@
<div class="checkbox-holder">
<div class="checkbox checked">
<label>Snap to grid</label>
<input type="hidden"/>
<div class="box">{{svg "check"}}</div>
</div>
</div>

2
views/main-menu.hbs
View File

@ -69,7 +69,7 @@
<li id="editor-info">
<ul>
<li><label><span>Tool size: </span><input type="text" width="10px"/></label></li>
<li><label><span>Continuous: </span><input type="checkbox"/></label></li>
<li>{{> checkbox}}</li>
</ul>
</li>
</ul>