Maintenance: Update gulp toolchains to work with recent Node.js and without Docker.

.gitignore

@@ -61,19 +61,7 @@
 /public/assets/doorkeeper
 
 # images
-/public/assets/images/*
-/public/assets/images/yarn.lock
 /public/assets/images/node_modules
-!/public/assets/images/*.sh
-!/public/assets/images/Dockerfile
-!/public/assets/images/package.json
-!/public/assets/images/gulpfile.js
-!/public/assets/images/icons/
-!/public/assets/images/avatar-bg.png
-!/public/assets/images/chat-demo-avatar.png
-!/public/assets/images/eyedropper.gif
-!/public/assets/images/icons.svg
-!/public/assets/images/logo.svg
 
 # Third-Party ------------------------------------------------------------------
 

.stylelintrc.json

@@ -36,6 +36,7 @@
   },
   "ignoreFiles": [
     "public/assets/*.css",
+    "public/assets/chat/chat.css",
     "public/assets/doorkeeper/**",
     "**/reset*.css",
     "**/bootstrap*.css",

public/assets/chat/Dockerfile

@@ -1,16 +0,0 @@
-FROM node:8-alpine
-
-ENV GULP_DIR "/tmp/gulp"
-
-RUN apk update && apk add bash
-SHELL ["/bin/bash", "-o", "pipefail", "-c"]
-CMD bash # If you want to override CMD
-RUN npm install -g gulp
-
-COPY docker-entrypoint.sh /
-
-# enable volume to generate build files into the hosts FS
-VOLUME ["$GULP_DIR"]
-
-# start
-ENTRYPOINT ["/docker-entrypoint.sh"]

public/assets/chat/README.md

@@ -1,5 +1,25 @@
-# Zammad Chat build
+# Recreating the Static Zammad Chat Build
 
-This folder contains a `docker` image and the required files to build the Zammad Chat from coffeescript and eco files. This workaround is required for now because of the outdated NodeJS 8 dependency.
+```
+$ yarn install
+$ npx gulp build
+[11:13:03] Using gulpfile zammad/public/assets/chat/gulpfile.js
+[11:13:03] Starting 'build'...
+[11:13:03] Starting 'js'...
+[11:13:03] Starting 'no_jquery'...
+[11:13:03] Starting 'css'...
+[11:13:03] Finished 'js' after 6.21 ms
+[11:13:03] Finished 'no_jquery' after 7.75 ms
+[11:13:03] Finished 'css' after 8.81 ms
+[11:13:03] Finished 'build' after 9.8 ms
+```
 
-The build process can easily be started by executing the `build.sh` file. There is nothing more to it except of having `docker` installed and running.
+# Development Mode
+
+This is useful when developing. Gulp will watch the files for changes and start rebuilds automatically.
+
+```
+npx gulp
+[11:14:46] Using gulpfile ~/wz/zammad/public/assets/chat/gulpfile.js
+[11:14:46] Starting 'default'...
+```

public/assets/chat/chat.css

@@ -6,15 +6,17 @@
   font-size: 12px;
   width: 33em;
   height: 3.5em;
+  -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
   border-radius: 5px 5px 0 0;
   will-change: bottom;
   display: none;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
   z-index: 999;
 }
-
 @media only screen and (max-width: 768px) {
   .zammad-chat {
     right: 0;
@@ -23,12 +25,16 @@
     font-size: 16px !important;
   }
 }
-
 .zammad-chat--animate {
+  -webkit-transition: -webkit-transform 500ms;
+  transition: -webkit-transform 500ms;
+  -o-transition: transform 500ms;
   transition: transform 500ms;
+  transition: transform 500ms, -webkit-transform 500ms;
 }
 
 .zammad-chat.zammad-chat-is-loaded {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   opacity: 0;
@@ -41,7 +47,6 @@
 .zammad-chat.zammad-chat-is-open {
   height: 30em;
 }
-
 @media only screen and (max-width: 768px) {
   .zammad-chat.zammad-chat-is-open {
     height: 100%;
@@ -59,18 +64,17 @@
 
 .zammad-chat-header {
   padding: 0.5em 2.5em 0.5em 1em;
-  background: #379ad7;
+  background: hsl(203deg, 67%, 53%);
   color: white;
   line-height: 2.5em;
   height: 3.5em;
-  box-shadow: 0 -1px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.3) inset,
-    0 -1px rgba(0, 0, 0, 0.1) inset, 0 1px 1px rgba(0, 0, 0, 0.13);
+  -webkit-box-shadow: 0 -1px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.3) inset, 0 -1px rgba(0, 0, 0, 0.1) inset, 0 1px 1px rgba(0, 0, 0, 0.13);
+  box-shadow: 0 -1px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.3) inset, 0 -1px rgba(0, 0, 0, 0.1) inset, 0 1px 1px rgba(0, 0, 0, 0.13);
   position: relative;
   border-radius: 5px 5px 0 0;
   overflow: hidden;
   cursor: pointer;
 }
