Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

chat: add testing webiste

Browse source
This commit is contained in:
Felix Niklas 2015-10-15 15:28:39 +02:00
parent 843e1e5a9c
commit eb1d74b8e2
2 changed files with 160 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

160
public/assets/chat/index.html Normal file
View file

@ -0,0 +1,160 @@
<!doctype html>
<meta charset="utf-8">
<title>Zammad Chat</title>
<link rel="stylesheet" href="style.css">
<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>

BIN
public/assets/chat/website.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 750 KiB