Skip to content

Commit 80f0bf3

Browse files
ALPIXELMaikiALPIXELMaiki
committed
W with Tippyjs for tooltips
1 parent 6905890 commit 80f0bf3

File tree

17 files changed

+315
-222
lines changed

17 files changed

+315
-222
lines changed

‎dist/build.js

Lines changed: 6 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/build.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/tippy.js

Lines changed: 25 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99

1010

1111
<!-- Tippy.js -->
12-
<script src="node_modules/tippy.js/dist/tippy.js"></script>
12+
<script src="dist/tippy.js"></script>
1313

1414
<!-- Tinymce -->
1515
<script src="//cloud.tinymce.com/stable/tinymce.min.js"></script>

‎package.json

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"karma-cli": "^1.0.1",
1616
"lodash": "^4.17.4",
1717
"tinymce": "^4.5.6",
18-
"vue": "^2.2",
18+
"vue": "^2.2.6",
1919
"vue-template-compiler": "^2.2.6",
2020
"vuex": "^2.3.0",
2121
"webpack": "^2.3.2",
@@ -55,15 +55,14 @@
5555
"phantomjs-prebuilt": "^2.1.14",
5656
"postcss-loader": "^1.3.3",
5757
"style-loader": "^0.13.1",
58-
"tippy.js": "^0.3.5",
58+
"tippy.js": "^0.4.0",
5959
"vue-axios": "^1.2.2",
6060
"vue-cookie": "^1.1.3",
6161
"vue-flatpickr": "^2.3.0",
6262
"vue-head": "^2.0.10",
6363
"vue-highcharts": "0.0.9",
6464
"vue-loader": "^10.0.0",
6565
"vue-router": "^2.2.1",
66-
"vue-template-compiler": "^2.2",
6766
"vue-ua": "^1.3.0",
6867
"vuelidate": "^0.4"
6968
}

‎src/js/App.vue

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -72,10 +72,6 @@
7272
</li>
7373
</ul>
7474
</li>
75-
76-
<li class="last">
77-
<a href="" @click.prevent="$store.dispatch('switchTooltips')">Help ? (show tooltips)</a>
78-
</li>
7975
</ul>
8076
</div>
8177
</nav>

‎src/js/components/header.vue

Lines changed: 56 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,33 @@
2323
</div>
2424

2525
<div class="cc-w-auto">
26-
<a href="javascript:void(0)" @click.prevent="logout" class="logout" title="Logout">
27-
<i class="ion-ios-unlocked-outline"></i>
28-
</a>
26+
<div class="header-icon">
27+
<a href="javascript:void(0);" @click.prevent="openSettingsPanel" @mouseenter="isHoverSettings = true" @mouseleave="delayClosePanel">
28+
<i class="ion-ios-gear-outline"></i>
29+
</a>
30+
31+
<ul class="dropdown" :class="{shown:showSettings}" @mouseenter="isHoverSettings = true" @mouseleave="delayClosePanel">
32+
<li class="cc-clearfix">
33+
<a href="javascript:void(0)" @click.prevent="closeSettingsPanel" class="cc-red">
34+
<i class="ion-close-round"></i>
35+
</a>
36+
37+
<p>
38+
Settings
39+
</p>
40+
</li>
41+
<li>
42+
<a href="javascript:void(0);" @click.prevent="$store.dispatch('switchTooltips'), closeSettingsPanel()">
43+
<i class="ion-ios-help-outline"></i> {{getTooltipMsg}}
44+
</a>
45+
</li>
46+
<li>
47+
<a href="javascript:void(0);" @click.prevent="logout">
48+
<i class="ion-ios-unlocked-outline"></i> Logout
49+
</a>
50+
</li>
51+
</ul>
52+
</div>
2953
</div>
3054
</div>
3155
</div>
@@ -40,18 +64,45 @@
4064
name: 'header',
4165
data() {
4266
return {
43-
67+
showSettings : false,
68+
isHoverSettings: false
4469
}
4570
},
4671
props: {
4772
'loggedUser': {
4873
type: Object
4974
}
5075
},
76+
computed: {
77+
getTooltipMsg() {
78+
return (store.state.showTooltips == true) ? 'Hide Tooltips' : 'Show Tooltips'
79+
}
80+
},
5181
methods: {
5282
logout() {
5383
this.$emit('logout')
54-
}
84+
},
85+
86+
// Open Settings panel
87+
openSettingsPanel() {
88+
this.showSettings = !this.showSettings
89+
},
90+
91+
// Close Settings panel
92+
closeSettingsPanel() {
93+
this.showSettings = false
94+
},
95+
96+
delayClosePanel() {
97+
let that = this
98+
99+
that.isHoverSettings = false
100+
101+
_.delay(function() {
102+
if (!that.isHoverSettings)
103+
that.closeSettingsPanel()
104+
}, 450)
105+
},
55106
},
56107
components: {
57108
notifications

‎src/js/components/notifications.vue

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<template>
2-
<div class="user-notif">
2+
<div class="header-icon">
33

4-
<a href="javascript:void(0)" class="notifications" @click.prevent="openNotifsPanel">
4+
<a href="javascript:void(0)" @click.prevent="openNotifsPanel" @mouseenter="isHoverNotifs = true" @mouseleave="delayClosePanel">
55
<span v-if="nbNotif > 0">
66
{{nbNotifString}}
77
</span>
88

99
<i class="ion-ios-bell-outline" :class="{'shake': nbNotif > 0 && !showNotifs}"></i>
1010
</a>
1111

12-
<ul class="notifs-dropdown" :class="{shown:showNotifs}" @mouseenter="isHoverNotifs = true" @mouseleave="delayClosePanel">
12+
<ul class="dropdown" :class="{shown:showNotifs}" @mouseenter="isHoverNotifs = true" @mouseleave="delayClosePanel">
1313
<li class="cc-clearfix">
1414
<a href="javascript:void(0)" @click.prevent="closeNotifsPanel" class="cc-red">
1515
<i class="ion-close-round"></i>
@@ -47,7 +47,7 @@
4747
</li>
4848

4949
<li class="cc-txt-center" v-if="nbNotif > 0">
50-
<a href="javascript:void(0)" class="btn cc-thin cc-bg-red" @click.prevent="deleteAll">
50+
<a href="javascript:void(0)" class="btn cc-thin cc-bg-red delete-all" @click.prevent="deleteAll">
5151
Delete all
5252
</a>
5353
</li>
@@ -66,7 +66,7 @@
6666
</template>
6767

6868
<script>
69-
import { EventBus } from './bus.js'
69+
// import { EventBus } from './bus.js'
7070
7171
export default {
7272
name: 'notifications',

‎src/js/directives/tippyjs.vue

Lines changed: 0 additions & 92 deletions
This file was deleted.

0 commit comments

Comments
 (0)