Skip to content

Commit 026a5f0

Browse files
juliusknorrjuliusknorr
committed
Add Tooltip directive
Signed-off-by: Julius Härtl <jus@bitgrid.net>
1 parent e27609d commit 026a5f0

File tree

7 files changed

+177
-4
lines changed

7 files changed

+177
-4
lines changed

‎src/components/Avatar/Avatar.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
4040
/* global OC oc_userconfig */
4141
42-
import { VTooltip } from 'v-tooltip'
42+
import Tooltip from 'Directives/Tooltip'
4343
import { PopoverMenu } from 'Components/PopoverMenu'
4444
import ClickOutside from 'vue-click-outside'
4545
import axios from 'nextcloud-axios'
@@ -48,7 +48,7 @@ import uidToColor from './uidToColor'
4848
export default {
4949
name: 'Avatar',
5050
directives: {
51-
tooltip: VTooltip,
51+
tooltip: Tooltip,
5252
ClickOutside: ClickOutside
5353
},
5454
components: {

‎src/components/Multiselect/Multiselect.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@
7979

8080
<script>
8181
import VueMultiselect from 'vue-multiselect'
82-
import { VTooltip } from 'v-tooltip'
82+
import Tooltip from 'Directives/Tooltip'
8383
import AvatarSelectOption from './AvatarSelectOption'
8484
8585
export default {
@@ -89,7 +89,7 @@ export default {
8989
AvatarSelectOption
9090
},
9191
directives: {
92-
tooltip: VTooltip
92+
tooltip: Tooltip
9393
},
9494
inheritAttrs: false,
9595
/**

‎src/directives/Tooltip/index.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { VTooltip } from 'v-tooltip'
2+
import './index.scss'
3+
4+
VTooltip.options.defaultClass = `v-${SCOPE_VERSION}`
5+
6+
export default VTooltip

‎src/directives/Tooltip/index.scss‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
/**
2+
* @copyright Copyright (c) 2016, John Molakvoæ <skjnldsv@protonmail.com>
3+
* @copyright Copyright (c) 2016, Robin Appelman <robin@icewind.nl>
4+
* @copyright Copyright (c) 2016, Jan-Christoph Borchardt <hey@jancborchardt.net>
5+
* @copyright Copyright (c) 2016, Erik Pellikka <erik@pellikka.org>
6+
* @copyright Copyright (c) 2015, Vincent Petry <pvince81@owncloud.com>
7+
*
8+
* Bootstrap v3.3.5 (http://getbootstrap.com)
9+
* Copyright 2011-2015 Twitter, Inc.
10+
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
11+
*/
12+
13+
.v-#{$scope_version}.tooltip {
14+
position: absolute;
15+
display: block;
16+
font-family: 'Nunito', 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif;
17+
font-style: normal;
18+
font-weight: normal;
19+
letter-spacing: normal;
20+
line-break: auto;
21+
line-height: 1.6;
22+
text-align: left;
23+
text-align: start;
24+
text-decoration: none;
25+
text-shadow: none;
26+
text-transform: none;
27+
white-space: normal;
28+
word-break: normal;
29+
word-spacing: normal;
30+
word-wrap: normal;
31+
font-size: 12px;
32+
opacity: 0;
33+
z-index: 100000;
34+
/* default to top */
35+
margin-top: -3px;
36+
padding: 10px 0;
37+
filter: drop-shadow(0 1px 10px var(--color-box-shadow));
38+
&.in,
39+
&.tooltip[aria-hidden='false'] {
40+
visibility: visible;
41+
opacity: 1;
42+
transition: opacity .15s;
43+
}
44+
&.top .tooltip-arrow,
45+
&[x-placement^='top'] {
46+
left: 50%;
47+
margin-left: -10px;
48+
}
49+
&.bottom,
50+
&[x-placement^='bottom'] {
51+
margin-top: 3px;
52+
padding: 10px 0;
53+
}
54+
&.right,
55+
&[x-placement^='right'] {
56+
margin-left: 3px;
57+
padding: 0 10px;
58+
.tooltip-arrow {
59+
top: 50%;
60+
left: 0;
61+
margin-top: -10px;
62+
border-width: 10px 10px 10px 0;
63+
border-right-color: var(--color-main-background);
64+
}
65+
}
66+
&.left,
67+
&[x-placement^='left'] {
68+
margin-left: -3px;
69+
padding: 0 5px;
70+
.tooltip-arrow {
71+
top: 50%;
72+
right: 0;
73+
margin-top: -10px;
74+
border-width: 10px 0 10px 10px;
75+
border-left-color: var(--color-main-background);
76+
}
77+
}
78+
/* TOP */
79+
&.top,
80+
&.top-left,
81+
&[x-placement^='top'],
82+
&.top-right {
83+
.tooltip-arrow {
84+
bottom: 0;
85+
border-width: 10px 10px 0;
86+
border-top-color: var(--color-main-background);
87+
}
88+
}
89+
&.top-left .tooltip-arrow {
90+
right: 10px;
91+
margin-bottom: -10px;
92+
}
93+
&.top-right .tooltip-arrow {
94+
left: 10px;
95+
margin-bottom: -10px;
96+
}
97+
/* BOTTOM */
98+
&.bottom,
99+
&[x-placement^='bottom'],
100+
&.bottom-left,
101+
&.bottom-right {
102+
.tooltip-arrow {
103+
top: 0;
104+
border-width: 0 10px 10px;
105+
border-bottom-color: var(--color-main-background);
106+
}
107+
}
108+
&[x-placement^='bottom'] .tooltip-arrow,
109+
&.bottom .tooltip-arrow {
110+
left: 50%;
111+
margin-left: -10px;
112+
}
113+
&.bottom-left .tooltip-arrow {
114+
right: 10px;
115+
margin-top: -10px;
116+
}
117+
&.bottom-right .tooltip-arrow {
118+
left: 10px;
119+
margin-top: -10px;
120+
}
121+
}
122+
123+
.v-#{$scope_version}.tooltip-inner {
124+
max-width: 350px;
125+
padding: 5px 8px;
126+
background-color: var(--color-main-background);
127+
color: var(--color-main-text);
128+
text-align: center;
129+
border-radius: var(--border-radius);
130+
}
131+
132+
.v-#{$scope_version}.tooltip-arrow {
133+
position: absolute;
134+
width: 0;
135+
height: 0;
136+
border-color: transparent;
137+
border-style: solid;
138+
}

