webtrit_dialer/src/components/Home-Contacts/ContactsAppBar.vue at 89a7d2eb903dca648adeea2f1844efc54e2117e7 · WebTrit/webtrit_dialer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<template>
  <PanelAppBar
    class="home__appbar"
    :title="(!$_breakpoints_mobile)? $t('menu.contacts') : ''"
    :appbar-extended="true"
    :has-tabs="true"
  >
    <template #tabs>
      <v-tab
        class="panel__tab"
        :ripple="false"
        @click.native="filter('filter-all')"
      >
        {{ $t('menu.all') }}
      </v-tab>
      <v-tab
        class="panel__tab"
        :ripple="false"
        @click.native="filter('filter-favorites')"
      >
        {{ $t('menu.favorites') }}
      </v-tab>
    </template>
    <template #search>
      <v-text-field
        v-model="search"
        color="secondary"
        outlined
        dense
        clearable
        flat
        hide-details
        prepend-inner-icon="$search"
        :placeholder="$t('placeholder.name_or_number')"
      />
      <v-btn
        class="elevation-0"
        :class="[$_breakpoints_mobile?
          'contacts__keypad--mobile': 'contacts__keypad']"
        fab
        dark
        width="46"
        height="46"
        color="accent"
        @click="openKeypad()"
        @mouseup="$event.target.closest('button').blur()"
      >
        <v-icon dark>
          $call-keypad
        </v-icon>
      </v-btn>
    </template>
  </PanelAppBar>
</template>

<script>
import { breakpoints } from '@/mixins'
import PanelAppBar from '@/components/Layout/PanelAppBar.vue'

export default {
  components: {
    PanelAppBar,
  },
  mixins: [breakpoints],
  data: () => ({
    search: '',
  }),
  methods: {
    openKeypad() {
      this.$store.commit('toggleDialogNumberVisibility', true)
    },
    filter(event) {
      this.$emit(event)
      if (this.$route.name !== 'Home') {
        this.$router.push({ name: 'Home' })
      }
    },
  },
  watch: {
    search(val) {
      this.$emit('search-update', val && val.trim())
    },
  },
}
</script>

<style scoped lang="scss">

.contacts__keypad {
  @apply ml-4;
}

.contacts__keypad--mobile {
  right: 20px;
  bottom: 15%;

  @apply fixed;
}

@media screen and (max-width: 960px) {
  .home__appbar {
    @apply mb-0;

    ::v-deep .v-toolbar__content {
      @apply order-2;
    }

    ::v-deep .v-toolbar__extension {
      @apply order-1;
    }
  }
}
</style>