Skip to content

Commit

Permalink
Merge pull request #627 from cosmos/peng/515-add-tooltips
Browse files Browse the repository at this point in the history
peng/515 add tooltips
  • Loading branch information
faboweb authored Apr 10, 2018
2 parents 512b107 + 32dba56 commit 7564e31
Show file tree
Hide file tree
Showing 33 changed files with 137 additions and 353 deletions.
6 changes: 4 additions & 2 deletions app/src/renderer/components/common/NiConnectivity.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
<template lang='pug'>
.ni-connectivity(v-if='connected')
list-item(icon="done" :title="blockString")
list-item(icon="settings_ethernet" :title="nodeIP")
list-item(icon="done" :title="blockString"
v-tooltip.top="'Current Block Height'")
list-item(icon="settings_ethernet" :title="nodeIP"
v-tooltip.top.end="'Node IP Address'")
.ni-connectivity(v-else)
list-item(icon="rotate_right" spin="true" title="Connecting...")
</template>
Expand Down
46 changes: 4 additions & 42 deletions app/src/renderer/components/common/NiToolBar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,12 @@
.ni-tool-bar
.ni-tool-bar-container
.main: slot
a.back(@click="$router.go(-1)")
a.back(@click="$router.go(-1)" v-tooltip.bottom="'Back'")
i.material-icons arrow_back
.label Back
a.help(@click="enableModalHelp")
a.help(@click="enableModalHelp" v-tooltip.bottom="'Help'")
i.material-icons help_outline
.label Help
a.sign-out(@click="signOut")
a.sign-out(@click="signOut" v-tooltip.bottom.end="'Sign Out'")
i.material-icons exit_to_app
.label Sign Out
</template>

<script>
Expand Down Expand Up @@ -54,45 +51,12 @@ export default {
justify-content center
position relative
i, .label
i
color var(--txt)
i
font-size lg
.label
position absolute
top 3rem
right 0
background var(--bc)
border-radius 0.25rem
line-height 2.5rem
padding 0 0.75rem
color var(--txt)
z-index z(modal)
white-space nowrap
display none
&:before
position absolute
top -0.375rem
right 1.125rem
// arrow
width 0
height 0
border-left 0.375rem solid transparent
border-right 0.375rem solid transparent
border-bottom 0.375rem solid var(--bc)
display block
content ''
&.router-link-active
i
color var(--bright)
Expand All @@ -101,8 +65,6 @@ export default {
background var(--app-fg)
i
color var(--bright)
.label
display block
&[disabled]
cursor default
Expand Down
6 changes: 2 additions & 4 deletions app/src/renderer/components/govern/PageProposals.vue
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
<template lang="pug">
page(title='Proposals')
div(slot="menu"): tool-bar
router-link(to="/proposals/new" exact)
router-link(to="/proposals/new" exact v-tooltip.bottom="'New Proposal'")
i.material-icons add
.label New Proposal
a(@click='setSearch(true)')
a(@click='setSearch(true)' v-tooltip.bottom="'Search'")
i.material-icons search
.label Search
modal-search(type="proposals")

data-loading(v-if="proposals.loading")
Expand Down
3 changes: 1 addition & 2 deletions app/src/renderer/components/govern/PageProposalsNew.vue
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
<template lang="pug">
page(title='New Proposal')
div(slot="menu"): tool-bar
router-link(to="/proposals" exact)
router-link(to="/proposals" exact v-tooltip.bottom="'Back'")
i.material-icons arrow_back
.label Back
part(title='Choose a Type')
list-item(title='Adjust Parameters' to="/proposals/new/adjust")
list-item(title='Amend Constitution' to="/proposals/new/amend")
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
<template lang="pug">
page(title="Proposal: Adjust Parameters")
div(slot="menu"): tool-bar
router-link(to="/proposals/new" exact)
router-link(to="/proposals/new" exact v-tooltip.bottom="'Back'")
i.material-icons arrow_back
.label Back
form-struct(:submit="onSubmit")
form-group(:error="$v.fields.title.$error"
field-id='proposal-title' field-label='Proposal Title')
Expand Down
3 changes: 1 addition & 2 deletions app/src/renderer/components/govern/PageProposalsNewAmend.vue
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
<template lang="pug">
page(title="Proposal: Amend Constitution")
div(slot="menu"): tool-bar
router-link(to="/proposals/new" exact)
router-link(to="/proposals/new" exact v-tooltip.bottom="'Back'")
i.material-icons arrow_back
.label Back
form-struct(:submit="onSubmit")
form-group(:error="$v.fields.title.$error"
field-id='proposal-title' field-label='Proposal Title')
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
<template lang="pug">
page(title="Proposal: Create Atoms")
div(slot="menu"): tool-bar
router-link(to="/proposals/new" exact)
router-link(to="/proposals/new" exact v-tooltip.bottom="'Back'")
i.material-icons arrow_back
.label Back
form-struct(:submit="onSubmit")
form-group(:error="$v.fields.title.$error"
field-id='proposal-title' field-label='Proposal Title')
Expand Down
3 changes: 1 addition & 2 deletions app/src/renderer/components/govern/PageProposalsNewText.vue
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
<template lang="pug">
page(title="Proposal: Freeform Text")
div(slot="menu"): tool-bar
router-link(to="/proposals/new" exact)
router-link(to="/proposals/new" exact v-tooltip.bottom="'Back'")
i.material-icons arrow_back
.label Back
form-struct(:submit="onSubmit")
form-group(:error="$v.fields.title.$error"
field-id='proposal-title' field-label='Proposal Title')
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
<template lang="pug">
page(title="Proposal: Upgrade Code")
div(slot="menu"): tool-bar
router-link(to="/proposals/new" exact)
router-link(to="/proposals/new" exact v-tooltip.bottom="'Back'")
i.material-icons arrow_back
.label Back
form-struct(:submit="onSubmit")
form-group(:error="$v.fields.title.$error"
field-id='proposal-title' field-label='Proposal Title')
Expand Down
8 changes: 4 additions & 4 deletions app/src/renderer/components/monitor/PageBlock.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@ page(:title="pageBlockTitle")
data-empty(v-else-if="!block.header")
template(v-else)
div(slot="menu"): tool-bar
router-link(:to="{ name: 'block', params: { block: block.header.height - 1 }}")
router-link(:to="{ name: 'block', params: { block: block.header.height - 1 }}"
v-tooltip.bottom="'Older Block'")
i.material-icons chevron_left
.label Previous Block
router-link(:to="{ name: 'block', params: { block: block.header.height + 1 }}")
router-link(:to="{ name: 'block', params: { block: block.header.height + 1 }}"
v-tooltip.bottom="'Newer Block'")
i.material-icons chevron_right
.label Next Block

part(title='')
list-item(dt="Block Hash" :dd="blockMeta.block_id.hash")
Expand Down
3 changes: 1 addition & 2 deletions app/src/renderer/components/monitor/PageBlocks.vue
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
<template lang="pug">
page(title='Block Explorer')
div(slot="menu"): tool-bar
a(@click='setSearch(true)')
a(@click='setSearch(true)' v-tooltip.bottom="'Search Block'")
i.material-icons search
.label Search

modal-search(type="blocks")

Expand Down
3 changes: 1 addition & 2 deletions app/src/renderer/components/staking/PageDelegate.vue
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
<template lang="pug">
page(:title="delegateType + ' Profile'")
div(slot="menu"): tool-bar
router-link(to='/staking')
router-link(to='/staking' v-tooltip.bottom="'Back'")
i.material-icons arrow_back
.label Back

part(:title="delegateType + ' Info'")
list-item(dt='Moniker' :dd='delegate.moniker')
Expand Down
14 changes: 10 additions & 4 deletions app/src/renderer/components/staking/PageStaking.vue
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
<template lang="pug">
page(title='Staking')
div(slot="menu"): tool-bar
a(@click='setSearch(true)')
a(@click='setSearch(true)' v-tooltip.bottom="'Search'")
i.material-icons search
.label Search
a(@click='updateDelegates(address)')
a(@click='updateDelegates(address)' v-tooltip.bottom="'Refresh'")
i.material-icons refresh
.label Refresh

modal-search(type="delegates")

Expand Down Expand Up @@ -95,26 +93,34 @@ export default {
{
title: "Name",
value: "small_moniker",
tooltip: "The unique moniker of this delegate.",
class: "name"
},
{
title: "% of Vote",
value: "shares",
tooltip:
"The delegate controls this percentage of voting power on the network.",
class: "percent_of_vote"
},
{
title: "Total Votes",
value: "voting_power",
tooltip: "The delegate stakes this many atoms on the network.",
class: "voting_power"
},
{
title: "Your Votes",
value: "your_votes",
tooltip:
"You have personally staked this many atoms to the delegate.",
class: "your-votes"
},
{
title: "Status",
value: "isValidator",
tooltip:
"The delegate is either a validator or a validator candidate.",
class: "status"
},
{
Expand Down
2 changes: 1 addition & 1 deletion app/src/renderer/components/staking/PanelSort.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
v-for="property in sort.properties",
@click="orderBy(property.value, $event)",
:class="property.class")
.label {{ property.title }}
.label(v-tooltip.top="property.tooltip") {{ property.title }}
</template>

<script>
Expand Down
3 changes: 1 addition & 2 deletions app/src/renderer/components/wallet/PageTransactions.vue
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
<template lang="pug">
page(title='Transactions')
div(slot="menu"): tool-bar
a(@click='setSearch(true)')
a(@click='setSearch(true)' v-tooltip.bottom="'Search'")
i.material-icons search
.label Search

modal-search(type="transactions")

Expand Down
6 changes: 2 additions & 4 deletions app/src/renderer/components/wallet/PageWallet.vue
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
<template lang="pug">
page(title='Wallet')
div(slot="menu"): tool-bar
a(@click='updateBalances()')
a(@click='updateBalances()' v-tooltip.bottom="'Refresh'")
i.material-icons refresh
.label Refresh
a(@click='setSearch(true)')
a(@click='setSearch(true)' v-tooltip.bottom="'Search'")
i.material-icons search
.label Search

modal-search(type="balances")

Expand Down
2 changes: 2 additions & 0 deletions app/src/renderer/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import Vue from "vue"
import Electron from "vue-electron"
import Resource from "vue-resource"
import Router from "vue-router"
import Tooltip from "vue-directive-tooltip"
import Vuelidate from "vuelidate"
import shrinkStacktrace from "../helpers/shrink-stacktrace.js"
import Raven from "raven-js"
Expand Down Expand Up @@ -34,6 +35,7 @@ Vue.config.errorHandler = (error, vm, info) => {
Vue.use(Electron)
Vue.use(Resource)
Vue.use(Router)
Vue.use(Tooltip)
Vue.use(Vuelidate)

async function main() {
Expand Down
72 changes: 72 additions & 0 deletions app/src/renderer/styles/vendor/vue-directive-tooltip.styl
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
.vue-tooltip
df()
background var(--bc)
box-sizing border-box
color var(--txt)
max-width 20rem
padding 0.5rem 0.75rem
border-radius 0.25rem
z-index z(modal)

.vue-tooltip .vue-tooltip-content
text-align center

.vue-tooltip .tooltip-arrow
content ""
width 0
height 0
border-style solid
position absolute
margin 0.375rem

.vue-tooltip[x-placement^="top"]
margin-bottom 0.375rem

.vue-tooltip[x-placement^="top"] .tooltip-arrow
border-width 0.375rem 0.375rem 0 0.375rem
border-top-color var(--bc)
border-bottom-color transparent !important
border-left-color transparent !important
border-right-color transparent !important
bottom -0.375rem
margin-top 0
margin-bottom 0

.vue-tooltip[x-placement^="bottom"]
margin-top 0.375rem

.vue-tooltip[x-placement^="bottom"] .tooltip-arrow
border-width 0 0.375rem 0.375rem 0.375rem
border-bottom-color var(--bc)
border-top-color transparent !important
border-left-color transparent !important
border-right-color transparent !important
top -0.375rem
margin-top 0
margin-bottom 0

.vue-tooltip[x-placement^="right"]
margin-left 0.375rem

.vue-tooltip[x-placement^="right"] .tooltip-arrow
border-width 0.375rem 0.375rem 0.375rem 0
border-right-color var(--bc)
border-top-color transparent !important
border-left-color transparent !important
border-bottom-color transparent !important
left -0.375rem
margin-left 0
margin-right 0

.vue-tooltip[x-placement^="left"]
margin-right 0.375rem

.vue-tooltip[x-placement^="left"] .tooltip-arrow
border-width 0.375rem 0 0.375rem 0.375rem
border-left-color var(--bc)
border-top-color transparent !important
border-right-color transparent !important
border-bottom-color transparent !important
right -0.375rem
margin-left 0
margin-right 0
3 changes: 1 addition & 2 deletions archive/components/PageDelegatePower.vue
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
<template lang="pug">
page(icon="storage" :title="`${delegateId} Vote Power`")
div(slot="menu"): tool-bar
router-link(
router-link(v-tooltip.bottom="'Back'"
:to="{ name: 'delegate', params: { delegate: $route.params.delegate }}")
i.material-icons arrow_back
.label Back

part(title='Vote Power (Millions of ATOMs) / Time')
chart-vote-power(:votes="chartData")
Expand Down
Loading

0 comments on commit 7564e31

Please sign in to comment.