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
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
hyeryung
SWLab UI
Commits
f207487b
Commit
f207487b
authored
6 months ago
by
minseok.park
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
update chat btn
parent
5cd36372
Hide whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
130 additions
and
111 deletions
+130
-111
toc.css
src/css/toc.css
+68
-57
ico-camera.svg
src/img/ico-camera.svg
+0
-1
08-capture.js
src/js/08-capture.js
+0
-45
08-chat.js
src/js/08-chat.js
+40
-0
default.hbs
src/layouts/default.hbs
+1
-1
footer-scripts.hbs
src/partials/footer-scripts.hbs
+0
-1
toc.hbs
src/partials/toc.hbs
+21
-6
No files found.
src/css/toc.css
View file @
f207487b
...
...
@@ -100,7 +100,7 @@
background
:
var
(
--color-blue-10
);
}
.sidebar
.c
apture
-btn
{
.sidebar
.c
hat
-btn
{
cursor
:
pointer
;
display
:
flex
;
justify-content
:
center
;
...
...
@@ -115,81 +115,92 @@
box-shadow
:
0
2px
2px
0
rgba
(
0
,
0
,
0
,
0.14
),
0
1px
5px
0
rgba
(
0
,
0
,
0
,
0.12
),
0
3px
1px
-2px
rgba
(
0
,
0
,
0
,
0.2
);
}
.sidebar
.c
apture
-btn
:hover
{
.sidebar
.c
hat
-btn
:hover
{
transition
:
transform
0.2s
ease-in-out
;
background-color
:
rgba
(
0
,
114
,
206
,
0.8
);
transform
:
scale
(
1.1
);
}
.sidebar
.capture-btn
>
i
{
background
:
url(../img/ico-camera.svg)
no-repeat
center
;
display
:
inline-block
;
width
:
22px
;
height
:
22px
;
}
.capture-modal
{
.chat
{
display
:
none
;
position
:
fixed
;
z-index
:
1000
;
left
:
0
;
top
:
0
;
width
:
100%
;
height
:
100%
;
overflow
:
auto
;
background-color
:
rgba
(
0
,
0
,
0
,
0.6
);
right
:
10px
;
bottom
:
100px
;
width
:
415px
;
height
:
600px
;
/* 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
;
}
.capture-modal
.button-container
{
position
:
absolute
;
top
:
20px
;
right
:
25px
;
.chat.show
{
display
:
flex
;
align-items
:
center
;
color
:
var
(
--color-white
);
cursor
:
pointer
;
flex-direction
:
column
;
}
.capture-modal
.button-container
.close
{
font-size
:
40px
;
font-weight
:
bold
;
.chat
.chat-head
{
background-color
:
var
(
--color-bwg-main
);
height
:
100px
;
border-top-left-radius
:
30px
;
border-top-right-radius
:
30px
;
}
.capture-modal
.button-container
.close
:hover
{
transform
:
translateY
(
-3px
);
transition
:
200ms
ease
;
.chat
.chat-body
{
padding
:
1rem
;
height
:
420px
;
border-bottom
:
1px
solid
var
(
--color-bwg-main
);
overflow-y
:
auto
;
}
.c
apture-modal
.button-container
>
i
{
background
:
url(../img/ico-capture-download.svg)
no-repeat
center
;
display
:
inline-block
;
width
:
2
0px
;
height
:
20
px
;
margin-right
:
20px
;
.c
hat
.chat-area
{
display
:
flex
;
justify-content
:
center
;
height
:
8
0px
;
padding
:
5
px
;
padding-right
:
1rem
;
}
.capture-modal
.button-container
>
i
:hover
{
transform
:
translateY
(
-3px
);
transition
:
200ms
ease
;
.chat
.chat-area
textarea
{
border
:
none
;
outline
:
none
;
padding
:
0
;
width
:
100%
;
height
:
55px
;
padding
:
10px
;
resize
:
none
;
/* 사용자가 크기를 변경하지 못하게 설정 */
font-size
:
16px
;
line-height
:
1.5
;
}
.capture-modal
>
img
{
width
:
100%
;
height
:
100%
;
position
:
fixed
;
top
:
0
;
left
:
0
;
opacity
:
1
;
transform
:
scale
(
0.8
);
z-index
:
99999
;
}
.capture-modal-content
{
background-color
:
#fefefe
;
margin
:
15%
auto
;
padding
:
20px
;
border
:
1px
solid
#888
;
width
:
80%
;
max-width
:
500px
;
text-align
:
center
;
.chat
.chat-area
textarea
:focus
{
outline
:
none
;
}
.chat
.chat-area
.chat-btn-area
{
display
:
flex
;
align-items
:
center
;
width
:
40px
;
height
:
70px
;
}
.chat
.chat-area
.chat-btn-area
.send-btn
{
cursor
:
pointer
;
display
:
flex
;
justify-content
:
center
;
align-items
:
center
;
width
:
40px
;
height
:
40px
;
border-radius
:
50%
;
background-color
:
var
(
--color-bwg-main
);
}
.chat
.chat-area
.chat-btn-area
.send-btn
:active
{
opacity
:
0.7
;
transition
:
0.3ms
ease
;
}
.chat
.chat-area
.chat-btn-area
.send-btn
svg
{
margin-left
:
2px
;
}
This diff is collapsed.
Click to expand it.
src/img/ico-camera.svg
deleted
100644 → 0
View file @
5cd36372
<svg
xmlns=
"http://www.w3.org/2000/svg"
width=
"22"
height=
"22"
viewBox=
"0 0 512 512"
>
<!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path
fill=
"#ffffff"
d=
"M149.1 64.8L138.7 96H64C28.7 96 0 124.7 0 160V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H373.3L362.9 64.8C356.4 45.2 338.1 32 317.4 32H194.6c-20.7 0-39 13.2-45.5 32.8zM256 192a96 96 0 1 1 0 192 96 96 0 1 1 0-192z"
/></svg>
This diff is collapsed.
Click to expand it.
src/js/08-capture.js
deleted
100644 → 0
View file @
5cd36372
;(
function
()
{
'use strict'
var
captureBody
=
document
.
getElementById
(
'capture'
)
var
captureButton
=
document
.
querySelector
(
'.sidebar .capture-btn'
)
var
captureModal
=
document
.
querySelector
(
'.sidebar .capture-modal'
)
var
closeCaptureModalButton
=
document
.
querySelector
(
'.sidebar .capture-modal .close'
)
var
screenshotImg
=
document
.
getElementById
(
'screenshot'
)
var
saveButton
=
document
.
getElementById
(
'save-btn'
)
captureButton
.
addEventListener
(
'click'
,
()
=>
{
const
viewportWidth
=
window
.
innerWidth
const
viewportHeight
=
window
.
innerHeight
const
scrollX
=
window
.
scrollX
const
scrollY
=
window
.
scrollY
html2canvas
(
captureBody
,
{
allowTaint
:
true
,
x
:
scrollX
,
y
:
scrollY
,
width
:
viewportWidth
,
height
:
viewportHeight
,
scrollX
:
0
,
// reset scrollX for canvas capturing
scrollY
:
0
,
// reset scrollY for canvas capturing
scale
:
1.3
,
}).
then
(
canvas
=>
{
screenshotImg
.
src
=
canvas
.
toDataURL
()
captureModal
.
style
.
display
=
'block'
})
})
closeCaptureModalButton
.
addEventListener
(
'click'
,
()
=>
{
captureModal
.
style
.
display
=
'none'
})
saveButton
.
addEventListener
(
'click'
,
()
=>
{
var
link
=
document
.
createElement
(
'a'
)
link
.
href
=
screenshotImg
.
src
link
.
download
=
'screenshot.png'
link
.
click
()
document
.
removeChild
(
link
)
})
})()
This diff is collapsed.
Click to expand it.
src/js/08-chat.js
0 → 100644
View file @
f207487b
;(
function
()
{
'use strict'
const
chatButton
=
document
.
querySelector
(
'.sidebar .chat-btn'
)
const
chat
=
document
.
querySelector
(
'.sidebar .chat'
)
const
chatIcon
=
document
.
querySelector
(
'.sidebar .chat-btn svg'
)
// 기본 아이콘과 변경할 아이콘의 SVG 경로 데이터
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>
`
const
closeIconPath
=
`
<path stroke-linecap="round" stroke-linejoin="round"
d="M6 18 18 6M6 6l12 12"></path>
`
chatButton
.
addEventListener
(
'click'
,
()
=>
{
chat
.
classList
.
toggle
(
'show'
)
if
(
chat
.
classList
.
contains
(
'show'
))
{
chatIcon
.
innerHTML
=
closeIconPath
chatIcon
.
setAttribute
(
'fill'
,
'none'
)
chatIcon
.
setAttribute
(
'stroke'
,
'#fff'
)
chatIcon
.
setAttribute
(
'viewBox'
,
'0 0 24 24'
)
}
else
{
chatIcon
.
innerHTML
=
openIconPath
chatIcon
.
setAttribute
(
'fill'
,
'#fff'
)
chatIcon
.
setAttribute
(
'stroke'
,
'#0072ce'
)
chatIcon
.
setAttribute
(
'viewBox'
,
'0 0 20 20'
)
}
})
})()
This diff is collapsed.
Click to expand it.
src/layouts/default.hbs
View file @
f207487b
...
...
@@ -3,7 +3,7 @@
<head>
{{>
head
defaultPageTitle
=
'Untitled'
}}
</head>
<body
id=
"capture"
class=
"article
{{#
with
(
or
page
.
attributes
.
role
page
.
role
)
}}
{{{
this
}}}{{/
with
}}
"
>
<body
class=
"article
{{#
with
(
or
page
.
attributes
.
role
page
.
role
)
}}
{{{
this
}}}{{/
with
}}
"
>
{{>
header
}}
{{>
body
}}
{{!-- {{> footer}} --}}
...
...
This diff is collapsed.
Click to expand it.
src/partials/footer-scripts.hbs
View file @
f207487b
<script
id=
"site-script"
src=
"
{{{
uiRootPath
}}}
/js/site.js"
data-ui-root-path=
"
{{{
uiRootPath
}}}
"
></script>
<script
async
src=
"
{{{
uiRootPath
}}}
/js/vendor/html2canvas.js"
></script>
<script
async
src=
"
{{{
uiRootPath
}}}
/js/vendor/highlight.js"
></script>
{{#if
env
.
SITE_SEARCH_PROVIDER
}}
{{>
search-scripts
}}
...
...
This diff is collapsed.
Click to expand it.
src/partials/toc.hbs
View file @
f207487b
<aside
class=
"toc sidebar"
data-title=
"
{{{
or
page
.
attributes
.
toctitle
'Contents'
}}}
"
data-levels=
"
{{{
or
page
.
attributes
.
toclevels
2
}}}
"
>
<div
class=
"toc-menu"
></div>
<div
class=
"capture-btn"
><i></i></div>
<div
class=
"capture-modal"
>
<div
class=
"button-container"
>
<i
id=
"save-btn"
></i>
<span
class=
"close"
>
×
</span>
{{!-- <div class="chat-btn">
<svg id="chat-icon" data-slot="icon" fill="#fff" stroke-width="1.5" stroke="#0072ce" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="32" height="32">
<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>
</svg>
</div> --}}
<div
class=
"chat"
>
<div
class=
"chat-head"
>
</div>
<div
class=
"chat-body"
>
</div>
<div
class=
"chat-area"
>
<textarea
id=
"chat-input"
placeholder=
"무엇을 도와드릴까요?"
></textarea>
<div
class=
"chat-btn-area"
>
<div
class=
"send-btn"
>
<svg
data-slot=
"icon"
fill=
"#fff"
viewBox=
"0 0 24 24"
xmlns=
"http://www.w3.org/2000/svg"
aria-hidden=
"true"
width=
"20"
height=
"20"
>
<path
d=
"M3.478 2.404a.75.75 0 0 0-.926.941l2.432 7.905H13.5a.75.75 0 0 1 0 1.5H4.984l-2.432 7.905a.75.75 0 0 0 .926.94 60.519 60.519 0 0 0 18.445-8.986.75.75 0 0 0 0-1.218A60.517 60.517 0 0 0 3.478 2.404Z"
></path>
</svg>
</div>
</div>
</div>
<img
id=
"screenshot"
src=
""
alt=
"Screenshot"
crossorigin=
"anonymous"
>
</div>
</aside>
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