Tasks v2 Part 2 (#9236)

* start updating colors for tasks controls * finish updating controls colors * change hoevr behavior * change transition duration * update color with transition * refactor menu wip * wip * upgrade vue deps * fix warnings * fix menu * misc fixes * more fixes * fix badge * fix margins in menu * wip tooltips * tooltips * fix checklist colors * add badges * fix quick add input * add transition to task controls too * add batch add * fix task filtering * finish tasks badges * fix menu * upgrade deps * fix shop items using all the same image * fix animation * disable client tests until we remove phantomjs * revert changes to tasks colors * fix opacity in task modal inputs * remove client unit tests from travis * wip task dropdown * fix z-index for task footer/header * fixes and add files * fixes * bigger clickable area * more space to open task dropdown * droddown position * fix menu position * make sure other dropdowns get closed correctly * fixes * start to fix z-index * draggable = false for task dropdown * fix for dropdown position * implement move to top / bottom * fix push to bottom * typo * fix drag and drop * use standard code * wider click area for dropdown * unify badge look * fix padding * misc fixes * more fixes * make dropdown scrollable * misc fixes * fix padding for notes * use existing code instead of new props
2025-12-17 14:47:53 +01:00 · 2017-11-02 21:07:38 +01:00
parent 0e958fd306
commit a208ba4aba
38 changed files with 2186 additions and 924 deletions
--- a/website/client/components/header/userDropdown.vue
+++ b/website/client/components/header/userDropdown.vue
@@ -0,0 +1,126 @@
+<template lang="pug">
+menu-dropdown.item-user(:right="true")
+  div(slot="dropdown-toggle")
+    div(v-b-tooltip.hover.bottom="$t('user')")
+      message-count(v-if='user.inbox.newMessages > 0', :count="user.inbox.newMessages", :top="true")
+      .svg-icon.user(v-html="icons.user")
+  .user-dropdown(slot="dropdown-content")
+    a.dropdown-item.edit-avatar.dropdown-separated(@click='showAvatar()')
+      h3 {{ user.profile.name }}
+      span.small-text {{ $t('editAvatar') }}
+    a.nav-link.dropdown-item.dropdown-separated(@click.prevent='showInbox()')
+      | {{ $t('messages') }}
+      message-count(v-if='user.inbox.newMessages > 0', :count="user.inbox.newMessages")
+    a.dropdown-item(@click='showAvatar("backgrounds", "2017")') {{ $t('backgrounds') }}
+    a.dropdown-item(@click='showProfile("stats")') {{ $t('stats') }}
+    a.dropdown-item(@click='showProfile("achievements")') {{ $t('achievements') }}
+    a.dropdown-item.dropdown-separated(@click='showProfile("profile")') {{ $t('profile') }}
+    router-link.dropdown-item(:to="{name: 'site'}") {{ $t('settings') }}
+    router-link.dropdown-item.dropdown-separated(:to="{name: 'subscription'}") {{ $t('subscription') }}
+    a.nav-link.dropdown-item.dropdown-separated(@click.prevent='logout()') {{ $t('logout') }}
+    li(v-if='!this.user.purchased.plan.customerId', @click='showBuyGemsModal("subscribe")')
+      .dropdown-item.text-center
+        h3.purple {{ $t('needMoreGems') }}
+        span.small-text {{ $t('needMoreGemsInfo') }}
+      img.float-left.align-self-end(src='~assets/images/gem-rain.png')
+      button.btn.btn-primary.btn-lg.learn-button Learn More
+      img.float-right.align-self-end(src='~assets/images/gold-rain.png')
+</template>
+
+<style lang='scss' scoped>
+@import '~client/assets/scss/colors.scss';
+
+.edit-avatar {
+  h3 {
+    color: $gray-10;
+    margin-bottom: 0px;
+  }
+
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+
+.user-dropdown {
+  width: 14.75em;
+}
+
+.learn-button {
+  margin: 0.75em 0.75em 0.75em 1em;
+}
+
+.purple {
+  color: $purple-200;
+}
+
+.small-text {
+  color: $gray-200;
+  font-style: normal;
+  display: block;
+  white-space: normal;
+  font-weight: bold;
+}
+</style>
+
+<script>
+import { mapState } from 'client/libs/store';
+import * as Analytics from 'client/libs/analytics';
+import userIcon from 'assets/svg/user.svg';
+import MenuDropdown from '../ui/customMenuDropdown';
+import axios from 'axios';
+import markPMSRead from 'common/script/ops/markPMSRead';
+import MessageCount from './messageCount';
+import bTooltip from 'bootstrap-vue/lib/directives/tooltip';
+
+export default {
+  components: {
+    MenuDropdown,
+    MessageCount,
+  },
+  directives: {
+    bTooltip,
+  },
+  data () {
+    return {
+      icons: Object.freeze({
+        user: userIcon,
+      }),
+    };
+  },
+  computed: {
+    ...mapState({user: 'user.data'}),
+  },
+  methods: {
+    showAvatar (startingPage, subpage) {
+      this.$store.state.avatarEditorOptions.editingUser = true;
+      this.$store.state.avatarEditorOptions.startingPage = startingPage;
+      this.$store.state.avatarEditorOptions.subpage = subpage;
+      this.$root.$emit('show::modal', 'avatar-modal');
+    },
+    showInbox () {
+      markPMSRead(this.user);
+      axios.post('/api/v3/user/mark-pms-read');
+      this.$root.$emit('show::modal', 'inbox-modal');
+    },
+    showProfile (startingPage) {
+      this.$store.state.profileUser = this.user;
+      this.$store.state.profileOptions.startingPage = startingPage;
+      this.$root.$emit('show::modal', 'profile');
+    },
+    showBuyGemsModal (startingPage) {
+      this.$store.state.gemModalOptions.startingPage = startingPage;
+
+      Analytics.track({
+        hitType: 'event',
+        eventCategory: 'button',
+        eventAction: 'click',
+        eventLabel: 'Gems > User Dropdown',
+      });
+
+      this.$root.$emit('show::modal', 'buy-gems', {alreadyTracked: true});
+    },
+    logout () {
+      this.$store.dispatch('auth:logout');
+    },
+  },
+};
+</script>