From e0bbe5e603b9fe6155f3190cc15ddbe1d9f1153e Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 18 Jan 2019 15:08:06 +0100
Subject: [PATCH 1/9] Added empty component

---
 components/Empty.vue          | 68 +++++++++++++++++++++++++++++++++++
 static/img/empty-state.svg    |  1 +
 static/img/empty/alert.svg    |  1 +
 static/img/empty/docs.svg     |  1 +
 static/img/empty/events.svg   |  1 +
 static/img/empty/file.svg     |  1 +
 static/img/empty/messages.svg |  1 +
 static/img/empty/tasks.svg    |  1 +
 8 files changed, 75 insertions(+)
 create mode 100644 components/Empty.vue
 create mode 100644 static/img/empty-state.svg
 create mode 100644 static/img/empty/alert.svg
 create mode 100644 static/img/empty/docs.svg
 create mode 100644 static/img/empty/events.svg
 create mode 100644 static/img/empty/file.svg
 create mode 100644 static/img/empty/messages.svg
 create mode 100644 static/img/empty/tasks.svg

diff --git a/components/Empty.vue b/components/Empty.vue
new file mode 100644
index 000000000..8755a11bd
--- /dev/null
+++ b/components/Empty.vue
@@ -0,0 +1,68 @@
+<template>
+  <ds-space
+    class="hc-empty"
+    centered
+    :margin="margin"
+  >
+    <ds-text>
+      <img
+        :src="iconPath"
+        width="80"
+        class="hc-empty-icon"
+        style="margin-bottom: 5px"
+        alt="Empty"
+      ><br>
+      <ds-text
+        v-show="message"
+        class="hc-empty-message"
+        color="softer"
+      >
+        {{ message }}
+      </ds-text>
+    </ds-text>
+  </ds-space>
+</template>
+
+<script>
+export default {
+  name: 'HcEmpty',
+  props: {
+    /**
+     * Icon that should be shown
+     * @options messages|events|alert|tasks|docs|file
+     */
+    icon: {
+      type: String,
+      required: true,
+      validator: value => {
+        return value.match(/(messages|events|alert|tasks|docs|file)/)
+      }
+    },
+    /**
+     * Message that appears under the icon
+     */
+    message: {
+      type: String,
+      default: null
+    },
+    /**
+     * Vertical spacing
+     */
+    margin: {
+      type: [String, Object],
+      default: 'x-large'
+    }
+  },
+  computed: {
+    iconPath() {
+      return `/img/empty/${this.icon}.svg`
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.hc-empty-icon {
+  padding-bottom: $font-space-large;
+}
+</style>
diff --git a/static/img/empty-state.svg b/static/img/empty-state.svg
new file mode 100644
index 000000000..e7b1cb669
--- /dev/null
+++ b/static/img/empty-state.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="259" height="213"><g fill="none" fill-rule="evenodd"><ellipse cx="120" cy="204" fill="#ECF1EE" rx="120" ry="9"/><path fill="#3B4340" fill-rule="nonzero" d="M24 136.244v52.761c0 3.305 2.69 5.995 6.01 5.995h179.98a5.994 5.994 0 0 0 6.01-5.995V164a3 3 0 0 1 6 0v25.005c0 6.63-5.37 11.995-12.01 11.995H30.01C23.38 201 18 195.628 18 189.005V129c0-.77.291-1.538.876-2.123a3.003 3.003 0 0 1 4.248.006l19.48 19.48 19.48-19.48a3.005 3.005 0 0 1 2.516-.857 3.005 3.005 0 0 1 2.524.857l19.48 19.48 19.48-19.48a3.005 3.005 0 0 1 2.516-.857 3.005 3.005 0 0 1 2.524.857l19.48 19.48 19.48-19.48a3.005 3.005 0 0 1 2.51-.858 2.99 2.99 0 0 1 2.522.85l14.386 14.385a3 3 0 0 1-4.243 4.243l-12.655-12.655-19.48 19.48a3.005 3.005 0 0 1-2.516.857 3.005 3.005 0 0 1-2.524-.857l-19.48-19.48-19.48 19.48a3.005 3.005 0 0 1-2.516.857 3.005 3.005 0 0 1-2.524-.857l-19.48-19.48-19.48 19.48a3.005 3.005 0 0 1-2.516.857 3.005 3.005 0 0 1-2.524-.857L24 136.244zm0-33.486l18.604 18.605 19.48-19.48a3.005 3.005 0 0 1 2.516-.857 3.005 3.005 0 0 1 2.524.857l19.48 19.48 19.48-19.48a3.005 3.005 0 0 1 2.516-.857 3.005 3.005 0 0 1 2.524.857l19.48 19.48 19.48-19.48a3.005 3.005 0 0 1 2.516-.857 3.005 3.005 0 0 1 2.524.857l19.48 19.48 6.763-6.763a2.999 2.999 0 0 1 4.238.005 3.005 3.005 0 0 1 .005 4.237l-8.496 8.496a2.986 2.986 0 0 1-2.515.848 3.005 3.005 0 0 1-2.515-.858l-19.48-19.48-19.48 19.48a3.005 3.005 0 0 1-2.516.857 3.005 3.005 0 0 1-2.524-.857l-19.48-19.48-19.48 19.48a3.005 3.005 0 0 1-2.516.857 3.005 3.005 0 0 1-2.524-.857l-19.48-19.48-19.48 19.48a3.005 3.005 0 0 1-2.516.857 3.005 3.005 0 0 1-2.524-.857l-21.203-21.203a3.006 3.006 0 0 1-.005-4.248 3.003 3.003 0 0 1 4.248.006l.876.876V104h-6V11.995C18 5.365 23.37 0 30.01 0h179.98C216.62 0 222 5.372 222 11.995V74a3 3 0 0 1-6 0V11.995C216 8.69 213.31 6 209.99 6H30.01A5.994 5.994 0 0 0 24 11.995v90.763zM38 24a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm16 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm16 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm24-4c0-1.657 1.351-3 3-3h104c1.657 0 3 1.347 3 3 0 1.657-1.351 3-3 3H97c-1.657 0-3-1.347-3-3z"/><path fill="#D0021B" d="M212.11 92.023c3.805-6.088 9.974-6.088 13.78 0l31.22 49.954c3.805 6.088 1.071 11.023-6.1 11.023h-64.02c-7.174 0-9.906-4.935-6.1-11.023l31.22-49.954zM215 108v24c0 1.653 1.343 3 3 3 1.653 0 3-1.343 3-3v-24c0-1.653-1.343-3-3-3-1.653 0-3 1.343-3 3zm3 37a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/></g></svg>
\ No newline at end of file
diff --git a/static/img/empty/alert.svg b/static/img/empty/alert.svg
new file mode 100644
index 000000000..5bff0a3da
--- /dev/null
+++ b/static/img/empty/alert.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="131"><defs><path id="a" d="M0 .024h119.634v119.569H0z"/></defs><g fill="none" fill-rule="evenodd"><g transform="translate(0 11.271)"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path fill="#DEDEDE" fill-opacity=".7" d="M13.085 101.253C25.835 86.874 32.21 66.935 32.21 41.436c0-2.445.576-4.96 1.726-7.549 1.15-2.588 2.804-5.057 4.96-7.405 2.157-2.348 5.07-4.278 8.736-5.788 3.667-1.51 7.729-2.264 12.187-2.264 4.457 0 8.52.754 12.185 2.264 3.667 1.51 6.578 3.44 8.735 5.788 2.158 2.348 3.811 4.817 4.962 7.405 1.15 2.588 1.725 5.104 1.725 7.55 0 25.498 6.375 45.437 19.124 59.816H13.085zm100.007-6.327c-1.966-2.204-4.003-5.068-6.11-8.591-2.111-3.523-3.896-7.321-5.358-11.396-1.462-4.073-2.66-9.01-3.594-14.81-.935-5.799-1.402-12.03-1.402-18.693 0-7.285-2.804-14.056-8.412-20.31C82.608 14.87 75.25 11.072 66.144 9.73c.383-.91.575-1.844.575-2.804 0-1.917-.672-3.547-2.013-4.889C63.364.696 61.734.024 59.818.024c-1.918 0-3.548.672-4.89 2.013-1.342 1.342-2.013 2.972-2.013 4.89 0 .959.191 1.893.576 2.803-9.108 1.342-16.465 5.14-22.073 11.396-5.608 6.254-8.411 13.025-8.411 20.31 0 6.662-.468 12.894-1.402 18.693-.935 5.8-2.133 10.737-3.595 14.81-1.463 4.075-3.248 7.873-5.357 11.396-2.11 3.523-4.146 6.387-6.11 8.591A63.175 63.175 0 0 1 0 101.253c0 2.493.91 4.65 2.732 6.47 1.82 1.823 3.978 2.733 6.471 2.733h37.949c2.065 5.345 7.25 9.137 13.323 9.137s11.257-3.792 13.322-9.137h36.635c2.492 0 4.648-.91 6.47-2.732 1.822-1.821 2.733-3.978 2.733-6.471a62.937 62.937 0 0 1-6.543-6.327z" mask="url(#b)"/></g><path fill="#9B9B9B" d="M80.066 65.602l-.797-.468-.363.85-.292.685c-1.16 2.725-3.467 4.416-6.02 4.416-2.553 0-4.86-1.691-6.02-4.415l-.291-.685-.363-.851-.798.468-2.473 1.452-.617.362.28.658.292.685c1.89 4.441 5.719 7.2 9.99 7.2 4.27 0 8.099-2.759 9.99-7.2l.292-.684.28-.659-.617-.362-2.473-1.452zm-22.243 2.473l.28-.659-.616-.362-2.474-1.452-.797-.468-.363.85-.292.685c-1.16 2.724-3.467 4.417-6.02 4.417-2.553 0-4.859-1.693-6.02-4.416l-.291-.685-.363-.851-.797.468-2.474 1.452-.617.362.28.659.293.684c1.89 4.441 5.718 7.2 9.99 7.2 4.27 0 8.098-2.759 9.99-7.2l.291-.684zm2.652 22.042a3.874 3.874 0 1 0 0 7.748 3.874 3.874 0 0 0 0-7.748M114.652 31.462h-10.585v2.737h6.091l-6.25 7.391v2.144h10.949v-2.737h-6.455l6.25-7.391zM90.854 21.183l18.528-.008-.002-4.632-10.923.004L109.03 4.035l-.002-3.628-17.913.007.002 4.632 10.307-.004-10.572 12.512z"/></g></svg>
\ No newline at end of file
diff --git a/static/img/empty/docs.svg b/static/img/empty/docs.svg
new file mode 100644
index 000000000..eb97ac269
--- /dev/null
+++ b/static/img/empty/docs.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="114" height="130"><g fill="none" fill-rule="evenodd"><path fill="#9B9B9B" d="M70.71 67.52l-2.634-1.547-.85-.5-.386.907-.311.73c-1.236 2.901-3.693 4.704-6.413 4.704s-5.177-1.803-6.412-4.704l-.311-.73-.386-.907-.85.5-2.635 1.546-.657.386.298.701.311.73c2.015 4.73 6.092 7.67 10.642 7.67s8.628-2.94 10.642-7.67l.311-.73.3-.7-.658-.387zm-29.322-1.547l-.85-.5-.386.907-.31.73c-1.237 2.901-3.694 4.704-6.414 4.704-2.72 0-5.176-1.803-6.412-4.704l-.311-.73-.386-.907-.85.5-2.635 1.546-.657.386.298.701.311.73c2.015 4.73 6.092 7.67 10.642 7.67s8.628-2.94 10.642-7.67l.311-.73.3-.7-.658-.387-2.635-1.546zm5.818 26.115a4.126 4.126 0 1 0 0 8.252 4.126 4.126 0 0 0 0-8.252M113.208 43.24v2.916h-11.663v-2.284l6.658-7.873h-6.488v-2.916h11.276v2.284l-6.659 7.873zM107.374 17.19l.002 4.934-19.738.008-.002-3.865L98.899 4.938l-10.98.005-.002-4.935L106.999 0l.002 3.865-11.263 13.33z"/><path fill="#DEDEDE" fill-opacity=".7" d="M66.288 28.215c-.498-.498-1.35-.954-2.552-1.369V50.25h23.403c-.416-1.203-.872-2.055-1.37-2.552L66.288 28.215zm21.349 93.736V58.215H61.744c-1.66 0-3.071-.58-4.232-1.742-1.163-1.161-1.744-2.572-1.744-4.233V26.348h-47.8v95.603h79.669zm3.734-79.918c1.16 1.162 2.157 2.738 2.987 4.73.83 1.991 1.245 3.818 1.245 5.477v71.703c0 1.659-.581 3.07-1.742 4.232-1.163 1.161-2.574 1.743-4.233 1.743H5.976c-1.66 0-3.072-.582-4.232-1.743C.58 127.013 0 125.602 0 123.943V24.356c0-1.659.58-3.07 1.744-4.232 1.16-1.16 2.572-1.742 4.232-1.742h55.768c1.66 0 3.486.414 5.477 1.244 1.992.83 3.569 1.826 4.73 2.987l19.42 19.42z"/></g></svg>
\ No newline at end of file
diff --git a/static/img/empty/events.svg b/static/img/empty/events.svg
new file mode 100644
index 000000000..2ac3ba12a
--- /dev/null
+++ b/static/img/empty/events.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="133" height="134"><defs><path id="a" d="M.353.351h20.354v22.591H.353z"/><path id="c" d="M0 .08h107.481v121.033H0z"/></defs><g fill="none" fill-rule="evenodd"><path fill="#9B9B9B" d="M77.331 73.129l-2.678-1.61L73.79 71l-.393.943-.316.76c-1.257 3.019-3.754 4.895-6.518 4.895-2.765 0-5.262-1.876-6.518-4.895l-.316-.76-.393-.943-.864.52-2.678 1.609-.668.401.304.73.316.759C57.793 79.94 61.938 83 66.563 83c4.624 0 8.769-3.059 10.816-7.982l.317-.758.304-.73-.669-.401zm-29.804-1.61L46.663 71l-.392.943-.317.76c-1.256 3.019-3.754 4.895-6.518 4.895s-5.262-1.876-6.518-4.895l-.316-.76L32.21 71l-.864.52-2.678 1.609-.668.401.303.73.316.759C30.667 79.94 34.811 83 39.436 83c4.624 0 8.77-3.059 10.817-7.982l.316-.758.304-.73-.668-.401-2.678-1.61zM53 99a4 4 0 1 0 0 8 4 4 0 0 0 0-8M133 44.1V47h-12v-2.271l6.85-7.829h-6.675V34h11.601v2.271l-6.85 7.829z"/><g transform="translate(106)"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path fill="#9B9B9B" mask="url(#b)" d="M20.705 17.897l.002 5.036-20.352.009-.002-3.946L11.966 5.392.645 5.396.642.359 20.318.351l.002 3.945L8.707 17.902z"/></g><g transform="translate(0 12)"><mask id="d" fill="#fff"><use xlink:href="#c"/></mask><path fill="#DEDEDE" fill-opacity=".7" d="M81.444 30.338V10.886c0-.63-.204-1.148-.61-1.553-.407-.405-.926-.608-1.56-.608h-4.339c-.634 0-1.152.203-1.56.608-.407.405-.61.923-.61 1.553v19.452c0 .631.203 1.148.61 1.553.408.405.926.609 1.56.609h4.339c.634 0 1.153-.204 1.56-.609.406-.405.61-.922.61-1.553zm-46.727 0V10.886c0-.63-.205-1.148-.61-1.553-.408-.405-.93-.608-1.56-.608h-4.34c-.632 0-1.152.203-1.56.608-.405.405-.609.923-.609 1.553v19.452c0 .631.204 1.148.61 1.553.407.405.927.609 1.56.609h4.339c.63 0 1.152-.204 1.56-.609.405-.405.61-.922.61-1.553zM8.68 112.466h90.122v-69.16H8.68v69.16zm98.8-86.45v86.45c0 2.341-.859 4.368-2.577 6.08-1.718 1.71-3.75 2.567-6.1 2.567H8.68c-2.35 0-4.385-.857-6.101-2.567C.859 116.834 0 114.807 0 112.466v-86.45c0-2.341.86-4.368 2.579-6.08 1.716-1.71 3.75-2.566 6.101-2.566h8.68v-6.484c0-2.972 1.06-5.515 3.184-7.632C22.67 1.138 25.224.08 28.208.08h4.339c2.982 0 5.537 1.058 7.661 3.174 2.124 2.117 3.188 4.66 3.188 7.632v6.484h20.69v-6.484c0-2.972 1.063-5.515 3.188-7.632C69.398 1.138 71.952.08 74.935.08h4.339c2.985 0 5.537 1.058 7.663 3.174 2.123 2.117 3.185 4.66 3.185 7.632v6.484h8.68c2.35 0 4.383.856 6.101 2.567 1.718 1.711 2.578 3.738 2.578 6.079z" mask="url(#d)"/></g></g></svg>
\ No newline at end of file
diff --git a/static/img/empty/file.svg b/static/img/empty/file.svg
new file mode 100644
index 000000000..62efbf260
--- /dev/null
+++ b/static/img/empty/file.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="136" height="130"><g fill="none" fill-rule="evenodd"><path fill="#9B9B9B" d="M81.331 69.129l-2.678-1.61L77.79 67l-.393.943-.316.76c-1.257 3.019-3.754 4.895-6.518 4.895s-5.262-1.876-6.518-4.895l-.316-.76-.393-.943-.863.52-2.678 1.609-.669.401.304.73.316.759C61.793 75.94 65.938 79 70.563 79c4.624 0 8.769-3.059 10.816-7.982l.317-.758.304-.73-.669-.401zm-29.804-1.61L50.663 67l-.393.943-.315.76c-1.257 3.019-3.754 4.895-6.519 4.895-2.764 0-5.261-1.876-6.517-4.895l-.317-.76L36.21 67l-.864.52-2.678 1.609-.668.401.303.73.316.759C34.667 75.94 38.812 79 43.436 79c4.625 0 8.77-3.059 10.817-7.982l.316-.758.305-.73-.67-.401-2.677-1.61zM58 94a4 4 0 1 0 0 8 4 4 0 0 0 0-8M136 44.1V47h-12v-2.271l6.85-7.829h-6.675V34h11.601v2.271l-6.85 7.829zM129.998 17.864l.002 5.127-19.998.009-.002-4.017 11.411-13.852-11.125.005-.002-5.128L129.618 0l.001 4.016-11.411 13.853z"/><path fill="#DEDEDE" fill-opacity=".7" d="M106.715 112.448c0 4.568-3.723 8.284-8.3 8.284h-80.83c-4.577 0-8.3-3.716-8.3-8.284V36.552c0-4.568 3.723-8.284 8.3-8.284H39.81l12.294 12.27.649.648h45.662c4.577 0 8.3 3.716 8.3 8.284v62.978zm4.106-75.36c-3.34-3.334-7.746-5.17-12.406-5.17H56.529l-12.293-12.27-.65-.648h-26c-4.661 0-9.068 1.836-12.407 5.17C1.839 27.501 0 31.9 0 36.551v75.896c0 4.652 1.839 9.05 5.179 12.383 3.34 3.333 7.746 5.169 12.406 5.169h80.83c4.66 0 9.066-1.836 12.406-5.17 3.34-3.332 5.179-7.73 5.179-12.382V49.47c0-4.651-1.84-9.049-5.179-12.382z"/></g></svg>
\ No newline at end of file
diff --git a/static/img/empty/messages.svg b/static/img/empty/messages.svg
new file mode 100644
index 000000000..6b7893918
--- /dev/null
+++ b/static/img/empty/messages.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="133"><g fill="none" fill-rule="evenodd"><path fill="#9B9B9B" d="M70.852 56.305l-2.473-1.452-.798-.468-.362.85-.292.686c-1.16 2.724-3.467 4.416-6.02 4.416-2.553 0-4.86-1.692-6.02-4.416l-.292-.685-.362-.85-.798.467-2.473 1.452-.617.363.28.658.292.684c1.89 4.442 5.718 7.2 9.99 7.2 4.27 0 8.098-2.758 9.99-7.2l.292-.684.28-.658-.617-.363zm-27.526-1.452l-.797-.468-.363.85-.292.686c-1.16 2.724-3.467 4.416-6.02 4.416-2.553 0-4.86-1.692-6.02-4.416l-.291-.685-.363-.85-.797.467-2.474 1.452-.617.363.28.658.292.684c1.89 4.442 5.719 7.2 9.99 7.2 4.27 0 8.099-2.758 9.99-7.2l.292-.684.28-.658-.616-.363-2.474-1.452zm5.462 24.516a3.874 3.874 0 1 0 0 7.747 3.874 3.874 0 0 0 0-7.747M119.865 40.59v2.737h-10.948v-2.144l6.25-7.39h-6.09v-2.738h10.584v2.144l-6.25 7.391zM114.389 16.136l.002 4.632-18.529.008-.001-3.628 10.572-12.513-10.307.005-.002-4.632L114.037 0l.001 3.628-10.572 12.513z"/><path fill="#DEDEDE" fill-opacity=".7" d="M15.983 38.613c-4.327 0-7.847 3.523-7.847 7.853l.988 70.28 10.53-13.508a4.068 4.068 0 0 1 3.208-1.567h60.856c4.327 0 7.847-3.519 7.847-7.844l-.989-47.36c0-4.33-3.52-7.854-7.847-7.854H15.983zM5.056 132.65a4.067 4.067 0 0 1-4.067-4.068L0 46.466c0-8.816 7.17-15.988 15.983-15.988H82.73c8.814 0 15.983 7.172 15.983 15.988l.989 47.36c0 8.812-7.17 15.98-15.983 15.98h-58.87L8.266 131.084a4.069 4.069 0 0 1-3.21 1.567z"/></g></svg>
\ No newline at end of file
diff --git a/static/img/empty/tasks.svg b/static/img/empty/tasks.svg
new file mode 100644
index 000000000..260b906e5
--- /dev/null
+++ b/static/img/empty/tasks.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="141"><defs><path id="a" d="M.157.075h12.616v14.142H.157z"/><path id="c" d="M0 .047h97.792V127.5H0z"/></defs><g fill="none" fill-rule="evenodd"><path fill="#9B9B9B" d="M74.79 73.038l-2.85-1.673-.918-.54-.419.98-.336.79c-1.337 3.138-3.995 5.088-6.937 5.088s-5.6-1.95-6.936-5.088l-.337-.79-.417-.98-.92.54-2.85 1.673-.71.417.322.759.336.789c2.18 5.117 6.59 8.296 11.512 8.296 4.922 0 9.333-3.18 11.512-8.297l.336-.788.324-.759-.711-.417zm-31.719-1.673l-.919-.54-.418.98-.336.79c-1.337 3.138-3.996 5.088-6.937 5.088-2.942 0-5.6-1.95-6.937-5.088l-.336-.79-.417-.98-.92.54-2.85 1.673-.711.417.323.759.336.789c2.18 5.117 6.59 8.296 11.512 8.296 4.921 0 9.332-3.18 11.512-8.297l.336-.788.324-.759-.712-.417-2.85-1.673zm6.294 28.25a4.463 4.463 0 1 0 0 8.926 4.463 4.463 0 0 0 0-8.926"/><g transform="translate(106.875 35.712)"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path fill="#9B9B9B" mask="url(#b)" d="M12.773 11.062v3.155H.157v-2.471l7.202-8.517H.341V.075h12.197v2.471l-7.203 8.516z"/></g><path fill="#9B9B9B" d="M113.338 18.595l.002 5.337-21.352.009-.001-4.181 12.182-14.418-11.877.004L92.29.008 112.932 0l.002 4.181L100.75 18.6z"/><g transform="translate(0 12.743)"><mask id="d" fill="#fff"><use xlink:href="#c"/></mask><path fill="#DEDEDE" fill-opacity=".7" d="M89.174 118.882H8.62V79.275h-.001V25.674H24.1v7.084c0 1.036.84 1.875 1.875 1.875h45.842c1.036 0 1.875-.839 1.875-1.875v-7.084h15.481v62.155h.001v31.053zm6.731-99.94c-1.254-1.256-2.782-1.886-4.577-1.886H73.692V10.24c0-1.035-.84-1.875-1.875-1.875h-6.51V1.922c0-1.035-.84-1.875-1.876-1.875H34.802c-1.035 0-1.875.84-1.875 1.875v6.443h-6.952c-1.035 0-1.875.84-1.875 1.875v6.816H6.463c-1.794 0-3.32.63-4.578 1.885C.629 20.2 0 21.725 0 23.52v97.517c0 1.794.629 3.32 1.886 4.578 1.256 1.256 2.782 1.885 4.578 1.885H91.33c1.794 0 3.32-.63 4.578-1.885 1.256-1.257 1.885-2.784 1.885-4.578V23.52c0-1.795-.628-3.321-1.887-4.579z" mask="url(#d)"/></g></g></svg>
\ No newline at end of file

From baac0748a002d64b2df56b7d6cf3eecdd936552a Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 18 Jan 2019 15:13:13 +0100
Subject: [PATCH 2/9] Added comming soon empty state to setting, admin and take
 action pages

---
 pages/admin/categories.vue          |  5 +--
 pages/admin/notifications.vue       | 19 +++++++++---
 pages/admin/organizations.vue       | 19 +++++++++---
 pages/admin/pages.vue               | 19 +++++++++---
 pages/admin/settings.vue            | 19 +++++++++---
 pages/admin/tags.vue                |  5 +--
 pages/admin/users.vue               | 19 +++++++++---
 pages/post/_slug/take-action.vue    | 48 +++++------------------------
 pages/settings/data-download.vue    | 19 +++++++++---
 pages/settings/delete-account.vue   | 19 +++++++++---
 pages/settings/index.vue            |  5 +--
 pages/settings/invites.vue          | 19 +++++++++---
 pages/settings/languages.vue        | 19 +++++++++---
 pages/settings/my-organizations.vue | 19 +++++++++---
 pages/settings/security.vue         | 19 +++++++++---
 15 files changed, 175 insertions(+), 97 deletions(-)

diff --git a/pages/admin/categories.vue b/pages/admin/categories.vue
index 14fee98b6..20739a661 100644
--- a/pages/admin/categories.vue
+++ b/pages/admin/categories.vue
@@ -1,8 +1,5 @@
 <template>
-  <ds-card space="small">
-    <ds-heading tag="h3">
-      {{ $t('admin.categories.name') }}
-    </ds-heading>
+  <ds-card :header="$t('admin.categories.name')">
     <ds-table
       :data="Category"
       :fields="fields"
diff --git a/pages/admin/notifications.vue b/pages/admin/notifications.vue
index 59d9ab693..9eab7ee12 100644
--- a/pages/admin/notifications.vue
+++ b/pages/admin/notifications.vue
@@ -1,7 +1,18 @@
 <template>
-  <ds-card space="small">
-    <ds-heading tag="h3">
-      {{ $t('admin.notifications.name') }}
-    </ds-heading>
+  <ds-card :header="$t('admin.notifications.name')">
+    <hc-empty
+      icon="tasks"
+      message="Comming Soon…"
+    />
   </ds-card>
 </template>
+
+<script>
+import HcEmpty from '~/components/Empty.vue'
+
+export default {
+  components: {
+    HcEmpty
+  }
+}
+</script>
diff --git a/pages/admin/organizations.vue b/pages/admin/organizations.vue
index dbc3bf38c..ceeed031d 100644
--- a/pages/admin/organizations.vue
+++ b/pages/admin/organizations.vue
@@ -1,7 +1,18 @@
 <template>
-  <ds-card>
-    <ds-space margin="small">
-      {{ $t('admin.organizations.name') }}
-    </ds-space>
+  <ds-card :header="$t('admin.organizations.name')">
+    <hc-empty
+      icon="tasks"
+      message="Comming Soon…"
+    />
   </ds-card>
 </template>
+
+<script>
+import HcEmpty from '~/components/Empty.vue'
+
+export default {
+  components: {
+    HcEmpty
+  }
+}
+</script>
diff --git a/pages/admin/pages.vue b/pages/admin/pages.vue
index a6ef7af4a..5c90a6578 100644
--- a/pages/admin/pages.vue
+++ b/pages/admin/pages.vue
@@ -1,7 +1,18 @@
 <template>
-  <ds-card>
-    <ds-space margin="small">
-      {{ $t('admin.pages.name') }}
-    </ds-space>
+  <ds-card :header="$t('admin.pages.name')">
+    <hc-empty
+      icon="tasks"
+      message="Comming Soon…"
+    />
   </ds-card>
 </template>
+
+<script>
+import HcEmpty from '~/components/Empty.vue'
+
+export default {
+  components: {
+    HcEmpty
+  }
+}
+</script>
diff --git a/pages/admin/settings.vue b/pages/admin/settings.vue
index 143607b0e..396aa54dd 100644
--- a/pages/admin/settings.vue
+++ b/pages/admin/settings.vue
@@ -1,7 +1,18 @@
 <template>
-  <ds-card>
-    <ds-space margin="small">
-      {{ $t('admin.settings.name') }}
-    </ds-space>
+  <ds-card :header="$t('admin.settings.name')">
+    <hc-empty
+      icon="tasks"
+      message="Comming Soon…"
+    />
   </ds-card>
 </template>
+
+<script>
+import HcEmpty from '~/components/Empty.vue'
+
+export default {
+  components: {
+    HcEmpty
+  }
+}
+</script>
diff --git a/pages/admin/tags.vue b/pages/admin/tags.vue
index 0bcb0aa07..03115f091 100644
--- a/pages/admin/tags.vue
+++ b/pages/admin/tags.vue
@@ -1,8 +1,5 @@
 <template>
-  <ds-card space="small">
-    <ds-heading tag="h3">
-      {{ $t('admin.tags.name') }}
-    </ds-heading>
+  <ds-card :header="$t('admin.tags.name')">
     <ds-table
       :data="Tag"
       :fields="fields"
diff --git a/pages/admin/users.vue b/pages/admin/users.vue
index af5c0e4e7..12ea874b1 100644
--- a/pages/admin/users.vue
+++ b/pages/admin/users.vue
@@ -1,7 +1,18 @@
 <template>
-  <ds-card>
-    <ds-space margin="small">
-      {{ $t('admin.users.name') }}
-    </ds-space>
+  <ds-card :header="$t('admin.users.name')">
+    <hc-empty
+      icon="tasks"
+      message="Comming Soon…"
+    />
   </ds-card>
 </template>
+
+<script>
+import HcEmpty from '~/components/Empty.vue'
+
+export default {
+  components: {
+    HcEmpty
+  }
+}
+</script>
diff --git a/pages/post/_slug/take-action.vue b/pages/post/_slug/take-action.vue
index 9791791d8..712cf6178 100644
--- a/pages/post/_slug/take-action.vue
+++ b/pages/post/_slug/take-action.vue
@@ -1,52 +1,18 @@
 <template>
   <ds-card header="Werde aktiv!">
-    <p>Was kann ich tun? Hier findest du mögliche Projekte, Aktioner, etc.</p>
+    <hc-empty
+      icon="tasks"
+      message="Comming Soon…"
+    />
   </ds-card>
 </template>
 
 <script>
-import gql from 'graphql-tag'
+import HcEmpty from '~/components/Empty.vue'
 
 export default {
-  transition: {
-    name: 'slide-up',
-    mode: 'out-in'
-  },
-
-  data() {
-    return {
-      Post: []
-    }
-  },
-  computed: {
-    tags() {
-      return this.Post ? this.Post[0].tags.map(tag => tag.name) : '-'
-    }
-  },
-  apollo: {
-    Post: {
-      query: gql(`
-        query {
-          Post {
-            id
-            title
-            tags {
-              name
-            }
-            categories {
-              name
-            }
-            shoutedCount
-            shoutedBy {
-              name
-              friends {
-                name
-              }
-            }
-          }
-        }
-      `)
-    }
+  components: {
+    HcEmpty
   }
 }
 </script>
diff --git a/pages/settings/data-download.vue b/pages/settings/data-download.vue
index db99049db..5f22b1e1f 100644
--- a/pages/settings/data-download.vue
+++ b/pages/settings/data-download.vue
@@ -1,7 +1,18 @@
 <template>
-  <ds-card>
-    <ds-space margin="small">
-      {{ $t('settings.download.name') }}
-    </ds-space>
+  <ds-card :header="$t('settings.download.name')">
+    <hc-empty
+      icon="tasks"
+      message="Comming Soon…"
+    />
   </ds-card>
 </template>
+
+<script>
+import HcEmpty from '~/components/Empty.vue'
+
+export default {
+  components: {
+    HcEmpty
+  }
+}
+</script>
diff --git a/pages/settings/delete-account.vue b/pages/settings/delete-account.vue
index f28b777e6..7540230a5 100644
--- a/pages/settings/delete-account.vue
+++ b/pages/settings/delete-account.vue
@@ -1,7 +1,18 @@
 <template>
-  <ds-card>
-    <ds-space margin="small">
-      {{ $t('settings.delete.name') }}
-    </ds-space>
+  <ds-card :header="$t('settings.delete.name')">
+    <hc-empty
+      icon="tasks"
+      message="Comming Soon…"
+    />
   </ds-card>
 </template>
+
+<script>
+import HcEmpty from '~/components/Empty.vue'
+
+export default {
+  components: {
+    HcEmpty
+  }
+}
+</script>
diff --git a/pages/settings/index.vue b/pages/settings/index.vue
index 9db497906..c018061a9 100644
--- a/pages/settings/index.vue
+++ b/pages/settings/index.vue
@@ -3,10 +3,7 @@
     v-model="form"
     @submit="submit"
   >
-    <ds-card space="small">
-      <ds-heading tag="h3">
-        {{ $t('settings.data.name') }}
-      </ds-heading>
+    <ds-card :header="$t('settings.data.name')">
       <ds-input
         id="name"
         model="name"
diff --git a/pages/settings/invites.vue b/pages/settings/invites.vue
index 7ae049e27..291fa62ad 100644
--- a/pages/settings/invites.vue
+++ b/pages/settings/invites.vue
@@ -1,7 +1,18 @@
 <template>
-  <ds-card>
-    <ds-space margin="small">
-      {{ $t('settings.invites.name') }}
-    </ds-space>
+  <ds-card :header="$t('settings.invites.name')">
+    <hc-empty
+      icon="tasks"
+      message="Comming Soon…"
+    />
   </ds-card>
 </template>
+
+<script>
+import HcEmpty from '~/components/Empty.vue'
+
+export default {
+  components: {
+    HcEmpty
+  }
+}
+</script>
diff --git a/pages/settings/languages.vue b/pages/settings/languages.vue
index b1c253316..ef3d4ce96 100644
--- a/pages/settings/languages.vue
+++ b/pages/settings/languages.vue
@@ -1,7 +1,18 @@
 <template>
-  <ds-card>
-    <ds-space margin="small">
-      {{ $t('settings.languages.name') }}
-    </ds-space>
+  <ds-card :header="$t('settings.languages.name')">
+    <hc-empty
+      icon="tasks"
+      message="Comming Soon…"
+    />
   </ds-card>
 </template>
+
+<script>
+import HcEmpty from '~/components/Empty.vue'
+
+export default {
+  components: {
+    HcEmpty
+  }
+}
+</script>
diff --git a/pages/settings/my-organizations.vue b/pages/settings/my-organizations.vue
index 62cd74fd1..c381d8dc4 100644
--- a/pages/settings/my-organizations.vue
+++ b/pages/settings/my-organizations.vue
@@ -1,7 +1,18 @@
 <template>
-  <ds-card>
-    <ds-space margin="small">
-      {{ $t('settings.organizations.name') }}
-    </ds-space>
+  <ds-card :header="$t('settings.organizations.name')">
+    <hc-empty
+      icon="tasks"
+      message="Comming Soon…"
+    />
   </ds-card>
 </template>
+
+<script>
+import HcEmpty from '~/components/Empty.vue'
+
+export default {
+  components: {
+    HcEmpty
+  }
+}
+</script>
diff --git a/pages/settings/security.vue b/pages/settings/security.vue
index 3ac2e7748..403015a4f 100644
--- a/pages/settings/security.vue
+++ b/pages/settings/security.vue
@@ -1,7 +1,18 @@
 <template>
-  <ds-card>
-    <ds-space margin="small">
-      {{ $t('settings.security.name') }}
-    </ds-space>
+  <ds-card :header="$t('settings.security.name')">
+    <hc-empty
+      icon="tasks"
+      message="Comming Soon…"
+    />
   </ds-card>
 </template>
+
+<script>
+import HcEmpty from '~/components/Empty.vue'
+
+export default {
+  components: {
+    HcEmpty
+  }
+}
+</script>

From c7ffcc44c60fd7522604cc53ec35dd0e7d0caed7 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 18 Jan 2019 15:15:53 +0100
Subject: [PATCH 3/9] empty comments

---
 pages/post/_slug/index.vue | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/pages/post/_slug/index.vue b/pages/post/_slug/index.vue
index 4a7d93703..73a9a7c7b 100644
--- a/pages/post/_slug/index.vue
+++ b/pages/post/_slug/index.vue
@@ -100,11 +100,10 @@
         </div>
         <ds-space margin-bottom="small" />
       </div>
-      <div v-else>
-        <p style="text-align: center; opacity: .5;">
-          NO COMMENTS
-        </p>
-      </div>
+      <hc-empty
+        v-else
+        icon="messages"
+      />
     </ds-section>
   </ds-card>
 </template>
@@ -113,6 +112,7 @@
 import gql from 'graphql-tag'
 import HcAuthor from '~/components/Author.vue'
 import HcShoutButton from '~/components/ShoutButton.vue'
+import HcEmpty from '~/components/Empty.vue'
 
 export default {
   transition: {
@@ -121,7 +121,8 @@ export default {
   },
   components: {
     HcAuthor,
-    HcShoutButton
+    HcShoutButton,
+    HcEmpty
   },
   head() {
     return {

From 011871405cfa5c92e953ee6e9ae5055d8713bd6e Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 18 Jan 2019 15:17:58 +0100
Subject: [PATCH 4/9] Empty relations

---
 pages/post/_slug/more-info.vue | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/pages/post/_slug/more-info.vue b/pages/post/_slug/more-info.vue
index 456c7c357..95108d522 100644
--- a/pages/post/_slug/more-info.vue
+++ b/pages/post/_slug/more-info.vue
@@ -43,12 +43,11 @@
           <hc-post-card :post="relatedPost" />
         </ds-flex-item>
       </ds-flex>
-      <ds-space
-        v-else
-        style="text-align: center; padding-top: 2em; opacity: .6;"
-      >
-        No related Posts
-      </ds-space>
+      <hc-empty
+        margin="large"
+        icon="file"
+        message="No related Posts"
+      />
     </ds-section>
     <ds-space margin-bottom="large" />
   </ds-card>
@@ -57,6 +56,7 @@
 <script>
 import gql from 'graphql-tag'
 import HcPostCard from '~/components/PostCard.vue'
+import HcEmpty from '~/components/Empty.vue'
 
 export default {
   transition: {
@@ -64,7 +64,8 @@ export default {
     mode: 'out-in'
   },
   components: {
-    HcPostCard
+    HcPostCard,
+    HcEmpty
   },
   computed: {
     post() {

From 233bce13e4dbdebe6b276337d7165589a18d2708 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 18 Jan 2019 15:21:52 +0100
Subject: [PATCH 5/9] Empty profile

---
 pages/profile/_slug.vue | 42 +++++++++++++++++++++++++++++------------
 1 file changed, 30 insertions(+), 12 deletions(-)

diff --git a/pages/profile/_slug.vue b/pages/profile/_slug.vue
index c917c335a..c8b7139c2 100644
--- a/pages/profile/_slug.vue
+++ b/pages/profile/_slug.vue
@@ -243,16 +243,26 @@
               </ds-flex>
             </ds-card>
           </ds-flex-item>
-          <ds-flex-item
-            v-for="post in uniq(user.contributions.filter(post => !post.deleted))"
-            :key="post.id"
-            :width="{ base: '100%', md: '100%', xl: '50%' }"
-          >
-            <hc-post-card
-              :post="post"
-              :show-author-popover="false"
-            />
-          </ds-flex-item>
+          <template v-if="activePosts.length">
+            <ds-flex-item
+              v-for="post in activePosts"
+              :key="post.id"
+              :width="{ base: '100%', md: '100%', xl: '50%' }"
+            >
+              <hc-post-card
+                :post="post"
+                :show-author-popover="false"
+              />
+            </ds-flex-item>
+          </template>
+          <template v-else>
+            <ds-flex-item :width="{ base: '100%' }">
+              <hc-empty
+                margin="xx-large"
+                icon="file"
+              />
+            </ds-flex-item>
+          </template>
         </ds-flex>
         <hc-load-more
           v-if="hasMore"
@@ -273,6 +283,7 @@ import HcFollowButton from '~/components/FollowButton.vue'
 import HcCountTo from '~/components/CountTo.vue'
 import HcBadges from '~/components/Badges.vue'
 import HcLoadMore from '~/components/LoadMore.vue'
+import HcEmpty from '~/components/Empty.vue'
 
 export default {
   components: {
@@ -281,7 +292,8 @@ export default {
     HcFollowButton,
     HcCountTo,
     HcBadges,
-    HcLoadMore
+    HcLoadMore,
+    HcEmpty
   },
   transition: {
     name: 'slide-up',
@@ -318,6 +330,12 @@ export default {
         this.user.contributions &&
         this.user.contributions.length < this.user.contributionsCount
       )
+    },
+    activePosts() {
+      if (!this.user.contributions) {
+        return []
+      }
+      return this.uniq(this.user.contributions.filter(post => !post.deleted))
     }
   },
   watch: {
@@ -387,7 +405,7 @@ export default {
 .profile-top-navigation {
   position: sticky;
   top: 53px;
-  z-index: 1;
+  z-index: 2;
 }
 
 .ds-tab-nav {

From 1e51c44a620e635083df58e3a7beb447e31fd21e Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 18 Jan 2019 15:23:33 +0100
Subject: [PATCH 6/9] Added unique class name to body tag based on page name

---
 components/mixins/seo.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/components/mixins/seo.js b/components/mixins/seo.js
index d0c232baf..72789a538 100644
--- a/components/mixins/seo.js
+++ b/components/mixins/seo.js
@@ -3,6 +3,10 @@ export default {
     return {
       htmlAttrs: {
         lang: this.$i18n.locale()
+      },
+      bodyAttrs: {
+        class: `page-name-${this.$route.name}`
+      }
       }
     }
   }

From b6b77a18a5f98b0fe9d1e5c27ff5c859930e2aad Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 18 Jan 2019 15:23:33 +0100
Subject: [PATCH 7/9] Added unique class name to body tag based on page name

---
 components/mixins/seo.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/components/mixins/seo.js b/components/mixins/seo.js
index d0c232baf..72789a538 100644
--- a/components/mixins/seo.js
+++ b/components/mixins/seo.js
@@ -3,6 +3,10 @@ export default {
     return {
       htmlAttrs: {
         lang: this.$i18n.locale()
+      },
+      bodyAttrs: {
+        class: `page-name-${this.$route.name}`
+      }
       }
     }
   }

From ab5a2e6efcaa3ccebcfe9e33fb1dc9c2996abdd4 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 18 Jan 2019 15:39:11 +0100
Subject: [PATCH 8/9] Fixed an issue in seo mixin

---
 components/mixins/seo.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/mixins/seo.js b/components/mixins/seo.js
index 72789a538..de641e677 100644
--- a/components/mixins/seo.js
+++ b/components/mixins/seo.js
@@ -7,7 +7,6 @@ export default {
       bodyAttrs: {
         class: `page-name-${this.$route.name}`
       }
-      }
     }
   }
 }

From 981c9b3c927cc064998d06df734765957c7461ef Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 18 Jan 2019 15:40:24 +0100
Subject: [PATCH 9/9] Fixed empty related post handling

---
 pages/post/_slug/more-info.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/pages/post/_slug/more-info.vue b/pages/post/_slug/more-info.vue
index 95108d522..05135b891 100644
--- a/pages/post/_slug/more-info.vue
+++ b/pages/post/_slug/more-info.vue
@@ -44,6 +44,7 @@
         </ds-flex-item>
       </ds-flex>
       <hc-empty
+        v-else
         margin="large"
         icon="file"
         message="No related Posts"