Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
S
SWLab UI
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Jobs
Commits
Open sidebar
SWD
SWLab UI
Commits
d2856e7a
Commit
d2856e7a
authored
6 months ago
by
minseok.park
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
update chat ui -- add expand btn & update icons
parent
a8a3db7b
Pipeline
#20428
failed with stages
in 1 minute and 34 seconds
Changes
3
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
95 additions
and
19 deletions
+95
-19
toc.css
src/css/toc.css
+38
-8
08-chat.js
src/js/08-chat.js
+52
-11
toc.hbs
src/partials/toc.hbs
+5
-0
No files found.
src/css/toc.css
View file @
d2856e7a
...
...
@@ -132,7 +132,16 @@
/* overflow: hidden; */
background-color
:
#fff
;
box-shadow
:
0
1px
2px
1px
rgba
(
47
,
56
,
61
,
0.15
),
0
1px
2px
rgba
(
47
,
56
,
61
,
0.2
);
border-radius
:
30px
;
border-radius
:
12px
;
}
.chat.expand
{
width
:
830px
;
height
:
650px
;
/* overflow: hidden; */
background-color
:
#fff
;
box-shadow
:
0
1px
2px
1px
rgba
(
47
,
56
,
61
,
0.15
),
0
1px
2px
rgba
(
47
,
56
,
61
,
0.2
);
border-radius
:
12px
;
}
.chat.show
{
...
...
@@ -146,8 +155,8 @@
padding
:
0
1.5rem
;
background-color
:
var
(
--color-bwg-main
);
height
:
80px
;
border-top-left-radius
:
30
px
;
border-top-right-radius
:
30
px
;
border-top-left-radius
:
12
px
;
border-top-right-radius
:
12
px
;
color
:
var
(
--color-white
);
}
...
...
@@ -166,6 +175,7 @@
display
:
flex
;
flex-direction
:
column
;
justify-content
:
center
;
flex-grow
:
1
;
}
.chat-logo-title-contents
.chat-logo-title
{
...
...
@@ -178,6 +188,26 @@
font-weight
:
300
;
}
#expand-btn
{
display
:
flex
;
justify-content
:
center
;
align-items
:
center
;
width
:
35px
;
height
:
35px
;
cursor
:
pointer
;
border-radius
:
6px
;
transition
:
300ms
ease
;
}
#expand-btn
:hover
{
cursor
:
pointer
;
background-color
:
#005bb5
;
}
#expand-btn
:active
svg
{
transform
:
scale
(
0.9
);
}
.chat
.chat-body
{
padding
:
1rem
;
height
:
420px
;
...
...
@@ -224,8 +254,8 @@
.chat
.chat-area
{
display
:
flex
;
justify-content
:
center
;
height
:
8
0px
;
padding
:
5
px
;
height
:
10
0px
;
padding
:
10
px
;
padding-right
:
1rem
;
gap
:
10px
;
}
...
...
@@ -234,8 +264,8 @@
border
:
none
;
outline
:
none
;
width
:
100%
;
height
:
55px
;
padding
:
10px
;
/* height: 55px; */
height
:
100%
;
resize
:
none
;
/* 사용자가 크기를 변경하지 못하게 설정 */
font-size
:
16px
;
line-height
:
1.5
;
...
...
@@ -249,7 +279,7 @@
display
:
flex
;
align-items
:
center
;
width
:
40px
;
height
:
70px
;
height
:
100%
;
}
#send-btn
{
...
...
This diff is collapsed.
Click to expand it.
src/js/08-chat.js
View file @
d2856e7a
...
...
@@ -7,6 +7,7 @@
const
chatTextArea
=
document
.
getElementById
(
'chat-input'
)
const
sendButton
=
document
.
getElementById
(
'send-btn'
)
const
chatBody
=
document
.
querySelector
(
'.sidebar .chat .chat-body'
)
const
expandButton
=
document
.
querySelector
(
'#expand-btn svg'
)
let
INIT
=
false
let
isComposing
=
false
...
...
@@ -14,18 +15,42 @@
const
openIconPath
=
`
<path stroke-linecap="round" stroke-linejoin="round"
d="M7.188 10a.312.312 0 1 1-.625 0
.312.312 0 0 1 .625 0Zm0 0h-.313m3.438 0a.312.312 0
1 1-.625 0 .312.312 0 0 1 .625 0Zm0 0h-.313m3.437 0a.312.312 0
1 1-.625 0 .312.312 0 0 1 .625 0Zm0 0h-.312M17.5 10c0 3.797-3.353
6.875-7.5 6.875a8.735 8.735 0 0 1-2.292-.303 5.368 5.368 0 0 1-3.639
1.576 5.364 5.364 0 0 1-.428-.059 4.025 4.025 0 0 0 .88-1.818c.081-.409
-.12-.806-.422-1.098C3.273 13.484 2.5 11.825 2.5 10c0-3.797 3.353-6.875
7.5-6.875s7.5 3.078 7.5 6.875Z"></path>
d="M7.188 10a.312.312 0 1 1-.625 0
.312.312 0 0 1 .625 0Zm0 0h-.313m3.438 0a.312.312 0
1 1-.625 0 .312.312 0 0 1 .625 0Zm0 0h-.313m3.437 0a.312.312 0
1 1-.625 0 .312.312 0 0 1 .625 0Zm0 0h-.312M17.5 10c0 3.797-3.353
6.875-7.5 6.875a8.735 8.735 0 0 1-2.292-.303 5.368 5.368 0 0 1-3.639
1.576 5.364 5.364 0 0 1-.428-.059 4.025 4.025 0 0 0 .88-1.818c.081-.409
-.12-.806-.422-1.098C3.273 13.484 2.5 11.825 2.5 10c0-3.797 3.353-6.875
7.5-6.875s7.5 3.078 7.5 6.875Z"></path>
`
const
closeIconPath
=
`
<path stroke-linecap="round" stroke-linejoin="round"
d="M6 18 18 6M6 6l12 12"></path>
<path clip-rule="evenodd" fill-rule="evenodd"
d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12
14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z"></path>
`
const
collapseIconPath
=
`
<path
d="M3.28 2.22a.75.75 0 0 0-1.06 1.06L5.44 6.5H2.75a.75.75 0 0 0 0 1.5h4.5
A.75.75 0 0 0 8 7.25v-4.5a.75.75 0 0 0-1.5 0v2.69L3.28 2.22ZM13.5 2.75
a.75.75 0 0 0-1.5 0v4.5c0 .414.336.75.75.75h4.5a.75.75 0 0 0 0-1.5h-2.69l3.22-3.22
a.75.75 0 0 0-1.06-1.06L13.5 5.44V2.75ZM3.28 17.78l3.22-3.22v2.69a.75.75 0 0 0 1.5
0v-4.5a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0 0 1.5h2.69l-3.22 3.22a.75.75
0 1 0 1.06 1.06ZM13.5 14.56l3.22 3.22a.75.75 0 1 0 1.06-1.06l-3.22-3.22h2.69
a.75.75 0 0 0 0-1.5h-4.5a.75.75 0 0 0-.75.75v4.5a.75.75 0 0 0 1.5 0v-2.69Z">
</path>
`
const
expandIconPath
=
`
<path d="
m13.28 7.78 3.22-3.22v2.69a.75.75 0 0 0 1.5 0v-4.5a.75.75 0 0 0-.75-.75h-4.5a.75.75
0 0 0 0 1.5h2.69l-3.22 3.22a.75.75 0 0 0 1.06 1.06ZM2 17.25v-4.5a.75.75 0 0 1 1.5 0v2.69l3.22-3.22a.75.75
0 0 1 1.06 1.06L4.56 16.5h2.69a.75.75 0 0 1 0 1.5h-4.5a.747.747 0 0 1-.75-.75ZM12.22
13.28l3.22 3.22h-2.69a.75.75 0 0 0 0 1.5h4.5a.747.747 0 0 0 .75-.75v-4.5a.75.75
0 0 0-1.5 0v2.69l-3.22-3.22a.75.75 0 1 0-1.06 1.06ZM3.5 4.56l3.22 3.22a.75.75
0 0 0 1.06-1.06L4.56 3.5h2.69a.75.75 0 0 0 0-1.5h-4.5a.75.75 0 0 0-.75.75v4.5a.75.75 0 0 0 1.5 0V4.56Z">
</path>
`
function
initializeChat
()
{
...
...
@@ -72,7 +97,7 @@
chatIcon
.
innerHTML
=
closeIconPath
chatIcon
.
setAttribute
(
'fill'
,
'none'
)
chatIcon
.
setAttribute
(
'stroke'
,
'#fff'
)
chatIcon
.
setAttribute
(
'viewBox'
,
'0
0
24 24'
)
chatIcon
.
setAttribute
(
'viewBox'
,
'0
-1
24 24'
)
}
else
{
chatIcon
.
innerHTML
=
openIconPath
chatIcon
.
setAttribute
(
'fill'
,
'#fff'
)
...
...
@@ -85,6 +110,22 @@
}
})
expandButton
.
addEventListener
(
'click'
,
()
=>
{
expandButton
.
classList
.
toggle
(
'expand'
)
if
(
expandButton
.
classList
.
contains
(
'expand'
))
{
expandButton
.
innerHTML
=
collapseIconPath
expandButton
.
setAttribute
(
'fill'
,
'#fff'
)
expandButton
.
setAttribute
(
'viewBox'
,
'0 0 20 20'
)
chat
?.
classList
.
add
(
'expand'
)
}
else
{
expandButton
.
innerHTML
=
expandIconPath
expandButton
.
setAttribute
(
'fill'
,
'#fff'
)
expandButton
.
setAttribute
(
'viewBox'
,
'0 0 20 20'
)
chat
?.
classList
.
remove
(
'expand'
)
}
})
function
handleUserMessage
(
message
)
{
if
(
message
.
trim
()
!==
''
)
{
addMessageToChatBody
(
message
)
...
...
This diff is collapsed.
Click to expand it.
src/partials/toc.hbs
View file @
d2856e7a
...
...
@@ -12,6 +12,11 @@
<span
class=
"chat-logo-title"
>
SWLab
</span>
<span
class=
"chat-logo-title sub"
>
Bankware Global
</span>
</div>
<div
id=
"expand-btn"
>
<svg
data-slot=
"icon"
fill=
"#fff"
viewBox=
"0 0 20 20"
xmlns=
"http://www.w3.org/2000/svg"
aria-hidden=
"true"
width=
"30"
height=
"30"
>
<path
d=
"m13.28 7.78 3.22-3.22v2.69a.75.75 0 0 0 1.5 0v-4.5a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0 0 1.5h2.69l-3.22 3.22a.75.75 0 0 0 1.06 1.06ZM2 17.25v-4.5a.75.75 0 0 1 1.5 0v2.69l3.22-3.22a.75.75 0 0 1 1.06 1.06L4.56 16.5h2.69a.75.75 0 0 1 0 1.5h-4.5a.747.747 0 0 1-.75-.75ZM12.22 13.28l3.22 3.22h-2.69a.75.75 0 0 0 0 1.5h4.5a.747.747 0 0 0 .75-.75v-4.5a.75.75 0 0 0-1.5 0v2.69l-3.22-3.22a.75.75 0 1 0-1.06 1.06ZM3.5 4.56l3.22 3.22a.75.75 0 0 0 1.06-1.06L4.56 3.5h2.69a.75.75 0 0 0 0-1.5h-4.5a.75.75 0 0 0-.75.75v4.5a.75.75 0 0 0 1.5 0V4.56Z"
></path>
</svg>
</div>
</div>
<div
class=
"chat-body"
></div>
<form
class=
"chat-area"
>
...
...
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment