Home Explore Help
Sign In
SMusatov
/
zammad
mirror of https://github.com/zammad/zammad.git
1
0
Fork 0
Files
Browse Source

chat: add testing webiste

Felix Niklas 9 years ago
parent
843e1e5a9c
commit
eb1d74b8e2
2 changed files with 160 additions and 0 deletions
Split View Show Diff Stats
  1. 160 0
      public/assets/chat/index.html
  2. BIN
      public/assets/chat/website.png

+ 160 - 0
public/assets/chat/index.html
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
View File