✨ Site > Add tooltips
This commit is contained in:
brunosimon
@@ -1,7 +1,14 @@
|
||||
import Tooltip from '@/components/tooltip'
|
||||
|
||||
export default
|
||||
{
|
||||
name: 'alert',
|
||||
|
||||
components:
|
||||
{
|
||||
Tooltip
|
||||
},
|
||||
|
||||
methods:
|
||||
{
|
||||
onAlertClick()
|
||||
|
||||
@@ -2,4 +2,5 @@
|
||||
<span class="stroke"></span>
|
||||
<img class="icon default" src="../../../static/svg/alert.svg" alt="">
|
||||
<img class="icon hover" src="../../../static/svg/alert-hover.svg" alt="">
|
||||
<tooltip position="top-left">It's going too fast? Send an alert to<br>the presenter (use wisely)</tooltip>
|
||||
</a>
|
||||
@@ -1,7 +1,14 @@
|
||||
import Tooltip from '@/components/tooltip'
|
||||
|
||||
export default
|
||||
{
|
||||
name: 'chat',
|
||||
|
||||
components:
|
||||
{
|
||||
Tooltip
|
||||
},
|
||||
|
||||
data()
|
||||
{
|
||||
return {
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
<img v-if="unreadCount === 0" class="icon default" src="../../../static/svg/chat-star.svg" alt="">
|
||||
<img v-if="unreadCount > 0" class="icon hover" src="../../../static/svg/chat-star-hover.svg" alt="">
|
||||
<span v-if="unreadCount > 0" class="unread">{{ unreadCount > 99 ? '99+' : unreadCount }}</span>
|
||||
<tooltip position="top-left">Chat with other person on the project</tooltip>
|
||||
</a>
|
||||
<div class="content" v-show="open">
|
||||
<a href="#" class="header" @click="onHeaderClick">
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import Versions from '@/components/versions'
|
||||
import Viewer from '@/components/viewer'
|
||||
import Tooltip from '@/components/tooltip'
|
||||
import copyToClipboard from 'copy-to-clipboard'
|
||||
|
||||
export default
|
||||
@@ -9,7 +10,8 @@ export default
|
||||
components:
|
||||
{
|
||||
Versions,
|
||||
Viewer
|
||||
Viewer,
|
||||
Tooltip
|
||||
},
|
||||
|
||||
computed:
|
||||
|
||||
@@ -1,32 +1,5 @@
|
||||
<div class="file" :class="[versionsActive && isCode ? 'version-active' : '']">
|
||||
|
||||
<!-- Header -->
|
||||
<header>
|
||||
|
||||
<div class="path"><span class="directory">{{ content.path.directory }}/</span><span class="name">{{ content.name }}</span></div>
|
||||
|
||||
<a class="versions-toggle" :class="[versionsActive ? 'active' : '']" href="#" @click.prevent="onVersionsClick" v-if="isCode">
|
||||
<img class="icon default" src="../../../static/svg/versions.svg" alt="">
|
||||
<img class="icon hover" src="../../../static/svg/versions-hover.svg" alt="">
|
||||
</a>
|
||||
|
||||
<a class="differences-toggle" :class="[differencesActive ? 'active' : '']" href="#" @click.prevent="onDifferencesClick" v-if="isCode">
|
||||
<img class="icon default" src="../../../static/svg/differences.svg" alt="">
|
||||
<img class="icon hover" src="../../../static/svg/differences-hover.svg" alt="">
|
||||
</a>
|
||||
|
||||
<a class="copy" :class="[copied ? 'active' : '']" href="#" @click.prevent="onCopyClick" @mouseleave="onCopyMouseleave" v-if="isCode">
|
||||
<img class="icon default" src="../../../static/svg/copy.svg" alt="">
|
||||
<img class="icon hover" src="../../../static/svg/copy-hover.svg" alt="">
|
||||
</a>
|
||||
|
||||
<a class="download" :href="downloadUrl" download>
|
||||
<img class="icon default" src="../../../static/svg/download.svg" alt="">
|
||||
<img class="icon hover" src="../../../static/svg/download-hover.svg" alt="">
|
||||
</a>
|
||||
|
||||
</header>
|
||||
|
||||
<!-- Versions -->
|
||||
<versions :file="content" :content="content.versions" v-if="versionsActive && isCode"></versions>
|
||||
|
||||
@@ -45,4 +18,36 @@
|
||||
<br>Sorry, I can't read this file.
|
||||
<br>But you can <a :href="downloadUrl" download>download it</a>
|
||||
</div>
|
||||
|
||||
<!-- Header -->
|
||||
<header>
|
||||
|
||||
<div class="path"><span class="directory">{{ content.path.directory }}/</span><span class="name">{{ content.name }}</span></div>
|
||||
|
||||
<a class="versions-toggle" :class="[versionsActive ? 'active' : '']" href="#" @click.prevent="onVersionsClick" v-if="isCode">
|
||||
<img class="icon default" src="../../../static/svg/versions.svg" alt="">
|
||||
<img class="icon hover" src="../../../static/svg/versions-hover.svg" alt="">
|
||||
<tooltip position="bottom-right">Toggle the revision history</tooltip>
|
||||
</a>
|
||||
|
||||
<a class="differences-toggle" :class="[differencesActive ? 'active' : '']" href="#" @click.prevent="onDifferencesClick" v-if="isCode">
|
||||
<img class="icon default" src="../../../static/svg/differences.svg" alt="">
|
||||
<img class="icon hover" src="../../../static/svg/differences-hover.svg" alt="">
|
||||
<tooltip position="bottom-right">Toggle the line-by-line differences</tooltip>
|
||||
</a>
|
||||
|
||||
<a class="copy" :class="[copied ? 'active' : '']" href="#" @click.prevent="onCopyClick" @mouseleave="onCopyMouseleave" v-if="isCode">
|
||||
<img class="icon default" src="../../../static/svg/copy.svg" alt="">
|
||||
<img class="icon hover" src="../../../static/svg/copy-hover.svg" alt="">
|
||||
<tooltip position="bottom">Copy to clipboard</tooltip>
|
||||
</a>
|
||||
|
||||
<a class="download" :href="downloadUrl" download>
|
||||
<img class="icon default" src="../../../static/svg/download.svg" alt="">
|
||||
<img class="icon hover" src="../../../static/svg/download-hover.svg" alt="">
|
||||
<tooltip position="bottom-left">Download the latest version of the file</tooltip>
|
||||
</a>
|
||||
|
||||
</header>
|
||||
|
||||
</div>
|
||||
@@ -1,7 +1,14 @@
|
||||
import Tooltip from '@/components/tooltip'
|
||||
|
||||
export default
|
||||
{
|
||||
name: 'projects-hub',
|
||||
|
||||
components:
|
||||
{
|
||||
Tooltip
|
||||
},
|
||||
|
||||
computed:
|
||||
{
|
||||
projects()
|
||||
|
||||
@@ -21,6 +21,7 @@
|
||||
<a class="download" :href="downloadUrl" download>
|
||||
<img class="icon default" src="../../../static/svg/download.svg" alt="">
|
||||
<img class="icon hover" src="../../../static/svg/download-hover.svg" alt="">
|
||||
<tooltip position="right">Download the whole project</tooltip>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,3 @@
|
||||
<template src="./template.html"></template>
|
||||
<script src="./script.js"></script>
|
||||
<style src="./style.styl" lang="stylus" scoped></style>
|
||||
@@ -0,0 +1,16 @@
|
||||
export default
|
||||
{
|
||||
name: 'tooltip',
|
||||
|
||||
props:
|
||||
{
|
||||
position: {
|
||||
type: String,
|
||||
default: 'top',
|
||||
validator(value)
|
||||
{
|
||||
return ['top', 'top-right', 'right', 'bottom-right', 'bottom', 'bottom-left', 'left', 'top-left'].indexOf(value) !== -1
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
.tooltip
|
||||
position absolute
|
||||
top 0
|
||||
right 0
|
||||
bottom 0
|
||||
left 0
|
||||
|
||||
.content
|
||||
position absolute
|
||||
padding-top 6px
|
||||
padding-right 8px
|
||||
padding-bottom 7px
|
||||
padding-left 8px
|
||||
background #1E202F
|
||||
border 1px solid #586ca2
|
||||
white-space nowrap
|
||||
font-size 12px
|
||||
line-height 1em
|
||||
pointer-events none
|
||||
opacity 0
|
||||
transition opacity 0.15s
|
||||
will-change opacity
|
||||
color #fff
|
||||
|
||||
.arrow
|
||||
position absolute
|
||||
width 10px
|
||||
height 10px
|
||||
overflow hidden
|
||||
|
||||
.inner
|
||||
position absolute
|
||||
top 0
|
||||
left 6px
|
||||
width 10px
|
||||
height 10px
|
||||
background #1E202F
|
||||
border 1px solid #586ca2
|
||||
transform rotate(45deg)
|
||||
|
||||
&.top-left
|
||||
.content
|
||||
right 8px
|
||||
bottom calc(100% + 5px)
|
||||
|
||||
.arrow
|
||||
right 8px
|
||||
top 100%
|
||||
transform rotate(-90deg)
|
||||
|
||||
&.right
|
||||
.content
|
||||
transform translateY(-50%)
|
||||
top 50%
|
||||
left calc(100% + 5px)
|
||||
|
||||
.arrow
|
||||
margin-top -5px
|
||||
top 50%
|
||||
right 100%
|
||||
|
||||
&.bottom-right
|
||||
.content
|
||||
left 8px
|
||||
top calc(100% + 5px)
|
||||
|
||||
.arrow
|
||||
left 8px
|
||||
bottom 100%
|
||||
transform rotate(90deg)
|
||||
|
||||
&.bottom
|
||||
.content
|
||||
transform translateX(-50%)
|
||||
left 50%
|
||||
top calc(100% + 5px)
|
||||
|
||||
.arrow
|
||||
margin-left -5px
|
||||
left 50%
|
||||
bottom 100%
|
||||
transform rotate(90deg)
|
||||
|
||||
&.bottom-left
|
||||
.content
|
||||
right 8px
|
||||
top calc(100% + 5px)
|
||||
|
||||
.arrow
|
||||
right 8px
|
||||
bottom 100%
|
||||
transform rotate(90deg)
|
||||
|
||||
&:hover
|
||||
.content
|
||||
opacity 1
|
||||
@@ -0,0 +1,6 @@
|
||||
<div class="tooltip" :class="`${position}`">
|
||||
<div class="content">
|
||||
<div class="arrow"><div class="inner"></div></div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user