-
 @media only screen and (max-width: 768px) {
   .zammad-chat-header {
     border-radius: 0 !important;
@@ -95,9 +99,8 @@
   line-height: 3.4em;
   cursor: pointer;
 }
-
 .zammad-chat-header-icon::before {
-  content: '';
+  content: "";
   display: inline-block;
 }
 
@@ -148,12 +151,13 @@
   padding: 0 0.7em;
   border-radius: 1em;
   background: rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04) inset;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04) inset;
 }
 
 .zammad-chat-agent-status::before {
-  content: '';
-  background: #f35912;
+  content: "";
+  background: hsl(19deg, 90%, 51%);
   display: inline-block;
   height: 0.9em;
   width: 0.9em;
@@ -161,30 +165,45 @@
   position: relative;
   margin-right: 0.3em;
   vertical-align: middle;
+  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04) inset;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04) inset;
 }
 
-.zammad-chat-agent-status[data-status='online']::before {
-  background: #52c782;
+.zammad-chat-agent-status[data-status=online]::before {
+  background: hsl(145deg, 51%, 55%);
 }
 
-.zammad-chat-agent-status[data-status='connecting']::before {
+.zammad-chat-agent-status[data-status=connecting]::before {
+  -webkit-animation: linear connect-fade 600ms infinite alternate;
   animation: linear connect-fade 600ms infinite alternate;
-  background: #faab00;
+  background: hsl(41deg, 100%, 49%);
 }
 
-@keyframes connect-fade {
+@-webkit-keyframes connect-fade {
   from {
     opacity: 0.5;
+    -webkit-transform: scale(0.6);
     transform: scale(0.6);
   }
-
   to {
     opacity: 1;
+    -webkit-transform: scale(1);
     transform: scale(1);
   }
 }
 
+@keyframes connect-fade {
+  from {
+    opacity: 0.5;
+    -webkit-transform: scale(0.6);
+    transform: scale(0.6);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
 .zammad-chat-modal {
   position: absolute;
   left: 0;
@@ -196,14 +215,16 @@
   background: white;
   z-index: 1;
   padding: 20px;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
 }
-
 .zammad-chat-modal:empty {
   display: none;
 }
@@ -212,11 +233,9 @@
   font-size: 1.3em;
   line-height: 1.45;
 }
-
 .zammad-chat-modal-text .zammad-chat-loading-animation {
   font-size: 0.7em;
 }
-
 .zammad-chat-modal-text .zammad-chat-button {
   margin-top: 1em;
   font-size: 0.8em;
@@ -228,23 +247,24 @@
 }
 
 .zammad-scroll-hint {
-  background: #f9fafa;
+  background: hsl(210deg, 8%, 98%);
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  border-bottom: 1px solid #e8e8e8;
+  border-bottom: 1px solid hsl(0deg, 0%, 91%);
   padding: 7px 10px 6px;
-  color: #999;
+  color: hsl(0deg, 0%, 60%);
   cursor: pointer;
 }
-
 .zammad-scroll-hint.is-hidden {
   display: none;
 }
 
 .zammad-scroll-hint-icon {
-  fill: #c4c7ca;
+  fill: hsl(210deg, 5%, 78%);
   margin-right: 8px;
 }
 
@@ -252,16 +272,18 @@
   padding: 0.5em 1em;
   overflow: auto;
   background: white;
+  -webkit-box-flex: 1;
   -ms-flex: 1;
   flex: 1;
   display: none;
   -webkit-overflow-scrolling: touch;
+  -ms-scroll-chaining: none;
   overscroll-behavior: contain;
 }
-
 @media only screen and (max-width: 768px) {
   .zammad-chat-body {
     height: auto;
+    -webkit-box-flex: 1;
     -ms-flex: 1;
     flex: 1;
   }
@@ -273,7 +295,7 @@
 
 .zammad-chat-timestamp {
   text-align: center;
-  color: #999;
+  color: hsl(0deg, 0%, 60%);
   font-size: 0.9em;
   margin: 1em 0;
 }
@@ -297,11 +319,11 @@
 .zammad-chat-message-body {
   padding: 0.5em 1em;
   line-height: 1.4;
-  background: #ededed;
+  background: hsl(0deg, 0%, 93%);
   display: inline-block;
   max-width: 70%;
-  box-shadow: 0 2px rgba(255, 255, 255, 0.15) inset,
-    0 0 0 1px rgba(0, 0, 0, 0.08) inset, 0 1px rgba(0, 0, 0, 0.02);
+  -webkit-box-shadow: 0 2px rgba(255, 255, 255, 0.15) inset, 0 0 0 1px rgba(0, 0, 0, 0.08) inset, 0 1px rgba(0, 0, 0, 0.02);
+  box-shadow: 0 2px rgba(255, 255, 255, 0.15) inset, 0 0 0 1px rgba(0, 0, 0, 0.08) inset, 0 1px rgba(0, 0, 0, 0.02);
 }
 
 .zammad-chat-status-inner {
@@ -319,7 +341,7 @@
 }
 
 .zammad-chat-message--customer .zammad-chat-message-body {
-  background: #379ad7;
+  background: hsl(203deg, 67%, 53%);
   color: white;
 }
 
@@ -336,51 +358,68 @@
 }
 
 .zammad-chat-loading-circle {
-  background: #d9d9d9;
+  background: hsl(0deg, 0%, 85%);
   border-radius: 100%;
   height: 0.55em;
   width: 0.55em;
   display: inline-block;
+  -webkit-animation: ease-in-out load-fade 600ms infinite alternate;
   animation: ease-in-out load-fade 600ms infinite alternate;
 }
 
 .zammad-chat-loading-circle + .zammad-chat-loading-circle {
+  -webkit-animation-delay: 0.13s;
   animation-delay: 0.13s;
 }
 
-.zammad-chat-loading-circle
-  + .zammad-chat-loading-circle
-  + .zammad-chat-loading-circle {
+.zammad-chat-loading-circle + .zammad-chat-loading-circle + .zammad-chat-loading-circle {
+  -webkit-animation-delay: 0.26s;
   animation-delay: 0.26s;
 }
 
-@keyframes load-fade {
+@-webkit-keyframes load-fade {
   from {
     opacity: 0.5;
+    -webkit-transform: scale(0.6);
     transform: scale(0.6);
   }
-
   67% {
     opacity: 1;
+    -webkit-transform: scale(1);
     transform: scale(1);
   }
 }
 
+@keyframes load-fade {
+  from {
+    opacity: 0.5;
+    -webkit-transform: scale(0.6);
+    transform: scale(0.6);
+  }
+  67% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
 .zammad-chat-controls {
   overflow: hidden;
   display: none;
+  -webkit-box-align: end;
   -ms-flex-align: end;
   align-items: flex-end;
-  border-top: 1px solid #ededed;
+  border-top: 1px solid hsl(0deg, 0%, 93%);
   padding: 0;
   margin: 0;
   line-height: 1.4em;
+  -webkit-box-shadow: 0 1px rgba(0, 0, 0, 0.01), 0 -1px rgba(0, 0, 0, 0.02);
   box-shadow: 0 1px rgba(0, 0, 0, 0.01), 0 -1px rgba(0, 0, 0, 0.02);
   position: relative;
   background: white;
 }
 
 .zammad-chat-is-open .zammad-chat-controls {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
@@ -399,16 +438,19 @@
   appearance: none;
   border: none;
   background: none;
+  -webkit-box-shadow: none;
   box-shadow: none;
+  -webkit-box-sizing: content-box;
   box-sizing: content-box;
   outline: none;
+  -webkit-box-flex: 1;
   -ms-flex: 1;
   flex: 1;
   overflow: auto;
 }
 
 .zammad-chat-input::-webkit-input-placeholder {
-  color: #d9d9d9;
+  color: hsl(0deg, 0%, 85%);
 }
 
 .zammad-chat-button {
@@ -418,15 +460,15 @@
   font-family: inherit;
   font-size: inherit;
   line-height: initial;
-  background: #379ad7;
+  background: hsl(203deg, 67%, 53%);
   color: white;
   padding: 0.5em 1.2em;
   margin: 0.63em 1em;
   cursor: pointer;
   border: none;
   border-radius: 1.5em;
-  box-shadow: 0 2px rgba(255, 255, 255, 0.25) inset,
-    0 0 0 1px rgba(0, 0, 0, 0.1) inset, 0 1px rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: 0 2px rgba(255, 255, 255, 0.25) inset, 0 0 0 1px rgba(0, 0, 0, 0.1) inset, 0 1px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px rgba(255, 255, 255, 0.25) inset, 0 0 0 1px rgba(0, 0, 0, 0.1) inset, 0 1px rgba(0, 0, 0, 0.1);
   outline: none;
   display: inline-block;
 }
@@ -454,15 +496,18 @@
 }
 
 .zammad-chat--flat .zammad-chat-header {
+  -webkit-box-shadow: none;
   box-shadow: none;
 }
 
 .zammad-chat--flat .zammad-chat-message-body {
+  -webkit-box-shadow: none;
   box-shadow: none;
 }
 
 .zammad-chat--flat .zammad-chat-agent-status,
 .zammad-chat--flat .zammad-chat-button,
 .zammad-chat--flat .zammad-chat-status {
+  -webkit-box-shadow: none;
   box-shadow: none;
-}
+}

public/assets/chat/docker-entrypoint.sh

@@ -1,7 +0,0 @@
-#!/bin/bash
-
-cd "${GULP_DIR}" || exit
-
-yarn
-
-gulp js css no-jquery