Modify the Hub Button

This commit is contained in:
Massimiliano D 2023-04-18 11:44:05 +02:00 committed by GitHub
parent 6082b22922
commit 30f991effa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 82 additions and 4 deletions

1
webui/.nvmrc Normal file
View file

@ -0,0 +1 @@
12.11.1

View file

@ -30,7 +30,13 @@
</q-tabs> </q-tabs>
<div class="right-menu"> <div class="right-menu">
<q-tabs> <q-tabs>
<q-btn type="a" href="https://hub.traefik.io/" target="_blank" flat no-caps label="Go to Hub Dashboard →" class="btn-menu btn-hub" /> <div class="tooltip" :class="{ 'is-dark-mode': $q.dark.isActive }">
<q-btn type="a" href="https://traefik.io/try-hub-now" target="_blank" flat no-caps label="Try Traefik Hub →" class="btn-menu btn-hub" />
<div class="content">
<p>Extend your capabilities to API Management</p>
<img alt="" v-bind:src="getHubLogoSrc($q.dark.isActive)" width="100px" />
</div>
</div>
<q-btn @click="$q.dark.toggle()" stretch flat no-caps icon="invert_colors" :label="`${$q.dark.isActive ? 'Light' : 'Dark'} theme`" class="btn-menu" /> <q-btn @click="$q.dark.toggle()" stretch flat no-caps icon="invert_colors" :label="`${$q.dark.isActive ? 'Light' : 'Dark'} theme`" class="btn-menu" />
<q-btn stretch flat icon="eva-question-mark-circle-outline"> <q-btn stretch flat icon="eva-question-mark-circle-outline">
<q-menu anchor="bottom left" auto-close> <q-menu anchor="bottom left" auto-close>
@ -86,7 +92,12 @@ export default {
} }
}, },
methods: { methods: {
...mapActions('core', { getVersion: 'getVersion' }) ...mapActions('core', { getVersion: 'getVersion' }),
getHubLogoSrc (isDarkMode) {
return isDarkMode
? 'statics/hub-logo-horizontal-dark.png'
: 'statics/hub-logo-horizontal-clear.png'
}
}, },
created () { created () {
this.getVersion() this.getVersion()
@ -154,8 +165,8 @@ export default {
} }
.btn-hub { .btn-hub {
color: #0e204c; color: #dedede;
background: #deea48; background: #5f6572;
} }
.q-item { .q-item {
@ -166,4 +177,70 @@ export default {
font-weight: 700; font-weight: 700;
align-items: flex-start; align-items: flex-start;
} }
.tooltip {
display: inline-block;
.content {
display: flex;
align-items: center;
visibility: hidden;
font-size: 16px;
padding: 20px;
border-radius: 16px;
background-color: #fff;
box-shadow: 0 0 6px rgba(0,0,0,0.16), 0 0 6px rgba(0,0,0,0.23);
/* Position the tooltip text */
position: absolute;
z-index: 1;
top: 90%;
left: -5%;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
&::after {
content: "";
position: absolute;
top: -10px;
left: 22%;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 10px solid #fff;
}
p {
align-self: baseline;
color: var(--q-color-primary);
font-weight: bold;
margin: 0 20px 0 0;
max-width: 180px;
}
img {
margin: 0 20px;
}
}
&.is-dark-mode .content {
background-color: #262626;
box-shadow: 0 0 6px rgba(10,18,36,0.16), 0 0 6px rgba(10,18,36,0.23);
&::after {
border-bottom: 10px solid #262626;
}
p {
color: #fff;
}
}
&:hover .content {
visibility: visible;
opacity: 1;
}
}
</style> </style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB