Maintenance: Regenerate chat assets to match latest templates.

.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

@@ -5,7 +5,6 @@ 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 /
 

public/assets/chat/build.sh

@@ -3,6 +3,6 @@
 set -o errexit
 set -o pipefail
 
-docker build --no-cache -t zammad/chat-build:latest .
+docker build --platform amd64 --no-cache -t zammad/chat-build:latest .
 
 docker run --rm -v "$(pwd)/:/tmp/gulp" zammad/chat-build:latest

public/assets/chat/chat.css

@@ -12,41 +12,29 @@
   display: none;
   -ms-flex-direction: column;
   flex-direction: column;
-  z-index: 999;
+  z-index: 999; }
-}
+  @media only screen and (max-width: 768px) {
-
+    .zammad-chat {
-@media only screen and (max-width: 768px) {
+      right: 0;
-  .zammad-chat {
+      width: 100%;
-    right: 0;
+      border-radius: 0 !important;
-    width: 100%;
+      font-size: 16px !important; } }
-    border-radius: 0 !important;
+  .zammad-chat--animate {
-    font-size: 16px !important;
+    transition: transform 500ms; }
-  }
-}
-
-.zammad-chat--animate {
-  transition: transform 500ms;
-}
 
 .zammad-chat.zammad-chat-is-loaded {
   display: -ms-flexbox;
   display: flex;
-  opacity: 0;
+  opacity: 0; }
-}
 
 .zammad-chat.zammad-chat-is-shown {
-  opacity: 1;
+  opacity: 1; }
-}
 
 .zammad-chat.zammad-chat-is-open {
-  height: 30em;
+  height: 30em; }
-}
+  @media only screen and (max-width: 768px) {
-
+    .zammad-chat.zammad-chat-is-open {
-@media only screen and (max-width: 768px) {
+      height: 100%; } }
-  .zammad-chat.zammad-chat-is-open {
-    height: 100%;
-  }
-}
 
 .zammad-chat-icon {
   height: 2em;
@@ -54,8 +42,7 @@
   fill: currentColor;
   vertical-align: top;
   margin-right: 5px;
-  margin-top: 4px;
+  margin-top: 4px; }
-}
 
 .zammad-chat-header {
   padding: 0.5em 2.5em 0.5em 1em;
@@ -63,27 +50,20 @@
   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,
+  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);
-    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;
+  cursor: pointer; }
-}
+  @media only screen and (max-width: 768px) {
-
+    .zammad-chat-header {
-@media only screen and (max-width: 768px) {
+      border-radius: 0 !important; } }
-  .zammad-chat-header {
-    border-radius: 0 !important;
-  }
-}
 
 .zammad-chat.zammad-chat-is-open .zammad-chat-header {
-  cursor: default;
+  cursor: default; }
-}
 
 .zammad-chat-welcome-text {
-  font-size: 1.2em;
+  font-size: 1.2em; }
-}
 
 .zammad-chat-header-icon {
   position: absolute;
@@ -93,53 +73,42 @@
   width: 3.4em;
   text-align: center;
   line-height: 3.4em;
-  cursor: pointer;
+  cursor: pointer; }
-}
+  .zammad-chat-header-icon::before {
-
+    content: '';
-.zammad-chat-header-icon::before {
+    display: inline-block; }
-  content: '';
-  display: inline-block;
-}
 
 .zammad-chat-header-icon-open,
 .zammad-chat-header-icon-close {
   fill: currentColor;
   width: 1.6em;
   height: auto;
-  vertical-align: middle;
+  vertical-align: middle; }
-}
 
 .zammad-chat-header-icon-close {
-  width: 1.3em;
+  width: 1.3em; }
-}
 
 .zammad-chat-header-icon-close,
 .zammad-chat.zammad-chat-is-open .zammad-chat-header-icon-open {
-  display: none;
+  display: none; }
-}
 
 .zammad-chat.zammad-chat-is-open .zammad-chat-header-icon-close {
-  display: inline;
+  display: inline; }
-}
 
 .zammad-chat-agent {
-  float: left;
+  float: left; }
-}
 
 .zammad-chat-header-controls {
-  float: right;
+  float: right; }
-}
 
 .zammad-chat-agent-avatar {
   border-radius: 100%;
   margin-right: 0.6em;
   float: left;
-  width: 2.5em;
+  width: 2.5em; }
-}
 
 .zammad-chat-agent-name {
-  font-weight: bold;
+  font-weight: bold; }
-}
 
 .zammad-chat-agent-status {
   margin: 0.25em 1em;
@@ -148,8 +117,7 @@
   padding: 0 0.7em;
   border-radius: 1em;
   background: rgba(0, 0, 0, 0.1);
-  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: '';
@@ -161,29 +129,22 @@
   position: relative;
   margin-right: 0.3em;
   vertical-align: middle;
-  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;
+  background: #52c782; }
-}
 
 .zammad-chat-agent-status[data-status='connecting']::before {
   animation: linear connect-fade 600ms infinite alternate;
-  background: #faab00;
+  background: #faab00; }
-}
 
 @keyframes connect-fade {
   from {
     opacity: 0.5;
-    transform: scale(0.6);
+    transform: scale(0.6); }
-  }
-
   to {
     opacity: 1;
-    transform: scale(1);
+    transform: scale(1); } }
-  }
-}
 
 .zammad-chat-modal {
   position: absolute;
@@ -201,31 +162,22 @@
   -ms-flex-align: center;
   align-items: center;
   -ms-flex-pack: center;
-  justify-content: center;
+  justify-content: center; }
-}
+  .zammad-chat-modal:empty {
-
+    display: none; }
-.zammad-chat-modal:empty {
-  display: none;
-}
 
 .zammad-chat-modal-text {
   font-size: 1.3em;
-  line-height: 1.45;
+  line-height: 1.45; }
-}
+  .zammad-chat-modal-text .zammad-chat-loading-animation {
-
+    font-size: 0.7em; }
-.zammad-chat-modal-text .zammad-chat-loading-animation {
+  .zammad-chat-modal-text .zammad-chat-button {
-  font-size: 0.7em;
+    margin-top: 1em;
-}
+    font-size: 0.8em; }
-
-.zammad-chat-modal-text .zammad-chat-button {
-  margin-top: 1em;
-  font-size: 0.8em;
-}
 
 .zammad-chat-modal .zammad-chat-loading-animation {
   margin-right: 8px;
-  vertical-align: middle;
+  vertical-align: middle; }
-}
 
 .zammad-scroll-hint {
   background: #f9fafa;
@@ -235,18 +187,14 @@
   align-items: center;
   border-bottom: 1px solid #e8e8e8;
   padding: 7px 10px 6px;
-  color: #999;
+  color: #999999;
-  cursor: pointer;
+  cursor: pointer; }
-}
+  .zammad-scroll-hint.is-hidden {
-
+    display: none; }
-.zammad-scroll-hint.is-hidden {
-  display: none;
-}
 
 .zammad-scroll-hint-icon {
   fill: #c4c7ca;
-  margin-right: 8px;
+  margin-right: 8px; }
-}
 
 .zammad-chat-body {
   padding: 0.5em 1em;
@@ -256,42 +204,33 @@
   flex: 1;
   display: none;
   -webkit-overflow-scrolling: touch;
-  overscroll-behavior: contain;
+  overscroll-behavior: contain; }
-}
+  @media only screen and (max-width: 768px) {
-
+    .zammad-chat-body {
-@media only screen and (max-width: 768px) {
+      height: auto;
-  .zammad-chat-body {
+      -ms-flex: 1;
-    height: auto;
+      flex: 1; } }
-    -ms-flex: 1;
-    flex: 1;
-  }
-}
 
 .zammad-chat-is-open .zammad-chat-body {
-  display: block;
+  display: block; }
-}
 
 .zammad-chat-timestamp {
   text-align: center;
-  color: #999;
+  color: #999999;
   font-size: 0.9em;
-  margin: 1em 0;
+  margin: 1em 0; }
-}
 
 .zammad-chat-status {
   margin: 1em 0;
-  text-align: center;
+  text-align: center; }
-}
 
 .zammad-chat-message {
-  margin: 0.5em 0;
+  margin: 0.5em 0; }
-}
 
 .zammad-chat-message-body {
   white-space: pre-line;
   word-wrap: break-word;
-  border-radius: 1em;
+  border-radius: 1em; }
-}
 
 .zammad-chat-status-inner,
 .zammad-chat-message-body {
@@ -300,40 +239,31 @@
   background: #ededed;
   display: inline-block;
   max-width: 70%;
-  box-shadow: 0 2px rgba(255, 255, 255, 0.15) inset,
+  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); }
-    0 0 0 1px rgba(0, 0, 0, 0.08) inset, 0 1px rgba(0, 0, 0, 0.02);
-}
 
 .zammad-chat-status-inner {
   background: #eee;
-  border-radius: 0.5em;
+  border-radius: 0.5em; }
-}
 
 .zammad-chat-message--customer {
-  text-align: right;
+  text-align: right; }
-}
 
 .zammad-chat-message--customer + .zammad-chat-message--agent,
 .zammad-chat-message--agent + .zammad-chat-message--customer {
-  margin-top: 1em;
+  margin-top: 1em; }
-}
 
 .zammad-chat-message--customer .zammad-chat-message-body {
   background: #379ad7;
-  color: white;
+  color: white; }
-}
 
 .zammad-chat-message--unread {
-  font-weight: bold;
+  font-weight: bold; }
-}
 
 .zammad-chat-message--typing .zammad-chat-message-body {
-  white-space: normal;
+  white-space: normal; }
-}
 
 .zammad-chat-loading-animation {
-  display: inline-block;
+  display: inline-block; }
-}
 
 .zammad-chat-loading-circle {
   background: #d9d9d9;
@@ -341,30 +271,23 @@
   height: 0.55em;
   width: 0.55em;
   display: inline-block;
-  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 {
-  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 {
-  animation-delay: 0.26s;
+  animation-delay: 0.26s; }
-}
 
 @keyframes load-fade {
   from {
     opacity: 0.5;
-    transform: scale(0.6);
+    transform: scale(0.6); }
-  }
-
   67% {
     opacity: 1;
-    transform: scale(1);
+    transform: scale(1); } }
-  }
-}
 
 .zammad-chat-controls {
   overflow: hidden;
@@ -377,13 +300,11 @@
   line-height: 1.4em;
   box-shadow: 0 1px rgba(0, 0, 0, 0.01), 0 -1px rgba(0, 0, 0, 0.02);
   position: relative;
-  background: white;
+  background: white; }
-}
 
 .zammad-chat-is-open .zammad-chat-controls {
   display: -ms-flexbox;
-  display: flex;
+  display: flex; }
-}
 
 .zammad-chat-input {
   margin: 0;
@@ -404,12 +325,10 @@
   outline: none;
   -ms-flex: 1;
   flex: 1;
-  overflow: auto;
+  overflow: auto; }
-}
 
 .zammad-chat-input::-webkit-input-placeholder {
-  color: #d9d9d9;
+  color: #d9d9d9; }
-}
 
 .zammad-chat-button {
   -webkit-appearance: none;
@@ -425,44 +344,35 @@
   cursor: pointer;
   border: none;
   border-radius: 1.5em;
-  box-shadow: 0 2px rgba(255, 255, 255, 0.25) inset,
+  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);
-    0 0 0 1px rgba(0, 0, 0, 0.1) inset, 0 1px rgba(0, 0, 0, 0.1);
   outline: none;
