fix: add tooltip info on what an instance is (#1175)

This commit is contained in:
Nolan Lawson 2019-05-04 14:16:15 -07:00 committed by GitHub
parent bbf5b7f0c6
commit ff1e9e2c41
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 87 additions and 2 deletions

View File

@ -0,0 +1,72 @@
<!-- Simple tooltip styled to look like an abbr.
Modeled after https://github.com/nico3333fr/van11y-accessible-simple-tooltip-aria
-->
<span class="tooltip-button"
aria-describedby="tooltip-{id}"
role="button"
tabindex="0"
on:mouseover="set({shown: true, mouseover: true})"
on:mouseleave="set({shown: false, mouseover: false})"
on:click="toggle(event)"
on:keydown="onKeydown(event)"
>
{text}
</span>
<span id="tooltip-{id}"
class="tooltip {shown ? 'shown' : ''}"
role="tooltip"
aria-hidden={!shown}
>
{tooltipText}
</span>
<style>
.tooltip-button {
border-bottom: 1px dotted;
}
.tooltip {
display: none;
position: absolute;
background: var(--tooltip-bg);
color: var(--tooltip-color);
padding: 5px 10px;
font-size: 0.9em;
border-radius: 4px;
}
.tooltip.shown {
display: inline-block;
}
@media (max-width: 767px) {
.tooltip {
left: 0;
transform: translateY(calc(-100% - 5px));
}
}
</style>
<script>
let counter = 0
export default {
data: () => ({
id: ++counter,
shown: false,
mouseover: false
}),
methods: {
toggle (e) {
e.preventDefault()
e.stopPropagation()
let { shown, mouseover } = this.get()
if (!mouseover) {
this.set({ shown: !shown })
}
},
onKeydown (e) {
if (e.keyCode === 32 || e.keyCode === 13) { // enter or space
this.toggle(e)
}
}
}
}
</script>

View File

@ -34,7 +34,15 @@
</form> </form>
{#if !$isUserLoggedIn} {#if !$isUserLoggedIn}
<p>Don't have an instance? <ExternalLink href="https://joinmastodon.org">Join Mastodon!</ExternalLink></p> <p>
Don't have an
<Tooltip
text="instance"
tooltipText="An instance is your Mastodon home server, such as mastodon.social or cybre.space."
/>
?
<ExternalLink href="https://joinmastodon.org">Join Mastodon!</ExternalLink>
</p>
{/if} {/if}
</SettingsLayout> </SettingsLayout>
<style> <style>
@ -78,6 +86,7 @@
import { logInToInstance, handleOauthCode } from '../../../_actions/addInstance' import { logInToInstance, handleOauthCode } from '../../../_actions/addInstance'
import ExternalLink from '../../../_components/ExternalLink.html' import ExternalLink from '../../../_components/ExternalLink.html'
import { testHasIndexedDB, testHasLocalStorage } from '../../../_utils/testStorage' import { testHasIndexedDB, testHasLocalStorage } from '../../../_utils/testStorage'
import Tooltip from '../../../_components/Tooltip.html'
export default { export default {
async oncreate () { async oncreate () {
@ -92,7 +101,8 @@
}, },
components: { components: {
SettingsLayout, SettingsLayout,
ExternalLink ExternalLink,
Tooltip
}, },
store: () => store, store: () => store,
data: () => ({ data: () => ({

View File

@ -106,4 +106,7 @@
--tab-bg-active: #{darken($main-bg-color, 25%)}; --tab-bg-active: #{darken($main-bg-color, 25%)};
--tab-bg-hover: #{darken($main-bg-color, 4%)}; --tab-bg-hover: #{darken($main-bg-color, 4%)};
--tab-bg-hover-non-selected: #{darken($main-bg-color, 7%)}; --tab-bg-hover-non-selected: #{darken($main-bg-color, 7%)};
--tooltip-bg: rgba(30, 30, 30, 0.9);
--tooltip-color: white;
} }