2015-10-15 13:28:39 +00:00
|
|
|
<!doctype html>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<title>Zammad Chat</title>
|
|
|
|
|
<link rel="stylesheet" href="style.css">
|
2015-10-15 15:08:41 +00:00
|
|
|
<meta name="viewport" content="width=device-width">
|
2015-10-15 13:28:39 +00:00
|
|
|
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
margin: 0;
|
|
|
|
|
font-family: sans-serif;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.settings {
|
|
|
|
|
position: fixed;
|
|
|
|
|
left: 20px;
|
|
|
|
|
top: 20px;
|
|
|
|
|
background: white;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
box-shadow: 0 3px 10px rgba(0,0,0,.3);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.settings input {
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
}
|
|
|
|
|
.settings input + input {
|
|
|
|
|
margin-right: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
table td:first-child {
|
|
|
|
|
text-align: right;
|
|
|
|
|
padding-right: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
td {
|
|
|
|
|
padding: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
h2 {
|
|
|
|
|
font-size: 1em;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media only screen and (max-width: 768px) {
|
|
|
|
|
.settings {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.Box {
|
|
|
|
|
background: hsl(0,0%,91%);
|
|
|
|
|
width: 26px;
|
|
|
|
|
height: 24px;
|
|
|
|
|
color: hsl(0,0%,47%);
|
|
|
|
|
float: left;
|
|
|
|
|
}
|
|
|
|
|
.Box.Active {
|
|
|
|
|
background: hsl(0,0%,36%);
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<img class="mockup" width="100%" src="website.png">
|
|
|
|
|
|
|
|
|
|
<div class="settings">
|
|
|
|
|
<table>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>
|
|
|
|
|
<td><h2>Settings</h2>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>
|
|
|
|
|
<input id="flat" type="checkbox" data-option="flat">
|
|
|
|
|
<td>
|
|
|
|
|
<label for="flat">Flat Design</label>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>
|
|
|
|
|
<input type="color" id="color" value="#AE99D6" data-option="color">
|
|
|
|
|
<td>
|
|
|
|
|
<label for="color">Color</label>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>
|
|
|
|
|
<input type="range" id="borderRadius" value="5" min="0" max="20" data-option="borderRadius">
|
|
|
|
|
<input type="number" value="5" min="5" max="20" data-option="borderRadius">px
|
|
|
|
|
<td>
|
|
|
|
|
<label for="borderRadius">Border Radius</label>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>
|
|
|
|
|
<input type="range" id="fontSize" value="12" min="11" max="18" data-option="fontSize">
|
|
|
|
|
<input type="number" value="12" min="11" max="18" data-option="fontSize">px
|
|
|
|
|
<td>
|
|
|
|
|
<label for="fontSize">Font Size</label>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script src="jquery-2.1.4.min.js"></script>
|
|
|
|
|
<script src="node_modules/sass.js/dist/sass.js"></script>
|
|
|
|
|
<script src="chat.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
var sass = new Sass();
|
|
|
|
|
var scss = '';
|
|
|
|
|
var $scss = $('<style id="scss"></style>').appendTo('body');
|
|
|
|
|
|
|
|
|
|
$.get('style.scss', function(result){ scss = result });
|
|
|
|
|
|
|
|
|
|
function setScssVariable(name, value){
|
|
|
|
|
if(!scss){
|
|
|
|
|
return 'scss file not yet loaded';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
scss = scss.replace(new RegExp('(\\$'+ name +':\ ).*(;)'), '$1'+ value +'$2');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function updateStyle(){
|
|
|
|
|
if(!scss){
|
|
|
|
|
return 'scss file not yet loaded';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
sass.compile(scss, function(result) {
|
|
|
|
|
if(result.status != 0){
|
|
|
|
|
// error
|
|
|
|
|
console.error(result.formatted);
|
|
|
|
|
} else {
|
|
|
|
|
$scss.text(result.text);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$('.settings :input').on({
|
|
|
|
|
change: function(){
|
|
|
|
|
switch($(this).attr('data-option')){
|
|
|
|
|
case "flat":
|
|
|
|
|
$('.zammad-chat').toggleClass('zammad-chat--flat', this.checked);
|
|
|
|
|
break;
|
|
|
|
|
case "color":
|
|
|
|
|
setScssVariable('themeColor', this.value);
|
|
|
|
|
updateStyle();
|
|
|
|
|
break;
|
|
|
|
|
case "borderRadius":
|
|
|
|
|
setScssVariable('borderRadius', this.value + "px");
|
|
|
|
|
updateStyle();
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
input: function(){
|
|
|
|
|
switch($(this).attr('data-option')){
|
|
|
|
|
case "borderRadius":
|
|
|
|
|
$('[data-option="borderRadius"]').val(this.value);
|
|
|
|
|
setScssVariable('borderRadius', this.value + "px");
|
|
|
|
|
updateStyle();
|
|
|
|
|
break;
|
|
|
|
|
case "fontSize":
|
|
|
|
|
$('[data-option="fontSize"]').val(this.value);
|
|
|
|
|
setScssVariable('fontSize', this.value + "px");
|
|
|
|
|
updateStyle();
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
</script>
|