-  display: inline-block;
+  display: inline-block; }
-}
 
 .zammad-chat-send {
-  float: right;
+  float: right; }
-}
 
 .zammad-chat-button:disabled,
 .zammad-chat-input:disabled {
   cursor: not-allowed;
-  opacity: 0.3;
+  opacity: 0.3; }
-}
 
 .zammad-chat-is-hidden {
-  display: none;
+  display: none; }
-}
 
 /*
   # Flat Design
 */
 .zammad-chat--flat .zammad-chat-header,
 .zammad-chat--flat .zammad-chat-body {
-  border: none;
+  border: none; }
-}
 
 .zammad-chat--flat .zammad-chat-header {
-  box-shadow: none;
+  box-shadow: none; }
-}
 
 .zammad-chat--flat .zammad-chat-message-body {
-  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 {
-  box-shadow: none;
+  box-shadow: none; }
-}

public/assets/chat/docker-entrypoint.sh

@@ -4,4 +4,4 @@ cd "${GULP_DIR}" || exit
 
 yarn
 
-gulp js css no-jquery
+npx gulp js css no-jquery

public/assets/images/Dockerfile

@@ -5,7 +5,6 @@ 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 /
 

public/assets/images/docker-entrypoint.sh

@@ -4,4 +4,4 @@ cd "${GULP_DIR}" || exit
 
 yarn
 
-gulp svgstore
+npx gulp svgstore