‎src/directives/index.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/**
2+
* @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
3+
*
4+
* @author John Molakvoæ <skjnldsv@protonmail.com>
5+
*
6+
* @license GNU AGPL version 3 or any later version
7+
*
8+
* This program is free software: you can redistribute it and/or modify
9+
* it under the terms of the GNU Affero General Public License as
10+
* published by the Free Software Foundation, either version 3 of the
11+
* License, or (at your option) any later version.
12+
*
13+
* This program is distributed in the hope that it will be useful,
14+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
15+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
16+
* GNU Affero General Public License for more details.
17+
*
18+
* You should have received a copy of the GNU Affero General Public License
19+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
20+
*
21+
*/
22+
23+
import Tooltip from './Tooltip'
24+
25+
export {
26+
Tooltip
27+
}

‎src/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,3 +36,4 @@ export default {
3636
...NcComponents
3737
}
3838
export * from './components'
39+
export * from './directives'

‎webpack.common.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@ module.exports = {
9494
resolve: {
9595
alias: {
9696
Components: path.resolve(__dirname, 'src/components/'),
97+
Directives: path.resolve(__dirname, 'src/directives/'),
9798
Utils: path.resolve(__dirname, 'src/utils/'),
9899
Fonts: path.resolve(__dirname, 'src/fonts/')
99100
},

0 commit comments

Comments
 (0)