Fixed topbar css
Aded InputComponents.js to take care (dynamically create, add events) of input elements.
This commit is contained in:
Nicola
parent
79a3c07b82
commit
82aa5ab114
2
build.js
2
build.js
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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;}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
@import 'general';
|
||||
@import 'zindex';
|
||||
@import 'shake';
|
||||
@import 'components';
|
||||
@import 'help';
|
||||
@import 'layers';
|
||||
@import 'canvas';
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
})();
|
||||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 581 B |
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue