Skip to content

Commit f584a93

Browse files
yel-haddyel-hadd
authored
Merge pull request #258 from yel-hadd/master
UI Improvements
2 parents 28a5163 + 9105c9b commit f584a93

File tree

6 files changed

+305
-37
lines changed

6 files changed

+305
-37
lines changed

‎docs/.vuepress/assets/icons/bot-icon.webp

5.51 KB
Binary file not shown.

‎docs/.vuepress/client.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ import sidebar from "./config-client/sidebar";
1313
import social from "./config-client/social";
1414

1515
import Chat from "./components/Chat.vue";
16+
import CodeTabs from "./components/CodeTabs.vue";
17+
import CodeWithCopy from "./components/CodeWithCopy.vue";
1618

1719
export default defineClientConfig({
1820
rootComponents: [

‎docs/.vuepress/components/Chat.vue

Lines changed: 30 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,12 @@
88
@click="toggleChat"
99
:class="{ 'chat-open': showChat }"
1010
>
11-
<svg
11+
<img
1212
v-if="!showChat"
13-
viewBox="0 0 16 16"
14-
xmlns="http://www.w3.org/2000/svg"
15-
fill="#ffffff"
16-
>
17-
<g id="SVGRepo_iconCarrier">
18-
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.48 4h4l.5.5v2.03h.52l.5.5V8l-.5.5h-.52v3l-.5.5H9.36l-2.5 2.76L6 14.4V12H3.5l-.5-.64V8.5h-.5L2 8v-.97l.5-.5H3V4.36L3.53 4h4V2.86A1 1 0 0 1 7 2a1 1 0 0 1 2 0 1 1 0 0 1-.52.83V4zM12 8V5H4v5.86l2.5.14H7v2.19l1.8-2.04.35-.15H12V8zm-2.12.51a2.71 2.71 0 0 1-1.37.74v-.01a2.71 2.71 0 0 1-2.42-.74l-.7.71c.34.34.745.608 1.19.79.45.188.932.286 1.42.29a3.7 3.7 0 0 0 2.58-1.07l-.7-.71zM6.49 6.5h-1v1h1v-1zm3 0h1v1h-1v-1z"></path>
19-
</g>
20-
</svg>
13+
src="../assets/icons/bot-icon.webp"
14+
alt="Bot icon"
15+
class="bot-icon"
16+
/>
2117
<svg
2218
v-else
2319
xmlns="http://www.w3.org/2000/svg"
@@ -34,7 +30,7 @@
3430
</button>
3531

3632
<div v-if="!showChat" class="highlight-container">
37-
<div class="tooltip-text">Try our new Virtual Assistant!</div>
33+
<div class="tooltip-text"><b>Need help?</b><br>I'm an AI chatbot, trained to answer all your questions.</div>
3834
</div>
3935
</div>
4036

@@ -162,8 +158,8 @@ mobile-breakpoint = 768px
162158
163159
.chat-toggle {
164160
position: relative
165-
background: $primary-color
166-
border: none
161+
background: white
162+
border: 2px solid $primary-color
167163
border-radius: 50%
168164
width: 56px
169165
height: 56px
@@ -174,9 +170,18 @@ mobile-breakpoint = 768px
174170
box-shadow: 0 4px 12px rgba(0,0,0,0.15)
175171
transition: transform 0.3s ease, box-shadow 0.3s ease
176172
z-index: 10000
173+
padding: 0
174+
overflow: hidden
175+
176+
.bot-icon {
177+
width: calc(100% - 4px)
178+
height: calc(100% - 4px)
179+
border-radius: 50%
180+
object-fit: cover
181+
}
177182
178183
svg {
179-
color: white
184+
color: $primary-color
180185
width: 32px
181186
height: 32px
182187
}
@@ -201,18 +206,19 @@ mobile-breakpoint = 768px
201206
}
202207
203208
.tooltip-text {
204-
background: $primary-color;
205-
color: white;
206-
padding: 8px 16px;
209+
background: white;
210+
color: black;
211+
padding: 12px 20px;
207212
border-radius: 20px;
208213
font-size: 0.95rem; /* Increase this value to make the tooltip text larger */
209214
animation: float 3s ease-in-out infinite;
210215
position: relative;
211-
text-align: center;
212-
white-space: nowrap;
216+
text-align: right;
217+
white-space: normal;
213218
font-weight: 500;
214-
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
215-
max-width: 90vw;
219+
box-shadow: 0 0 15px $primary-color;
220+
max-width: 250px;
221+
min-width: 200px;
216222
overflow: visible;
217223
text-overflow: clip;
218224
}
@@ -384,8 +390,10 @@ mobile-breakpoint = 768px
384390
385391
.tooltip-text {
386392
font-size: 0.9rem; /* Adjust this value to change the tooltip text size on mobile devices */
387-
padding: 6px 12px;
388-
white-space: nowrap;
393+
padding: 10px 16px;
394+
white-space: normal;
395+
max-width: 90vw;
396+
min-width: 180px;
389397
}
390398
}
391399
</style>

‎docs/.vuepress/components/CodeTabs.vue

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
<template>
2+
<div class="code-tabs">
3+
<div class="tab-buttons">
4+
<button v-for="(tab, index) in tabs" :key="index" :class="{ active: activeTab === index }" @click="activeTab = index">
5+
{{ tab.title }}
6+
</button>
7+
</div>
8+
9+
<div class="tab-content code-block-wrapper">
10+
<button class="copy-button" @click="copyCode" aria-label="Copy code">
11+
<svg v-if="!copied" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
12+
<path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"/>
13+
<path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"/>
14+
</svg>
15+
<svg v-else xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
16+
<path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/>
17+
</svg>
18+
</button>
19+
20+
<pre><code ref="codeRef" class="language-bash">{{ tabs[activeTab].content }}</code></pre>
21+
</div>
22+
</div>
23+
</template>
24+
25+
<script>
26+
export default {
27+
name: 'CodeTabs',
28+
props: {
29+
tabs: {
30+
type: Array,
31+
required: true
32+
}
33+
},
34+
data() {
35+
return {
36+
activeTab: 0,
37+
copied: false
38+
}
39+
},
40+
watch: {
41+
activeTab() {
42+
this.highlight()
43+
}
44+
},
45+
mounted() {
46+
this.highlight()
47+
},
48+
methods: {
49+
highlight() {
50+
this.$nextTick(() => {
51+
if (typeof window !== 'undefined' && window.hljs && this.$refs.codeRef) {
52+
window.hljs.highlightElement(this.$refs.codeRef)
53+
}
54+
})
55+
},
56+
copyCode() {
57+
const text = this.tabs[this.activeTab].content
58+
navigator.clipboard.writeText(text).then(() => {
59+
this.copied = true
60+
setTimeout(() => (this.copied = false), 2000)
61+
})
62+
}
63+
}
64+
}
65+
</script>
66+
67+
<style scoped>
68+
.code-tabs {
69+
border: 1px solid #ccc;
70+
border-radius: 8px;
71+
overflow: hidden;
72+
margin-bottom: 1.5rem;
73+
}
74+
75+
.tab-buttons {
76+
display: flex;
77+
background-color: #2d2d2d;
78+
border-bottom: 1px solid #444;
79+
}
80+
81+
.tab-buttons button {
82+
padding: 0.85em;
83+
flex: 1;
84+
background: none;
85+
border: none;
86+
cursor: pointer;
87+
font-weight: 500;
88+
color: #ccc;
89+
}
90+
91+
.tab-buttons button.active {
92+
color: #fff;
93+
border-bottom: 2px solid #1994f9;
94+
font-weight: bold;
95+
}
96+
97+
.tab-content {
98+
position: relative;
99+
background-color: #2d2d2d;
100+
font-family: monospace;
101+
padding: 1rem;
102+
}
103+
104+
.code-block-wrapper {
105+
background-color: #2d2d2d;
106+
padding: 12px;
107+
position: relative;
108+
overflow: hidden;
109+
}
110+
111+
pre {
112+
margin: 0;
113+
background-color: transparent;
114+
color: #2d2d2d;
115+
font-size: 14px;
116+
overflow-x: auto;
117+
white-space: pre-wrap;
118+
word-wrap: break-word;
119+
max-width: 100%;
120+
line-height: 1.5;
121+
box-shadow: none;
122+
}
123+
124+
code {
125+
color: #ccc;
126+
background: none;
127+
display: block;
128+
white-space: pre-wrap;
129+
word-wrap: break-word;
130+
}
131+
132+
.copy-button {
133+
position: absolute;
134+
top: 0.5rem;
135+
right: 0.5rem;
136+
background: none;
137+
border: none;
138+
cursor: pointer;
139+
padding: 0.2rem;
140+
z-index: 10;
141+
}
142+
143+
.copy-button svg {
144+
fill: #ccc;
145+
width: 20px;
146+
height: 20px;
147+
transition: fill 0.2s;
148+
}
149+
150+
.copy-button:hover svg {
151+
fill: #1994f9;
152+
}
153+
154+
.language-bash {
155+
font-size: 0.85em;
156+
padding: 0;
157+
}
158+
</style>
159+

‎docs/.vuepress/components/CodeWithCopy.vue

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<template>
2+
<div class="code-block-wrapper">
3+
<button class="copy-button" @click="copyCode" aria-label="Copy code">
4+
<svg v-if="!copied" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" class="copy-icon">
5+
<path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path>
6+
<path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path>
7+
</svg>
8+
<svg v-else xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" class="copy-icon">
9+
<path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path>
10+
</svg>
11+
</button>
12+
<slot />
13+
</div>
14+
</template>
15+
16+
<script setup>
17+
import { ref } from 'vue';
18+
19+
const copied = ref(false);
20+
21+
function copyCode() {
22+
const code = document.querySelector('.code-block-wrapper pre code')?.innerText;
23+
if (code) {
24+
navigator.clipboard.writeText(code);
25+
copied.value = true;
26+
27+
setTimeout(() => {
28+
copied.value = false;
29+
}, 2000);
30+
}
31+
}
32+
</script>
33+
34+
<style scoped>
35+
.copy-button svg {
36+
transition: fill 0.3s;
37+
}
38+
39+
.copy-icon {
40+
fill: #ccc;
41+
width: 20px;
42+
height: 20px;
43+
}
44+
45+
.code-block-wrapper {
46+
position: relative;
47+
}
48+
49+
.copy-button {
50+
position: absolute;
51+
top: 0.5rem;
52+
right: 0.5rem;
53+
background: none;
54+
border: none;
55+
cursor: pointer;
56+
padding: 0.2rem;
57+
z-index: 10;
58+
}
59+
60+
.copy-button:hover .copy-icon {
61+
fill: #1994f9;
62+
}
63+
</style>

0 commit comments

Comments
 (0)