Skip to content

Commit fcab638

Browse files
iceljciceljc
authored
Merge pull request #458 from iceljc/features/refactor-project-styling
refine instruction testing
2 parents 75a7fba + 422d5b0 commit fcab638

19 files changed

Lines changed: 276 additions & 34 deletions

File tree

‎src/lib/common/dropdowns/FullScreenDropdown.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
<div class="ms-1 hidden lg:inline-block">
4646
<button
4747
onclick={toggleFullscreen}
48-
class="inline-flex h-[var(--header-height)] items-center px-3 text-gray-600 transition-colors hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
48+
class="inline-flex h-[var(--header-height)] cursor-pointer items-center px-3 text-gray-600 transition-colors hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
4949
aria-label="Toggle fullscreen"
5050
>
5151
<i class={isFullScreenMode ? 'bx bx-fullscreen text-[22px]' : 'bx bx-exit-fullscreen text-[22px]'}></i>

‎src/lib/common/dropdowns/LanguageDropdown.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
>
3939
<button
4040
type="button"
41-
class="inline-flex h-[var(--header-height)] items-center px-3 text-gray-600 transition-colors hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
41+
class="inline-flex h-[var(--header-height)] cursor-pointer items-center px-3 text-gray-600 transition-colors hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
4242
aria-label="Select language"
4343
onclick={() => (isOpen = !isOpen)}
4444
>
@@ -53,7 +53,7 @@
5353
{#each languages as language}
5454
<button
5555
type="button"
56-
class={`flex w-full items-center px-4 py-2 text-sm transition-colors hover:bg-gray-100 dark:hover:bg-gray-700 ${
56+
class={`flex w-full cursor-pointer items-center px-4 py-2 text-sm transition-colors hover:bg-gray-100 dark:hover:bg-gray-700 ${
5757
selectedLang === language.value
5858
? 'bg-gray-50 text-primary dark:bg-gray-700'
5959
: 'text-gray-700 dark:text-gray-200'

‎src/lib/common/dropdowns/NotificationDropdown.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
>
2222
<button
2323
type="button"
24-
class="relative inline-flex h-[var(--header-height)] items-center px-3 text-[22px] text-gray-600 transition-colors hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
24+
class="relative inline-flex h-[var(--header-height)] cursor-pointer items-center px-3 text-[22px] text-gray-600 transition-colors hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
2525
aria-label="Notifications"
2626
onclick={() => (isOpen = !isOpen)}
2727
>

‎src/lib/common/dropdowns/ProfileDropdown.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
>
5252
<button
5353
type="button"
54-
class="inline-flex h-[var(--header-height)] items-center px-3 text-gray-600 transition-colors hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
54+
class="inline-flex h-[var(--header-height)] cursor-pointer items-center px-3 text-gray-600 transition-colors hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
5555
id="page-header-user-dropdown"
5656
aria-label="User menu"
5757
onclick={() => (isOpen = !isOpen)}
@@ -87,7 +87,7 @@
8787
<div class="my-1 h-px bg-gray-200 dark:bg-gray-700"></div>
8888
<button
8989
type="button"
90-
class="flex w-full items-center px-4 py-2 text-sm text-gray-700 transition-colors hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
90+
class="flex w-full cursor-pointer items-center px-4 py-2 text-sm text-gray-700 transition-colors hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
9191
onclick={() => logout()}
9292
>
9393
<i class="bx bx-power-off me-2 align-middle text-base text-danger"></i>

‎src/lib/common/modals/StateModal.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -217,7 +217,7 @@
217217
<div class="min-w-0" style="flex: 0.4;">
218218
{#if idx === 0}
219219
<label for={`stm-key-${idx}`} class="stm-label">
220-
{`Key ${validateKey ? '*' : ''}`}
220+
{`Name ${validateKey ? '*' : ''}`}
221221
</label>
222222
{/if}
223223
<input

‎src/lib/common/shared/InPlaceEdit.svelte‎

Lines changed: 110 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -45,14 +45,15 @@
4545
/** @param {HTMLInputElement} element */
4646
function focus(element) {
4747
element.focus();
48+
element.select();
4849
}
4950
</script>
5051
5152
{#if editing}
5253
<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
53-
<form onsubmit={(e) => { e.preventDefault(); submit(); }} onkeydown={e => keydown(e)}>
54+
<form class="ipe-form" onsubmit={(e) => { e.preventDefault(); submit(); }} onkeydown={e => keydown(e)}>
5455
<input
55-
class="form-control"
56+
class="form-control ipe-input"
5657
bind:value={value}
5758
{required}
5859
maxlength={maxLength}
@@ -64,11 +65,114 @@
6465
{:else}
6566
<!-- svelte-ignore a11y_click_events_have_key_events -->
6667
<!-- svelte-ignore a11y_no_static_element_interactions -->
67-
<div style="width: fit-content; min-width: 30%;" class="clickable ellipsis" onclick={() => edit()}>
68+
<div
69+
class="ipe-display"
70+
title="Click to edit"
71+
onclick={() => edit()}
72+
>
6873
{#if !!value?.trim()}
69-
<span>{value}</span>
74+
<span class="ipe-text">{value}</span>
7075
{:else}
71-
<span class="text-secondary fw-light">{placeholder}</span>
76+
<span class="ipe-text ipe-placeholder">{placeholder}</span>
7277
{/if}
78+
<i class="mdi mdi-pencil-outline ipe-pencil" aria-hidden="true"></i>
7379
</div>
74-
{/if}
80+
{/if}
81+
82+
<style>
83+
/* Display affordance — text reads as static copy, but a soft tinted
84+
pill, dashed underline, and fade-in pencil glyph signal that the
85+
value is editable on hover. */
86+
.ipe-display {
87+
display: inline-flex;
88+
align-items: center;
89+
gap: 0.375rem;
90+
width: fit-content;
91+
min-width: 30%;
92+
max-width: 100%;
93+
padding: 0.125rem 0.5rem;
94+
border: 1px solid transparent;
95+
border-radius: 0.375rem;
96+
cursor: text;
97+
transition:
98+
background-color 0.15s ease,
99+
border-color 0.15s ease,
100+
color 0.15s ease;
101+
}
102+
103+
.ipe-text {
104+
flex: 0 1 auto;
105+
min-width: 0;
106+
overflow: hidden;
107+
text-overflow: ellipsis;
108+
white-space: nowrap;
109+
border-bottom: 1px dashed transparent;
110+
transition: border-color 0.15s ease;
111+
}
112+
113+
.ipe-placeholder {
114+
color: var(--color-secondary);
115+
font-weight: 300;
116+
font-style: italic;
117+
}
118+
119+
.ipe-display:hover {
120+
background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
121+
border-color: color-mix(in srgb, var(--color-primary) 22%, transparent);
122+
}
123+
.ipe-display:hover .ipe-text {
124+
border-bottom-color: color-mix(in srgb, var(--color-primary) 55%, transparent);
125+
}
126+
127+
/* Pencil hint — invisible by default, fades in on hover so it does
128+
not steal space or attention while idle. */
129+
.ipe-pencil {
130+
flex-shrink: 0;
131+
font-size: 0.875rem;
132+
line-height: 1;
133+
color: var(--color-primary);
134+
opacity: 0;
135+
transform: translateX(-2px);
136+
transition: opacity 0.15s ease, transform 0.15s ease;
137+
}
138+
.ipe-display:hover .ipe-pencil {
139+
opacity: 0.8;
140+
transform: translateX(0);
141+
}
142+
143+
/* Editing input — overrides Bootstrap's flat .form-control so it
144+
blends with the surrounding text and shows a primary-tinted focus
145+
ring instead of the default blue one. */
146+
.ipe-form {
147+
margin: 0;
148+
width: 100%;
149+
}
150+
.ipe-input.form-control {
151+
width: 100%;
152+
padding: 0.25rem 0.5rem;
153+
font: inherit;
154+
color: inherit;
155+
background-color: rgb(255 255 255);
156+
border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
157+
border-radius: 0.375rem;
158+
box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
159+
transition: border-color 0.15s ease, box-shadow 0.15s ease;
160+
}
161+
.ipe-input.form-control:focus {
162+
border-color: var(--color-primary);
163+
outline: 0;
164+
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent);
165+
}
166+
167+
/* Dark mode — bump tint strength and swap the input surface so the
168+
component remains legible on darker panels. */
169+
:global(.dark) .ipe-display:hover {
170+
background-color: color-mix(in srgb, var(--color-primary) 18%, transparent);
171+
border-color: color-mix(in srgb, var(--color-primary) 32%, transparent);
172+
}
173+
:global(.dark) .ipe-input.form-control {
174+
background-color: rgb(17 24 39);
175+
color: rgb(229 231 235);
176+
border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
177+
}
178+
</style>

‎src/lib/styles/pages/_agent.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -898,6 +898,18 @@
898898
.ao-chat-btn { animation: none; }
899899
}
900900

901+
@media (max-width: 768px) {
902+
.ao-chat-btn {
903+
gap: 0;
904+
padding: 0;
905+
width: 1.875rem;
906+
justify-content: center;
907+
}
908+
.ao-chat-btn-label {
909+
display: none;
910+
}
911+
}
912+
901913

902914
.ao-name {
903915
margin: 0.25rem 0;

‎src/routes/VerticalLayout/Header.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@
9595
9696
<button
9797
type="button"
98-
class="ml-1 inline-flex h-10 w-10 items-center justify-center rounded text-base text-gray-600 transition-colors hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
98+
class="ml-1 inline-flex h-10 w-10 cursor-pointer items-center justify-center rounded text-base text-gray-600 transition-colors hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
9999
id="vertical-menu-btn"
100100
aria-label="Toggle sidebar"
101101
onclick={() => toggleSideBar()}

‎src/routes/chat/[agentId]/[conversationId]/instant-log/latest-state-log.svelte‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
<JSONTree
1818
value={formatObject(data)}
1919
defaultExpandedLevel={1}
20+
--json-tree-font-family="var(--font-code)"
2021
--json-tree-property-color="white"
2122
--json-tree-label-color="white"
2223
--json-tree-number-color="var(--color-info, #0ea5e9)"

‎src/routes/chat/[agentId]/[conversationId]/persist-log/conversation-state-log-element.svelte‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
<div class="csle-content log-content">
1717
<JSONTree
1818
value={formatObject(data?.states)}
19+
--json-tree-font-family="var(--font-code)"
1920
--json-tree-property-color="white"
2021
--json-tree-label-color="white"
2122
--json-tree-number-color="var(--color-info, #0ea5e9)"

0 commit comments

Comments
 (0)