UserTools.vue 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. <template lang="html">
  2. <div id="user-tools">
  3. <!-- <h4
  4. > -->
  5. <a class="mdi mdi-account" href="/user">
  6. <span>{{ mail }}</span>
  7. </a>
  8. <!-- </h4> -->
  9. <a href="/admin/content/materials"
  10. v-if="isAdmin"
  11. class="mdi mdi-settings"
  12. title="admin"
  13. ></a>
  14. <a href="/user/logout"
  15. @click.prevent="onLogout()"
  16. class="mdi mdi-logout"
  17. title="logout"
  18. ></a>
  19. <UserFlags/>
  20. </div>
  21. </template>
  22. <script>
  23. import { mapState, mapActions } from 'vuex'
  24. import UserFlags from 'vuejs/components/User/UserFlags'
  25. export default {
  26. components: {
  27. UserFlags
  28. },
  29. // data () {
  30. // return {
  31. // mail: "Hello User!"
  32. // }
  33. // },
  34. computed: {
  35. ...mapState({
  36. mail: state => state.User.mail,
  37. isAdmin: state => state.User.isAdmin,
  38. flags: state => state.User.flags
  39. })
  40. },
  41. methods: {
  42. ...mapActions({
  43. userLogout: 'User/userLogout'
  44. }),
  45. onLogout () {
  46. console.log('UserTools onLogout')
  47. this.userLogout()
  48. }
  49. }
  50. }
  51. </script>
  52. <style lang="css" scoped>
  53. #user-tools{
  54. margin-right:0.2em;
  55. /* padding-right:0.5em; */
  56. /* border-right:1px solid #222; */
  57. }
  58. h4{
  59. margin:0;
  60. display:inline-block;
  61. font-size:inherited;
  62. vertical-align: top;
  63. }
  64. </style>