kadet/czydojade
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Tooltip component now not responsible (but mobile friendly) & tooltips

Browse Source
This commit is contained in:
Kacper Donat 2020-01-27 22:53:22 +01:00
parent ce8c8f97ec
commit f9c289aacd
9 changed files with 41 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -46,6 +46,7 @@
"mini-css-extract-plugin": "^0.4.2",
"portal-vue": "^2.1.7",
"vue-dragscroll": "^1.10.2",
"vue-removed-hook-mixin": "^0.1.1",
"vue2-leaflet": "^1.0.2",
"vuex": "^3.0.1",
"vuex-class": "^0.3.1",

3
resources/components/departures/departure.html
View File

@ -29,7 +29,8 @@
<div class="stop__actions flex-space-left">
<button class="btn btn-action" @click="showTrip = !showTrip">
<fa :icon="['far', 'code-commit']" rotation="90" />
<tooltip placement="top">pokaż/ukryj trasę</tooltip>
<fa :icon="['far', 'code-commit']" />
</button>
</div>
</div>

1
resources/components/favourites.html
View File

@ -13,6 +13,7 @@
</div>
</button>
<button class="btn btn-action" @click="remove(favourite)">
<tooltip placement="left">usuń</tooltip>
<fa :icon="['fal', 'trash-alt']"></fa>
</button>
</li>

8
resources/components/tooltip.html
View File

@ -1,5 +1,7 @@
<portal to="popups">
<popper class="popper--tooltip" arrow :reference="element" :placement="placement" v-if="show">
<slot />
</popper>
<transition name="fade">
<popper class="popper--tooltip" arrow :reference="element" :placement="placement" v-if="show" :responsive="false">
<slot />
</popper>
</transition>
</portal>

2
resources/styles/_animations.scss
View File

@ -14,7 +14,7 @@
}
}
@include vue-animation(fade, 250ms ease-in-out) {
@include vue-animation(fade, 150ms ease-in-out) {
0% {
opacity: 0
}

13
resources/ts/components/tooltip.ts
View File

@ -5,14 +5,23 @@ import { Prop } from "vue-property-decorator";
@Component({ template: require('../../components/tooltip.html') })
export class TooltipComponent extends Vue {
@Prop({ type: String, default: "auto" }) public placement: string;
@Prop({ type: Number, default: 100 }) public delay: number;
public show: boolean = false;
public element: Element = null;
private _events: { [event: string]: any };
private _timeout: number;
mounted() {
this.$el.parentElement.addEventListener('mouseenter', this._events['mouseenter'] = () => this.show = true);
this.$el.parentElement.addEventListener('mouseleave', this._events['mouseleave'] = () => this.show = false);
this.$el.parentElement.addEventListener('mouseenter', this._events['mouseenter'] = () => {
this._timeout = window.setTimeout(() => { this.show = true }, this.delay);
});
this.$el.parentElement.addEventListener('mouseleave', this._events['mouseleave'] = () => {
window.clearTimeout(this._timeout);
this.show = false
});
this.element = this.$el.parentElement;
}

16
resources/ts/components/utils.ts
View File

@ -2,9 +2,11 @@ import Vue from 'vue';
import { Component, Prop, Watch } from "vue-property-decorator";
import Popper, { Placement } from "popper.js";
import { Portal } from "portal-vue";
import vueRemovedHookMixin from "vue-removed-hook-mixin";
@Component({
template: require("../../components/popper.html")
template: require("../../components/popper.html"),
mixins: [ vueRemovedHookMixin ]
})
export class PopperComponent extends Vue {
@Prop([ String, HTMLElement ])
@ -19,6 +21,9 @@ export class PopperComponent extends Vue {
@Prop(Boolean)
public arrow: boolean;
@Prop({ type: Boolean, default: true })
public responsive: boolean;
private _event;
private _popper;
@ -60,11 +65,11 @@ export class PopperComponent extends Vue {
modifiers: {
arrow: { enabled: this.arrow, element: this.$refs['arrow'] as Element },
responsive: {
enabled: true,
enabled: this.responsive,
order: 890,
fn(data) {
if (window.innerWidth < 560) {
data.instance.options.placement = 'bottom';
data.instance.options.placement = 'top';
data.styles.transform = `translate3d(0, ${data.offsets.popper.top}px, 0)`;
data.styles.right = '0';
data.styles.left = '0';
@ -95,9 +100,12 @@ export class PopperComponent extends Vue {
}
beforeDestroy() {
this._popper.destroy();
this._event && document.removeEventListener('click', this._event, { capture: true });
}
removed() {
this._popper.destroy();
}
}
@Component({ template: require('../../components/fold.html') })

3
templates/app.html.twig
View File

@ -86,6 +86,7 @@
<span class="text">Przystanki</span>
</h2>
<button class="btn btn-action flex-space-left" @click="clear">
<tooltip placement="top">usuń wszystkie</tooltip>
<fa :icon="['fal', 'trash-alt']" fixed-width></fa>
</button>
</header>
@ -118,6 +119,7 @@
Wybierz przystanki
</h2>
<button class="btn btn-action" @click="visibility.picker = 'favourites'">
<tooltip placement="top">Zapisane</tooltip>
<fa :icon="['fal', 'star']" fixed-witdth></fa>
</button>
</template>
@ -127,6 +129,7 @@
Zapisane
</h2>
<button class="btn btn-action" @click="visibility.picker = 'search'">
<tooltip placement="top">Wybierz przystanki</tooltip>
<fa :icon="['fal', 'search']" fixed-witdth></fa>
</button>
</template>

5
yarn.lock
View File

@ -6460,6 +6460,11 @@ vue-property-decorator@^7.0.0:
dependencies:
vue-class-component "^6.2.0"
vue-removed-hook-mixin@^0.1.1:
version "0.1.1"
resolved "https://registry.yarnpkg.com/vue-removed-hook-mixin/-/vue-removed-hook-mixin-0.1.1.tgz#df2e939c87d8ecf1707f0b3b3a21def81dedbaf5"
integrity sha512-ElO0fn1QT25S7WVHUS7rSug7qBHwR/OPxBTdaH2+DdMz0A/lyw3H40c/Q08k2xvndmx7tAglsevcTk2DgKPsvw==
vue2-leaflet@^1.0.2:
version "1.2.3"
resolved "https://registry.yarnpkg.com/vue2-leaflet/-/vue2-leaflet-1.2.3.tgz#00ddeb9db4fb9a5e3b8f9c09cd97a4734366415e"