Permalink
Browse files

Added new views for each custom variable component

  • Loading branch information...
davidmerfield committed Nov 16, 2018
1 parent b890bd7 commit 8871492571f6cb2475acd21cc52e606a6d3c9ec3
@@ -0,0 +1,53 @@
<div>
<b>{{label}}</b><br>
<label style="width:25%;float:left;margin-right:3.5%">
<input class="name" placeholder="e.g. background" type="hidden" value="{{name}}"/>
</label>
<label style="width:55.5%;float:left">
<input class="value" name="locals.{{name}}" placeholder="e.g. #FFFFFF" type="hidden" value="{{content}}"/>
</label>
<div class="color-picker"></div>
<!-- <a style="margin-top:1.5rem" class="button right small secondary delete" class="right">Delete</a>
--><span class="clear"></span>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pickr-widget/dist/pickr.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/pickr-widget/dist/pickr.min.js"></script>
<script>// Simple example, see optional options for more configuration.
var pickr{{name}} = Pickr.create({
el: '.color-picker',
onSave: function onSave(hsva, instance) {
document.querySelector('input[name="locals.{{name}}"]').value = hsva.toRGBA().toString();
},
default: '{{content}}',
components: {
// Main components
preview: true,
opacity: true,
hue: true,
// Input / output Options
interaction: {
hex: true,
rgba: true,
hsla: true,
hsva: true,
cmyk: true,
input: true,
clear: true,
save: true
}
}
});
</script>
@@ -0,0 +1,18 @@
<div>
<b>{{label}}</b><br>
<select name="locals.{{name}}">
{{#fonts}}
<option value="{{value}}" {{selected}}>{{label}}</option>
{{/fonts}}
</select>
<label style="width:25%;float:left;margin-right:3.5%">
<input class="name" placeholder="e.g. background" type="hidden" value="{{name}}"/>
</label>
<!-- <a style="margin-top:1.5rem" class="button right small secondary delete" class="right">Delete</a>
--><span class="clear"></span>
</div>
@@ -0,0 +1,11 @@
<div>
<b>{{label}}</b><br>
<input class="value" name="locals.{{name}}" placeholder="e.g. #FFFFFF" type="number" value="{{content}}"/>
<input class="name" placeholder="e.g. background" type="hidden" value="{{name}}"/>
<!-- <a style="margin-top:1.5rem" class="button right small secondary delete" class="right">Delete</a>
--><span class="clear"></span>
</div>
@@ -1,11 +1,22 @@
<div id="variable-template" style="display:none;width:150%">
{{> local}}
{{> default}}
</div>
<div id="variable-list" style="width:140%">
{{#locals}}
{{> local}}
{{#color}}
{{> color}}
{{/color}}
{{#range}}
{{> range}}
{{/range}}
{{#font}}
{{> font}}
{{/font}}
{{#default}}
{{> default}}
{{/default}}
{{/locals}}
<input name="has_locals" type="hidden" value="true">

0 comments on commit 8871492

Please sign in to comment.