From 30f991effa3f42e95ff03e64520640e5a6ce83ae Mon Sep 17 00:00:00 2001 From: Massimiliano D <126668030+mdeliatf@users.noreply.github.com> Date: Tue, 18 Apr 2023 11:44:05 +0200 Subject: [PATCH] Modify the Hub Button --- webui/.nvmrc | 1 + webui/src/components/_commons/NavBar.vue | 85 +++++++++++++++++- .../src/statics/hub-logo-horizontal-clear.png | Bin 0 -> 2687 bytes .../src/statics/hub-logo-horizontal-dark.png | Bin 0 -> 2874 bytes 4 files changed, 82 insertions(+), 4 deletions(-) create mode 100644 webui/.nvmrc create mode 100644 webui/src/statics/hub-logo-horizontal-clear.png create mode 100644 webui/src/statics/hub-logo-horizontal-dark.png diff --git a/webui/.nvmrc b/webui/.nvmrc new file mode 100644 index 000000000..8ba691606 --- /dev/null +++ b/webui/.nvmrc @@ -0,0 +1 @@ +12.11.1 diff --git a/webui/src/components/_commons/NavBar.vue b/webui/src/components/_commons/NavBar.vue index ffa2a67d1..854ff8ea1 100644 --- a/webui/src/components/_commons/NavBar.vue +++ b/webui/src/components/_commons/NavBar.vue @@ -30,7 +30,13 @@
- +
+ +
+

Extend your capabilities to API Management

+ +
+
@@ -86,7 +92,12 @@ export default { } }, 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 () { this.getVersion() @@ -154,8 +165,8 @@ export default { } .btn-hub { - color: #0e204c; - background: #deea48; + color: #dedede; + background: #5f6572; } .q-item { @@ -166,4 +177,70 @@ export default { font-weight: 700; 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; + } + } + diff --git a/webui/src/statics/hub-logo-horizontal-clear.png b/webui/src/statics/hub-logo-horizontal-clear.png new file mode 100644 index 0000000000000000000000000000000000000000..9fdabf2afa62276f35dd6794d3a5391507907657 GIT binary patch literal 2687 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 literal 0 HcmV?d00001 diff --git a/webui/src/statics/hub-logo-horizontal-dark.png b/webui/src/statics/hub-logo-horizontal-dark.png new file mode 100644 index 0000000000000000000000000000000000000000..aff782355a0997237a7ce477c8bf4a8683d38940 GIT binary patch literal 2874 zcmYk8XE+;-7RO_g7_}-!QSGZn8!4(rYi|*IkA|w&7M0p7M(tUoMp~3wu^Kf}M76Xr zU$aI~rG%uk-cqZsdwZYz-1Fg_|L=d!^PDf|!$~oR8*l)HfB*o1!^lwA5&)nBpJ_K% zhO?{+g#WuR-q$kK0sxw`K*w%OXH56d(m)%~Fd{-Zg8*}wwVpvB?DYR)|8(qsba?vm zOdlLC{m=O$rnij#h`Alp8LH9rmf;zmnX}(uGc@Bf{Nwy-{U`r-W@^*0HNEZ1+3HKd zmT)V;uNgNg+j{{yMrAImpqAvQ>`IJq=(0q$)UEar1Ir!HlY{qC#=`&rP}N9R%Q|$9 zR^oNH9C|LvNV)G?jk^t=@ANdl**{2IGqBZfZ_t?kgO0qy)3B7P6SQaeJq3bU@-gpt zw9ms!5BN~8s6Q%rg#eqhB`Ra=yWjct<4s^8h{nxqM|s=ft(!qecC-n%x8vk7ml8wO z!4BwgI*SoRd;dkI>OwbaMr$zfR8?sxoh0NYm{V@ zb~_P6n^hTpFWZ)a7b+KCW#&Eaq81^>ykbu5->2m+x>ZcuJKkLpwWZrdwJ&Wi5%|Y8 ze%@v(Mzf_ML*58sw$>K$^NW%HIQQ}r71gC@g@!1RVsoFjdhJ!Cg)k4Cpkf1RWX>7> zTa?#`bXspDwObH!a1yO@JFtJ%3$a2YVvgorK8-x%66)V)wjxLvsXagY;SGjeb31$W> z6cL7qfsSmLPtcVVc%*#8#?F+8`m4wHfBD~G)fZdvQMvp^JbiTHew;e|)p~B=4q8#gm5KGkMo!#p zFyUa?q&L*+v;2B0_-@ecu@NV7NX4YIlfvnxm;TZcKlIgw!r3DRMmU=DixY|6Z zhj13(n>e~WJcx;-{{Fpv=L>Be zSH}JUY);kxXvvnh4Qf=Rlk^+)e=%;|@1}}y8<>o~0Bv21)rujw(j%ueGRGr%9$x>J zQS6g#G?<9!bO2d}QMEhD^IniNoyz)D5v0cfzhqKW4%ekOV3Y1p2Rr!A>dc}=18c_B zGS;OGTRMe9Vv*ZK=2OEa*KOzT^w8)uB|(tJBa#L1Gr^9Y!SY5S7iDXfY0K8xkL-k74w_nJ)Hm1T`#$E;5T7H2#dWJ~IXBb7k8bVnH zK)Z+b&pA^Y2u&lF)nAVdpbJ;`(Si05L0g_9Zac_kMnartJY~AP%(!3~MZ|EQgA}9^ zFNii#oakScvsO)LOOb!q#cDyWu5u918F0hvqjeJ>sAC`v5wcKDsjrH2#zQ5>#vZPW z>0~Y@%)2;IUFC!zYjOEjCPe2kV@FXa3hJUPlv^-8;%#|e=R-1;;?e%eg`oL#$S2kd zC30`+oIwAR0ZR>H**&cXiOPYd`7&{riG#5uRSJsekq8~#0Cjcl0WetDu_(eF>A}0} zHdKK)6p1<(LaZR6G+@%OaH7t5%nc|xRU3us5(Mj9U`N=cAwbaEf-Y?7mfud_0N7W_ zu`=LN7hW7g)u=T^2Jr|O^^ZS@Xdju6X5r1LZ0QaNEGITAug@3Zxe4&g9U*zLby=Vs zMLU1C!U=)c?|N`W9zNq~x`|T90$ll^1n*C~EGfQKh2V>-8sJc9)!(v(vtmJ&jPoI4 z%o9^$u@A68iTEQu?2?CxNmxTI$mk%rRQw0W#<)+I7OWv%)us09K|Wq91`KNyS^vmt zBX<9z$me{8u-{#~Pd+5LtRL6=V!^OGxI|=XHbs}F#`8HF%a->Jy`mXN2cFDvOA@O) z1oN{RJyGZ=f?TdFP|de>!gucJ^28#fj;yYvh_Xy*0D-AzWdJJ zV}OOdzFz#TcPoh&_U7FtAAlTurbN$dNqL3Ct|LWCNA7wTFv)HtG87M4#mfHjx8kC6 z$j9aWG#5V(T2azt;U!DPWX>1Pq(jfEY#VR6Lp`5#CRyb+TmC(&ZMKr?So~J>?3ye_ zo;M0#dus8WTy5LZ4p#&Fc|E@qEywSGk~6h(Qbp4E*fMhp;P&7qLdDR8WM_i?Ut3{4 zcQZva-d8|+Vq_2e*Fptv|2mqb1$V3mO+6kc!rm&32=dI7KKfSZ8zBUedwGQLD5_8@ zcunfam07+qU%2p-z3cYq4r!>6>uWJuC7nrjHTVm;?Zsg7?;k%+d)X&EB1`+g8%RCn zgL}=2T-REknhD2}0$}EllV2*|G+39eF~*BKKO%4kV%hbz9;$e_cJp;dg4LRb?+4lN zIv+mll`?`fx>&0X)b^-gUXemHJTKpBoyY>@oyHvqU*9E)oDz>SFdD+UH}j)cthHZf zoR9lX6=Rn)*<5&`msTdRcUvaP&|C>YZ8!F&PcFsvMxJs(;ic(H02|ART9F%8mrRpL zhD^-dz!~UC*d(Zq$7dc8Iux4%>n8WXQuPzrn-oa#V_M`=spO1}kNm>YPax=hCSg zdzyqAzr4O0^?nkg^~tIUeZMPfl0vHk-D{}{QA%#@r%W~*v6i&i3CtaC%H-6Fw zvS++a)^zv+{sX|U+ML_Z5&6?1=_l*RCozzfrrVy zCa&Ss^(W{!yAkJAwPK_MyyikU05&v_aaWLLbt?LXgT5?LK@J=)?y|38eMB+Yjyz54 z<89xKO`qA*tgRLsL)YGH#@q1Tu*L8ru>gEso%w zHjK&b^N)F22`>TYmh`k0WUl7AZ$Pcz zg8C>)e(8EyBbq*(52o1@X;A|=g2IX}Mv|BhuawO>m6vpgp5Lxi2KJXN>8FCcWwccH zt_jSTaVLpu1yrU<>G!JM-5<7q+H9M;OEX^QU$#(s&mvrTw+gpYojdDM-?SN_@&#dO zPE_hxPFPER-rN4%ENIuXFtTCB5x0)jSt@>*!EP#DqT`e}~FRcXE#1nm4+4vY_|QT$cfW$1WmBt+Z#G zr8UaVLU4XfA%xpNuo$&VKS!wwPe3lugdp|