huanld/speckle-server
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(ui): adds tooltips

Browse Source
This commit is contained in:
Matteo Cominetti
2020-10-17 16:23:29 +01:00
parent 9557550a79
commit aedc611b63
12 changed files with 252 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/package-lock.json
Generated
+21 -2
View File
@@ -9257,8 +9257,7 @@
"lodash": {
"version": "4.17.15",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
"integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
"dev": true
"integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
},
"lodash._reinterpolate": {
"version": "3.0.0",
@@ -10836,6 +10835,11 @@
"ts-pnp": "^1.1.6"
}
},
"popper.js": {
"version": "1.16.1",
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
"integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
},
"portfinder": {
"version": "1.0.26",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.26.tgz",
@@ -13987,6 +13991,16 @@
"integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
"dev": true
},
"v-tooltip": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/v-tooltip/-/v-tooltip-2.0.3.tgz",
"integrity": "sha512-KZZY3s+dcijzZmV2qoDH4rYmjMZ9YKGBVoUznZKQX0e3c2GjpJm3Sldzz8HHH2Ud87JqhZPB4+4gyKZ6m98cKQ==",
"requires": {
"lodash": "^4.17.15",
"popper.js": "^1.16.0",
"vue-resize": "^0.4.5"
}
},
"v8-compile-cache": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.1.1.tgz",
@@ -14364,6 +14378,11 @@
}
}
},
"vue-resize": {
"version": "0.4.5",
"resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-0.4.5.tgz",
"integrity": "sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg=="
},
"vue-router": {
"version": "3.4.5",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.5.tgz",
frontend/package.json
+1
View File
@@ -12,6 +12,7 @@
"core-js": "^3.6.4",
"crypto-random-string": "^3.3.0",
"lodash.debounce": "^4.0.8",
"v-tooltip": "^2.0.3",
"vue": "^2.6.12",
"vue-apollo": "^3.0.4",
"vue-infinite-loading": "^2.4.5",
frontend/src/AppFrontend.vue
+134 -28
View File
@@ -95,30 +95,28 @@
</v-list-item-content>
</v-list-item>
<v-divider></v-divider>
<v-list-item-group>
<v-list-item
v-if="!this.$vuetify.theme.dark"
exact
@click="switchTheme"
>
<v-list-item-content>Dark mode</v-list-item-content>
<v-list-item-icon>
<v-icon>mdi-weather-night</v-icon>
</v-list-item-icon>
</v-list-item>
<v-list-item v-else exact @click="switchTheme">
<v-list-item-content>Light mode</v-list-item-content>
<v-list-item-icon>
<v-icon>mdi-white-balance-sunny</v-icon>
</v-list-item-icon>
</v-list-item>
<!-- <v-list-item href="https://speckle.systems/" target="_blank">
<v-list-item
v-if="!this.$vuetify.theme.dark"
link
@click="switchTheme"
>
<v-list-item-content>Dark mode</v-list-item-content>
<v-list-item-icon>
<v-icon>mdi-weather-night</v-icon>
</v-list-item-icon>
</v-list-item>
<v-list-item v-else exact @click="switchTheme">
<v-list-item-content>Light mode</v-list-item-content>
<v-list-item-icon>
<v-icon>mdi-white-balance-sunny</v-icon>
</v-list-item-icon>
</v-list-item>
<!-- <v-list-item href="https://speckle.systems/" target="_blank">
<v-list-item-content>SpeckleSystems</v-list-item-content>
</v-list-item> -->
<v-list-item @click="signOut">
<v-list-item-content>Sign out</v-list-item-content>
</v-list-item>
</v-list-item-group>
<v-list-item @click="signOut">
<v-list-item-content>Sign out</v-list-item-content>
</v-list-item>
</v-list>
</v-menu>
</v-container>
@@ -227,13 +225,11 @@ a:hover {
.no-decor a:hover {
text-decoration: none;
}
.userMenu .v-list-item--active::before {
opacity: 0;
}
.theme--dark {
/* color: #cfcdcc !important; */
}
/* .theme--dark {
/color: #cfcdcc !important;
} */
/* don't like fat text */
.v-list-item--dense .v-list-item__title,
.v-list-item--dense .v-list-item__subtitle,
@@ -241,4 +237,114 @@ a:hover {
.v-list--dense .v-list-item .v-list-item__subtitle {
font-weight: 400 !important;
}
/* TOOLTIPs */
.tooltip {
display: block !important;
z-index: 10000;
font-family: "Roboto", sans-serif !important;
font-size: 0.75rem !important;
}
.tooltip .tooltip-inner {
background: rgba(0, 0, 0, 0.5);
color: white;
border-radius: 16px;
padding: 5px 10px 4px;
}
.tooltip .tooltip-arrow {
width: 0;
height: 0;
border-style: solid;
position: absolute;
margin: 5px;
border-color: rgba(0, 0, 0, 0.5);
z-index: 1;
}
.tooltip[x-placement^="top"] {
margin-bottom: 5px;
}
.tooltip[x-placement^="top"] .tooltip-arrow {
border-width: 5px 5px 0 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
bottom: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.tooltip[x-placement^="bottom"] {
margin-top: 5px;
}
.tooltip[x-placement^="bottom"] .tooltip-arrow {
border-width: 0 5px 5px 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-top-color: transparent !important;
top: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.tooltip[x-placement^="right"] {
margin-left: 5px;
}
.tooltip[x-placement^="right"] .tooltip-arrow {
border-width: 5px 5px 5px 0;
border-left-color: transparent !important;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
left: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
.tooltip[x-placement^="left"] {
margin-right: 5px;
}
.tooltip[x-placement^="left"] .tooltip-arrow {
border-width: 5px 0 5px 5px;
border-top-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
right: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
.tooltip.popover .popover-inner {
background: #f9f9f9;
color: black;
padding: 24px;
border-radius: 5px;
box-shadow: 0 5px 30px rgba(black, 0.1);
}
.tooltip.popover .popover-arrow {
border-color: #f9f9f9;
}
.tooltip[aria-hidden="true"] {
visibility: hidden;
opacity: 0;
transition: opacity 0.15s, visibility 0.15s;
}
.tooltip[aria-hidden="false"] {
visibility: visible;
opacity: 1;
transition: opacity 0.15s;
}
</style>
frontend/src/components/BtnClickCopy.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<span>
<v-btn icon small @click="copy">
<v-btn v-tooltip="'Copy to clipboard'" icon small @click="copy">
<v-icon small>mdi-content-copy</v-icon>
</v-btn>
<input id="text-to-copy" type="hidden" :value="text" />
frontend/src/components/FeedStream.vue
+41 -6
View File
@@ -31,7 +31,7 @@
{{ stream.description }}
</v-card-subtitle>
</v-col>
<!-- <v-spacer></v-spacer> -->
<v-col cols="5" class="caption text-right">
<div class="mt-1 mr-4">
<btn-click-copy :text="stream.id"></btn-click-copy>
@@ -41,20 +41,55 @@
<!-- <v-icon small>mdi-key-outline</v-icon> -->
<span class="ma-2"></span>
<v-icon small>mdi-source-branch</v-icon>
<v-icon
v-tooltip="
stream.branches.totalCount +
' branch' +
(stream.branches.totalCount === 1 ? '' : 'es')
"
small
>
mdi-source-branch
</v-icon>
<span>{{ stream.branches.totalCount }}</span>
<span class="ma-2"></span>
<v-icon small>mdi-history</v-icon>
<v-icon
v-tooltip="
stream.commits.totalCount +
' commit' +
(stream.commits.totalCount === 1 ? '' : 's')
"
small
>
mdi-history
</v-icon>
<span>{{ stream.commits.totalCount }}</span>
<span class="ma-2"></span>
<v-icon small>mdi-account-outline</v-icon>
<v-icon
v-tooltip="
stream.collaborators.length +
' collaborator' +
(stream.collaborators.length === 1 ? '' : 's')
"
small
>
mdi-account-outline
</v-icon>
<span>{{ stream.collaborators.length }}</span>
<span class="ma-2"></span>
<v-icon v-if="stream.isPublic" small>mdi-link</v-icon>
<v-icon v-else small>mdi-link-lock</v-icon>
<v-icon
v-if="stream.isPublic"
v-tooltip="`Link sharing on`"
small
>
mdi-link
</v-icon>
<v-icon v-else v-tooltip="`Link sharing off`" small>
mdi-link-lock
</v-icon>
</div>
</v-col>
</v-row>
frontend/src/components/ListItemStream.vue
+36 -5
View File
@@ -22,23 +22,54 @@
</span>
<span class="ma-2"></span>
<v-icon small>mdi-source-branch</v-icon>
<v-icon
v-tooltip="
stream.branches.totalCount +
' branch' +
(stream.branches.totalCount === 1 ? '' : 'es')
"
small
>
mdi-source-branch
</v-icon>
&nbsp;
<span>{{ stream.branches.totalCount }}</span>
<span class="ma-2"></span>
<v-icon small>mdi-history</v-icon>
<v-icon
v-tooltip="
stream.commits.totalCount +
' commit' +
(stream.commits.totalCount === 1 ? '' : 's')
"
small
>
mdi-history
</v-icon>
&nbsp;
<span>{{ stream.commits.totalCount }}</span>
<span class="ma-2"></span>
<v-icon small>mdi-account-outline</v-icon>
<v-icon
v-tooltip="
stream.collaborators.length +
' collaborator' +
(stream.collaborators.length === 1 ? '' : 's')
"
small
>
mdi-account-outline
</v-icon>
&nbsp;
<span>{{ stream.collaborators.length }}</span>
<span class="ma-2"></span>
<v-icon v-if="stream.isPublic" small>mdi-link</v-icon>
<v-icon v-else small>mdi-link-lock</v-icon>
<v-icon v-if="stream.isPublic" v-tooltip="`Link sharing on`" small>
mdi-link
</v-icon>
<v-icon v-else v-tooltip="`Link sharing off`" small>
mdi-link-lock
</v-icon>
</div>
<div class="mt-1 grey--text text--lighten-1">
frontend/src/components/SidebarHome.vue
+2
View File
@@ -27,6 +27,7 @@
<span class="streamid">{{ user.id }}</span>
</v-card-text>
<v-btn
v-tooltip="'Edit profile'"
small
icon
style="position: absolute; right: 15px; top: 15px"
@@ -60,6 +61,7 @@
</v-card-text>
<v-btn
v-if="user.role === `server:admin`"
v-tooltip="'Edit server information'"
small
icon
style="position: absolute; right: 15px; top: 15px"
frontend/src/components/SidebarStream.vue
+2
View File
@@ -5,6 +5,7 @@
{{ stream.name }}
</v-card-title>
<v-btn
v-tooltip="'Edit stream details'"
small
icon
style="position: absolute; right: 15px; top: 15px"
@@ -75,6 +76,7 @@
<div class="ml-2 mr-2">
<v-btn
v-if="isStreamOwner"
v-tooltip="'Manage collaborators'"
small
fab
color="primary"
frontend/src/main-frontend.js
+10 -6
View File
@@ -6,9 +6,17 @@ import vuetify from './plugins/vuetify';
import { createProvider, } from './vue-apollo'
import { signIn } from './auth-helpers'
import VueTimeago from 'vue-timeago'
import VTooltip from 'v-tooltip'
Vue.config.productionTip = false
Vue.use( VueTimeago, {
locale: 'en' } )
Vue.use(VTooltip)
/* Semicolon of Doom */
;
@@ -18,11 +26,6 @@ Vue.config.productionTip = false
let result = await signIn( )
if ( !result ) return
Vue.use( VueTimeago, {
locale: 'en' } )
new Vue( {
router,
store,
@@ -30,4 +33,5 @@ Vue.config.productionTip = false
apolloProvider: createProvider( ),
render: h => h( App )
} ).$mount( '#app' )
} )( )
} )( )
frontend/src/views/Commit.vue
+1
View File
@@ -17,6 +17,7 @@
<commit-dialog ref="commitDialog"></commit-dialog>
<v-btn
v-tooltip="'Edit commit details'"
small
icon
style="position: absolute; right: 15px; top: 15px"
frontend/src/views/Stream.vue
+1
View File
@@ -61,6 +61,7 @@
</p>
<v-btn
v-tooltip="'Edit branch details'"
small
icon
style="position: absolute; right: 15px; top: 15px"
frontend/src/views/Streams.vue
+2 -2
View File
@@ -35,7 +35,7 @@
<v-divider v-if="i < streams.items.length - 1"></v-divider>
</div>
<infinite-loading @infinite="infiniteHandler">
<infinite-loading @infinite="infiniteHandler" v-if="streams.items.length < streams.totalCount">
<div slot="no-more">These are all your streams!</div>
<div slot="no-results">There are no streams to load</div>
</infinite-loading>
@@ -119,7 +119,7 @@ export default {
// Result
console.log(data)
this.$apollo.queries.stream.refetch()
this.$apollo.queries.streams.refetch()
})
.catch((error) => {
// Error