removed moment lib, added readme for RelativeDateTime & moved it to subdirectory

webapp/components/RelativeDateTime/Readme.md

@@ -0,0 +1,7 @@
+### Example
+
+Relative time from 08.03.2017
+
+```
+<hc-relative-date-time dateTime="03.08.2017" />
+```

webapp/components/RelativeDateTime/index.vue

@@ -3,8 +3,6 @@
 </template>
 
 <script>
-import moment from 'moment'
-
 export default {
   name: 'HcRelativeDateTime',
   props: {
@@ -21,11 +19,6 @@ export default {
       absoluteTime: null
     }
   },
-  computed: {
-    locale() {
-      return this.$i18n.locale() || 'en'
-    }
-  },
   watch: {
     locale() {
       this.calcRelativeDateTime()
@@ -45,17 +38,18 @@ export default {
   },
   methods: {
     calcRelativeDateTime() {
+      // Reset Timer
       clearTimeout(this.timeout)
-      let t = moment(this.dateTime).locale(this.locale)
-      this.absoluteTime = t.format('llll')
 
-      this.relativeDateTime = t.utc().fromNow()
+      // Calculate Relative Date
+      this.relativeDateTime = this.$filters.relativeDateTime(this.dateTime)
 
       if (!process.browser) {
         return
       }
 
-      if (
+      // TODO It is unclear what exactly this does and how to archive it
+      /*if (
         this.relativeDateTime ===
         t
           .add(this.interval, 'milliseconds')
@@ -63,7 +57,9 @@ export default {
           .fromNow()
       ) {
         this.interval += 15000
-      }
+      }*/
+
+      // Recalculate Timer
       this.timeout = setTimeout(() => {
         this.calcRelativeDateTime()
       }, this.interval)

webapp/components/User.vue

@@ -3,36 +3,16 @@
     <div
       style="display: inline-block; float: left; margin-right: 4px;  height: 100%; vertical-align: middle;"
     >
-      <ds-avatar
+      <ds-avatar style="display: inline-block; vertical-align: middle;" size="32px"/>
-        style="display: inline-block; vertical-align: middle;"
-        size="32px"
-      />
     </div>
     <div style="display: inline-block; height: 100%; vertical-align: middle;">
-      <b
+      <b class="username" style="vertical-align: middle;">Anonymus</b>
-        class="username"
-        style="vertical-align: middle;"
-      >Anonymus</b>
     </div>
   </div>
-  <dropdown
+  <dropdown v-else :class="{'disabled-content': user.disabled}" placement="top-start" offset="0">
-    v-else
+    <template slot="default" slot-scope="{openMenu, closeMenu, isOpen}">
-    :class="{'disabled-content': user.disabled}"
+      <nuxt-link :to="userLink" :class="['user', isOpen && 'active']">
-    placement="top-start"
+        <div @mouseover="openMenu(true)" @mouseleave="closeMenu(true)">
-    offset="0"
-  >
-    <template
-      slot="default"
-      slot-scope="{openMenu, closeMenu, isOpen}"
-    >
-      <nuxt-link
-        :to="userLink"
-        :class="['user', isOpen && 'active']"
-      >
-        <div
-          @mouseover="openMenu(true)"
-          @mouseleave="closeMenu(true)"
-        >
           <div
             style="display: inline-block; float: left; margin-right: 4px;  height: 100%; vertical-align: middle;"
           >
@@ -50,17 +30,10 @@
             >{{ user.name | truncate(trunc, 18) }}</b>
           </div>
           <!-- Time -->
-          <div
+          <div v-if="dateTime" style="display: inline;">
-            v-if="dateTime"
+            <ds-text align="right" size="small" color="soft">
-            style="display: inline;"
+              <ds-icon name="clock"/>
-          >
+              <hc-relative-date-time :date-time="dateTime"/>
-            <ds-text
-              align="right"
-              size="small"
-              color="soft"
-            >
-              <ds-icon name="clock" />&nbsp;
-              <hc-relative-date-time :date-time="dateTime" />
             </ds-text>
           </div>
         </div>
@@ -68,10 +41,7 @@
     </template>
     <template slot="popover">
       <div style="min-width: 250px">
-        <hc-badges
+        <hc-badges v-if="user.badges && user.badges.length" :badges="user.badges"/>
-          v-if="user.badges && user.badges.length"
-          :badges="user.badges"
-        />
         <ds-text
           v-if="user.location"
           align="center"
@@ -80,17 +50,13 @@
           style="margin-top: 5px"
           bold
         >
-          <ds-icon name="map-marker" />
+          <ds-icon name="map-marker"/>
           {{ user.location.name }}
         </ds-text>
         <ds-flex style="margin-top: -10px">
           <ds-flex-item class="ds-tab-nav-item">
             <ds-space margin="small">
-              <ds-number
+              <ds-number :count="fanCount" :label="$t('profile.followers')" size="x-large"/>
-                :count="fanCount"
-                :label="$t('profile.followers')"
-                size="x-large"
-              />
             </ds-space>
           </ds-flex-item>
           <ds-flex-item class="ds-tab-nav-item ds-tab-nav-item-active">
@@ -110,11 +76,7 @@
             </ds-space>
           </ds-flex-item>
         </ds-flex>
-        <ds-flex
+        <ds-flex v-if="!itsMe" gutter="x-small" style="margin-bottom: 0;">
-          v-if="!itsMe"
-          gutter="x-small"
-          style="margin-bottom: 0;"
-        >
           <ds-flex-item :width="{base: 3}">
             <hc-follow-button
               :follow-id="user.id"
@@ -125,7 +87,7 @@
           </ds-flex-item>
           <ds-flex-item :width="{base: 1}">
             <ds-button fullwidth>
-              <ds-icon name="user-times" />
+              <ds-icon name="user-times"/>
             </ds-button>
           </ds-flex-item>
         </ds-flex>
@@ -138,7 +100,7 @@
 <script>
 import { mapGetters } from 'vuex'
 
-import HcRelativeDateTime from '~/components/RelativeDateTime.vue'
+import HcRelativeDateTime from '~/components/RelativeDateTime'
 import HcFollowButton from '~/components/FollowButton.vue'
 import HcBadges from '~/components/Badges.vue'
 import Dropdown from '~/components/Dropdown'

webapp/package.json

@@ -47,7 +47,6 @@
     "graphql": "~14.2.1",
     "jsonwebtoken": "~8.5.1",
     "linkify-it": "~2.1.0",
-    "moment": "^2.24.0",
     "nuxt": "~2.4.5",
     "nuxt-env": "~0.1.0",
     "string-hash": "^1.1.3",
@@ -82,4 +81,4 @@
     "vue-jest": "~3.0.4",
     "vue-svg-loader": "~0.12.0"
   }
-}
+}

webapp/yarn.lock

@@ -1368,11 +1368,6 @@
     "@types/express-serve-static-core" "*"
     "@types/mime" "*"
 
-"@types/stack-utils@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
-  integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==
-
 "@types/strip-bom@^3.0.0":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@types/strip-bom/-/strip-bom-3.0.0.tgz#14a8ec3956c2e81edb7520790aecf21c290aebd2"
@@ -7104,11 +7099,6 @@ mkdirp@0.5.1, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkd
   dependencies:
     minimist "0.0.8"
 
-moment@^2.24.0:
-  version "2.24.0"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
-  integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
-
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -9806,11 +9796,6 @@ stack-trace@0.0.10:
   resolved "https://registry.yarnpkg.com/stack-trace/-/stack-trace-0.0.10.tgz#547c70b347e8d32b4e108ea1a2a159e5fdde19c0"
   integrity sha1-VHxws0fo0ytOEI6hoqFZ5f3eGcA=
 
-stack-utils@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-1.0.2.tgz#33eba3897788558bebfc2db059dc158ec36cebb8"
-  integrity sha512-MTX+MeG5U994cazkjd/9KNAapsHnibjMLnfXodlkXw76JEea0UiNzrqidzo1emMwk7w5Qhc9jd4Bn9TBb1MFwA==
-
 stackframe@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.0.4.tgz#357b24a992f9427cba6b545d96a14ed2cbca187b"