Onboarding guide and initial achievements refactoring (#11536)

* add achievements to user * add placeholder strings * add to achievements to common script * add onboarding achievements category * add notifications * more notifications * award achievements * wip notification panel * add achievements icons and copy * do not count onboarding tasks for the created task achievement * add notes * sprites, fixes and completion status and reward * add onboarding panel * add toggle * fix toggle size * fix tests * fix typo * add notification * start adding modal * fix remove button positionin, timeout, progress bar * modal + fixes * disable broken social links from level up modal * change toggle icon color on hover * add border bottom to onboarding guide panel * add collapse animation * expanded onboarding on first open * onboarding: flip toggle colors * onboarding: show progress bar all the time * onboarding: fix panel closing on click * onboarding modal: add close icon and fix padding * wip: add migration for existing users * fix titles in guide * fix achievements copy * do not award completed task achievement when direction is down * start implementing new achievements * start migrating client * remove social links from achievements modals * prevent skipping tutorial + fix achievement notification * sync fixes * start redesign achievement modal * misc fixes to achievements, polish generic achievement modal and hatched pet modal * add special badge for onboarding * fix badge condition * modals fixes * hatched pet modal: add close icon * fix badge typo * fix justin button * new scrolling behavior for dropdowns * fix strings capitalization * add common tests * add api unit tests * add date check * achievements modal polishing * typos * add toggle for achievements categories * typo * fix test * fix edit avatar modal cannot be closed * finish migration and correct launch date * fix migration * migration fixes * fix tests
2025-12-18 07:07:35 +01:00 · 2019-12-16 17:20:47 +01:00
parent a00a8cced8
commit 8f5a0cfe79
108 changed files with 18515 additions and 17229 deletions
--- a/website/client/src/components/header/notifications/onboardingComplete.vue
+++ b/website/client/src/components/header/notifications/onboardingComplete.vue
@@ -0,0 +1,74 @@
+<template>
+  <base-notification
+    :can-remove="canRemove"
+    :has-icon="false"
+    :read-after-click="true"
+    :notification="notification"
+    :has-text="false"
+    @click="action"
+  >
+    <div
+      slot="content"
+      class="d-flex flex-column align-items-center onboarding-complete-content"
+    >
+      <img
+        class="onboarding-complete-banner d-block"
+        src="~@/assets/images/onboarding-complete-banner@2x.png"
+      >
+      <h3>{{ $t('congratulations') }}</h3>
+      <p
+        class="onboarding-complete-text"
+        v-html="$t('onboardingCompleteDesc')"
+      ></p>
+      <div class="notifications-buttons">
+        <div
+          class="btn btn-small btn-primary btn-block"
+        >
+          {{ $t('viewAchievements') }}
+        </div>
+      </div>
+    </div>
+  </base-notification>
+</template>
+
+<style lang="scss" scoped>
+@import '~@/assets/scss/colors.scss';
+
+.onboarding-complete-content {
+  text-align: center;
+}
+
+.onboarding-complete-banner {
+  width: 282px;
+  margin-top: 12px;
+  margin-bottom: 12px;
+}
+
+.onboarding-complete-text {
+  margin-bottom: 4px;
+}
+
+.onboarding-complete-text ::v-deep .gold-amount {
+  color: $yellow-5;
+}
+
+.notifications-buttons {
+  width: 100%;
+}
+</style>
+
+<script>
+import BaseNotification from './base';
+
+export default {
+  components: {
+    BaseNotification,
+  },
+  props: ['notification', 'canRemove'],
+  methods: {
+    action () {
+      this.$router.push({ name: 'achievements' });
+    },
+  },
+};
+</script>