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

Add tooltips to every icon only action

Browse Source
This commit is contained in:
Kacper Donat 2020-01-28 22:19:59 +01:00
parent 4bbae18d54
commit 53c43cd431
5 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

1
resources/components/finder.html
View File

@ -23,6 +23,7 @@
<ul class="stop-group__stops list-underlined">
<li v-for="stop in group" :key="stop.id" class="d-flex">
<button @click="select(stop, $event)" class="btn btn-action align-self-start">
<tooltip>dodaj przystanek</tooltip>
<fa :icon="['fal', 'check']" />
</button>
<picker-stop :stop="stop" class="flex-grow-1"></picker-stop>

1
resources/components/picker/stop.html
View File

@ -4,6 +4,7 @@
<div class="stop__actions flex-space-left">
<slot name="actions">
<button class="btn btn-action" ref="action-info" @click="details = !details">
<tooltip>dodatkowe informacje</tooltip>
<fa :icon="['fal', details ? 'chevron-circle-up' : 'info-circle']"/>
</button>

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

@ -12,8 +12,8 @@ const longPressTimeout = 1000;
@Component({ template: require('../../components/tooltip.html') })
export class TooltipComponent extends Vue {
@Prop({ type: String, default: "auto" }) public placement: string;
@Prop({ type: Number, default: 200 }) public delay: number;
@Prop({ type: String, default: "top" }) public placement: string;
@Prop({ type: Number, default: 400 }) public delay: number;
@Prop({ type: Array, default: () => ["hover", "focus"]}) public triggers: Trigger[];
public show: boolean = false;

15
templates/app.html.twig
View File

@ -12,12 +12,18 @@
Komunikaty <span class="ml-2 badge badge-pill badge-dark">{{ '{{ messages.count }}' }}</span>
</h2>
<button class="btn btn-action flex-space-left" ref="settings-messages" @click="visibility.messages = true">
<tooltip>ustawienia</tooltip>
<fa :icon="['fal', 'cog']" fixed-width></fa>
</button>
<button class="btn btn-action" @click="updateMessages" ref="btn-messages-refresh">
<tooltip>odśwież</tooltip>
<fa :icon="['fal', 'sync']" :spin="messages.state === 'fetching'" fixed-width></fa>
</button>
<button class="btn btn-action" @click="sections.messages = !sections.messages">
<tooltip>
{{ '{{ ' }} sections.messages ? 'zwiń' : 'rozwiń' {{ '}}' }}
<span class="sr-only">sekcję komunikatów</span>
</tooltip>
<fa :icon="['fal', sections.messages ? 'chevron-up' : 'chevron-down']" fixed-width/>
</button>
@ -48,9 +54,11 @@
</h2>
<button class="btn btn-action flex-space-left" ref="settings-departures" @click="visibility.departures = true">
<tooltip>ustawienia</tooltip>
<fa :icon="['fal', 'cog']" fixed-width></fa>
</button>
<button class="btn btn-action" @click="updateDepartures({ stops })">
<tooltip>odśwież</tooltip>
<fa :icon="['fal', 'sync']" :spin="departures.state === 'fetching'" fixed-width></fa>
</button>
<portal to="popups">
@ -86,7 +94,7 @@
<span class="text">Przystanki</span>
</h2>
<button class="btn btn-action flex-space-left" @click="clear">
<tooltip placement="top">usuń wszystkie</tooltip>
<tooltip>usuń wszystkie</tooltip>
<fa :icon="['fal', 'trash-alt']" fixed-width></fa>
</button>
</header>
@ -94,6 +102,7 @@
<ul class="picker__stops list-underlined">
<li v-for="stop in stops" :key="stop.id" class="d-flex align-items-center">
<button @click="remove(stop)" class="btn btn-action align-self-start">
<tooltip>usuń przystanek</tooltip>
<fa :icon="['fal', 'times']"></fa>
</button>
<picker-stop :stop="stop" class="flex-grow-1"></picker-stop>
@ -119,7 +128,7 @@
Wybierz przystanki
</h2>
<button class="btn btn-action" @click="visibility.picker = 'favourites'">
<tooltip placement="top">Zapisane</tooltip>
<tooltip>Zapisane</tooltip>
<fa :icon="['fal', 'star']" fixed-witdth></fa>
</button>
</template>
@ -129,7 +138,7 @@
Zapisane
</h2>
<button class="btn btn-action" @click="visibility.picker = 'search'">
<tooltip placement="top">Wybierz przystanki</tooltip>
<tooltip>Wybierz przystanki</tooltip>
<fa :icon="['fal', 'search']" fixed-witdth></fa>
</button>
</template>